Bootstrap dan Ajax #3

Assalamu'alaikum Wr.Wb
Salam sejahtera bagi kita semua...

Halo semua,
balik lagi di SekolahQue, Kali ini kita akan membahas mengenai Bootstrap dan Ajax.

Bootstrap adalah sebuah library framework CSS yang dibuat khusus untuk bagian pengembangan front-end website. Sedangkan Ajax singkatan dari "Asynchronus JavaScript and XML", merupakan metode suatu laman web menggunakan Java script untuk mengirim dan menerima data dari server tanpa harus menyegarkan atau (merefresh) laman itu.

Langsung saja kita ke codingannya...

----------------------------------------------------------------------------------------------------------------------------------------------------------------------LET'S G😉

• Buka file v_index.php

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

Tujuan pembuatan Tag tersebut adalah untuk memanggil file-file yang berada didalam folder bootstrap kalian. Dan pemanggilan foldernya pun menggunakan keyword ' / '. Nama folder bootstrapnya sesuaikan dengan nama folder bootstrap kalian masing-masing.

Setelah itu, tambahkan kode berikut ini sebelum tag </body>

<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> <h4 class="modal-title"> </h4> </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>

Tag diatas merupakan tag tambahan untuk membuat sebuah pop-up di javaScript yang nantinya bisa diberikan desain bootstrap.

Setelah itu, tambahkan...

Hanya menambahkan value yang berada di class-nya saja.

Lalu tambahkan kode berikut sebelum tag </body>

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

PENJELASAN : 

Maaf penjelasannya berupa Screenshot soalna saya lagi males ngetik hehe...

• Buka file delete.php

Tambahkan kode berikut : 

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

PENJELASAN :

 if($mysqli->query($sql)){
    echo 1;       -----------------------> Ubah data apabila data berhasil dihapus tampilkan 1 jika 
  }else{                             gagal tampilkan 0 (Digunakan untuk result Ajax)
    echo 0;
}
}

HASIL AKHIR :

CATATAN : "PADA HASIL AKHIRNYA SAYA TIDAK TAHU KENAPA SAAT MENDELETE DAN AJAX BERHASIL MUNCUL, TETAPI DATA TIDAK LANGSUNG HILANG. MELAINKAN HARUS DI REFRESH TERLEBIH DAHULU".

-------------------------------------------------------------------------------------------------------------------------------
Sekian dulu ya...
Semoga SekolahQue dapat terus bermanfaat bagi semuanya...
Coba dirumah dan jangan takut mencoba...
#BelajarBersama

Assalamu'alaikum Wr.Wb