カルーセルhtmlからデータベースを使用したPHP

Question

タイトル、キャプション、画像とともにhtml/jsにカルーセルを作成しました。私はPHPを使用して転送しようとしているが、どのように考えていない。私は5つの行（ID、タイトル、キャプション、画像とリンク）とフィールドに入力データを "カルーセル"という名前の私のデータベース "テスト"のテーブルを作成しましたが、どのようにカルーセルフォーム。

<div class="container"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 

     <!-- Wrapper for slides --> 
     <div class="carousel-inner"> 

     <div class="item active"> 
      <img src="../images/aa1.jpg"> 
      <div class="carousel-caption"> 
      <h4><a href="#">Title</a></h4> 
      <p>Caption Caption Caption Caption <a class="label label-primary" href="#" target="_blank">See More</a></p> 
      </div> 
     </div><!-- End Item --> 

     <div class="item"> 
      <img src="../images/aa2.jpg"> 
      <div class="carousel-caption"> 
      <h4><a href="#">Title</a></h4> 
      <p>Caption Caption Caption Caption<a class="label label-primary" href="#" target="_blank">See More</a></p> 
      </div> 
     </div><!-- End Item --> 

     <div class="item"> 
      <img src="#"> 
      <div class="carousel-caption"> 
      <h4><a href="#">Title</a></h4> 
      <p>Caption Caption Caption. <a class="label label-primary" href="#" target="_blank">See More</a></p> 
      </div> 
     </div><!-- End Item --> 

     <div class="item"> 
      <img src="#"> 
      <div class="carousel-caption"> 
      <h4><a href="#">Title</a></h4> 
      <p>Caption Caption Caption <a class="label label-primary" href="#" target="_blank">See More</a></p> 
      </div> 
     </div><!-- End Item --> 

     <div class="item"> 
      <img src="#"> 
      <div class="carousel-caption"> 
      <h4><a href="#">Title</a></h4> 
      <p>Caption Caption Caption <a class="label label-primary" href="#" target="_blank">See More</a></p> 
      </div> 
     </div><!-- End Item --> 

     </div><!-- End Carousel Inner --> 


    <ul class="list-group col-sm-4"> 
     <li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h4>Title</h4></li> 
     <li data-target="#myCarousel" data-slide-to="1" class="list-group-item"><h4>Title</h4></li> 
     <li data-target="#myCarousel" data-slide-to="2" class="list-group-item"><h4>Title</h4></li> 
     <li data-target="#myCarousel" data-slide-to="3" class="list-group-item"><h4>Title</h4></li> 
     <li data-target="#myCarousel" data-slide-to="4" class="list-group-item"><h4>Title</h4></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><!-- End Carousel --> 
</div> 

これをPHP/SQLに転送して簡単に更新できる方法はありますか？

Answer 1

データベースからカルーセルに画像を追加したいと思いますか？そうである場合：

​​の場所をstringとしてdatabaseに保存します。 0123をご利用の場合は、databaseのfilepathsをすべて取得してください。

foreach filepath, echo out the div .item 

はcarousel indicator circlesについて、あなたはforeachのループごとに1によって数を増やす、またはsql countを使用することができます。数字を増やすほうが簡単かもしれません。

は、あなただけのもファイルパスを取得することと同じSelect queryでテーブルからキャプションを取得し、それらのすべてにキャプションを望んでいた場合

ガイド：

<?php 
    $query = "SELECT captionTitle, captionContent, imageFilepath FROM carouselContent"; 

    $result = mysqli_query($connection, $query); 
    $count = 0; 
    while($row = mysqli_fetch_assoc($result)){ 
    $count++; 
    if($count === 1) echo "<div class='item active'"; 
    else echo "<div class='item'"; 
    echo "> Whatever else is in the item here"; 

あなたはイメージタグを追加されたら：あなたはインジケータサークルを持っている場合は

echo "<img src='" . $row['imageFilepath'] . "' alt='carouselImage'>"; 

、

を使用