Динамическая карусель на Bootstrap в PHP

В этой статье мы расскажем, как интегрировать динамическую Bootstrap карусель в PHP с данными, загружаемыми из БД MySQL.

Предположим, что у вас есть базе данных images с таблицей bootstrapimages. Она содержит три строки с тремя столбцами.

Первый столбец – это поле image, в котором хранится изображение, представленное в формате base64. Второй столбец содержит заголовок поля, третий – его описание.

Содержание

Шаг 1

Сначала давайте создадим файл config.ts, чтобы установить безопасное соединение с базой данных MySQL.

<?php 
$servername = "localhost";
$username = "root";
$password = "";
$database = "images"
// Создаем соединение
$conn = new mysqli($servername, $username, $password , $database);

// Проверяем соединение
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
echo "Connected successfully";	
?>
Как перейти с Bootstrap 4 на Bootstrap 5

Шаг 2

После этого создадим файл index.php, в начале которого подключим файл config.ts.

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

Создаем запрос к базе данных на выборку информации.

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

Шаг 3

Теперь необходимо отправить этот запрос к базе данных MySQL с помощью функции $conn->query(queryParameter). Она возвращает значение true, если выполнение запроса прошло успешно. Иначе возвращается значение false.

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

Шаг 4

После этого получаем данные из переменной $res с помощью функции $res->fetch_assoc(). Затем передадим ей массив данных, которые хранятся в переменной $data. Для вывода данных мы будем использовать цикл while.

<?php
include './config.ts';
    
    $sqlquery = "SELECT * FROM `bootstrapimages`";
    
    $res = $conn->query($sqlquery);
    
    while($data = $res->fetch_assoc())
    {
    	
    }
?>
Bootstrap vs Foundation - два основных CSS-фреймворка

Шаг 5

В цикле while мы выведем карусель. В цикле перебираются элементы карусели. Обратите внимание, как она работает в 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>';
?>

Шаг 6

Мы создали внешнюю часть карусели. Теперь реализуем элемент карусели с полями, которые получили из базы данных MySQL. Чтобы заставить карусель работать, необходимо использовать класс active для первого слайда. Для этого мы используем переменную $i==0.

<?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>';
?>

Теперь запустите проект, чтобы убедиться в его работоспособности.

Пожалуйста, опубликуйте свои комментарии по текущей теме статьи. За комментарии, подписки, лайки, дизлайки, отклики низкий вам поклон!