Tutorial Bootstrap dan ajax

Assalamualaikum Semua

      Hallo semua selamat datang kembali. Saya Muhammad Aslam atau panggil saja Mas Lam akan berbagi pengetahuan tentang Tutorial Bootstrap dan ajax langsung saja tanpa banyak basa basi lagi yu urang belajar. sebelum itu saya akan menjelaskan sedikit tenetang Bootstrap dan ajax. Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan dan AJAX merupakan singkatan dari Asynchronus javascript and XML jadi ajax ini digunakan untuk berinteraksi dengan server melalui bahasa javascript dan mempersingkat UX (User Experience).

      Pada sesi ini kita masih menggunakan materi sesi kemarin. Disini kita mencoba untuk membuat tombol delet mengeluarkan alert terlebih dahulu apakah data tersebut memang ingin di hapus atau tidak 

      Pertama kalian bisa download dulu bootstrap nya terlebih dahulu. untuk menggunakan bootstrap kalian hanya perlu memasukan kode dibawah kedalam tag head di v_index.php

<link rel="stylesheet" type="text/css" href="assets/media/css/bootstrap.css">
 <script type="text/javascript" src="assets/media/js/jquery.min.js"></script>
 <script type="text/javascript" src="assets/media/js/bootstrap.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>

Setelah itu kita membuat popup informasinya

Masukan kode berikut di akhir body sebelum tag penutup

<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 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>

setelah itu tambahkan class btnDelete pada button Delete

tambahkan script untuk event click jadi saat mengklik pop-up akan muncul kode berikut Simpan code dibawah sebelum tag penutup 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 akan menghapus <b>' + nama + "</b>?");

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

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

        toastr.success('Data berhasil di hapus');
     
      }
     });
    });
   });
  });

Penjelasan, Jadi ketika button delete di klik maka akan memunculkan dan akan memuncukan modal juga nama kolom yang dihapus jika button "tidak" dipilih makan akan diarahkan kembali ke semula

selanjutnya menjalankan button konfirmasi 'ya' jika button tersebut ditekan maka menjalankan script ajax. Code diatas sama saja seperti form php jadi kita bisa berinteraksi dengan server melalui AJAX. jika data tersebut berhasil dihapus maka akan seperti ini: