Tutorial Cara Menampilkan Data Dinamis Kedalam Modal Bootstrap

28 September 2016

TondanoWeb.com

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

ARTIKEL TERBARU

Tutorial Laravel - Cara Mudah Instalasi Framework Laravel

Tutorial Cara Setting Email Forwarder Dari GMAIL ke Email Pribadi

Cara Membuat Akun Email Di Hosting CPanel

Apa itu MVC (Model, View, Controller) ?

Tutorial Instalasi Composer di Linux (Ubuntu dan Linux Mint)

KATEGORI

Bootstrap Studio (1)
Codeigniter (5)
Freebies (3)
How To (5)
Info (16)
Inkscape (2)
Laravel (1)
Linux (2)
Linux Mint (1)
Minahasaland (2)
PHP (11)
Tips dan Trik (4)
Tutorial (11)
Web Development (2)

Programming Is Beautiful