Login adalah salah satu fitur yang sangat penting, dikarenakan untuk memastikan siapa saja yang berhak untuk login pada sebuah aplikasi.
Login memiliki beberapa level tertentu, misalnya administrator bisa mengakses semua menu, admin gudang hanya menu tertentu, dan user menu tertentu juga. Logout berfungsi untuk mengakhiri atau keluar dari sebuah aplikasi .
Berikut ini Tutorial Membuat Login dan Logout Dengan PHP 5 MySQL MD5 yang wajib kamu ketahui.
Daftar Isi
1. Requirement
- PHP versi 5.6.37
- Text Editor Code (Sublime Text, Notepad, Visual Studio Code atau yang lainnya)
- XAMPP
Download Assets disini
2. Folder & File
3. Database
Buatlah database dengan nama eknotes_login
4. phpMyAdmin
Copy paste script phpMyAdmin dibawah ini seperti gambar.
CREATE TABLE `admin` ( `id_user` int(5) NOT NULL AUTO_INCREMENT, `username` varchar(100) NOT NULL, `password` varchar(100) NOT NULL, `nama` varchar(100) NOT NULL, PRIMARY KEY (`id_user`) ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1; INSERT INTO `admin` (`id_user`, `username`, `password`, `nama`) VALUES ('1', 'eknotes', '5cec3b8b84b00afc3bc0d668e8112a89', 'EKNotes');
5. Koneksi
Copy paste script dibawah ini kemudian simpan dengan nama koneksi.php didalam folder config.
<?php $host = "localhost"; $user = "root"; $pass = ""; $db = "eknotes_login"; $connect = mysql_connect($host,$user,$pass) or die("Gagal Connect ke Database"); $db = mysql_select_db($db) or die("Database Tidak Ada"); ?>
- User: root
- Password: kosongin aja
- Database: isi dengan ek_notes sesuai dengan database yang tadi dibuat
6. Index.php
Copy paste script dibawah ini kemudian simpan dengan nama index.php
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/brain-theme.css"> <link rel="stylesheet" type="text/css" href="assets/css/styles.css"> <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.css"> <link rel="stylesheet" type="text/css" href="assets/css/font.css"> <title>Login Admin Panel | Teknotes.id </title> </head> <body style="background: #ffffff url(assets/img/bg.jpg) left bottom fixed;"> <body> <!-- Login wrapper --> <div class="login-wrapper"> <center><img src="assets/img/logo.png" width="300"><br><br> <form name="login" action="otentikasi.php" role="form" method="post"> <div class="panel panel-default"> <div class="panel-heading"><h6 class="panel-title">Login Admin Panel</h6></div> <div class="panel-body"> <div class="form-group has-feedback" align="left"> <label>Username</label> <input type="text" class="form-control" name="username" placeholder="Username..." required> <i class="fa fa-user form-control-feedback"></i> </div> <div class="form-group has-feedback" align="left"> <label>Password</label> <input type="password" class="form-control" name="password" placeholder="Password..." required> <i class="fa fa-lock form-control-feedback"></i> </div> <div class="row form-actions"> <div class="col-xs-6"> </div> <div class="col-xs-6"> <button type="submit" class="btn btn-warning pull-right"><i class=""></i>Login</button> </div> </div> </div> </div> </form> <?php //kode php ini kita gunakan untuk menampilkan pesan error if (!empty($_GET['error'])) { if ($_GET['error'] == 4) { echo "<font color=red><h5>Username dan Password salah!</h5></font>"; } } ?> </div> </div> </body> </html>
7. Otentikasi
Copy paste script dibawah ini kemudian simpan dengan nama otentikasi.php
<?php include 'config/koneksi.php'; function antiinjection($data){ $filter_sql = mysql_real_escape_string(stripslashes(strip_tags(htmlspecialchars($data,ENT_QUOTES)))); return $filter_sql; } session_start(); //tangkap data dari form login $username = $_POST['username']; $password = md5($_POST['password']); //untuk mencegah sql injection $username = antiinjection($username); $password = antiinjection($password); $loginadmin = mysql_query("select * from admin where username='$username' and password='$password'"); $q=mysql_fetch_array($loginadmin); if (mysql_num_rows($loginadmin) == 1) { //kalau user dan password sudah terdaftar di database //buat session dengan username dengan isi nama user yang login $_SESSION['username'] = $q['username']; $_SESSION['password'] = $q['password']; $_SESSION['nama'] = $q['nama']; //redirect ke halaman index header('location:page/index.html'); } else { //kalau username ataupun password tidak terdaftar di database header('location:index.php?error=4'); } ?>
Keterangan: file otentikasi berguna untuk mengecek apakah username dan password yang sudah dimasukan benar atau salah. Jika benar maka akan dialihkan ke menu index.html jika salah maka muncul pesan error dan memasukan kembali username dan password dengan benar. Selain itu ada script antiinjection yang berguna agar user tidak bisa masuk ke menu index.html tanpa login.
8. Index.html
Copy paste script dibawah ini dengan nama index.html kemudian simpan didalam folder page.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Membuat Menu Dropdown - EKNotes | Teknotes.id</title> <!---================Assets=====================--> <link rel="stylesheet" type="text/css" href="../assets/css/style.css"> <!---================End Assets=====================--> </head> <body> <nav id="menu"> <ul> <div id="heading"><br> <a href="index.html"><img src="../assets/img/logo.png" width="170" height="60" ><i></i></a></li> </div> <li><a href="#"> Menu 1</a></li> <li class="dropdown"><a href="#">Menu 2</a> <ul class="isi-dropdown"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a></li> </ul> </li> <li><a href="#"< Menu 3</a></li> <li><a href="#"< Menu 4</a></li> <li class="dropdown"><a href="#">Menu 5</a> <ul class="isi-dropdown"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a></li> </ul> </li> <li><a href="../page/logout.php"> Logout</a></li> </ul> </nav> </body> </html>
9. Logout
Copy paste script dibawah ini kemudian simpan dengan nama logout.php didalam folder page.
<?php session_start(); session_destroy(); session_start(); session_regenerate_id(); echo "<script>window.alert('Anda berhasil logout!'); window.location=(href='../index.php')</script>"; echo "<meta http-equiv='refresh' content='0;url=../index.php'>"; ?>
Tampilan
Kesimpulan
Demikian artikel tentang Tutorial Membuat Login dan Logout Dengan PHP 5 MySQL MD5 Jika ada saran silahkan komentar. Semoga bermanfaat ya Terima Kasih