Spesifikasi untuk login form ini adalah:
>> Terdapat scripting JavaScript untuk validasi awal (field tidak boleh kosong, masukan id dan password harus huruf).
>> Jika field kosong dan langsung di-submit, kembalikan fokus kursor ke field pertama (id)
>> Ada validasi sisi server (dari PHP) untuk memastikan bahwa nilai
field adalah string.
>> Jika nilai id dan password sesuai dengan pre-defined value di variabel, munculkan pesan selamat datang dan cetak nilai id. Sebaliknya, jika tidak sesuai, tampilkan pesan kegagalan.
Ok..script yang harus dimasukkan adalah:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Login Form by_Rinda</title>
</head>
<body background="image.JPG" onLoad="document.form1.user.focus();">
<form name="form1" method="post" action="login.php">
<div width="400" height="400">
<div>
<div align="center"><font face="Arial" color="#FFFFFF" size="5"><strong><br>User Name :</strong>
<br>
<font face="Arial" color="#FFFFFF" size="5"><input type="text" name="user" size="35" value="" style="background-color:#FFFFFF">
<br>
<br>
<strong color="#FFFFF">Password : </strong>
<br>
<input type="password" name="pass" size="35" style="background-color:#FFFFFF">
<br>
<br>
</div>
</div>
<br>
<div align="center">
<input type="submit" name="submit" value=" L O G I N " onClick="check()">
</div>
<div id="footer" align="left"><br>
</div>
</div>
</div>
</form>
<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>
</body>
</html>
Simpan kode program di atas dengan nama login.html
Kemudian buat kode program phpnya:
<!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']=='rinda') AND ($_POST['pass']=='rinda')) {
echo '<br><br><center>Selamat Datang di Halaman ini USER ' . $_POST['user'];
}
else {
echo "<br><br><br><body text='red'><strong><center>INVALID LOGIN<br><br><a href='login.html'><h4>Kembali ke Login</h4></a></center></strong></body>";
}
?>
</body>
</html>
Simpan kodenya dengan nama login.php
Setelah itu jalankan aplikasi login form ini melalui local host yang sudah diaktifkan..
Tampilan aplikasi login form sederhana tanpa database seperti pada gambar berikut:
Untuk aplikasi login di atas, username yang digunakan adalah rinda dengan password rinda
Selamat belajar :-)
