3.Boostrap Modal dan Ajax

Assalamualaikum wr.wb Teman-teman ku sekalian

ketemu lagi nih sama Saya di blog yang sama :v

Kali ini aku bakal ngasih tau ke kalian caranya Memakai Boostrap dan ajax.

kita langsung aja ke Materi saja :

yang pertama kita akan meng Hapus data, tetapi akan muncul Konfirmasi Seperti di bawah ini :




Langkah Pertama Yaitu Download file boostrap nya :
Link nya di bawah ya guys :v
https://getbootstrap.com/
Setelah di download simpan File media tersebut di dalam (folderproject/assets)
Bila sudah maka langsung ke langkah selanjut nya ok
Langkah kedua yaitu Tambahkan Plugins jQuery dan Toastr Pada v_index :

<link rel="stylesheet" type="text/css" href="assets/media/css/bootstrap.min.css">
    <script type="text/javascript" src="assets/media/js/jquery.min.js"></script>
   <script type="text/javascript" src="assets/media/js/bootstrap.min.js"></script> 
   <link rel="stylesheet" href="assets/media/plugins/toastr/toastr.min.css">
   <script type="text/javascript" src="assets/media/plugins/toastr/toastr.min.js"></script>
    <link rel="stylesheet" href="assets/fontawesome/css/all.min.css">
<style type="text/css">


Langkah Ketiga Bila sudah tambahkanlah codingan ini pada v_index :

<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span arria-hidden="true">×</span></button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btnYa">Ya</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Tidak</button>
</div>
</div>
</div>
</div>

Langkah Ke empat TambahkanLah class btnDelete pada button Delete :

<a href="delete.php?nis=<?= $siswa['nis'] ?>" class="btn btn-danger btnDelete"><span class="far fa-trash-alt"> Delete</span></a>

Langkah KeLima Selanjutnya, tambahkanlah javascript sebeluh di akhir tag Body :


<script type="text/javascript">
$(function () {
$(".btnDelete").on("click", function(e) {
e.preventDefault();

var nama = $(this).parent().parent().children()[2];
nama = $(nama).html();

var tr = $(this).parent().parent();

$(".modal").modal('show');
$(".modal-title").html('Konfirmasi');
$(".modal-body").html("Anda yakin ingin menghapus data <b>"+ nama +"</b> ?");

var href = $(this).attr('href');

$('.btnYa').off();
$('.btnYa').on('click', function() {
$.ajax({
'url' : href,
'type' : 'POST',
'success' : function(result) {
if (result == 1) {
$(".modal").modal('hide');
tr.fadeOut();

toastr.success('Data berhasil dihapus', 'Information');
}
}
});
});
});
});
</script>

Fungsi (script) jQuery ketika seluruh halaman ter-Load
function (e) { , itu untuk menangkap event ketika tomnol btnDelete di klik
var nama = $(this) , itu untuk mengambil elemen pada kolom 2 kemudian mengamil nama lengkap nya
var tr , mengambil elemen baris yang di klik tombol btnDelete nya
$ (.modal) show :
untuk menampilkan modal
$ (.modal-title).html :
memberi judul modal
$ (.modal-body).html :
memberi isi pesan modal
Var href
Mengambil href dari tombol
$(.btnya)
Menonaktifkan seluruh event dan memberi event pada saat tombol btnYa di Klik
url = href

Konfigurasi Ajax , url tujuan dengan hrefdari tombol tipe ajax adalah post (sama seperti form method)
if (result)

jika di hapus berhasil maka tampilkan pesan bershasil menghapus data
toastr.success

tampilan pesan success mengunakan toastr
Langkah KeTujuh Selanjut nya tambahan codingan ini pada delete.php :

<?php
include 'lib/library.php';

$nis = $_GET['nis'];
if (!empty($nis)) {
$sql = "DELETE FROM siswa WHERE nis = '$nis' ";

if ($mysqli->query($sql)) {
echo 1;
} else{
echo 0;
}
}
?>





echo 1 :

ubah, jika data berhasil di hapus tampilkan 1 jika gagal, tampilkan 0 (digunakan untuk reslut ajax)
dan ini hasil bila sudah berhasil semua :


Ok,Guys Mungkin hanya ini yang pertemuan yang bisa saya share, Mohon maaf bila penjesan nya kurang jelas :(, Selamat Jumpa di next Materi see you guys.

Wasalamualaikum wr wb.