BERMULA DARI MIMPI: Membuat Halaman Login Form Sederhana (Tanpa DataBase)

Ingin membuat sebuah login form sederhana seperti di bawah ini? di mana aplikasi web ini bisa berfungsi untuk menerima masukan dari user, ataupun saat administrator butuh masuk pada sistem. Tentunya memerlukan login form.

Pada aplikasi web, teknik pengiriman form dapat dilakukan melalui tiga
metode: POST, GET, dan kombinasi keduanya. Dalam konteks PHP,
parameter-parameter GET dapat dibaca melalui superglobal $_GET,
sedangkan POST melalui $_POST. Selain itu, keduanya juga dapat dibaca menggunakan $_REQUEST.

Berikut akan ditulis cara membuat sebuah login form sederhana menggunakan html. Dengan tampilan sebagai berikut:

dan kemudian diisi dengan user dan password dengan tampilan berikut (pada kali ini penulis menggunakan contoh password standart 00000 yang user dan passwordnya akan dapat di ubah pada file admin.php:

Berikut adalah kode html yang harus dibuat disimpan dengan nama ame6.html:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Login Form Ameliza</title> <link rel="stylesheet" href="ame.css" type="text/css" /> </head> <body onLoad="document.form1.user.focus(); backgroundimage= "bunga.jpg"> <form name="form1" method="post" action="admin.php"> <div id="apDiv1"> <div id="header"> </div> <div> <div align="center"> <img src="header.jpg" align="center"> <div align="center" height="50"> User Name : <input type="text" name="user" size="40" value="" style="background-color:#00FFFF"> Password : <input type="password" name="pass" size="40" style="background-color:#00FFFF"> <input type="submit" name="submit" value=" M A S U K " onClick="admin()"> </div> </div> <div align="center" id="apDiv3"> </div> <div id="footer" align="center"> ©Copyright --> Amee </div> </div> </form> </body> </html>

jangan lupa juga membuat file css-nya disimpan dengan nama ame.css:

 <style type="text/css"> #apDiv1 { position:absolute; width:370px; height:300px; z-index:1; left: 449px; top: 136px; background-color: #FFFFFF; border: 2px solid Red; } .style3 { font-size: 10px; font-weight: bold; } #apDiv2 { position:absolute; width:412px; height:115px; z-index:2; top: 0px; left: 2px; } #header{ left:450px; width:430px; height:85px; background-image: url(); } #footer{ position:absolute; width:373px; height:40px; } body { background-image: url(pudency.png); } </style> 

berikut adalah file php nya yang digunakan sebagai penyimpan data user dan login password di file inilah dapat mengubah password dan usernya. simpan dengan nama admin.php:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Form Administrator</title> </head> <body> <?php if(($_POST['user']=='ameliza') AND ($_POST['pass']=='00000')) { echo 'Selamat, Anda Telah Berhasil Masuk Halaman Administrator Dengan User Name :'.$_POST['user']; echo ' Haiiii...yang udah masuk makasih ' . $_POST['user']; } else { echo " <body text='red'><center>Terdapat Kesalahan Pada saat Anda Login...! <a href='ame6.html'><h4>Kembali Ke Login</h4></a></center></body>"; } ?> </body> </html>

Kemudian buat file javasriptnya yang disimpan dengan nama javasript.js:

 <script type="text/javascript"> function error1() { alert('Masukkan User Name dan Password Terlebih Dahulu '); } function check() { if(form1.pass.value == "" || form1.user.value=="") { error1(); } } </script> 

Pada form ini jika berhasil melakukan login maka akan muncul halaman konfirmasi keberhasilan memasuki sistem sebagai berikut:

dan jika gagal maka akan muncul konfirmasi adanya kesalahan dalam login user. dan jika di klik perintah kembali maka akan kembali ke form login awal :