Hallo pembaca sekalian pada tutorial ini kita akan membahas cara membuat form login dengan php dan MySQLi database. Halaman login diperlukan untuk aplikasi berbasis web untuk memberikan batasan akses jika diperlukan. Biasanya batasan akses diperlukan seperti aplikasi web berbentuk sistem informasi, seperti sistem informasi akademik, sistem e-commerce dll. Show Sebelum membuat halaman login lengkap dengan database MySQLi hal – hal yang harus di siapkan untuk adalah sebagai berikut: 1. Editor Editor ini digunakan untuk menuliskan script seperti php, html dan css. Beberapa pilihan editor yang ada yaitu Sublime text, Visual studio code, notepad, notepad++, dll. Silahkan gunakan salah satu dari pilihan yang ada. 2. Database Server Selain MySQL kita bisa menggunakan database server lain seperti PostgreSQL. Khusus untuk tutorial ini kita menggunakan MySQL 3. Webserver Salah satu webserver yang sering digunakan adalah apache. Itulah beberapa hal yang harus ada dalam pembuatan form login. Kita dapat menginstalnya terlebih dahulu. Untuk database dan webserver dalam satu paket kita dapat menggunakan XAMPP atau WAMPP. Lebih lanjut pahami tentang kebutuhan software belajar php. Langkah – langkah Membuat Form dan Database untuk LoginHal yang akan diselesaikan untuk dapat membuat sistem login ini adalah antarmuka dan database. Ada beberapa halaman atau antarmuka yang harus kita buat. Silahkan ikuti langkah-langkah ini untuk membuat form login Menggunakan php dan MySQLi database. 1. Membuat Form LoginKita dapat membuat form dalam bentuk yang lebih sederhana. Dapat juga menggunakan bootstrap agar tampilan dari form yang dibuat menjadi lebih bagus seperti di bawah ini. Membuat Form LoginSilahkan donwload bootstrap terlebih dahulu dan masukkan ke directory project. Setelah memiliki bootstrap dalam project buat file login dengan menuliskan script di bawah ini: script login.php <?php session_start(); ?> <!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.0"> <link rel="stylesheet" href="./bootstrap-4.5.3/css/bootstrap.min.css"> <title>Halaman Login</title> </head> <body> <form action="proses_login.php" method="POST"> <div class="container" style="height: 500px"> <div class="row h-100"> <div class="col-sm-12 my-auto"> <div class="card w-50 mx-auto"> <div class="card-header bg-info"> <h4 class="text-white"> Halaman Login</h4> </div> <div class="card-body"> <div class="form-group"> <div class="row"> <div class="col-md-4">Username </div> <input type="text" name="username" class="form-control col-md-6"> </div> </div> <div class="form-group"> <div class="row"> <div class="col-md-4">Password </div> <input type="password" name="password" class="form-control col-md-6"> </div> </div> <div class="form-group"> <div class="row"> <div class="col-md-4"> </div> <input type="submit" class="btn btn-info"> </div> </div> <div class="form-group"> <div class="row"> <div class="col-md-4"> </div> <?php if (isset($_SESSION['login_gagal'])) { echo '<div class="alert alert-warning" role="alert">'; echo $_SESSION['login_gagal']; echo '</div> '; session_unset(); } ?> </div> </div> </div> </div> </div> </div> </div> </form> </body> </html> simpan script ini dicectory project : htdocs/indonetsource/login.php. Akses file login.php di browser melalui url: 2. Membuat Proses loginHalaman login yang dibuat pada langkah 1 memiliki button submit proses_login.php <?php session_start(); include 'koneksi.php'; $username = $_POST['username']; $password = $_POST['password']; echo $username; $query = mysqli_query($kon, "SELECT * FROM admin WHERE username='$username' AND password=md5('$password')"); if (mysqli_num_rows($query) > 0) { $data = mysqli_fetch_array($query); $_SESSION['username'] = $data['username']; header("Location: halaman_utama.php"); } else { $_SESSION['login_gagal'] = "Username dan password salah" ; header("Location: login.php"); } ?> simpan script ini dicectory project : htdocs/indonetsource/proses_login.php 4. Desain Halaman UtamaSebagai feedback apakah proses login yang kita buat berjalan maka akan ada 2 kondisi yang akan terjadi setelah halaman login di submit. Pertama notifikasi username dan password salah. Kedua terbukanya akses ke halaman utama jika password dan username yang dimasukkan benar. Desainlah halaman utama seperti di bawah ini yang akan muncul ketika proses login sukses. Halama Utamagunakan script di bawah ini untuk membuat halaman utama. halaman_utama.php <?php session_start(); if (!isset($_SESSION['username'])) { header("Location: login.php"); } ?> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./bootstrap-4.5.3/css/bootstrap.min.css"> <title>Halaman Utama</title> </head> <body> <div class="container"> <nav class="navbar navbar-expand-lg navbar-dark bg-info"> <a class="navbar-brand" href="#">Welcome.. <?php echo $_SESSION['username'] ?></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> </ul> <span class="navbar-text"> <a href="logout.php">Logout</a> </span> </div> </nav> <p>Hello... <?php echo $_SESSION['username'] ?> <br> <b>Selamat Anda Behasil Login</b> </p> </div> </body> </html> 5. Proses LogoutSelain login dalam sebuah sistem yang mempunyai aksi login tentu diperlukan logout yang bertujuan untuk mengakhiri aktivitas user. logout.php <?php session_start(); session_destroy(); header("Location: login.php"); ?> 6. Koneksi dan DatabaseKoneksi digunakan sebagai penghubung antara form dan database. Data siapa yang memiliki akses terhadap sistem login yang kita buat perlu di simpan di database. Setelah database dimiliki maka kita memerlukan scirpt koneksi untuk menyambungkan project yang kita buat dengan dataase. script koneksi.php <?php $hostname = "localhost"; $database = "indonetsource"; $username = "root"; $password = ""; $kon = mysqli_connect($hostname, $username, $password, $database); // script cek koneksi if (!$kon) { die("Koneksi Tidak Berhasil: " . mysqli_connect_error()); } ?> Struktur DatabaseSilahkan buat database dan tabel. Pada contoh ini menggunakan database indonetsource dan tabel admin. Tabel admin memiliki struktur seperti berikut: CREATE TABLE ` <?php session_start(); include 'koneksi.php'; $username = $_POST['username']; $password = $_POST['password']; echo $username; $query = mysqli_query($kon, "SELECT * FROM admin WHERE username='$username' AND password=md5('$password')"); if (mysqli_num_rows($query) > 0) { $data = mysqli_fetch_array($query); $_SESSION['username'] = $data['username']; header("Location: halaman_utama.php"); } else { $_SESSION['login_gagal'] = "Username dan password salah" ; header("Location: login.php"); } ?>0` varchar(50) NOT NULL, PRIMARY KEY (` username `)) ENGINE=MyISAM DEFAULT CHARSET=latin1 Insert Data admin ke DatabaseAda 3 nilai input untuk admin yaitu : username, password dan nama. Untuk password kita menggunakan hashing dengan algoritma md5. Perhatikan gambar di bawah ini, pada kolom function pilih MD5 saat input password. Insert data admin ke databaseJika seluruh tahap di atas telah dikerjakan silahkan akses url |