Tutorial Membuat Form Login dan Register dengan Session di PHP

 ⊛ • 16 mins read

Main Image
Photo by MinuteKEY on Unsplash

Seperti yang kita ketahui bahwa PHP adalah salah satu bahasa yang populer dalam konteks website development. Sebenarnya banyak framework PHP yang dapat memudahkan kita untuk melakukan pengembangan website seperti Laravel, Codeigniter, Yii, dll. Tetapi kali ini kita tidak akan menggunakan framework melainkan native PHP sehingga dapat mengetahui dasar dari proses autentikasi di PHP.

Proses autentikasi yang akan kita buat kali ini cukup sederhana yaitu proses login dan register yang dapat digambarkan dengan flowchart seperti dibawah ini.

graph TD
    A([Start]) --> G{Punya akun?}
    B[/Input Email & Password/]
    E[/Input Email & Password/]
    F[Pindah halaman]
    H{Apa benar?}
    G -->|Ya| C[Login] --> B --> H
    G -->|Tidak| D[Register] --> E --> F
    H -->|Ya| I[Pindah halaman]
    H -->|Tidak| J[Tampil pesan salah]

Preview Hasil Akhir

Laman Screenshot
Login
Register
Main Page

Persiapan

Dalam tutorial ini, saya menggunakan resources sebagai berikut:

Resources Versi
LAMPP (XAMPP untuk Windows) 8.0.0-2
PHP 8.0.0
Bootstrap (Untuk tampilan) 5.0.0-beta1

Membuat Database

  1. Buka XAMPP lalu start Apache dan MySQL, untuk linux jalankan
    1
    
     sudo /opt/lampp/lampp start
    
  2. Buka database phpMyAdmin di browser dengan mengakses database di localhost

  3. Masukkan nama database db_user dan klik Create

  4. Buat tabel tbl_users dengan kode seperti berikut
    1
    2
    3
    4
    5
    6
    
     CREATE TABLE `tbl_users` (
         `id` int(11) NOT NULL AUTO_INCREMENT,
         `email` varchar(255) COLLATE utf8_bin NOT NULL,
         `pass` varchar(255) COLLATE utf8_bin NOT NULL,
         PRIMARY KEY (`id`)
     );
    

Menghubungkan Database

  1. Sebelumnya, dalam folder htdocs buatlah folder dengan nama register_login

  2. Kemudian masuk ke dalam folder tersebut lalu buat file baru dengan nama koneksi.php dan tulis kode berikut didalamnya.

    1
    2
    3
    4
    5
    
     <?php
     $koneksi = mysqli_connect('localhost', 'root', '', 'db_user');
     if (!$koneksi) {
         die('Error ' . mysqli_connect_errno());
     }
    

Membuat Tampilan Utama

  1. Setelah membuat file untuk menghubungkan dengan database, selanjutnya buat file baru bernama index.php dan masukkan kode berikut.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    
     <!doctype html>
     <html lang="en">
    
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
         <title>Testing</title>
         <meta name="theme-color" content="#7952b3">
         <style>
             .bd-placeholder-img {
                 font-size: 1.125rem;
                 text-anchor: middle;
                 -webkit-user-select: none;
                 -moz-user-select: none;
                 user-select: none;
             }
    
             @media (min-width: 768px) {
                 .bd-placeholder-img-lg {
                     font-size: 3.5rem;
                 }
             }
         </style>
         <link href="https://getbootstrap.com/docs/5.0/examples/sign-in/signin.css" rel="stylesheet">
     </head>
    
     <body class="text-center">
    
     </body>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
     </html>
    
  2. Selanjutnya buat penghubung dengan memasukkan kode berikut ke dalam tag <body>.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    
     <?php
     include_once('koneksi.php');
     session_start();
    
     if ($_GET['register']) {
         if (!empty($_POST)) {
             $email = $_POST['email'];
             $pass = $_POST['password'];
             $query = "INSERT INTO tbl_users(id, email, pass) VALUES(NULL, '$email', '$pass')";
             $ret = mysqli_query($koneksi, $query);
             if ($ret) {
                 $_SESSION['email'] = $email;
                 $_SESSION['pass'] = $pass;
                 include('main.php');
             } else {
                 include('register.php');
             }
         } else {
             include('register.php');
         }
     } elseif ($_GET['logout']) {
         session_destroy();
         header("location: index.php");
         include("login.php");
     } elseif (!empty($_SESSION['email']) && !empty($_SESSION['pass'])) {
         include("main.php");
     } else {
         if (!empty($_POST)) {
             $email = $_POST['email'];
             $pass = $_POST['password'];
             $query = "SELECT id FROM tbl_users WHERE email = '$email' AND pass = '$pass'";
             $ret = mysqli_query($koneksi, $query);
    
             if (mysqli_num_rows($ret) > 0) {
                 $_SESSION['email'] = $email;
                 $_SESSION['pass'] = $pass;
                 include('main.php');
             } else {
     ?>
                 <script>
                     alert("Email atau password salah")
                 </script>
     <?php
                 include('login.php');
             }
         } else {
             include('login.php');
         }
     }
     ?>
    
  3. Sehingga berikut adalah isi keseluruhan dari index.php.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    
     <!doctype html>
     <html lang="en">
    
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
         <title>Testing</title>
         <meta name="theme-color" content="#7952b3">
         <style>
             .bd-placeholder-img {
                 font-size: 1.125rem;
                 text-anchor: middle;
                 -webkit-user-select: none;
                 -moz-user-select: none;
                 user-select: none;
             }
    
             @media (min-width: 768px) {
                 .bd-placeholder-img-lg {
                     font-size: 3.5rem;
                 }
             }
         </style>
         <link href="https://getbootstrap.com/docs/5.0/examples/sign-in/signin.css" rel="stylesheet">
     </head>
    
     <body class="text-center">
         <?php
         include_once('koneksi.php');
         session_start();
    
         if ($_GET['register']) {
             if (!empty($_POST)) {
                 $email = $_POST['email'];
                 $pass = $_POST['password'];
                 $query = "INSERT INTO tbl_users(id, email, pass) VALUES(NULL, '$email', '$pass')";
                 $ret = mysqli_query($koneksi, $query);
                 if ($ret) {
                     $_SESSION['email'] = $email;
                     $_SESSION['pass'] = $pass;
                     include('main.php');
                 } else {
                     include('register.php');
                 }
             } else {
                 include('register.php');
             }
         } elseif ($_GET['logout']) {
             session_destroy();
             header("location: index.php");
             include("login.php");
         } elseif (!empty($_SESSION['email']) && !empty($_SESSION['pass'])) {
             include("main.php");
         } else {
             if (!empty($_POST)) {
                 $email = $_POST['email'];
                 $pass = $_POST['password'];
                 $query = "SELECT id FROM tbl_users WHERE email = '$email' AND pass = '$pass'";
                 $ret = mysqli_query($koneksi, $query);
    
                 if (mysqli_num_rows($ret) > 0) {
                     $_SESSION['email'] = $email;
                     $_SESSION['pass'] = $pass;
                     include('main.php');
                 } else {
         ?>
                     <script>
                         alert("Email atau password salah")
                     </script>
         <?php
                     include('login.php');
                 }
             } else {
                 include('login.php');
             }
         }
         ?>
     </body>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
     </html>
    

Membuat Form Login dan Register

  1. Selanjutnya kita akan membuat tampilan login dengan membuat file baru bernama login.php dan masukkan kode berikut.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    
     <main class="form-signin">
         <form method="POST">
             <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
             <label class="visually-hidden">Email address</label>
             <input type="email" name="email" class="form-control" placeholder="Email address" required autofocus>
             <label class="visually-hidden">Password</label>
             <input type="password" name="password" class="form-control" placeholder="Password" required>
             <input name="login" value="1" hidden>
             <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
             <p class="mt-3 text-muted">OR</p>
             <a class="w-100 btn btn-lg btn-outline-primary" href="?register=1">Register</a>
             <p class="mt-5 mb-3 text-muted">&copy; Haris' Blog</p>
         </form>
     </main>
    
  2. Setelah itu buatlah file baru bernama register.php untuk keperluan registrasi dan masukkan kode berikut didalamnya.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    
     <main class="form-signin">
         <form method="POST">
             <h1 class="h3 mb-3 fw-normal">Register</h1>
             <label class="visually-hidden">Email address</label>
             <input type="email" name="email" class="form-control" placeholder="Email address" required autofocus>
             <label class="visually-hidden">Password</label>
             <input type="password" name="password" class="form-control" placeholder="Password" required>
             <input name="register" value="1" hidden>
             <button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
             <p class="mt-3 text-muted">Have an account?</p>
             <a class="w-100 btn btn-lg btn-outline-primary" href="./index.php">Sign in</a>
             <p class="mt-5 mb-3 text-muted">&copy; Haris' Blog</p>
         </form>
     </main>
    

Membuat Tampilan Setelah Masuk

  1. Selanjutnya mari kita buat tampilan setelah login/register dengan membuat file baru bernama main.php dan masukkan kode berikut ini.
    1
    2
    3
    4
    5
    
     <main class="form-signin">
         <h1 class="h3 mb-3 fw-normal">Anda berhasil login</h1>
         <a class="w-100 btn btn-lg btn-outline-primary" href="?logout=1">Log out</a>
         <p class="mt-5 mb-3 text-muted">&copy; Haris' Blog</p>
     </main>
    

Selesai

Setelah semua langkah diatas dilakukan, sekarang saatnya kita mencobanya dengan membuka http://localhost/register_login di browser kesayanganmu.

Selesai sudah pembahasan kita kali ini, dengan ini kamu telah membuat sistem register dan login sederhana dengan session.

Bagaimana pengalamanmu dalam dalam membuat register dan login dengan session? Yuk! Ceritakan pengalamanmu di kolom komentar :)

Share this post:


Tags Other Articles Cara Membuat Microservice Sederhana dengan Spring Boot di Apache NetBeans Cara Mudah Membuat REST API dengan Lumen dan MySQL