Building a Simple User Authentication System with PHP, MySQL, HTML, CSS, and JavaScript
This tutorial guides beginners through creating a complete user registration and login system using PHP for the backend, MySQL for data storage, and HTML, CSS, and vanilla JavaScript for the frontend, covering environment setup, database creation, form design, server‑side logic, and basic client‑side validation.
Learn how to build a simple login and registration system using PHP, HTML, CSS, and JavaScript—ideal for beginners who want to practice basic CRUD operations and user authentication.
What We Will Build
We will create a fully functional user authentication system that includes user registration, user login, and secure data storage and retrieval with a PHP backend and a MySQL database.
Prerequisites
Set up a local development environment (e.g., XAMPP).
Basic knowledge of HTML, CSS, PHP, and JavaScript.
A code editor such as VS Code.
Step 1: Set Up Project Environment
Install XAMPP, start Apache and MySQL services, and create a project folder named user-auth inside the htdocs directory.
Step 2: Create Database
Open http://localhost/phpmyadmin/ , create a database called user_system , and run the following SQL to create the users table:
CREATE TABLE users (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
email VARCHAR(50) NOT NULL,
password VARCHAR(255) NOT NULL
);Step 3: Design Registration Form (HTML & CSS)
Create signup.html with the following markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signup</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form-container">
<h2>Signup</h2>
<form id="signupForm" method="POST" action="signup.php">
<input type="email" name="email" id="email" placeholder="Email" required>
<input type="password" name="password" id="password" placeholder="Password" required>
<button type="submit">Signup</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>The accompanying style.css provides basic styling:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.form-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
form { display: flex; flex-direction: column; }
input { margin-bottom: 15px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
button { padding: 10px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background-color: #218838; }Step 4: Write Registration Backend (PHP)
Create signup.php with the following logic to connect to the database, hash passwords, check for duplicate emails, and insert new users:
<?php
// Database connection
$conn = new mysqli('localhost', 'root', '', 'user_system');
if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); }
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$email = $_POST['email'];
$password = password_hash($_POST['password'], PASSWORD_DEFAULT);
$check = $conn->query("SELECT * FROM users WHERE email='$email'");
if ($check->num_rows > 0) {
echo "Email already exists!";
} else {
$sql = "INSERT INTO users (email, password) VALUES ('$email', '$password')";
if ($conn->query($sql) === TRUE) {
echo "Signup successful!";
} else {
echo "Error: " . $sql . "
" . $conn->error;
}
}
}
$conn->close();
?>Step 5: Create Login Form
Create login.html similar to the signup page:
<!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="form-container">
<h2>Login</h2>
<form id="loginForm" method="POST" action="login.php">
<input type="email" name="email" id="email" placeholder="Email" required>
<input type="password" name="password" id="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>Step 6: Write Login Backend (PHP)
Create login.php to verify credentials against the stored hash:
<?php
// Database connection
$conn = new mysqli('localhost', 'root', '', 'user_system');
if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); }
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$email = $_POST['email'];
$password = $_POST['password'];
$result = $conn->query("SELECT * FROM users WHERE email='$email'");
if ($result->num_rows > 0) {
$user = $result->fetch_assoc();
if (password_verify($password, $user['password'])) {
echo "登录成功！";
} else {
echo "凭据无效！";
}
} else {
echo "未找到用户！";
}
}
$conn->close();
?>Step 7: Add Basic JavaScript Validation
Create script.js to ensure all fields are filled and the password meets a minimum length:
document.getElementById('signupForm').addEventListener('submit', function(event) {
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
if (email === '' || password === '') {
event.preventDefault();
alert('请填写所有字段');
} else if (password.length < 6) {
event.preventDefault();
alert('密码至少包含6个字符');
}
});Conclusion
Congratulations! You have successfully built a simple login and registration system using PHP, MySQL, HTML, CSS, and vanilla JavaScript.
php中文网 Courses
php中文网's platform for the latest courses and technical articles, helping PHP learners advance quickly.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.