The Multi Role Login System in PHP MySQL is a secure and dynamic web application designed for user authentication and access control. It begins by creating a MySQL database to store user information, including roles. The index page features sleek login and registration forms, validating and hashing user data before inserting it into the database.
Upon login validation using PHP, users are directed to their respective areas – user, manager, or admin – each with unique content and functionalities. Uniquely styled with CSS, the user interface ensures a consistent and appealing design throughout the application.
In cases where users attempt unauthorized access to areas outside their roles, a designated unauthorized page redirects them, maintaining the system’s integrity. The CSS styling is implemented universally, providing a seamless and professional appearance.
Additionally, JavaScript is utilized for client-side validation, enhancing user experience by validating certain form elements in real-time. This Multi-Role Login System prioritizes security, role-based access, and an aesthetically pleasing user interface for a robust and user-friendly web application.
Demo
Follow This Step to Create Multi Role Login System
1-Creating Database
- Open PHPMyAdmin in your Browser
- Click on Database Tab Display on Topside
- Give the Database name “multi-rol”.
- After Creating Database Open it.
- Click on SQL Tab on Top area
- Copy the Below Source Code and paste it.
- Then Click on Go.
-- phpMyAdmin SQL Dump -- version 5.2.1 -- https://www.phpmyadmin.net/ -- -- Host: 127.0.0.1 -- Generation Time: Feb 05, 2024 at 08:17 PM -- Server version: 10.4.32-MariaDB -- PHP Version: 8.2.12 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: `multi-rol` -- -- -------------------------------------------------------- -- -- Table structure for table `tbl_user` -- CREATE TABLE `tbl_user` ( `tbl_user_id` int(11) NOT NULL, `name` varchar(255) NOT NULL, `username` varchar(255) NOT NULL, `password` varchar(255) NOT NULL, `role` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; -- -- Dumping data for table `tbl_user` -- INSERT INTO `tbl_user` (`tbl_user_id`, `name`, `username`, `password`, `role`) VALUES (1, 'Lorem Ipsum', 'admin', 'admin', 'admin'), (3, 'John Doe', 'user', 'user', 'user'), (5, 'Deepak', 'manager', 'manager', 'manager'); -- -- Indexes for dumped tables -- -- -- Indexes for table `tbl_user` -- ALTER TABLE `tbl_user` ADD PRIMARY KEY (`tbl_user_id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tbl_user` -- ALTER TABLE `tbl_user` MODIFY `tbl_user_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6; 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 */;
OR Import DB File
After Downloading the source code extract it in your root folder.
- Open PHPMyAdmin in your Browser
- Click on Database Tab Display on Topside
- Give the Database name “multi-rol”.
- After Creating Database Open it.
- Click on Import Tab on Top area
- You can Find db folder in the Downloaded source code where find multi-rol.sql file then Select it.
- Then Click on Go.
2- Creating Database Connection
After import Database File then next step is creating a database connection using php copy the below code and save it is as “conn.php” under conn folder.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db = "multi-rol";
try {
$conn = new PDO("mysql:host=$servername;dbname=$db", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
echo "Failed " . $e->getMessage();
}
3 – Creating Index Page
Design an index page containing login and register forms using HTML and CSS. Use PHP for form actions, directing users to the appropriate pages based on their roles. create index page into your project folder then copy below code and paste into index page .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi Role Login System in PHP MySQL</title>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="main row">
<div class="main-container">
<!-- Login Form -->
<div class="login-container" id="loginForm">
<h2 class="text-center">Welcome Back!</h2>
<p class="text-center">Please enter your login details.</p>
<div class="login-form">
<form action="./include/login.php" method="POST">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" name="username">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<div class="row m-auto">
<div class="form-group form-check col-6">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember Password</label>
</div>
<small class="show-form col-6 text-center pl-4" onclick="showForm()">No Account? Register Here.</small>
</div>
<button type="submit" class="btn btn-primary login-btn form-control">Login</button>
</form>
</div>
</div>
<!-- Registration Area -->
<div class="registration-container" id="registrationForm" style="display:none;">
<h2 class="text-center">Register Your Account!</h2>
<p class="text-center">Please enter your personal details.</p>
<div class="registration-form">
<form action="./include/add-user.php" method="POST">
<div class="form-group">
<label for="name">Full Name:</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
<label for="role">Role:</label>
<select class="form-control" id="role" name="role">
<option>-select-</option>
<option value="admin">Admin</option>
<option value="manager">Manager</option>
<option value="user">User</option>
</select>
</div>
<div class="form-group">
<label for="registerUsername">Username:</label>
<input type="text" class="form-control" id="registerUsername" name="username">
</div>
<div class="form-group">
<label for="registerPassword">Password:</label>
<input type="password" class="form-control" id="registerPassword" name="password">
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password:</label>
<input type="password" class="form-control" id="confirmPassword" name="confirmPassword">
</div>
<div class="form-group float-right">
<small class="show-form" onclick="showForm()">Already have an account? Login Here.</small>
</div>
<button type="submit" class="btn btn-primary login-register form-control">Register</button>
</form>
</div>
</div>
</div>
</div>
<!-- Bootstrap 4 JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
4 – Add Data Into Database
Implement a registration process on the index page. When users register, validate their inputs, hash the password, and insert the user data into the database. Ensure unique usernames and proper email validation. Create an “include” folder in the project, and then add an “add-user.php” file. Copy and paste the provided code.
<?php
include ('../conn/conn.php');
if (isset($_POST['name'], $_POST['role'], $_POST['username'], $_POST['password'])) {
$name = $_POST['name'];
$role = $_POST['role'];
$username = $_POST['username'];
$password = $_POST['password'];
try {
$stmt = $conn->prepare("SELECT `name` FROM `tbl_user` WHERE `name` = :name ");
$stmt->execute(['name' => $name]);
$nameExist = $stmt->fetch(PDO::FETCH_ASSOC);
if (empty($nameExist)) {
$conn->beginTransaction();
$insertStmt = $conn->prepare("INSERT INTO `tbl_user` (`name`, `role`, `username`, `password`) VALUES (:name, :role, :username, :password)");
$insertStmt->bindParam('name', $name, PDO::PARAM_STR);
$insertStmt->bindParam('role', $role, PDO::PARAM_STR);
$insertStmt->bindParam('username', $username, PDO::PARAM_STR);
$insertStmt->bindParam('password', $password, PDO::PARAM_STR);
$insertStmt->execute();
$conn->commit();
echo "
<script>
alert('Registered Successfully!');
window.location.href = 'http://localhost/multi-role-login-system/';
</script>
";
} else {
echo "
<script>
alert('Account Already Exist!');
window.location.href = 'http://localhost/multi-role-login-system/';
</script>
";
}
} catch (PDOException $e) {
$conn->rollBack();
echo "Error: " . $e->getMessage();
}
}
?>
5 – Login Validate Using PHP
Implement PHP login validation. Retrieve user credentials from the database, hash the entered password, and compare it with the stored hash. If successful, redirect users based on their roles. under includes folder in the project add a “login.php” file. Copy and paste the provided code.
<?php
include('../conn/conn.php');
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$password = $_POST['password'];
$stmt = $conn->prepare("SELECT `password`, `role`, `tbl_user_id` FROM `tbl_user` WHERE `username` = :username");
$stmt->bindParam(':username', $username);
$stmt->execute();
if ($stmt->rowCount() > 0) {
$row = $stmt->fetch();
$stored_password = $row['password'];
$stored_role = $row['role'];
$user_id = $row['tbl_user_id'];
// After successful login
if ($password === $stored_password) {
session_start();
$_SESSION['tbl_user_id'] = $user_id;
$_SESSION['role'] = $stored_role;
switch ($stored_role) {
case 'admin':
header("Location: http://localhost/multi-role-login-system/admin.php");
exit();
case 'manager':
header("Location: http://localhost/multi-role-login-system/manager.php");
exit();
case 'user':
header("Location: http://localhost/multi-role-login-system/user.php");
exit();
default:
// Handle unknown roles or redirect to an error page
header("Location: http://localhost/multi-role-login-system/error.php");
exit();
}
} else {
// Handle incorrect password
header("Location: http://localhost/multi-role-login-system/");
exit();
}
}
}
6 – User Area Page
Create a user area page accessible after successful login for users. Display user-specific content or functionality. Style the page using CSS for a pleasant user experience. under project folder add a “user.php” file. Copy and paste the provided code.
<?php
session_start();
include('./conn/conn.php');
// Check if the user is logged in
if (isset($_SESSION['tbl_user_id'])) {
$user_id = $_SESSION['tbl_user_id'];
// Fetch the user's name from the database
$stmt = $conn->prepare("SELECT `name` FROM `tbl_user` WHERE `tbl_user_id` = :user_id");
$stmt->bindParam(':user_id', $user_id);
$stmt->execute();
if ($stmt->rowCount() > 0) {
$row = $stmt->fetch();
$user_name = $row['name'];
}
// Check if the user is logged in
if (!isset($_SESSION['tbl_user_id'])) {
header("Location: http://localhost/multi-role-login-system/");
exit();
}
// Check the user's role
$role = $_SESSION['role'];
if ($role != 'user') {
// Redirect to unauthorized page
header("Location: http://localhost/multi-role-login-system/unauthorized.php");
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Panel</title>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="main">
<div class="title-container">
<h2>Welcome To User Panel</h2>
<h3> Hi <strong><?= $user_name ?></strong>
<a href="./include/logout.php" class="btn btn-danger">Log out</a>
</h3>
</div>
<div class="users-container">
<h2>List of Users</h2>
<div class="table-responsive">
<table class="table">
<thead class="text-center">
<tr>
<th scope="col">ID</th>
<th scope="col">Account Name</th>
<th scope="col">Username</th>
<th scope="col">Password</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody class="text-center">
<?php
$stmt = $conn->prepare("SELECT * FROM `tbl_user` WHERE `role` = 'user' ");
$stmt->execute();
$result = $stmt->fetchAll();
foreach ($result as $row) {
$userID = $row['tbl_user_id'];
$name = $row['name'];
$username = $row['username'];
$password = $row['password'];
$role = $row['role'];
?>
<tr>
<td><?= $userID ?></td>
<td><?= $name ?></td>
<td><?= $username ?></td>
<td><?= $password ?></td>
<td><?= $role ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
<?php
} else {
header("Location: http://localhost/multi-role-login-system/");
}
?>
7 -Manager Area Page
Develop a manager area page with content or tools specific to users with the manager role. Apply CSS to enhance the visual appeal and maintain a consistent design across pages. under project folder add a “manager.php” file. Copy and paste the provided code.
<?php
session_start();
include('./conn/conn.php');
// Check if the user is logged in
if (isset($_SESSION['tbl_user_id'])) {
$user_id = $_SESSION['tbl_user_id'];
// Fetch the user's name from the database
$stmt = $conn->prepare("SELECT `name` FROM `tbl_user` WHERE `tbl_user_id` = :user_id");
$stmt->bindParam(':user_id', $user_id);
$stmt->execute();
if ($stmt->rowCount() > 0) {
$row = $stmt->fetch();
$user_name = $row['name'];
}
// Check if the user is logged in
if (!isset($_SESSION['tbl_user_id'])) {
header("Location: http://localhost/multi-role-login-system/");
exit();
}
// Check the user's role
$role = $_SESSION['role'];
if ($role != 'manager') {
// Redirect to unauthorized page
header("Location: http://localhost/multi-role-login-system/unauthorized.php");
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manager Panel</title>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="main">
<div class="title-container">
<h2>Welcome To Manager Panel</h2>
<h3> Hi <strong><?= $user_name ?></strong>
<a href="./include/logout.php" class="btn btn-danger">Log out</a>
</h3>
</div>
<div class="users-container">
<h2>List of Users</h2>
<div class="table-responsive">
<table class="table">
<thead class="text-center">
<tr>
<th scope="col">ID</th>
<th scope="col">Account Name</th>
<th scope="col">Username</th>
<th scope="col">Password</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody class="text-center">
<?php
$stmt = $conn->prepare("SELECT * FROM `tbl_user` WHERE `role` = 'manager' ");
$stmt->execute();
$result = $stmt->fetchAll();
foreach ($result as $row) {
$userID = $row['tbl_user_id'];
$name = $row['name'];
$username = $row['username'];
$password = $row['password'];
$role = $row['role'];
?>
<tr>
<td><?= $userID ?></td>
<td><?= $name ?></td>
<td><?= $username ?></td>
<td><?= $password ?></td>
<td><?= $role ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
<?php
} else {
header("Location: http://localhost/multi-role-login-system/");
}
?>
8 – Admin Area Page
Design an admin area page featuring admin-specific content or functionalities. Apply CSS styling to maintain a professional and cohesive look. Admins should have access to privileged information or tools. under project folder add a “admin.php” file. Copy and paste the provided code.
<?php
session_start();
include('./conn/conn.php');
// Check if the user is logged in
if (isset($_SESSION['tbl_user_id'])) {
$user_id = $_SESSION['tbl_user_id'];
// Fetch the user's name from the database
$stmt = $conn->prepare("SELECT `name` FROM `tbl_user` WHERE `tbl_user_id` = :user_id");
$stmt->bindParam(':user_id', $user_id);
$stmt->execute();
if ($stmt->rowCount() > 0) {
$row = $stmt->fetch();
$user_name = $row['name'];
}
// Check if the user is logged in
if (!isset($_SESSION['tbl_user_id'])) {
header("Location: http://localhost/multi-role-login-system/");
exit();
}
// Check the user's role
$role = $_SESSION['role'];
if ($role != 'admin') {
// Redirect to unauthorized page
header("Location: http://localhost/multi-role-login-system/unauthorized.php");
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Panel</title>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="main">
<div class="title-container">
<h2>Welcome To Admin Panel</h2>
<h3> Hi <strong><?= $user_name ?></strong>
<a href="./include/logout.php" class="btn btn-danger">Log out</a>
</h3>
</div>
<div class="users-container">
<h2>List of Users</h2>
<div class="table-responsive">
<table class="table">
<thead class="text-center">
<tr>
<th scope="col">ID</th>
<th scope="col">Account Name</th>
<th scope="col">Username</th>
<th scope="col">Password</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody class="text-center">
<?php
$stmt = $conn->prepare("SELECT * FROM `tbl_user` WHERE `role` = 'admin' ");
$stmt->execute();
$result = $stmt->fetchAll();
foreach ($result as $row) {
$userID = $row['tbl_user_id'];
$name = $row['name'];
$username = $row['username'];
$password = $row['password'];
$role = $row['role'];
?>
<tr>
<td><?= $userID ?></td>
<td><?= $name ?></td>
<td><?= $username ?></td>
<td><?= $password ?></td>
<td><?= $role ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
<?php
} else {
header("Location: http://localhost/multi-role-login-system/");
}
?>
9 – Unauthorized Page for Another Role Access
Create an unauthorized page that users are redirected to if they attempt to access a page outside their role. This page can inform them that the access is restricted and provide a link back to the home page. under project folder add a “unauthorized.php” file. Copy and paste the provided code.
<?php
session_start();
// Check if the user is logged in
if (!isset($_SESSION['tbl_user_id'])) {
header("Location: http://localhost/multi-role-login-system/");
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi Role Login System in PHP MySQL</title>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="main row" style="background-color:#ff5050;">
<div class="main-container">
<!-- Login Form -->
<div class="title-container ">
<h2 class="text-center">You are not access this page!</h2>
<?php
// Check the user's role
$role = $_SESSION['role'];
switch ($role) {
case 'admin':
// Access admin-specific data
echo "<h3 class='text-center'><a href='http://localhost/multi-role-login-system/admin.php'>Back To Admin panel</a></h3>";
break;
case 'manager':
// Access user-specific data
echo "<h3 class='text-center'><a href='http://localhost/multi-role-login-system/manager.php'>Back To Manager panel</a></h3>";
break;
case 'user':
// Access user-specific data
echo "<h3 class='text-center'><a href='http://localhost/multi-role-login-system/user.php'>Back To user panel</a></h3>";
break;
default:
// Handle unknown roles or redirect to an error page
header("Location: http://localhost/multi-role-login-system/error.php");
exit();
}
// Continue with the content of the page
// ...
?>
</div>
</div>
<!-- Bootstrap 4 JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html><?php
session_start();
// Check if the user is logged in
if (!isset($_SESSION['tbl_user_id'])) {
header("Location: http://localhost/multi-role-login-system/");
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi Role Login System in PHP MySQL</title>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="main row" style="background-color:#ff5050;">
<div class="main-container">
<!-- Login Form -->
<div class="title-container ">
<h2 class="text-center">You are not access this page!</h2>
<?php
// Check the user's role
$role = $_SESSION['role'];
switch ($role) {
case 'admin':
// Access admin-specific data
echo "<h3 class='text-center'><a href='http://localhost/multi-role-login-system/admin.php'>Back To Admin panel</a></h3>";
break;
case 'manager':
// Access user-specific data
echo "<h3 class='text-center'><a href='http://localhost/multi-role-login-system/manager.php'>Back To Manager panel</a></h3>";
break;
case 'user':
// Access user-specific data
echo "<h3 class='text-center'><a href='http://localhost/multi-role-login-system/user.php'>Back To user panel</a></h3>";
break;
default:
// Handle unknown roles or redirect to an error page
header("Location: http://localhost/multi-role-login-system/error.php");
exit();
}
// Continue with the content of the page
// ...
?>
</div>
</div>
<!-- Bootstrap 4 JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
10 – Create Logout For Login users
under includes folder in the project add a “logout.php” file. Copy and paste the provided code.
<?php
session_start();
session_unset();
session_destroy();
header("Location: http://localhost/multi-role-login-system/");
?>
11 – Styling All Elements Using CSS
Apply CSS styles consistently across all pages to create a visually appealing and user-friendly interface. Use responsive design principles to ensure a good user experience on various devices. you can create a css folder under project then create s style.css after that copy paste the below code
* {
margin: 0;
padding: 0;
}
body {
background-color: aliceblue;
overflow: hidden;
height: 100vh;
}
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container,
.registration-container {
width: 500px;
box-shadow: rgba(31, 31, 31, 0.24) 0px 3px 8px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.7);
padding: 30px;
color: rgb(2, 2, 2);
}
.show-form {
color: rgb(100, 100, 200);
text-decoration: underline;
cursor: pointer;
}
.show-form:hover {
color: rgb(100, 100, 255);
}
.title-container {
text-align: center;
width: 1000px;
box-shadow: rgba(31, 31, 31, 0.24) 0px 3px 8px;
color: rgb(0, 0, 0);
background-color: rgba(255, 255, 255, 0.6);
padding: 40px;
border-radius: 10px;
margin: 20px;
}
.title-container > h1 {
font-size: 80px;
}
.title-container > h2 {
font-size: 40px;
margin-bottom: 20px;
}
.users-container {
color: rgb(0, 0, 0);
margin: 20px;
width: 1000px;
box-shadow: rgba(31, 31, 31, 0.24) 0px 3px 8px;
background-color: rgba(255, 255, 255, 0.6);
padding: 40px;
border-radius: 10px;
}
12 – Validate Some Elements Using JavaScript
Implement JavaScript to validate certain form inputs on the client side, providing immediate feedback to users and reducing server load. This can include password strength validation or email format checks. Create a “js” folder in the project and add a “script.js” file. Copy and paste the provided code.
function showForm() {
const loginForm = document.getElementById('loginForm');
const registrationForm = document.getElementById('registrationForm');
if (registrationForm.style.display == 'none') {
loginForm.style.display = 'none';
registrationForm.style.display = '';
} else {
loginForm.style.display = '';
registrationForm.style.display = 'none';
}
}
Now Run your project on browser . if any problem with this Download the Complete source code in zip Formate by clicking the below button Download Source Code otherwise you can send Comment.
Users Login Detail
| username | password |
| user | user |
| admin | admin |
| manager | manager |
Conclusion
In conclusion, the Multi-Role Login System in PHP MySQL is a robust solution that effectively addresses user authentication, role-based access, and data security. The system’s foundation lies in a well-structured MySQL database, facilitating the storage of user information, including roles, in a secure manner. The user interface, characterized by sleek login and registration forms, is consistently styled using CSS for a visually appealing and user-friendly experience across all pages.