Tetapi sebelum itu, berikut ada beberapa penjelasan singkat tentang artikel saya kali ini.
Login Multi Level?
Oke, jadi maksudnya saya akan mencoba membuat sebuah halaman login dimana 2 jenis pengguna dengan hak akses yang berbeda dapat masuk dalam satu form login. Disini saya mengambil contoh jenis pengguna dengan hak akses yang berbeda yaitu admin, dan user/pegguna.
Untuk membuat halaman login multi level dan logoutnya, memerlukan sebuah bahasa pemrograman yaitu PHP dan database MySQL. Nah, untuk itu kamu perlu menginstal aplikasi host server lokal karena di kebanyakan komputer belum ada sistem yang dapat mengakses website dengan bahasa ini. Biasanya digunakan host server lokal ‘XAMPP’ karena gratis dan mudah. Kamu bisa download XAMPP dan mempelajari apa itu host server lokal di artikel saya sebelumnya : “PENGENALAN HOST SERVER LOKAL XAMPP”
Sebelum membuat halaman login multi level sekaligus logout dengan php dan mysql, saya akan menjelaskan bagaimana cara kerja atau algoritma sistem yang akan saya buat. Berikut adalah cara kerjanya.
1. Yang pertama saya tidak memisah file index dan login. Jadi saat login/belum login, kamu tetap pada halaman index.
2. Dalam formulir login, ada 2 kotak input yaitu username dan password dan 1 select input untuk memilih level login (ingin masuk sebagai apa)
3. File akan memanggil database yang sudah berisi data username dan password sekaligus cek ketersediaan (untuk memastikan username/password benar)
4. Jika login, tampilan akan berubah. Jika ada kesalahan, akan tampil peringatan.
5. Jika klik logout/keluar maka akan menghapus session dan kembali ke tampilan login
Biar lebih jelas, berikut adalah gambarannya.
Okee.. Setelah mengetahui cara kerjanya, sekarang saatnya kita membuat halaman index yang berisi tampilan login dan setelah login. Cukup dengan tampilan yang sederhana saja ya..
Berikut cara membuat halaman login multi level pada website dengan php & mysql.
Let’s Ngoding!
CREATE TABLE IF NOT EXISTS `tb_login` (2. Untuk file websitenya, kita buat dulu file ‘index.php’ dengan kode berikut
`username` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL,
`level` varchar(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tb_login`
--
INSERT INTO `tb_login` (`username`, `password`, `level`) VALUES
('admin', 'admin', 'admin'),('user', 'user', 'user');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tb_login`
--
ALTER TABLE `tb_login`
ADD PRIMARY KEY (`username`);
3. Biar ganteng websitenya, buat file ‘style.css’<!DOCTYPE html><html><head><title>Belajar Membuat Login Multi Level - www.teziger.blogspot.com</title></head><link rel="stylesheet" type="text/css" href="style.css"><body><form method="post"><?php//Menghubungkan Ke Database$host = 'localhost'; //Nama Host$user = 'root'; //Nama User$pass = ''; //Nama Password$database = 'login'; //Nama Database$db = mysqli_connect($host,$user,$pass,$database); //Mulai Hubungansession_start(); //Menyalakan Sessionif (!@$_SESSION['masuk']) { //Jika Belum Login Maka Tampilkan Halaman Loginif (isset($_POST['masuk'])) { // Jika Pengakses Menekan Tombol Masuk$user = $_POST['username']; //Mengambil Hasil Input Pada Kolom Input Username$pass = $_POST['password']; //Mengambil Hasil Input Pada Kolom Input Password$level = $_POST['level']; //Mengambil Jenis Level Yang Dipilihif (empty($user) || empty($pass) || empty($level)) {echo "<center><div class='peringatan'>Semua Kolom Wajib Diisi!</div></center>";}if ($level == 'admin') { //Jika Pengakses Memilih Level Admin$query = mysqli_query($db, "SELECT*FROM tb_login WHERE level = 'admin' AND username = '$user' AND password = '$pass'"); //Mencari Data Pada Database$cek = mysqli_num_rows($query); //Cek Ketersediaanif ($cek > 0) { //Jika Tidak Kosong$_SESSION['masuk'] = $user; //Membuat Sessionheader("location:./"); //Memuat Ulang Halaman}else{//Jika Kosongecho "<center><div class='peringatan'>Username Atau Password Untuk Level Admin Salah!</div></center>";}}elseif ($level == 'user') {$query = mysqli_query($db, "SELECT*FROM tb_login WHERE level = 'user' AND username = '$user' AND password = '$pass'"); //Mencari Data Pada Database$cek = mysqli_num_rows($query); //Cek Ketersediaanif ($cek > 0) { //Jika Tidak Kosong$_SESSION['masuk'] = $user; //Membuat Sessionheader("location:./"); //Memuat Ulang Halaman}else{//Jika Kosongecho "<center><div class='peringatan'>Username Atau Password Untuk Level User Salah!</div></center>";}}}?><h1>Masuk</h1><input type="text" name="username" placeholder="Username"><br><input type="password" name="password" placeholder="Password"><br><select name="level"><option value="">-PILIH LEVEL-</option><option value="admin">Admin</option><option value="user">User</option></select><br><input type="submit" name="masuk" value="Masuk"></form><?php}else{ //Jika Sudah Masuk Maka Tampilkan Halaman Utama$data = mysqli_fetch_array(mysqli_query($db, "SELECT*FROM tb_login WHERE username='$_SESSION[masuk]'")); //Mengambil Data Pengguna Yang Loginif ($data['level'] == 'admin') { //Jika Yang Masuk Adalah Admin$konten = '<h1>Selamat Datang Admin <i>(@'.$data['username'].')</i>!</h1>Selamat Mengembangkan Website!';}else{ //Jika Yang Masuk Adalah User$konten = '<h1>Selamat Datang Pengguna Website <i>(@'.$data['username'].')</i>!</h1>';}$logout = "<a href='./?keluar=1'>Keluar</a>"; //Membuat Tombol Keluarif (isset($_GET['keluar'])) { //Jika Klik Tombol Keluarunset($_SESSION['masuk']); //Menghapus Sessionheader("location:./"); //Memuat Ulang Halaman}echo $konten.'<br>'.$logout;}?></body></html>
Setelah selesai membuat halaman login dan logout, silahkan jalankan websitenya. Untuk nama file websitenya terserah kamu. Yang penting nama database dan file di dalam websitenya harus sesuai seperti tadi.
html{font-family: calibri;float: center;text-align: center;}body{margin:10px;}form{margin-top:10%;width: 100%;}input[type="text"], input[type="password"], select{background: #FFF;border: 1px solid grey;border-radius: 5px;padding: 10px;margin-bottom: 10px;width: 400px;}input[type="submit"]{background: #ade7e7;padding: 10px;font-size: 20px;border:1px solid #448086;margin-bottom: 10px;}input[type="submit"]:hover{background: #55c0c6;}.peringatan{background: #d0203a;padding: 10px;border: 1px solid darkred;border-radius: 5px;margin-bottom: 10px;width: 500px;}a{color: #648da2;font-size: 40px;text-decoration: none;}a:hover{color:#33636c;}
Jika ingin langsung coba, kamu bisa download filenya..
Download File Disini
Setelah itu tinggal ekstrak filenya dan akses melalui localhost/multi_level pada browser.
Tutorial ini saya buat untuk pembelajaran. Jadi hanya saya buat sederhana. Yang penting cara kerjanya dapat diketahui dan dipahami dengan mudah dan ada penjelasan di tiap kode dalam file websitenya sehingga dapat dengan mudah paham dan bisa dengan mudah diedit.
Oke dan itulah cara membuat halaman login multi user/level dan logout dengan php dan mysql. Jika ada pertanyaan, silahkan berkomentar!
Semoga artikel ini bermanfaat! Selamat mencoba dan semoga berhasil!
Terima Kasih..
No comments:
Post a Comment