CARA MENGHUBUNGKAN FORM LOGIN KE MENU UTAMA HTML

Dalam dunia pengembangan web, sering kali kita perlu membuat sistem login untuk membatasi akses ke beberapa bagian situs web. Sebagai contoh, kita mungkin memiliki halaman yang hanya dapat diakses oleh pengguna yang telah masuk. Dalam artikel ini, kita akan membahas cara menghubungkan form login ke menu utama HTML.

1. Membuat Form Login

Pertama-tama, mari kita membuat form login sederhana. Kamu bisa menggunakan HTML murni atau menggunakan Bootstrap atau kerangka kerja CSS lainnya jika kamu ingin form login terlihat lebih menarik.

<form action="/login" method="post">
    <label for="username">Username:</label><br>
    <input type="text" id="username" name="username"><br>
    <label for="password">Password:</label><br>
    <input type="password" id="password" name="password"><br>
    <input type="submit" value="Log in">
</form>

2. Menghubungkan Form Login ke Database

Langkah selanjutnya adalah menghubungkan form login ke database untuk meyakinkan bahwa pengguna yang mencoba masuk adalah pengguna yang valid.

Menggunakan PHP

Berikut adalah contoh koneksi database dengan PHP:

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Membuat koneksi
$conn = new mysqli($servername, $username, $password, $dbname);

// Memeriksa koneksi
if ($conn->connect_error) {
    die("Koneksi gagal: " . $conn->connect_error);
}

// Query SQL untuk mengecek data pengguna di database
$sql = "SELECT id, username, password FROM Users WHERE username = ? AND password = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ss", $_POST['username'], $_POST['password']);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows > 0) {
    // Jika pengguna valid, buat sesi dan alihkan ke menu utama
    session_start();
    $_SESSION['login'] = TRUE;
    header("Location: menu_utama.html");
} else {
    // Jika pengguna tidak valid, alihkan kembali ke halaman login
    header("Location: login.html");
}
$stmt->close();
$conn->close();

3. Menghubungkan Menu Utama ke Form Login

Setelah form login berhasil terhubung dengan database, langkah terakhir adalah menghubungkan menu utama ke form login. Caranya adalah dengan membuat cek sesi di halaman menu utama.

session_start();
if (!isset($_SESSION['login']) || $_SESSION['login'] !== TRUE) {
    // jika pengguna belum login, alihkan ke halaman login
    header("Location: login.html");
    exit;
}

Simpan skrip ini di bagian atas halaman menu utama. Jika pengguna belum login, mereka akan otomatis dialihkan kembali ke halaman login.

Sebagai catatan, kode di atas adalah contoh sederhana dan belum termasuk sanitasi input atau hashing password, yang merupakan praktik terbaik dalam pengembangan aplikasi web asli. Jadi, pastikan untuk melakukan penelitian lebih lanjut sebelum menggunakan kode ini dalam projek sebenarnya. Semoga artikel ini bermanfaat!