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
(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:
- 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
|
|
<?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).
Tidak ada komentar:
Posting Komentar