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.
Pada aplikasi berikut merupakan contoh pemrosesan form yaitu login form tanpa adanya database, jadi value sudah ditentukan.
Spesifikasi aplikasi:
- 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.
Interface Login Form:
Untuk script-nya yaitu:
1. file HTML yang disimpan dengan nama login.html
<em><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Login Form</title>
<script type="text/javascript">
function error1()
{
alert('Silahkan Masukkan Username and Password!');
}
function check()
{
if(LoginForm.password.value == "" || LoginForm.username.value=="")
{
error1();
}
}
</script>
<style type="text/css">
#mainbox {
position:absolute;
width:240px;
height:280px;
z-index:1;
left: 10px;
top: 10px;
background-color: #9370D8;
border: 2px solid White;
}
#textbox {
position:absolute;
width:250px;
height:100px;
z-index:2;
top: 80px;
left: 30px;
}
#buttom {
position:absolute;
width:80px;
height:25px;
z-index:2;
left: 90px;
top: 240px;
}
#body{
width:240px;
height:230px;
}
</style>
</head>
<body onLoad="document.LoginForm.username.focus();">
<body background="Untitled-2.jpg">
<form name="LoginForm" method="post" action="login.php">
<div id="mainbox" align = "center">
<h1> <font color= "White">LOGIN</h1>
<hr style="color:blue"/>
</div>
<div id="body">
<div id="textbox">
<div align="left"><strong><br>Username:</strong>
<br>
<input type="text" name="username" size="28" value="" style="background-color:#00ffff" autocomplete="off">
<br>
<br>
<strong>Password: </strong>
<br>
<input type="password" name="password" size="28" style="background-color:#00ffff" autocomplete="off">
<br>
<br>
</div>
</div>
<br>
<div id="buttom">
<input type="submit" name="submit" value="SUBMIT" onClick="check()">
</div>
</div>
</div>
</form>
</body>
</html></em>
2. File PHP disimpan dengan nama file login.php
Value Username dan Password untuk aplikasi ini diisi dengan 'evy'
<em><!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['username']=='evy') AND ($_POST['password']=='evy')) {
echo 'Anda masuk sebagai :'.$_POST['username'];
echo '<br><br>Selamat datang ' . $_POST['username'];
}
else {
echo "<body text='red'><strong>Maaf, terdapat kesalahan pada saat Anda Login!<br><a href='login.html'><h4>Kembali Login</h4></a></strong></body>";
}
?>
</body>
</html></em>
Apabila terjadi kesalahan pada saat login, maka terdapat pesan kesalahan sebagai berikut:
Apabila di klik Kembali Login, maka akan kembali pada halaman Login Form.
Demikian tahapan membuat aplikasi login form sederhana, SELAMAT MENCOBA!
0 Comment:
Posting Komentar