PHP User Registration & Login System with Tailwind CSS (Step-by-Step Guide for Beginners)
Prakash Bhandari (PB)Loading..
Published , Last updated
Like
Bookmark
Are you just starting with PHP and want to build a complete user registration and login system? You’re in the right place! In this tutorial, you’ll learn how to create a simple authentication system using core PHP, styled beautifully with Tailwind CSS, and designed in a way that's beginner-friendly and easy to understand.
📂 Project Directory Structure
Let’s start by organizing our files. Create a project folder like this:
php-auth-app/
│
├── css/
│ └── tailwind.min.css (Tailwind CSS)
│
├── includes/
│ ├── config.php (Database connection)
│ └── auth.php (Session check for dashboard)
│
├── register.php (Registration form)
├── login.php (Login form)
├── dashboard.php (Protected dashboard)
├── logout.php (To log out the user)
└── db.sql (Database schema)
Step 1: Create the Database
Create a database named auth_demo and run the following SQL:
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100),
email VARCHAR(100) UNIQUE,
password VARCHAR(255),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
Step 2: Setup the Database Connection (includes/config.php)
<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "auth_demo";
$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
Step 3: Create Registration Page (register.php)
<?php include 'includes/config.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Register</title>
<link href="css/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
<form method="POST" class="bg-white p-6 rounded shadow-md w-80">
<h2 class="text-2xl font-bold mb-4">Register</h2>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['name'];
$email = $_POST['email'];
$password = password_hash($_POST['password'], PASSWORD_DEFAULT);
$stmt = $conn->prepare("INSERT INTO users (name, email, password) VALUES (?, ?, ?)");
$stmt->bind_param("sss", $name, $email, $password);
if ($stmt->execute()) {
echo "<p class='text-green-500'>Registration successful. <a href='login.php' class='text-blue-500'>Login</a></p>";
} else {
echo "<p class='text-red-500'>Error: Email may already be registered.</p>";
}
}
?>
<input type="text" name="name" placeholder="Name" required class="mb-3 w-full p-2 border rounded">
<input type="email" name="email" placeholder="Email" required class="mb-3 w-full p-2 border rounded">
<input type="password" name="password" placeholder="Password" required class="mb-3 w-full p-2 border rounded">
<button type="submit" class="bg-blue-600 text-white py-2 w-full rounded">Register</button>
</form>
</body>
</html>
Step 4: Create Login Page (login.php)
<?php
session_start();
include 'includes/config.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link href="css/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
<form method="POST" class="bg-white p-6 rounded shadow-md w-80">
<h2 class="text-2xl font-bold mb-4">Login</h2>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$email = $_POST['email'];
$password = $_POST['password'];
$stmt = $conn->prepare("SELECT * FROM users WHERE email = ?");
$stmt->bind_param("s", $email);
$stmt->execute();
$result = $stmt->get_result();
if ($user = $result->fetch_assoc()) {
if (password_verify($password, $user['password'])) {
$_SESSION['user_id'] = $user['id'];
$_SESSION['user_name'] = $user['name'];
header("Location: dashboard.php");
exit();
} else {
echo "<p class='text-red-500'>Invalid password.</p>";
}
} else {
echo "<p class='text-red-500'>No user found.</p>";
}
}
?>
<input type="email" name="email" placeholder="Email" required class="mb-3 w-full p-2 border rounded">
<input type="password" name="password" placeholder="Password" required class="mb-3 w-full p-2 border rounded">
<button type="submit" class="bg-green-600 text-white py-2 w-full rounded">Login</button>
</form>
</body>
</html>
Step 5: Protect Dashboard Page (dashboard.php + includes/auth.php)
includes/auth.php
<?php
session_start();
if (!isset($_SESSION['user_id'])) {
header("Location: login.php");
exit();
}
?>
dashboard.php
<?php include 'includes/auth.php'; ?>
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link href="css/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 h-screen flex items-center justify-center">
<div class="bg-white p-8 rounded shadow-lg text-center">
<h1 class="text-3xl font-bold mb-4">Welcome, <?= $_SESSION['user_name']; ?>!</h1>
<a href="logout.php" class="text-red-500 underline">Logout</a>
</div>
</body>
</html>
Step 6: Logout (logout.php)
<?php
session_start();
session_destroy();
header("Location: login.php");
exit();
?>
Final Tips
- Use prepared statements to prevent SQL injection.
- Use password_hash() and password_verify() for secure password handling.
- Protect pages with session checks.
- You can enhance the design further with Tailwind components or animations.
Discussion (0)
Login to Post Comment!