Membuat Slideshow Carousel Bootstrap Sederhana Dengan PHP - MySQL
Setelah beberapa waktu membuat catatan membuat slideshow banner dengan carousel bootstrap, sekarang saya buat catatan juga dengan judul "Membuat Slideshow Carousel Bootstrap sederhana dengan PHP - MySQL". Bedanya apa dengan catatan sebelumnya ? masih sama-sama menggunakan bootstrap sih, slideshownya menggunakan carousel bawaan bootstrap.
Tetapi kali ini, dihubungkan dengan database. Tentu kalau bicara database, pasti akan ada penghubungnya, yaitu bahasa pemrograman. Bahasa pemrograman webnya digunakan "PHP".
Pada catatan kali ini saya juga masih menggunakan bootstrap versi 3.0.2. Jika belum download, silahkan download dulu di situs bootstrapnya. Setelah itu saya buat 2 file php.
1. koneksi.php
2. index.php
*******
1. koneksi.php
<?php
/***************************************************
Membuat Slideshow Bootstrap dengan php dan mysql
Dibuat oleh : Danni Moring
pemrograman : PHP
*************************************************/
/************* Ini untuk koneksi kedatabase nya **********/
$server = "localhost";
$user = "root";
$pass = "";
$db = "test";
/* dalam hal ini saya beri nama databasenya "tes" */
$database = new mysqli($server, $user, $pass, $db);
/*********************************************************/
?>
2. index.php
Nah pelan-pelan dulu saya catatkan, pada file ini, saya sisipkan dulu code seperti dibawah ini
<?php include "koneksi.php"; //menyisipkan file koneksi.php // query tabel slideshow — $sqlslide = "select * from slideshow_banner"; ?>
Code diatas untuk menyisipkan file koneksi.php tadi. Lalu dibuat query tabel slideshow_banner. Jadi nama tabel yang digunakan adalah "slideshow_banner". Untuk urusan tabel, terserah apa saja. Lalu di baris bawahnya sisipkan lagi code dibawah ini.
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../bootstrap-3.0.2/css/bootstrap.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="../bootstrap-3.0.2/js/bootstrap.min.js"></script> </head> <body> </body> </html>
Code diatas adalah sebenarnya sintaks HTML biasa. Sebelumnya kita hubungkan dulu dengan file-file yang berhubungan boostrap tadi. Untuk peletakan foldernya terserah masing-masing. Yang jelas, harus benar penulisan letak folder bootstrapnya. Jika tidak, tentu ga akan jalan slideshow nya.
Nah pada bagian <body> dan </body>, sisipkan ditengah-tengahnya code dibawah ini.
<div class="container">
<div class="col-md-8">
<!— Banner SlideShow nya —>
<div id="dmbannerhead" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
if($res = $database->query($sqlslide)) {
$x = 0;
while ($row = $res->fetch_assoc()) {
if($x==0) $aktif = "active";
else $aktif = '';
?>
<div class="item <?php echo $aktif ?>">
<a href="<?php echo $row['link_slide'] ?>" target="_blank">
<img src="<?php echo $row['gambar_slide'] ?>" alt="<?php echo $row['judul_slide'] ?>" title="<?php echo $row['judul_slide'] ?>">
<div class="carousel-caption">
<h3><?php echo $row['judul_slide'] ?></h3> <!— judul slide —>
<p><?php echo $row['keterangan_slide'] ?></p><!— keterangan slide —>
</div>
</a>
</div>
<?php
$x++;
} // tutup while
} // tutup if
?>
</div>
<a class="left carousel-control" href="#dmbannerhead" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#dmbannerhead" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!— /Banner Slideshow nya —>
</div>
</div>
Lalu pada bagian paling bawah setelah </html> sisipkan baris code untuk menutup database
<?php /* tutup koneksinya */ $database->close(); ?>
Jadi, kalau dilihat secara keseluruhan file index.php itu seperti dibawah ini
<?php
include "koneksi.php"; //menyisipkan file koneksi.php
// query tabel slideshow —
$sqlslide = "select * from slideshow_banner";
?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../bootstrap-3.0.2/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../bootstrap-3.0.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-md-8">
<!— Banner SlideShow nya —>
<div id="dmbannerhead" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
if($res = $database->query($sqlslide)) {
$x = 0;
while ($row = $res->fetch_assoc()) {
if($x==0) $aktif = "active";
else $aktif = '';
?>
<div class="item <?php echo $aktif ?>">
<a href="<?php echo $row['link_slide'] ?>" target="_blank">
<img src="<?php echo $row['gambar_slide'] ?>" alt="<?php echo $row['judul_slide'] ?>" title="<?php echo $row['judul_slide'] ?>">
<div class="carousel-caption">
<h3><?php echo $row['judul_slide'] ?></h3> <!— judul slide —>
<p><?php echo $row['keterangan_slide'] ?></p><!— keterangan slide —>
</div>
</a>
</div>
<?php
$x++;
} // tutup while
} // tutup if
?>
</div>
<a class="left carousel-control" href="#dmbannerhead" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#dmbannerhead" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!— /Banner Slideshow nya —>
</div>
</div>
</body>
</html>
<?php
/* tutup koneksinya */
$database->close();
?>
Tabelnya
— — Table structure for table `slideshow_banner` — DROP TABLE IF EXISTS `slideshow_banner`; CREATE TABLE IF NOT EXISTS `slideshow_banner` ( `idslide` int(11) NOT NULL AUTO_INCREMENT, `judul_slide` varchar(100) DEFAULT NULL, `gambar_slide` varchar(100) DEFAULT NULL, `keterangan_slide` varchar(200) DEFAULT NULL, `link_slide` varchar(100) DEFAULT NULL, PRIMARY KEY (`idslide`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ; — — Dumping data for table `slideshow_banner` — INSERT INTO `slideshow_banner` (`idslide`, `judul_slide`, `gambar_slide`, `keterangan_slide`, `link_slide`) VALUES (1, 'Judul Slide 1', 'http://www.ucarecdn.com/87885e70-acfb-403f-b0c6-98d524eb80a9/ikankan_0.jpg', 'Ini keterangan slide 1', 'http://dannimoring.net/index/tentang-saya'), (2, 'Judul Slide 2', 'http://www.ucarecdn.com/695e7046-48e3-49c5-9fd5-6465914416b6/10375566_1500022956893134_392607903_n.j', 'Ini keterngan untuk slide 2', 'http://dannimoring.net/kategori/php'), (3, 'Judul Slide 3', 'http://i1317.photobucket.com/albums/t626/danloymoring/merahmeriaheuy_zps95003e64.jpg', 'Ini keterangan untuk slide 3', 'http://dannimoring.net/kategori/php');
Hasilnya bisa seperti gambar dibawah ini, atau bisa dilihat demo disini
Catatan : pada <img src=""> perlu diperhatikan path gambarnya. Dalam hal ini saya menggunakan gambar yang diambil dari url, jika diambi dari folder maka pastikan nama foldernya.
Kurang lebihnya maaf jika catatan ini acak-acakan.
Facebook 
Twitter
Google PlusKomentar untuk "Membuat Slideshow Carousel Bootstrap Sederhana Dengan PHP - MySQL"
oi
Kok gak bisa ya mas,masalahnya sama kayak yg dibawah,slide nya gk muncul,dan gambar hanya muncul ke arah bawah
klo bisa tolong kirim full script nya ke email saya
Edy RIcardo
bg kok di aku nggak work yak? salah nya dimana nya
Danni Moring
coba ikutin aja dulu contohnya, klo dari contoh itu jalan atau ga...btw perhatikan juga versi bootstrap nya..
Dioda
Bang, itu yg href previous sama next nya diisi sama kaya yg di artikel apa diganti? Btw punya saya jadinya gambar pada kebawah semua, nggak ada slideshownya
Danni Moring
<a class="left carousel-control" href="#dmbannerhead" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
yang href="#dmbannerhead" itu disamakan #dmbannerhead yang di line 4 <div id="dmbannerhead" class="carousel slide" data-ride="carousel">
jadi klo yang di line 4 itu id div nya bukan dmbannerhead ya disesuaikan dengan id masing-masing div di codemu
Danni Moring
disamakan dulu codenya, tampil ga slideshow-nya...termasuk versi bootstrap nya juga diperhatikan
ikbal
ni ga ada js nya mastah?
Danni Moring
itu diparagraph 3 saya kasih tautkan link-nya, pakai bootstrap..jadi css dan js-nya pakai bootstrap...sesuai dengan judulnya. Kalau belum ada bootstrap-nya, download dulu. Link sudah saya tautkan di tulisan diatas...
Wiwit Setyo Prayogo
Tutuor yang sangat bagus dan bermanfaat, terima kasih.
Tetapi saya da pertanyaan, jika di dalam carousel ada thumnail dan memakai span, bagaimana cara menampilkan 4 thumnail dalam carousel tersebut. jika berkenan mohon bantuaannya.
Terima kasih banyak sebelumnya
Danni Moring
maksudnya persatu slide itu ada 4 gambar skelaigus ya ? klo itu belum saya coba
Android Maker
Nice share mas...
Maaf kalo komentar saya menganggu....
Kalo punya waktu..bisa kunjungi blog saya http://ilmu-detil.blogspot.co.id/. Saya juga mengshare bootstrap carousel statis, bootstrap carousel retrieve dari database serta bootstrap carousel multicolumn
re
Saya tertarik dengan tulisan anda mengenai pengembangan komputarisasi.Benar benar sangat bermamfaat dalam menambah wawasan kita menjadi mengetahui lebih jauh mengenai ilmu Teknologi.Saya juga mempunyai artikel yang sejenis mengenai komputarisasi yang bisa anda kunjungi di<a href="http://www.lepkom.gunadarma.ac.id/"> sini</a>
Danni Moring
kok jadi spam gini ya 
di tulisan lain, komentarnya sama juga...
strez
mas klo yg tampil nya ada 4 kolom gmn ya mas bikinnya?
saya ngambil carousel nya disini http://bootsnipp.com/snippets/featured/carousel-product-cart-slider
Danni Moring
itu dilinkmu yang dikasih bukannya udah ada code nya ya ?
strez
maksud saya gmn caranya klo ditampilin datanya dari database mas,, klo pake tutorial mas yg ini bisa tampil tp cuma 1 produk mas yg tampil setiap slide,, nah gmn caranya yg tampil dalam 1 slide itu ada 4 kolom trus slide berikutnya 4 kolom lg mas..
mudah2an paham sama pertanyaan saya,, hehehe
Danni Moring
ooo maksudnya pake snippet yang km kasih linknya tadi tapi ambil datanya dari database gitu ? oke nanti yak, saya buat postingan..soalnya kolom komentar agak sulit..
Danni Moring
oke..tp saya ga janji kapan, soalnya lg banyak kerjaan...
bang
ga ada cara buat edit/ganti gambar2nya ya mas ?
Danni Moring
itu kan berdasarkan dari tabel database...kalau mau ganti/edit gambar ya dari isi tabelnya..kalau mau lagi secara aplikasi, berarti harus buat form edit..dicatatan ini cuma konsen ke slideshow nya..bukan dari input, edit, tapi cuma hasil slideshow nya yang data image/gambarnya diambil dari tabel..
bang
ga ada buat cara edit gmbarnya ya mas ,
kalo pngen ganti gambar2nya gmna ?
eka
tampilan gambar nya bukan slide, tapi muncul semua kebawah
BalasDanni Moring
maksudnya gimana ya mas ? udah lihat demo nya mas ? ditulisan itu ada link demo nya..
Balas
Mau dapat tambahan dollar dengan kemampuan desainmu ? ayo salurkan bakat desainmu dengan mengupload desain yang kamu buat dan bisa menghasilkan pendapatanmu jika desain kamu laku terjual di produk teepublic. Klik disini untuk register. Semoga sukses ya
