Berikut adalah langkah-langkah membuat Form Login dengan PHP, MySQL, dan Bootstrap, termasuk halaman dashboard sederhana setelah berhasil login:
Struktur File
- Database Setup:
database.sql - Form Login:
index.php - Proses Login:
process_login.php - Dashboard:
dashboard.php
1. Database Setup (database.sql)
Buat database dan tabel pengguna untuk menyimpan data login.
CREATE DATABASE user_auth;
USE user_auth;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL
);
-- Tambahkan pengguna contoh
INSERT INTO users (username, password) VALUES
('admin', MD5('password123')),
('user', MD5('mypassword'));2. Form Login (index.php)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container d-flex justify-content-center align-items-center vh-100">
<div class="card p-4" style="width: 400px;">
<h3 class="text-center mb-4">Login</h3>
<?php if (isset($_GET['error'])): ?>
<div class="alert alert-danger"><?php echo htmlspecialchars($_GET['error']); ?></div>
<?php endif; ?>
<form action="process_login.php" method="POST">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary w-100">Login</button>
</form>
</div>
</div>
</body>
</html>
3. Proses Login (process_login.php)
<?php
session_start();
$host = 'localhost';
$db = 'user_auth';
$user = 'root'; // Sesuaikan dengan kredensial MySQL Anda
$pass = ''; // Sesuaikan dengan kredensial MySQL Anda
$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$username = $conn->real_escape_string($_POST['username']);
$password = $conn->real_escape_string($_POST['password']);
$query = "SELECT * FROM users WHERE username = '$username' AND password = MD5('$password')";
$result = $conn->query($query);
if ($result->num_rows > 0) {
$_SESSION['username'] = $username;
header('Location: dashboard.php');
exit();
} else {
$error = "Invalid username or password.";
header("Location: index.php?error=" . urlencode($error));
exit();
}
} else {
header("Location: index.php");
exit();
}
?>4. Dashboard (dashboard.php)
<?php
session_start();
if (!isset($_SESSION['username'])) {
header("Location: index.php");
exit();
}
?>
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="card p-4">
<h3>Welcome, <?php echo htmlspecialchars($_SESSION['username']); ?>!</h3>
<p>This is your dashboard.</p>
<a href="logout.php" class="btn btn-danger">Logout</a>
</div>
</div>
</body>
</html>5. Logout (logout.php)
<?php
session_start();
session_destroy();
header("Location: index.php");
exit();
?>
Penjelasan
- Database:
- Menggunakan tabel
usersuntuk menyimpan data login. - Password disimpan dengan hash MD5 (untuk keamanan lebih baik gunakan
password_hash()di PHP).
- Menggunakan tabel
- Form Login:
- Form sederhana dengan input untuk username dan password.
- Validasi error melalui parameter GET.
- Proses Login:
- Mengecek kredensial pengguna terhadap database.
- Jika berhasil, sesi dibuat dan diarahkan ke dashboard.
- Dashboard:
- Menampilkan nama pengguna yang sedang login.
- Menyediakan tombol logout.
- Logout:
- Menghapus sesi dan mengarahkan pengguna kembali ke halaman login.
Tampilan Sederhana
- Form Login: Menampilkan form login responsif dengan Bootstrap.
- Dashboard: Halaman yang menyambut pengguna setelah login.
Jika ada tambahan fitur atau kendala, beri tahu saya! 😊
Leave a Reply