Tutorial Cara Menampilkan Data Dinamis Kedalam Modal Bootstrap

Kali ini akan membahas Tutorial Cara Menampilkan Data Dinamis Kedalam Modal Bootstrap.

Dikalangan Web Programmer, PHP dan Bootstrap sudah bukan sesuatu yang asing lagi.  PHP diibaratkan sebuah mesin sedangkan Bootstrap untuk kebutuhan casing serta tampilannya agar terlihat tidak kaku.

Dalam tutorial kali ini kita akan membuat sesuatu yang gak spesial-spesial amat yaitu menampilkan data yang di ambil dari Database kemudian di tampilkan ke dalam Modal Bootstrap.

Baca Juga 

Oke, gak usah banyak basa-basi kita langsung saja ke pokok permasalahan.

Langkah Pertama sobat buat dulu sebuah database, terserah apa namanya kemudian buat sebuah table dengan nama table “barang” atau copy saja script dibawah ini :

CREATE TABLE IF NOT EXISTS `barang` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `kode_barang` varchar(100) NOT NULL,
  `nama_barang` varchar(100) NOT NULL,
  `desc_barang` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;





Kemudian sobat insert-kan value atau data ke dalam tabel tersebut :
INSERT INTO `barang` (`id`, `kode_barang`, `nama_barang`, `desc_barang`) VALUES
(1, 'B001', 'Televisi', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore'),
(2, 'B002', 'Radio', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore'),
(3, 'B003', 'Laptop', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore'),
(4, 'B004', 'Laptop', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore'),
(5, 'B005', 'Keyboard', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore');

Setelah struktur database dibuat, selanjutnya kita masuk ke dalam pengolahan data.

Atau silahkan mendownload databasenya disini.

Kemudian langkah ketiga, sobat buat satu file dan beri nama bootstrap.php lalu sobat pastekan script dibawah ini ke dalam file tersebut. Dalam hal ini, terlebih dulu kita akan menampillkan data ke dalam tabel.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Passing Data To Modal</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>

  <body>
    <div class="container">
      <div class="row"> 
        <table class="table table-bordered">
          <tr>
            <th>No</th>
            <th>Nama Barang</th>
            <th colspan="2">Opsi</th>
          </tr>
          <?php
            $servername = "localhost";
            $username = "root";
            $password = "root";
            $dbname = "test";

            // Membuat Koneksi
            $koneksi = new mysqli($servername, $username, $password, $dbname);
            
            // Melakukan Cek Koneksi
            if ($koneksi->connect_error) {
                die("Koneksi Gagal : " . $koneksi->connect_error);
            } 

            //Melakukan query
            $sql = "SELECT * FROM barang";
            $hasil = $koneksi->query($sql);
            $no = 1;
            if ($hasil->num_rows > 0) {
                foreach ($hasil as $row) { ?>
                  <tr>     
                  <td><?php echo $no; ?></td>
                  <td><?php echo $row['nama_barang']; ?></td>
                  <?php echo "<td><a href='#myModal' class='btn btn-default btn-small' id='custId' data-toggle='modal' data-id=".$row['id'].">Detail</a></td>"; ?>
                  </tr>
            <?php 
            $no++; 
            } 
              } else { 
            echo "0 results"; 
              } $koneksi->close(); 
            ?>

        </table>
      </div>
    </div>

    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Detail Barang</h4>
                </div>
                <div class="modal-body">
                    <div class="fetched-data"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Keluar</button>
                </div>
            </div>
        </div>
    </div>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
        $('#myModal').on('show.bs.modal', function (e) {
            var rowid = $(e.relatedTarget).data('id');
            //menggunakan fungsi ajax untuk pengambilan data
            $.ajax({
                type : 'post',
                url : 'detail.php',
                data :  'rowid='+ rowid,
                success : function(data){
                $('.fetched-data').html(data);//menampilkan data ke dalam modal
                }
            });
         });
    });
  </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

Jika semuanya berjalan lancar, hasilnya akan seperti screenshot dibawah ini :

bootstrap1

Langkah keempat, kita akan menampilkan data ke dalam modal, ketika tombol detail di klik maka akan muncul tampilan modal beserta data yang diambil dari database berdasarkan id.





Dalam hal ini sobat buat lagi satu buah file dan beri nama detail.php kemudian sobat paste-kan script dibawah ini :
<?php
    $servername = "localhost";
    $username = "root";
    $password = "root";
    $dbname = "test";

    // membuat koneksi
    $koneksi = new mysqli($servername, $username, $password, $dbname);

    // melakukan pengecekan koneksi
    if ($koneksi->connect_error) {
        die("Connection failed: " . $koneksi->connect_error);
    } 

    if($_POST['rowid']) {
        $id = $_POST['rowid'];
        // mengambil data berdasarkan id
        $sql = "SELECT * FROM barang WHERE id = $id";
        $result = $koneksi->query($sql);
        foreach ($result as $baris) { ?>
            <table class="table">
                <tr>
                    <td>Kode Barang</td>
                    <td>:</td>
                    <td><?php echo $baris['kode_barang']; ?></td>
                </tr>
                <tr>
                    <td>Nama Barang</td>
                    <td>:</td>
                    <td><?php echo $baris['nama_barang']; ?></td>
                </tr>
                <tr>
                    <td>Deskripsi Barang</td>
                    <td>:</td>
                    <td><?php echo $baris['desc_barang']; ?></td>
                </tr>
            </table>
        <?php 

        }
    }
    $koneksi->close();
?>

Setelah langkah-langkah diatas selesai, kemudian sobat jalankan file bootstrap.php

Dan sekali lagi jika semuanya berjalan lancar maka hasilnya akan seperti screenshot dibawah ini.

bootstrap2

 

Sekian artikel tutorial untuk kali ini, jika sobat memiliki kesulitan, pertanyaan ataupun kritikan silahkan menghubungi kami melalui form komentar dibawah.





You May Also Like

13 Comments

  1. #ask
    mau tanya pak,, saya bisa muncul,, tapi untuk pagination page kedua kenapa gk bisa muncul ya..
    saya pake data tables..
    minta solusinya yak

        1. bisa, tinggal menyesuaikan saja dengan kebutuhan, apa saja yang akan di tampilkan.
          Tapi jika ukuran tablenya besar dan memiliki banyak kolom, berarti css modalnya harus dicustomisasi lagi, diperbesar ukurannnya menyesuikan dengan ukuran tabel.

Leave a Reply

Your email address will not be published. Required fields are marked *