使用PHP和Bootsrap从sql表显示行信息

Question

I'm trying to display product information (picture, description, price...) from sql table called products. I'm using Bootstrap and basically the HTML is something like:

<!-- ALL THE PRODUCTS-->
    <div class="row">   
                  <!-- ONE PRODUCT IN ONE COLUMN-->
                  <ul class="tutors_nav">
                    <li>
                      <div class="single_tutors col-lg-3 col-md-3 col-sm-3">
                        <!--  PRODUCT PICTURE-->
                        <div class="tutors_thumb">
                          <img src="img/gallery/prod1.jpg" />                      
                        </div>
                    <!--  PRODUCT INFORMATION-->
                        <div class="singTutors_content">
                          <h3 class="tutors_name">HUGO BOSS BOTTLED</h3>
                          <span>Homme</span>
                          <p>8700 DA</p>
                        </div>

                      </div>
                    </li>

                  </ul>


            </div>

I'm trying to get all the products from the sql table and then display every product (like in the previous html version) using PHP basically it will be 4 products in every row, this is my php code:

<?php   
$sql = "SELECT * FROM produits";
    if (!$result = $connection->query($sql)) {
        die ('There was an error running query[' . $connection->error . ']');
    }   


$rows = $result->num_rows;    // Find total rows returned by database
    if($rows > 0) {
        $cols = 4;    // Define number of columns
        $counter = 1;     // Counter used to identify if we need to start or end a row
        $nbsp = $cols - ($rows % $cols);    // Calculate the number of blank columns

        $container_class = 'row';  // Parent container class name
        $row_class = 'row';    // Row class name        
        $col_class = 'single_tutors col-lg-3 col-md-3 col-sm-3'; // Column class name
        $img_class='tutors_thumb';
        $desc_class='tutors_name';


        echo '<div class="'.$container_class.'">';    // Container open
        while ($item = $result->fetch_array()) {
            if(($counter % $cols) == 1) {    // Check if it's new row
                echo '<div class="'.$row_class.'">';    // Start a new row
            }           
                    //one product 
                    $img = $item['imgsrc'];
                    $des=$item['description'];
                    $prix=$item['prix'];
                    $type=$item['type'];

                    /*div class="tutors_thumb">
                      <img src="img/gallery/prod1.jpg" />                      
                    </div>
                    */

                    echo '<div class="'.$img_class.'"><img src='.$img.' alt="test"/></div>';

                    echo '<h3 class='.$desc_class.'>'.$des.'<p>'.$prix.'</p><span> '.$type.'</span></h3>  ';


            if(($counter % $cols) == 0) { // If it's last column in each row then counter remainder will be zero
                echo '</div>';   //  Close the row
            }
            $counter++;    // Increase the counter
        }
        $result->free();
        if($nbsp > 0) { // Adjustment to add unused column in last row if they exist
            for ($i = 0; $i < $nbsp; $i++)  { 
                echo '<div class="'.$col_class.'">&nbsp;</div>';        
            }
            echo '</div>';  // Close the row
        }
        echo '</div>';  // Close the container
    }


?>

unfortunately it's displaying one product in every row, how to fix that please!

Answer 1

Few comments for your code:

• a container is a container, so use .container class (if you really need it), not .row
• every .row NEEDs a .col child (check how to nest columns ), then you can append a .row to a .col , but the tree is like that

Check this code with commented corrections

<?php
    $sql = "SELECT * FROM produits";
    if (!$result = $connection->query($sql)) {
        die ('There was an error running query[' . $connection->error . ']');
    }

    $rows = $result->num_rows;    // Find total rows returned by database
    if($rows > 0) {
        $cols = 4;    // Define number of columns
        $counter = 1;     // Counter used to identify if we need to start or end a row
        $nbsp = $cols - ($rows % $cols);    // Calculate the number of blank columns

        $container_class = 'row';  // Parent container class name
        $row_class = 'row';    // Row class name
        $col_class = 'single_tutors col-lg-3 col-md-3 col-sm-3'; // Column class name
        $img_class='tutors_thumb';
        $desc_class='tutors_name';


        echo '<div class="row"><div class="col-sm-12 col-md-12 col-lg-12">';    // Container open
        while ($item = $result->fetch_array()) {
            if(($counter % $cols) == 1) {    // Check if it's new row
                echo '<div class="'.$row_class.'">';    // Start a new row
            }
            //one product
            $img = $item['imgsrc'];
            $des=$item['description'];
            $prix=$item['prix'];
            $type=$item['type'];

            /*div class="tutors_thumb">
              <img src="img/gallery/prod1.jpg" />
            </div>
            */
            echo '<div class="'.$col_class.'">'; //open column

            echo '<div class="'.$img_class.'"><img src='.$img.' alt="test"/></div>';

            echo '<h3 class='.$desc_class.'>'.$des.'<p>'.$prix.'</p><span> '.$type.'</span></h3>  ';

            echo '</div>'; //close column

            if(($counter % $cols) == 0) { // If it's last column in each row then counter remainder will be zero
                echo '</div>';   //  Close the row
            }
            $counter++;    // Increase the counter
        }
        if(($counter % $cols) != 0) { // close .row if you actually have less than $cols columns printed
            echo '</div>';
        }
        /*
         * You don't need to fill missing columns, existing ones will be automatically pulled left
         * 
         * $result->free();
        if($nbsp > 0) { // Adjustment to add unused column in last row if they exist
            for ($i = 0; $i < $nbsp; $i++)  {
                echo '<div class="'.$col_class.'">&nbsp;</div>';
            }
            echo '</div>';  // Close the row
        }*/
        echo '</div></div>';  // Close the container
    }
?>