Bootstrap : Model dan Ajax

Assaalamualaikum Wr. Wb.

   Kembali lagi bersama saya Syahrul di SchoolBlog. Untuk postingan kali ini saya akan membahas tentang yang tertulis di judul postingan ini, yaitu Boorstrap Model dan Ajax. Seperti biasa saya akan menjabarkannya dengan metode Step by Step agar kalian bisa langsung mem[raktikknanya, tapi dengan syarat, kalian harus memulai framework Apache dan MySQL -nya ya!

Mari langsung saja ke step by step -nya :

Step 1

Tambahkan codingan dibawah ini di v_index.php :

<script type="text/javascript" src="<?php echo base_url()?>/media/js/jquery.min.js"></script> <script type="text/javascript" src="<?php echo base_url()?>/media/js/bootstrap.min.js"></script> <!-- Toastr Plugins --> <link rel="stylesheet" href="<?php echo base_url() ?>/media/css/bootstrap.min.css"> <link rel="stylesheet" href="<?php echo base_url() ?>/media/plugins/toastr/toastr.min.css"> <script type="text/javascript" src="<?php echo base_url()?>/media/plugins/toastr/toastr.min.js"></script>

*codingan diatas berguna untuk menghubungkan bootstrap dan cssnya.

<div class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-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>

*simpan codingan ini diakhir body(sebelum tag tutup </body>)

<td><a href="edit.php?nis=<?= $siswa['nis'] ?>" class="btn btn-warning">Edit</a></td> <td><a href="delet.php?nis=<?= $siswa['nis'] ?>" class="btn btn-danger btnDelete">Delete</a></td>

*tambahkan btnDelete pada button Delete

<script type="text/javascript"> $(function() { $(".btnDelete").on("click", function(e) { e.preventDefault(); var nama = $(this).parent().parent().children()[3]; 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', 'informasi'); } } }); }); }); }); </script>

*tambahkan codingan javascrip ini sebelum akhir body. Fungsi dari codingan javascript ini adalah untuk menjalankan jQuery nya yaitu, tampilan ajax dan model. Untuk yang model tampilannya seperti ini :

*tampilan ini muncul setelah kalian menklik button delete

Step 2

Ubah codingan delete.php seperti contoh dibawah ini :

<?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; } } ?>

Hasilnya :

Setelah mengklik button delete :

*jika mengklik button Tidak,  maka akan kembali ketampilan sembelumnya.

Setelah mengklik button Ya : 

*tampil informasi bahwa data telah di hapus.

Cukup sekian untuk pertemuan kali ini, mohon maaf bila ada kesalahan. Bila ada yang ingin ditanyakan silahkan langsung saja komen dibawah. Terimakasih telah melihat sampai akhir.

Wassalamualaikum Wr. Wb.