Melanjutkan dari sesi sebelumnya, pada kesempatan kali ini saya akan menjelaskan cara membuat carousel slide horizontal bootstrap multiple item dari database di php part2, jika pada sesi sebelumnya terlihat pada kode HTML dimana setiap beberapa image dibungkus dengan class <div class=”item active”> dan <div class=”item”> yang nantinya akan tampil per slide dengan beberapa gambar. Dan perlu teman-teman ketahui, pada pembungkus class tersebut dimana menjadi salah satu permasalahan yang ada jika di implementasikan dengan php dan database, karena diperlukan terlebih dahulu untuk mengelompokan image yang nantinya akan dibungkus dengan class tersebut, dan berikut contoh yang akan saya berikan untuk penerapannya.
Berikut Tahapannya :
- Disini saya asumsikan teman-teman sudah memiliki tabel database dan file untuk melakukan koneksi ke database dengan nama file koneksi.php yang nantinya akan digunakan untuk menampilkan gambar tersebut
- Teman-teman buat terlebih dahulu satu buah file dengan nama index.php pada folder project teman-teman, dan ketikan kode seperti di bawah ini :
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<?php include "koneksi.php"; ?> <style type='text/css'> .carousel { margin-bottom: 0; padding: 0 40px 30px 40px; } .carousel-control { left: -12px; } .carousel-control.right { right: -12px; } .carousel-indicators { right: 50%; top: auto; bottom: 0px; margin-right: -19px; } .carousel-indicators li { background: #c0c0c0; } .carousel-indicators .active { background: #333333; } </style> <div class='container'> <div class='row'> <div class='slide-horizontal'> <div class='col-md-12'> <div id='myCarousel' class='carousel slide'> <div class='carousel-inner'> <?php $tampil_gambar = mysqli_query($connection, "SELECT * FROM table ORDER BY field_table DESC"); // seuaikan dengan query mysql select tabel untuk menampilkan semua gambar echo "<div class='item active'>"; echo "<div class='row'>"; while ($row=mysqli_fetch_array($tampil_gambar)){ // looping semua record tabel if ($i !=0 && ($i % 4 == 0)) // pengelompokan looping class item per 4 record { echo "</div>"; echo "</div>"; echo "<div class='item'>"; echo "<div class='row'>"; } // sesuaikan dengan lokasi folder gambar tersimpan dan field gambar pada tabel database mysql echo "<div class='col-md-3'><a href='#' class='thumbnail'><img src='lokasi_folder_gambar/$row[field_image]' alt='Image' style='max-width:100%;'></a></div>"; $i++; } echo " </div></div>"; ?> </div><!--.penutup carousel-inner--> <a data-slide='prev' href='#Carousel' class='left carousel-control'>‹</a> <a data-slide='next' href='#Carousel' class='right carousel-control'>›</a> </div><!--.penutup myCarousel--> </div> <!-- penutup col-md-12 --> </div> <!-- penutup slide-horizontal --> </div> </div> <script> $(document).ready(function() { $('#myCarousel').carousel({ interval: 10000 }) }); </script> |
- Jika sudah save file tersebut dan lihat hasilnya pada browser teman-teman.
Sampai di sini penjelasan saya mengenai cara membuat carousel slide horizontal bootstrap multiple item dari database di php, semoga bermanfaat.