Pemrosesan form atau istilah kerennya form processing merupakan dasar operasi aplikasi web. Contohnya untuk menerima masukan dari user, maka diperlukan form isian dan cara pemrosesannya. Demikian ketika admin ingin masuk ke sistem, tentu diperluka penghubung. keberadaan form dan pemrosesannya diperlukan dalam membangun aplikasi web yang interaktif. Salah satu contoh nyata yang sering kita jumpai adalah aplikasi login. Bentuk sederhananya seperti gambar dibawah ini
#wrapper{
margin:auto;
width:750px;
height : 600px;
background: #69e0f5;
}
#box1{
margin:50px auto;
width:400px;
height : 280px;
background: #b4edf7;
border: 3px solid black;
}
#box2{
margin:auto;
width:500px;
height : 40px;
font-family: Comic Sans;
font-size: 30px;
color:black;
}
#ok{
margin:30px 175px;
}
#user{
margin: 30px 60px auto;
font-family: Comic Sans;
font-size: 16px;
color:blue;
}
#pass{
margin: 20px 60px auto;
font-family: Comic Sans;
font-size: 16px;
color:blue;
}
Simpan wrapper diatas dengan ekstensi css misalnya login.css. Langkah selanjutnya mulai kita buat sebuah scrip pemrosesan form di PHP kemudian simpan dengan ekstensi php misalnya login.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 Form</title>
<link rel="stylesheet" href="login.css" type="text/css"/>
</head>
<body background="picture12.jpg">
<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("Username and Password must are alphabet!! ");
b.username.focus();
return false;
}
if (!cekpassword(b.password.value)) {
alert("into password is correctly. It minimal are 5 alphabet!");
b.password.focus();
return false;
}
return true;
}
</script>
<div id="wrapper">
<div id="box1"><h1 color="blue" align="center"><b>Login </b></h1>
<hr color="blue" width="300" align="center">
<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="Log In" /></div>
</form>
</div>
<div id="box2">
<?php
if (is_string($_POST['username'])){
if (($_POST['password']=='resibaratwaja')&&($_POST['username']=='Resibaratwaja')){echo 'Welcome to ' .$_POST['username'];}
else{echo 'Username and Password is incorrectly. Try Again!!!';}
}
?>
</div>
</div>
</body>
</html>
Hasilnya tampilan dari script diatas adalah
maka muncul pesan seperti gambar dibawah:
- Untuk masukan username dan pasword salah maka diperlihatkan sebuah kotak dialog kesalahan, namun jika masukan username dan password tidak sesuai maka muncul peringatan "Username and password is incoreclu. Try Again!" dan seperti gambar dibawah
Baca selengkapnya
Tidak ada komentar:
Posting Komentar