Dynamic Bootstrap Carousel In PHP

php5 Jun 27, 2019

How to use bootstrap carousel with dynamic content in PHP? A big question with small answer.

In this blog, we will discuss how to integrate dynamic bootstrap carousel in php with MySQL data.

So let's assume that you have data over the MySQL database in DATABASE named (images) with TABLE named (bootstrapimages) which have 3 rows with 3 column

1) Column have field (image) which is stored in base64 format. 2) Column have field title. 3) Column have field description.

So let's first make config.ts file so that we can establish a secure connection to the MySQL database.

<?php 
$servername = "localhost";
$username = "root";
$password = "";
$database = "images"
// Create connection
$conn = new mysqli($servername, $username, $password , $database);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
echo "Connected successfully";	
?>

Now we are going to create Index.php file in which we will first include 'config.ts' file.

<?php 
	include './config.ts';
?>

After that we need to make sqlquery to get data from database.

<?php
	include './config.ts';
    
    $sqlquery = "SELECT * FROM `bootstrapimages`";
?>

Now we need to send this query to MySQL database for that we need to use $conn->query(queryParameter) function which will return true if query is executed successfully else false.

<?php 
	include './config.ts';
    
    $sqlquery = "SELECT * FROM `bootstrapimages`";
    
    $res = $conn->query($sqlquery);
 
    
?>

Now we need to get data from $res variable for that we are going to use $res->fetch_assoc() function which we then give an array of data which we will store in $data variable and to print the data will use while loop.

<?php
include './config.ts';
    
    $sqlquery = "SELECT * FROM `bootstrapimages`";
    
    $res = $conn->query($sqlquery);
    
    while($data = $res->fetch_assoc())
    {
    	
    }
?>

Now in the while loop we are going to print the bootstrap carousel but before that we need to know about where are we going to use loop in bootstrap as we see we loop over the carousel item in bootstrap we need to keep more attention about how actually bootstrap carousel works in php.

<?php
include './config.ts';
    
    $sqlquery = "SELECT * FROM `bootstrapimages`";
    
    $res = $conn->query($sqlquery);
    
    echo '<div class="bd-example">
             <div id="carouselExampleCaptions" class="carousel slide" 
  	  				data-ride="carousel">';
    while($data = $res->fetch_assoc())
    {
    	
    }
    
    echo ' <a class="carousel-control-prev" href="#carouselExampleCaptions" 				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="#carouselExampleCaptions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
    	</div>
    </div>';
?>

Now As we have created the outer part of bootstrap carousel let create the carousel item with all fields which we have get from MySQL database.Now as to make bootstrap carousel work we need to use active class in first slide for that we are going to use $i == 0 variable than add active else null.

<?php
include './config.ts';
    
    $sqlquery = "SELECT * FROM `bootstrapimages`";
    
    $res = $conn->query($sqlquery);
    
    echo '<div class="bd-example">
             <div id="carouselExampleCaptions" class="carousel slide" 
  	  				data-ride="carousel">';
	 
    $addactive = "";
    while($data = $res->fetch_assoc())
    {
    	 for ($i = 0; $i < count($data); $i++) {

                            if ($i == 0) {  

                            $addActive = "active";
                            } else {
                            $addActive = "";
                            }
                            echo '<div class="carousel-item ' . $addActive . '">
                            <img src="data:image/jpeg;base64,' . $data[$i]['image'] . '"" class="rounded shadow img-fluid" alt="" srcset="">
                           <div class="carousel-caption d-none d-md-block">
          <h5>$data[$i]['title']</h5>
          <p>$data[$i]['description']</p>
        </div>
                            </div>';
    }
        
    }
    
    echo ' <a class="carousel-control-prev" href="#carouselExampleCaptions" 				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="#carouselExampleCaptions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
    	</div>
    </div>';
?>

That's it now run project and it's works perfectly fine.

Abhishek

Hi There! I Am Abhishek Developer, Singer & Photographer. Living In Mumbai. My interests range from technology to entrepreneurship. I am also interested in food, designing, and education.