This is a lost password script tutorial. I write it in AJAX, JQuery, Bootstrap, PHP and MySQL. People frequently lose their passwords. Password reset scripts are almost mandatory, with people expecting software to do everything for them. Writing scripts that let people reset their passwords do pose some risks. Are they using a secure email address? Did they make the password hard to guess? Along with that comes many more pains and advances in letting people reset their passwords with scripts. Password encryption is key to securing a hard to guess password. This is an advanced programming made easy. Enjoy!
AJAX JQuery Functions Used For Lost Password Script
- ready() function to check the readiness of the DOM {Document Object Model}
- click() function to check and see if we have clicked a button.
- val() function to get the values of input fields.
- ajax() function to make an Ajax call.
- html() to call information from a processor script.
Bootstrap Classes Used For Lost Password Script
- container.
- form-group.
- form-control.
- btn btn-default
- alert alert-success
- alert alert-warning
PHP Functions Used For Lost Password Script
- mysqli_real_escape_string() to sanitize strings
- filter_var() to sanitize strings
- FILTER_SANITIZE_EMAIL to sanitize emails
- FILTER_SANITIZE_STRING to sanitize strings
- fetch_assoc() to fetch database results.
- num_rows To get the number of rows from a result set
- mail() to mail forms
- close() to close a connection to a database.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lost Password Script AJAX jQuery Bootstrap PHP and MySql</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="form-group">
<label for="email">Email:</label>
<input id="email" class="form-control" type="email" placeholder="Your Email">
</div>
<button type="submit" id="submit" class="btn btn-default">Reset Password</button>
<div id="display"></div>
<script>
$(document).ready(function(){
$("#submit").click(function(){
var em = $("#email").val();
var dataString = 'em1='+ em;
$.ajax({
type: "POST",
url: "processor.php",
data: dataString,
cache: false,
success: function(result){
$("#display").html(result);
}
});
return false;
});
});
</script>
</div>
</body>
</html>
Now create a file and call it processor.php and enter the following code into it.
<?php
include_once('config.php');
$email=mysqli_real_escape_string($con, $_POST['em1']);
$emailclean = filter_var($email, FILTER_SANITIZE_EMAIL, FILTER_FLAG_STRIP_HIGH);
//query the database
$result = $con->query("SELECT * FROM users WHERE email='$emailclean' LIMIT 1") ;
$total=$result->num_rows;
if($total<1){
echo '<div class="alert alert-warning">Are you sure you entered the correct email?</div>';
die();
}
while ($row = $result->fetch_assoc()) {
$emaill=$row['email'];
$password=$row['password'];
}
//email the form to the person who lost their password
$subject='PASSWORD RESET LINK';
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
$headers .= 'From: <[email protected]>' . "\r\n";
$message='<table width="100%" border="1">
<tr><td colspan="2" align="center">RESET YOUR PASSWORD BY CLICKING LINK BELOW</td></tr>
<tr><td colspan="2" align="center">If you did not make this request then ignore this email.</td></tr><tr><td colspan="2" align="center"><a href="http://localhost/ajax/lostpassword.php?p='.$password.'">Reset Password</a></td></tr>
<tr><td colspan="2" align="center"><img src="https://a1websitepro.com/uploads/2014/09/logo200.png" width="200px"/></td></tr>
</table>';
//mail($emaill,$subject,$message,$headers);
//send message back to AJAX
echo '<div class="alert alert-success">An email has been sent to '.$email.' with a password reset link.</div>';
$con->close();
?>
Now we need to create a lostpassword.php script. When someone clicks on the link from their email, they will be guided back to this script to reset their password.
<!DOCTYPE html>
<html lang="en">
<head>
<?php include_once('config.php'); $oldp=$_GET["p"]?>
<title>Lost Password Script AJAX jQuery Bootstrap PHP and MySql</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<?php
$result = $con->query("SELECT * FROM users WHERE password='$oldp' LIMIT 1") ;
$total=$result->num_rows;
if($total<1){
echo '<div class="alert alert-warning">Is it not a wonderful day? </div>';
}else{
while ($row = $result->fetch_assoc()) {$email=$row['email'];}
echo '<div class="form-group">
<label for="password">New Password:</label>
<input id="password" class="form-control" type="password" placeholder="New Password">
</div>
<input type="hidden" id="email" value="'.$email.'" />
<button type="submit" id="submit" class="btn btn-default">Change Password</button>
<div id="display"></div>';
echo '<script>
$(document).ready(function(){
$("#submit").click(function(){
var pw = $("#password").val();
var em = $("#email").val();
var dataString = "pw1="+ pw + "&em1="+ em;
$.ajax({
type: "POST",
url: "lostpasswordprocessor.php",
data: dataString,
cache: false,
success: function(result){
$("#display").html(result);
}
});
return false;
});
});
</script>';
}
?>
</div>
</body>
</html>
We will need a lostpasswordprocessor.php script. Copy the following code and put it in that file.
<?php
include_once('config.php');
$pw=mysqli_real_escape_string($con, $_POST['pw1']);
$pwclean = filter_var($pw, FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
$hash=password_hash($pwclean, PASSWORD_BCRYPT);
$em=mysqli_real_escape_string($con, $_POST['em1']);
$emclean = filter_var($em, FILTER_SANITIZE_EMAIL, FILTER_FLAG_STRIP_HIGH);
//update the password in the database
mysqli_query($con,"UPDATE users SET password='$hash' WHERE email='$emclean' ");
echo '<div class="alert alert-success">Your password has changed <a href="#">Login Here</a></div>';
$con->close();
?>
You will need a database. Here is one that you can insert into your phpmyadmin to test the script. The password is just called pass. If you would prefer to do it manually here is the script.
CREATE TABLE `users` ( `id` int(6) UNSIGNED NOT NULL, `username` varchar(250) NOT NULL, `email` varchar(250) NOT NULL, `password` varchar(250) NOT NULL, `reg_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `users` -- INSERT INTO `users` (`id`, `username`, `email`, `password`, `reg_date`) VALUES (1, 'maximus', '[email protected]', 'e22853fb83f8d1e91f2b19381f3a5cdd7f1f4298', '2017-06-11 15:25:17');You will also need a config.php file to connect you to your database. Here is a config file you can copy and paste. just change the connection details to match your mysql.
<?php
$con = mysqli_connect("localhost","dbusername","dbpass","dbname");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}else{
echo "";
}
?>