- Beranda
- Komunitas
- Tech
- Programmer Forum
Membuat Skrip Login Mirip C-Panel dengan jQuery
TS
akhwan90
Membuat Skrip Login Mirip C-Panel dengan jQuery
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”
Buat tabel “admin”, dengan copy paste skrip di bawah ini di tab “SQL” :
2. Buat halaman index.php, yang merupakan halaman login ke sistem. Skripnya minimal adalah sebagai berikut, agar mirip cPanel :
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.
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)
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 :
Penjelasan : cukup jelas
5. Kemudian buak skrip “do_login.php” sebagai aksi dari form di atas :
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 :
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...
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” :
Spoiler for kode_SQLnya:
2. Buat halaman index.php, yang merupakan halaman login ke sistem. Skripnya minimal adalah sebagai berikut, agar mirip cPanel :
Spoiler for kode_HTMLnya:
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.
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)
Spoiler for kode_JAVASCRIPTnya:
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 :
Spoiler for kode_PHPnya:
Penjelasan : cukup jelas
5. Kemudian buak skrip “do_login.php” sebagai aksi dari form di atas :
Spoiler for kode_PHPnya:
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 :
Spoiler for kode_PHPnya:
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...
0
2.1K
4
Komentar yang asik ya
Urutan
Terbaru
Terlama
Komentar yang asik ya
Komunitas Pilihan