Membuat Konfirmasi Hapus dengan Modal Bootstrap

Publish Date : 30-07-2024 , dibaca 604 kali, Hari ini dibaca : 1 kali ,0 comments

Pada artikel sebelumnya kita sudah membahas Cara Membuat CRUD data Siswa PHPMYSQli , Tambah , edit serta hapus data siswa sudah kita buat pad artikel sebelumnya , namun itu di lakukan pada form biasa pada halaman itu ,

Nah disini kita akan membuat Konfirmasi Hapus dengan modal bootstrap , Berikut ini merupakan SCRIPT yang kita Gunakan

Demo

SAMPLE SCRIPT

ini merupakan contoh script dalam Membuat Konfirmasi Hapus data , dengan Modal Bootstrap , Dengan mengacu pada script ini , tentunya dapat kita modifikasi dan kita implementasikan dalam project kita , sesuai dengan data-data yang kita miliki. berikut script nya :

Demo lihat disini

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Konfirmasi Hapus data dengan Modal Bootstrap Senterwebs.com</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Author" content="Senterwebs">
    <link rel="shortcut icon" href="https://senterwebs.com/favicon.png">
    <link rel="icon" href="https://senterwebs.com/favicon.png">   
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>

    <script>
$(document).ready(function() {
    $('a[data-confirm]').click(function(ev) {
        var href = $(this).attr('href');
        if (!$('#dataConfirmModal').length) {
            $('body').append('<div class="modal fade" id="dataConfirmModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header bg-danger text-light"><h5 class="modal-title" id="myModalLabel">Konfirmasi Hapus Data Senterwebs.com</h5><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">OK</a></div></div></div></div>');
        } 
        $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
        $('#dataConfirmOK').attr('href', href);
        $('#dataConfirmModal').modal({show:true});
        return false;
    });
});
</script>

<div class='text-center'>
    <h2>Membuat konfirmasi Hapus dengan Modal Bootstrap Senterwebs.com</h2>
    <a href="delete.cfm" class='btn btn-danger' data-confirm="Are you sure you want to delete?">Delete</a>
</div>

Simpan dengan nama index.html , dan jalan kan dengan koneksi internet agar CDN bootstrap dapat terpanggil , disini kita akan mendapatkan yang kita mau dalam membuat konfirmasi Hapus dengan Modal Bootstrap.

Studi Kasus CRUD Data Siswa

Berikut ini merupakan contoh Membuat Konfirmasi Hapus data dengan Modal bootstrap , Secara garis besar proses eksekusi tentang Hapus Masih Sama dengan PHP , artinya tetap sama seperti form biasa , hanya saja disini kita menambahkan Modal bootstrap agar tampak lebih userfriendly dan kekinian , tentunya lewat tabel yang kita tampilkan , dan link hapus yang sudah ada .

Perlu diketahui File yang saya gunakan adalah aplikasi file pada artikel Membuat CRUD data Siswa PHPMYSQli , disini kita akan merubah / sedikit melakukan penyesuaian file agar sesuai agar dapat kita melakukan " Hapus Data di Modal Bootstrap dengan data yang di ambil secara dinamis pada database mysql"

Adapun Project kita kali ini adalah terdiri dari 4 buah file sebagai berikut.

crudsiswa/
├── indeks.php
├── koneksi.php
├── tambah.php
├── tampil.php

Database & Koneksi.php

seperti penjelasan diatas , disini saya menggunakan database seperti pada artikel Membuat CRUD data Siswa PHPMYSQli , dimana database bernama db.senterwebs.com , dan tabel siswa , untuk struktur field database bisa dilihat di artikel tersebut ya , begitu juga koneksi.php

tampil.php

Untuk membuat Hapus data di modal bootstrap , disini kita harus melihat script dari data di tampilkan ,dari data yang ada di database tentunya ,, berikut ini merupakan script untuk menampilkan data di database .

<table class="table table-striped">
<thead>
<tr>
  <th>No.</th>
  <th>Nis</th>
  <th>Nama</th>
  <th>Kelas</th>
  <th>Jurusan</th>
  <th>Gambar</th>
  <th>Action</th>
</tr>
</thead>
<tbody>
  <?php 
  include "koneksi.php";
      $no = 1;
      $sql = mysqli_query($koneksi,"SELECT * FROM siswa");
      while ($r = mysqli_fetch_array($sql)) { 
      echo" 
<tr>
  <td>$no</td>
  <td>$r[nis]</td>
  <td>$r[nama]</td>
  <td>$r[kelas]</td>
  <td>$r[jurusan]</td>
  <td><img src='gambar/$r[gambar]' width='60'></td>
  <td>
  <a href='javascript:void(0);' class='btn btn-info ModalEdit' data-href='editmodal.php?id=$r[id_siswa]'>Edit</a>
  <a href='index.php?act=hapus&id=$r[id_siswa]' class='btn btn-danger' data-confirm='Are you sure you want to delete?'>Delete</a></td>
    "; 
  $no++; 
} 
  ?>

</tr>
</tbody>
</table>

Yang perlu diperhatikan dari script diatas adalah <a href='index.php?act=hapus&id=$r[id_siswa]'>, ini merupakan link hapus yang dapat anda rubah dan sesuai kan dengan tujuan proses hapus anda . bisa saja <a href='hapus.php?id=$r[id_siswa]'>

Yang intinya tergantung dari proses hapus yang ditujukan kemana pada aplikasi yang anda buat , kemudian data-confirm='Are you sure you want to delete?'>Delete</a>, pada bagian data-confirm ini yang akan kita ekseskusi dengan script javascript dibawah ini

Script jquery

untuk script dibawah ini tempatkan di atas tag </body> pada file aplikasi kita , perhatikan cara kerja jquery memanggil modal untuk hapus data, dari link yang sudah kita buat diatas berupa "data-confirm"

<script>
$(document).ready(function() {
    $('a[data-confirm]').click(function(ev) {
        var href = $(this).attr('href');
        if (!$('#dataConfirmModal').length) {
            $('body').append('<div class="modal fade" id="dataConfirmModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header bg-info text-light"><h5 class="modal-title" id="myModalLabel">Konfirmasi Hapus Data Senterwebs.com</h5><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">OK</a></div></div></div></div>');
        } 
        $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
        $('#dataConfirmOK').attr('href', href);
        $('#dataConfirmModal').modal({show:true});
        return false;
    });
});
</script>

Demo

Edit Data Siswa di Modal Bootstrap PHP MYSQLi
Previous Post

Aplikasi Input Data Siswa Sederhana dengan PHP MYSQLi
Next Post