Cara membuat login register dengan php

Question

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.

Table of Contents Show

Preview Hasil Akhir
Membuat Database
Menghubungkan Database
Membuat Tampilan Utama
Membuat Form Login dan Register
Membuat Tampilan Setelah Masuk

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

Buka XAMPP lalu start Apache dan MySQL, untuk linux jalankan
```
1

 sudo /opt/lampp/lampp start
```
Buka database phpMyAdmin di browser dengan mengakses database di localhost
Masukkan nama database db_user dan klik Create

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

Sebelumnya, dalam folder htdocs buatlah folder dengan nama register_login

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

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//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//dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
 </html>

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');
     }
 }
 ?>

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//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//dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
 </html>

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">
         <h2 class="h3 mb-3 fw-normal">Please sign in</h2>
         <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>

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">
         <h2 class="h3 mb-3 fw-normal">Register</h2>
         <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

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">
     <h2 class="h3 mb-3 fw-normal">Anda berhasil login</h2>
     <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>