How to create admin login page using PHP?

Table of Contents

How to create admin login page using PHP?

Client verification is exceptionally normal in current web application. It is a security system that is utilized to limit unapproved admittance to part just regions and apparatuses on a site.

In this instructional exercise we’ll make a straightforward enlistment and login framework utilizing the PHP and MySQL. This instructional exercise is contained two sections: in the initial segment we’ll make a client enlistment structure, and in the subsequent part we’ll make a login structure, just as a welcome page and a logout script.

I’m accepting here that you know about HTML and CSS. I have remarked the code with the fundamental data in the significant piece of the code. So you can see without any problem. I have likewise connected the source code so you can download it and use it. How about we start.

Client the executives is a significant piece of any web application where clients can make their record and make due. The clients are permitted to enroll their record and login to get to their record. The clients are additionally overseen by director to permit specific jobs or update clients data.

So assuming you’re searching for answer for construct secure client the board situation then, at that point, you’re here the ideal locations. In this instructional exercise, you will figure out how to make secure client the board framework with PHP and MySQL. You might likewise want to checkout Login and Registration System with PHP and MySQL to execute client login and enrollment.

We will carry out usefulness to oversee client tasks like client enrollment, client email confirmation, login, secret word reset and alter profile. We will likewise make Admin board to oversee clients at administrator end to make new client, alter existing clients subtleties and erase client.

Step1: Create MySQL Database Table

First we will create MySQL database table user to store user details to manage users.

CREATE TABLE `user` (
  `id` int(11) NOT NULL,
  `first_name` varchar(50) NOT NULL,
  `last_name` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  `password` varchar(50) NOT NULL,
  `gender` enum('male','female') CHARACTER SET utf8 NOT NULL,
  `mobile` varchar(50) NOT NULL,
  `designation` varchar(50) NOT NULL,
  `image` varchar(250) NOT NULL,
  `type` varchar(250) NOT NULL DEFAULT 'general',
  `status` enum('active','pending','deleted','') NOT NULL DEFAULT 'pending',
  `authtoken` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Step2: Implement User Registration

We will design user registration form in register.php file and handle user registration on form submit.

<div id="signupbox" class="col-md-7">
	<div class="panel panel-info">
		<div class="panel-heading">
			<div class="panel-title">Sign Up</div>				
		</div>  
		<div class="panel-body" >
			<form id="signupform" class="form-horizontal" role="form" method="POST" action="">				
				<?php if ($message != '') { ?>
					<div id="login-alert" class="alert alert-danger col-sm-12"><?php echo $message; ?></div>                            
				<?php } ?>	
				<div class="form-group">
					<label for="firstname" class="col-md-3 control-label">First Name*</label>
					<div class="col-md-9">
						<input type="text" class="form-control" name="firstname" placeholder="First Name" value="<?php if(!empty($_POST["firstname"])) { echo $_POST["firstname"]; } ?>" required>
					</div>
				</div>
				<div class="form-group">
					<label for="lastname" class="col-md-3 control-label">Last Name</label>
					<div class="col-md-9">
						<input type="text" class="form-control" name="lastname" placeholder="Last Name" value="<?php if(!empty($_POST["lastname"])) { echo $_POST["lastname"]; } ?>" >
					</div>
				</div>					
				<div class="form-group">
					<label for="email" class="col-md-3 control-label">Email*</label>
					<div class="col-md-9">
						<input type="email" class="form-control" name="email" placeholder="Email Address" value="<?php if(!empty($_POST["email"])) { echo $_POST["email"]; } ?>" required>
					</div>
				</div>					
				<div class="form-group">
					<label for="password" class="col-md-3 control-label">Password*</label>
					<div class="col-md-9">
						<input type="password" class="form-control" name="passwd" placeholder="Password" required>
					</div>
				</div>								
				<div class="form-group">						                                  
					<div class="col-md-offset-3 col-md-9">
						<button id="btn-signup" type="submit" name="register" value="register" class="btn btn-info"><i class="icon-hand-right"></i>   Register</button>			
					</div>
				</div>					
				<div class="form-group">
					<div class="col-md-12 control">
						<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
							If You've already an account! 
						<a href="login.php">
							Log In 
						</a>Here
						</div>
					</div>
				</div>  				
			</form>
		 </div>
	</div>
</div>

In class User.php, we will create method register() to implement user registration. We will send an email verification email to user’s email address with link to verify and complete registration.

public function register(){		
	$message = '';
	if(!empty($_POST["register"]) && $_POST["email"] !='') {
		$sqlQuery = "SELECT * FROM ".$this->userTable." 
			WHERE email='".$_POST["email"]."'";
		$result = mysqli_query($this->dbConnect, $sqlQuery);
		$isUserExist = mysqli_num_rows($result);
		if($isUserExist) {
			$message = "User already exist with this email address.";
		} else {			
			$authtoken = $this->getAuthtoken($_POST["email"]);
			$insertQuery = "INSERT INTO ".$this->userTable."(first_name, last_name, email, password, authtoken) 
			VALUES ('".$_POST["firstname"]."', '".$_POST["lastname"]."', '".$_POST["email"]."', '".md5($_POST["passwd"])."', '".$authtoken."')";
			$userSaved = mysqli_query($this->dbConnect, $insertQuery);
			if($userSaved) {				
				$link = "<a href='http://example.com/user-management-system/verify.php?authtoken=".$authtoken."'>Verify Email</a>";			
				$toEmail = $_POST["email"];
				$subject = "Verify email to complete registration";
				$msg = "Hi there, click on this ".$link." to verify email to complete registration.";
				$msg = wordwrap($msg,70);
				$headers = "From: [email protected]";
				if(mail($toEmail, $subject, $msg, $headers)) {
					$message = "Verification email send to your email address. Please check email and verify to complete registration.";
				}
			} else {
				$message = "User register request failed.";
			}
		}
	}
	return $message;
}

We will create a method verifyRegister() in class User.php to verify user email to complete registration.

public function verifyRegister(){
	$verifyStatus = 0;
	if(!empty($_GET["authtoken"]) && $_GET["authtoken"] != '') {			
		$sqlQuery = "SELECT * FROM ".$this->userTable." 
			WHERE authtoken='".$_GET["authtoken"]."'";
		$resultSet = mysqli_query($this->dbConnect, $sqlQuery);
		$isValid = mysqli_num_rows($resultSet);	
		if($isValid){
			$userDetails = mysqli_fetch_assoc($resultSet);
			$authtoken = $this->getAuthtoken($userDetails['email']);
			if($authtoken == $_GET["authtoken"]) {					
				$updateQuery = "UPDATE ".$this->userTable." SET status = 'active'
					WHERE id='".$userDetails['id']."'";
				$isUpdated = mysqli_query($this->dbConnect, $updateQuery);					
				if($isUpdated) {
					$verifyStatus = 1;
				}
			}
		}
	}
	return $verifyStatus;
}

Step3: Implement User Login

We will design user login form in login.php file and handle login functionality on form submit.

<div class="col-md-6">                    
	<div class="panel panel-info" >
		<div class="panel-heading">
			<div class="panel-title">Log In</div>                        
		</div> 
		<div style="padding-top:30px" class="panel-body" >
			<?php if ($errorMessage != '') { ?>
				<div id="login-alert" class="alert alert-danger col-sm-12"><?php echo $errorMessage; ?></div>                            
			<?php } ?>
			<form id="loginform" class="form-horizontal" role="form" method="POST" action="">                                    
				<div style="margin-bottom: 25px" class="input-group">
					<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
					<input type="text" class="form-control" id="loginId" name="loginId"  value="<?php if(isset($_COOKIE["loginId"])) { echo $_COOKIE["loginId"]; } ?>" placeholder="email">                                        
				</div>                                
				<div style="margin-bottom: 25px" class="input-group">
					<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
					<input type="password" class="form-control" id="loginPass" name="loginPass" value="<?php if(isset($_COOKIE["loginPass"])) { echo $_COOKIE["loginPass"]; } ?>" placeholder="password">
				</div>            
				<div class="input-group">
				  <div class="checkbox">
					<label>
					  <input  type="checkbox" id="remember" name="remember" <?php if(isset($_COOKIE["loginId"])) { ?> checked <?php } ?>> Remember me
					</label>
					<label><a href="forget_password.php">Forget your password</a></label>	
				  </div>
				</div>
				<div style="margin-top:10px" class="form-group">                               
					<div class="col-sm-12 controls">
					  <input type="submit" name="login" value="Login" class="btn btn-info">						  
					</div>						
				</div>
				 <div class="form-group">
					<div class="col-md-12 control">
						<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
							Don't have an account! 
						<a href="register.php">
							Register 
						</a>Here. 
						</div>
					</div>
				</div>    	
			</form>   
		</div>                     
	</div>  
</div>

We will create a method login() in class User.php to handle user login functionality.

public function login(){		
	$errorMessage = '';
	if(!empty($_POST["login"]) && $_POST["loginId"]!=''&& $_POST["loginPass"]!='') {	
		$loginId = $_POST['loginId'];
		$password = $_POST['loginPass'];
		if(isset($_COOKIE["loginPass"]) && $_COOKIE["loginPass"] == $password) {
			$password = $_COOKIE["loginPass"];
		} else {
			$password = md5($password);
		}	
		$sqlQuery = "SELECT * FROM ".$this->userTable." 
			WHERE email='".$loginId."' AND password='".$password."' AND status = 'active'";
		$resultSet = mysqli_query($this->dbConnect, $sqlQuery);
		$isValidLogin = mysqli_num_rows($resultSet);	
		if($isValidLogin){
			if(!empty($_POST["remember"]) && $_POST["remember"] != '') {
				setcookie ("loginId", $loginId, time()+ (10 * 365 * 24 * 60 * 60));  
				setcookie ("loginPass",	$password,	time()+ (10 * 365 * 24 * 60 * 60));
			} else {
				$_COOKIE['loginId' ]='';
				$_COOKIE['loginPass'] = '';
			}
			$userDetails = mysqli_fetch_assoc($resultSet);
			$_SESSION["userid"] = $userDetails['id'];
			$_SESSION["name"] = $userDetails['first_name']." ".$userDetails['last_name'];
			header("location: index.php"); 		
		} else {		
			$errorMessage = "Invalid login!";		 
		}
	} else if(!empty($_POST["loginId"])){
		$errorMessage = "Enter Both user and password!";	
	}
	return $errorMessage; 		
}

We will create object of user class and call user method login() to complete user login.

include('class/User.php');
$user = new User();
$message =  $user->login();

Step4: Implement User Password Reset

We will design user password reset form in reset_password.php file to user password. The user email is entered and submitted in forget_password.php and a password reset email will be send to user email address. When user click on password reset link, it will redirect user to reset password form and ask the user to enter new password to save.

<div class="col-md-6">                    
	<div class="panel panel-info" >
		<div class="panel-heading">
			<div class="panel-title">Reset Password</div>                        
		</div> 
		<div style="padding-top:30px" class="panel-body" >
			<?php if ($errorMessage != '') { ?>
				<div id="login-alert" class="alert alert-danger col-sm-12"><?php echo $errorMessage; ?></div>                            
			<?php } ?>
			<?php if(!empty($_GET['authtoken']) && $_GET['authtoken']) { ?>
				<form id="loginform" class="form-horizontal" role="form" method="POST" action="">                                    
					<div style="margin-bottom: 25px" class="input-group">
						<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
						<input type="password" class="form-control" id="password" name="password"  placeholder="New password..." required>			
					</div>
					<div style="margin-bottom: 25px" class="input-group">
						<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
						<input type="password" class="form-control" id="cpassword" name="cpassword"  placeholder="Confirm password..." required>              
					</div>	
					<div style="margin-top:10px" class="form-group">                               
						<div class="col-sm-12 controls">
							<input type="hidden" name="authtoken"  value="<?php echo $_GET['authtoken']; ?>" />
							<input type="submit" name="resetpassword" value="Save" class="btn btn-info">						  
						</div>						
					</div>					 
					</div>  	
				</form>
			<?php } else { ?>
				Invalid password reset request.
			<?php } ?>
		</div>                     
	</div>  
</div>

We will create a method resetPassword() in class User.php to send password reset email to user.

public function resetPassword(){
	$message = '';
	if($_POST['email'] == '') {
		$message = "Please enter username or email to proceed with password reset";			
	} else {
		$sqlQuery = "
			SELECT email 
			FROM ".$this->userTable." 
			WHERE email='".$_POST['email']."'";			
		$result = mysqli_query($this->dbConnect, $sqlQuery);
		$numRows = mysqli_num_rows($result);
		if($numRows) {			
			$user = mysqli_fetch_assoc($result);
			$authtoken = $this->getAuthtoken($user['email']);
			$link="<a href='https://www.webdamn.com/demo/user-management-system/reset_password.php?authtoken=".$authtoken."'>Reset Password</a>";				
			$toEmail = $user['email'];
			$subject = "Reset your password on examplesite.com";
			$msg = "Hi there, click on this ".$link." to reset your password.";
			$msg = wordwrap($msg,70);
			$headers = "From: [email protected]";
			if(mail($toEmail, $subject, $msg, $headers)) {
				$message =  "Password reset link send. Please check your mailbox to reset password.";
			}				
		} else {
			$message = "No account exist with entered email address.";
		}
	}
	return $message;
}

We will create a method savePassword() in class User.php to save new password.

public function savePassword(){
	$message = '';
	if($_POST['password'] != $_POST['cpassword']) {
		$message = "Password does not match the confirm password.";
	} else if($_POST['authtoken']) {
		$sqlQuery = "
			SELECT email, authtoken 
			FROM ".$this->userTable." 
			WHERE authtoken='".$_POST['authtoken']."'";			
		$result = mysqli_query($this->dbConnect, $sqlQuery);
		$numRows = mysqli_num_rows($result);
		if($numRows) {				
			$userDetails = mysqli_fetch_assoc($result);
			$authtoken = $this->getAuthtoken($userDetails['email']);
			if($authtoken == $_POST['authtoken']) {
				$sqlUpdate = "
					UPDATE ".$this->userTable." 
					SET password='".md5($_POST['password'])."'
					WHERE email='".$userDetails['email']."' AND authtoken='".$authtoken."'";	
				$isUpdated = mysqli_query($this->dbConnect, $sqlUpdate);	
				if($isUpdated) {
					$message = "Password saved successfully. Please <a href='login.php'>Login</a> to access account.";
				}
			} else {
				$message = "Invalid password change request.";
			}
		} else {
			$message = "Invalid password change request.";
		}	
	}
	return $message;
}

Step5: Manage User Profile

We will design user profile edit forum in edit_account.php to edit user details and save.

<div class="panel">
	<div class="panel-heading">
		<div class="panel-title">Edit Account Details</div>				
	</div>  
	<div class="panel-body col-md-7">
		<form class="form-horizontal" role="form" method="POST" action="">				
			<?php if($message != '') { ?>
				<div id="login-alert" class="alert alert-danger col-sm-12"><?php echo $message; ?></div>                            
			<?php } ?>	
			<div class="form-group">
				<label for="firstname" class="col-md-3 control-label">First Name*</label>
				<div class="col-md-9">
					<input type="text" class="form-control" name="firstname" placeholder="First Name" value="<?php echo $userDetail['first_name'];?>" >
				</div>
			</div>
			<div class="form-group">
				<label for="lastname" class="col-md-3 control-label">Last Name</label>
				<div class="col-md-9">
					<input type="text" class="form-control" name="lastname" placeholder="Last Name" value="<?php echo $userDetail['last_name'];?>" >
				</div>
			</div>					
			<div class="form-group">
				<label for="email" class="col-md-3 control-label">Email*</label>
				<div class="col-md-9">
					<input type="email" class="form-control" name="email" placeholder="Email Address" value="<?php echo $userDetail['email'];?>" required>
				</div>
			</div>	
			<div class="form-group">
				<label for="email" class="col-md-3 control-label">Mobile</label>
				<div class="col-md-9">
					<input type="text" class="form-control" name="mobile" placeholder="Mobile" value="<?php echo $userDetail['mobile'];?>" >
				</div>
			</div>	
			<div class="form-group">
				<label for="lastname" class="col-md-3 control-label">Designation</label>
				<div class="col-md-9">
					<input type="text" class="form-control" name="designation" placeholder="Designation" value="<?php echo $userDetail['designation'];?>" >
				</div>
			</div>	
			<div class="form-group">
				<label for="gender" class="col-md-3 control-label">Gender</label>
				<div class="col-md-9">
					<label class="radio-inline">
						<input type="radio" name="gender" value="male" <?php if($userDetail['gender'] == 'male') { echo 'checked'; } ?> required>Male
					</label>;
					<label class="radio-inline">
						<input type="radio" name="gender" value="female" <?php if($userDetail['gender'] == 'female') { echo 'checked'; } ?> required>Female
					</label>
				</div>
			</div>	
			<div class="form-group">
				<label for="password" class="col-md-3 control-label">Password</label>
				<div class="col-md-9">
					<input type="password" class="form-control" name="passwd" placeholder="Password" value="">
				</div>
			</div>	
			<div class="form-group">
				<label for="password" class="col-md-3 control-label">Confirm Password</label>
				<div class="col-md-9">
					<input type="password" class="form-control" name="cpasswd" placeholder="Confirm Password" value="">
				</div>
			</div>						
			<div class="form-group">						                                  
				<div class="col-md-offset-3 col-md-9">
					<button id="btn-signup" type="submit" name="update" value="update_account" class="btn btn-info"><i class="icon-hand-right"></i>   Save Changes</button>			
				</div>
			</div>							
		</form>
	 </div>
</div>
</div>

We will create a method editAccount() in class User.php edit and save user profile.

public function editAccount () {
	$message = '';
	$updatePassword = '';
	if(!empty($_POST["passwd"]) && $_POST["passwd"] != '' && $_POST["passwd"] != $_POST["cpasswd"]) {
		$message = "Confirm passwords do not match.";
	} else if(!empty($_POST["passwd"]) && $_POST["passwd"] != '' && $_POST["passwd"] == $_POST["cpasswd"]) {
		$updatePassword = ", password='".md5($_POST["passwd"])."' ";
	}		
	$updateQuery = "UPDATE ".$this->userTable." 
		SET first_name = '".$_POST["firstname"]."', last_name = '".$_POST["lastname"]."', email = '".$_POST["email"]."', mobile = '".$_POST["mobile"]."' , designation = '".$_POST["designation"]."', gender = '".$_POST["gender"]."' $updatePassword
		WHERE id ='".$_SESSION["userid"]."'";
	$isUpdated = mysqli_query($this->dbConnect, $updateQuery);	
	if($isUpdated) {
		$_SESSION["name"] = $_POST['firstname']." ".$_POST['lastname'];
		$message = "Account details saved.";
	}
	return $message;
}

Step6: Implement Admin Login

We will design form in index.php to handle admin login.

<div class="col-md-6">                    
	<div class="panel panel-info">
		<div class="panel-heading" style="background:#00796B;color:white;">
			<div class="panel-title">Admin In</div>                        
		</div> 
		<div style="padding-top:30px" class="panel-body" >
			<?php if ($errorMessage != '') { ?>
				<div id="login-alert" class="alert alert-danger col-sm-12"><?php echo $errorMessage; ?></div>                            
			<?php } ?>
			<form id="loginform" class="form-horizontal" role="form" method="POST" action="">                                    
				<div style="margin-bottom: 25px" class="input-group">
					<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
					<input type="text" class="form-control" id="email" name="email" placeholder="email" style="background:white;" required>                                        
				</div>                                
				<div style="margin-bottom: 25px" class="input-group">
					<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
					<input type="password" class="form-control" id="password" name="password"placeholder="password" required>
				</div>
				<div style="margin-top:10px" class="form-group">                               
					<div class="col-sm-12 controls">
					  <input type="submit" name="login" value="Login" class="btn btn-info">						  
					</div>						
				</div>	
				<div style="margin-top:10px" class="form-group">                               
					<div class="col-sm-12 controls">
					User: [email protected]<br>
					password:123				  
					</div>						
				</div>	
			</form>   
		</div>                     
	</div>  
</div>

We will create method adminLogin() in class User.php to complete admin login.

public function adminLogin(){		
	$errorMessage = '';
	if(!empty($_POST["login"]) && $_POST["email"]!=''&& $_POST["password"]!='') {	
		$email = $_POST['email'];
		$password = $_POST['password'];
		$sqlQuery = "SELECT * FROM ".$this->userTable." 
			WHERE email='".$email."' AND password='".md5($password)."' AND status = 'active' AND type = 'administrator'";
		$resultSet = mysqli_query($this->dbConnect, $sqlQuery);
		$isValidLogin = mysqli_num_rows($resultSet);	
		if($isValidLogin){
			$userDetails = mysqli_fetch_assoc($resultSet);
			$_SESSION["adminUserid"] = $userDetails['id'];
			$_SESSION["admin"] = $userDetails['first_name']." ".$userDetails['last_name'];
			header("location: dashboard.php"); 		
		} else {		
			$errorMessage = "Invalid login!";		 
		}
	} else if(!empty($_POST["login"])){
		$errorMessage = "Enter Both user and password!";	
	}
	return $errorMessage; 		
}

Step7: Admin Dishboard

We will design HTML in dashboard.php to display users stats in admin dashboard.

<div class="col-lg-10 col-md-10 col-sm-9 col-xs-12">   
	<a href="#"><strong><span class="fa fa-dashboard"></span> My Dashboard</strong></a>
	<hr>		
	<div class="row">
		<div class="col-md-12">
			<div class="row">
				<div class="col-md-3">
					<div class="panel panel-default">
						<div class="panel-body bk-primary text-light">
							<div class="stat-panel text-center">
								<div class="stat-panel-number h1 "><?php echo $user->totalUsers(""); ?></div>
								<div class="stat-panel-title text-uppercase">Total Users</div>
							</div>
						</div>											
					</div>
				</div>
				<div class="col-md-3">
					<div class="panel panel-default">
						<div class="panel-body bk-success text-light">
							<div class="stat-panel text-center">
								<div class="stat-panel-number h1 "><?php echo $user->totalUsers('active'); ?></div>
								<div class="stat-panel-title text-uppercase">Total Active Users</div>
							</div>
						</div>											
					</div>
				</div>		
				<div class="col-md-3">
					<div class="panel panel-default">
						<div class="panel-body bk-success text-light">
							<div class="stat-panel text-center">
								<div class="stat-panel-number h1 "><?php echo $user->totalUsers('pending'); ?></div>
								<div class="stat-panel-title text-uppercase">Total Pending Users</div>
							</div>
						</div>											
					</div>
				</div>													
				<div class="col-md-3">
					<div class="panel panel-default">
						<div class="panel-body bk-danger text-light">
							<div class="stat-panel text-center">												
								<div class="stat-panel-number h1 "><?php echo $user->totalUsers('deleted'); ?></div>
								<div class="stat-panel-title text-uppercase">Total Deleted Users</div>
							</div>
						</div>											
					</div>
				</div>							
			</div>
		</div>
	</div>		
</div>

Step8: Manage User in Admin Panel

We will design HTML in user_list.php to display users list in Datatable. We will design modal to add and edit user. Als handle muser delete functionality.

<div class="col-lg-10 col-md-10 col-sm-9 col-xs-12">   
	<a href="#"><strong><span class="fa fa-dashboard"></span> User List</strong></a>
	<hr>		
	<div class="panel-heading">
		<div class="row">
			<div class="col-md-10">
				<h3 class="panel-title"></h3>
			</div>
			<div class="col-md-2" align="right">
				<button type="button" name="add" id="addUser" class="btn btn-success btn-xs">Add</button>
			</div>
		</div>
	</div>
	<table id="userList" class="table table-bordered table-striped">
		<thead>
			<tr>
				<th>ID</th>
				<th>Name</th>
				<th>Gender</th>
				<th>Email</th>
				<th>Mobile</th>
				<th>Role</th>					
				<th></th>
				<th></th>
				<th></th>
			</tr>
		</thead>
	</table>
</div>
<div id="userModal" class="modal fade">
	<div class="modal-dialog">
		<form method="post" id="userForm">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">×</button>
					<h4 class="modal-title"><i class="fa fa-plus"></i> Edit User</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label for="firstname" class="control-label">First Name*</label>
						<input type="text" class="form-control" id="firstname" name="firstname" placeholder="First Name" required>							
					</div>
					<div class="form-group">
						<label for="lastname" class="control-label">Last Name</label>							
						<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last Name">							
					</div>	   	
					<div class="form-group">
						<label for="lastname" class="control-label">Email*</label>							
						<input type="text" class="form-control"  id="email" name="email" placeholder="Email" required>							
					</div>	 
					<div class="form-group" id="passwordSection">
						<label for="lastname" class="control-label">Password*</label>							
						<input type="password" class="form-control"  id="password" name="password" placeholder="Password" required>							
					</div>
					<div class="form-group">
						<label for="gender" class="control-label">Gender</label>							
						<label class="radio-inline">
							<input type="radio" name="gender" id="male" value="male" required>Male
						</label>;
						<label class="radio-inline">
							<input type="radio" name="gender" id="female" value="female" required>Female
						</label>							
					</div>	
					<div class="form-group">
						<label for="lastname" class="control-label">Mobile</label>							
						<input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile">							
					</div>	 
					<div class="form-group">
						<label for="lastname" class="control-label">Designation</label>							
						<input type="text" class="form-control" id="designation" name="designation" placeholder="designation">							
					</div>	
					<div class="form-group">
						<label for="gender" class="control-label">Status</label>							
						<label class="radio-inline">
							<input type="radio" name="status" id="active" value="active" required>Active
						</label>;
						<label class="radio-inline">
							<input type="radio" name="status" id="pending" value="pending" required>Pending
						</label>							
					</div>
					<div class="form-group">
						<label for="user_type" class="control-label">User Type</label>							
						<label class="radio-inline">
							<input type="radio" name="user_type" id="general" value="general" required>General
						</label>;
						<label class="radio-inline">
							<input type="radio" name="user_type" id="administrator" value="administrator" required>Administrator
						</label>							
					</div>	
				</div>
				<div class="modal-footer">
					<input type="hidden" name="userid" id="userid" />
					<input type="hidden" name="action" id="action" value="updateUser" />
					<input type="submit" name="save" id="save" class="btn btn-info" value="Save" />
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				</div>
			</div>
		</form>
	</div>
</div>

We will create JavaScript file users.js to handle Datatable data load, handle add, edit and delete records.

$(document).ready(function(){
	var usersData = $('#userList').DataTable({
		"lengthChange": false,
		"processing":true,
		"serverSide":true,
		"order":[],
		"ajax":{
			url:"action.php",
			type:"POST",
			data:{action:'listUser'},
			dataType:"json"
		},
		"columnDefs":[
			{
				"targets":[0, 7, 8],
				"orderable":false,
			},
		],
		"pageLength": 10
	});		
	$(document).on('click', '.delete', function(){
		var userid = $(this).attr("id");		
		var action = "userDelete";
		if(confirm("Are you sure you want to delete this user?")) {
			$.ajax({
				url:"action.php",
				method:"POST",
				data:{userid:userid, action:action},
				success:function(data) {					
					usersData.ajax.reload();
				}
			})
		} else {
			return false;
		}
	});	
	$('#addUser').click(function(){
		$('#userModal').modal('show');
		$('#userForm')[0].reset();
		$('#passwordSection').show();
		$('.modal-title').html("<i class='fa fa-plus'></i> Add User");
		$('#action').val('addUser');
		$('#save').val('Add User');
	});	
	$(document).on('click', '.update', function(){
		var userid = $(this).attr("id");
		var action = 'getUser';
		$.ajax({
			url:'action.php',
			method:"POST",
			data:{userid:userid, action:action},
			dataType:"json",
			success:function(data){
				$('#userModal').modal('show');
				$('#userid').val(data.id);
				$('#firstname').val(data.first_name);
				$('#lastname').val(data.last_name);
				$('#email').val(data.email);
				$('#password').val(data.password);
				$('#passwordSection').hide();
				if(data.gender == 'male') {
					$('#male').prop("checked", true);
				} else if(data.gender == 'female') {
					$('#female').prop("checked", true);
				}
				if(data.status == 'active') {
					$('#active').prop("checked", true);
				} else if(data.gender == 'pending') {
					$('#pending').prop("checked", true);
				}
				if(data.type == 'general') {
					$('#general').prop("checked", true);
				} else if(data.type == 'administrator') {
					$('#administrator').prop("checked", true);
				}
				$('#mobile').val(data.mobile);
				$('#designation').val(data.designation);	
				$('.modal-title').html("<i class='fa fa-plus'></i> Edit User");
				$('#action').val('updateUser');
				$('#save').val('Save');
			}
		})
	});	
	$(document).on('submit','#userForm', function(event){
		event.preventDefault();
		$('#save').attr('disabled','disabled');
		var formData = $(this).serialize();
		$.ajax({
			url:"action.php",
			method:"POST",
			data:formData,
			success:function(data){				
				$('#userForm')[0].reset();
				$('#userModal').modal('hide');				
				$('#save').attr('disabled', false);
				usersData.ajax.reload();
			}
		})
	});	
});

We will create method getUserList() in class User.php to get user list and return as JSON data to display in Datatables.

public function getUserList(){		
	$sqlQuery = "SELECT * FROM ".$this->userTable." WHERE id !='".$_SESSION['adminUserid']."' ";
	if(!empty($_POST["search"]["value"])){
		$sqlQuery .= '(id LIKE "%'.$_POST["search"]["value"].'%" ';
		$sqlQuery .= ' OR first_name LIKE "%'.$_POST["search"]["value"].'%" ';
		$sqlQuery .= ' OR last_name LIKE "%'.$_POST["search"]["value"].'%" ';
		$sqlQuery .= ' OR designation LIKE "%'.$_POST["search"]["value"].'%" ';
		$sqlQuery .= ' OR status LIKE "%'.$_POST["search"]["value"].'%" ';
		$sqlQuery .= ' OR mobile LIKE "%'.$_POST["search"]["value"].'%") ';			
	}
	if(!empty($_POST["order"])){
		$sqlQuery .= 'ORDER BY '.$_POST['order']['0']['column'].' '.$_POST['order']['0']['dir'].' ';
	} else {
		$sqlQuery .= 'ORDER BY id DESC ';
	}
	if($_POST["length"] != -1){
		$sqlQuery .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
	}	
	$result = mysqli_query($this->dbConnect, $sqlQuery);

	$sqlQuery1 = "SELECT * FROM ".$this->userTable." WHERE id !='".$_SESSION['adminUserid']."' ";
	$result1 = mysqli_query($this->dbConnect, $sqlQuery1);
	$numRows = mysqli_num_rows($result1);

	$userData = array();	
	while( $users = mysqli_fetch_assoc($result) ) {		
		$userRows = array();
		$status = '';
		if($users['status'] == 'active')	{
			$status = '<span class="label label-success">Active</span>';
		} else if($users['status'] == 'pending') {
			$status = '<span class="label label-warning">Inactive</span>';
		} else if($users['status'] == 'deleted') {
			$status = '<span class="label label-danger">Deleted</span>';
		}
		$userRows[] = $users['id'];
		$userRows[] = ucfirst($users['first_name']." ".$users['last_name']);
		$userRows[] = $users['gender'];			
		$userRows[] = $users['email'];	
		$userRows[] = $users['mobile'];	
		$userRows[] = $users['type'];
		$userRows[] = $status;						
		$userRows[] = '<button type="button" name="update" id="'.$users["id"].'" class="btn btn-warning btn-xs update">Update</button>';
		$userRows[] = '<button type="button" name="delete" id="'.$users["id"].'" class="btn btn-danger btn-xs delete" >Delete</button>';
		$userData[] = $userRows;
	}
	$output = array(
		"draw"				=>	intval($_POST["draw"]),
		"recordsTotal"  	=>  $numRows,
		"recordsFiltered" 	=> 	$numRows,
		"data"    			=> 	$userData
	);
	echo json_encode($output);

Also Read: What are the universal shift registers and their applications?

How to create admin login page using PHP?

Step1: Create MySQL Database Table

Step2: Implement User Registration

Step3: Implement User Login

Step4: Implement User Password Reset

Step5: Manage User Profile

Step6: Implement Admin Login

Step7: Admin Dishboard

Step8: Manage User in Admin Panel

Leave a Reply Cancel reply