Member Avatar for Vaske_1

I'm making a movie website and want to make the limit of movies for example 10 per page but every pagination tutorial or guide I find shows only how to do this with lists, I want to do this with cards so it looks like it does on other movie websites. Any advice or help would be appreciated!

Here is the code that I want to make into a pagination:

<?php 
include('db.php');
include('header.php');
include('footer.php');
?>
<h1 style="color: green;">MOST RECENTLY ADDED</h1>
<div class="content">
    <div class="row">


    <?php 

    $query = "SELECT * FROM movie";
    $run = mysqli_query($con,$query);
    if ($run) {

        while($row = mysqli_fetch_assoc($run)){
            ?>

<div class="col">
    <div class="card border border-success" style="width: 18rem;text-align: center; background-color:#343a40;">
  <img class="card-img-top" height="300px" width="100px" src="admin12312/thumb/<?php echo$row['imgpath']; ?>" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title" style="color: green;"><?php echo$row['name']; ?></h5>
<br>

    <a href="viewmovie.php?id=<?php echo $row['id']; ?>" class="btn btn-outline-success my-2 my-sm-0">Watch</a>
  </div>
</div>
</div>

            <?php

        }

    }

     ?>
</div>
</div>

While much is desired as to your code formatting I won't address your code here. Instead let's talk design.

Let's say you have the usual SQL database such as MySQL. I would have a page counter that would be used when I made my SQL query. How?
You said the page would have 10 rows from the database so here's a little read about getting 10 then another 10 rows with SQL: https://www.petefreitag.com/item/451.cfm

Your next ten rows button would then increment your page counter, and then repeat your PHP code to display the returned rows.

This is a bit of a bootstrap question really, I hashed together a quick idea of what you could do.

Keep in mind the concept behind bootstrap is RESPONSIVE - so you don't want to start defining exact sizes for the images etc as it scales with mobile devices and desktops alike.

I gave an example below col-sm-4 col-md-3 col-lg-2 this varies the size based on the screen size.

IF small screen size 4 columns wide, IF medium screen size 3 coumns wide, IF large screen size 2 columns wide.

In bootstrap each row adds up to 12 columns, so once you reach 12 it will wrap to the next line. I tried overflow-x:scroll; to try make it not wrap, but you might have to use a different bootstrap utility to make a scrolling one

<?php 
include('db.php');
include('header.php');
include('footer.php');

$start = ctype_digit($_GET['p']);
if(!$start){$start = 0;}
?>
<h1 style="color: green;">MOST RECENTLY ADDED</h1>
<a href="thispage.php?p=<?php echo $start+10;?>">next</a>
<div class="content">
    <div class="row" style="overflow-x:scroll;">
    <?php 
    $query = "SELECT * FROM movie ORDER BY `added_date` DESC LIMIT $start, 10";
    $run = mysqli_query($con,$query);
    if ($run) {
        while($row = mysqli_fetch_assoc($run)){
            ?>

<div class="col-sm-4 col-md-3 col-lg-2">
    <div class="card border border-success" style="width: 18rem;text-align: center; background-color:#343a40;">
  <img class="card-img-top" height="300px" width="100px" src="admin12312/thumb/<?php echo $row['imgpath'];?>" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title" style="color: green;"><?php echo $row['name'];?></h5>
<br>

    <a href="viewmovie.php?id=<?php echo $row['id'];?>" class="btn btn-outline-success my-2 my-sm-0">Watch</a>
  </div>
</div>
</div>
            <?php
        }
    }
     ?>
</div>
</div>

Use mysqli_fetch_assoc instead of mysqli_fetch_array and might have problem in password in table spec which having varchar(20) just make it length as 32 varchar(32). and dont use double quotes instead of that use single quotes. And the password is MD5.

Use this Script for Pagenation with PHP javascript: -
Get Total Pages count in ($total_pages) in Javascript part. Mentioning the mysqli_query part before table start.
And get pagenation count part is mention after the table with calling id as page. And redirection URL was mentioned in Javascript.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.