Tutorial Membuat Sistem Login & Register Dengan PHP Dan MySQLi

Sedang mencari tutorial membuat sistem login dan register dalam PHP ? disini kita akan menjelaska...
Penulis
Admin
Kategori
Tutorial
Estimasi
4 menit baca
Dilihat
3.8K
Posting
24 Dec 2021
Tutorial Membuat Sistem Login & Register Dengan PHP Dan MySQLi Sedang mencari tutorial membuat sistem login dan register dalam PHP ? disini kita akan menjelaskan step by stepnya bagaimana cara membuatnya dengan mudah dan lengkap. Tutorial Membuat Sistem Login & Register Dengan PHP Dan MySQLi
2022-11-25

Dalam aplikasi website modern, sistem registrasi sudah umum dilakukan, hal ini dilakukan untuk melakukan otentikasi kepada visitor dalam mengunakan layanan mereka secara penuh. Sistem login maupun registrasi juga memiliki banyak manfaat dalam bisnis digital kalian baik membership, layanan berbayar dan lain sebagainya.

Sistem login atau registrasi adalah sebuah mekanisme keamanan dalam website untuk membatasi akses masuk kedalam halaman tertentu. Dalam tutorial kali ini, kita akan membuat sistem login atau registrasi lengkap berserta dengan fitur logout, reset password dan halaman sederhana untuk menampilkan data ketika sukses login dengan munggunakan PHP. Mari kita mulai dulu dengan membuat table dalam database.

 

Tutorial Membuat Sistem Login & Register Dengan PHP Dan MySQLi

 

 

1. Membuat tabel database

Sebelum masuk ketahap lainnya, membuat tabel database adalah sesuatu yang penting, digunakan untuk menampung maupun membaca data yang dibutuhkan. Buat database baru dan jalankan query dibawah ini untuk membuat tabel users didalam database MySQL kalian.

CREATE TABLE users (
  id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(50) NOT NULL UNIQUE,
  password VARCHAR(255) NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

Copy paste baris kode tersebut kedalam form dalam tab SQL di phpmyadmin.

 

2. Membuat konfigurasi dalam database yang akan digunakan

Agar database dapat terhubung kedalam aplikasi, diperlukan beberapa baris kode untuk menjalankannya, buat file baru bernama config.php untuk menyimpan data untuk database, silahkan copy paste baris kode dibawah ini untuk melanjutkan.

<?php

define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'login_sistem');
define('DB_PASSWORD', '1234');
define('DB_NAME', 'login_sistem');

// Koneksikan dengan database
$conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);

// Cek koneksi
if ($conn === false) {
    die("Error: Tidak dapat terhubung. " . mysqli_connect_error());
}

Ganti username database, password database dan nama table sesuai dengan yang kalian buat sendiri.

 

3. Membuat sistem login

Setelah selesai membuat tabel dan mengkonfigurasikan database, kita masuk ke tahap selanjutnya yaitu membuat form login atau sistem login. Pada tahap ini, terdapat form yang berfungsi untuk mengakses halaman dengan memasukan data yang diperlukan seperti nama dan password.

Hal ini digunakan untuk memverifikasi dan mengotentikasi data yang sudah disimpan didalam database. Jika nama dan password tidak sesuai dengan yang ada didalam database, maka akses masuk akan ditolak oleh server. Kita mengunakan Bootstrap sebagai framework CSS untuk menangani front end di halaman ini.

Untuk membuat form login atau sistem login ini, create file php baru dan bisa samakan nama filenya dengan login.php dan langsung saja ikuti kode dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body{ font: 14px sans-serif; background: #efefef;}
        .wrapper{ width: 380px; padding: 20px; margin:0 auto; display: block; margin-top: 60px; background: #fff;}
    </style>
</head>
<body>
    <div class="wrapper">
        <h2>Login</h2>
        <p>Silahkan isi data yang dibutuhkan untuk mengakses halaman anda.</p>

        <?php 
        if(!empty($login_err)){
            echo '<div class="alert alert-danger">' . $login_err . '</div>';
        }        
        ?>

        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
            <div class="form-group">
                <label>Nama</label>
                <input type="text" name="name" class="form-control <?php echo (!empty($name_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $name; ?>">
                <span class="invalid-feedback"><?php echo $name_err; ?></span>
            </div>    
            <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" class="form-control <?php echo (!empty($password_err)) ? 'is-invalid' : ''; ?>">
                <span class="invalid-feedback"><?php echo $password_err; ?></span>
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-primary" value="Login">
            </div>
            <p>Tidak memiliki akun? <a href="registration.php">Daftar disini!</a>.</p>
        </form>
    </div>
</body>
</html>

 

Lalu ikuti kode PHP dibawah ini tepat berada sebelum tag !DOCTYPE html.

<?php

// login.php

// Inisialisasi session
session_start();
 
// Cek jika user sudah login, jika sudah maka akan dialihkan ke home
if(isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true){
    header("location: home.php");
    exit;
}
 
// Tambahkan config database
require_once "config.php";
 
// Mendefinisikan masing-masing variabel dengan nilai kosong
$name = $password = "";
$name_err = $password_err = $login_err = "";
 
// Proses data jika form sudah disubmit
if($_SERVER["REQUEST_METHOD"] == "POST"){
 
    // Cek jika nama kosong
    if(empty(trim($_POST["name"]))){
        $name_err = "Silahkan isi nama anda.";
    } else{
        $name = trim($_POST["name"]);
    }
    
    // Cek jika password kosong
    if(empty(trim($_POST["password"]))){
        $password_err = "Silahkan isi password anda.";
    } else{
        $password = trim($_POST["password"]);
    }
    
    // Validasi nama dan password
    if(empty($name_err) && empty($password_err)){

        // Hubungkan dengan database
        $sql = "SELECT id, name, password FROM users WHERE name = ?";
        
        if($stmt = mysqli_prepare($conn, $sql)){

            // Ikatkan variabel kedalam statement sebagai parameter 
            mysqli_stmt_bind_param($stmt, "s", $param_name);
            
            // Set parameter
            $param_name = $name;
            
            // Lakukan eksekusi
            if(mysqli_stmt_execute($stmt)){

                // Simpan hasil
                mysqli_stmt_store_result($stmt);
                
                // Cek jika nama sudah digunakan, jika iya lakukan validasi selanjutnya
                if(mysqli_stmt_num_rows($stmt) == 1){   

                    // Ikatkan hasil variabel
                    mysqli_stmt_bind_result($stmt, $id, $name, $hashed_password);

                    if(mysqli_stmt_fetch($stmt)){
                        
                        // Lakukan validasi password
                        if(password_verify($password, $hashed_password)){

                            // Jika password berhasil, mulai kedalam session
                            session_start();
                            
                            // Masukan data kedalam varibel session
                            $_SESSION["loggedin"] = true;
                            $_SESSION["id"] = $id;
                            $_SESSION["name"] = $name;                            
                            
                            // Alihkan user ke halaman home
                            header("location: home.php");
                        } else{
                            // Menampilkan error jika password tidak sesuai
                            $login_err = "Password tidak sesuai.";
                        }
                    }
                } else {
                    // Menampilkan error jika nama atau password tidak sesuai
                    $login_err = "Nama atau password tidak sesuai.";
                }
            } else {
                echo "Sepertinya error, silahkan coba lagi nanti!";
            }

            // Tutup statement
            mysqli_stmt_close($stmt);
        }
    }
    
    // Tutup koneksi
    mysqli_close($conn);
}
?>

 

Semua data yang dibutuhkan, nantinya akan dimasukan kedalam variabel session untuk mengizinkan akses masuk ke halaman utama.

Setelah selesai, coba jalankan kedalam browser, output yang dihasilkan akan seperti ini:

 

Tutorial Membuat Login Dan Register Secara Lengkap Dengan PHP dan MySQLi

 

4. Membuat sistem registrasi

Langkah selanjutnya adalah membuat sistem registrasi untuk mengirimkan data kedalam server untuk disimpan dan digunakan ketika user login. Halaman khusus ini akan menampilkan form seperti nama, password dan konfimasi password yang memungkinkan user untuk mendaftarkan dirinya kedalam aplikasi website yang telah kita buat.

Didalam kode khusus ini, kita menyisipkan kode php dan HTML, kode PHP digunakan untuk memproses data yang diinputkan oleh user seperti validasi, menyimpan data kedalam database dan menampilkan error jika ada kesalahan dalam mengisi form, duplikasi nama dan lainnya. Lalu HTML digunakan untuk menampilkan form yang sudah ditentukan, kita mengunakan Bootstrap sebagai framework CSS untuk menangani front end di halaman ini.

Buat file baru registration.php dan langsung saja ikuti kode syntax dibawah ini kedalam file tersebut.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Registrasi</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body{ font: 14px sans-serif; background: #efefef;}
        .wrapper{ width: 380px; padding: 20px; margin:0 auto; display: block; margin-top: 60px; background: #fff;}
    </style>
</head>
<body>
    <div class="wrapper">
        <h2>Registrasi</h2>
        <p>Silahkan isi form dibawah untuk melanjutkan.</p>
        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
            <div class="form-group">
                <label>Nama</label>
                <input type="text" name="name" class="form-control <?php echo (!empty($name_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $name; ?>">
                <span class="invalid-feedback"><?php echo $name_err; ?></span>
            </div>    
            <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" class="form-control <?php echo (!empty($password_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $password; ?>">
                <span class="invalid-feedback"><?php echo $password_err; ?></span>
            </div>
            <div class="form-group">
                <label>Konfirmasi Password</label>
                <input type="password" name="confirm_password" class="form-control <?php echo (!empty($confirm_password_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $confirm_password; ?>">
                <span class="invalid-feedback"><?php echo $confirm_password_err; ?></span>
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-primary" value="Submit">
                <input type="reset" class="btn btn-secondary ml-2" value="Reset">
            </div>
            <p>Sudah memiliki akun? <a href="login.php">Login disini!</a>.</p>
        </form>
    </div>    
</body>
</html>

 

Lalu letakan kode PHP dibawah ini tepat berada sebelum tag !DOCTYPE html.

<?php

// registration.php

// Panggil config database
require_once "config.php";
 
// Mendefinisikan masing-masing variabel dengan nilai kosong
$name = $password = $confirm_password = "";
$name_err = $password_err = $confirm_password_err = "";
 
// Lakukan jika data sudah masuk kedalam form
if($_SERVER["REQUEST_METHOD"] == "POST"){
 
    // Cek apakah nama kosong
    if(empty(trim($_POST["name"]))){
        $name_err = "Silahkan masukan nama.";
    // Deteksi karakter yang tidak diizinkan dengan mengunakan regex
    } elseif(!preg_match('/^[a-zA-Z0-9_]+$/', trim($_POST["name"]))){
        $name_err = "Nama hanya boleh diisi dengan kombinasi kata, nomor atau underscore.";
    } else {
        // Mengkoneksikan dengan database
        $sql = "SELECT id FROM users WHERE name = ?";
        
        if($stmt = mysqli_prepare($conn, $sql)){
            // Digunakan untuk mengikat variabel ke marker parameter dari statement yang disiapkan.
            mysqli_stmt_bind_param($stmt, "s", $param_name);
            
            // Siapkan parameter nama
            $param_name = trim($_POST["name"]);
            
            // Lakukan eksekusi
            if(mysqli_stmt_execute($stmt)){

                mysqli_stmt_store_result($stmt);
                
                if(mysqli_stmt_num_rows($stmt) == 1){
                    $name_err = "Nama ini sudah terdaftar!";
                } else{
                    $name = trim($_POST["name"]);
                }
            } else{
                // Menampilkan error jika statement gagal dieksekusi
                echo "Sepertinya terjadi error, silahkan coba lagi nanti.";
            }

            // Tutup statement
            mysqli_stmt_close($stmt);
        }
    }
    
    // Validasi password
    if(empty(trim($_POST["password"]))){
        $password_err = "Silahkan masukan password.";     
    } elseif(strlen(trim($_POST["password"])) < 6){
        $password_err = "Password harus diisi dengan maksimal 6 karakter.";
    } else{
        $password = trim($_POST["password"]);
    }
    
    // Validasi konfirmasi password
    if(empty(trim($_POST["confirm_password"]))){
        $confirm_password_err = "Silahkan konfimasi password.";     
    } else{
        $confirm_password = trim($_POST["confirm_password"]);
        if(empty($password_err) && ($password != $confirm_password)){
            $confirm_password_err = "Password tidak cocok.";
        }
    }
    
    // Cek error sebelum dieksekusi kedalam database
    if(empty($name_err) && empty($password_err) && empty($confirm_password_err)){
        
        // Siapkan koneksi dengan database
        $sql = "INSERT INTO users (name, password) VALUES (?, ?)";
         
        if($stmt = mysqli_prepare($conn, $sql)){

            // Digunakan untuk mengikat variabel ke marker parameter dari statement yang disiapkan.
            mysqli_stmt_bind_param($stmt, "ss", $param_name, $param_password);
            
            // Set parameter dari nama dan password
            $param_name = $name;
            $param_password = password_hash($password, PASSWORD_DEFAULT); // merubah password menjadi hash code
            
            // Lakukan eksekusi
            if(mysqli_stmt_execute($stmt)){
                // Lakukan redirect jika berhasil
                header("location: login.php");
            } else{
                // Menampilkan error jika statement gagal dieksekusi
                echo "Sepertinya terjadi error, silahkan coba lagi nanti.";
            }

            // Tutup statement
            mysqli_stmt_close($stmt);
        }
    }
    
    // Tutup koneksi dengan database
    mysqli_close($conn);
}
?>

 

Kita mengunakan password_hash untuk mengubah password kedalam bentuk algortima hash agar lebih aman, lalu mencocokannya dengan form konfirmasi password untuk memperkuat sistem registrasi dengan mengunakan fungsi password_verify.

Setelah selesai, coba jalankan kedalam browser, output yang dihasilkan akan seperti ini:

 

Tutorial Membuat Login Dan Register Secara Lengkap Dengan PHP dan MySQLi

 

5. Membuat sistem logout

Fitur logout ini sebenarnya memiliki sistem yang sederhana, ketika user berhasil login kedalam halaman utama dan user melakukan logout, maka semua data didalam variabel session akan dihapus dan halaman akan dialihkan kedalam halaman login untuk melakukan input ulang.

Untuk menambahkan fitur logout ini, silahkan copy paste syntax dibawah ini kedalam file baru yang bernama logout.php

<?php
// Inisialisasi session
session_start();
 
// Hapus semua variabel didalam session
$_SESSION = array();
 
// Destroy session.
session_destroy();
 
// Alihkan ke halaman login
header("location: login.php");
exit;

 

6. Membuat halaman utama

Halaman ini sebagai halaman utama ketika user berhasil melakukan login dan dapat melakukan hal lainnya seperti merubah password dan logout. Dalam halaman utama ini, kita hanya menampilkan beberapa teks sederhana yang mengindikasikan user sudah berhasil login.

Dan untuk menghindari adanya serangan XSS, kita menambahkan fungsi htmlspecialchars untuk menangani hal tersebut. Fungsi ini akan mengubah segala bentuk script menjadi karakter khusus yang tidak dapat dieksekusi oleh browser. Kita mengunakan Bootstrap sebagai framework CSS untuk menangani front end di halaman ini.

Untuk menambahkan halaman utama ini, buat file baru yang bernama home.php dan isi dari syntaxnya adalah:

<?php
// Inisialisasi session
session_start();
 
// Cek apakah user sudah login, jika tidak maka alihkan ke halaman login, namun jika iya maka lanjutkan
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
    header("location: login.php");
    exit;
}
?>
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Selamat datang <?php echo htmlspecialchars($_SESSION["name"]); ?> - Home</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body{ font: 14px sans-serif; text-align: center; background: #efefef;}
    </style>
</head>
<body>
    <h1 class="mt-5">Hello, <b><?php echo htmlspecialchars($_SESSION["name"]); ?></b>. Selamat datang kembali.</h1>
    <p class="mb-4">Berhasil login, silahkan jika ingin menganti password bisa dengan klik tombol reset password dibawah</p>
    <p>
        <a href="reset-password.php" class="btn btn-primary">Reset password</a>
        <a href="logout.php" class="btn btn-danger ml-3">Logout</a>
    </p>
</body>
</html>

 

Setelah selesai, coba jalankan kedalam browser, output yang dihasilkan akan seperti ini:

 

Tutorial Membuat Login Dan Register Secara Lengkap Dengan PHP dan MySQLi

 

7. Membuat fitur reset password

Sebenarnya fitur ini optional, namun untuk melengkapi sistem login dan registrasi, tanpa adanya fitur reset password akan terasa kurang, oleh karena itu kita menambahkan fitur ini untuk melengkapi dengan fitur lainnya.

Sistem didalam reset password ini sebenarnya sistem sederhana dengan mengubah password yang ada dengan yang baru didalam halaman utama setelah user sudah berhasil login, password baru yang diupdate masih tetap mengunakan algoritma hash agar lebih aman.

Untuk menambahkan fitur reset password ini, pindahkan syntax dibawah ini kedalam file baru yang bernama reset-password.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reset Password</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body{ font: 14px sans-serif; background: #efefef;}
        .wrapper{ width: 380px; padding: 20px; margin:0 auto; display: block; margin-top: 60px; background: #fff;}
    </style>
</head>
<body>
    <div class="wrapper">
        <h2>Reset Password</h2>
        <p>Silahkan isi form dibawah untuk menganti password lama dengan yang baru.</p>
        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post"> 
            <div class="form-group">
                <label>Password baru</label>
                <input type="password" name="new_password" class="form-control <?php echo (!empty($new_password_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $new_password; ?>">
                <span class="invalid-feedback"><?php echo $new_password_err; ?></span>
            </div>
            <div class="form-group">
                <label>Konfirmasi password</label>
                <input type="password" name="confirm_password" class="form-control <?php echo (!empty($confirm_password_err)) ? 'is-invalid' : ''; ?>">
                <span class="invalid-feedback"><?php echo $confirm_password_err; ?></span>
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-primary" value="Submit">
                <a class="btn btn-link ml-2" href="home.php">Cancel</a>
            </div>
        </form>
    </div>    
</body>
</html>

 

Lalu letakan kode PHP dibawah ini tepat berada sebelum tag !DOCTYPE html.

<?php

// reset-password.php

// Inisialisasi session
session_start();
 
// Cek apakah user sudah login, jika tidak alihkan ke halaman login
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
    header("location: login.php");
    exit;
}
 
// Panggil config database
require_once "config.php";
 
// Definisi variabel dengan nilai kosong
$new_password = $confirm_password = "";
$new_password_err = $confirm_password_err = "";
 
// Proses data jika user submit form
if($_SERVER["REQUEST_METHOD"] == "POST"){
 
    // Validasi password
    if(empty(trim($_POST["new_password"]))){
        $new_password_err = "Silahkan masukan password baru anda.";     
    } elseif(strlen(trim($_POST["new_password"])) < 6){
        $new_password_err = "Silahkan isi password baru dengan total maksimal 6 karakter";
    } else{
        $new_password = trim($_POST["new_password"]);
    }
    
    // Validasi konfirmasi password
    if(empty(trim($_POST["confirm_password"]))){
        $confirm_password_err = "Silahkan konfirmasi password baru anda.";
    } else{
        $confirm_password = trim($_POST["confirm_password"]);
        if(empty($new_password_err) && ($new_password != $confirm_password)){
            $confirm_password_err = "Password tidak sesuai.";
        }
    }
        
    // Cek input jika tidak ada error
    if(empty($new_password_err) && empty($confirm_password_err)){

        // Koneksikan dengan database
        $sql = "UPDATE users SET password = ? WHERE id = ?";
        
        if($stmt = mysqli_prepare($conn, $sql)){

            // Ikatkan variabel kedalam statement sebagai parameter 
            mysqli_stmt_bind_param($stmt, "si", $param_password, $param_id);
            
            // Set parameter
            $param_password = password_hash($new_password, PASSWORD_DEFAULT);
            $param_id = $_SESSION["id"];
            
            // Lakukan eksekusi
            if(mysqli_stmt_execute($stmt)){

                // Password berhasil terupdate, hapus session dan alihkan ke halaman login
                session_destroy();
                header("location: login.php");
                exit();
            } else{
                echo "Sepertinya error, silahkan coba lagi nanti.";
            }

            // Tutup statement
            mysqli_stmt_close($stmt);
        }
    }
    
    // Tutup koneksi
    mysqli_close($conn);
}
?>

 

Setelah selesai, coba jalankan kedalam browser, output yang dihasilkan akan seperti ini:

 

Tutorial Membuat Login Dan Register Secara Lengkap Dengan PHP dan MySQLi

 

Penutup

Itulah tutorial membuat sistem login sederhana dengan mengunakan PHP, MySQL dan Bootstrap. Untuk melengkapi semua sistem login, kita menambahkan fitur lainnya seperti registrasi, logout, reset password, halaman utama agar lebih mantep lagi.

Share