pagination with bootstrap 4 cards

Question

I'm creating a sort of blog area on my website using bootstrap 4 cards, i fill my cards with data from my database. And i want to put the cards inside of a pagination with a category filter

my category select is working fine, but I'm not sure how I'm supposed to tackle the part for calculating how many rows and columns are supposed to be on the webpage. I know i can make a variable which holds the maximum amount of rows and columns and calculate the offset from that with the ceil function. Then put that into a SQL query with the LIMIT being the offset and maximum items but I am not sure how this works with rows. this is the code i have at the moment. `

<nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
            <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1">Previous</a>
            </li><li class="page-item"><a class="page-link" href="blog.php?category=<?php if (isset($_GET["category"])){echo $_GET["category"];}?>&pagenumber=<?php // this is also where I'm stuck ?>">1</a>
</li>
<li class="page-item"><a class="page-link" href="blog.php?category=<?php if (isset($_GET["category"])){echo $_GET["category"];}?>&pagenumber=<?php // this is also where I'm stuck ?>">2</a></li>
<li class="page-item"><a class="page-link" href="blog.php?category=<?php if (isset($_GET["category"])){echo $_GET["category"];}?>&pagenumber=<?php // this is also where I'm stuck ?>">3</a></li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
    </nav>

`

the category works so for example if i select category 2 the url will be

http://localhost/HCDistributie/blog.php?category=2&pagenumber=

the only thing that is needed is to get the pagenumber.

this is my back-end code where i loop through each each item in the database and put that inside the card

    function getNews()
{
    // get current category
    if (isset($_GET["category"]) && is_numeric($_GET["category"])) {
        // bind get category to categoryId
        $categoryId = $_GET["category"];
        // if category is 1
        if ($categoryId == 1) {
            if (isset($_GET["pagenumber"]) && is_numeric($_GET["pagenumber"])) {
                $pageNumber = $_GET["pagenumber"];
                try {
                    $itemLimits = 9;
                    $rowLimit = 3;


                    $db = new Connection();

                    $database = $db->openConnection();

                    $stm = $database->query("SELECT * FROM blog where category = $categoryId");

                    $stm->execute();

                    $rowNews = $stm->fetchAll(PDO::FETCH_ASSOC);

                    foreach ($rowNews as $items) {
                        ?>
                        <div class="card-group">
                            <div id="classContainer" class="col-md-4">
                                <div class="card">
                                    <img src=" <?php $items['img'] ?>" class="card-img-top" alt="...">
                                    <div class="card-body">
                                        <h5 class="card-title"><?php echo $items["title"]; ?></h5>
                                        <p class="card-text"><?php echo $items["content"] ?></p>
                                        <p class="card-text"><small
                                                    class="text-muted"><?php $items["author"]; ?></small>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php
                    }

                } catch
                (PDOException $e) {
                    echo sprintf("Something went wrong. $e->errorInfo");
                }
            }
        }
    }
}

I sort of have an idea what i should do the problem is I'm not sure how to apply that to my code, the tutorials i have read only deal with variable for max items while i have 2 max columns and max rows. I am not sure how to calculate both of them separately.

This is the first time I worked with any sort of pagination so i apologize if some things seem weird and or stupid.

Answer 1

This is not weird or stupid, first contact with pagination is always a hassle ;)

With bootstrap, you could get away with just knowing the maximal occurrences of your card records. You could wrap everything while using rows and cols, check out this example:

<div class="container">
  <div class="row">
    <div class="col-4">
      1 of 5
    </div>
    <div class="col-4">
      2 of 5
    </div>
    <div class="col-4">
      3 of 5
    </div>
    <div class="col-4">
      4 of 5
    </div>
    <div class="col-4">
      5 of 5
    </div>
  </div>  
</div>

Fiddle

Thanks to .col-4, you will always get three cards in a row. In your example:

<div class="card-group">
  <div class="row">
  <?php foreach ($item as $items) { ?>
    <div class="col-4">
      <div class="card">
        // Your card content goes here, use $item
      </div>
    </div>
  <?php } ?>
  </div>
</div>

More importantly, it seems you writing something in plain PHP. If you want to go public, you should consider a framework that has already some validation capabilities and function helpers - even build in pagination! I would pick Laravel for that.

EDIT: Fixed mistake. Thanks @hakiko