Bootstrap pada PHP

Assalamu'alaikum, hallo semuanya! Kembali lagi dengan saya Fadli Mahesa, seorang siswa yang bersekolah di SMKN 4 Bandung dan duduk di bangku kelas XI RPL 3. Kali ini saya akan membagikan lagi, lagi, dan lagi sedikit ilmu di dunia percodingan, yaitu tentang Bootstrap pada PHP. Mari kita bahas!

Baik, pembahasan kali ini adalah pembahasan lanjutan dari postingan sebelumnya, untuk source code lebih lengkap silahkan cek postingan sebelumnya atau pada github yang terterta di bawah.

Untuk menambahkan fitur Bootstrap kita harus menambahkan beberapa syntax/codingan pada source code kita, dan menambahkan file Bootstrap pada folder codingan kita.

Pertama kita download terlebih dahulu file Bootstrap lalu menyimpannya di folder codingan kita. Untuk file bootstrapnya silahkan klik DISINI. Simpan dalam folder assests seperti ini :

Lalu selanjutnya kita akan mulai menambahkan beberapa syntax/codingan pada source code kita.

Tambahkan syntax/codingan untuk memanggil Bootstrap CSS dan Js pada PHP letakkan codingan dibawah tepat diatas CSS awal di file v_index.php


<script type="text/javascript" src="assets/media/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/media/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="assets/media/plugins/toastr/toastr.min.js"></script>

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

Selutuh codingan diatas digunakan untuk memanggil bootstrap yang sudah kita simpan di folder codingan kita.

Lalu ubah codingan pada bagian aksi edit dan delete dan tambahkan "btn-warning" dan "btnDelete" di file v_index.php seperti dibawah ini:



<a href="edit.php?nis=<?= $siswa["nis"]; ?>" class="btn badge primary btn-warning">Edit</a>
<a href="delete.php?nis=<?= $siswa["nis"]; ?>" class="btn badge danger btnDelete">Delete</a>

class btnDelete digunakan untuk memanggil fitur yang akan tersambung pada codingan dibawah.

Selanjutnya tambahkan syntax/codingan dibawah untuk membuat fitur Bootstrap pada codingan kita di file v_index.php :



<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" arial-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" name="button">Ya</button>
            <button type="button" class="btn btn-danger" data-dismiss="modal" name="button">Tidak</button>
          </div>
        </div>

      </div>

      <script type="text/javascript">
        console.log("ngetes");
            $(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 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 bisa dihapus");
                    }
                    }
                })
                })
            })
            })
    </script>

Simpan syntax/codingan diatas tepat sebelum tag </body>.

Terakhir ubah file delete.php menjadi :



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

Hasil percabangan 1 dan 0 akan tersambung ke syntax/codingan script yang di tambahkan pada file v_index.php .

Hasil :