Hapus Data Tanpa Refresh Halaman Menggunakan PHP dan Jquery

Kali ini kami akan mencoba menghapus data database tanpa refresh halaman menggunakan PHP MySQLi. Fitur ini sangat dibutuhkan pada sistem anda, tidak semua data yang di input itu benar dan peran fitur hapus data sangat penting di sini.

Langsung saja mari kit ake pembahasan intinya.

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

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


CREATE TABLE `member` (
  `mem_id` int(11) NOT NULL,
  `firstname` varchar(50) NOT NULL,
  `lastname` varchar(50) NOT NULL,
  `age` int(3) NOT NULL,
  `address` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


INSERT INTO `member` (`mem_id`, `firstname`, `lastname`, `age`, `address`) VALUES
(2, 'Arman', 'Basir', 10, 'Mamampang, Garassi'),
(3, 'Muksin', 'Basir', 29, 'Malino, Gowa');


ALTER TABLE `member`
  ADD PRIMARY KEY (`mem_id`);

ALTER TABLE `member`
  MODIFY `mem_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
COMMIT;

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

<?php
 $conn = mysqli_connect('localhost', 'root', '', 'user') or die(mysqli_error());
 if(!$conn){
  die("Error: Failed to connect to database");
 }
?>

3. Buat file dengan nama index.php file ini berisi script sebagai form atau tampilan utama web base di atas menggunakan bootstrap.

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.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>Hapus Data Tanpa Refresh Halaman Menggunakan MySQLi</center></h3>
  <hr style="border-top:1px dotted #ccc;"/>
  <button type="button" class="btn btn-success" data-target="#form_modal" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span> Add User</button> 
  <br /><br />
  <table id="example" class="table table-striped table-bordered" style="width:100%">
   <thead>
    <tr>
     <th>Firstname</th>
     <th>Lastname</th>
     <th>Age</th>
     <th>Address</th>
     <th>Action</th>
    </tr>
   </thead>
   <tbody>
    <?php
    require 'conn.php';
    $query = mysqli_query($conn, "SELECT * FROM `member` ORDER BY `lastname` ASC") or die(mysqli_error());
    while($fetch = mysqli_fetch_array($query)){
     ?>
     <tr class="del_mem<?php echo $fetch['mem_id']?>">
      <td><?php echo $fetch['firstname']?></td>
      <td><?php echo $fetch['lastname']?></td>
      <td><?php echo $fetch['age']?></td>
      <td><?php echo $fetch['address']?></td>
      <td><button type="button" class="btn btn-danger btn_del" id="<?php echo $fetch['mem_id']?>"><span class="glyphicon glyphicon-remove"></span> Delete</button></td>
     </tr>
     <?php
    }
    ?>
   </tbody>
  </table>
 </div>
 <div class="modal fade" id="modal_confirm" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
   <div class="modal-content">
    <div class="modal-header">
     <h3 class="modal-title">Notification</h3>
    </div>
    <div class="modal-body">
     <center><h4>Apakah anda benar-benar ingin menghapusnya?</h4></center>
    </div>
    <div class="modal-footer">
     <button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
     <button type="button" class="btn btn-success" id="btn_yes">Yes</button>
    </div>
   </div>
  </div>
 </div>
 <div class="modal fade" id="form_modal" aria-hidden="true">
  <div class="modal-dialog">
   <div class="modal-content">
    <form method="POST" action="save_member.php">
     <div class="modal-header">
      <h3 class="modal-title">Add User</h3>
     </div>
     <div class="modal-body">
      <div class="col-md-2"></div>
      <div class="col-md-8">
       <div class="form-group">
        <label>Firstname</label>
        <input type="text" name="firstname" class="form-control" required="required"/>
       </div>
       <div class="form-group">
        <label>Lastname</label>
        <input type="text" name="lastname" class="form-control" required="required" />
       </div>
       <div class="form-group">
        <label>Age</label>
        <input type="number" name="age" class="form-control" min="0" max="200" required="rquired" />
       </div>
       <div class="form-group">
        <label>Address</label>
        <input type="text" name="address" class="form-control" required="required"/>
       </div>
      </div>
     </div>
     <div style="clear:both;"></div>
     <div class="modal-footer">
      <button name="save" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span> Save</button>
      <button class="btn btn-danger" type="button" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button>
     </div>
    </div>
   </form>
  </div>
 </div>
</div>

<script>
 $(document).ready(function() {
  $('#example').DataTable();
 } );
</script>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/script.js"></script>
</body> 
</html>

4. Buat file dengan nama delete_member.php file ini berisi script untuk menghapus database.

<?php
 require_once 'conn.php';
 $mem_id = $_POST['mem_id'];
 mysqli_query($conn, "DELETE FROM `member` WHERE `mem_id` = $mem_id") or die(mysqli_error());
?>

5. Buat file dengan nama script.js file ini disimpan dalam directori js

$(document).ready(function(){
 $('.btn_del').on('click', function(){
  var mem_id = $(this).attr('id');
  $("#modal_confirm").modal('show');
  $('#btn_yes').attr('name', mem_id);
 });
 $('#btn_yes').on('click', function(){
  var id = $(this).attr('name');
  $.ajax({
   type: "POST",
   url: "delete_member.php",
   data:{
    mem_id: id
   },
   success: function(){
    $("#modal_confirm").modal('hide');
    $(".del_mem" + id).empty();
    $(".del_mem" + id).html("<td colspan='6'><center>Deleting...</center></td>");
    setTimeout(function(){
     $(".del_mem" + id).fadeOut('slow');
    }, 1000);
   }
  });
 });
});

6. Buat file dengan nama save_member.php file ini memiliki fungsi untuk memasukkan data kedalam database.

<?php
require_once 'conn.php';

$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$age = $_POST['age'];
$address = $_POST['address'];
$civil_status = $_POST['civil_status'];

mysqli_query($conn, "INSERT INTO `member` VALUES('', '$firstname', '$lastname', '$age', '$address')") or die(mysqli_error());

header("location: index.php");
?>

Kalian bisa mendownload filenya langsung dengan menekan button download dibawah ini.

Silahkan tinggalkan komentar jika anda masih bingung dengan apa yang kami share di atas.

Leave a Reply

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