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. |
Cara membuat slideshow dengan php
Pos Terkait
Copyright © 2024 idkuu.com Inc.
