Build Password Reset System with PHP & MySQL

How to Create Forgot System Password with PHP & MySQL

by

Forgot System Password is a web application feature to allow users to Forgot their password if they forget their password. To save your new password with password Forgot username email id is allowed with username or email address to send password forgot link.

So if you are thinking about implementing Forgot System Password with PHP in your application, then it is discussed here at the right place. This tutorial will learn how to apply Forgot System Password or forget the password functionality using PHP and MySQL. You can also develop complete user management systems with PHP and MySQL to manage users.

Create Forgot System Password

We will cover this tutorial step by step with the live demo. You will also be able to download the full source code of the live demo.

How to Create Forgot System Password

So now we will start to implementing Forgot System Password with PHP and MySQL. Before we begin, take a look on files structure for this example.

  1. config.php
  2. index.php
  3. forget_password.php
  4. Forgot_password.php
  5. user.js
  6. action.php
  7. User.php

How to Create MySQL Database Table

In this tutorial, we will try to create live example for password forget functionality. So we will create MySQL database table members for user login details.

CREATE TABLE `members` (
  `id` int(11) NOT NULL,
  `username` varchar(250) NOT NULL,
  `email` varchar(250) NOT NULL,
  `password` varchar(250) NOT NULL,
  `authtoken` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

We will insert user records into members table for Forgot System Password functionality.

INSERT INTO `members` (`id`, `username`, `email`, `password`, `authtoken`) VALUES
(1, 'test', 'test@webdamn.com', '827ccb0eea8a706c4c34a16891f84e7b', '91e8cc3c6bc400c70fd17c3836e01287');

How to Create User Login Form

First we will create user login form in index.php with forget password link.

<div class="container login-container">
	<div class="row">                
		<div class="col-md-6 login-form-2">
			<h3>User Login</h3>
			<form id="loginForm" method="POST">
				<div id="errorMessge" class="alert alert-danger hidden">                            
				</div>
				<div class="form-group">
					<input type="text" name="userEmail" class="form-control" placeholder="Email..." required />
				</div>
				<div class="form-group">
					<input type="password" name="userPassword"  class="form-control" placeholder="Password..." required />
				</div>
				<div class="form-group">
					<input type="hidden" name="action"  value="login" />
					<input type="submit" class="btnSubmit" value="Login" />
				</div>
				<div class="form-group">
					<a href="https://webdamn.com/forget_password.php" class="ForgetPwd">Forget Password?</a>
				</div>
			</form>
		</div>
	</div>
</div>

How to Implement User Login

We will implement user login functionality by handling user login form submit in user.js. We will make ajax request to action.php to handle user login and get JSON response.

$('#loginForm').on('submit', function(e)
	$.ajax(
		type: 'POST',			
		url : "action.php",						
		data: $(this).serialize(),
		dataType: "json",
		success: function (response) 
			if(response.success == 1) 	
				location.href = "https://webdamn.com/index.php";
			 else 
				$('#errorMessge').text(response.message);
				$('#errorMessge').removeClass('hidden');
							
		
	);
	return false;
);

In action.php, we will call method $user->login() to implement user login functionality.

<?php
include("inc/User.php"); 
$user = new User();
if(!empty($_POST['action']) && $_POST['action'] == 'login') 
	$userDetails = $user->login();
	if($userDetails)		
		$message = "Logged in successfully";
		$status = 1;
	 else 
		$message = "Invalid Email/Password";
		$status = 0;
	
	$jsonResponse = array (
		"message"	=> $message,
		"success" => $status	
	);
	echo json_encode($jsonResponse);	

?>

In class User.php, we will define method login().

public function login()
	$sqlQuery = "
		SELECT * 
		FROM ".$this->memberTable." 
		WHERE email='".$_POST['userEmail']."' AND password='".md5($_POST['userPassword'])."'";			
	return  $this->getData($sqlQuery);

How to Create Forget Password Form

If user forget password, then user can Forgot their password by clicking Forget Password link on login form. The forget password form created in forget_password.php to Forgot form using username or email address.

<div class="container login-container">
	<div class="row">                
		<div class="col-md-6 login-form-2">
			<h3>Forget Password Form</h3>						
			<form id="forgetForm" method="POST">
				<div id="errorMessge" class="alert hidden">                            
				</div>
				<div id="inputSection">
					<div class="form-group">
						<input type="text" name="userName" class="form-control" placeholder="Username..." />
					</div>
					<div class="form-group">
						OR
					</div>						
					<div class="form-group">
						<input type="email" name="userEmail" class="form-control" placeholder="Email address..." />
					</div>
					<div class="form-group">
						<input type="hidden" name="action"  value="forgetPassword" />
						<input type="submit" class="btnSubmit" value="Forgot Password" />
					</div> 
				</div>						
			</form>
		</div>
	</div>
</div>

How to Implement Password Forgot Functionality

Now we will implement Forgot System Password functionality by making ajax request to action.php.

$('#forgetForm').on('submit', function(e)		
	$.ajax(
		type: 'POST',			
		url : "action.php",						
		data: $(this).serialize(),
		dataType: "json",
		success: function (response) 				
			if(response.success == 2) 	
				$('#errorMessge').text(response.message);
				$('#errorMessge').removeClass('hidden alert-success').addClass('alert-danger');
			 else if(response.success == 1) 
				$('#inputSection').addClass('hidden');
				$('#errorMessge').text(response.message);
				$('#errorMessge').removeClass('hidden alert-danger').addClass('alert-success');					
			 else if(response.success == 0) 
				$('#errorMessge').text(response.message);
				$('#errorMessge').removeClass('hidden alert-success').addClass('alert-danger');
			
		
	);
	return false;
);

In action.php, we will call method $user->forgotPassword() from User.php class and return JSON response.

if(!empty($_POST['action']) && $_POST['action'] == 'forgetPassword') 	
	if($_POST['userEmail'] == '' && $_POST['userName'] == '') 
		$message = "Please enter username or email to proceed with password forgot";
		$status = 2;
	 else 
		$userDetails = $user->forgotPassword();
		if($userDetails)		
			$message = "Forgot System Password link send. Please check your mailbox to Forgot password.";
			$status = 1;
		 else 
			$message = "No account exist with entered username and email address.";
			$status = 0;
		
		
	$jsonResponse = array (
		"message"	=> $message,
		"success" => $status	
	);
	echo json_encode($jsonResponse);

In class User.php, we can define method ForgotPassword(). In this method, we will check for user account by username or email. If user account exist then we will create Forgot System Password link with authtoken and send password Forgot email to user email address.

public function forgotPassword()
	$sqlQuery = "
		SELECT email 
		FROM ".$this->memberTable." 
		WHERE email='".$_POST['userEmail']."' OR username='".$_POST['userName']."'";			
	$result = mysqli_query($this->dbConnect, $sqlQuery);
	$numRows = mysqli_num_rows($result);
	if($numRows) 
		while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) 				
			$link="forgot Password";				
			$to = $row['email'];
			$subject = "forgot your password on examplesite.com";
			$msg = "Hi there, click on this ".$link." to forgot your password.";
			$msg = wordwrap($msg,70);
			$headers = "From: info@webdamn.com";
			mail($to, $subject, $msg, $headers);
			return 1;
		
	 else 
		return 0;

How to Create Password Forgot Form

When user click password forgot link, then the user password forgot form displayed to save new password. So we will create new password save form in forgot_password.php.

<div class="container login-container">
	<div class="row">                
		<div class="col-md-6 login-form-2">
			<h3>Forgot System Password Form</h3>
			<?php if(!empty($_GET['authtoken']) && $_GET['authtoken'])  ?>
			<form id="savePasswordForm" method="POST">
				<div id="errorMessge" class="alert hidden">                            
				</div>
				<div class="form-group">
					<input type="password" name="newPassword" class="form-control" placeholder="New Password..." required />
				</div>
				<div class="form-group">
					<input type="password" name="confirmNewPassword" class="form-control" placeholder="Confirm password..." required />
				</div>
				<div class="form-group">
					<input type="hidden" name="action"  value="savePassword" />
					<input type="hidden" name="authtoken"  value="<?php echo $_GET['authtoken']; ?>" />
					<input type="submit" class="btnSubmit" value="Save Password" />
				</div>                       
			</form>
			<?php  ?>
		</div>
	</div>
</div>

How to Save New Password

Now we will implement functionality to save new password. We will make ajax request to action.php to save password.

$('#savePasswordForm').on('submit', function(e)		
	$.ajax(
		type: 'POST',			
		url : "action.php",						
		data: $(this).serialize(),
		dataType: "json",
		success: function (response) 				
			if(response.success == 1) 					
				$('#errorMessge').text(response.message);
				$('#errorMessge').removeClass('hidden alert-danger').addClass('alert-success');		
				$('#savePasswordForm')[0].forgot();
			 else if(response.success == 0) 
				$('#errorMessge').text(response.message);
				$('#errorMessge').removeClass('hidden alert-success').addClass('alert-danger');
			
		
	);
	return false;
);

In action.php, we will call method $user->savePassword() from class User.php to save new password.

if(!empty($_POST['action']) && $_POST['action'] == 'savePassword' && $_POST['authtoken']) 	
	if($_POST['newPassword'] != $_POST['confirmNewPassword']) 
		$message = "Password does not match the confirm password field";
		$status = 0;
	 else 
		$isPasswordSaved = $user->savePassword();
		if($isPasswordSaved) 
			$message = "Password saved successfully.";
			$status = 1;
		 else 
			$message = "Invalid password change request.";
			$status = 0;
		
	
	$jsonResponse = array (
		"message"	=> $message,
		"success" => $status	
	);
	echo json_encode($jsonResponse);

In User.php class, we can define method savePassword() to save new password.

public function savePassword()
	$sqlQuery = "
		SELECT email, authtoken 
		FROM ".$this->memberTable." 
		WHERE authtoken='".$_POST['authtoken']."'";			
	$result = mysqli_query($this->dbConnect, $sqlQuery);
	$numRows = mysqli_num_rows($result);
	if($numRows) 
		while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) 
			$sqlQuery = "
				UPDATE ".$this->memberTable." 
				SET password='".md5($_POST['newPassword'])."'
				WHERE email='".$row['email']."' AND authtoken='".$row['authtoken']."'";	
			mysqli_query($this->dbConnect, $sqlQuery);	
		
		return 1;
	 else 
		return 0;

Download Complete Source Code

Here you can download the complete source code in zip format You can view the download the script from the Download link below.
Download

Pramod Kumar Yadav is from Janakpur Dham, Nepal. He was born on December 23, 1994, and has one elder brother and two elder sisters. He completed his education at various schools and colleges in Nepal and completed a degree in Computer Science Engineering from MITS in Andhra Pradesh, India. Pramod has worked as the owner of RC Educational Foundation Pvt Ltd, a teacher, and an Educational Consultant, and is currently working as an Engineer and Digital Marketer.

...



Best PYthon Course

Get More trending Courses

Leave a Comment