Bootstrap adalah framework CSS yang populer untuk membuat tampilan web yang responsif dan menarik. Dalam artikel ini, kita akan mempelajari cara membuat halaman login menggunakan PHP dan Bootstrap.


Langkah 1: Membuat Form Login

Pertama, kita akan membuat form login yang akan digunakan untuk memasukkan username dan password. Berikut adalah contoh kode HTML untuk form login:

javascript
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Login
                </div>
                <div class="card-body">
                    <form action="login.php" method="POST">
                        <div class="form-group">
                            <label for="username">Username</label>
                            <input type="text" class="form-control" id="username" name="username" required>
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <input type="password" class="form-control" id="password" name="password" required>
                        </div>
                        <button type="submit" class="btn btn-primary">Login</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Kita menggunakan grid system dari Bootstrap untuk membuat form login rapi di tengah-tengah halaman. Form login memiliki dua input yaitu username dan password. Form akan mengirim data ke file "login.php" menggunakan metode POST.

Langkah 2: Membuat Halaman Login

Selanjutnya, kita akan membuat halaman login di file "login.php". Halaman login akan memproses data yang dikirim dari form login dan melakukan validasi username dan password. Berikut adalah contoh kode PHP untuk halaman login:

php
<?php
session_start();

if(isset($_POST['username']) && isset($_POST['password'])){
    $username = $_POST['username'];
    $password = $_POST['password'];
    $conn = mysqli_connect('localhost', 'username', 'password', 'database');
    $sql = "SELECT * FROM users WHERE username='$username' AND password='$password'";
    $result = mysqli_query($conn, $sql);
    if(mysqli_num_rows($result) == 1){
        $_SESSION['username'] = $username;
        header('Location: dashboard.php');
    } else {
        $error = "Invalid username or password";
    }
}
?>

Kode di atas mengecek apakah data username dan password dikirim dari form login menggunakan $_POST. Jika ya, kita membuka koneksi ke database dan menjalankan query SELECT untuk mencari pengguna dengan username dan password yang sesuai. Jika ditemukan, kita membuat session untuk menyimpan data pengguna dan mengarahkan ke halaman dashboard. Jika tidak ditemukan, kita menampilkan pesan error.

Langkah 3: Membuat Halaman Dashboard

Setelah berhasil login, pengguna akan diarahkan ke halaman dashboard. Berikut adalah contoh kode HTML untuk halaman dashboard:

php
<?php
session_start();

if(!isset($_SESSION['username'])){
    header('Location: login.php');
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>
    </head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Dashboard</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Welcome <?php echo $_SESSION['username']; ?></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="logout.php">Logout</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="container mt-3">
        <h1>Welcome <?php echo $_SESSION['username']; ?></h1>
        <p>You have successfully logged in.</p>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>


Kode di atas mengecek apakah pengguna memiliki session dengan $_SESSION. Jika tidak ada, pengguna akan diarahkan kembali ke halaman login. Jika ada, pengguna akan melihat halaman dashboard yang menyambut pengguna dengan username dan menampilkan pesan selamat datang.

Langkah 4: Membuat File Logout

Terakhir, kita akan membuat file "logout.php" untuk menghapus session dan mengarahkan pengguna kembali ke halaman login. Berikut adalah contoh kode PHP untuk file "logout.php":

php
<?php

session_start();

session_destroy();

header('Location: login.php');

?>

Kode di atas menghapus session pengguna menggunakan session_destroy() dan mengarahkan kembali ke halaman login.

Kesimpulan

Dalam artikel ini, kita telah belajar cara membuat halaman login menggunakan PHP dan Bootstrap. Kita mulai dengan membuat form login dengan Bootstrap dan mengirim data ke halaman login PHP. Kemudian, kita memvalidasi data pengguna dan membuat session untuk pengguna yang berhasil login. Terakhir, kita membuat halaman dashboard dan file logout untuk menyelesaikan proses login. Dengan menggunakan teknik ini, kita dapat membuat halaman login yang aman dan menarik dengan cepat dan mudah.