Reset Password Menggunakan PHP MySQLi

password recovery

Dalam sebuah sistem pasti anda lupa password anda, disinilah sistem yang dibuat manusia hadir untuk membantu anda untuk recovery password anda, tanpa adanya fitur reset password dalam sebuah sistem pasti anda tidak akan memperoleh akun sistem anda kembali.

Nah kali ini kami akan mencoba bagaimana membuat form Reset Password menggunakan PHP MySQLi.

1. Buat database dengan nama password kemudian masukkan struktur database dibawah ini.

CREATE TABLE `user` (
  `user_id` int(11) NOT NULL,
  `username` varchar(20) NOT NULL,
  `password` varchar(12) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Buat file dengan nama conn.php file ini berfungsi untuk koneksi kedatabase.

<?php
$conn = new mysqli('localhost', 'root', '', 'password') or die(mysqli_error());

if(!$conn){
 die("Error: Failed to connect to database");
}
?>

3. Buat file dengan nama save_user.php file ini berisi script untuk memasukkan data user kedatabase.

<?php
 require_once 'conn.php';
 if(ISSET($_POST['save'])){
  $username = $_POST['username'];
  $password = $_POST['password'];

  
  $conn->query("INSERT INTO `user` VALUES('', '$username', '$password')") or die($conn->error());
  
  header('location: index.php');
 }
?>

4. Buat file dengan nama update_password.php file ini berisi script yang berfungsi untuk update password.

<?php
require_once 'conn.php';

if(ISSET($_POST['update'])){
 $user_id = $_POST['user_id'];
 $username = $_POST['username'];
 $newpassword = $_POST['newpassword'];
 $confirmpassword = $_POST['confirmpassword'];
 $oldpassword = $_POST['oldpassword'];


 if($newpassword == $confirmpassword){
  $query = $conn->query("SELECT * FROM `user` WHERE `user_id` = '$user_id' && `password` = '$oldpassword'") or die($conn->error());
  $valid = $query->num_rows;

  if($valid > 0){
   $conn->query("UPDATE `user` SET `username` = '$username', `password` = '$newpassword' WHERE `user_id` = '$user_id'") or die($conn->error());
   echo "<script>alert('Password updated')</script>";
   echo "<script>window.location = 'index.php'</script>";
  }else{
   echo "<script>alert('Password does not match to old password')</script>";
   echo "<script>window.location = 'index.php'</script>";
  }

 }else{
  echo "<script>alert('Password does not match')</script>";
  echo "<script>window.location = 'index.php'</script>";
 }
 
}
?>

5. Buat file dengan nama index.php file ini berisi script yang berfungsi sebagai script form utama dan form modal yang memanggil masing-masing fungsi dari save_user php dan update_password.php

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
 <nav class="navbar navbar-default">
  <div class="container-fluid">
   <a class="navbar-brand" href="https://jasawebsite.ooo/">jasawebsite</a>
  </div>
 </nav>
 <div class="col-md-3"></div>
 <div class="col-md-6 well">
  <h3 class="text-primary"><center>Reset Password Dengan Konfirmasi</center></h3>
  <hr style="border-top:1px dotted #ccc;"/>
  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#form_modal"><span class="glyphicon glyphicon-plus"></span> Add user</button>
  <br /><br />
  <table class="table table-bordered">
   <thead class="alert-info">
    <tr>
     <th>Username</th>
     <th>Password</th>
     <th>Action</th>
    </tr>
   </thead>
   <tbody style="background-color:#2794da;">
    <?php
    require 'conn.php';
    $query = $conn->query("SELECT * FROM `user`") or die($conn->error());
    while($fetch = $query->fetch_array()){
     ?>
     <tr>
      <td><?php echo $fetch['username']?></td>
      <td><?php echo str_replace($fetch['password'], "SECRET", $fetch['password'])?></td>
      <td><button type="button" class="btn btn-warning" data-toggle="modal" data-target="#update_modal<?php echo $fetch['user_id']?>">Change Password</button></td>
     </tr>
     
     <div class="modal fade" id="update_modal<?php echo $fetch['user_id']?>" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog" role="document">
       <form action="update_password.php" method="POST" enctype="multipart/form-data">
        <div class="modal-content">
         <div class="modal-body">
          <div class="col-md-2"></div>
          <div class="col-md-8">
           <div class="form-group">
            <label>Username</label>
            <input type="hidden" name="user_id" value="<?php echo $fetch['user_id']?>"/>
            <input class="form-control" type="text" name="username" value="<?php echo $fetch['username']?>" required="required" />
           </div>
           <div class="form-group">
            <label>New Password</label>
            <input class="form-control" type="password" maxlength="12" name="newpassword" required="required"/>
           </div>
           <div class="form-group">
            <label>Confirm Password</label>
            <input class="form-control" type="password" maxlength="12" name="confirmpassword" required="required"/>
           </div>
           <div class="form-group">
            <label>Old Password</label>
            <input class="form-control" type="password" maxlength="12" name="oldpassword" required="required"/>
           </div>
          </div>
         </div>
         <div style="clear:both;"></div>
         <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button>
          <button name="update" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span> Update</button>
         </div>
        </div>
       </form>
      </div>
     </div>
     
     
     
     <?php
    }
    ?>
   </tbody>
  </table>
 </div>
 <div class="modal fade" id="form_modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
   <form action="save_user.php" method="POST" enctype="multipart/form-data">
    <div class="modal-content">
     <div class="modal-body">
      <div class="col-md-2"></div>
      <div class="col-md-8">
       <div class="form-group">
        <label>Username</label>
        <input class="form-control" type="text" name="username" required="required" />
       </div>
       <div class="form-group">
        <label>Password</label>
        <input class="form-control" type="password" maxlength="12" name="password" required="required"/>
       </div>
      </div>
     </div>
     <div style="clear:both;"></div>
     <div class="modal-footer">
      <button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button>
      <button name="save" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span> Save</button>
     </div>
    </div>
   </form>
  </div>
 </div>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</html>

Silahkan dowload filenya langsung pada link button dibawah ini.

Jangan sungkan untuk meninggalkan komentar jika kalian belum sepenuhnya paham dengan apa yang kami share di atas.

Leave a Reply

Your email address will not be published. Required fields are marked *