2016-11-19 11 views
0

enter image description here ここは新しいですし、助けが必要です。私はウェブ開発コースをやっていて、私は手が必要な課題を持っています。3x3ランダムイメージのテーブル - PHP

基本的には、9つのランダムなレコードを選択し、その結果を3x3テーブルとして表示するクエリを送信します。

<div id="productgrid"> 
<?php 
$query = mysqli_query($conn, "SELECT * FROM products 
    ORDER BY RAND() 
    LIMIT 9"); 
?> 
<h2>Featured Products</h2> 


<table> 
    <?php 
    while($products = mysqli_fetch_array($query)){ 
    $file = $products['prod_img']; 
    $pid = $products['prod_id']; 
    $product_price = $products['prod_price']; 
    $image_id = $products['prod_id']; 
    $desc = $products['prod_desc']; 
    ?> 
    <tr> 
     <div class="bigred"> 
      <td class="bigred"> 
       <?php echo '<b>'. "$product_price".'</b>'; ?> 
      </td> 
     </div> 
    </tr> 
    <tr> 
     <td> 
      <img src="<?php echo $file ?>" height = "150px"  width="150px"/><br /> 
     </td> 
     <div class="smallblack" 
    </tr> 
    <tr> 
     <td class = "smallblack"> 
     <?php echo '<b>' . "$desc".'</b>'; ?> 
     </td> 
    </tr> 
</div> 
<?php } ?> 

私はそれが9枚のランダムな画像を生成するために取得することができますが、それは一の長い列にお互いの直下に、それらすべてを置く:

ここに私のコードは、これまでのところです。 3行3列に表示させる方法はありますか?

私は愚かな質問であるとお詫び申し上げますが、私は始まっていて助けに感謝しています。

ありがとうございました:)サンプル

答えて

0
<?php 
// A counter which is incremented by one for each product row 
// in the loop below. 
$i = 0; 

echo "<table>\n"; 
echo "<tr>\n"; 

while ($product = mysqli_fetch_array($query)) { 
    // Re-open HTML row, if $i is divisible by 3 
    if ($i++ % 3 == 0) { 
    echo "</tr><tr>\n"; 
    } 

    // Escape the `src` attribute value as appropriate, according to the 
    // logic of your app. This is just a sample. 
    $img_src = htmlspecialchars($product['prod_img']); 

    echo <<<HTML 
    <td> 
    <div><img src="{$img_src}"/></div> 
    <div>{$product['prod_desc']}</div> 
    <!-- Put the rest of the fields here --> 
    </td> 
HTML; 
} 

// Add cells for the rest of the columns (if any) 
while ($i++ % 3 != 0) { 
    echo "<td></td>\n"; 
} 

echo "</tr>\n"; 
echo "</table>\n"; 
?> 

P .:私は、SmartyやTwigなどのテンプレートエンジンを使用することをお勧めします。テンプレートエンジンの助けを借りて、マークアップをもっと読みやすく保守しやすくすることができます。

+0

私はこれを見るのが好きで、ちょうどそれに従う必要がありますlol –

+0

私はそれが同じイメージを選び、それを繰り返すことを除いて、これを働かせることができました - それはORDER BY RAND()を忘れてしまったのですか?何か案は? –

+0

@NevilleDean、ローカルマシン上でコードをテストしました。それは期待どおりに動作します。新しいコードに問題があるはずです。コードを見ることなく、私は 'var_dump($ product);でデバッグを提案することができます。 –

0

として添付

ピックをあなたが入れて、あなたのテーブルを変更し、3つの<td>タグの代わりに、一つだけを使用し、そう...

<table> 
<tr> 
<?php 
    $counter = 0; // Needs to be outside of the loop... 
    while($products = mysqli_fetch_array($query)){ 
     $file = $products['prod_img']; 
     $pid = $products['prod_id']; 
     $product_price = $products['prod_price']; 
     $image_id = $products['prod_id']; 
     $desc = $products['prod_desc']; 
?> 

    <td class="bigred"> 
     <?php echo '<b>'. "$product_price".'</b>'; ?> 
     <img src="<?php echo $file ?>" height = "150px"  width="150px"/><br /> 
     <?php echo '<b>' . "$desc".'</b>'; ?>  
    </td> 

<?php 
    // Check to see if you have looped through three times and close the <tr> tag. 
    if($counter % 3 === 0) { 
     echo '</tr><tr>'; 
    } 
    $counter++ 
?> 
</table> 

ようにすべきです9つ以上のイメージがある場合は、テーブルの行とセルを作成し続けるので、それを処理するロジックがさらに必要になりますが、これは9つのイメージで機能するはずです。

これを処理するより洗練された方法は、<div>タグと浮動小数点数を使用することですが、すでにテーブルを使用しているので、私はそれをそのままフォーマットします。

+0

ありがとうございます。データベースには9枚以上の画像があります - それはおそらく何千もあるかもしれません - 私がしたいのは、データベースから9枚のランダムな画像を選んでショーケースすることだけです。私はこれを行かせます。 –

関連する問題