PWPB | Bootstrap Modal dan Ajax

by I am Fahru January 18, 2020 0 Comments
Bootstrap Modal dan Ajax


         Assalamualaikum, bagaimana kabarnya teman teman semua ? semoga baik baik saja dan tetep dapet menebarkan kebaikan. Pada blog ini saya akan memberitahu materi mengenai Bootrap Modal dan Ajax. Langsung saja siapkan text editor, xampp, dan file file kemarin . Modal dan Ajax ini akan kita pakai pada saat kita akan mengahpus data pada tabel siswa kemarin.

 Langkah Langkah

 Tambahkan Plugin Jquery dan Toaster di file v_index.php

<!-- plugin bootstrap jquery dan toastr -->
<script src="Assets/media/js/jquery.min.js"></script>
<script src="Assets/media/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="Assets/media/css/bootstrap.min.css">
<link rel="stylesheet" href="Assets/media/plugins/toastr/toastr.min.css">    
<script src="Assets/media/plugins/toastr/toastr.min.js"></script>


Tambahkan kodingan modal di bawah ini ke dalam file v_index.php (sebelum tag penutup 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">&times;</span></button>
                <h4 class="modal-title" style="float:left;"></h4>
            </div>          
            <div class="modal-body" style="float:left;">
            </div><br><br>
            <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>


Tambahkan class btnDelete pada button Delete, seperti di bawah ini :

<!-- link untuk menghapus data -->
<td><a class="btnDelete" href="delete.php?nis=<?= $siswa['nis']?>"><div class="delete"><div class="br"></div><i class="fas fa-trash"></i></div></a></td>


Tambahkan kodingan di bawah ini ke dalam file v_index.php (sesudah kodingan modal)

<script>
    $(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');
                        } else {
                            $(".modal").modal('hide');
                            toastr.error('Data Tidak Berhasil dihapus', 'Informasi');
                        }
                    }
                });
            });
        });
    });
</script>


Ganti Kodingan di dalam file delete.php menjadi seperti di bawah ini :

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

    // untuk mengambil value dari GET parameter dengan key nis
    $nis = $_GET["nis"];
    if (!empty($nis)) {
        $sql = "DELETE FROM siswa WHERE nis = '$nis'";
        if($mysqli->query($sql)) {
            echo 1;
        } else {
            echo 0;
        }
    }    
?>


Hasil 

 Tampilan Index awal :


Ketika Button delete di tekan maka akan muncul pop seperti gambar di bawah ini :


 Jika kita menekan OK pada modal maka data akan terhapus dan muncul notifikasi di pojok kanan :



Cukup Sekian penjelasan mengenai materi Bootstrap Modal dan Ajax semoga bermanfaat dan sampai jumpa di blog selanjutnya, Wassalamualaikum

0 Comments