Blog

image
image
image
image
image
image
image
Maryo

Membuat Slider Boootstrap Carousel Dengan PHP MySQL

Website tanpa adanya slider/Carousel mungkin website akan terasa kaku yah, terasa tidak hidup makanya banyak website website zaman sekarang pada menggunakan sebuah slider dari bootstrap yang mudah dan simple untuk digunakan.

Di kesempatan ini mastav.com akan memberikan panduan bagaimana membuat Slider Bootstrap Carousel yang mana data gambar dan deskripsinya kita simpan di database MySQL dan akan ditampilkan dengan script PHP.

Pertama kali yang harus kita siapkan adalah Source Code Bootstrap kamu bisa download file bootstrapnya langsung melalui Website Officialnya atau langsung download button di bawah ini.

Download Bootstrap

Didalam halam Download bootstrap ada 2 pilihan yaitu : Compiled CSS and JS dan  Source files, disini kami menggunakan  Compiled CSS and JS saja karena hanya file CSS dan JS yang kita butuhkan, Jika Anda ingin versi lengkapnya Anda bisa download yang Source files.

Jika sudah didownload silahkan ektrak file tersebut, dan kamu akan mendapatkan sebuah folder dengan nama CSS dan JS, kedua folder inilah akan kita pakai.

Sekarang kita buat project/folder dengan nama carousel di localhost : C:\xampp\htdocs\carausel
Silahkan pidahkan 2 folder tersebut ke folder project kita dan buat folder baru dengan nama images. Folder Images ini digunakan untuk menyimpan file gambar untuk slider Carousel nantinya, maka strukutrnya akan seperti dibawah ini.

Anda bisa menyiapkan sebuah gambar yang nantinya akan kita buat tampilan slider dengan format JPG dan simpan file gambarnya di folder yang barusan kita buat, saya  beri contoh dengan nama gamabr slider-1 dan slider-2 dengan format JPG atau JPEG lihat gambar dibawah ini.

Persiapan

Karena data yang akan ditampilkan disimpan di database MySQL, maka kita harus buat sebuah Database di phpMyAdmin, dalam Panduan ini kita membuat database dengan nama tutorial. setelah itu kita buat tabel dengan nama carousel.

  • Buat Database dengan nama tutorial
  • Buat tabel dalam dalam database tutorial dengan nama carousel untuk fielnya sebagai berikut ini:

Sekarang kita masukkan data gambar dan deskripsinya pada tabel caraousel, caranya insert/tambah  melalui phpMyAdmin, berikan judul dan deskripsinya untuk menampilkan gambarnya Anda cukup menulis nama file gambarnya slider-1.jpg dan seterusnya.

Saatnya Ngoding

Kalau Anda sudah berhasil, sekarang kita masuk ke coding.
Silahkan buat file koneksi.php simpan dalam folder carausel dan buatlah codingan koneksinya seperti dibawah ini.

<?php 
	date_default_timezone_set('Asia/Jakarta');
	$DB_HOST 	= "localhost";
	$DB_USER 	= "root";
	$DB_PASSWD  = "";
	$DB_NAME 	= "tutorial";
			@define("DB_HOST", $DB_HOST);
			@define("DB_USER", $DB_USER);
			@define("DB_PASSWD" , $DB_PASSWD);
			@define("DB_NAME", $DB_NAME);
	$connection = NEW mysqli( $DB_HOST, $DB_USER, $DB_PASSWD, $DB_NAME );
	if ($connection->connect_error){
		echo 'Konekasi Database Gagal...';
} else {
	//koneksi berhasil
}?>

 Jika sudah buat koneksinya sekarang buat file index.php simpan dalam folder carausel, untuk struktur HTMLnya seperti dibawah ini:

<!DOCTYPE html>
<html lang="">
	<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>Struktur HTML Default Bootstrap</title>
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="css/bootstrap.css">
		<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<h1 class="text-center">Hello World</h1>

	<!-- jQuery -->
		<script src="js/jquery-1.11.3.min.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="js/bootstrap.js"></script></script>
	</body>
</html>

Perhatikan untuk file JS jquery-1.11.3.min.js Anda bisa download disini.

 Jika sudah membuat struktur HTMLnya sekrang kita panggil file koneksinya dan simpan di paling atas seperti berikut source codenya

<?php  include_once 'koneksi.php';?>

Kalau sudah silahkan buat query dari tabel carousel seperti dibawah ini source codenya:

<?php  include_once 'koneksi.php';
	$query ="SELECT id,judul,deskripsi,gambar FROM carousel ORDER BY id ASC";
	$result = $connection->query($query);?>

Sampai disini kita sudah hampir selesai, sekarang yang terakhir kita memanggil fiel tabelnya dan membuat Carouselnya untuk source codenya sebagai berikut ini:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
	  <ol class="carousel-indicators">
	 <?php
	 	for($i=0; $i<$result->num_rows;$i++){
        	echo '
        	<li data-target="#carouselExampleIndicators" data-slide-to="'.$i.'"';
        	if($i==0){echo'class="active"';}echo'></li>';
      	}?>
	  </ol>
	  <div class="carousel-inner">
		  <?php
	      if($result->num_rows > 0){
	        while ($row = $result->fetch_assoc()) {
	        if($row['id'] == 1){
	          echo'<div class="carousel-item active">';}else{echo'<div class="carousel-item">';}
	          echo'
	          	<img src="images/'.$row['gambar'].'" alt="'.$row['judul'].'">
	          	<div class="carousel-caption d-none d-md-block">
					<h5>'.$row['judul'].'</h5>
					<p>'.$row['deskripsi'].'</p>
				</div>  
	          </div>';
	      }}?>

	  </div>
	  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
	    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
	    <span class="sr-only">Previous</span>
	  </a>
	  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
	    <span class="carousel-control-next-icon" aria-hidden="true"></span>
	    <span class="sr-only">Next</span>
	  </a>
	</div>

Jika Anda berhasil maka source code lengkapnya akan seperti dibawah ini

<?php  include_once 'koneksi.php';
	$query ="SELECT id,judul,deskripsi,gambar FROM carousel ORDER BY id ASC";
	$result = $connection->query($query);?>
<!DOCTYPE html>
<html lang="">
	<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>Contoh Slider dengan PHP Native</title>

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="css/bootstrap.css">

		<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>

	<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
	  <ol class="carousel-indicators">
	 <?php
	 	for($i=0; $i<$result->num_rows;$i++){
        	echo '
        	<li data-target="#carouselExampleIndicators" data-slide-to="'.$i.'"';
        	if($i==0){echo'class="active"';}echo'></li>';
      	}?>
	  </ol>
	  <div class="carousel-inner">
		  <?php
	      if($result->num_rows > 0){
	        while ($row = $result->fetch_assoc()) {
	        if($row['id'] == 1){
	          echo'<div class="carousel-item active">';}else{echo'<div class="carousel-item">';}
	          echo'
	          	<img src="images/'.$row['gambar'].'" alt="'.$row['judul'].'">
	          	<div class="carousel-caption d-none d-md-block">
					<h5>'.$row['judul'].'</h5>
					<p>'.$row['deskripsi'].'</p>
				</div>  
	          </div>';
	      }}?>

	  </div>
	  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
	    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
	    <span class="sr-only">Previous</span>
	  </a>
	  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
	    <span class="carousel-control-next-icon" aria-hidden="true"></span>
	    <span class="sr-only">Next</span>
	  </a>
	</div>

		<!-- jQuery -->
		<script src="js/jquery-1.11.3.min.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="js/bootstrap.js"></script>
	</body>
</html>

 

Semoga panduan membuat Slider Bootstrap carousel dengan PHP Mysql ini bermanfaat.

Related Tags

Social Share

Komentar

Search

Category

Post

Recent Post

Tags

Masterweb

Punya proyek di pikiran Anda? mari kita bicarakan.

Mari Bicara
↑