2016-09-13 14 views
0

私は、ブートストラップ4のアルファとPHPを使ってwebshopでいくつかの記事を作成する予定のdivを作成しようとしています。PHPで行とdivの繰り返しの記事が表示される

私は本当にないので、私はこのためにモジュロ(%)が必要だと思うが、私は私が欲しいものを達成することはできません、私はthisを読んで、それで遊んで試してみましたが、私はそれを動作させることはできませんそれが何を理解する。

私が必要とするのは、1行4列、これが繰り返されます。私はどこに行くのか理解してくれることを願っていますここで

は、HTMLの例であるあなたがそれ以下のPHPで見ることができるよう、より多くの行とのdivのがあるかもしれません:私は今持っているもの

<div class="row"> 
    <div class="sm-col-3"> 
    <div class="card-deck-wrapper"> 
     <div class="card-deck"> 
     <div class="card card-outline-secondary"> 
      <img class="card-img-top m-x-auto d-block placeholder" src="empty.png" alt="Product"> 
      <div class="card-block"> 
      <h4 class="card-title">Product</h4> 
      <p class="card-text"> 
       <span>Omschrijving van het product. </span><br> 
       <span>&euro; 1,00</span><br> 
       <span>Voorraad: 1</span> 
      </p> 
      <a href="#" class="btn btn-primary">Koop</a> 
      </div> 
     </div> 
     <div class="card card-outline-secondary"> 
      <img class="card-img-top m-x-auto d-block placeholder" src="empty.png" alt="Product"> 
      <div class="card-block"> 
      <h4 class="card-title">Product</h4> 
      <p class="card-text"> 
       <span>Ik zal hier ook maar wat in knallen zodat niet alle kaarten even groot zijn.</span><br> 
       <span>&euro; 1,00</span><br> 
       <span>Voorraad: 1</span> 
      </p> 
      <a href="#" class="btn btn-primary">Koop</a> 
      </div> 
     </div> 
     <div class="card card-outline-secondary"> 
      <img class="card-img-top m-x-auto d-block placeholder" src="empty.png" alt="Product"> 
      <div class="card-block"> 
      <h4 class="card-title">Product</h4> 
      <p class="card-text"> 
       <span>Deze kaart zal ook net even iets groter zijn om het uit te testen want ik snap er geen reet van.</span><br> 
       <span>&euro; 1,00</span><br> 
       <span>Voorraad: 1</span> 
      </p> 
      <a href="#" class="btn btn-primary">Koop</a> 
      </div> 
     </div> 
     <div class="card card-outline-secondary"> 
      <img class="card-img-top m-x-auto d-block placeholder" src="empty.png" alt="Product"> 
      <div class="card-block"> 
      <h4 class="card-title">Product</h4> 
      <p class="card-text"> 
       <span>Omschrijving van het product.</span><br> 
       <span>&euro; 1,00</span><br> 
       <span>Voorraad: 1</span> 
      </p> 
      <a href="#" class="btn btn-primary">Koop</a> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="sm-col-3"> 
    <div class="card-deck-wrapper"> 
     <div class="card-deck"> 
     <div class="card card-outline-secondary"> 
      <img class="card-img-top m-x-auto d-block placeholder" src="empty.png" alt="Product"> 
      <div class="card-block"> 
      <h4 class="card-title">Product</h4> 
      <p class="card-text"> 
       <span>Omschrijving van het product.</span><br> 
       <span>&euro; 1,00</span><br> 
       <span>Voorraad: 1</span> 
      </p> 
      <a href="#" class="btn btn-primary">Koop</a> 
      </div> 
     </div> 
     <div class="card card-outline-secondary"> 
      <img class="card-img-top m-x-auto d-block placeholder" src="empty.png" alt="Product"> 
      <div class="card-block"> 
      <h4 class="card-title">Product</h4> 
      <p class="card-text"> 
       <span>Omschrijving van het product.</span><br> 
       <span>&euro; 1,00</span><br> 
       <span>Voorraad: 1</span> 
      </p> 
      <a href="#" class="btn btn-primary">Koop</a> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

PHP:

$categorie = mysqli_real_escape_string($mysqli, $_GET['categorie']); 
$sql = "SELECT * FROM producten WHERE categorie = '$categorie' AND voorraad > 0"; 
$result = mysqli_query($mysqli, $sql) or die(mysqli_error($mysqli)); 
if (mysqli_num_rows($result) == 0) { 
    echo "<div class=\"card card-inverse card-warning text-xs-center\">\n"; 
    echo " <div class=\"card-block\">\n"; 
    echo "  <blockquote class=\"card-blockquote\">\n"; 
    echo "   <span>Deze categorie bestaat niet!</span>\n"; 
    echo "  </blockquote>\n"; 
    echo " </div>\n"; 
    echo "</div>\n"; 
} 
else { 
    echo "<h3>Categorie: " . ucfirst($_GET['categorie']) . "</h3>\n"; 

    $i = 0; 
    while ($row = mysqli_fetch_array($result)) { 
     if ($i % 3 == 0) { 
      echo "<div class=\"row\">\n"; 
      echo " <div class=\"sm-col-3\">\n"; 
      echo "  <div class=\"card-deck-wrapper\">\n"; 
      echo "   <div class=\"card-deck\">\n"; 
     } 
     echo "    <div class=\"card card-outline-secondary\">\n"; 
     if ($row['plaatje'] == "") { 
      echo "     <img class=\"card-img-top m-x-auto d-block placeholder\" src=\"empty.png\" alt=\"". $row['naam'] . "\">\n"; 
     } 
     else { 
      echo "    <img class=\"card-img-top m-x-auto d-block placeholder\" src=\"" . $row['plaatje'] . "\" alt=\"". $row['naam'] . "\">\n"; 
     } 
     echo "    <div class=\"card-block\">\n"; 
     echo "     <h4 class=\"card-title\">" . $row['naam'] . "</h4>\n"; 
     echo "     <p class=\"card-text\">\n"; 
     echo "      <span>" . nl2br($row['omschrijving']) . "</span><br>\n"; 
     echo "      <span>&euro; " . str_replace(".", ",", number_format($row['prijs'], 2)) . "</span><br>\n"; 
     echo "      <span>Voorraad: " . $row['voorraad'] . "</span><br>\n"; 
     echo "     </p>"; 
     echo "     <a href=\"winkelwagen.php?actie=voegtoe&id=" . $row['productnr'] . "\" class=\"btn btn-primary\">Koop</a>\n"; 
     echo "    </div>\n"; 
     echo "   </div>\n"; 
     if ($i % 3 == 2) { 
      echo "   </div>\n"; 
      echo "  </div>\n"; 
      echo " </div>\n"; 
      echo "</div>\n"; 
     } 
     if ($i % 3 != 0) { 
      echo "   </div>\n"; 
      echo "  </div>\n"; 
      echo " </div>\n"; 
      echo "</div>\n"; 
     } 
     $i++; 
    } 

それはおそらくです簡単な解決策ですが、私はそれを見ることができません!

お時間をいただきありがとうございます。あなたの質問内のリンクから

+0

モジュロが進むべき道になるので、[array_chunk](http://php.net/だろうarray_chunk)。それを使って、htmlをレンダリングするための別個のファイル(あなたが好きな場合はビュー)を持つ方がよいでしょう。これは物事を非常に読みやすくします。 – Andrew

+0

@FrankSunnymanの答えがうまくいかない場合は、array_chunkを調べます。 – Alex

答えて

1

、これは私の作品:

$i = 0; 
while ($row = mysqli_fetch_array($result)) { 
    if ($i % 3 == 0){ 
     echo '<div class="row">'; 
    } 

    echo '<div class="col-lg-4 col-md-4 col-sm-4">'; 
     //Your column data here 
    echo '</div>'; 

    if ($i % 3 == 2){ 
     //Close the .row div 
     echo '</div>'; 
    } 
    $i++; 
} 

if ($i % 3 != 0){ 
    //Close the .row div in case there aren't enough items left to fill up to 3 
    echo '</div>'; 
} 

http://www.devchunks.com/web-development/using-the-php-modulus-operator/

関連する問題