Menampilkan Tabel Data Pada Modal Bootstrap

Minggu, 09 Mei 2021

Menampilkan Tabel Data Pada Modal Bootstrap

in published on 01.15 leave a reply
Kesempatan kali ini kita akan membuat sebuah modal yang nantinya akan menampilkan data-data dari Database di dalam tabel. Penampilan data semacam ini terkadang diperlukan.  Maka pada kesempatan kali ini kita akan mencoba membuatnya.
 
Sebelum memulai, pastikan kalian sudah mendownload file Bootstrap dan Jquery. Silahkan includekan file tersebut kedalam projek kalian pada bagian Header.
 
Sekarang kita anggap telah memiliki Database, dengan nama tabel Siswa.

HTML 

<head>
  <!--Bootstrap 3.3.7-->
  <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- jQuery 3 -->
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
</head>

Setelah urusan diatas selesai, maka buatlah modalnya, kalian bisa menggunakan tag html yang sudah ada di web dokumentasi Bootstrap, semisal kalian meletakan script modal ini di file INDEX.PHP. berikut modalnya : 

 

<!--Tombol pemicu modal-->
<button class="btn  bg-purple col-md-12" data-toggle="modal" data-target="#modal-selsis">Pilih</button>

<div class="modal fade" id="modal-selsis" style="display: none;"  data-backdrop="static" data-keyboard="false" data-target=".bs-example-modal-lg">
  <div class="modal-dialog modal-lg" >
    <div class="modal-content radius-12">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">X</span></button>
        <h4 class="modal-title">Pilih Siswa</h4>
      </div>
      <div class="modal-body">
        <div style="padding:10px">
           <div class="table-responsive">
             <input type="text" id='inputsc' class="form-control" placeholder='Cari data . . . '>
             <br>
             <div class="scc">
               <table id="tb-sc" class="table table-striped">
                  <thead>
                     <tr>
                       <th width="20">NO</th>
                       <th>NIS</th>
                       <th>NAMA SISWA</th>
                       <th>KELAS</th>
                       <th align="center">STATUS</th>
                       <th width='100'>#</th>
                     </tr>
                  </thead>
                  <tbody class='tablesc' id="data-siswa">
                  </tbody>
               </table>
            </div>
           </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger  ml-3" data-dismiss="modal">Batal</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

Perhatikan bagian ID, id="modal-selsis" , id='inputsc'  , id="tb-sc" dan id="data-siswa".  ID ini akan berperan ditahap selanjutnya. Sementara itu kita fokus ke id="modal-selsis" dan id="data-siswa".

PENJELASAN

id="modal-selsis" merupakan id dari modal yang kita buat, id ini juga digunakan pada button / tombol pemicu modal sebagai target modal. (Lihat script paling awal). 

id="data-siswa" merupakan id yang akan digunakan untuk menampilkan data siswa pada modal, dikarenakan kita menggunakan JQUERY, maka hasil data yang di ambil akan ditempatkan pada suatu wadah, id inilah yang akan menjadi wadah data siswa nantinya. 

id='inputsc'  , id="tb-sc" kedua id ini tidak akan digunakan, tapi akan kita bahas pada artikel berikutnya, id ini nantinya akan berguna untuk melakukan pencarian data pada tabel siswa didalam modal.

JQUERY

Sekarang tuliskan script berikut, dapat ditulis dibagian akhir halaman sebelum tag </body>. Script berikut akan bertugas untuk memuat data dari database melalui file .php.  

<script>
 $(document).ready(function(){
  $("#modal-selsis").on("show.bs.modal", function(e) {
      var link = $(e.relatedTarget);
      var id = '1';
      $.ajax({
          url: 'module/nilai/load_siswa.php',
          method: 'POST',
          data: {id:id},
          success: function(hasil) {
              $('#data-siswa').html(hasil);
          }
      });
  });
 });
</script>

PHP 

Langkah berikutnya kita membuat File PHP untuk me-load data dari database, untuk script PHP terlihat seperti berikut : ( beri nama file ini dengan load_siswa.php )


<?php
  include"../../model/siswa/mod_siswa.php";
  include "../../config/function.php";
  $ob_sis  = new Siswa();

  $load    = $ob_sis->show_siswa();
  if(!empty($load)){
  	 foreach ($load as $sis) { @$no++;
  ?>
  	 <tr>
	   <td align="center"><?=$no?></td>
	   <td><?=$sis['sw_nis']?></td>
	   <td><?=$sis['sw_nama']?></td>
	   <td><?=$sis['ks_nama']?></td>
	   <td align="center">
	   <span class="badge <?php if($sis['sw_status']=='on'){echo 'bg-green';}else{echo'bg-red';} ?>"><?=strtoupper($sis['sw_status'])?></span>
	   </td>
	   <td align="center">
	      <button class="btn btn-sm btn-success pilih-ah" data-nis="<?=$sis['sw_nis']?>" data-nama="<?=$sis['sw_nama']?>" data-kelas="<?=$sis['ks_nama']?>">PILIH</button>
	   </td>
     </tr>
  <?php	 	
  	 }$no=1;
  }else{
     echo "<div class='alert alert-warning'>Gagal load data...</div>";
  }
?>

Untuk file mod_siswa.php dan function.php kalian bisa kunjungi artikel Membuat CRUD Siswa Dengan Php - 2. 

Sejauh ini langkah kita sudah hampir selesai, Silahkan simpan project kalian dan uji coba, hasilnya akan tampak seperti berikut :

modal

Untuk lebih jelas, Klik pada gambar.

 

Kesimpulan

Modal bootsrap merupakan salah satu iterface yang dapat dimanfaatkan untuk keperluan CRUD dalam sebuah project, untuk menerapkannya diperlukan file css bootstrap berikut dengan Jquery. Script diatas seharusnya mampuh untuk menghandle penampilan data pada tabel di dalam modal. Pemangilan modal dapat dilakukan baik menggunakan tombol ataupun metode lainnya.

Previous Post
Next Post
IT Tech

post written by:

0 Post a Comment:

Gunakan kolom komentar dengan baik dan bijak.