Cara Membuat Form Login dengan PHP dan MySQL

Cara Membuat Form Login dengan PHP dan MySQL

Cara Membuat Form Login dengan PHP dan MySQL

Cara membuat form login PHP - Sistem login sangat dibutuhkan untuk mengatur siapa saja yang bisa masuk dan mengubah data. Sistem ini biasanya sering kita jumpai pada aplikasi sosmed seperti Facebook, Instagram dan Twitter.

Lalu, bagaimana cara membuat form login dengan PHP? Berikut ini merupakan panduan untuk cara membuatnya.

Daftar isi:

Membuat form login PHP dan MySQL database

Sebelum kita masuk ke pembuatannya. Kamu harus menyiapkan beberapa perlengkapan di bawah ini:

  1. Text editor - Alat ini dibutuhkan untuk menulis kode PHP kita. Kamu bisa menggunakan text editor seperti Visual Code Studio, Sublime Text, Atom, Notepad++ atau lainnya.
  2. Web Server - Dibutuhkan untuk bisa menjalankan PHP dan Database. Terdapat banyak Web Server lokal yang bisa kita gunakan, pilih saja XAMPP. Kamu bisa mengunduhnya langsung di halaman resminya - XAMPP Download. Jika sudah di-download, silahkan install saja.

Jika persiapan di atas sudah kamu lakukan. Sekarang kita bisa melanjutkan tutorial ini. Silahkan ikuti langkah-langkah di bawah ini untuk membuat form login PHP.

1. Jalankan Web Server

Disini saya akan menggunakan XAMPP sebagai Web Server-nya. Jika sudah terpasang, silahkan buka XAMPP. Lalu jalankan Apache dan MySQL-nya dengan mengklik Start. Tanda berhasil terhubung akan muncul warna hijau pada Apache dan MySQL.

2. Membuat Database

Jika kamu berhasil mengaktifkan Web Server, sekarang kita akan membuat Database.

  • Buka Browser lalu ketikkan localhost/phpmyadmin.
  • Pada bagian kiri halaman phpMyAdmin klik New/Baru.
  • Kemudian buat Database dengan nama db_login
  • Pada bagian topbar phpMyAdmin, klik SQL lalu masukkan kode berikut:
sql
CREATE TABLE IF NOT EXISTS `tb_admin` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(255) NOT NULL, `password` varchar(255) NOT NULL, PRIMARY KEY (`id`) )
  • Maka tabel dengan nama tb_admin akan terbuat.

Pada tahap ini, kita sudah membuat sebuah database. Namun dengan data yang masih kosong.

3. Membuat Struktur Folder

Setelah kita membuat Database, sekarang kita akan membuat struktur folder. Ikuti langkah berikut ini:

  • Akses folder C:\xampp\htdocs atau D:\xampp\htdocs.
  • Pada folder htdocs silahkan buat folder baru dengan nama myloginform (namanya terserah sih).
  • Dalam folder myloginform, buatlah file berikut ini:
    1. index.php
    2. login.php
    3. register.php
    4. logout.php
    5. config.php
    6. style.css
  • Setelah itu buka folder myloginform di text editor kamu.

4. Menyambungkan Database

Pada text editor, buka file config.php. Lalu salin kode di bawah ini ke dalam file tersebut:

php
<?php $hostname = 'localhost'; $username = 'root'; $password = ''; $dbname = 'db_login'; $conn = mysqli_connect($hostname, $username, $password, $dbname); if (!$conn) { die ("<script>alert('Gagal terhubung dengan database.')</script>"); } ?>

Untuk mengetahui apakah kode di atas tidak ada error, kita harus membukanya di browser. Buka URL berikut localhost/myloginform/config.php. Jika gagal terhubung dengan database. Pastikan $dbname diisi sama dengan nama database yang kamu buat tadi.

5. Membuat halaman Register

Karena kita belum memiliki data yang akan kita gunakan untuk Login. Maka dari itu, kita harus membuat form Register terlebih dahulu.

Hal pertama yang akan kita lakukan adalah membuat kerangka HTML. Salin kode berikut dan simpan ke dalam file register.php:

html
<!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"> <title>Register</title> <link rel="stylesheet" href="./style.css"> </head> <body> <main class="main-wrap"> <div class="main-inner"> <div class="form-box"> <div class="form-title"> <h2 class="title">Register</h2> </div> <form action="" method='POST'> <input type="text" name="username" id="username" placeholder='Username' required> <input type="password" name="password" id="password" placeholder='Minimal 6 karakter' pattern='.{6,}' required> <div class="form-group"> <input type="checkbox" name="terms" id='terms'> <label for="terms">Syarat & Ketentuan</label> </div> <button type="submit" name='submit'>Daftar</button> <div class="form-text"> <span>Sudah punya akun? <a href="login.php">Login</a>.</span> </div> </form> </div> </div> </main> </body> </html>

Seperti yang kamu lihat pada kode di atas, terdapat tag <form> dengan attribute action="" dan method="POST". Attribute action="" mengartikan bahwa setiap data yang telah di submit akan dikirimkan ke halaman itu sendiri. Kemudian, attribute method="POST" berperan untuk menampung datanya.

Nah, untuk bisa memanggil data yang dikirim tadi. Kita bisa menggunakan $_POST["input_name"]. Dengan POST diambil dari attribute method dan input_name diambil dari attribute name pada tag <input>.

Setelah itu mari kita tambahkan kode PHP ke dalam kode HTML tadi. Kita akan memulai sebuah session dan memanggil database dari file config.php. Silahkan salin kode di bawah ini dan simpan tepat di atas kode HTML tadi:

php
<?php session_start(); include "config.php"; ?>

Dengan adanya session_start(), kita bisa memanggil dan menyimpan data menggunakan kode $_SESSION. Kemudian, kode include "config.php"; digunakan untuk memanggil file config.php.

Setelah itu, kita buat pengkondisian untuk mencari tahu apakah kode $_SESSION["login"] ada atau tidak. Silahkan tambahkan kode di bawah ini ke dalam tag PHP tadi:

php
if (isset($_SESSION["login"])) { header("Location: /myloginform/index.php"); }

Kode tersebut akan kita gunakan untuk mengetahui apakah kita sudah login atau belum. Jika sudah, maka kita akan dialihkan otomatis ke halaman index.php.

Kemudian, kita akan membuat pengkodisian lagi jika tombol Submit ditekan. Pengkondisian ini sangat dibutuhkan. Karena, di dalam sinilah kita memproses semua data untuk dikirimkan ke database kita. Pertama kita isikan dengan kode global $conn. Silahkan kamu salin kode di bawah ini dan tambahkan kedalam tag PHP tadi.

php
if (isset($_POST["submit"])) { global $conn; }

Setelah itu kita buat dua variabel dengan nama $username dan $password. Kedua variabel tersebut akan mengambil data dari data yang sudah dikirim tag <form>. Silahkan tambahkan kode berikut ke dalam pengkondisian tadi:

php
$username = strtolower(stripslashes($_POST["username"])); $password = mysqli_real_escape_string($conn, $_POST["password"]);

Agar password user tidak bisa dilihat oleh orang lain, kita tambahkan enkripsi pada variabel password. Ada banyak sekali cara untuk mengenkripsi password dalam PHP, salah satunya menggunakan MD5. Sayangnya cara tersebut sudah tidak efektif lagi.

Karena itu, saya menggunakan password_hash. Kode tersebut membutuhkan 2 parameter. Parameter ke-1 diisi dengan nilai dari variabel $password dan parameter ke-2 diisi dengan PASSWORD_DEFAULT. Silahkan tambahkan kode berikut ke dalam pengkondisian tadi:

php
$password_en = password_hash($password, PASSWORD_DEFAULT);

Setelah itu, kita buat pengkondisian agar user tidak mendaftarkan username yang sama. Salin kode berikut dan tambahkan ke dalam pengkondisian tadi:

php
$username_check = mysqli_query($conn, "SELECT * FROM tb_admin WHERE username = '$username'"); if (mysqli_fetch_assoc($username_check)) $username_err = "Username sudah digunakan.";

Karena kita membuat tombol Syarat & Ketentuan. Maka kita harus memastikan user setuju dengan Syarat & Ketentuan kita. Silahkan salin kode berikut dan simpan ke dalam pengkondisian tadi:

php
if (!isset($_POST["terms"])) $terms_err = "Klik centang pada syarat & ketentuan pendaftaran.";

Nah, disini kita masuk kedalam kode yang sangat penting yaitu, mysqli_query. Kode ini digunakan untuk menjalankan perintah MySQL. Dengan begitu, kita bisa memasukkan data yang kita dapat ke dalam database. Salin kode berikut ini ke dalam pengkondisian tadi:

php
if (!empty($username) && !empty($password) && isset($_POST["terms"]) && !mysqli_fetch_assoc($username_check)) { $result = mysqli_query($conn, "INSERT INTO tb_admin VALUES('', '$username', '$password_en')"); } if (isset($result)) header("Location: /myloginform/login.php");

Pada kode tersebut, saya juga membuat sebuah pengkondisian. Dimana jika kita berhasil mendaftar, kita akan dialihkan ke halaman Login.

Terakhir, kita akan menambahkan sistem validasi. Salin kode di bawah ini, dan simpan tepat di atas tag <div class="form-text">.

php
<?php global $username_err; if(!empty($username_err)) echo "<div class='text-error'>* ". $username_err ."</div>" ?> <?php global $terms_err; if(!empty($terms_err)) echo "<div class='text-error'>* ". $terms_err ."</div>" ?>

- Kode lengkap halaman Register

Dengan semua kode tersebut, kita sudah bisa membuat halaman register. Berikut ini kode lengkap untuk halaman register.php.

php
<?php session_start(); include "config.php"; if (isset($_SESSION["login"])) { header("Location: /myloginform/index.php"); } if (isset($_POST["submit"])) { global $conn; $username = strtolower(stripslashes($_POST["username"])); $password = mysqli_real_escape_string($conn, $_POST["password"]); $password_en = password_hash($password, PASSWORD_DEFAULT); $username_check = mysqli_query($conn, "SELECT * FROM tb_admin WHERE username = '$username'"); if (mysqli_fetch_assoc($username_check)) $username_err = "Username sudah digunakan."; if (!isset($_POST["terms"])) $terms_err = "Klik centang pada syarat & ketentuan pendaftaran."; if (!empty($username) && !empty($password) && isset($_POST["terms"]) && !mysqli_fetch_assoc($username_check)) { $result = mysqli_query($conn, "INSERT INTO tb_admin VALUES('', '$username', '$password_en')"); } if (isset($result)) header("Location: /myloginform/login.php"); } ?> <!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"> <title>Register</title> <link rel="stylesheet" href="./style.css"> </head> <body> <main class="main-wrap"> <div class="main-inner"> <div class="form-box"> <div class="form-title"> <h2 class="title">Register</h2> </div> <form action="" method='POST'> <input type="text" name="username" id="username" placeholder='Username' required> <input type="password" name="password" id="password" placeholder='Minimal 6 karakter' pattern='.{6,}' required> <div class="form-group"> <input type="checkbox" name="terms" id='terms'> <label for="terms">Syarat & Ketentuan</label> </div> <button type="submit" name='submit'>Daftar</button> <?php global $username_err; if(!empty($username_err)) echo "<div class='text-error'>* ". $username_err ."</div>" ?> <?php global $terms_err; if(!empty($terms_err)) echo "<div class='text-error'>* ". $terms_err ."</div>" ?> <div class="form-text"> <span>Sudah punya akun? <a href="login.php">Login</a>.</span> </div> </form> </div> </div> </main> </body> </html>

Setelah itu kita lanjutkan ke halaman Login.

6. Membuat halaman Login

Setelah kita mempunyai halaman Register. Sekarang kita akan membuat halaman Login. Sama seperti halaman Register, pertama kita akan membuat kerangka HTML. Silahkan salin kode di bawah ini dan simpan ke dalam file login.php.

html
<!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"> <title>Login</title> <link rel="stylesheet" href="./style.css"> </head> <body> <main class="main-wrap"> <div class="main-inner"> <div class="form-box"> <div class="form-title"> <h2 class="title">Login</h2> </div> <form action="" method='POST'> <input type="text" name="username" id="username" placeholder='Username' required> <input type="password" name="password" id="password" placeholder='Minimal 6 karakter' pattern='.{6,}' required> <button type="submit" name='login'>Masuk</button> <div class="form-text"> <span>Belum punya akun? <a href="register.php">Daftar</a>.</span> </div> </form> </div> </div> </main> </body> </html>

Setelah itu, kita tambahkan kode PHP di atas kode HTML tersebut. Silahkan salin kode berikut ini dan simpan di atas kode HTML tadi:

php
<?php session_start(); include "config.php"; if (isset($_SESSION["login"])) { header("Location: /myloginform/index.php"); } ?>

Setelah itu, kita buat sebuah pengkondisian jika tombol Daftar di tekan. Untuk membuat pengkondisian itu, pertama kita harus membuat kode berikut ini:

php
if (isset($_POST["login"])) { global $conn; }

Setelah itu, kita buat dua variabel dengan nama $username dan $password. Salin kode berikut ini dan simpan ke dalam pengkondisian tadi:

php
$username = $_POST["username"]; $password = $_POST["password"];

Kemudian, kita akan menggunakan kedua variabel tersebut untuk mencocokkan data yang diinputkan user dengan data yang terdapat di dalam database. Untuk melakukan itu, kita bisa menggunakan kode mysqli_query.

Pertama, kita cocokkan username terlebih dahulu. Caranya, silahkan salin dan simpan kode berikut ini di dalam pengkondisian tadi:

php
$result = mysqli_query($conn, "SELECT * FROM tb_admin WHERE username = '$username'");

Setelah itu, kita buat pengkondisian lagi, untuk mengecek jika username benar. Kodenya seperti ini:

php
if (mysqli_num_rows($result) === 1) { ... } else { $login_err = "Username yang kamu masukkan salah."; }

Setelah itu, kita akan melakukan pengecekkan pada password. Sehingga menjadi seperti ini:

php
if (mysqli_num_rows($result) === 1) { $row = mysqli_fetch_assoc($result); if (password_verify($password, $row["password"])) { ... } else { $login_err = "Password yang kamu masukkan salah."; } } else { $login_err = "Username yang kamu masukkan salah."; }

Jika username dan password benar, kita akan alihkan user ke halaman index.php dan membuat variabel $_SESSION["login"] = true;. Maka kodenya akan menjadi seperti ini:

php
if (mysqli_num_rows($result) === 1) { $row = mysqli_fetch_assoc($result); if (password_verify($password, $row["password"])) { $_SESSION["login"] = true; $_SESSION["name"] = $username; header("Location: /myloginform/index.php"); } else { $login_err = "Password yang kamu masukkan salah."; } } else { $login_err = "Username yang kamu masukkan salah."; }

Salin kode di atas, dan simpan ke dalam pengkondisian tadi.

Setelah itu, kita akan membuat pesan jika user gagal masuk. Salin kode di bawah ini dan simpan di atas tag <input name="username" id="username">.

php
<?php global $login_err; if(!empty($login_err)) echo "<div class='form-error'>". $login_err ."</div>" ?>

- Kode lengkap halaman Login

Dengan kode-kode tersebut, kita sudah berhasil membuat halaman rogin. Silahkan salin kode di bawah ini untuk halaman login.php.

php
<?php session_start(); include "config.php"; if (isset($_SESSION["login"])) { header("Location: /myloginform/index.php"); } if (isset($_POST["login"])) { global $conn; $username = $_POST["username"]; $password = $_POST["password"]; $result = mysqli_query($conn, "SELECT * FROM tb_admin WHERE username = '$username'"); if (mysqli_num_rows($result) === 1) { $row = mysqli_fetch_assoc($result); if (password_verify($password, $row["password"])) { $_SESSION["login"] = true; $_SESSION["name"] = $username; header("Location: /myloginform/index.php"); } else { $login_err = "Password yang kamu masukkan salah."; } } else { $login_err = "Username yang kamu masukkan salah."; } } ?> <!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"> <title>Login</title> <link rel="stylesheet" href="./style.css"> </head> <body> <main class="main-wrap"> <div class="main-inner"> <div class="form-box"> <div class="form-title"> <h2 class="title">Login</h2> </div> <form action="" method='POST'> <?php global $login_err; if(!empty($login_err)) echo "<div class='form-error'>". $login_err ."</div>" ?> <input type="text" name="username" id="username" placeholder='Username' required> <input type="password" name="password" id="password" placeholder='Minimal 6 karakter' pattern='.{6,}' required> <button type="submit" name='login'>Masuk</button> <div class="form-text"> <span>Belum punya akun? <a href="register.php">Daftar</a>.</span> </div> </form> </div> </div> </main> </body> </html>

Setelah itu, kita akan membuat halaman index.php.

7. Membuat halaman Index

Rasanya aneh, jika user berhasil Login tapi user dialihkan ke halaman kosong. Karena itu, sekarang saatnya untuk membuat halaman Index.

Seperti biasa, kita akan membuat kerangka HTML terlebih dahulu. Silahkan salin kode di bawah ini, dan simpan ke dalam file index.php.

html
<!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"> <title>MyLoginForm</title> <link rel="stylesheet" href="./style.css"> </head> <body> <main class="main-wrap"> <div class="main-inner"> <div class="main-content"> <div class="main-title"> ... </div> <div class="main-logout"> <a href="logout.php">Keluar</a> </div> </div> </div> </main> </body> </html>

Setelah itu, mari kita tambahkan kode PHP. Silahkan salin kode berikut ini, dan simpan di atas kode HTML tadi.

php
<?php session_start(); include "config.php"; if (!isset($_SESSION["login"])) { header ("Location: /myloginform/login.php"); exit; } ?>

Setelah itu, kita tambahkan kode berikut ke dalam tag <div class="main-title">.

php
<?php if (isset($_SESSION["name"])) { echo "<h2 class='title'>Hi, selamat datang ". $_SESSION["name"] ."</h2>"; } ?>

- Kode lengkap halaman Index

Berikut ini, kode lengkap dari halaman index. Kamu bisa menyalinnya dan menyimpannya ke halaman index.php.

php
<?php session_start(); include "config.php"; if (!isset($_SESSION["login"])) { header ("Location: /myloginform/login.php"); exit; } ?> <!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"> <title>MyLoginForm</title> <link rel="stylesheet" href="./style.css"> </head> <body> <main class="main-wrap"> <div class="main-inner"> <div class="main-content"> <div class="main-title"> <?php if (isset($_SESSION["name"])) { echo "<h2 class='title'>Hi, selamat datang ". $_SESSION["name"] ."</h2>"; } ?> </div> <div class="main-logout"> <a href="logout.php">Keluar</a> </div> </div> </div> </main> </body> </html>

Setelah itu, sekarang kita akan membuat halaman Logout.

8. Membuat halaman Logout

Setelah kita berhasil Login, tentunya kita tombol untuk keluar. Untuk membuat halaman Logout. Silahkan buka file logout.php di text editor. Lalu salin dan simpan kode berikut ke dalam file logout.php.

php
<?php session_start(); session_unset(); session_destroy(); unset($_SESSION["login"]); unset($_SESSION["name"]); $_SESSION = []; header("Location: /myloginform/login.php"); exit; ?>

Dengan menambahkan kode tersebut, sekarang kamu sudah bisa keluar dari halaman Index.

9. Mempercantik halaman dengan CSS

Setelah kita berhasil membuat seluruh halaman. Saatnya kita mempercantik halaman dengan CSS. Salin semua kode berikut, ke dalam file style.css.

css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap'); *, ::before, ::after { box-sizing: border-box; } body { position: relative; background-color: #fefefe; color: #222222; font-size: 16px; font-family: Noto Sans, sans-serif; padding: 0; margin: 0; word-break: break-word; } a { text-decoration: none; color: #3030d4; } a:hover { opacity: .7; transition: .15s ease; } .main-wrap { width: 100%; height: 100vh; } .main-inner { position: relative; display: flex; align-items: center; justify-content: center; max-width: calc(1020px + 40px); height: 100%; padding: 0 20px; margin: 0 auto; } .main-title h2 { font-size: 32px; margin: 0; margin-bottom: 40px; } .main-logout a { display: inline-flex; align-items: center; padding: 8px 10px; border-radius: 4px; background-color: #ff4848; color: #ffffff; font-size: 14px; } .form-box { width: 100%; max-width: 380px; padding: 14px; border: 1px solid rgba(0,0,0,0.08); border-radius: 4px; } .form-title { display: flex; align-items: center; margin-bottom: 20px; } .form-title h2 { font-size: 16px; margin: 0; } .form-box form > input { display: block; width: 100%; padding:12px 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.08); outline: 0; } .form-box form > input:not(:last-child) { margin-bottom: 20px; } .form-box form > button { display: block; padding: 10px 12px; border: 0; outline: 0; border-radius: 4px; background-color: #3030d4; color: #ffffff; margin-bottom: 20px; cursor: pointer; } .form-group { display: flex; align-items: center; font-size: 13px; color: #444444; margin-bottom: 20px; } .form-group label { margin-left: 5px; } .form-text { display: flex; align-items: center; justify-content: center; font-size: 14px; color: #444; } .form-error { display: flex; align-items: center; padding: 8px 10px; border-radius: 4px; font-size: 13px; margin-bottom: 20px; background-color: #ff4848; color: #ffffff; } .text-error { display: block; font-size: 13px; color: #ff4848; margin: 5px 0 15px; }

Bisa kamu lihat, halaman Login dan Register sudah lebih baik.

Penutupan

Akhirnya kita sudah bisa membuat form login dan registrasi menggunakan PHP dan MySQL. Semua kode di atas, bisa kamu pelajari lagi. Karena, ya, saya tidak pandai dalam menjelaskan. Tapi, saya harao kamu bisa memahami semua kode-kode yang saya berikan.

Jika masih ada yang belum kamu pahami, jangan ragu untuk bertanya di kolom komentar. Baiklah, mungkin itu saja untuk cara membuat form login dengan PHP dan MySQL Database. Terimakasih sudah berkunjung dan semoga bermanfaat.

Comments