Creating a Signup, Login, and Logout System with PHP Sessions and MySQL Databases:
In modern web applications, user authentication and session management are essential components. This tutorial will guide you through creating a simple user authentication system using PHP sessions and a MySQL database. This system will consist of a Signup form, a Login form, and a Logout button, providing a seamless user experience.
**1. Signup Form:**
The Signup form allows new users to create an account. Users provide a desired username and password, which are then securely stored in a MySQL database. Passwords are hashed for security.
**2. Login Form:**
The Login form allows users with existing accounts to access the application. Users provide their username and password, which are verified against the stored hash in the database. Upon successful login, a PHP session is initiated, and the user is directed to a protected dashboard.
**3. Logout Button:**
The Logout button terminates the user's session, ensuring their data remains secure. After logout, users are redirected to the Login page.
**Steps:**
1. **Database Setup:**
Create a MySQL database with a table named `users`. The table should contain columns `id`, `username`, and `password`.
2. **Signup Form (`signup.html`):**
Create an HTML form with fields for username and password. Use PHP to process form submissions and store user data in the database.
3. **Login Form (`login.html`):**
Create an HTML form for user login. Use PHP to validate credentials against the stored hashes and initiate a session upon successful login.
4. **Protected Dashboard (`dashboard.php`):**
Create a dashboard accessible only to logged-in users. Display a welcome message with the username and a Logout button. Protect this page using PHP session verification.
5. **Logout Script (`logout.php`):**
Create a script to destroy the active session when users click the Logout button. Redirect users back to the Login page after logout.
**Security Considerations:**
- Use prepared statements or parameterized queries to prevent SQL injection attacks.
- Hash passwords using a secure algorithm like `password_hash()` to protect user data.
- Avoid storing sensitive information in plain text or in easily accessible locations.
- Implement proper error handling to provide users with meaningful messages in case of failures.
**Enhancements:**
- Implement password recovery mechanisms (e.g., email-based password reset).
- Use HTTPS to encrypt communication between the user and the server, enhancing data security.
- Consider adding CAPTCHA or other bot-detection mechanisms to prevent automated attacks.
By following these steps and considering security measures, you can create a robust Signup, Login, and Logout system using PHP sessions and a MySQL database. Always stay up-to-date with best practices in web security to ensure your application remains protected against evolving threats.
singup.php code
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Sing Up Page</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP"
crossorigin="anonymous">
</head>
<body>
<div class="container h-100">
<div class="d-flex justify-content-center h-100">
<div class="user_card">
<div class="d-flex justify-content-center">
<div class="brand_logo_container">
<h1>Sing Up</h1>
</div>
</div>
<div class="d-flex justify-content-center form_container">
<form>
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" name="name" id="validationCustom01" class="form-control input_user"
value="" placeholder="Enter Name" required>
<div class="invalid-feedback">
Please enter a message in the textarea.
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text"><ion-icon name="mail"></ion-icon></span>
</div>
<input type="text" name="email" class="form-control input_user" value=""
placeholder="Enter Email" required>
</div>
<div class="input-group mb-2">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" name="password" class="form-control input_pass" value=""
placeholder="Create Password" required>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input name="tick" type="checkbox" class="custom-control-input" id="customControlInline"
required>
<label class="custom-control-label" for="customControlInline">Remember me</label>
</div>
</div>
<div class="d-flex justify-content-center mt-3 login_container">
<button name="submit" class="btn login_btn" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>
index.php code
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Login Page</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP"
crossorigin="anonymous">
</head>
<body>
<div class="container h-100">
<div class="d-flex justify-content-center h-100">
<div class="user_card">
<div class="d-flex justify-content-center">
<div class="brand_logo_container">
<h1>Log In</h1>
</div>
</div>
<div class="d-flex justify-content-center form_container">
<form>
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" name="username" class="form-control input_user" value=""
placeholder="Username" required>
</div>
<div class="input-group mb-2">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" name="userpassword" class="form-control input_pass" value=""
placeholder="Password" required>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input name="tick" type="checkbox" class="custom-control-input" id="customControlInline"
required>
<label class="custom-control-label" for="customControlInline">Remember me</label>
</div>
</div>
<div class="d-flex justify-content-center mt-3 login_container">
<button type="submit" name="submit" class="btn login_btn">Login</button>
</div>
</form>
</div>
<div class="mt-4">
<div class="d-flex justify-content-center links">
Don't have an account? <a href="singup.php" class="ml-2 ">Sign Up</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
successful.php code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">
</head>
<body>
<div class="blog">
<button name="button" class="btn2" type="submit"><a href="logout.php">LogOut</a></button>
<h1 class="text-center">Welcome,<span>User Name</span></br> your are Log in Successfully!</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
</body>
</html>
style.ccs code
/* Coded with love by Mutiullah Samim */
body,
html {
margin: 0;
padding: 0;
height: 100%;
background: #cacbcc !important;
}
.user_card {
height: 400px;
width: 350px;
margin-top: auto;
margin-bottom: auto;
background: #f39c12;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
padding: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 5px;
}
.brand_logo_container {
position: absolute;
height: 170px;
width: 170px;
top: -75px;
background: transparent;
padding: 10px;
text-align: center;
}
.brand_logo_container h1 {
margin-top: 90px;
color: #eee;
}
.brand_logo {
height: 150px;
width: 150px;
border-radius: 50%;
border: 2px solid white;
}
.form_container {
margin-top: 100px;
}
.login_btn {
width: 100%;
background: #c0392b !important;
color: white !important;
}
.login_btn:focus {
box-shadow: none !important;
outline: 0px !important;
}
.login_container {
padding: 0 2rem;
}
.input-group-text {
background: #c0392b !important;
color: white !important;
border: 0 !important;
border-radius: 0.25rem 0 0 0.25rem !important;
}
.input_user,
.input_pass:focus {
box-shadow: none !important;
outline: 0px !important;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
background-color: #c0392b !important;
}
.links a {
color: #eee;
}
ion-icon {
font-size: 16px;
}
.blog {
width: 100%;
height: 80vh;
/* background: #eee; */
display: flex;
align-items: center;
justify-content: center;
}
.btn2 {
padding: 10px 20px;
background: #c0392b !important;
color: white !important;
border: none;
cursor: pointer !important;
border-radius: 5px;
position: absolute;
top: 50px;
right: 50px;
}
.btn2 a {
text-decoration: none;
color: white !important;
}
.blog h1 span {
color: #c0392b;
}
Database:-
-- phpMyAdmin SQL Dump
-- version 5.2.0
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Aug 15, 2023 at 07:49 AM
-- Server version: 10.4.27-MariaDB
-- PHP Version: 8.0.25
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `mydatabase`
--
-- --------------------------------------------------------
--
-- Table structure for table `adminuser`
--
CREATE TABLE `adminuser` (
`user_id` int(10) NOT NULL,
`name` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
--
-- Dumping data for table `adminuser`
--
INSERT INTO `adminuser` (`user_id`, `name`, `email`, `password`) VALUES
(1, 'Sonu kumar', 'sonu123@gmail.com', 'e10adc3949ba59abbe56e057f20f883e'),
(2, 'Aman ', 'aman123@gmail.com', 'e10adc3949ba59abbe56e057f20f883e'),
(3, 'myname', 'abc123@gmail.com', 'e99a18c428cb38d5f260853678922e03');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `adminuser`
--
ALTER TABLE `adminuser`
ADD PRIMARY KEY (`user_id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `adminuser`
--
ALTER TABLE `adminuser`
MODIFY `user_id` int(10) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Comments
Post a Comment