Tutorial Membuat Form Login Dengan PHP dan MySQLi

Ahli Ngoding - Selain berfungsi sebagai keamanan suatu program, Form Login juga merupakan suatu halaman yang berfungsi untuk membatasi hak akses user. Artinya, user yang dapat mengakses halaman utama adalah user yang mempunyai username dan password. dan pada kesempatan kali ini saya akan berbagi sebuah Tutorial Membuat Form Login dengan PHP dan MySQLi.

Tutorial Membuat Form Login Dengan PHP dan MySQLi

sepertai yang sudah saya sebutkan diatas, saya akan membuat Form Login dengan menggunkan PHP dan MySQLi. Dan yang pertam kali saya buat adalah database di MySQL yang nantinya berfungsi untuk menyimpan data username dan password nya. Lalu setelah itu saya akan membuat form login nya dengan menggunakan PHP yang berfungsi untuk menginputkan username dan passwaord nya. Dan terakhir, saya akan membuat program nya dengan PHP. Untuk lebih lengkapnya silahkan simak langkah - langkahnya berikut.

Langkah pertama buka XAMPP lalu start Apache dan MySQL nya

Langkah kedua buka browser lalu masuk ke phpMyadmin dengan mengetikan http://localhost/phpmyadmin di addres bar

Langkah ketiga buat database serta tabelnya di MySQL yang terdiri dari field username dan password.

Langkah keempat buka teks editor seperti Sublime, Brackets atau Dreamweaver lalu buat form login nya lalu buat kode HTML seperti berikut dan beri nama login-form.html

<!DOCTYPE html>
<html>
<head>
 <title>Form Login</title>
</head>
<body>
 <h1>Silahkan Masukan Username dan Password anda</h1><br>
 <form method="post" action="login.php">
  <label>Username</label><br>
  <input type="text" name="username" maxlength="10"><br><br>
  <label>Password</label><br>
  <input type="text" name="password" maxlength="10"><br><br>
  <input type="submit" name="simpan" value="Simpan">
 </form>
</body>
</html>

Langkah kelima buat syntax PHP untuk proses login nya seperti dibawah ini dan beri nama login.php

<?php
if(isset($_POST['simpan'])){
 $user = $_POST['user'];
 $pass = $_POST['pass'];

 $conn = mysqli_connect('localhost', 'root', '', 'db_login');
  if(mysqli_connect_errno()){
   echo "Koneksi Ke Server Gagal";
   exit();
  }

 $sql="select * from t_login where username='".$user."'AND password='".$pass."'";
    $result=mysqli_query($conn, $sql);
    $num_rows=mysqli_num_rows($result);
    $row=mysqli_fetch_row($result);
    if($num_rows>0){
        session_start();
        $_SESSION["nama"]=$row['username'];
        $_SESSION["pass"]=$row['password'];
        echo "<script>location='home.html';</script>";
    } else {
        echo "<script>alert('Username atau Password Admin tidak benar !!!');</script>";
        echo "<script>location='login-form.html';</script>";
    }
}
?>

Jika login gagal, maka akan ada pesan bahwa Username atau Password Admin tidak benar. Sedangkan, jika login berhasil maka akan masuk ke halaman baru. seperti dibawah ini:
Langkah keenam untuk membuat halaman baru atau halaman beranda seperti gambar diatas silahkan perhatikan kode nya dibawah ini dan beri nama home.html

<!DOCTYPE html>
<html>
<head>
 <title>Form Login</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <div class="login">
  <div class="container">
   <div class="box">
    <h1>Selamat Anda Berhasil Login !!!</h1><br>
    <a href="logout.php">LOGOUT</a>
   </div>
  </div>
 </div>
</body>
</html>

Langkah ketujuh saya akan membuat syntax logout nya seperti dibawah ini dan beri nama logout.php

<?
session_destroy();
echo "<script>location='login-form.html';</script>";
?>

Setelah meng-klik tombol logout nantinya sistem akan kembali lagi ke form login.

Langkah kedelapan untuk sedikit mempercantik atau memperapih tampilan saya akan membuat file css nya seperti dibawah ini dan beri nama style.css

.login .container
{ 
 text-align: center; 
 vertical-align: center; 
 background-color: rgba(0,0,0,0.5); 
 height: 600px;
}

.box 
{ display: inline-block; 
 position: relative; 
 top: 50%; transform: 
 translateY(-50%);
}

.box a
{ 
 text-decoration: none; 
 color: #000000; font-weight: 
 bold; background-color:rgba(255,255,255,0.8); 
 padding: 6px; border-radius: 10px;
}

Setelah menggunakan css diatas maka tampilanya akan menjadi seperti berikut:
tampilan login-form.html