3x3表隨機圖像 - PHP

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列？

我很抱歉，如果這是一個愚蠢的問題，但我只是開始和欣賞的幫助。

謝謝:)

產品圖附於樣品

來源

2016-11-19 Neville Dean

<?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.S .:我推薦使用模板引擎，如Smarty或Twig。藉助模板引擎，您可以使標記更具可讀性和可維護性。

來源

2016-11-19 11:56:40

我喜歡這樣的外觀，只需要遵循它lol –

我設法讓這個工作，除了它選擇相同的圖像，並重復它 - 好像它忘記了ORDER BY RAND（）？有任何想法嗎？ –

@NevilleDean，我測試了我的本地機器上的代碼。它按預期工作。您應該對新代碼有問題。在沒有看到代碼的情況下，我只能使用'var_dump（$ product）;'_'在loop_中建議進行調試。 –

你應該改變你的表出來並投入使用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>標籤和浮標，但由於您已經在使用表格，因此我將其格式化爲如此。

來源

2016-11-19 11:55:47 dericcain

謝謝。數據庫中會有9個以上的圖像 - 可能有數千個圖像 - 我希望它能做的就是從數據庫中選取9張隨機圖像並展示它們。我會放棄這一點。 –

3x3表隨機圖像 - PHP

回答

相關問題