How to separate php mysqli result by limit each 4 result in a row

Question

i'm trying to fetch the result from database with php mysqli function where by i can successfully fetch all the result, but it all show in a same row. How to make them to separate the row after display 4 result?

Let say i have total of 8 result in database. So if i'm using while loop to fetch the data and echo it it should be something like this:

data1 data2 data3 data4 data5 data6 data7 data8

But how to make it to show display like this :

data1 data2 data3 data4 
data5 data6 data7 data8

This is the sample hardcoded div result:

 <div class="row">
    <div id="portofolio">
        <!-- Project 1-->
        <div class="three columns category trains">
            <h5>Sponsor 1</h5>
            <p>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <div class="portofoliothumb">

              <img src="images/temp/logo1.jpg" class="fourimage" alt=""/>
            </div>
        </div>
        <!-- Project 2-->
        <div class="three columns category castles">
            <h5>Sponsor 2</h5>
            <p>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <div class="portofoliothumb">

              <img src="images/temp/logo2.jpg" class="fourimage" alt=""/>
            </div>
        </div>
        <!-- Project 3-->
        <div class="three columns category nature">
            <h5>Sponsor 3</h5>
            <p>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <div class="portofoliothumb">

              <img src="images/temp/logo7.jpg" class="fourimage" alt=""/>
            </div>
        </div>
        <!-- Project 4-->
        <div class="three columns category castles">
            <h5>Sponsor 4</h5>
            <p>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <div class="portofoliothumb">

              <img src="images/temp/logo3.jpg" class="fourimage" alt=""/>
            </div>
        </div>
        <!-- Project 5--><!-- Project 6--><!-- Project 7-->

        <!-- Project 8-->

    </div>
</div>

 <div class="row">
    <div id="portofolio">
        <!-- Project 1-->
        <div class="three columns category trains">
            <h5>Sponsor 5</h5>
            <p>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <div class="portofoliothumb">

              <img src="images/temp/logo4.jpg" class="fourimage" alt=""/>
            </div>
        </div>
        <!-- Project 2-->
        <div class="three columns category castles">
            <h5>Sponsor 6</h5>
            <p>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <div class="portofoliothumb">

              <img src="images/temp/logo5.jpg" class="fourimage" alt=""/>
            </div>
        </div>
        <!-- Project 3-->
        <div class="three columns category nature">
            <h5>Sponsor 7</h5>
            <p>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <div class="portofoliothumb">

              <img src="images/temp/logo8.jpg" class="fourimage" alt=""/>
            </div>
        </div>
        <!-- Project 4-->
        <div class="three columns category castles">
            <h5>Sponsor 8</h5>
            <p>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <div class="portofoliothumb">

              <img src="images/temp/logo6.jpg" class="fourimage" alt=""/>
            </div>
        </div>
        <!-- Project 5--><!-- Project 6--><!-- Project 7-->

        <!-- Project 8-->
    </div>  
    </div>

Here is the php code that i'm going to display the result but i had no clue how to separate the result with 4 and go to next line and display.

PHP Code here:

<?php
    include 'dbConnection.php';

    global $dbLink;



    $image = "SELECT * FROM sponsor_item where sponsor_data !='' ";
    $result=mysqli_query($dbLink,$image);   

    // Numeric array
    while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){


    ?>
     <div class="row">
        <div id="portofolio">
            <!-- Project 1-->
            <div class="three columns category trains">
                <h5>Sponsor 1</h5>
                <p>
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                </p>
                <div class="portofoliothumb">

                  <img style="margin-left: 0px; margin-top: -218.375px; width: 100%; height: 1150px;" src="data:image/jpeg;base64,<?php echo base64_encode($row['sponsor_data']); ?>" alt="image0<?php echo $row['sponsor_item_id']; ?>">   
                </div>
            </div>
    </div>
    <?php 
    }
    mysqli_free_result($result);
    // Close the mysql connection
    $dbLink->close();
    ?>

Answer 1

You need to add a counter and look when the counter value is a multiple of 4. If it's the case, just echo the the DIV end tag and a new DIVstart tag. You also need to exclude the first and last DIV tags from the WHILE loop :

<?php
include 'dbConnection.php';

global $dbLink;



$image = "SELECT * FROM sponsor_item where sponsor_data !='' ";
$result=mysqli_query($dbLink,$image);   

$item = 0;

?>
 <div class="row">
    <div id="portofolio">
<?php
// Numeric array
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
?>
        <!-- Project 1-->
        <div class="three columns category trains">
            <h5>Sponsor 1</h5>
            <p>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <div class="portofoliothumb">

              <img style="margin-left: 0px; margin-top: -218.375px; width: 100%; height: 1150px;" src="data:image/jpeg;base64,<?php echo base64_encode($row['sponsor_data']); ?>" alt="image0<?php echo $row['sponsor_item_id']; ?>">   
            </div>
        </div>
    <?php 
    $item++;
    if ($item % 4 == 0) { echo '</div></div><div class="row"><div id="portofolio">'; }
}
mysqli_free_result($result);
// Close the mysql connection
$dbLink->close();
?>
    </div>
</div>

Answer 2

Use

<?php
    $counter=1;
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
{
  if($counter%4==0)
  {
  ?>
    <div class="row">
      <div id="portofolio">
  <?php
  }
  ?>
  <!--Your Regular repeating DIVS start here-->
        <div class="three columns category trains">
            <h5>Sponsor 1</h5>
            <p>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <div class="portofoliothumb">

              <img style="margin-left: 0px; margin-top: -218.375px; width: 100%; height: 1150px;" src="data:image/jpeg;base64,<?php echo base64_encode($row['sponsor_data']); ?>" alt="image0<?php echo $row['sponsor_item_id']; ?>">   
            </div>
        </div>
  <!--Your Regular repeating DIVS end here-->
  <?php 
 if($counter%4==0)
  {
  ?>
      </div>
    </div>
  <?php
  }
    $count+=1; 
  }
 ?>

Answer 3

Count how many rows you've printed, then use that to insert a row after however many rows

$counter = 0;

foreach($result as....)
{
    print $result->whatever;
    $counter++;
    if($counter % 4 == 0) // Counter divides cleanly by 4
    {
        print "<br />";
        //Or whatever goes between your rows, eg </div><div class="whatever">
    }
}

To do this, use the modulus operator, %. This gives the remainder of dividing the first number by the second, so gives an answer of 0 if the number cleanly divides

eg

1 % 4 = 1 // No new line
2 % 4 = 2 // No new line
3 % 4 = 3 // No new line
4 % 4 = 0 // New line!
5 % 4 = 1 // No new line