Anda di halaman 1dari 10

Advanced Login System PHP

MySQL
5 tahun ago
72 Comments
by Fatoni
407 Views

Written by Fatoni
Advanced Login System PHP MySQL. Kembali lagi TUTORIALWEB akan
mencoba membuat tutorial tentang PHP dan MySQL. Untuk kali ini akan
dibuat Advanced Login System, dimana akan ada validasi Form dan juga
3 hak Akses Login (Admin, Dosen, Mahasiswa).
Sebelumnya juga pernah dibuat tutorial tentang Login System, akan
tetapi masih sangat simple dan tidak ada validasi inputan. Penjelasan
tentang login sistem ini bisa dijelaskan seperti di bawah ini.
1. Terdapat sebuah database dengan field user_id, username,
password, user_nama, user_email, user_level, dan user_status.
2. user_level adalah untuk mendefinisikan level user dari user yang
terdaftar, dimana jika bernilai 1 maka level administrator, jika 2 maka
level dosen, dan 3 maka level mahasiswa.
3. user_status adalah untuk mendefinisikan status dari user, jika
bernilai 1maka user aktiv dan bisa login, dan jika 0 maka user berlum
aktiv dan tidak bisa login.
4. Terdapat 4 (empat) file yang nantinya akan dibuat disini,
yaitu index.php, user.php, logout.php, dan style.css.
5. index.php digunakan untuk menampilkan Form Login dan juga Proses
Login dengan validasi inputan.
6. user.php adalah halaman yang akan di masuki ketika user sudah
berhasil login, jika belum login halaman user.php tidak bisa di akses.
7. logout.php adalah untuk keluar dari halaman user.php.
8. style.css digunakan untuk mendesain halaman login (index.php).
Oke langsung aja ke tutorial Sistem Login dengan PHP dan MySQL ini.

Pertama seperti biasa buat dahulu sebuah database di phpMyAdmin,


dalam kasus ini akan dibuat dengan nama tutorialweb.
Jika sudah dibuat database, copy script SQL di bawah ini dan paste di dalam
tab SQL di phpMyAdmin:

PgSQL

1 CREATE TABLE `tw_adv_login` (


2 `user_id` int(11) NOT NULL auto_increment,
3 `username` varchar(32) NOT NULL,
4 `password` varchar(32) NOT NULL,
5 `user_nama` varchar(32) NOT NULL,
6 `user_email` varchar(50) NOT NULL,
7 `user_level` varchar(1) NOT NULL,
8 `user_status` varchar(1) NOT NULL default '0',
9 PRIMARY KEY (`user_id`)
10 );
Selanjutnya Insert data ke dalam tabel yang sudah terbuat dari script SQL di
atas. Copy script SQL di bawah ini, dan pastekan di tab SQL di phpMyAdmin:

PgSQL
INSERT INTO `tw_adv_login` VALUES (1, 'tutorialweb', 'c30b61ff99917c70e70a57d7c72ee621', 'tutorialweb.net',
'tutorialweb.net@gmail.com', '1', '1');
1 INSERT INTO `tw_adv_login` VALUES (2, 'dosen', 'ce28eed1511f631af6b2a7bb0a85d636', 'Nama Dosen',
2 'dosen@tutorialweb.net', '2', '1');
3 INSERT INTO `tw_adv_login` VALUES (3, 'mahasiswa', '5787be38ee03a9ae5360f54d9026465f', 'Nama Mahasiswa',
4 'mahasiswa@tutorialweb.net', '3', '1');
INSERT INTO `tw_adv_login` VALUES (4, 'user1', '24c9e15e52afc47c225b757e7bee1f9d', 'Nama User',
'user1@tutorialweb.net', '2', '0');
Jika sudah maka akan mendapatkan 4 data baru sudah masuk ke dalam
tabel.

Setelah database, table dan data user sudah ada, selanjutnya akan dibuat
Form Login. Buat file baru dengan nama index.php dan Copy Paste Script di
bawah ini:

XHTML

1 <!DOCTYPE html>
2 <head>
3 <title>Advance Login System - TUTORIALWEB.NET</title>
4 <link rel="stylesheet" type="text/css" href="style.css" />
5 </head>
6 <body>
7
8 <div id="header">
9 <h1>Login System</h1>
10 <div class="desc">By TUTORIALWEB.NET</div>
11 </div>
12
13 <div id="login">
14
15 <form action="" method="post">
16 <p><b>Username:</b><br /><input type="text" name="username" /></p>
17 <p><b>Password:</b><br /><input type="password" name="password" /></p>
18 <p><b>Akses Level:</b><br />
19 <select name="akses">
20 <option value="0">Pilih Akses Level</option>
21 <option value="1">Administrator</option>
22 <option value="2">Dosen</option>
23 <option value="3">Mahasiswa</option>
24 </select>
25 </p>
26 <p><input type="submit" name="tw-login" value="Log In" /></p>
27 </form>
28 </div>
29
30 </body>
31 </html>
Selanjutnya dibuat script untuk memproses ketika tombol login di klik, tapi
sebelumnya copy paste dahulu script koneksi di bawah ini di atas script login
diatas:

PHP

1 <?php
2 session_start();
3
4 mysql_connect("localhost", "root", "root");
5 mysql_select_db("tutorialweb");
6
7 if($_SESSION['adm'] || $_SESSION['dsn'] || $_SESSION['mhs']){
8 header("Location: user.php");
9 }
10 ?>
Script di atas digunakan untuk melakukan koneksi ke database, dan juga
untuk memulai session dan mengecek jika session belum ada, maka user
bisa mengakses form login, dan jika sudah terbuat session maka user akan
di arahkan ke halaman user (user.php).

Kemudia dibuat script proses untuk memproses form login, copy paste di
atas form login:

PHP

1 <?php
2 if($_POST['tw-login']){
3 $errors = array();
4 $user = htmlentities(mysql_real_escape_string($_POST['username']));
5 $pass = htmlentities(mysql_real_escape_string($_POST['password']));
6 $akses = abs((int)$_POST['akses']);
7
8 $sql = mysql_query("SELECT * FROM tw_adv_login WHERE username='$user'");
9 $row = mysql_fetch_assoc($sql);
10
11 if(empty($user) || empty($pass)){
12 $errors[] = 'Masukkan Username dan Password.';
13 }
14
15 if($akses ==0){
16 $errors[] = 'Pilih Hak Akses Login.';
17 }
18
19 if(mysql_num_rows($sql) == 0){
20 $errors[] = 'Username yang Anda masukkan tidak terdaftar.';
21 }
22
23 if(md5($pass) != $row['password']){
24 $errors[] = 'Password Anda tidak sesuai dengan Username.';
25 }
26
27 if($akses != $row['user_level']){
28 $errors[] = 'Akses Level ditolak.';
29 }
30
31 if($row['user_status'] == 0){
32 $errors[] = 'Akun Anda belum Aktif.';
33 }
34
35 if(empty($errors)){
36 if($row['user_level'] == 1){
37 $_SESSION['adm'] = $user;
38 echo '<script language="javascript">alert("Anda berhasil Login sebagai Administrator");
39 document.location="user.php";</script>';
40 }else if($row['user_level'] == 2){
41 $_SESSION['dsn'] = $user;
42 echo '<script language="javascript">alert("Anda berhasil Login sebagai Dosen");
43 document.location="user.php";</script>';
44 }else if($row['user_level'] == 3){
45 $_SESSION['mhs'] = $user;
46 echo '<script language="javascript">alert("Anda berhasil Login sebagai Mahasiswa");
47 document.location="user.php";</script>';
48 }
49 } else {
50 echo '<div class="error">';
51 echo '<b>Nampaknya ada yang Anda lewatkan:</b><br>';
52 foreach($errors as $error){
53 echo '<span>&raquo; '.$error.'<span><br>';
54 }
55 echo '</div>';
}
}
?>
Jika sudah selanjutnya akan dibuat file baru dengan nama user.php. file ini
yang akan dimasuki oleh user yang sudah berhasil login. Dan ini scriptnya:
PHP

1 <?php
2 session_start();
3 if(!$_SESSION['adm'] && !$_SESSION['dsn'] && !$_SESSION['mhs']){
4 header("Location: index.php");
5 } else {
6 echo '<title>User Area | Advance Login System - TUTORIALWEB.NET</title>';
7 echo '<link rel="stylesheet" type="text/css" href="style.css" />';
8
9 if($_SESSION['adm']){
10 echo '<div id="header"><h1>Administrator Area</h1>';
11 echo '<div class="desc">By TUTORIALWEB.NET</div></div>';
12 echo '<div id="login">';
13 echo '<p>Selamat datang <b>'.$_SESSION['adm'].'</b><br><br><a href="logout.php">Log
14 Out</a></p>';
15 echo '</div>';
16 }
17 if($_SESSION['dsn']){
18 echo '<div id="header"><h1>Dosen Area</h1>';
19 echo '<div class="desc">By TUTORIALWEB.NET</div></div>';
20 echo '<div id="login">';
21 echo '<p>Selamat datang <b>'.$_SESSION['dsn'].'</b><br><br><a href="logout.php">Log
22 Out</a></p>';
23 echo '</div>';
24 }
25 if($_SESSION['mhs']){
26 echo '<div id="header"><h1>Mahasiswa Area</h1>';
27 echo '<div class="desc">By TUTORIALWEB.NET</div></div>';
28 echo '<div id="login">';
29 echo '<p>Selamat datang <b>'.$_SESSION['mhs'].'</b><br><br><a href="logout.php">Log
30 Out</a></p>';
31 echo '</div>';
}
}
?>
Oke, selanjutnya dibuat file logout.php. file ini berguna untuk
menghancurkan session user yang telah dibuat dapa saat proses login.
PHP

1 <?php
2 session_start();
3 session_destroy();
4 echo '<script language="javascript">alert("Anda berhasil Log Out"); document.location="index.php";</script>';
5 ?>
Untuk sentuhan akhir, buat file CSS, dengan nama style.css. File ini
digunakan untuk mempercantik desain dari Form Login.
CSS

1 @charset "utf-8";
2 /* CSS Document */
3
4 body {
5 background:#5BD2FF;
6 font-family:Tahoma;
7 font-size:12px;
8 margin:0;
9 padding:0;
10 }
11
12 input[type="text"], input[type="password"] {
13 padding:5px;
14 margin:2px 0px;
15 width:230px;
16 border:1px solid #33CCFF;
17 }
18
19 input[type="text"]:hover, input[type="password"]:hover {
20 border:1px solid #3399FF;
21 }
22
23 input[type="text"]:focus, input[type="password"]:focus {
24 border:1px solid #3399FF;
25 box-shadow:0px 0px 2px #3399FF inset;
26 }
27
28 select {
29 padding:5px;
30 margin:2px 0px;
31 width:150px;
32 border:1px solid #33CCFF;
33 }
34
35 select:hover {
36 border:1px solid #3399FF;
37 }
38
39 select:focus {
40 border:1px solid #3399FF;
41 box-shadow:0px 0px 2px #3399FF inset;
42 }
43
44 input[type="submit"] {
45 margin:0;
46 padding:5px 15px;
47 border:1px solid #3399FF;
48 background:#33CCFF;
49 font-weight:bold;
50 color:#FFFFFF;
51 cursor:pointer;
52 }
53
54 input[type="submit"]:hover {
55 border:1px solid #3366FF;
56 background:#3399FF;
57 }
58
59 input[type="submit"]:focus {
60 box-shadow:0px 0px 5px #3399FF;
61 }
62
63 #header {
64 text-align:center;
65 margin-top:150px;
66 margin-bottom:20px;
67 color:#FFFFFF;
68 }
69
70 #header h1 {
71 padding:0;
72 margin:5px 0px;
73 font-family:Georgia;
74 text-shadow:1px 1px 2px #3366FF;
75 }
76
77 #header .desc {
78 font-family:Tahoma;
79 font-size:12px;
80 text-shadow:1px 1px 2px #3366FF;
81 }
82
83 #login {
84 width:250px;
85 margin:0px auto;
86 padding:10px 20px;
87 box-shadow:0px 0px 5px #3366FF;
88 border-radius:5px;
89 background:#FFFFFF;
90 }
91
92 #login .error {
93 line-height:16px;
94 color:#FF0000;
95 border-bottom:1px dashed #FF0000;
96 padding-bottom:5px;
97 }
98
99 #login .error span {
100 margin-left:10px;
101 font-size:11px;
102 line-height:15px;
103 }
Dan hasil akhirnya Form Login akan nampak seperti gambar di bawah ini:
Jika sudah jadi, berikut ini detail Login:

Username : tutorialweb
Password : tutorialweb
Level : Administrator
Status : User Aktif

Username : dosen
Password : dosen
Level : Dosen
Status : User Aktif

Username : mahasiswa
Password : mahasiswa
Level : Mahasiswa
Status : User Aktif

Username : user1
Password : user1
Level : Dosen
Status : User Tidak Aktif

[Download Source Code]


ajah

Anda mungkin juga menyukai