aRuM_Prasetyo: Login Form Sederhana Menggunakan JavaScript dan PHP

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.

Dalam membuat aplikasi login form sederhana (tanpa database) yang terdiri dari field ID/Username dan Password. Gunakan variabel di PHP untuk mensimulasikan verifikasi data yang dimasukkan.
Spesifikasi:
1. Terdapat scripting JavaScript untuk validasi awal (field tidak boleh kosong, masukan id dan password harus huruf).
2. Jika field kosong dan langsung di-submit, kembalikan fokus kursor ke field pertama (id)
3. Ada validasi sisi server (dari PHP) untuk memastikan bahwa nilai field adalah string.
4. 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.
Berikut adalah source codenya :
<!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>Form Login</title>

<script language="javascript" type="text/javascript">
function check(){
var user= doc.getElementById('username').value;
var pass= doc.getElementById('password').value;
if(user.replace(/^[A-Za-z]{1,}$/, '')==''){
alert('Masukkan username minimal 1 huruf!');
return false;
}
if(pass.replace(/^[A-Za-z]{4,}$/, '')==''){
alert('Masukkan password 4 huruf!');
return false;
}
return true;
}
</script>
</head>
<body background="bag1.jpg">
<form name="login" method="post" action="<?php $_SERVER['PHP_SELF'];?

>">
<p align="center"><? echo $status;?></p>

<table width="500" border="6" align="center" bgcolor="#b4edf7"

rules="groups" cellpadding="8" cellspacing="5">
<tr><td width="50"> </td>
<td align="left"><font size="10" face="Verdana"

color="#000000">Login</font></td>
</tr>
<tbody >
<tr><td width="100"> </td><td><font size="4"

face="verdana">Username :</font></td></tr>
<tr><td width="100"> </td><td><input type="text" name="username"

size="50" id="username" /></td></tr>
<tr><td width="100"> </td><td><font size="4"

face="verdana">Password :</font></td></tr>
<tr><td width="100"> </td><td><input type="password"

name="password" size="50" id="password" /></td></tr>
<tr><td width="100"> </td><td><input name="submit" type="submit"

onClick="return check()" value="LOGIN" /></td></tr>
<tr><td colspan="2"align="center"><font size="2" face="verdana"

>Masukkan Username: Arum dan Password: ArumPras</font></td></tr>
</table>
</form>
<?php
if (is_string($_POST['username'])){
if ($_POST['username']=='Arum'){echo 'Welcome to ' .$_POST

['username']; }
else{echo 'Username yang anda masukan tidak sesuai, silahkan masukan

username!!!';}
}
if (is_string($_POST['username'])){
if ($_POST['password']=='ArumPras'){echo '<br/>Your Password is '

.$_POST['password']; }
else{echo '<br/>Password yang anda masukan tidak sesuai, silahkan

masukan password!!!';}
}
?>
</body>
</html>

Bila Username salah dihasilkan alert sbb :