php - How to list the records in horizontal order using modulus (%) operation?

Question

I have problem in my task where I suppose to display my record in horizontally with 3 columns

Unfortunately, my display is become vertical.

The task require us to use modulus (%) operator in order to display the records. The records are stored in database (id, title, picture, category, author). There are 11 books that store in database. Here is my PHP code:

<?php
include_once('config.php');
$result = mysqli_query($mysqli, "SELECT * FROM books ORDER BY id ASC");
?>

<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 200px;
}

.p2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding-left: 10px;
}

.p3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding-left: 10px;
color: blue;
}
</style>



<div class="container">
    

    <center>
        <h1>Koleksi Buku Peribadi</h1>
        <table>
            <?php
            $x=11;
            $y=3;
            $i=$x % $y;
            while($i && $book = mysqli_fetch_array($result)) {
            ?>

            <tr>
                <td>
                <img src="Gambar-buku/<?php echo $book['picture'];?>">

                <p class='p2'>Penulis:<span class='p3'> <?php echo $book['author'];?> </span>
                <br> <i><?php echo $book['category'];?></i>
                </p> 
                
                <center><button type="button">Details</button> </center>                                 
                </td>  
            </tr>

            <?php
                $i++; }
            ?>                         
        </table>
    </center>

   
</div>

Answer 1

Modulus is useful when you need to equally divide items into several categories.

Formally: index_of_category = index_of_item % number_of_categories

Practically: In your case, you have 3 categories (columns). For item with index i, you find index of its column with i % 3.

For making table layout work, you then need to:

• print tr opening tag for every item belonging in column with index 0
• print tr closing tag for every item belonging in column with index 2.

In my example, you can change number of columns easily by modifying $numberOfColumns variable.

<div class="container">
    <center>
        <h1>Koleksi Buku Peribadi</h1>
        <table>
<?php
    $numberOfColumns = 3;
    for ($i = 0; (($book = mysqli_fetch_array($result)) !== null); $i++) {
      $printRowOpeningTag = $i % $numberOfColumns === 0;
      $printRowClosingTag = $i % $numberOfColumns === $numberOfColumns - 1;
      if ($printRowOpeningTag) {?>
          <tr>
<?php } ?>
            <td><img src="Gambar-buku/<?php echo $book['picture'];?>">
                <p class='p2'>Penulis:<span class='p3'> <?php echo $book['author'];?> </span>
                <br> <i><?php echo $book['category'];?> </i>
                </p> 
                <center><button type="button">Details</button> </center>                                 
            </td>
<?php if ($printRowClosingTag) { ?>
          </tr>
<?php } ?>
<?php 
    } ?>
        </table>
    </center>
</div>