Membuat formulir login dengan PHP melibatkan beberapa langkah penting, mulai dari mendesain antarmuka pengguna hingga memproses input pengguna di server. Berikut adalah panduan langkah demi langkah untuk membuat formulir login sederhana menggunakan PHP.
Membuat Struktur Direktori
Buat direktori proyek, misalnya login-system, dan di dalamnya buat beberapa file dan direktori sebagai berikut:
login-system/ |-- index.php |-- login.php |-- dashboard.php |-- style.css |-- db.php
Membuat File index.php
File ini akan berisi formulir login yang ditampilkan kepada pengguna.
<!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 rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-form">
<h2>Login</h2>
<form action="login.php" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
Baca Juga
Membuat File style.css
File ini berisi gaya sederhana untuk formulir login.
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-form {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-form h2 {
margin-bottom: 20px;
}
.login-form label {
display: block;
margin-bottom: 5px;
}
.login-form input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
.login-form button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
.login-form button:hover {
background-color: #0056b3;
}
Mengatur Database
Buat database dan tabel untuk menyimpan informasi pengguna. Misalnya, dengan MySQL:
CREATE DATABASE login_system;
USE login_system;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL,
password VARCHAR(255) NOT NULL
);
Isi tabel dengan beberapa data pengguna:
INSERT INTO users (username, password) VALUES ('admin', MD5('password123'));
Membuat Koneksi Database di db.php
File ini berisi koneksi ke database.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "login_system";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
Membuat Logika Login di login.php
File ini akan memproses input dari formulir login.
<?php
session_start();
include 'db.php';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$password = md5($_POST['password']);
$sql = "SELECT * FROM users WHERE username='$username' AND password='$password'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$_SESSION['username'] = $username;
header("Location: dashboard.php");
} else {
echo "Invalid username or password";
}
}
?>
Membuat Halaman Dashboard di dashboard.php
Halaman ini akan menampilkan pesan selamat datang kepada pengguna yang berhasil login.
<?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>
</head>
<body>
<h1>Welcome, <?php echo $_SESSION['username']; ?>!</h1>
<p>You are now logged in.</p>
<a href="logout.php">Logout</a>
</body>
</html>
Membuat Logout di logout.php
File ini akan mengakhiri sesi pengguna.
<?php
session_start();
session_destroy();
header("Location: index.php");
exit();
?>
Menguji Aplikasi
Pastikan server web Anda (misalnya, Apache) berjalan, dan akses aplikasi melalui browser dengan membuka http://localhost/login-system atau pada hosting dengan URL http://domainanda/login-system.
Dengan langkah-langkah ini, Anda telah berhasil membuat sistem login sederhana menggunakan PHP dan MySQL. Anda dapat memperluas dan mengembangkan sesuai dengan kebutuhan proyek Anda. Untuk penampakan form login kira-kira seperti berikut ini, LOGIN FORM