How to create a dynamic Carousel using PHP and Bootstrap?

I’m still really bad with logic and back-end development in general.

I’ve been working on developing a CMS blog and now I’m trying to create a slideshow on the homepage with dynamic content (images + text). The main goal is to use that to announce updates.

Is there a way to make the Carousel dynamic, fetching the MySQL data with this code I made?

I’m using table ‘posts’ because I’m still just testing. Once it works as I want, I’ll create another table called ‘slides’ on MySQL, in which all the data for this purpose will be stored.

*The DB connection is already on the includes. The connection was written on a small file called DB.php

Home.php

<header>
          <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                  <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                  </ol>
                  <div class="carousel-inner" role="listbox">
              <?php
              // The default SQL query
                  $sql = "SELECT * FROM posts ORDER BY id desc";
                  $stmt = $ConnectingDB->query($sql);
                    while ($DataRows = $stmt->fetch()) {
                      $Id = $DataRows["id"];
                      $PostTitle = $DataRows["title"];
                      $Image = $DataRows["image"];
                      $PostText = $DataRo    ws["post"];
                  ?>
                        <!-- Slide -->
                        <div class="carousel-item active" style="background-image: url('uploads/<?php echo $Image; ?>')">
                          <div class="carousel-caption">
                            <div class="card-body black">
                              <h3 class="large-mistral-white"><?php echo $PostTitle; ?></h3>
                              <p class="small-times-white"><?php echo $PostText; ?></p>
                            </div>
                          </div>
                        </div>
                        <?php } ?>
                      </div>
                      <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </a>
                    </div>
            </header>

DB.php

<?php

$DSN='mysql:host = localhost; dbname=everybody_blog';
$ConnectingDB = new PDO($DSN,'root','');
?>
Sponsor our Newsletter | Privacy Policy | Terms of Service