Belajar Membuat Halaman Form Login Dengan PHP, MySql, dan HTML

Sigit N
PHP, HTML (HyperText Markup Language)
Belajar Membuat Halaman Form Login Dengan PHP, MySql, dan HTML
Konten Halaman

Membuat halaman form login dengan PHP dan HTML, di tutorial ini menggunakan XAMPP dan build function mysqli di PHP sehingga nantinya PHP terhubung dengan MySql atau MariaDB dan HTTP server menggunakan Apache bawaan dari XAMPP.

Pada tutorial ini studi case nya adalah :

  • membuat sebuah halam login
  • kemudian halaman registrasi
  • menampilkan informasi akun
  • menggunakan kode referal untuk melakukan registrasi, jadi jika tanpa kode referal maka tidak bisa melakukan registrasi.
  • dan selain itu di studi case form login php ini terdapat tombol logout.

Membuat file PHP form login

Oke langsung saja kita membuat beberapa file PHP kosong yang nantinya diisi pengkodean bahasa pemrograman php dengan beberapa nama file index.php, login.php, registration.php dan database.php kemudian disimpan dalam folder simple_login_php.

selanjutnya, untuk nantinya bisa dijalankan di XAMPP maka folder simple_login_php ditaruh dalam folder program XAMPP di bagian htdocs, contohnya saya menyimpan di drive C: maka alamatnya folder berada di C:\xampp\htdocs

Membuat Database dan tabel MySql menggunakan phpmyadmin

Setelah membuat beberapa file dan folder yang dibutuhkan untuk php form login selanjut membuat database MySql menggunakan phpmyadmin, nantinya database digunakan untuk menyimpan informasi akun seperti nama, email, password, kode kode referal.

  • Membuat tabel users di database simple_login_php dengan persiapan jumlah kolom atau atribut 5.
    membuat tabel di phpmyadmin
  • memilih tipe data dan nama atribut seperti berikut yang menggunakan nama atribut atau kolom id, email, full_name, referal_code, dan password
CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `email` varchar(50) DEFAULT NULL,
  `full_name` varchar(50) DEFAULT NULL,
  `referal_code` varchar(50) DEFAULT NULL,
  `password` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

tipe data tabel di phpmyadmin

  • kamus data table users kamus data tabel di phpmyadmin

  • memasukkan data ke tabel users insert data tabel di phpmyadmin

  • menggunakan query untuk insert data

INSERT INTO `users` (`id`, `email`, `full_name`, `referal_code`, `password`) VALUES (NULL, '[email protected]', 'Aku Admin', '1234', '123321');

Memulai Pengkodean bagian PHP

  • database.php

<?php
function connect_database(){
  $DB_HOST = "localhost";
  $DB_USER = "root";
  $DB_PASSWORD = "";
  $DB_DATABASE = "simple_login_php";

  $mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASSWORD, $DB_DATABASE);
  if($mysqli->connect_error) die('Connect Error DB');
  return $mysqli;
}

function login($email, $password){
  $mysqli = connect_database();

  try {
    $stmt = $mysqli->prepare("SELECT * FROM users WHERE email = ? AND password = ?");
    $stmt->bind_param("ss", $email, $password);
    $stmt->execute();
    $result = $stmt->get_result()->fetch_all(MYSQLI_ASSOC);
    $stmt->close();
  } catch (\Throwable $th) {
    throw $th;
  }

  return $result;
}

function registation($full_name, $email, $password, $referal_code){
  $mysqli = connect_database();

  if (referal_check($referal_code)) {
    $referal_code = substr(str_shuffle('0123456789'), 0, 5);

    $stmt = $mysqli->prepare("INSERT INTO users (full_name, email, password , referal_code) VALUES (?, ?, ?, ?)");
    $stmt->bind_param("sssi", $full_name, $email, $password, $referal_code);
    $stmt->execute();
    $user_id = $stmt->insert_id;
    $stmt->close();

    $stmt2 = $mysqli->prepare("SELECT * FROM users WHERE id = ?");
    $stmt2->bind_param("i", $user_id);
    $stmt2->execute();
    $result = $stmt2->get_result()->fetch_all(MYSQLI_ASSOC);
    $stmt2->close();

    return $result;
  } else {
    return null;
  }
}

function referal_check($code){
  $mysqli = connect_database();

  $stmt = $mysqli->prepare("SELECT * FROM users WHERE referal_code = ? ");
  $stmt->bind_param("s", $code);
  $stmt->execute();
  $result = $stmt->get_result()->fetch_all(MYSQLI_ASSOC);
  $stmt->close();

  if (count($result) != 0) {
    return true;
  } else {
    return false;
  }

}

?>

  • login.php

<?php
session_start();
require('database.php');

$base_url = "http://localhost/simple_login_php";

if ($_SERVER["REQUEST_METHOD"] == "POST") {

  $email    = $_POST["email"];
  $password = $_POST["password"];

  $result_login = login($email, $password);

  if (count($result_login) > 0) {

    $_SESSION["data_login"] = $result_login;

    header("Location: /simple_login_php");
    die();
  } else {
    $message = "Email atau password salah <br>";
  }

}

?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login Form</title>
  <style>
    body {
      text-align: center;
    }
    form {
      display: inline-block;
    }
  </style>
</head>
<body>
<form action="" method="post">
  <?php !empty($message) ? print $message : ""?>

  <label><h1>Login ke Akun</h1></label>

  <label>Email :</label>
  <input type="email" name="email">
  <br><br>

  <label>Password :</label>
  <input type="password" name="password">
  <br><br>

  <button type="submit">Login</button>
  <br>
  <br>

  <label>
    <a href="<?= $base_url . '/registration.php'?>">Daftar akun baru</a>
  </label>
</form>
</body>
</html>

  • index.php

<?php
session_start();
require('database.php');

$base_url = "http://localhost/simple_login_php";

if (empty($_SESSION["data_login"])) {
  header("Location: " . $base_url . "/login.php");
  die();
}

// logout action
if (count($_SESSION) != 0 && $_SERVER["REQUEST_METHOD"] == "POST" && $_POST['logout'] == 'true') {
  session_destroy();
  header("Location: " . $base_url . "/login.php");
  die();
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Info</title>
  <style>
    body {
      text-align: center;
    }
  </style>
</head>
<body>
<center>
  <h1>Info Akun</h1>
  <table>
    <tr>
      <td>Email</td>
      <td>: <?= $_SESSION['data_login'][0]['email']?></td>
    </tr>
    <tr>
      <td>Nama Lengkap</td>
      <td>: <?= $_SESSION['data_login'][0]['full_name']?></td>
    </tr>
    <tr>
      <td>Kode Referal Kamu</td>
      <td>: <?= $_SESSION['data_login'][0]['referal_code']?></td>
    </tr>
  </table>
  <br>

  <form action="" method="post">
    <input type="hidden" name="logout" value="true">
    <button type="submit" value="true" >Logout</button>
  </form>
</center>
</body>
</html>

  • registration.php

<?php
require('database.php');
$base_url = "http://localhost/simple_login_php";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $result = registation($_POST["full_name"], $_POST["email"], $_POST["password"], $_POST["referal_code"]);
  if ($result) {
    session_start();
    $_SESSION["data_login"] = $result;
    header("Location: /simple_login_php");
    die();
  } else {
    $message = "tidak bisa mendaftar";
  }
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Registration Form</title>
  <style>
    body {
      text-align: center;
    }
    form {
      display: inline-block;
    }
  </style>
</head>
<body>
<form action="" method="POST">
  <?php !empty($message) ? print $message : ""?>
  <label> <h1>Registrasi Akun</h1> </label>
  <label>Nama :</label>
  <input type="text" name="full_name">
  <br><br>

  <label>Email :</label>
  <input type="email" name="email">
  <br><br>

  <label>Password :</label>
  <input type="password" name="password">
  <br><br>

  <label>Kode referal :</label>
  <input type="text" name="referal_code">
  <br><br>
  <button type="submit">Daftar</button>
  <br><br>

  <label>
    <a href="<?= $base_url . '/login.php'?>">Login ke akun</a>
  </label>
</form>
</body>
</html>

Penjelasan :

  • mysqli : function bawaan di PHP untuk terhubung dengan MySql
  • mysqli->prepare : menyiapkan query yang akan dieksekusi
  • try catch : biasa digunakan ketika mencoba eksekusi program akan tetapi ketika program gagal maka error akan ditangkap pada blok kode catch.
  • require : melakukan import file PHP atau menggabungkan file PHP dengan yg lain.
  • session_start(); : memulai session dalam file PHP ketika dijalankan
  • $_SERVER["REQUEST_METHOD"] : memiliki nilai POST atau GET, pada umumnya jika di form mengirim data menggunakan POST maka bernilai POST.
  • header("Location: " . $base_url . "/login.php"); : mengarahkan akses yang biasanya disebut redirect, disini diarahkan ke file login.php jika kondisi session kosong.
  • die(); : memerintahkan PHP untuk tidak melakukan eksekusi pengkodean, atau memerintahkan berhenti.
  • $_SESSION['data_login'][0] : menunjukan bahwa nilai di session sudah terisi dan mengakses data memori beralamat ke 0 atau pertama.

source code ini bisa teman-teman lihat dan unduh atau clone di repository GitHub : https://github.com/SigitNurhanafi/simple_login_php