Menampilkan Data dari Database ke Modal Bootstrap

Artikel yang saya buat pada postingan kali ini membahas tentang bagaimana cara menampilkan data yang ada pada database ke dalam modal bootstrap. Data yang ditampilkan berdasarkan id dari data yang dipilih. Biasanya contoh ini digunakan dalam data pada tabel yang memiliki aksi detail,update maupun delete, namun juga bisa untuk aksi-aksi yang lainnya sesuai dengan kebutuhan dari sistem yang dikembangkan.

Baca Juga : Contoh Login Sederhana dengan Codeigniter dan Bootstrap
Cara Membuat Edit Data Secara Langsung Pada Tabel
Cara Mengakses Database Hosting Online dari Navicat

Dari judul postingan ini tentunya sudah jelas yang kita butuhkan adalah frameworks css bootstrap. Kemudian juga library jQuery karena nantinya akan menggunakan ajax untuk mengambil data dari database. Selanjutnya webserver dan mysql database karena kita menggunakan php dan database bisa menggunakan xampp atau wampp.

Ok langsung saja masuk dalam praktek. Berikut adalah struktur file yang digunakan
-css
-- bootstrap.css
-fonts
-js
-- bootstrap.js
-- jquery.js
-index.php
-koneksi.php
-modal_detail.php

* Jangan lupa untuk membuat database juga dengan nama bebas sesuai keinginan, kalau pada contoh ini saya buat dengan nama db_data_ajax. (bisa didownload pada link di bawah)

Biar ga ribet nanti saya akan sediakan link download file dan database dibawah artikel ini, sehingga temen-temen bisa lebih gampang untuk memahami artikel yang saya tulis ini.

index.php

<html>

<head>

<link rel="stylesheet" href="css/bootstrap.css" type="text/css">

</head>
<body>

<?php
include"koneksi.php";

$sql = "select * from data_provinsi";
$result = mysqli_query($conn,$sql);
?>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Nama Provinsi</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
//tampilkan data provinsi pada select provinsi
while($row=mysqli_fetch_assoc($result)){

echo"<tr><td>".$row['nama_provinsi']."</td><td><a id='edit_data' data-toggle='modal' data-target='#modal_provinsi' href='modal_detail.php?id=".$row['id_provinsi']."'>Detail</a></td></tr>";

}
?>
</tbody>
</table>
</div>

<div class="modal fade" id="modal_provinsi" tabindex="-1" role="dialog" aria-labelledby="provinsi" aria-hidden="true"></div>


<script src="js/jquery-1.11.2.min.js"></script>

<script src="js/bootstrap.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('a#edit_data').click(function(){
var url = $(this).attr('href');
$.ajax({
url : url,
success:function(response){
$('#modal_provinsi').html(response);
}
});
});

});
</script>
</body>
</html>

koneksi.php

<?php
$database = 'db_data_ajax'; //nama database
$user = 'root'; //nama user db
$pass = ''; //pass db
$host = 'localhost'; //host db, sesuaikan dengan settingan di komputer masing2.

$conn = mysqli_connect($host,$user,$pass,$database);

if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}

?>

modal_detail.php

<?php
include"koneksi.php";
$id_provinsi = $_GET['id'];
$sql = "select * from data_provinsi where id_provinsi='".$id_provinsi."'";
$result = mysqli_query($conn,$sql);

while($row=mysqli_fetch_assoc($result)){
$nama_provinsi=$row['nama_provinsi'];
}
?>

<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Detail Provinsi</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label class="control-label">Nama Provinsi</label>
<input type="text" name="nama_provinsi" id="nama_provinsi" class="form-control" value="<?=$nama_provinsi?>">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Ok</button>
</div>
</div>
</div>

Berikut adalah hasil dari script di atas.