Multi Level Login Dengan PHP, MySQL dan Bootstrap

Multi Level Login Dengan PHP

Multi Level Login Dengan PHP, MySQL dan Bootstrap. Hai temen-temen, pada kesempatan kali ini tutorialweb akan mencoba membuat tutorial tentang Multi Level Login dengan PHP, MySQL dan Bootstrap.

🙂

Pada tutorial sebelumnya juga pernah di bahas tentang Advanced Login System PHP MySQL yang pembahasannya tidak jauh berbeda dengan tutorial kali ini. Bedanya hanya pada Script PHP untuk Query ke MySQL menggunakan MySQLi dan juga untuk tampilannya menggunakan Bootstrap biar tambah maknyuss… 

Langsung saja ya, simak dengan seksama tutorial Multi Level Login Dengan PHP, MySQL dan Bootstrap ini.

Database

Sebelumnya sudah dibuat sebuat database, di sini saya membuat database dengan nama tutorialweb. Kemudian masukkan script SQL di bawah ini untuk mendapatkan beberap tabel dan juga isi dari tabel.DatabaseMySQL

DROP TABLE IF EXISTS `users`;CREATE TABLE `users` (  `id` int(11) NOT NULL,  `username` varchar(32) NOT NULL,  `password` varchar(32) NOT NULL,  `nama` varchar(50) NOT NULL,  `email` varchar(32) NOT NULL,  `level` int(11) NOT NULL) ENGINE=InnoDB DEFAULT CHARSET=latin1; INSERT INTO `users` (`id`, `username`, `password`, `nama`, `email`, `level`) VALUES(1, 'admin', '21232f297a57a5a743894a0e4a801fc3', 'Administrator', 'admin@gmail.com', 1),(2, 'dosen', 'ce28eed1511f631af6b2a7bb0a85d636', 'Dosen', 'dosen@gmail.com', 2),(3, 'mahasiswa', '5787be38ee03a9ae5360f54d9026465f', 'Mahasiswa', 'mahasiswa@gmail.com', 3);

Dari script di atas Anda akan mendapatkan 1 tabel dengan nama users, dan 3 data yang sudah di masukkan, lihat gambar di bawah ini

login bootstrap 1

Tahap ini saya kira sudah paham, lanjut ke tahap selanjutnya. Karena di sini tampilannya menggunakan framework Bootstrap, maka silahkan download terlebih dahulu Bootstrap di website resminya, saat ini saya masih menggunakan versi 3.

Jika sudah di download, sekarang silahkan ekstrak file .zip tersebut. Dan masukkan folder di dalam folder htdocs. Lebih jelasnya silahkan lihat gambar di bawah ini:

login bootstrap 2

Dari gambar di atas ada beberapa file yang akan di buat, yaitu, index.php, koneksi.php, logout.php, dan user.php. Untuk database.sql abaikan saja karena itu file hasil export database.

Oke, jadi yang harus kita buat dahulu adalah file:

  1. koneksi.php : untuk melakukan koneksi ke database
  2. index.php : untuk halaman utama di mana akan tampil form login dan script PHP untuk proses loginnya
  3. user.php : halaman setelah user berhasil login, dimana ada script session yang mana halaman ini tidak akan bisa di akses jika user belum login
  4. logout.php : untuk menghapus session yang telah di buat pada saat login, jadi tidak bisa lagi menakses halaman user.php

Nah, mudah-mudahan dari keterangan di atas sudah paham alurnya. Jadi langsung aja dimulai, pertama koneksi.php

Membuat Koneksi

Buat file koneksi.php kemudian ketikkan kode di bawah inikoneksi.phpPHP

<?php$db_host = "localhost";$db_user = "root";$db_pass = "";$db_name = "tutorialweb"; $koneksi = mysqli_connect($db_host, $db_user, $db_pass, $db_name); if(mysqli_connect_errno()){ echo 'Gagal melakukan koneksi ke Database : '.mysqli_connect_error();}?>

Simpan di dalam folder yang sama. Dan silahkan ganti detail koneksi seperti server milik temen-temen sendiri.

Oke, selanjutnya file index.php

index.php

Buat file index.php, berisi Form Login dan Script proses Login, berikut kodenya:index.php

<?phpsession_start();if($_SESSION){ header("Location: user.php");}?><!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Login System</title>  <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> body { background-color:#eee; } .row { margin:100px auto; width:300px; text-align:center; } .login { background-color:#fff; padding:20px; margin-top:20px; } </style> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--></head><body> <div class="container"> <div class="row"> <h2>Log In</h2> <div class="login"> <?php if(isset($_POST['login'])){ include("koneksi.php"); $username = $_POST['username']; $password = md5($_POST['password']); $level = $_POST['level']; $query = mysqli_query($koneksi, "SELECT * FROM users WHERE username='$username' AND password='$password'"); if(mysqli_num_rows($query) == 0){ echo '<div class="alert alert-danger">Upss...!!! Login gagal.</div>'; }else{ $row = mysqli_fetch_assoc($query); if($row['level'] == 1 && $level == 1){ $_SESSION['username']=$username; $_SESSION['level']='admin'; header("Location: user.php"); }else if($row['level'] == 2 && $level == 2){ $_SESSION['username']=$username; $_SESSION['level']='dosen'; header("Location: user.php"); }else if($row['level'] == 3 && $level == 3){ $_SESSION['username']=$username; $_SESSION['level']='mahasiswa'; header("Location: user.php"); }else{ echo '<div class="alert alert-danger">Upss...!!! Login gagal.</div>'; } } } ?> <form role="form" action="" method="post"> <div class="form-group"> <input type="text" name="username" class="form-control" placeholder="Username" required autofocus /> </div> <div class="form-group"> <input type="password" name="password" class="form-control" placeholder="Password" required autofocus /> </div> <div class="form-group"> <select name="level" class="form-control" required> <option value="">Pilih Level User</option> <option value="1">Administrator</option> <option value="2">Dosen</option> <option value="3">Mahasiswa</option> </select> </div> <div class="form-group"> <input type="submit" name="login" class="btn btn-primary btn-block" value="Log me in" /> </div> </form> </div> Copyright © 2015 wwww.tutorialweb.net </div> </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script></body></html>

Sedikit penjelasan ya….

BarisPenjelasan
 2Memulai session
3 – 5Jika ada session yang terbuat/aktif, maka akan langsung masuk ke halaman user.php
45 – 74Proses Login dengan PHP, ketika user meng-Klik tombol Log me in
46Memasukkan file koneksi.php
48 – 50Membuat variabel untuk masing-masing nilai dari inputan
52Melakukan Query MyQLi untuk SELECT ke tabel database di mana username dan password seperti inputan
53Cek apakah ada data yang sesuai dengan query di atas
54Menampilkan pesan jika data tidak ada (0)
55Jika data ada
56Membuat variabel baru untuk menyimpan data yang sudah di Query sebelumya (baris 52)
58 – 61Jika Inputan level sama dengan 1 (admin) dan data hasil Query para row level juga 1, maka login berhasil dan membuat session admin, dan menuju halaman user.php
62 – 55Jika Inputan level sama dengan 2 (dosen) dan data hasil Query para row level juga 2, maka login berhasil dan membuat session dosen, dan menuju halaman user.php
66 – 69Jika Inputan level sama dengan 3 (mahasiswa) dan data hasil Query para row level juga 3, maka login berhasil dan membuat session mahasiswa, dan menuju halaman user.php
70 – 72Jika semua kondisi salah, maka menampilkan pesan Error
77 – 95Membuat form standart dengan bootstrap

Gimana, apa sudah jelas? Saya anggap sudah deh 

Dari kode tersebut akan tampil seperti gambar di bawah ini

login bootstrap 3

Nah, sampai sini, bisa Anda coba apakah berhasil atau tidak.

Sekarang buat file selanjutnya yaitu file user.php

user.php

File ini gunanya untuk menampilkan data/pesan jika anda berhasil Login (bisa di katakan Admin/User Area-nya), dan nantinya juga ada tombol Logout untuk keluar dari dahalam user.php, berikut kodenyauser.php

<?phpsession_start();if(empty($_SESSION)){ header("Location: index.php");}?><!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Login System</title>  <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> body { background-color:#eee; } .row { margin:100px auto; width:300px; text-align:center; } .login { background-color:#fff; padding:20px; margin-top:20px; } </style> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--></head><body> <div class="container"> <div class="row"> <h2>Login Berhasil</h2> <div class="login"> <p>Anda berhasil login dengan detail sebagai berikut:</p> <p>Username: <?php echo $_SESSION['username']; ?><br> Level: <?php echo $_SESSION['level']; ?></p> <p><a href="logout.php" class="btn btn-primary" onclick="return confirm('Yakin ingin Logout?')">Log out</a></p> </div> Copyright © 2015 wwww.tutorialweb.net </div> </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script></body></html>

Sedikit penjelasan lagi ya.. 

Baris Penjelasan
2 Memulai session
3 – 5 Jika tidak ada session yang dibuat, maka otomatis akan redirect ke halaman login (index.php)
39 – 50 Tampilan sederhaha untuk kotak detail user
44 Menampilkan username dari session
45 Menampilkan level dari session
46 Membuat tombol Logout, dan jika di klik akan membuka file logout.php

Oke, pasti sudah sangat paham  Lihat aja gambar di bawah ini

login bootstrap

Nah, seperti di atas tampilannya.

Selanjutnya dan yang terakhir adalah membuat file logout.php

logout.php

File ini berfungsi untuk menghancurkan session yang telah dibuat pada saat login, sehingga user tidak akan bisa lagi mengakses halaman user.php, berikut kodenyalogout.phpPHP

<?phpsession_start();session_destroy();header("Location: index.php");?>

Penjelasan lagi ya, baris ke 2 memulai session, baris ke 3 menghancurkan session, baris ke 4 redirect kembali ke file index.php (halaman utama form login).

Oke deh, selesai.. silahkan coba, atau download di bawah ya….

Download:

Download

Password : www.tutorialweb.net

sumber : http://tutorialweb.net/multi-level-login-dengan-php-mysql-dan-bootstrap/



Dukung kami berkembang dengan Subscribe