Creating carousel using php and fetching data from sql - php

Question

I am trying to create a page with carousel using php fetching image and title from sql. I created a carousel using html and css, but im not really sure how to transfer it using php.
My original carousel:
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/aa1.jpg">
<div class="carousel-caption">
<h4><b>Title</h4></b>
<p><a class="label label-primary" href="news1.php" target="_blank" style="float: right;">Read More</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="images/aa2.jpg">
<div class="carousel-caption">
<h4><b>Title</h4></b>
<p><a class="label label-primary" href="news2.php" target="_blank" style="float: right;">Read More</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="images/aa3.jpg">
<div class="carousel-caption">
<h4><b>Title</h4></b>
<p><a class="label label-primary" href="news3.php" target="_blank" style="float: right;">Read More</a></p>
</div>
</div>
<div class="item">
<img src="images/aa4.jpg">
<div class="carousel-caption">
<h4><b>Title</h4></b>
<p><a class="label label-primary" href="news4.php" target="_blank" style="float: right;">Read More</a></p>
</div>
</div>
<div class="item">
<img src="images/aa5.jpg">
<div class="carousel-caption">
<h4><b>Title</h4></b>
<p><a class="label label-primary" href="news5.php" target="_blank" style="float: right;">Read More</a></p>
</div>
</div>
</div>
<ul class="list-group col-sm-4">
<li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h5>Tilte Tilte Tilte</h5></li>
<li data-target="#myCarousel" data-slide-to="1" class="list-group-item"><h5>Tilte Tilte Tilte</h5></li>
<li data-target="#myCarousel" data-slide-to="2" class="list-group-item"><h5>Tilte Tilte Tilte</h5></li>
<li data-target="#myCarousel" data-slide-to="3" class="list-group-item"><h5>Tilte Tilte Tilte</h5></li>
<li data-target="#myCarousel" data-slide-to="4" class="list-group-item"><h5>Tilte Tilte Tilte</h5></li>
</ul>
<!-- Controls -->
<div class="carousel-controls">
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
Now I created a database named test with a table named carousel looks like:
----------------------------------------------
| title | image | link |
----------------------------------------------
| demo | demo.png |images/demo.png |
----------------------------------------------
I tried calling it but nothing works. I'm new to php.
My Code:
<?php
$link = mysqli_connect("localhost", "root", "", "test");
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
$sql = "SELECT * FROM news";
if($result = mysqli_query($link, $sql)){
if(mysqli_num_rows($result) > 0){
echo "<div class=\"container\">";
echo "<div id=\"myCarousel\"class=\"carousel slide\"data-ride=\"carousel\">";
echo "<div class=\"carousel-inner\">";
echo "<div class=\"item active\">";
echo "<img alt=\"News\" src=\"images/{$row["image"]}\">";
echo "<p>{$row["title"]}</p>";
echo "<ul class=\"list-group col-sm-4\"href=\"{$row["link"]}\"echo "<b><h4>{$row["title"]}">;
<a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a> <a data-slide="next" href="#Carousel" class="right carousel-control">›</a> </div>
echo "</div>"
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
?>
How can I do that?

Answer 1

You have to add while loop in your HTML file, try using this.
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
<?php
error_reporting(E_ALL);
$query = "SELECT id, path, name FROM images";
$result = mysql_query($query);
$num = mysql_num_rows($result);
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)){
echo "<img src=\"$row[path]\" title=\"$row[name]\" alt=\"\" />";
}
?>
</div>
</div>
</div>