.jpg)
Login form merupakan sesuatu yang sering kita temui di berbagai website. Mau masuk friendster, Login dulu ; mau update status di facebook, harus login dulu juga; mau menulis uneg-uneg di blok, mesti ngisi login dulu..Login, login, login dan login, kenapa harus login? Jawaban gampangnya ya supaya account yang kita miliki tidak dibobol atau diakses sama orang-orang yang tidak bertanggungjawab+tidak berhak!! itu jawaban gampangnya, kalo jawaban susahnya ya..silahkan mikir sendiri deh.. he..he..he..
Susahkah membuat login form? Well, enggak ada yang susah sejauh kita berusaha. Toh meskipun sempat bingung selama beberapa waktu, pencerahan akhirnya datang dari salah seorang teman..(thanks so much..Pren!!). Login Form yang kubuat ini masih sangat sederhana alias tanpa koneksi dengan basis data apapun, tapi punya karakteristik :
1. Scripting javascript untuk validasi awal, jadi kalau textfield nya ga diisi, atau diisi dengan angka, program akan mengeluarkan peringatan untuk mengisi text field itu dengan benar.2. Jika men-submit form kosong, kursor akan dikembalikan ke field username.
3. Ada validasi dari PHP untuk memastikan bahwa karakter yang dimasukkan adalah string.4. jika username dan password sesuai dengan nilai yang sudah didefinisikan sebelumnya maka muncul ucapan : Selamat datang...(nama user) tapi kalo gak sesuai maka yang muncul : username dan password Salah!!!
Trus cara buatnya?
Ikuti resep berikut ini....
Untuk memenuhi karakteristik ke 1, digunakan javascript. peringatan tentang username dan password harus diisi serta form tidak boleh kosong bisa ditampilkan dengan menggunakan kotak dialog.
cuplikan kodenya : alert("Isilah Username dan Password sesuai ketentuan!! Username dan Password harus berupa huruf!! ");
Sementara untuk mengecek apakah username dan password berupa huruf digunakan :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);
}
Untuk mengembalikan kursor ke username bila form di-submit dalam kondisi tidak diisi, digunakan: username.focusLalu untuk mengecek apakah karakter yang dimasukkan berupa string atau bukan dengan menggunakan PHP, maka digunakan casting is_string.
kode lengkapnya adalah sebagai berikut :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<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']=='silvercyber')&&($_POST['username']=='silver')){echo 'selamat datang : ' .$_POST['username'];}else{echo 'Username dan Password anda SALAH!!!';}
}
?>
</div>
</div></body>
</html>
#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;
}
Username yang ditentukan sebelumnya umpamakanlah 'cyber' dan passwordnya 'silvercyber, maka bila username dan password benar, tampilannya adalah sebagai berikut :
Kalo username dan password yang dimasukkan salah, tampilannya :
Nah, kalau username dan hurufnya ada angkanya, tampilannya jadi seperti ini :
Selamat mencoba deh...
Read More.. 2 komentar
