Tutorial Cara Menampilkan Data Dinamis Kedalam Modal Bootstrap

September 28, 2016 / Diposting Oleh TondanoWeb.com / PHP, Tutorial

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 ;

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

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>

<!DOCTYPE html>

<head>

<title>Passing Data To Modal</title>

</head>

<body>

<tr>

<th>Nama Barang</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>

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

<h4 class="modal-title">Detail Barang</h4>

</div>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Keluar</button>

</div>

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

</body>

</html>

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

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();
?>

<?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) { ?>

<tr>

<td>Kode Barang</td>

</tr>

<tr>

<td>Nama Barang</td>

</tr>

<tr>

<td>Deskripsi 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.

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

Tags: bootstrap, css, framework, jquery, php, php5.6, php7.0, tutorial, web development

Pingback: Tutorial Membuat Form Serta Melakukan Edit/Update Data Dinamis di Dalam Modal Bootstrap - TondanoWeb.com()
febri ramadani

#ask
kalau datanya ga keluar gimana gan ?
koneksinya udah benar, dan rownya kebaca ad 5 buah data.
- braiser
  
  gak bisa keluar gimana gan @febri_ramadani:disqus ?
  sorry baru sempat baca komennya..
andri suryono

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

kalau idnya type datanya vharcar gk bisa ya?
dika

Ada kesalahan di detail.php dengan kesalahannya “Invalid argument supplied for foreach()”
- braiser
  
  scriptnya sudah sesuai dengan yang diatas ?
  - dika
    
    Saya mencobanya dengan kasus lain, apakah bisa modal detail itu menampilkan seluruh isi tabel
    - TondanoWeb.com
      
      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.
- mhmdawaludin
  
  benar, saya juga memliki masalah yang sama.

Tutorial Cara Menampilkan Data Dinamis Kedalam Modal Bootstrap

Baca Juga :

Tags: bootstrap, css, framework, jquery, php, php5.6, php7.0, tutorial, web development