Assalamu'alaikum warah matullohi wabarakatuh.. Pemiasah... eeee.. pemiarsa.. Selamat pagi.. Ane posting lagi, gan. Iya, mumpung koneksi internet lagi lancar jaya. Barusan aje, ane nonton streaming Real Soledad vs Manchester United, gak ada putus2nya (cuma babak 2, n kualitas kayak TV gak ada antenanya, jiakakaka). Lumayan lah, imbang, MU tetep puncak klasemen (belum liat update resminya dari Geol.Com). Selamat buat bang Felaini, buat kartu merah pertamanya,, haha. Sungguh sangat disayangkan, padahal maenya bagus, banyak melakukan interseption-isasi. Terus penalti van Persie yang kurang halal (lagi2 diving Young, hehe), dan van Persie pun "sengaja" gak di-gol-in, (fairplay, bro.. - fairplay kebetulan). Pergantian 2 straiker sekaligus (ronney - chicharito) dgn van persie - young, yang tidak pas menurut ane, seharusnya salah satu saja, entah ronney ato chicharito yg digantiin van persie, nah giggs baru di gantiin young (seharusnya juga bukan young, Januzaj ato sapalah).. heehehe..
Waduh, kebablasan, ane gan.. sambutan ketua panitianya beda ama judul acaranya. Iya ane mau posting itu gan, skrip login ala cPanel hosting, dengan memanfaatkan jQuery. Sebenarnya itu tulisan kemarin, pas libur, nah baru ditulis di-word, ane transfer ke blog pagi ini. Jadi nanti loginnya gak perlu refresh halaman, langsung jika login gagal ada notifikasi tanpa refresh halaman. Sengaja tampilan-nya ane ambilin persis sama cPanel, mohon jangan digugat karena melanggar hak cipta yak.. Langsung ke tekape, gan..
1. Langkah pertama adalah membuat database beserta tabel adminnya. Buat database baru lewat http://localhost/phpmyadmin/ dengan nama : “db_login”
2. Buat halaman index.php, yang merupakan halaman login ke sistem. Skripnya minimal adalah sebagai berikut, agar mirip cPanel :
3. Selanjutnya, agar dapat dipergunakan untuk login, dengan proses mirip cPanel, maka tambahkan skrip di bawah ini (letakkan pada di antara tag <head> </head>, yang penting di bawah skrip pemanggilan jQuery dan CSS)
Oh, hiya... Jangan lupa klo membutuhkan WEBSITE PROFIL, WEBSITE SEKOLAH, SISTEM INFORMASI atau APLIKASI LAIN YANG BERBASIS WEB, hubungi ane saja, gan. Hubungi saja lewat YM di samping, atau untuk respon cepat tanggap (kayak PMI) hubungi 0856 4343 7024, SMS OK, telpon OK...
Waduh, kebablasan, ane gan.. sambutan ketua panitianya beda ama judul acaranya. Iya ane mau posting itu gan, skrip login ala cPanel hosting, dengan memanfaatkan jQuery. Sebenarnya itu tulisan kemarin, pas libur, nah baru ditulis di-word, ane transfer ke blog pagi ini. Jadi nanti loginnya gak perlu refresh halaman, langsung jika login gagal ada notifikasi tanpa refresh halaman. Sengaja tampilan-nya ane ambilin persis sama cPanel, mohon jangan digugat karena melanggar hak cipta yak.. Langsung ke tekape, gan..
1. Langkah pertama adalah membuat database beserta tabel adminnya. Buat database baru lewat http://localhost/phpmyadmin/ dengan nama : “db_login”
Buat tabel “admin”, dengan copy paste skrip di bawah ini di tab “SQL” :
CREATE TABLE `admin` ( `id` int(2) NOT NULL auto_increment, `username` varchar(20) NOT NULL, `password` varchar(100) NOT NULL, `nama` varchar(100) NOT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
-- -- Dumping data for table `admin`--
INSERT INTO `admin` (`id`, `username`, `password`, `nama`) VALUES (1, 'admin', '21232f297a57a5a743894a0e4a801fc3', 'Nur Akhwan');
<!DOCTYPE html>
<html dir="ltr">
<head>
<title>cPanel Login</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img class="background-image" src="img/login-whisp.png">
<div id="login-wrapper">
<div id="notify">
<noscript>
<div class="error-notice">
<span class="login-status-icon"></span>
<div id="login-status-message">Javascript browser Anda sedang di-nonaktifkan. Aktifkan fitur Javascript Anda..!</div>
</div>
</noscript>
<div id="notifikasi"></div>
</div>
<div id="content-container">
<div id="login-container">
<div id="login-sub-container">
<div id="login-sub-header">
<img src="img/cpanel-logo.png" alt="logo" />
</div>
<div id="login-sub">
<div id="forms">
<form id="login_form" action="#" method="post">
<div class="input-req-login"><label for="user">Username</label></div>
<div class="input-field-login icon username-container">
<input name="user" id="user" autofocus="autofocus" value="" placeholder="Enter your username." class="std_textbox" type="text" tabindex="1" required>
</div>
<div style="margin-top:30px;" class="input-req-login"><label for="pass">Password</label></div>
<div class="input-field-login icon password-container">
<input name="pass" id="pass" placeholder="Enter your account password." class="std_textbox" type="password" tabindex="2" required>
</div>
<div class="controls">
<div class="login-btn">
<button name="login" type="button" id="login_submit" tabindex="3">Log in</button>
</div>
</div>
<div class="clear" id="push"></div>
</form>
<!--CLOSE forms -->
</div>
<!--CLOSE login-sub -->
</div>
<!--CLOSE login-sub-container -->
</div>
<!--CLOSE login-container -->
</div>
<div id="locale-footer">
<div class="locale-container">
<ul id="locales_list">
<li><a href="http://nur-akhwan.blogspot.com/">English</a></li>
<li><a href="http://nur-akhwan.blogspot.com/">Deutsch</a></li>
<li><a href="http://nur-akhwan.blogspot.com/">espanol</a></li>
<li><a href="http://nur-akhwan.blogspot.com/">espanol de Espana</a></li>
<li><a href="http://nur-akhwan.blogspot.com/">francais</a></li>
<li><a href="http://nur-akhwan.blogspot.com/">Nederlands</a></li>
<li><a href="http://nur-akhwan.blogspot.com/"> ...</a></li>
</ul>
</div>
</div>
</div>
<!--Close login-wrapper -->
</div>
<div class="copyright">Copyright © 2013 cPanel, Inc.</div>
</body>
</html>
Penjelasan : Itu merupakan skrip dasar untuk menampilkan halaman login, tanpa bisa melakukan action loginnya. Saya pikir tak perlu penjelasan lebih lanjut, karena merupakan skrip HTML dasar. Perlu diperhatikan pada script yang tercetak tebal, bahwa skrip tersebut harus ada, agar dapat dipergunakan sebagaimana mestinya.
<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...
Oh, hiya... Jangan lupa klo membutuhkan WEBSITE PROFIL, WEBSITE SEKOLAH, SISTEM INFORMASI atau APLIKASI LAIN YANG BERBASIS WEB, hubungi ane saja, gan. Hubungi saja lewat YM di samping, atau untuk respon cepat tanggap (kayak PMI) hubungi 0856 4343 7024, SMS OK, telpon OK...
coba dikasih "preview" hasil jadinya mas... biar oke gtu... langsung liat... hahh...
BalasHapussiap gan bhe-Eks Zone... lagi ane kembangin situs demo saya, gan.. mohon sumbangan doa dan uborampe-nya...
BalasHapusmas akhwan, unruk tutorial perpustakaan nya, bisakah mas buatkan catatan mengenai nama database dan tabel beserta type nya, Mysql saya ngak bisa import db yg mas sediakan. cuma itu saja mas, semoga mas selalu dalam keadaan sehat wal afiat ya.
BalasHapusthank you bro
BalasHapusawalnya membantu cuman semakin jauh jadi banyak keluhan gini
BalasHapus1. cssnya ga ada yah percuma sharing nanggung2 coy
2. programnya seperti asal copas (banyak yg eror coy!)
overall 5/10 . thanks