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.
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.
Dengan PHP, kita bisa membua aplikasi login form sederhana (tanpa database) yang terdiri dari field ID/Username dan Password dengan menggunakan variabel di PHP untuk mensimulasikan verifikasi data yang dimasukkan.
Spesifikasi:
- Terdapat scripting JavaScript untuk validasi awal (field tidak boleh kosong, masukan id dan password harus huruf).
-Jika field kosong dan langsung disubmit, fokus kursor kembali ke field pertama (id)
- Ada validasi sisi server (dari PHP) untuk memastikan bahwa field adalah string.
- Jika nilai id dan password sesuai dengan pre-defined value di variabel, akan dimunculkan pesan selamat datang dan cetak nilai id. Sebaliknya, jika tidak sesuai, akan ditampilkan pesan kegagalan.
Dengan tampilan sebagai berikut:
Jika username dan password benar maka tampilannya sbb:
Jika username dan password salah maka tampilannya sbb:
Untuk listing codenya adalah sebagai berikut:
test.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" xml:lang="en" lang="en">
<head>
<title>Login Sederhana</title>
<link rel="stylesheet" href="tgsprak.css" type="text/css"/>
</head>
<body bgcolor="#69e0f5">
<script language="JavaScript" type="text/javascript">
function cekuser(a) {
re = /^[A-Za-z]{1,}$/;<!--username harus berupa huruf, baik huruf besar ataupun kecil dan banyaknya minimal 1 huruf--!>
return re.test(a);
}
function cekpassword(a) {
re = /^[A-Za-z]{8,}$/; <!--password harus berupa huruf, baik huruf besar ataupun kecil dan banyaknya minimal 8 huruf--!>
return re.test(a);
}
function checkForm(b) {
if (!cekuser(b.username.value)) {
alert("Isilah Username dan Password sesuai ketentuan!! Username dan Password harus berupa huruf!! ");
b.username.focus();
return false;
}
if (!cekpassword(b.password.value)) {
alert("Masukkan Password dengan benar!! Password minimal terdiri dari 8 huruf!!");
b.password.focus();
return false;
}
return true;
}
</script>
<div id="wrapper">
<div id="kotak1">
<form name="form1" action="<?php $_SERVER['PHP_SELF'];?>" method="post" onsubmit="return checkForm(this)">
<div id="user">Username <input type ="text" name ="username" /></div>
<div id="pass">Password <input type ="text" name ="password" /></div>
<div id="ok"><input type ="submit" value="OK" /></div>
<div id="batal"><input type="reset" value="Batal" /></div>
</form>
</div>
<div id="kotak2">
<?php
if (is_string($_POST['username'])){
if (($_POST['password']=='epriasty')&&($_POST['username']=='phiena')){echo 'selamat datang : ' .$_POST['username'];}
else{echo 'Username dan Password anda SALAH!!!';}
}
?>
</div>
</div>
</body>
</html>
tgsprak.css
#wrapper{
margin:auto;
width:750px;
height : 600px;
background: #69e0f5;
}
#kotak1{
margin:50px auto;
width:400px;
height : 220px;
background: #b4edf7;
border: 3px solid blue;
}
#kotak2{
margin:auto;
width:400px;
height : 90px;
font-family: garamond;
font-size: 30px;
color:red;
}
#ok{
margin:30px 175px;
}
#batal{
margin:auto 10px ;
}
#user{
margin: 30px 60px auto;
font-family: arial;
font-size: 20px;
color:blue;
}
#pass{
margin: 20px 60px auto;
font-family: arial;
font-size: 20px;
color:blue;
}
0 komentar:
Posting Komentar