Haikal PG - XI RPL 1 - PWPB Sesi 33

Assalamualaikum Warahmatullahi Wabarokatuh
Halo teman-teman gimana kabarya? semoga sehat selalu ya.. . Pada sesi kali ini kita akan membahas sedikit tentang bootstrap dan ajax. Apa itu bootstrap dan ajax? Saya akan coba jelaskan bootstrap terlebih dahulu. Bootstrap merupakan framework frontend yang dibuat untuk memudahkan kita dalam membangun sebuah UI (User Interface) jadi kita tidak perlu lagi menuliskan sintaks CSS yang memerlukan line code yang panjang:v jadi gunakan saja bootstrap untuk mempersingkat waktu pembuatan UI. Karena mudah digunakan, teman-teman hanya perlu memasukkan class-class yang tersedia untuk lebih lengkap silahkan klik link berikut : Bootstrap. Selanjutnya ada AJAX merupakan singkatan dari Asynchronus javascript and XML jadi ajax ini digunakan untuk berinteraksi dengan server melalui bahasa javascript dan mempersingkat UX (User Experience). Langsung saja kita koding........

Bootstrap & AJAX
Kita masih akan meneruskan materi sebelumnya. Jadi, bagi teman-teman yang belum mengikuti materi-materi yang sebelumnya diharapkan membaca terlebih dahulu karena jika tidak maka akan sulit untuk mengikuti materi ini. Jadi kali ini kita akan mencoba mengubah UI tampilan awal dengan bantuan framework bootstrap dan toastr js. Kita akan mencoba menghubah tombol delete agar tidak langsung terhapus tapi ada alert terlebih dahulu apakah data tersebut akan dihapus atau tidak. Kita akan menggunakan modal sebagai pop-up konfirmasi.
Silahkan download bootstrap terlebih dahulu: Download atau teman-teman juga bisa menggunakan bootstrap online. Masukkan code berikut didalam tag head:

<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>
Code diatas digunakan untuk menghubungkan kita dengan bootstrap, jquery dan toastr js. Folder bisa disesuaikan dengan susunan masing-masing.

Lalu kita akan membuat pop-up konfirmasi

Modal
Copykan code berikut untuk menampilkan konfirmasi simpan sebelum tag akhir penutup body:

<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>
Code diatas akan menampilkan konfirmasi penghapusan. pada modal-footer di button 'YA' simpan btnYa di attribut class untuk digunakan nanti. Sekarang tambahkan 'btnDelete' pada tombol delete di classnya seperti berikut:
<a href="delete.php?nis=<?= $siswa['nis'] ?>" class="btn btn-danger btnDelete">Delete</a>
sama dengan btnYa kita akan menggunakannya untuk event onclick dengan jquery.
Lalu sekarang buat sebuah script untuk event click. Jadi saat kita mengkilk pop-up akan muncul dengan code berikut:

<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'); } }); }); }); });
Simpan code diatas sebelum tag penutup body. Penjelasan, jadi script diatas akan dijalankan jika btnDelete di click dan modal akan muncul 'show' juga mengambil nama di kolom yang akan dihapus. Kemudian mengisi modal-title dan molal-body dengan Konfirmasi. Lalu membuat variable href dengan mengambil data, dan jika kita coba untuk menampilkan href tersebut pada console maka akan seperti ini:

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:

Modal box

Data terhapus

Jika ditekan maka data terhapus dengan alert dari library toastr js data yang dihapus akan terlihat seperti gambar diatas.

Mungkin sekian saja untuk pertemuan kali ini untuk salahnya mohon dimaafkan dan jika ada yang bingung ada kolom komentar dan tanya kalo bingung:). Wasaalamualaikum Warahmatullahi Wabarokatuh.