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
- Tutorial Menghapus Data PHP/MySQL Melalui Konfirmasi Bootstrap Modal
- Tutorial Membuat Form Serta Melakukan Edit/Update Data Dinamis di Dalam Modal Bootstrap
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 ;
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">×</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 :
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.
Sekian artikel tutorial untuk kali ini, jika sobat memiliki kesulitan, pertanyaan ataupun kritikan silahkan menghubungi kami melalui form komentar dibawah.
#ask
kalau datanya ga keluar gimana gan ?
koneksinya udah benar, dan rownya kebaca ad 5 buah data.
gak bisa keluar gimana gan @febri_ramadani:disqus ?
sorry baru sempat baca komennya..
#ask
mau tanya pak,, saya bisa muncul,, tapi untuk pagination page kedua kenapa gk bisa muncul ya..
saya pake data tables..
minta solusinya yak
kalau idnya type datanya vharcar gk bisa ya?
Ada kesalahan di detail.php dengan kesalahannya “Invalid argument supplied for foreach()”
scriptnya sudah sesuai dengan yang diatas ?
Saya mencobanya dengan kasus lain, apakah bisa modal detail itu menampilkan seluruh isi tabel
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.
benar, saya juga memliki masalah yang sama.
cara ngatasin “Invalid argument supplied for foreach()” gimana gan?
tolong kalo tau send email ya gan denisufyan68@gmail.com
kalo dalam 1 file ada beberapa modal gmn gan caranya ?