Halaman login dalam suatu situs sudah hampir menjadi kebutuhan wajib. Halaman ini juga sangat bermanfaat baik untuk kita sebagai webmaster maupun pengunjung karena memberikan identitas tentang pengunjung sebuah situs. Dengan login kita bisa mengatur siapa saja yang berhak masuk ke halaman tertentu dan siapa saja yang tidak boleh. Disamping itu secara tidak langsung, login bisa digunakan untuk mencatat siapa saja yang sedang online, siapa saja yang sering mengunjungi situs kita dan seterusnya.
Bagi kita sebagai webmaster, halaman login memungkinkan kita untuk :
- Mendapat informasi penting tentang profil pengunjung situs kita karena pengunjung harus mendaftar untuk mendapatkan akses (misalnya saat mendaftar, kita bisa meminta pengunung memasukkan data-data tertentu tentang nama, alamat, kota, jenis kelamin, dan lain-lain).
- Memungkinkan kita untuk melakukan tracking terhadap halaman-halaman favorit seorang pengunjung.
- Memberikan layanan lebih dan diferensiasi terhadap pengunjung loyal.
- Memungkinkan kita memberikan layanan berbayar bagi pengunjung.
Perlu diingat, bahwa dengan melindungi sebuah halaman situs dengan persyaratan login, artinya kita membatasi search engine untuk mengunjungi situs tersebut. Ini artinya hanya sedikit halaman yang dapat diakses oleh search engine. Efeknya akan sangat tidak menyenangkan, karena rank situs kita akan sulit menembus papan atas dari search engine. Jadi perlu juga mempertimbangkan baik-baik halaman mana saja yang akan dilindungi dengan login. Bagi pengunjung, manfaat yang akan dirasakan tentu saja mendapat akses dan layanan tambahan dari sebuah situs.
Berikut merupakan contoh halaman login pada php sederhana, karena prosesnya yang hanya mencocokkan inputan username dan password. Kemudian dicocokkan dengan data-data di halaman berikutnya. Jika username dan password betul, maka akan muncul komentar bahwa login sukses. Sebaliknya, jika username dan password salah, maka akan muncul pesan bahwa username dan password salah.
login.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Login</title>
<style type="text/css">
<!--
body {
background-color: #8EDAF0;
margin-top:15%;
}
.login {
font-family: Arial, Helvetica, sans-serif;
color: #66CCFF;
}
.text {
font-family: Arial, Helvetica, sans-serif;
color: #666666;
}
.style1 {color: c}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>
<form name="login" action="verify.php" method="post">
<div style="width:300px; margin:auto; background-color:#FFFFFF; border:5px solid #0099FF">
<blockquote>
<h1 class="login">Login</h1>
</blockquote>
<hr width="250px" size="5" color="#0099FF"/>
<blockquote>
<p><span class="text">User Name : </span>
<input type="text" name="username" size="30px"/>
</p>
<p><span class="text">Password : </span>
<input type="password" name="password" size="30px"/></p>
<input type="submit" name="login" value="LOGIN" style="font-weight:bold"/><br/>
</blockquote>
</div>
</form>
<center><p>© 2010 <a href="http://www.didietz-ultima.blogspot.com" target="_blank">Didietz Ultima Weblog</a></a> | PHP Login</p>
</center>
</body>
</html>
Sintak ini berfungsi untuk menampilkan tampilan awal dari halaman login. Jika tombol LOGIN ditekan, maka form ini akan memanggil form verify.php yang akan memastikan username dan password yang dimasukkan. Berikut ini adalah tampilan dari form utama (login.php) :
verify.php
<?php
$nama = "didietz";
$sandi = "aiueo";
$username = $_POST["username"];
$password = $_POST["password"];
$polausername = "^[A-Za-z]+$";
$polapassword = "^[A-Za-z]+$";
// Fungsi untuk kembali ke form awal //
?><script language="JavaScript">
function awal(){
document.location='login.php';
login.username.focus()
}
</script><?php
// Login benar //
if(isset($_POST["username"]) && isset($_POST["password"]) && ($_POST["username"]=="$nama") && ($_POST['password']=="$sandi")){
?><script language="JavaScript">
document.location='sub.php'</script><?php
}
//Login salah //
else if(empty($_POST['username']) || empty($_POST['password'])){
?><script language="JavaScript">alert('Isi username atau password');
awal()</script><?php
}
else if((!eregi($polausername, $username)) || (!eregi($polapassword, $password))){
?><script language="JavaScript">alert('Username atau password harus berupa huruf');
awal()</script><?php
}else if (("$username" != "$nama") || ("$password" != "$sandi")){
?><script language="JavaScript">alert('Username atau password salah');
awal()</script><?php
}
?>
Sintak ini berfungsi untuk memeriksa apakah username dan password yang dimasukkan sudah benar atau belum. Dalam form ini telah ditentukan isi nilai dari username dan password.
$nama = "didietz";
$sandi = "aiueo";
Usernamenya adalah didietz dan passwordnya aiueo. Pada form ini, username dan password harus berupa huruf, tidak boleh menggunakan karakter selain huruf. Untuk itu perlu ditentukan format dari username dan password.
$polausername = "^[A-Za-z]+$";
$polapassword = "^[A-Za-z]+$";
Skrip tersebut digunakan untuk menentukan pola dari username dan password, untuk huruf digunakan A-Za-z. Setelah itu username dan password akan diperiksa apakah sudah benar atau salah. Username dan password akan bernilai benar jika username=didietz dan password=aiueo. Dan username dan password akan bernilai salah jika username atau password kosong,
tidak menggunakan huruf,
atau tidak cocok.
tidak menggunakan huruf,
atau tidak cocok.
sub.php
<html>
<head>
<title>Selamat Datang</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #8EDAF0;
margin-top:15%;
}
.style1 {
font-size: medium;
font-weight: bold;
color: #0066FF;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style2 {
font-size: large;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #FF0000;
}
.style3 {color: #000000}
-->
</style>
</head>
<body>
<script language="JavaScript">
function out(){
document.location='logout.php'
}
</script>
<div align="center">
<p class="style1">Selamat Datang</p>
<p class="style2">Anda telah login ke Didietz Ultima Weblog </p>
<input type="submit" name="login" value="LOGOUT" style="font-weight:bold" onClick="out()"/>
</div>
</body>
</html>
<?
}
?>
Form ini ini akan muncul jika username dan password bernilai benar. Jika tombol LOGOUT di tekan, maka logout.php akan dipanggil untuk menampilkan keterangan bahwa pengguna telah logout dari form ini. Berikut ini adalah tampilan dari form sub :
logout.php
<style type="text/css">
<!--
body {
background-color: #8EDAF0;
margin-top:15%;
}
.style1 {
color: #009933;
font-size: large;
font-family: Arial, Helvetica, sans-serif;
}
-->
</style>
<div>
<h3 align="center" class="style1">Terima kasih telah mengunjungi Didietz Ultima Weblog</h3>
<?php
include "login.php"
?>
</div>
Form ini akan muncul jika pengguna telah melakukan logout pada form sub. Form ini akan memanggil komponen-komponen yang ada pada form login, sehingga akan terlihat tampilan awal dari form login. Berikut ini adaah tampilan dari form logout :
Contoh di atas merupakan contoh halaman login sederhana, masih banyak contoh-contoh halaman login di situs-situs yang ada di internet. Beberapa situs juga ada yang menerapkan sistem keamanan yang lebih canggih. Mungkin dengan contoh halaman login ini, bisa menambah sedikit ilmu pemrograman web kepada kita semua. Terima kasih atas perhatiannya.
Keep Fighting Spirit On The Fire...
2 komentar:
postingannya sangat membantu buat mengerjakan Tugas akhir saya . . :)
makasi buat infonya yaaa?
sangat membantu :)
Posting Komentar