Hope you have already a php project with database configuration. In this article, i am only going to show how to implement forget password in PHP.
Create a file name candidate_forget.php file and paste the below code.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Change Password</title>
<!-- base:css -->
<link rel="stylesheet" href="../vendors/typicons/typicons.css">
<link rel="stylesheet" href="../vendors/css/vendor.bundle.base.css">
<link rel="stylesheet" href="../css/abhicss/homepage.css">
<!-- endinject -->
<!-- plugin css for this page -->
<!-- End plugin css for this page -->
<!-- plugin css for this page -->
<link rel="stylesheet" href="../vendors/select2-bootstrap-theme/select2-bootstrap.min.css">
<!-- End plugin css for this page -->
<!-- End plugin css for this page -->
<!-- inject:css -->
<link rel="stylesheet" href="../css/vertical-layout-light/style.css">
<!-- endinject -->
<link rel="shortcut icon" href="../images/favicon.png" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body >
<style>
/* candidate homepage baground transparant csss starat */
#section01, #section04 {
background: url(../images/carousel/banner_8.jpg) no-repeat center center;
padding: 0;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
color:#fff;
}
.ovrlay {
background:rgba(135, 214, 245, 0.8);
}
/* candidate homepage baground transparant csss starat */
#section02 {
background: url(../images/carousel/banner_.jpg) center center / cover no-repeat;
max-height: 700px;
height: 100vh;
}
#section03 {
background: url(.//images/carousel/banner_5.jpg) center center / cover no-repeat;
max-height: 700px;
height: 100vh;
}
</style>
<!-- main contener strat -->
<div class="row ">
<div class="col-12" id="section01" class="demo" style="max-height: 700px; background-color: white; height: 100vh;">
<!--navbar start partial -->
<nav class="navbar navbar-expand-sm navbar-light black" >
<div class="container btn-4 pink">
<a class="navbar-brand brand-logo-mini effect " href="/">
<img src="../images/AbhiLogo.svg" alt="logo"/> Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Abaut us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" data-toggle="modal" data-target="#contactus">Contact Us </a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link " href="" data-toggle="modal" data-target="#loginModalHR">Employer zone</a>
</li>
</ul>
</div>
</div>
</nav>
<!--navbar end partial -->
<div class="row ">
<div class="col-sm-3 col-12 ">
<div class="box mt-sm-2">
<form class="password_form">
<div class="mb-3">
<input type="email" id="useremail" class="form-control" name="useremail" placeholder="Enter Your Email"
required="">
</div>
<div class="mb-3 d-grid">
<button type="submit" class="btn btn-primary" id="reset_pass">
Reset Password
</button>
</div>
</form>
</div>
</div>
<div class="col-sm-8 col-12 meet_prof_div">
<h2 class="meet_prof">Meet here Professionals to Professionals</h2>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
<!-- partial:partials/_footer.html -->
<footer class="footer pt-4 " >
<div class="card bg-dark">
<div class="card-body">
<div class="d-sm-flex justify-content-center justify-content-sm-between">
<span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © 2020 <a href="https://www.bootstrapdash.com/" class="text-muted" target="_blank">Bootstrapdash</a>. All rights reserved.</span>
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center text-muted">Free <a href="https://www.bootstrapdash.com/" class="text-muted" target="_blank">Bootstrap dashboard</a> templates from Bootstrapdash.com</span>
</div>
</div>
</div>
</footer>
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- base:js -->
<script src="../vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- inject:js -->
<script src="../js/off-canvas.js"></script>
<script src="../js/hoverable-collapse.js"></script>
<script src="../js/template.js"></script>
<script src="../js/settings.js"></script>
<script src="../js/todolist.js"></script>
<!-- endinject -->
<!-- plugin js for this page -->
<script src="../vendors/typeahead.js/typeahead.bundle.min.js"></script>
<!-- End plugin js for this page -->
<!-- Custom js for this page-->
<script src="../js/file-upload.js"></script>
<script src="../js/abhijs/hompagejs.js"></script> <!-- Custom js for home page-->
<script src="../js/typeahead.js"></script>
<?php include('script.js.php');?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<!-- End custom js for this page-->
</body>
</html>
Create a file script.js.php file and include it before the body ends.
<?php include('script.js.php');?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
You must include JQuery also.
Then go to the script.js.php file and paste the below code.
$("#reset_pass").click(function(e){
e.preventDefault();
// alert("ok");
var email =$("#useremail").val();
var atpos = email.indexOf("@");
var dotpos = email.lastIndexOf(".");
if(email == ""){
swal('Error','Please Enter Email Address.','error'); //this line is not working
}
else if(atpos < 1 || dotpos < atpos +2 || dotpos +2 >=email.length){
swal('Error','Enter Valid Email Address.','error');
}
else{
$.ajax({
url:"/ajax/send_email.php",
method:"post",
data:{email:email},
dataType:'json',
success: function(result){
if(result == 1){
swal('Success','Request has been send please check your email!','success');
}else if(result == 3){
swal('Error','Email Does not Exist in a Database.','error');
}else{
swal('Error','Mail not Fired!!.','error');
}
}
});
}
});
Then create a folder ajax and under the ajax folder create a file send_email.php., and paste the below code.
<?php
include('../include/database.php');
require "../PHPMailer/PHPMailerAutoload.php";
if(isset($_POST['email'])){
global $conn;
$email = $_POST['email'];
$result = $conn->query('SELECT * FROM `tbl_user` WHERE `candidate_email`="'.$email.'"');
$data= mysqli_fetch_array($result);
$DbEmail= $data['candidate_email'];
$token = $data['user_id'];
if($email == $data['candidate_email']){
//echo '3';
$mail = new PHPMailer();
// $mail->SMTPDebug =3;
$mail->IsSMTP();
$mail->SMTPAuth = true;
$mail->SMTPSecure = 'tls';
$mail->Host = 'smtp.gmail.com';
$mail->Port = 587;
$mail->Username = 'youremail@gmail.com';
$mail->Password = 'msqsdasdadamqhsalikbebkf'; //Application generated password by the google
$mail->IsHTML(true);
$mail->setFrom("youremail@gmail.com",$email);
$mail->addAddress($email);
$mail->Subject ="Reset Your Password ActiveNaukri";
$email_template= "<h2>You have register with ActiveNaukri</h2> <br/>
<a href='https://yourdomain.com/change_password.php?token=$token'>Click me </a>
";
$mail->Body = $email_template;
// $mail->send();
if(!$mail->send()){
echo '0';
}else{
echo '1';
}
}else{
echo '3';
}
}
?>
Note: Download PHP mailer library and upload it in a project root directory.
Now create a file change_password.php and paste the below code.
<?php
if(isset($_GET['token'])){
$token = htmlentities($_GET['token']);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Update Password</title>
<!-- base:css -->
<link rel="stylesheet" href="../vendors/typicons/typicons.css">
<link rel="stylesheet" href="../vendors/css/vendor.bundle.base.css">
<link rel="stylesheet" href="../css/abhicss/homepage.css">
<!-- endinject -->
<!-- plugin css for this page -->
<!-- End plugin css for this page -->
<!-- plugin css for this page -->
<link rel="stylesheet" href="../vendors/select2-bootstrap-theme/select2-bootstrap.min.css">
<!-- End plugin css for this page -->
<!-- End plugin css for this page -->
<!-- inject:css -->
<link rel="stylesheet" href="../css/vertical-layout-light/style.css">
<!-- endinject -->
<link rel="shortcut icon" href="../images/favicon.png" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body >
<style>
/* candidate homepage baground transparant csss starat */
#section01, #section04 {
background: url(../images/carousel/banner_8.jpg) no-repeat center center;
padding: 0;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
color:#fff;
}
.ovrlay {
background:rgba(135, 214, 245, 0.8);
}
/* candidate homepage baground transparant csss starat */
#section02 {
background: url(../images/carousel/banner_.jpg) center center / cover no-repeat;
max-height: 700px;
height: 100vh;
}
#section03 {
background: url(.//images/carousel/banner_5.jpg) center center / cover no-repeat;
max-height: 700px;
height: 100vh;
}
</style>
<!-- main contener strat -->
<div class="row ">
<div class="col-12" id="section01" class="demo" style="max-height: 700px; background-color: white; height: 100vh;">
<!--navbar start partial -->
<nav class="navbar navbar-expand-sm navbar-light black" >
<div class="container btn-4 pink">
<a class="navbar-brand brand-logo-mini effect " href="/">
<img src="../images/AbhiLogo.svg" alt="logo"/> Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Abaut us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" data-toggle="modal" data-target="#contactus">Contact Us </a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link " href="" data-toggle="modal" data-target="#loginModalHR">Employer zone</a>
</li>
</ul>
</div>
</div>
</nav>
<!--navbar end partial -->
<div class="row ">
<div class="col-sm-3 col-12 ">
<div class="box mt-sm-2">
<form class="password_form">
<input type="hidden" value="<?= $token; ?>" id="token" name="token" disabled>
<div class="mb-3">
<input type="password" id="pwd" class="form-control" placeholder="Enter Your New Password"
required="">
</div>
<div class="mb-3">
<input type="password" id="cpwd" class="form-control" placeholder="Confirm Password"
required="">
</div>
<div class="mb-3 d-grid">
<button type="submit" class="btn btn-primary" id="UpdatePass">
Update Password
</button>
</div>
</form>
</div>
</div>
<div class="col-sm-8 col-12 meet_prof_div">
<h2 class="meet_prof">Meet here Professionals to Professionals</h2>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
<!-- partial:partials/_footer.html -->
<footer class="footer pt-4 " >
<div class="card bg-dark">
<div class="card-body">
<div class="d-sm-flex justify-content-center justify-content-sm-between">
<span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © 2020 <a href="https://www.bootstrapdash.com/" class="text-muted" target="_blank">Bootstrapdash</a>. All rights reserved.</span>
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center text-muted">Free <a href="https://www.bootstrapdash.com/" class="text-muted" target="_blank">Bootstrap dashboard</a> templates from Bootstrapdash.com</span>
</div>
</div>
</div>
</footer>
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- base:js -->
<script src="../vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- inject:js -->
<script src="../js/off-canvas.js"></script>
<script src="../js/hoverable-collapse.js"></script>
<script src="../js/template.js"></script>
<script src="../js/settings.js"></script>
<script src="../js/todolist.js"></script>
<!-- endinject -->
<!-- plugin js for this page -->
<script src="../vendors/typeahead.js/typeahead.bundle.min.js"></script>
<!-- End plugin js for this page -->
<!-- Custom js for this page-->
<script src="../js/file-upload.js"></script>
<script src="../js/abhijs/hompagejs.js"></script> <!-- Custom js for home page-->
<script src="../js/typeahead.js"></script>
<?php include('script.js.php');?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<!-- End custom js for this page-->
</body>
</html>
<?php
}else{
echo "No token Found!";
}
?>
Now again go to the script.js.php file and paste the below code.
/** Using Email Forget Password Reset */
$('#UpdatePass').click(function(e){
e.preventDefault();
// alert("w");
// var currentPassword = $('#opwd').val();
var newPassword = $('#pwd').val();
var confirmPassword = $('#cpwd').val();
var token = $('#token').val();
// console.log(currentPassword);
// console.log(newPassword);
// console.log(confirmPassword);
// console.log(token);
if(newPassword== '' || confirmPassword== '' ){
swal("Oops!!", "Please Check required field", "error");
}else{
$.ajax({
url:"/ajax/UpdatePassword.php",
datatype:'json',
method:'post',
data:{
// 'currentPassword':currentPassword,
'newPassword':newPassword,
'confirmPassword':confirmPassword,
'token':token
},
success:function(data){
// console.log(data);
if(data == 1){
swal('Successful!','Password Successfully Updated. Reloading...','success');
setTimeout(' window.location.href = "https://activenaukri.com"; ',4000);
}else if(data == 2){
swal('Caution!','New Password Not Match','error');
}else if(data == 3){
swal('Error!','Something Went Wrong. Please Try Again Later.','error');
}else if(data == 0){
swal('Caution!','Current Password Not Match','error');
}
}
});
}
});
Now create a file named UpdatePassword.php under the ajax folder, and paste the below code.
<?php
//Accessories_fetch.php
//include('../Connection/Functions.php');
include('../include/database.php');
if(isset($_POST['newPassword'])){
update_pwd($_POST['newPassword'],$_POST['confirmPassword'],$_POST['token']);
}
//Recover Password from email function
function update_pwd($newPassword,$confirmPassword,$token){
global $conn;
// $result = $db->query('SELECT * FROM `admin` WHERE `user_type`="admin" AND `id`="'.$userId.'"');
$result = $conn->query('SELECT * FROM `tbl_user` WHERE `user_id`="'.$token.'"');
// echo $result = $db->query('SELECT * FROM `admin` WHERE `user_type`="admin" AND `id`="'.$userId.'"');
$data = mysqli_fetch_array($result);
$token= $data['user_id'];
$salt = $data['salt'];
if($token == $data['user_id']){
if($newPassword == $confirmPassword){
$tmpPassword = $salt.$newPassword;
$updatePassword = sha1($tmpPassword);
$query = $conn->query('UPDATE `tbl_user` SET `password`= "'.$updatePassword.'" WHERE `user_id`="'.$token.'"');
// echo ('UPDATE `admin` SET `password`= "'.$updatePassword.'" WHERE `id`="'.$userId.'"');
if($query)
echo '1';//Successfully Updated
else
echo '3';//Token not Match Something Went Wrong
}else{
echo '2';//New Password Not Match
}
}else{
echo '0';//Current Password Not Match
}
}
?>
Leave a Comment
No Comments found