Bootstrap Carousel Data Dari Database MySQL. Kali ini saya akan buat sebuah tutorial bagaimana cara membuat Bootstrap Carousel (Image Slider) yang mana data (gambar dan deskripsi) disimpan di database MySQL dan akan ditampilkan dengan script PHP.
Pertama silahkan download dahulu source code Bootstrap disini.
Jika sudah download silahkan ekstrak file tersebut, dan anda akan mendapat sebuah folder dengan nama dist, nah didala folder ini ada 3 buah folder yaitu css, font dan js. Ketiga folder inilah yang akan dipakai.
Silahkan pindahkan 3 folder tersebut ke direktori anda membuat tutorial ini. Kalau di kasus saya, akan saya pindahkan di D:\AppServ\tutotialweb\carousel\
Nah sekarang buat folder baru di dalam folder Anda tadi yang sejajar dengan 3 buah folder tadi. Buat folder dengan nama img. Folder ini digunakan untuk menyimpan file image/gambar untuk Carousel nantinya. Struktur foldernya bisa dilihat seperti di bawah ini:
Karena nantinya data dari slider ini akan disimpan di database MySQL, maka buat dulu sebuah Database di phpMyAdmin. Dalam kasus ini saya membuat database dengan nama tutorialweb. Dan Dumping script SQL dibawah ini untuk mendapatkan sebuah tabel carousel beserta field-fieldnya, dan berikut ini scriptnya:
1 2 3 4 5 6 7 8 9 10 11 12 13 | DROP TABLE IF EXISTS `carousel`; CREATE TABLE `carousel` ( `id` int(11) NOT NULL auto_increment, `title` varchar(30) NOT NULL, `text` varchar(255) NOT NULL, `img` varchar(255) NOT NULL, `active` int(2) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ; INSERT INTO `carousel` VALUES (1, 'TUTORIALWEB.NET', 'tutorial bagaimana cara membuat Bootstrap Carousel (Image Slider) yang mana data (gambar dan deskripsi) disimpan di database MySQL dengan PHP', 'slider-1.jpg', 1); INSERT INTO `carousel` VALUES (2, 'Bootstrap Carousel', 'tutorial bagaimana cara membuat Bootstrap Carousel (Image Slider) yang mana data (gambar dan deskripsi) disimpan di database MySQL dengan PHP', 'slider-2.jpg', 0); INSERT INTO `carousel` VALUES (3, 'PINO.WEB.ID', 'tutorial bagaimana cara membuat Bootstrap Carousel (Image Slider) yang mana data (gambar dan deskripsi) disimpan di database MySQL dengan PHP', 'slider-3.jpg', 0); |
Jika sudah anda akan mendapatkan 3 data yang sudah di masukkan ke dalam database.
Selanjutnya buat file PHP baru, beri nama index.php, dan copy paste script 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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | <!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"> <title>Bootstrap Carousel - Data Dari Database MySQL</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="css/custom.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row"> <h2>Bootstrap Carousel - Data Dari Database MySQL - TUTORIALWEB.NET</h2> </div> <div class="row"> <!-- The carousel --> <div id="transition-timer-carousel" class="carousel slide transition-timer-carousel" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <?php //connet database mysql_connect("localhost", "root", "root"); mysql_select_db("tutorialweb"); $count = mysql_query("SELECT COUNT(*) FROM carousel") or die(mysql_error()); $count = mysql_result($count,0); for($i=0; $i<$count;$i++){ echo '<li data-target="#transition-timer-carousel" data-slide-to="'.$i.'"'; if($i==0){ echo 'class="active"'; } echo '></li>'; } ?> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <?php //Query database $sql = mysql_query("SELECT * FROM carousel ORDER BY active DESC"); //$sql = mysql_query("SELECT * FROM carousel ORDER BY active DESC"); while($row = mysql_fetch_assoc($sql)){ echo ' <div class="item '; if($row['active'] == 1){ echo 'active'; } echo '"> <img src="img/'.$row['img'].'" /> <div class="carousel-caption"> <h1 class="carousel-caption-header">'.$row['title'].'</h1> <p class="carousel-caption-text hidden-sm hidden-xs"> '.$row['text'].' </p> </div> </div> '; } ?> </div> <!-- Controls --> <a class="left carousel-control" href="#transition-timer-carousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#transition-timer-carousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> <!-- Timer "progress bar" --> <hr class="transition-timer-carousel-progress-bar animate" /> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script> $(document).ready(function() { //Events that reset and restart the timer animation when the slides change $("#transition-timer-carousel").on("slide.bs.carousel", function(event) { //The animate class gets removed so that it jumps straight back to 0% $(".transition-timer-carousel-progress-bar", this) .removeClass("animate").css("width", "0%"); }).on("slid.bs.carousel", function(event) { //The slide transition finished, so re-add the animate class so that //the timer bar takes time to fill up $(".transition-timer-carousel-progress-bar", this) .addClass("animate").css("width", "100%"); }); //Kick off the initial slide animation when the document is ready $(".transition-timer-carousel-progress-bar", "#transition-timer-carousel") .css("width", "100%"); }); </script> </body> </html> |
Jangan lupa disimpan.
Silanjutnya buat file CSS baru, beri nama custom.css, dan copy paste script 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 | .transition-timer-carousel .carousel-caption { background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 4%, rgba(0,0,0,0.5) 32%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(4%,rgba(0,0,0,0.1)), color-stop(32%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 4%,rgba(0,0,0,0.5) 32%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 4%,rgba(0,0,0,0.5) 32%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 4%,rgba(0,0,0,0.5) 32%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 4%,rgba(0,0,0,0.5) 32%,rgba(0,0,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ width: 100%; left: 0px; right: 0px; bottom: 0px; text-align: left; padding-top: 5px; padding-left: 15%; padding-right: 15%; } .transition-timer-carousel .carousel-caption .carousel-caption-header { margin-top: 10px; font-size: 24px; } @media (min-width: 970px) { /* Lower the font size of the carousel caption header so that our caption doesn't take up the full image/slide on smaller screens */ .transition-timer-carousel .carousel-caption .carousel-caption-header { font-size: 36px; } } .transition-timer-carousel .carousel-indicators { bottom: 0px; margin-bottom: 5px; } .transition-timer-carousel .carousel-control { z-index: 11; } .transition-timer-carousel .transition-timer-carousel-progress-bar { height: 5px; background-color: #5cb85c; width: 0%; margin: -5px 0px 0px 0px; border: none; z-index: 11; position: relative; } .transition-timer-carousel .transition-timer-carousel-progress-bar.animate{ /* We make the transition time shorter to avoid the slide transitioning before the timer bar is "full" - change the 4.25s here to fit your carousel's transition time */ -webkit-transition: width 4.25s linear; -moz-transition: width 4.25s linear; -o-transition: width 4.25s linear; transition: width 4.25s linear; } |
Simpan didalam folder css ya..
Nah, sampai sini sudah bisa. Silahkan dicoba. Untuk penjelasan kode dan link download menyusul ya.. 😀
Pertama silahkan download dahulu source code Bootstrap disini. pas ane klik disini hasilnya not fond om
udah dibenerin
prosedur sdh semua dikerjakn tahap demi tahap tp gambar blm nongol, mohon petunjuk selanjutny y om?
siapkan gambar nya, kalau di database gambarnya diberi nama slider-1.jpg, slider-2.jpg, slider-3.jpg
dan simpan gambar di folder img
sudah saya siapkan, berikut screenshootnya http://vvcap.net/db/Gg91JvQeWIWGVBrB5Rnp.htp
mantab, sudah berhasil om, ternyata folder img harus diletakkan sejajar dg index.php http://vvcap.net/db/BD7T7_-tQJEBikWi-YgJ.htp tp gambarnya gx bisa ganti-ganti ya om. kan ane sdh masukin 3 gambar 🙂
Terima kasih atas penjelasannya, sangat bermanfaat ilmunya.
Mantap ni artikel, ilmu baru yang sedang berkembang. terima kasih
Tanya mas #Pino untuk pengaturan jumlah gambar, maksudnya sidatabase ada 10 gambar untuk menampilkan 5 gambar yang baru diabdate gimana ya…?
di limit di query nya, pakek LIMIT
Tanya mas pino apakah gambar yang muncul itu yang terakhir di update, bisa nggak misal memunculkan 5 gambar yang baru ditambahkan.. 🙂
bisa gan, silahkn saja tambahkan beberapa data.
membantu sekali terima kasih..
panduan nya simple! langsung berhasil
terima kasih
bisa update screenshotnya ?
menunggu ya gan.. 😀
Mas kalau simpennya di localhost bagaimana caranya? apakah yang masih harus diubah codingnya?
itu kan udah localhost
Bos mau tanya kalau bootstrap mau buat kayak wordprees gimana ya maksudnya biar bisa posting otomatis
bootstrap kan cuma cssnya, bisa pakek php dan database mysql.
coba lihat postingan tentang basic blog.
tanya mas di carousel saya kok bingkainya berubah2 ukuran menurut gambar ya, misal gambar 1 size 100px ntar bingkainya ngikut, trus kalo gambar 2 sizenya 200px bingkainya jg ngikut gitu terus.. nah gimana caranya biar bingkai nya tetep sama ukurannya meskipun ukuran gambarnya beda2?
coba di kasih class img-responsive
mas, gimana supaya slidernya bisa full secreen dan menyesuaikan lebar layar?…
saya rasa itu sudah bisa, coba kecilkan browser anda.
mas, link downloadnya dong hehe
filenya sudah gk ada 😀
cobak aja iku copy paste.. 😀
Tanya mas #pino
script untuk membuat auto refresh bagaimana? misalkan saya udah simpan 8 gambar kemudian saya input baru 2 gambar, setelah masuk data ke DB otomatis halaman Carousel refresh tapi Carousel yang aktif dimulai dari 2 atau 3 input data yang baru saja masuk dan tidak dimulai dari awal lagi.
lihat query nya, apakah ada liimitnya?
pa ini saya jadikan ci maalah ga nongol apa apaa -_-
mungkin querynya beda
Mas kan saya mau buat Carousel seperti ini.. http://bootsnipp.com/snippets/featured/tabbed-slider-carousel-inspired-by-sevenxde
Codenya begini.. tapi susah juga ga muncul sama sekali..
<?php $count = mysql_query("SELECT COUNT(*) FROM produk") or die(mysql_error());
$count = mysql_result($count,0);
for($i=0; $i<$count;$i++){
echo '
‘;
}
?>
<?php $sql=mysql_query("SELECT * FROM produk ORDER BY id_produk DESC LIMIT 4");
while ($r=mysql_fetch_array($sql)){
echo '
‘.$r [‘nama_produk’].’
‘.$r [‘deskripsi’].’
‘;
}
?>
wah gak kebaca 😀
maaf mas javascript buat next slidernya ko ga jalan ya ?
harus online gan. karena ambil lib jquery online