Динамическая карусель на 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";
?>
Шаг 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())
{
}
?>
Шаг 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>';
?>
Теперь запустите проект, чтобы убедиться в его работоспособности.