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)

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.

Lalu Save/Ok, hasilnya akan seperti dibawah ini

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.

Untuk video tutorialnya, silahkan klik link dibawah ini :

https://youtu.be/dfa6nttZQxo

Sumber : https://codeshack.io/secure-login-system-php-mysql/

Posting Komentar

5 Komentar

Sobat Hewan2 Februari 2021 pukul 01.49
Maaf kak... code nya error
Notice: Undefined variable: \index.php on line 5
BalasHapus
Balasan
awan18 Maret 2021 pukul 04.39

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
Balasan
osissmkn4pandeglang16 Juli 2021 pukul 14.08
Gimana cara merubah username dan password nya bang
BalasHapus
Balasan
Abu Atheea29 September 2021 pukul 23.42
Misal dipake untuk halaman login untuk blog semisal blogger untuk membatasi akses orang yg akan mengunjungi blog kita, bisa gk ya? Cara ngonekin ke blog gmana ya?
BalasHapus
Balasan

Tambahkan komentar

PlajariKode