Multi Level Login Dengan PHP, MySQL dan Bootstrap
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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 |
Dari script di atas Anda akan mendapatkan 1 tabel dengan nama users, dan 3 data yang sudah di masukkan, lihat gambar di bawah ini
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:
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:
- koneksi.php : untuk melakukan koneksi ke database
- index.php : untuk halaman utama di mana akan tampil form login dan script PHP untuk proses loginnya
- user.php : halaman setelah user berhasil login, dimana ada script session yang mana halaman ini tidak akan bisa di akses jika user belum login
- 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 ini
1 2 3 4 5 6 7 8 9 10 11 12 |
<?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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
<?php session_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….
Baris | Penjelasan |
---|---|
2 | Memulai session |
3 - 5 | Jika ada session yang terbuat/aktif, maka akan langsung masuk ke halaman user.php |
45 - 74 | Proses Login dengan PHP, ketika user meng-Klik tombol Log me in |
46 | Memasukkan file koneksi.php |
48 - 50 | Membuat variabel untuk masing-masing nilai dari inputan |
52 | Melakukan Query MyQLi untuk SELECT ke tabel database di mana username dan password seperti inputan |
53 | Cek apakah ada data yang sesuai dengan query di atas |
54 | Menampilkan pesan jika data tidak ada (0) |
55 | Jika data ada |
56 | Membuat variabel baru untuk menyimpan data yang sudah di Query sebelumya (baris 52) |
58 - 61 | Jika 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 - 55 | Jika 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 - 69 | Jika 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 - 72 | Jika semua kondisi salah, maka menampilkan pesan Error |
77 - 95 | Membuat form standart dengan bootstrap |
Gimana, apa sudah jelas? Saya anggap sudah deh
Dari kode tersebut akan tampil seperti gambar di bawah ini
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 kodenya
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<?php session_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
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 kodenya
1 2 3 4 5 |
<?php session_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:
Password :
Terima kasih ilmu dan infonya gan
Muncul error:
Warning: Cannot modify header information - headers already sent by (output started at /home/***/public_html/***/admin/index.php:44) in /home/***/public_html/***/admin/index.php on line 61
masalah pada headernya, mungkin servernya hostingnya beda
bisa gak kalo saya menggabungkan materi login ini dengan materi management user mahasiswa di postingan lainnya itu?
bisa gan.. kalau login sukses, tinggal redirek aja ke direktori manajemen usernya…
Gan, kok muncul \”Upss…!!! Login gagal.\” terus yaa, padahal semuanya udah persis sama dan bener. kenapa ya gan?
sudah ada data di database? pastikan user & pass sudah benar
kak , aku udah coba tapi sayangnya saat selesai login tidak berpindah kehalaman user.php ,, dia hanya tetap dihalaman login. dan hanya kosong nga ada masalah erornya
gak muncul errornya?
koneksi sudah benar?
om.. muncul error seperti ini, padahal user dan password sudah benar..
Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, boolean given in C:\AppServ\www\login-bootstrap\index.php on line 53
Upss…!!! Login gagal.
baris paling atas coba kasih ini
error_reporting(E_ALL ^ (E_NOTICE | E_WARNING));
ups lgin gagal! itu terus gan.. kenapa ya?
pastikan user dan password sudah benar dan sesuai dengan database.
cara buat password dan user baru gmn mas ??
masuk ke database phpmyadmin
kasusnya sama mas… dah dikasih kode error report.. tetap ndak bisa login… hanya ngilangin errornya…. ada solusi lain… username d psawrd dah sama dgn yg di datbase
ketika login ada pesannya? gagal login atau yg lain?
kalau mau buat beda halaman gimana mas, mis login admin ke halaman admin, dosen ke dosen dan user ke user.
itu sudah bisa, misal admin masuk folder admin dosen masuk folder dosen
mas yang di edit index.php apa user.phpnya ?
index.php
sebelum nya makasi mas info nya beguna
tapi
saya mau tanya 1 hal bagaimana kalo saya mau menanbah 2 tampilan baru di user.php
contoh kaya nama dan email
kalo yg dari tampilan di atas kan pada saat log in yg muncul cuma username sama level nah kalo mau di tambahin nama sama email nya harus di apain yah saya coba edit sendiri tambah ga ke indent hhe
mohon bantuan nya
di user.php lakukan query untuk menyeleksi ke database berdasarkan session. kemudian tampilkan datanya
query untuk menyeleksi database nya kaya gimana ya?
ya select * from tabel where kolom=apa
coba cek di index.phpnya gan, masih ada yg salah sepertinya codingnya itu, walau sudah benar masukin username dan passwordnya sesuai dengan database masih tetap gagal login gan,. mohon penjelasannya
saya coba bisa gan
login gagal terus.. password dan username sudah sama dengan database, sudah terkoneksi juga. kenapa ya?
udah terkoneksi dengan database, tp kok ga masuk ke user.php ya? struck “waiting for localhost”
muncul alert?
aku coba msti ggal loading ya ? pdahal database’y udah di import , dan yg keluar pasti error line 52 dan 53
Warning: mysqli_query() expects parameter 1 to be mysqli, resource given in C:\xampp\htdocs\bismilah\index.php on line 52
Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, null given in C:\xampp\htdocs\bismilah\index.php on line 53
mohon penjelasannya . . . .
ada yg salah query dengan databasenya… cek lagi. atau kirimkan filenya ke email. biar saya lihat.
salah di koneksi.php tuh
massalah saya tgl di login gagal Help kak :'(
Iya, knp masalahny?
kak , mau tanya . klo di tutorial diataskan untuk bisa login, nama dan password sudah dimasukan lewat database di phpmyadmin, tpi apabila ada user lain mndaftar melalui php apakah bisa ?
bisa aja, buat form register, dan data di simpan di database yg sama dengan database login
gan mau tanya kl untuk log in user menggunakan free email seperti gmail & yahoo gimana ya…jadi kl user mau login ada pesan login dengan gmail, yahoo dll gan
maksud pesan dengan email ini apakah mengirimkan email ke email tersebut?
mas admin, sudah mencoba manual sendiri dan sudah mencoba donlod file dr web sini tapi pas login gagal terus , pdhal dah bnr smua saya cek berkali2
Bagus gan, mudah di mengerti.
gan, gimana kalau saya membuat hak akses dalam satu halaman dimana menu-menu tertentu hanya bisa di lihat oleh user tertentu, misalnya Admin. Mohon bantuannya
menunya di bedakan menggunakan session pada saat login. misal saat login mahasiswa membuat session mahasiswa dan admin membuat session admin.
kok keluar kode php itu ya di page nya?
‘; }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 ‘
ohh ternyata filenya saya drag langsung ke browser…ternyata harus access via alamat localhost/ ya..
yups…. betul sekali..
mas, mau nanya kalo mau tambah user sama password itu gmn ya? udah dicoba di insert di phpmyadmin tapi pas dicoba login pake user sama password yg baru login gagal. apa format passwordnya harus seperti yang dicontoh “ce28eed1511f631af6b2a7bb0a85d636” kalo ia itu biar bisa dapet pass kaya gitu gmn caranya ya mas?
makasih sebelumnya mas, artikelnya sangat membantu.
bagian password itu md5, pilih dropdown nya md5
terimakasih, sangat membantu. kalau boleh tau script untuk buat halaman register yang terhubung dengan login multiuser itu bagaimana iya? saya gagal terus. kalau boleh minta tutornya om.
kalau bisa membuat register biasa, tinggal di tambahkan kolom level aja.
gan itu folder tutorialweb dari mana? dan apa isinya? xampp-htdoc-“tutorialweb”-login-boostrap.
terus jika semua langkah telah dilakukan, cara menjalankannya dari mana dan menggunakan apa ?
buka browser, masukkan alamat = localhost/folder_anda
bagaimana cara menyatukan login dengan perintah case gan
yang di case ini apanya?
mas kalau misal hak aksesnya dinamis bagaimana?
misal
user A menu 1,menu 2,menu 10.
user B menu 3, menu4, menu 5,
user D menu 1, menu3, menu 5, menu10
user E semua menu
menu diambil dr database.
jadi misal mau cabut akses atau tambah tinggal ambil dr databasenya.
thx
tinggal dibedakan dari session pas waktu login
Terima kasih, tutorialnya sangat bermanfaat
kalau galal daftar keternganya seperti ini: Warning: mysqli_query() expects parameter 1 to be mysqli, resource given in
apa solusinya pak?
cek kembali koneksi ke databasenya.
gan ini kenapa kok index.php ya malah langsung ke user.php ya
mas, bagaimana cara user.php masuk ke halaman home ya?
mungkin sebelumnya sudah login. coba harus dulu sessionya
user passwordnya apa mas
sudah ada di artikel paling bawah
Terimakasih agan udah mau beragi ilmunya. mohon ijin copas buat belajar. salam kenal dari newbie…
mas minta link download bootstrap login nya nyari nyari gk ktemu pleaseee
https://drive.google.com/file/d/0B6PvpENHS0D4cV84enN3Z3BPSE0/view
itu pakai php versi 7 ya??
nuhun bos….
nak tanya.. saya dari malaysia.. ada error semasa login seperti ini..
Notice: Undefined variable: conn in C:\xampp\htdocs\jkmn\index.php on line 52
Warning: mysqli_query() expects parameter 1 to be mysqli, null given in C:\xampp\htdocs\jkmn\index.php on line 52
Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, null given in C:\xampp\htdocs\jkmn\index.php on line 53..
tolongggg
pastikan koneksi ke database sudah benar. dan cek databasenya sudah cocok dengan query di scriptnya gak?
gan udh download udh nyoba bkin sendiri juga ..tapi masih tetep aja upps gagal login mulu …knpa ya ????
apa sudah benar user dan password nya di database
udah sam min tpi ttep kek gitu mulu hoalah apa ane kurang tamvan ye sehingga upp gagal mulu
Mas, kalau di user php itu yang di input namanya kira-kira di tambahin kode apa yaa?
Sebelumnya terima kasih buat tutorialnya.. dan tolong dong mas dibuat Tutorial selanjut nya utk membuat register dari login seperti ini..
knapa ya muncul ini mas, yang mahasiswa dan dosen di hapus jadi cuma dua admin sama kasir
Notice: Undefined variable: koneksi in C:\xampp\htdocs\hary2\index.php on line 41
Warning: mysql_query() expects parameter 2 to be resource, string given in C:\xampp\htdocs\hary2\index.php on line 41
Warning: mysql_num_rows() expects parameter 1 to be resource, null given in C:\xampp\htdocs\hary2\index.php on line 42
cek koneksi ke database nya, dan struktur databasenya
mas gk bisa lanjutkan sampai membuat menu gitu? kn bisa rajin lihat page mas? hehehe, bisa sambung gk ne page? membuat reset password dll?
dilanjut menu gmn? sambung page kemana?
om kalau untuk membuat cek sesi nya gimana ya, misalkan
page 1, page 2, page 3, page 4, page 5 atau seluruh page dapat di akses oleh Admin, sedangkan
page 1, page 3 hanya dapat diakses oleh user
mohon pencerahan scriptnya om agar nanti bisa di include disetiap page nya
bedakan dari session yg dibuat saat login. misal untuk halaman admin.
sudah dicoba, tapi masih salah dimananya ya om
contoh di artikel di atas pada halaman login $_session[‘level’]=’admin’;
tapi setelah saya ketik untuk dihalaman sesi error om
contoh:
if(!$_session[‘level’]=’admin’{header(“location:login.php”;}
Untuk cara registernya gimana ya min?
bisa langsung di masukkan di database nya
Selamat siang Gan, sudah ku download ada masalh sedikit, login tidak bisa gan.
selalu pesan “Upss….!!! Login Gagal”
user name, passwor dan level user juga sudah benar
thanks sebelumnya Gan
apa ada keterangan error yg lain? pastikan sudah terkoneksi ke database dg benar
Ka mau tanya ko pas saya ubah password admin di phpmyadmin ko gagal login terus ya, tambah user juga tetep ga bisa login. Itu kenapa ya? mohon bantuannya
pastikan password encript dengan md5
saat di edit:
1. untuk level admin masuk ke folder admin
2.level dosen msuk ke folder dosen dll
setelah login berhasil dan juga logout juga berhasil tapi jika di klick back otomatis masuk kembali ke folder sebelumnya????
ya iya,, karena back langsung kembali, tidak ada proses loading.
gambar ERD nya gimana ya kak ,kalau misalnya dalam satu tabel tapi memiliki hak akses berbeda dan memiliki relasi berbeda??
makasih banget gan tutornya!!
btw tadi setelah ngotak-atik karena muncul “Upss….!!! Login Gagal” itu gara-gara yang bikin database kurang tepat dibagian password, di index.php line 49 kodingnya pake md5 sedangkan di database nggak pake itu. solusinya hapus aja kalimat md5. ntar langsung bisa kok. thx