Tunggu Sebentar ...

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.

Ditumpuk didalam berkas : Catatan Belajar , PHP , MySQL / Mysqli , Bootstrap
Yang berkomentar (22)
Setiap komentar yang tampil adalah hasil dari persetujuan Admin

Komentar untuk "Membuat Slideshow Carousel Bootstrap Sederhana Dengan PHP - MySQL"

ikbal
20-10-2016 11:04

ni ga ada js nya mastah?

Komentar via web

Balas
Danni Moring
22-10-2016 06:07

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...

Komentar via web

Balas
vonie
22-06-2016 15:04

Terimakasih untuk materi yang telah diberikan kali ini

Komentar via web

Balas
marselianadwi
22-06-2016 09:53

makasih yaaa infonya

Komentar via web

Balas
Wiwit Setyo Prayogo
17-12-2015 13:04

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

Komentar via web

Balas
Danni Moring
17-12-2015 18:39

maksudnya persatu slide itu ada 4 gambar skelaigus ya ? klo itu belum saya coba

Komentar via web

Balas
Android Maker
21-09-2015 21:08

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

Komentar via web

Balas
Danni Moring
22-09-2015 17:25

thank you.... nanti kapan2 sy main ke blognya

Komentar via web

Balas
re
19-09-2015 14:57

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>

Komentar via web

Balas
Danni Moring
20-09-2015 15:24

kok jadi spam gini ya di tulisan lain, komentarnya sama juga...

Komentar via web

Balas
strez
26-05-2015 14:27

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

Komentar via web

Balas
Danni Moring
26-05-2015 14:58

itu dilinkmu yang dikasih bukannya udah ada code nya ya ?

Komentar via web

Balas
strez
26-05-2015 15:02

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

Komentar via web

Balas
Danni Moring
26-05-2015 15:09

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..

Komentar via web

Balas
strez
26-05-2015 15:14

nah iya bgitu mas
makasih banyak ya mas,,, udah saya bookmark blog nya

Komentar via web

Balas
Danni Moring
27-05-2015 20:47

oke..tp saya ga janji kapan, soalnya lg banyak kerjaan...

Komentar via web

Balas
bang
17-03-2015 17:11

ga ada cara buat edit/ganti gambar2nya ya mas ?

Komentar via web

Balas
Danni Moring
17-03-2015 17:55

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..

Komentar via web

Balas
bang
17-03-2015 17:08

ga ada cara buat edit/ganti gambar2nya ya mas ?

Komentar via web

Balas
bang
17-03-2015 17:07

ga ada buat cara edit gmbarnya ya mas ,
kalo pngen ganti gambar2nya gmna ?

Komentar via web

Balas
eka
24-05-2014 23:12

tampilan gambar nya bukan slide, tapi muncul semua kebawah

Balas
Danni Moring
24-05-2014 23:39

maksudnya gimana ya mas ? udah lihat demo nya mas ? ditulisan itu ada link demo nya..

Balas