Pemrosesan form (form processing) merupakan operasi mendasar pada aplikasi web. Dalam konteks pengembangan aplikasi web dinamis, langkah ini pasti akan dilakukan. Sebagai contoh, untuk menerima masukan dari user, tentu diperlukan sekali form isian dan cara pemrosesannya. Begitu pula halnya ketika administrator ingin masuk ke sistem, tentu memerlukan suatu antarmuka penghubung. Intinya, keberadaan form dan pemrosesannya mutlak diperlukan dalam membangun aplikasi web yang interaktif.
Berikut ini adalah cara untuk membuat login form tanpa menggunakan database.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Login Form Koala</title>
<style>
#apDiv1 {
position:absolute;
width:380px;
height:330px;
z-index:1;
left: 449px;
top: 136px;
background-color: #81A9F6;
border: 2px solid Blue;
}
#apDiv3 {
position:absolute;
width:80px;
height:25px;
z-index:2;
left: 289px;
top: 274px;
}
.style3 {
font-size: 10px;
font-weight: bold;
}
#apDiv2 {
position:absolute;
width:412px;
height:115px;
z-index:2;
top: 0px;
left: 2px;
}
#header{
width:380px;
height:98px;
background-image: url(way.jpg);
}
#footer{
width:380px;
height:40px;
background-image: url(way.jpg);
}
body {
background-image: url(koala.jpg);
}
</script>
</head>
<body onLoad=”document.form1.user.focus();”>
<form method=”post” action=”check.php”>
<div>
<div>
</div>
<div>
<div align=”center”><strong><br>User Name :</strong>
<br>
<input name=”user” size=”35″ value=”" style=”background-color:#C9EFF6″>
<br>
<br>
<strong>Password : </strong>
<br>
<input name=”pass” size=”35″ style=”background-color:#C9EFF6″>
<br>
<br>
</div>
</div>
<br>
<div>
<input name=”submit” value=” E N T E R ” onClick=”check()”>
</div>
<div align=”left”><br>
</div>
</div>
</form>
</body>
</html>
Sedangkan untuk memberikan warning kepada user untuk mengisi nama dan password,
Gunakan script seperti di bawah ini (masukkan dalam body):
</style>
<script>
function error1()
{
alert(‘Masukkan User Name dan Password Terlebih Dahulu ‘);
}
function check()
{
if(form1.pass.value == “” || form1.user.value==”")
{
error1();
}
}
Simpan dengan nama case1.html. Jika dijalankan, akan tampil seperti gambar di bawah ini
Selanjutnya, buat PHP sebagai simulasi verifikasi data yang dimasukkan. Karena tidak menggunakan database, maka data diikutkan dalam script. Pada kesempatan kali ini, id yang digunakan adalah “michael buble” dan password-nya adalah “190389”
Script yang digunakan sebagai berikut:
<!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 Admin</title>
</head>
<body>
<?php
if(($_POST['user']==’michael buble’) AND ($_POST['pass']==’190389′)) {
echo ‘Halo selamat datang. Semoga hari Anda menyenangkan, ‘.$_POST['user'];
}
else {
echo “<br><br><br><body text=’red’><strong><center>Id dan Password salah, silahkan coba lagi.
<br><br><a href=’case1.html’><h4>Kembali Ke Login</h4></a></center></strong></body>”;
}
?>
</body>
</html>
Script ini berfungsi mendeteksi kesalahan dalam memasukkan nama atau password. Jika id dan password benar, akan muncul seperti gambar di bawah ini:
Dan jika salah, akan memunculkan peringatan salah. Seperti ini:
Namun jika salah satu kolom tidak terisi, javascript sebagai warning akan muncul seperti ini:
-selamat mencoba-
