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. Contoh : aplikasi login form sederhana (tanpa database) yang terdiri dari field ID/Username dan Password. dengan variabel di PHP untuk mensimulasikan
verifikasi data yang dimasukkan.
1. Buat halaman login dengan kode seperti dibawah ini, dan simpan dengan nama index.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP Login</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="ajax_display"></div>
<div id="htmlExampleTarget"></div>
<div id="mainPan">
<div id="formPan">
<form action="periksa.php" method="post" name="login">
<fieldset>
<legend>Login</legend>
<p>
<label>UserName: </label>
<input type="text" class="input" name="usern" />
</p>
<p>
<label>PassWord: </label>
<input type="password" class="input" name="passw" />
</p>
<center> <input type="submit" value="Login" class="submit" name="login" /></center>
</fieldset>
</form>
</div>
</div>
</body>
</html>
2. Setelah ltu buat untuk memerikasa password dan simpan dengan nama periksa. Php dengan kode seperti dibawah ini:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP Login</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="ajax_display"></div>
<div id="htmlExampleTarget"></div>
<div id="mainPan">
<div id="formPan">
<form action="periksa.php" method="post" name="login">
<fieldset>
<legend>Login</legend>
<p>
<label>UserName: </label>
<input type="text" class="input" name="usern" />
</p>
<p>
<label>PassWord: </label>
<input type="password" class="input" name="passw" />
</p>
<center> <input type="submit" value="Login" class="submit" name="login" /></center>
</fieldset>
</form>
</div>
</div>
</body>
</html>
3. Kode di atas berfungsi untuk memeriksa password, setelah itu baru masuk ke halaman login jadi hubungkan ke halaman login. Conto disini menampilkan anda berhasil login. Contohnya sebagai berikut untuk halaman berhasil login, jangan lupa simpan dengan nama berhasil.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP Login</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="ajax_display"></div>
<div id="htmlExampleTarget"></div>
<div id="mainPan">
<div id="formPan">
<form action="periksa.php" method="post" name="login">
<fieldset>
<legend>Login</legend>
<p>
<label>UserName: </label>
<input type="text" class="input" name="usern" />
</p>
<p>
<label>PassWord: </label>
<input type="password" class="input" name="passw" />
</p>
<center> <input type="submit" value="Login" class="submit" name="login" /></center>
</fieldset>
</form>
</div>
</div>
</body>
</html>
4. Jangan lupa membuat file .css sebagai berikut : (simpan dengan nama style.css)
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:white;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: black;
}
a:link {
color: grey;
text-decoration: none;
}
a:visited {
color: #009900;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: none;
}
a:active {
color: #009900;
text-decoration: none;
}
#ajax_display { position: absolute;top:5px; width:100%; text-align: center; font-family:Geneva, Arial, Helvetica, sans-serif;font-size:11px; z-index: 5; }
#mainPan{
width:300px;
position:relative;
margin:0 auto;
}
#formPan
{
margin-top:100px;
}
#htmlExampleTarget { text-align:center;
color:#009900;
position:absolute;
top:0; left:0;
padding:10px 0px;
border-top:solid 5px #76B306;
display:block;
width:100%;
background: #EEFFC6; }
#divTarget { background-color:#EEFFC6; padding:5px; }
#htmlForm { padding:20px;}
fieldset { border:solid 3px #ccc;padding:20px;}
legend {padding:0 15px 0 10px;font:bold .8em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;font-weight:bold;color:#666;text-transform:uppercase;border:1px solid #ccc;background:#f4f4f4;letter-spacing:2px}
.input { background:url('../images/sbar_a_hili.gif') 0 0 repeat-x; border:solid 1px #cccccc;}
.submit { border:solid 1px #cccccc; background: url('../images/star.png') 0 0 no-repeat #f4f4f4; padding-left:30px; height:35px; color:#660000;margin-left:55px; }
label { width:140px;color: #660000; }
Hasil halaman login
Hasil ketika memasukan password
Tidak ada komentar:
Posting Komentar