In this article, I walk you through the complete process of
creating a user registration system using Frontend(HTML, CSS(Bootstrap) ) and Backend(PHP and MySQL database), where users can create an account by
providing a username, email, and password. After registration, the user can login and logout of her website/store. I will also show you how you can make some pages
accessible only to logged-in users using a session in PHP. Any other user not
logged in will not be able to access the page.
The first thing we'll need to do is set up our
database table under "Ebook_store" we already created in our database.
Now I created a table with different Columns
1. user_id that is auto-increment
2. full name
3. email
4. password
5. memebership_status
6. created_at (it gives the current data and time when the user registers)
Or you can create it on the MySQL prompt using the following SQL script:
NOTE: if you don't need a column, simply remove it and copy the code and paste it under the MySQL database table
CREATE TABLE `users` (
`user_id` int(11) NOT NULL,
`full_name` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL,
`membership_status` enum('none','active','expired') DEFAULT NULL,
`created_at` timestamp NOT NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
And that's it with the database.
Now, create a folder(If you haven't done before) called auth(you can name it as per your requirement or what you like) in a directory accessible to our server. i.e, create the folder inside htdocs (if you are using XAMPP server) or inside www (if you are using WAMPP server).
Open these files up in a text editor of your choice. Mine is VS Code.
Open the user_register.php file and paste the following code in it:
<?php include '../views/includes/header.php'; ?>
<div class="container"> <div class="row justify-content-center"> <div class="col-md-6 mt-5 mb-5 rounded p-5 shadow"> <div class="register-container"> <div class="register-header"> <h2 class="text-center font-weight-bold"><i class="bi bi-person-plus"></i> Create Account</h2> </div> <div class="register-body"> <?php if (isset($_GET['error'])): ?> <div class="alert alert-danger" role="alert"> <i class="bi bi-exclamation-triangle"></i> <?php echo htmlspecialchars($_GET['error']); ?> </div> <?php endif; ?> <?php if (isset($_GET['success'])): ?> <div class="alert alert-success" role="alert"> <i class="bi bi-check-circle"></i> <?php echo htmlspecialchars($_GET['success']); ?> </div> <?php endif; ?> <form method="POST" action="../includes/register.php"> <div class="mb-3"> <label for="name" class="form-label">Full Name <span class="text-danger">*</span></label> <input type="text" class="form-control" id="name" name="username" value="" required> </div>
<div class="mb-3"> <label for="email" class="form-label">Email Address <span class="text-danger">*</span></label> <input type="email" class="form-control" id="email" name="email" value="" required> </div>
<div class="mb-3"> <label for="password" class="form-label">Password <span class="text-danger">*</span></label> <input type="password" class="form-control" id="password" name="password" minlength="8" required> <small class="text-muted">Minimum 8 characters</small> </div>
<div class="mb-4"> <label for="confirm_password" class="form-label">Confirm Password <span class="text-danger">*</span></label> <input type="password" class="form-control" id="confirm_password" name="confirm_password" minlength="8" required> </div>
<button type="submit" name="register" class="btn btn-primary w-100 mb-3"> <i class="bi bi-person-plus"></i> Register </button>
<div class="text-center"> <p class="mb-0">Already have an account? <a href="<?php echo BASE_URL; ?>auth/user_login.php" class="text-primary">Login here</a> </p> <a href="<?php echo BASE_URL; ?>index.php" class="text-muted"> <i class="bi bi-arrow-left"></i> Back to Home </a> </div> </form> </div> </div> </div> </div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<?php include '../views/includes/footer.php'; ?>1. In the top of user_register.php file
<?php include '../views/includes/header.php'; ?>
2.In the bottom of user_register.php file
<?php include '../views/includes/footer.php'; ?>
Header.php and Footer.php
These are called include files, partials, or template files in web development.
They are reusable components that contain the top (header) and bottom (footer) sections of a website. By including them in multiple pages, you avoid repeating the same code and make your website easier to maintain.
Created these files and put the code below
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eBook Store</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="../../assets/css/style.css">
<!-- Favicon (optional) -->
<link rel="icon" href="assets/images/icons/book.ico" type="image/x-icon">
</head>
<body>
<!-- Top Carousel Bar -->
<div id="topCarousel" class="carousel slide text-center bg-dark text-white py-2" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<p class="mb-0">🎁 Shop Our Top 100ish Best Gifts for Holiday</p>
</div>
<div class="carousel-item">
<p class="mb-0">🚚 Get It Today! Same-Day Delivery or Buy Online, Pick Up In Stores Options Available in All Stores</p>
</div>
</div>
</div>
<!-- Main Navbar -->
<nav class="navbar navbar-expand-lg bg-light shadow-sm py-3">
<div class="container-fluid">
<!-- Left: Logo -->
<a class="navbar-brand fw-bold text-primary" href="index.php">📚 eBookStore</a>
<!-- Center: Search bar -->
<form class="d-flex mx-auto w-50" role="search" method="get" action="index.php?page=ebooks">
<input class="form-control me-2" type="search" placeholder="Search for eBooks..." name="query" aria-label="Search">
<button class="btn btn-outline-primary" type="submit">Search</button>
</form>
<!-- Right: Cart Icon -->
<div class="d-flex align-items-center">
<a href="index.php?page=cart" class="btn position-relative">
<i class="bi bi-cart3 fs-4 text-primary"></i>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
0
</span>
</a>
</div>
</div>
</nav>
<!-- Mega Menu Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#megaMenu" aria-controls="megaMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="megaMenu">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<!-- Example Mega Menu Item -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-white" href="#" id="ebooksDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
eBooks
</a>
<div class="dropdown-menu p-4 border-0 shadow-lg" style="min-width: 600px;">
<div class="row">
<div class="col-md-4">
<h6 class="text-primary">Fiction</h6>
<a class="dropdown-item" href="#">Mystery</a>
<a class="dropdown-item" href="#">Romance</a>
<a class="dropdown-item" href="#">Fantasy</a>
</div>
<div class="col-md-4">
<h6 class="text-primary">Non-Fiction</h6>
<a class="dropdown-item" href="#">Biographies</a>
<a class="dropdown-item" href="#">Self Help</a>
<a class="dropdown-item" href="#">Business</a>
</div>
<div class="col-md-4">
<h6 class="text-primary">Educational</h6>
<a class="dropdown-item" href="#">Science</a>
<a class="dropdown-item" href="#">Technology</a>
<a class="dropdown-item" href="#">Mathematics</a>
</div>
</div>
</div>
</li>
<!-- Add More Menu Items -->
<li class="nav-item">
<a class="nav-link text-white" href="#">Membership</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Footer Section -->
<div class="container-fluid bg-dark text-white pt-5 pb-3 mt-5">
<div class="container">
<!-- 🔹 Top Section -->
<div class="row align-items-center mb-4">
<!-- Left: Social Icons -->
<div class="col-md-4 text-center text-md-start mb-3 mb-md-0">
<h5 class="fw-semibold mb-3">Follow Us</h5>
<a href="#" class="text-white me-3 fs-5"><i class="bi bi-facebook"></i></a>
<a href="#" class="text-white me-3 fs-5"><i class="bi bi-instagram"></i></a>
<a href="#" class="text-white me-3 fs-5"><i class="bi bi-twitter-x"></i></a>
<a href="#" class="text-white fs-5"><i class="bi bi-youtube"></i></a>
</div>
<!-- Right: 3 Columns -->
<div class="col-md-8">
<div class="row text-center text-md-start">
<!-- Live Chat -->
<div class="col-md-4 mb-3 mb-md-0">
<h6 class="fw-bold">💬 Live Chat</h6>
<p class="small text-secondary mb-0">Chat with our support team</p>
</div>
<!-- Newsletter (Email) -->
<div class="col-md-4 mb-3 mb-md-0">
<h6 class="fw-bold">📧 Newsletter</h6>
<form class="d-flex mt-2">
<input type="email" class="form-control form-control-sm me-2" placeholder="Your email" required>
<button class="btn btn-primary btn-sm">Go</button>
</form>
</div>
<!-- Contact Number -->
<div class="col-md-4">
<h6 class="fw-bold">📞 Contact Us</h6>
<p class="mb-0">+92 300 1234567</p>
</div>
</div>
</div>
</div>
<hr class="border-secondary">
<!-- 🔹 Bottom Section -->
<div class="row text-center text-md-start">
<div class="col-md-2 col-6 mb-3">
<h6 class="fw-bold">About</h6>
<ul class="list-unstyled small">
<li><a href="#" class="text-secondary text-decoration-none">Company</a></li>
<li><a href="#" class="text-secondary text-decoration-none">Careers</a></li>
<li><a href="#" class="text-secondary text-decoration-none">Press</a></li>
</ul>
</div>
<div class="col-md-2 col-6 mb-3">
<h6 class="fw-bold">Help</h6>
<ul class="list-unstyled small">
<li><a href="#" class="text-secondary text-decoration-none">FAQs</a></li>
<li><a href="#" class="text-secondary text-decoration-none">Returns</a></li>
<li><a href="#" class="text-secondary text-decoration-none">Support</a></li>
</ul>
</div>
<div class="col-md-2 col-6 mb-3">
<h6 class="fw-bold">Categories</h6>
<ul class="list-unstyled small">
<li><a href="#" class="text-secondary text-decoration-none">Fiction</a></li>
<li><a href="#" class="text-secondary text-decoration-none">Non-Fiction</a></li>
<li><a href="#" class="text-secondary text-decoration-none">Science</a></li>
</ul>
</div>
<div class="col-md-2 col-6 mb-3">
<h6 class="fw-bold">Account</h6>
<ul class="list-unstyled small">
<li><a href="auth/user_login.php" class="text-secondary text-decoration-none">Login</a></li>
<li><a href="auth/admin_login.php" class="text-secondary text-decoration-none">Admin Login</a></li>
<li><a href="auth/user_register.php" class="text-secondary text-decoration-none">Register</a></li>
<li><a href="#" class="text-secondary text-decoration-none">Orders</a></li>
</ul>
</div>
<div class="col-md-2 col-12 mb-3">
<h6 class="fw-bold">Policies</h6>
<ul class="list-unstyled small">
<li><a href="#" class="text-secondary text-decoration-none">Privacy</a></li>
<li><a href="#" class="text-secondary text-decoration-none">Terms</a></li>
<li><a href="#" class="text-secondary text-decoration-none">Refunds</a></li>
</ul>
</div>
</div>
<hr class="border-secondary">
<!-- Copyright -->
<div class="text-center small text-secondary">
© 2025 eBookStore. All Rights Reserved.
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script src="assets/js/main.js"></script>
</body>
</html>
User_login.php
<?php
session_start();
include '../config/config.php'; // include DB connection
// Initialize email variable to repopulate form
$email = $_POST['email'] ?? '';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
<style>
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.login-container {
background: white;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
overflow: hidden;
max-width: 450px;
width: 100%;
}
.login-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
text-align: center;
}
.login-body {
padding: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-5">
<div class="login-container">
<div class="login-header">
<h2><i class="bi bi-box-arrow-in-right"></i> User Login</h2>
<p class="mb-0">Welcome back! Please login to your account</p>
</div>
<div class="login-body">
<!-- Display messages -->
<?php if (isset($_SESSION['error'])): ?>
<div class="alert alert-danger">
<?php
echo $_SESSION['error'];
unset($_SESSION['error']);
?>
</div>
<?php endif; ?>
<?php if (isset($_SESSION['success'])): ?>
<div class="alert alert-success">
<?php
echo $_SESSION['success'];
unset($_SESSION['success']);
?>
</div>
<?php endif; ?>
<!-- Login Form -->
<form method="POST" action="../includes/register.php">
<div class="mb-3">
<label for="email" class="form-label">Email Address</label>
<input type="email" class="form-control" id="email" name="email"
value="<?php echo htmlspecialchars($email); ?>" required autofocus>
</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>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="remember" name="remember">
<label class="form-check-label" for="remember">Remember me</label>
</div>
<button type="submit" name="login" class="btn btn-primary w-100 mb-3">
<i class="bi bi-box-arrow-in-right"></i> Login
</button>
<div class="text-center">
<p class="mb-2">
<a href="#" class="text-primary">Forgot Password?</a>
</p>
<p class="mb-0">Don't have an account?
<a href="<?php echo BASE_URL; ?>auth/user_register.php" class="text-primary">Register here</a>
</p>
<a href="<?php echo BASE_URL; ?>index.php" class="text-muted">
<i class="bi bi-arrow-left"></i> Back to Home
</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
register.php
<?php
if (isset($_POST['login'])) {
$email = trim($_POST['email']);
$password = $_POST['password'];
$errors = [];
// Check if email exists
$stmt = mysqli_prepare($conn, "SELECT * FROM user WHERE email = ?");
if ($stmt) {
mysqli_stmt_bind_param($stmt, "s", $email);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
if ($row = mysqli_fetch_assoc($result)) {
// Verify password
if (password_verify($password, $row['password'])) {
// Login successful
$_SESSION['user_id'] = $row['id'];
$_SESSION['username'] = $row['username'];
$_SESSION['success'] = "Login successful! Welcome, " . $row['username'];
header("Location: ../user/index.php"); // Redirect to user dashboard or homepage
exit();
} else {
$errors[] = "Invalid password!";
}
} else {
$errors[] = "Email not found!";
}
mysqli_stmt_close($stmt);
} else {
$errors[] = "Error preparing statement: " . mysqli_error($conn);
}
// If there are errors
if (!empty($errors)) {
$_SESSION['error'] = implode(" ", $errors);
header("Location: ../auth/user_login.php");
exit();
}
mysqli_close($conn);
}
?>
0 comments:
Post a Comment