Aplikasi login User dalam suatu situs dinamis menggunakan php sudah hampir menjadi kebutuhan wajib. Tanpa adanya login rasa-rasanya ada yang kurang dari suatu 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.
OK basa-basinya udahan deh, kita mulai saja.
Membuat Tampilan Awal LoginBuatlah file dengan nama index.php sebagai tampilan awal halaman login, sebagai berikut :
...:: code ::...<!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>
<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>
<input type="submit" value="Login" class="submit" name="login" />
</fieldset>
</form>
<center><p>© 2010<a href="http://www.agusblogsite.blogspot.com" title="Coretan Anak Kampung" target="_blank"> Nue Weblog</a> | PHP Login</p></center>
</div>
</div>
</body>
</html>
...:: akhir kelas ::...Dari program tampilan awal di atas, kita bisa lihat bentuk form yang dibuat sebagai berikut:
Dalam membuat login form diatas, tidaklah lupa kita harus membuat CSS-nya supaya terlihat bagus dan menarik, berikut ini file dengan nama CSS yang digunakan dalam membuat form login sebagai berikut:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#333333;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
a:link {
color: #009900;
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; }
...:: akhir kelas ::...margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#333333;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
a:link {
color: #009900;
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; }
Membuat Halaman Pemeriksaan Login
Setelah tampilan awal kita buat, maka kita buat halaman pemeriksaan login untuk memeriksa apakah username dan password yang diinputkan benar atau salah.
Buatlah file dengan nama periksa.php sebagai berikut :
...:: code ::...Buatlah file dengan nama periksa.php sebagai berikut :
<!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">
<?
session_start();
#jika ditekan tombol login
if(isset($_SESSION['login'])) {
$usern = $_SESSION['usern'];
$passw = $_SESSION['passw'];
if($num==1) {
// login benar //
if(login($_SESSION['usern'], $_SESSION['passw']) == true)
?><script language="JavaScript">alert('Anda berhasil login');
document.location='berhasil.php'</script><?
} else ($num== ""){
//login salah //
if(empty($_SESSION['usern']) || empty($_SESSION['passw']))
?><script language="JavaScript">alert('Username atau password Anda
salah'); document.location='index.php'</script><?
}
}
?>
...:: akhir kelas ::...session_start();
#jika ditekan tombol login
if(isset($_SESSION['login'])) {
$usern = $_SESSION['usern'];
$passw = $_SESSION['passw'];
if($num==1) {
// login benar //
if(login($_SESSION['usern'], $_SESSION['passw']) == true)
?><script language="JavaScript">alert('Anda berhasil login');
document.location='berhasil.php'</script><?
} else ($num== ""){
//login salah //
if(empty($_SESSION['usern']) || empty($_SESSION['passw']))
?><script language="JavaScript">alert('Username atau password Anda
salah'); document.location='index.php'</script><?
}
}
?>
Dari program tampilan di atas, kita tekan tombol login, sebelum diredirect ke halaman berhasil.php, maka terlebih dahulu kita set variable session bernama $_SESSION[‘usern’] dan $_SESSION[‘passw’]. Variabel ini digunakan untuk memeriksa apakah user tertentu sudah memasukkan username dan password ataukah tidak.
Membuat Halaman untuk Login berhasil
Jika login berhasil maka user akan masuk ke halaman berhasil.php. Isi dari halaman ini ya tergantung Anda, sesuai dengan halama web Anda. Sebagai contoh sederhana, mari kita buat halaman sebagai berikut :
Buatlah file dengan nama berhasil.php sebagai berikut :
...:: code ::...<!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">
<?
session_start();
//periksa apakah user telah login atau memiliki session
if(!isset($_SESSION[‘usern’]) || !isset($_SESSION[‘passw’])) {
?><script language=’javascript’>alert(‘Anda belum login. Please login dulu’);
document.location=’login.php’</script><?
} else {
?>
<html>
<head>
<title>Berhasil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="746" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="746" height="23" align="center" valign="top"><font face="Verdana, Arial,
Helvetica, sans-serif">Selamat
Datang <? echo $_SESSION['usern'] ?> <a
href="logout.php"><strong>LOGOUT</strong></a></font></td>
</tr>
<tr>
<td height="88"> </td>
</tr>
<tr align="center" valign="middle">
<td height="33"><font color="#FF0000" size="5" face="Arial, Helvetica, sans-serif">ANDA
BERHASIL LOGIN !!</font></td>
</tr>
<tr>
<td height="62"> </td>
</tr>
</table>
</body>
</html>
<? } ?>
...:: akhir kelas ::...Dari program tampilan di atas, kita bisa lihat hasilnya setelah tekan tombol login sebagai berikut:
Dalam halaman berhasil.php di atas terdapat link yang mengarah ke logout.php. Kita akan membuat logout.php dimana jika user melakukan logout (meng-klik link logout di atas) maka session yang dia miliki akan dihapus. Berikut untuk file logout.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">
<?
session_start();
//periksa apakah user telah login atau memiliki session
if(!isset($_SESSION[‘usern’]) || !isset($_SESSION[‘passw’])) {
?><script language=’javascript’> document.location=’login.php’</script><?
} else {
unset($_SESSION);
session_destroy();
?><h3><td height="33"><font color="#009900" size="5" face="Arial, Helvetica, sans-serif">ANDA
BERHASIL KELUAR !!!</font></td></h3>
<center><p>© 2010<a href="http://www.agusblogsite.blogspot.com" title="Coretan Anak Kampung" target="_blank"> Nue Weblog</a> | PHP Login</p></center>
</script><?
}
?>
...:: akhir kelas ::...Dari program tampilan di atas, kita bisa lihat hasilnya setelah tekan tombol logout sebagai berikut:
Dah dulu ya tutorial ini, Selamat mencoba dan semoga berhasil.
Tidak ada komentar:
Posting Komentar