Login Form Dengan Autentikasi Username Dan Password Menggunakan PHP & MySQL

PlajariKode - Login form dengan autentikasi username dan password menggunakan php dan mysql
Hai, berjumpa lagi dalam blog sederhana ini, pada tutorial kali ini kita akan membuat Login Form Dengan Validasi Username Dan Password Menggunakan PHP & MySQL, yang sebelumnya kita sudah pernah membuatnya tapi berbasis desktop (VB.NET & SQLServer).

Yang akan kita plajari pada tutorial kali ini adalah:

  • Desain Form - Desain form login dengan HTML5 dan CSS3.
  • Prepared SQL Query - Bagaimana menggunakan prepared sql query untuk mencegah sql injection
  • Validasi - Mengecek data yang dikirimkan ke server (username dan password)
  • Session - Membuat session dari data yang diambil dari database

File yang akan kita buat beserta kegunaannya:

  • index.php - Membuat form login dengan PHP karna kita akan menampilkan pesan kesalahannya di halaman ini.
  • style.css - CSS untuk desain form.
  • Database.php - Koneksi ke database.
  • Auth.php - Untuk validasi, mengambil data dari database dan mengatur session.
  • home.php - Ketika berhasil login (username & password benar) akan diarahkan ke home.
  • logout.php - Menghapus semua session ketika logout.

Membuat Desain Form Login

  • Buat file baru dengan nama index.php
  • Copy lalu paste kode berikut:

<?php

require_once 'Auth.php';

if($auth->isLoggedIn()) {
 header('location:home.php');
}

if(isset($_POST['submit'])) {
 $username = $_POST['username'];
 $password = $_POST['password'];
 
 if($auth->login($username, $password)) {
  header('location:home.php');
 }
}
?>

<!DOCTYPE html>
<html>
<head>
 <title>Login</title>
 <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="login">
  <h1>Login</h1>

  <div style="text-align: center; color: #ff0000;">
   <span>
    
    <?php
     if(isset($_SESSION['error'])) {
      echo $_SESSION['error'];
     }
    ?>

   </span>
  </div>

  <form method="post">
   <label for="username">
    <i class="fas fa-user"></i>
   </label>
   <input type="text" name="username" placeholder="Username" id="username" required>
   <label for="password">
    <i class="fas fa-lock"></i>
   </label>
   <input type="password" name="password" placeholder="Password" id="password" required>
   <input type="submit" name="submit" value="Login">
  </form>
 </div>

</body>
</html>

Maka hasilnya akan seperti ini

PlajariKode - Login form dengan autentikasi
Kemudian kita buat style.css untuk mempercantik tampilannya, berikut kodenya 
* {
 box-sizing: border-box;
 font-family: sans-serif;
 font-size: 16px;
}

.login {
 width: 400px;
 box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
 margin: 100px auto;
 border-radius: 8px;
 padding-bottom: 30px;
}

.login h1 {
 text-align: center;
 font-size: 24px;
 padding: 20px 0;
 border-bottom: 1px solid #dee0e4;
}

.login form {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 padding-top: 20px;
}

.login form label {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 50px;
 height: 50px;
 background-color: #435165;
 color: #ffffff;
}

.login form input[type="password"],
.login form input[type="text"] {
 width: 310px;
 height: 50px;
 border: 1px solid #dee0e4;
 margin-bottom: 20px;
 padding: 0 15px;
}

.login form input[type="submit"] {
 width: 50%;
 padding: 15px;
 margin-top: 20px;
 background-color: #ffa500;
 border: 0;
 cursor: pointer;
 font-weight: bold;
 color: #ffffff;
 transition: background-color 0.2s;
 border-radius: 4px;
}

.login form input[type="submit"]:hover {
 background-color: #ff7d00;
 transition: background-color 0.2s;
}

Tampilannya akan berubah seperti ini (apabila icon tidak tampil, coba sambungkan ke internet kemudian reload) 

PlajariKode -  Login form dengan autentikasi username dan password menggunakan php dan mysql

Membuat Database beserta Tabelnya

Setelah itu, pergi ke phpMyAdmin untuk buat database baru (atau gunakan yang sudah ada), disini kita namakan databasenya login.

Kemudian buat tabel baru, kita namakan tabel akun.

PlajariKode - Login form dengan autentikasi username dan password menggunakan PHP dan MySQL

Lalu Save/Ok, hasilnya akan seperti dibawah ini

PlajariKode - Login form dengan autentikasi username dan password menggunakan php dan mysql

Klik pada menu SQL dan pastekan kode dibawah ini untuk menambahkan data untuk tabel akun.
INSERT INTO `akun`(`id`, `username`, `password`, `email`) VALUES ('', 'ullprasetio', '$2y$10$J2vU.XzW9xbX7gtNA2eAA.m7ezY98/if8VpLJ9O2gEWLpF4kHFD9i', 'ullprasetio@test.com')

Kita sudah menambahkan 1 data baru dengan username ullprasetio dan password 123123123

Koneksi Database

Buat file php baru dengan nama Database.php, pada file ini terdapat kode untuk mengkoneksikan ke database yang sudah kita buat tadi.
<?php

class Database {
 var $db_host = 'localhost';
 var $db_user = 'root';
 var $db_pass = '';
 var $db_name = 'login';
 var $con = '';

 public function __construct() {
  $this->con = mysqli_connect($this->db_host, $this->db_user, $this->db_pass, $this->db_name);

  if(mysqli_connect_errno()) {
   echo "Koneksi gagal : " . mysqli_connect_error();
  }
 }


Cek Pengguna dengan PHP

Buat file php dengan nama Auth.php, pada bagian ini kita melakukan:
  • Cek apakah username ada atau tidak? 
  • Password benar atau salah (menggunakan password_verify)? 
  • Membuat session jika login berhasil.
  • Cek session.
<?php

session_start();

require_once 'Database.php';

class Auth extends Database {
 public function login($username, $password) {
  // prepare statement untuk menghindari sql injection
  $stmt = $this->con->prepare("SELECT id, password, email FROM akun WHERE username = ?");
  $stmt->bind_param('s', $username);
  $stmt->execute();
  $hasil = $stmt->get_result();

  // cek jika user ada
  if($hasil->num_rows > 0) {
   $row = $hasil->fetch_assoc();
   // cek kesamaan password
   if(password_verify($password, $row['password'])) {
    session_regenerate_id();
    $_SESSION['id'] = $row['id'];
    $_SESSION['username'] = $username;
    $_SESSION['password'] = $row['password'];
    $_SESSION['email'] = $row['email'];
    header('location:home.php');
   } else {
    $_SESSION['error'] = "Password tidak valid!";
    header('location:index.php');
   }
  } else {
   $_SESSION['error'] = "Username tidak terdaftar!";
   header('location:index.php');
  }
 }

 public function isLoggedin() {
  // cek session id
  if(isset($_SESSION['id'])) {
   return true;
  }
 }

 public function logout() {
  session_destroy();
  return true;
 }
}

$auth = new Auth;

Lalu kita cek dengan memasukan data yang salah dalam form login, maka akan muncul pesan seperti ini.

PlajariKode - Login form dengan autentikasi menggunakan php dan mysql

Halaman Home

Terakhir, buat file home.php.
<?php

require_once 'Auth.php';

if(!$auth->isLoggedIn()) {
 header('location:index.php');
}

?>

<!DOCTYPE html>
<html>
<head>
 <title>Home</title>
 <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <center>
  <h3>Selamat datang <?= $_SESSION['username']; ?></h3>
  <label for="logout">
   <i class="fas fa-sign-out-alt"></i>
  </label>
  <a href="logout.php" style="text-decoration: none;">Logout</a>
 </center>
</body>
</html>

Jika username dan password benar maka akan diarahkan ke halaman Home.

PlajariKode -  Login form dengan autentikasi username dan password menggunakan php dan mysql

Untuk video tutorialnya, silahkan klik link dibawah ini :

Posting Komentar

4 Komentar

  1. Maaf kak... code nya error
    Notice: Undefined variable: \index.php on line 5

    BalasHapus
    Balasan
    1. Pastikan file index.php sudah dibuat dan berada dalam folder yang sama bang.

      Hapus

  2. Parse error: syntax error, unexpected end of file, expecting function (T_FUNCTION) in C:\xampp\htdocs\email\database.php on line 16

    error knp ya om

    BalasHapus
  3. Gimana cara merubah username dan password nya bang

    BalasHapus