Anda di halaman 1dari 10

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.
Database
MySQL

1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4

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

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:
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 ini

koneksi.php
PHP

1
2
3
4
5
6
7
8
9
1
0
1
1
1
2

<?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

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

<?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
$password
$level

= $_POST['username'];
= md5($_POST['password']);
= $_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...!!!
54 Login gagal.</div>';
55
}else{
56
$row = mysqli_fetch_assoc($query);
57
58
if($row['level'] == 1 && $level == 1){
59
$_SESSION['username']=$username;
60
$_SESSION['level']='admin';
61
header("Location: user.php");
62
}else if($row['level'] == 2 && $level == 2){
63
$_SESSION['username']=$username;
64
$_SESSION['level']='dosen';
65
header("Location: user.php");
66
}else if($row['level'] == 3 && $level == 3){
67
$_SESSION['username']=$username;
68
$_SESSION['level']='mahasiswa';
69
header("Location: user.php");
70
}else{
71
echo '<div class="alert alert72
danger">Upss...!!! Login gagal.</div>';
73
}
74
}
75
}
76
?>
77
78
<form role="form" action="" method="post">
79
<div class="form-group">
80
<input type="text" name="username"
81
82 class="form-control" placeholder="Username" required autofocus />
</div>
83
<div class="form-group">
84
<input type="password" name="password"
85
86 class="form-control" placeholder="Password" required autofocus />
</div>
87
<div class="form-group">
88
<select name="level" class="form-control"
89
90 required>
<option value="">Pilih Level
91
User</option>
92
<option
93
94 value="1">Administrator</option>
<option value="2">Dosen</option>
95
<option value="3">Mahasiswa</option>
96
</select>
97
</div>
98
<div class="form-group">
99
<input type="submit" name="login" class="btn
10
0 btn-primary btn-block" value="Log me in" />
</div>
10
</form>
1
</div>
10
Copyright &copy; 2015 wwww.tutorialweb.net
2
</div>
10
</div>
3
10
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
4
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Sedikit penjelasan ya.


Baris
2
35
45 74
46
48 50

Penjelasan
Memulai session
Jika ada session yang terbuat/aktif, maka akan langsung masuk ke halaman user.php
Proses Login dengan PHP, ketika user meng-Klik tombol Log me in
Memasukkan file koneksi.php
Membuat variabel untuk masing-masing nilai dari inputan

52

Melakukan Query MyQLi untuk SELECT ke tabel database di mana username dan password seperti inputa

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

62 55

66 69

Jika Inputan level sama dengan 1 (admin) dan data hasil Query para row level juga 1, maka login berhasi
session admin, dan menuju halaman user.php

Jika Inputan level sama dengan 2 (dosen) dan data hasil Query para row level juga 2, maka login berhasi
session dosen, dan menuju halaman user.php

Jika Inputan level sama dengan 3 (mahasiswa) dan data hasil Query para row level juga 3, maka login be
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

user.php

1
2
3
4
5
6
7
8
9
1
0
1

<?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">

1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
4
0
4
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 &copy; 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>

4
2
4
3
4
4
4
5
4
6
4
7
4
8
4
9
5
0
5
1
5
2
5
3
5
4
5
5

Sedikit penjelasan lagi ya..


Baris
2
35
39 50

Penjelasan
Memulai session
Jika tidak ada session yang dibuat, maka otomatis akan redirect ke halaman login (index.php)
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

logout.php
PHP

1 <?php
2 session_start();
3 session_destroy();
4 header("Location: index.php");
5 ?>

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).