<script type="text/javascript">
$(document).ready(function(){
$("#login_submit").click(function() {
$("#notifikasi").fadeIn("fast");
$("#notifikasi").html("<div id='login-status' class='success-notice'><span class='login-status-icon'></span> <div id='login-status-message'>Pengecekan ... </div></div>");
var user = $("#user").val();
var pass = $("#pass").val();
if (user == "" || pass == "") {
$("#notifikasi").html("<div id='login-status' class='error-notice'><span class='login-status-icon'></span><div id='login-status-message'>Username / password tidak boleh kosong ... </div></div>");
$("#user").focus();
$("#notifikasi").fadeOut(3000);
return false;
} else {
$.ajax({
url: "do_login.php",
data: "user=" + user + "&pass=" + pass,
cache: false,
success: function(msg){
$("#notifikasi").html(msg);
$("#notifikasi").fadeOut(3000);
$("#user").focus();
$("#user").val('');
$("#pass").val('');
}
});
return false;
}
}); });
</script>
Penjelasan :
$(document).ready(function(){
// berarti jika dokumen telah siap / diload semua
$("#login_submit").click(function() {
// jika tombol login (ditandai dengan id=”login_submit”), diklik
$("#notifikasi").fadeIn("fast");
// maka <div> dengan id=”notifikasi” akan ditampilkan dengan efek fadeIn
$("#notifikasi").html("<div id='login-status' class='success-notice'><span class='login-status-icon'></span> <div id='login-status-message'>Pengecekan ... </div></div>");
// isikan pada <div id=”notifikasi”> tulisan : Pengecekan ....
var user = $("#user").val();
// Ambil variabel “user” dari input text dengan id=”user”
var pass = $("#pass").val();
// Ambil variabel “pass” dari input text dengan id=”pass”
if (user == "" || pass == "") {
// Jika variabel “user” atau “pass” kosong / tidak berisi, maka
$("#notifikasi").html("<div id='login-status' class='error-notice'><span class='login-status-icon'></span><div id='login-status-message'>Username / password tidak boleh kosong ... </div></div>");
// Tampilkan pada <div id=”notifikasi”> tulisan “Username/password tidak boleh kosong...”
$("#user").focus();
// Buat focus pada input text dengan id=”user”
$("#notifikasi").fadeOut(3000);
// Sembunyikan <div id=”notifikasi”> dengan efek fadeOut, dengan kecepatan 3000ms (3 detik kalo gak salah, hehe)
return false;
// Menghalangi form agar tidak melakukan submit proses dengan reload halaman
} else {
// Jika variabel “user” dan “pass” telah diisi
$.ajax({
// Lakukan proses ajax
url: "do_login.php",
// URL action ajax, mirip dengan action = “do_login.php” pada tag <form>
data: "user=" + user + "&pass=" + pass,
// Data yang dikirimkan dengan metode $_GET, yaitu user dan pass
cache: false,
// Ini ane belum tahu untuk apa, gan. Ehhehe..
success: function(msg){
// Jika proses ajax sukses, maka lakukan keluarkan output dari skrip “do_login.php” berupa teks yg disimpan dalam variabel javascript “msg”
$("#notifikasi").html(msg);
// Tampilkan pada <div id=”notifikasi”> berisi variabel “msg” tadi
$("#notifikasi").fadeOut(3000);
// Sembunyikan <div id=”notifikasi”> dengan efek fadeOut
$("#user").focus();
// Focuskan kursor pada <input id=”user”>
$("#user").val('');
// Kosongkan isian <input id=”user”>
$("#pass").val('');
// Kosongkan isian <input id=”pass”>
}
});
return false;
// Menghalangi form agar tidak melakukan submit proses dengan reload halaman
}
});
});
4. Buatlah skrip “koneksi.php”, untuk koneksi ke database :
<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "db_login";
mysql_connect($host, $user, $pass) or die (mysql_error());
mysql_select_db($db) or die (mysql_error());
?>
Penjelasan : cukup jelas
5. Kemudian buak skrip “do_login.php” sebagai aksi dari form di atas :
<?php
session_start();
include "koneksi.php";
$username = empty($_GET['user']) ? "" : $_GET['user'];
$password = empty($_GET['pass']) ? "" : md5($_GET['pass']);
$q_admin = mysql_query("SELECT * FROM admin WHERE username = '$username' AND password = '$password'");
$j_admin = mysql_num_rows($q_admin);
if ($j_admin == 1) {
$d_session_admin = mysql_fetch_array($q_admin);
$_SESSION['id_admin'] = $d_session_admin['id'];
$_SESSION['username'] = $d_session_admin['username'];
$_SESSION['nama'] = $d_session_admin['nama'];
$_SESSION['is_logged'] = TRUE;
echo "<div id='login-status' class='success-notice'><span class='login-status-icon'></span><div id='login-status-message'>Login berhasil ... </div></div>
<meta http-equiv='refresh' content='2; url=dashboard.php'>";
} else {
echo "<div id='login-status' class='error-notice'><span class='login-status-icon'></span><div id='login-status-message'>Maaf, username dan password salah ... </div></div>";
}
?>
Penjelasan :
session_start();
//Menandakan dimulainya halaman dengan menggunakan variable session
include "koneksi.php";
//Ambil file koneksi.php
$username = empty($_GET['user']) ? "" : $_GET['user'];
//Ambil variabel ”user”, dari metode $_GET, jika tidak ditemukan maka berisi kosong
//Ini ane baru tahu skrip if sederhana dengan penulisan seperti ini, gan, yang artinya :
// $data = jika $_GET[’user’] sama dengan kosong, maka variabel $data = kosong, //jika tidak berisi $_GET[’user’], untuk menghindari error pada PHP versi terbaru
$password = empty($_GET['pass']) ? "" : md5($_GET['pass']);
//Ambil variabel ”pass”, dari metode $_GET, dan digunakan fungsi enkripsi md5,
$q_admin = mysql_query("SELECT * FROM admin WHERE username = '$username' AND password = '$password'");
//Query ke database, untuk melakukan login, yang artinya ambil dari tabel admin, yang username = variabel $username dan password = $password
$j_admin = mysql_num_rows($q_admin);
//Mendapatkan jumlah baris hasil query
if ($j_admin == 1) {
//Jika jumlah baris hasil query sama dengan 1 (logikanya jika jumlah baris kurang dari 1 maka username tidak terdaftar, atau username dan password tidak cocok, dan jika lebih dari 1, dimungkinkan terjadi usernamenya doble dan passwordnya juga sama, ini bahaya, gan)
$d_session_admin = mysql_fetch_array($q_admin);
//Ambil data hasil query $q_admin, sebagai data yang didaftarkan sebagai isi variabel session sebagai berikut
$_SESSION['id_admin'] = $d_session_admin['id'];
//Isikan pada variabel session ”id_admin” dengan isi pada field ”id”
$_SESSION['username'] = $d_session_admin['username'];
//Isikan pada variabel session ”username” dengan isi pada field ”username”
$_SESSION['nama'] = $d_session_admin['nama'];
//Isikan pada variabel session ”nama” dengan isi pada field ”nama”
$_SESSION['is_logged'] = TRUE;
//Isikan pada variabel session ”is_logged” dengan isi Boolean TRUE,dengan maksud sebagai trigger pada halaman web hanya boleh dimasuki admin, hanya jika variable session “is_logged” sudah berisi TRUE
echo "<div id='login-status' class='success-notice'><span class='login-status-icon'></span><div id='login-status-message'>Login berhasil ... </div></div>
//Mengisikan output pada halaman web ”do_login” yang nantinya sebagai teks yang akan tampil di <div id=”notifikasi”> pada halaman ”index.php”
<meta http-equiv='refresh' content='2; url=dashboard.php'>";
//Otomatis refresh halaman ke halaman “dashboard.php” dalam waktu 2 detik
} else {
//Jika login gagal atau username dan password salah
echo "<div id='login-status' class='error-notice'><span class='login-status-icon'></span><div id='login-status-message'>Maaf, username dan password salah ... </div></div>";
}
5. Halaman “dashboard.php”. Halaman ini merupakan halaman administrator, yang telah melalui proses login di atas, dan hasilnya berhasil login (session “is_logged”-nya berisi TRUE). Berikut skripnya :
<?php
session_start();
$_page = isset($_GET['p']) ? $_GET['p'] : "";
if ($_page == "logout") {
session_destroy();
echo "<meta http-equiv='refresh' content='0; url=index.php'>";
}
if ($_SESSION['is_logged'] == TRUE) {
echo "<h3>Anda telah login</h3>";
echo "<p>
<h5>Keterangan login : </h5>
<ul>
<li>Id Admin : <b>".$_SESSION['id_admin']."</b></li>
<li>Username : <b>".$_SESSION['username']."</b></li>
<li>Nama Admin : <b>".$_SESSION['nama']."</b></li>
</ul>
</p><br>
<a href='?p=logout'>Klik disini, untuk logout</a>";
} else {
echo "<h3>Maaf, Anda belum login</h3>";
echo "<a href='index.php'>Klik disini, untuk login</a>";
}
?>
Penjelasan :
session_start();
//Wajib ada jika halaman menggunakan session
if ($_SESSION['is_logged'] == TRUE) {
//Pengecekan session “is_logged” apakah bernilai TRUE, jika iya, maka penjajahan di atas dunia harus.. eh salah.., maka tampilkan teks di bawah ini
echo "<h3>Anda telah login</h3>";
//Teks “Anda telah login”
echo "<p>
<h5>Keterangan login : </h5>
<ul>
<li>Id Admin : <b>".$_SESSION['id_admin']."</b></li>
//Membuktikan bahwa variabel session “id_admin” telah terisi makan akan berisi id_adminnya
<li>Username : <b>".$_SESSION['username']."</b></li>
//Membuktikan bahwa variabel session “username” telah terisi makan akan berisi username-nya
<li>Nama Admin : <b>".$_SESSION['nama']."</b></li>
//Membuktikan bahwa variabel session “nama” telah terisi makan akan berisi nama admin-nya
</ul>
</p><br>
<a href='?p=logout'>Klik disini, untuk logout</a>";
//Tampilkan link untuk logout (menghapus isi variabel session)
} else {
//Jika session “is_logged” berisi bukan TRUE dengan kata lain FALSE
echo "<h3>Maaf, Anda belum login</h3>";
//Tampilkan teks “Maaf, Anda belum login
echo "<a href='index.php'>Klik disini, untuk login</a>";
//Tampilkan link ke halaman login
}
Di bawah ini merupakan proses untuk logout
$_page = isset($_GET['p']) ? $_GET['p'] : "";
//Ambil variabel GET[‘p’]
if ($_page == "logout") {
//Jika variabel $_page berisi logout,
// variabel $_page di dapatkan dari URL, perhatikan di address bar : “dashboard.php?p=logout”
session_destroy();
//Skrip menghapus variabel session, cukup simpel dan tidak sebanding dengan skrip saat kita mengisikan variabel session
echo "<meta http-equiv='refresh' content='0; url=index.php'>";
//Me-redirect ke halaman login
}
6. Selesai.
Begitu pemiarsah, skripnya. Untuk download full script tunggu dulu, yak.. Website download center ane lagi maintenens.. (haha,..)
Sekian, terima kasih, wassalam...
