tutorialswb

TutorialsWB hadir sebagai wadah bagi teman-teman yang ingin "Belajar PHP Dasar". Sehingga kami yakin bahwa TutorialsWB akan menjadi Pusat "Belajar Bahasa Pemrograman PHP" Disamping PHP website ini menyediakan berbagai tips dan trik Blogger. Kami menerima Pemasangan iklan banner atau artikel.

Hubungi Saya

Hapus Data Tanpa Refresh Halaman Menggunakan MySQLi



Selamat pagi bagaimana kabar kalian, bagaimana anda menikmati liburan panjang kalian?

Apakah anda ingin belajar menjadi programmer web, jika jawabannya adaah Ya! maka kalian harus mempelajari tutorial dibawah ini, dan kami berharap kalian bisa memahaminya dan mengimplementasikannya dalam aplikasi atau project kalian.

Hapus Data Tanpa Refresh Halaman Menggunakan MySQLi


Kali ini kami akan share bagaimana menghapus data database tanpa resfresh menggunakan MySQL. Mari kita mulai dari awal, Let's it...

Membuat Database
Buat database dengan nama user.sql 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; 

Koneksi database
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");
 }
?> 

Buat Tampilan Form
Buat file dengan nama index.php file ini berisi script sebagai form atau tampilan utama web base di atas menggunakan bootstrap, untuk tabel kami mengunakan data table dan kami menggunakan modal untuk notification dan form add user.
 <!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://www.tutorialswb.com/">TutorialsWB</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> 

Buat Notificaton Delete
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());
?> 

Kemdian 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);
   }
  });
 });
}); 

Fungsi Save User
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");
?> 

Jika kalian malas untuk mengikuti satu per satu tutorial di atas silahkan download filenya dibawah ini.


Sekain share kali ini semoga apa yang kami share bermanfaat bagi anda, Kalian bisa meninggalkan komentar dibawah dan mulai berdiskusi dengan kami.



Baca Juga

closed