Untuk membuat form login dan register, perlu kita persiapkan dahulu database. Berikut script untuk membuat database login.db dan tabel users.
CREATE TABLE users (
id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(255) UNIQUE NOT NULL,
password VARCHAR(255) NOT NULL
);
Kemudian buat file dengan nama koneksi.php, dengan script berikut ini.
<?php$host = "localhost";$user = "root";$pass = "";$dbname = "login";$conn = mysqli_connect($host, $user, $pass, $dbname);if (!$conn) {die("Koneksi Gagal: " . mysqli_connect_error());}?>
Kemudian buat file dengan nama register.php untuk memproses data di bagian server, dengan script berikut ini.
<?php
include 'koneksi.php';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = mysqli_real_escape_string($conn, $_POST['username']);
$password = mysqli_real_escape_string($conn, $_POST['password']);
// Enkripsi password
$hashed_password = password_hash($password, PASSWORD_DEFAULT);
// Simpan data pengguna ke database
$query = "INSERT INTO users (username, password) VALUES (?, ?)";
$stmt = mysqli_prepare($conn, $query);
mysqli_stmt_bind_param($stmt, "ss", $username, $hashed_password);
if (mysqli_stmt_execute($stmt)) {
echo "Registrasi berhasil!";
} else {
echo "Registrasi gagal.";
}
mysqli_stmt_close($stmt);
mysqli_close($conn);
}
?>
Kemudian buat file dengan nama register.html sebagai tampilan form register di browser, dengan script berikut ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register Form</title>
</head>
<body>
<h2>Register Form</h2>
<form action="register.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>
<input type="submit" value="Register">
</form>
</body>
</html>
Kemudian buat file dengan nama login.php sebagai tampilan form register di browser, dengan script berikut ini.
<?php
include 'koneksi.php';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = mysqli_real_escape_string($conn, $_POST['username']);
$password = mysqli_real_escape_string($conn, $_POST['password']);
// Ambil data user dari database
$query = "SELECT * FROM users WHERE username = ?";
$stmt = mysqli_prepare($conn, $query);
mysqli_stmt_bind_param($stmt, "s", $username);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
if (mysqli_num_rows($result) == 1) {
$row = mysqli_fetch_assoc($result);
// Verifikasi password
if (password_verify($password, $row['password'])) {
// Password cocok, user berhasil login
echo "Login berhasil!";
} else {
// Password tidak cocok
echo "Login gagal. Cek kembali username dan password.";
}
} else {
// User tidak ditemukan
echo "Login gagal. Cek kembali username dan password.";
}
mysqli_stmt_close($stmt);
mysqli_close($conn);
}
?>
Kemudian buat file dengan nama index.php sebagai tampilan form login di browser, dengan script berikut ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
form {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 8px;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 15px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.register-btn {
display: block;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<form action="login.php" method="post">
<h2>Login Form</h2>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Login">
<a class="register-btn" href="register.html">Register</a>
</form>
</body>
</html>
Simpan semua file dalam satu folder di htdocs, lalu jalankan file di browser.
