Membuat Slider Bootstrap Carousel dengan PHP MySQL

Cara membuat slider bootstrap carousel dengan PHP MySQL agar halaman web dapat menampilkan slideshow gambar dinamis dan responsive sesuai dengan content slide yang ditentukan dan diambil dari database. Slideshow atau corousel itu sendiri adalah sebuah tampilan slider image atau gambar yang berjalan otomatis dan berfungsi sebagai hero banner pada suatu halaman website. Membuat slider carousel bootstrap dengan content image dan deskripsi yang dinamis dapat dilakukan menggunakan PHP dan database MySQL sehingga dapat diatur sedemikian rupa sesuai keinginan pengguna. Carousel atau slideshow telah tersedia pada bagian components bootstrap itu sendiri, sehingga penggunaannya dapat dikatakan cukup mudah dan cepat.

Carousel sampai pada saat artikel ini dipublikasi, telah memiliki 4 tipe, yaitu carousel slide only, carousel with control, carousel with indicator, dan carousel with caption.

Tutorial cara membuat slider bootstrap carousel dengan php mysql akan menghasilkan tampilan slideshow image otomatis berikut judul dan deskripsi gambar, serta indikator dan navigasi. Dimana gambar, judul, deskripsi, dan jumlahnya dapat ditentukan atau diatur secara mandiri melalui database, sehingga menampilkan slideshow gambar dinamis. Sebagai catatan, kami membuat tutorial slider bootstrap carousel ini menggunakan framework bootstrap v5.3.2, namun boleh juga memakai versi framework yang lebih baru.

Membuat Slider Bootstrap Carousel dengan PHP MySQL

membuat slider bootstrap

Pembahasan cara membuat slider bootstrap carousel dengan php mysql terbagi menjadi beberapa bagian, mulai dari direktori folder tutorial, integrasi framewok dan plugin, hingga desain database dan membuat script php untuk menampilkan gambar slider.

• Download bootstrap carousel
• Membuat direktori folder tutorial dan gambar untuk slideshow.
• Merancang database untuk menampung data slider image
• Membuat kode program dengan script PHP untuk menampilkan slideshow gambar dinamis.

1. Download Framework Bootstrap

Kita dapat mengunjungi situs resmi Bootstrap yaitu getbootstrap.com, sebaiknya pilih versi terbaru untuk di download, di dalamnya terdapat kompilasi kode CSS dan JavaScript, dan atau source code examples. Kemudian ekstrak file rar hasil download, nanti akan menghasilkan assets dengan nama folder "CSS" dan javascript "JS", simpan sementara pada folder yang ada, tapi sebaiknya langsung di folder htdocs.

2. Membuat Folder Direktori Silder Image

Langsung saja buat di direktori xampp htdocs, sebagai contoh nama folder nya adalah "carousel", sehingga url folder pada direktori xampp menjadi C:\xampp\htdocs\carousel\.

Kemudian di dalam folder "carousel" tersebut buat lagi folder dengan nama "assets" yang akan digunakan untuk menyimpan kompilasi kode framework bootstrap yaitu folder CSS dan JS. Kemudian buat juga folder "image" yang akan digunakan untuk menyimpan gambar slider.

Cek kembali folder \carousel\ pastikan terdapat susunan 2 nama folder yaitu assets dan image seperti pada gambar di bawah ini.

3. Merancang Databse

Kerena cara membuat slider bootstrap carousel ini diharapkan dapat berjalan secara dinamis menggunakan PHP, maka diperlukan sebuah tabel database MySQL untuk menampung data. Database ini digunakan untuk menyimpan data sesuai dengan field yang dibutuhkan, seperti id, judul gambar, deskripsi, dan nama file. Silahkan buat database seperti contoh berikut ini.

4. Membuat File Index PHP untuk Menampilkan Slider Carousel

Membuat file index ini berfungsi untuk menampilkan slider bootstrap carousel php mysql dengan slideshow gambar dinamis dan responsive sesuai dengan content slide image. Pastikan file ini tersimpan di dalam folder direktori utama yaitu \carousel\, sehingga sejajar dengan folder "assets" bootstrap. Berikut adalah kode php untuk menampilkan slider bootstrap carousel, sehingga menghasilkan slideshow gambar yang dinamis.

Save as index.php

<?php
	include "koneksi.php";
	$query ="SELECT id, judul, deskripsi, gambar FROM tb_carousel ORDER BY id ASC";
    $result = $conn->query($query);
?>
<html lang="id">
<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>Membuat Slider Bootstrap Carousel dengan PHP MySQL</title>
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="assets/css/bootstrap.css">
	<!-- Bootstrap JavaScript -->
	<script type="text/javascript" src="assets/js/bootstrap.js"></script>
	<!-- 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="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
		<div class="carousel-indicators">
			<?php
			for($i=0; $i<$result->num_rows;$i++){
				echo '
				<button type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide-to="'.$i.'"';
				if($i==0){
				echo 'class="active" aria-current="true"';
				}
				echo'></button>';
			}
			?>
		</div>
		<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="image/'.$row['gambar'].'" class="d-block w-100" alt="'.$row['judul'].'">
					<div class="carousel-caption d-none d-md-block">
                    <h5>'.$row['judul'].'</h5>
                    <p>'.$row['deskripsi'].'</p>
					</div>  
				</div>';
			}}
			?>    
		</div>
		<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="visually-hidden">Previous</span>
		</button>
		<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="visually-hidden">Next</span>
		</button>
	</div>
</body>
</html>

Secara susunan tag pada body, kode di atas terdiri atas carousel-indicators, carousel-inner, dan carousel-control, dimana carousel-item berserta atributnya terletak di dalam carousel-inner.

Kode program pada baris ke 26 sampai 35 akan menampilkan carousel indikator sesuai jumlah gambar yang ditampilkan pada slideshow.

Sedangkan kode yang menampilkan slider image berikut judul dan deskripsi nya, terdapat pada baris ke 38 sampai 50, terletak pada carousel item di dalam carousel inner. Baris kode yang menghasilkan slider bootstrap tersebut adalah seperti berikut ini.

<?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="image/'.$row['gambar'].'" class="d-block w-100" alt="'.$row['judul'].'">
			<div class="carousel-caption d-none d-md-block">
			<h5>'.$row['judul'].'</h5>
			<p>'.$row['deskripsi'].'</p>
			</div>  
			</div>';
		}
	}
?> 

Sampai disini tutorial cara membuat slider bootstrap carousel dengan php mysql sehingga menghasilkan konten slider image yang responsive dan dinamis telah selesai. Untuk menjalankan coding script slider bootstrap carousel tersebut pada web browser, silahkan ketik url localhost/carousel/. Sebagai bahan belajar bootstrap carousel, kami bagikan juga source code lengkap berikut dengan desain database nya, silhakan download melalui tautan di bawah.

Tutorial Membuat Slider Bootstrap Carousel dengan PHP MySQL

Download Bootstrap Carousel

Sekian penjelasan tutorial bootstrap carousel yaitu cara membuat slider bootstrap carousel dengan php mysql sehingga dapat menampilkan konten slider gambar slideshow secara dinamis. Jika terjadi gagal atau error atau tidak berhasil berjalan sebagaimana mestinya, silahkan hubungi kami melalui live chat atau form komentar. Semoga dapat membantu.

Baca juga :

• Cara Aktivasi Windows 10 Pro Permanen Gratis
• Script PHP Mengurangi Stok Barang
• Cara Menambah Kapasitas Upload XAMPP
• Membatasi Ukuran File Upload di PHP
• Cara Mempercepat Loading Web dengan htaccess
• Membuat Laporan Excel dengan PHP dan MySQLi

Membuat Slider Bootstrap Carousel dengan PHP MySQL

Tags: membuat slider bootstrap carousel, membuat slider bootstrap php, membuat slider bootstrap, slider carousel php mysql, membuat slider bootstrap carousel dengan php mysql