PHP Bootstrap dan Modal Ajax

Halo! Marhaban! Disini saya mau membagikan tentang PHP bootstrap dan cara penggunaannya untuk menampilkan kolom konfirmasi ketika kita hendak menghapus data.

Mula-mula download dulu file bootsrtap yang akan digunakan disini

Setelah itu taruh filenya di dalam htdocs yang digunakan. Disini saya memasukkannya di folder media, setelah itu masukkan kode dibawah ini di v_index.php bagian head

    <link rel="stylesheet" href="media/css/bootstrap.min.css">

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

    <link href="<?php echo base_url()?>/media/plugins/toastr/toastr.min.css" rel="stylesheet">

    <script type="text/javascript" src="<?php echo base_url()?>/media/plugins/toastr/toastr.min.js"></script>

Tambahkan juga kode dibawah ini sebelum kode 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"></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>

<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('Pemastian');

            $(".modal-body").html('Yakin Mau Hapus <b>'+nama+'</b>? Sekali Hapus Maka Data Tidak Akan Kembali Lagi :)');

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

            $('.btnYa').off();

            $('.btnYa').on('click', function(e) {

                $.ajax({

                    'url':href,

                    'type':'POST',

                    'success':function(result){

                        console.log( result == 1 );

                        if( result == 1 ){

                            $(".modal").modal('hide');

                            tr.fadeOut();

                            toastr.success('Data Berhasil Dihapus!', 'Informasi');

                        }

                    }

                });

            });

        });

    });

</script>

Masih di dalam file kodingan yang sama, di button edit dan delete yang berada di v_index, tambahkan kode class btn seperti dibawah ini. Setelah kode ini dimasukkan, tampilan tombol yang kita pakai sebelumnya akan berubah karena telah menggunakan bootstrap

                <td>

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

                    <a href="delete.php?nis=<?= $siswa['nis'] ?>" class="btn btn-danger btnDelete">Delete</a>

                </td>

Selanjutnya, di file delete.php. Jika data berhasil dihapus maka echo 1 dan jika tidak maka echo 0

<?php

    include 'lib/library.php';

        $nis =$_GET['nis'];

        if(!empty($nis)){

            

            $sql="delete from tabel where nis = '$nis'";

            $mysqli->query($sql) or die ($mysqli->error);

            if($mysqli->query($sql)){

               echo 1;

            } else {

                echo 0;

            }

        }

?>

Hasil akhirnya bisa dilihat dibawah ini:

Terima kasih sudah membaca!!!!