Bootstrap carousel dynamic using PHP and MySql with source code
- admin
- 0
- on Sep 02, 2022
This article will teach you how to create a bootstrap carousel dynamic with PHP and MySql. so we need to learn basic bootstrap and PHP also MySql. you need to create 2 files (1. connection.php and 2. banner.php) and also create database name khodecam and table name tbl_ads. let’s see the source code file below
- connection.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db = "khodecam";
// Create connection
$conn = new mysqli($servername, $username, $password,$db);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
//echo "Connected successfully";
?>2. banner.php
<?php
include 'connection.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Carousel With Php</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
body {
margin:7% auto;
background:#F4F6F7;
font-family: 'Varela Round', sans-serif;
}
.web_banner{
object-fit: cover;
height:290px
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 offset-2">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<?php
$sql = "SELECT * FROM tbl_ads";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$i=1;
while($row = $result->fetch_assoc()) {
$active=$i==1?'active':'';
?>
<div class='carousel-item <?php echo $active ?>'>
<img src='<?php echo $row['adsBanner'] ?>' class='d-block w-100 web_banner' alt='<?php echo $row['adsTitle'] ?>'><div class='carousel-caption d-none d-md-block'>
<h5><?php echo $row['adsTitle'] ?></h5>
<p><?php echo $row['adsNote'] ?></p>
</div>
</div>
<?php
$i++;
}
} else {
echo "0 results";
}
$conn->close();
?>
</div>
<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>
</div>
</div>
</body>
</html>3. khodecam.sql
CREATE DATABASE IF NOT EXISTS `khodecam`
USE `khodecam`;
CREATE TABLE IF NOT EXISTS `tbl_ads` (
`adsId` int(11) NOT NULL AUTO_INCREMENT,
`adsTitle` char(100) DEFAULT NULL,
`adsNote` char(150) DEFAULT NULL,
`adsStatus` int(11) DEFAULT 1,
`adsBanner` char(150) DEFAULT NULL,
PRIMARY KEY (`adsId`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4;
INSERT INTO `tbl_ads` (`adsId`, `adsTitle`, `adsNote`, `adsStatus`, `adsBanner`) VALUES
(1, 'For Business', 'Dell for your business', 1, 'https://lzd-img-global.slatic.net/g/p/19586490c1371be316f66797bf10c235.png_2200x2200q80.jpg_.webp'),
(2, 'For Gaming', 'Gaming Laptop for your future', 1, 'https://m.media-amazon.com/images/S/aplus-media-library-service-media/44a67512-fb9e-4efc-b0a6-b55b5f4dfd12.__CR0,0,1464,600_PT0_SX1464_V1___.jpg'),
(3, 'For Industry', 'Best performance for your work', 1, 'https://www.evetech.co.za/repository/ProductImages/dell-intel-gaming-laptops-baner-980px-v1.jpg');
Result
Good answers in return of this question with firm arguments and telling all regarding that.