Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Memuat Konten Dinamis pada Modal Bootstrap menggunakan jQuery. Window Modal dapat ditampilkan dengan berbagai cara dengan menggunakan jQuery, Bootstrap dan lainnya. Dalam tutorial ini, kita akan menunjukkan modal Bootstrap dengan konten yang dimuat secara dinamis. Konten disimpan dalam tabel Database yang diambil dan dimuat secara dinamis ke dalam Body modal.
Dalam contoh ini, saya telah menunjukkan tiga tombol yang digunakan untuk memicu metode jQuery AJAX load (). Saya telah menetapkan nama file PHP yang digunakan untuk meminta konten dinamis dari database, juga callback untuk mengaktifkan visibilitas modal. Dalam tutorial sebelumnya, kami telah melihat cara memuat konten halaman dari database menggunakan PHP dan AJAX.
Kode HTML untuk Jendela Modal Bootstrap
Kode HTML ini digunakan untuk menampilkan tombol yang menangani event untuk mendapatkan konten dinamis untuk window model Bootstrap. Ini juga berisi contain window modal dengan header modal, footer dan elemen body. Header dan footer menunjukkan konten statis untuk menampilkan judul dan tombol tutup masing-masing. Body modal dibiarkan kosong dan akan dimuat secara dinamis dengan mengklik tombol.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<div id="demo-modal-target"> <div class="demo-title">Bootstrap Dynamic Modal Window</div> <div onclick="loadDynamicContentModal('bootstrap')" class="btn-modal-target" id="btn-bootstrap">Bootstrap</div> <div onclick="loadDynamicContentModal('jquery')" class="btn-modal-target" id="btn-jquery">jQuery</div> <div onclick="loadDynamicContentModal('responsive')" class="btn-modal-target" id="btn-responsive">Responsive</div> </div> <div class="modal fade" id="bootstrap-modal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Bootstrap Dynamic Modal Content</h4> </div> <div id="demo-modal"></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> |
jQuery Berfungsi untuk Memuat Konten Dinamis dari Basis Data
Fungsi jQuery berikut akan dipanggil pada event tombol klik. Dalam event ini, kategori konten dikirim ke kode PHP untuk mendapatkan data konten dari database berdasarkan kategori yang dipilih. Kode PHP mengirim respons HTML untuk dimuat secara dinamis ke jendela modal.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> function loadDynamicContentModal(modal) { var options = { modal : true, height : 300, width : 500 }; $('#demo-modal').load('get-dynamic-data.php?modal=' + modal, function() { $('#bootstrap-modal').modal({ show : true }); }); } </script> |
Kode php untuk mengambil data dari database;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php require ("DBController.php"); $dbController = new DBController(); $query = "SELECT * FROM tbl_modal_content WHERE modal = '" . $_GET["modal"] . "'"; $result = $dbController->runQuery($query); if(!empty($result)) { ?> <img src='<?php echo $result[0]["image"]?>' /> <div class='modal-text'> <?php echo $result[0]["modal_content"]?> </div> <?php } ?> |
Oke itulah tadi pembahsan saya tentang Memuat Konten Dinamis pada Modal Bootstrap menggunakan jQuery, semoga bermanfaat.