Product Grid View with Pagination Using PHP, Bootstrap 4 and MySQLi

This PHP tutorial help to create product listing grid with pagination.I have already shared php pagination tutorial with ajax and non-ajax manner, This tutorial will use MySQL as a database.We will create product listing page with pagination.

I have been working on a project that have product listing functionality, A single product Block containing a title, an image and description.I have created div based layout for this but you can also achieve same result using un-ordered list with the CSS property.

You can also check other recommended tutorial of PHP pagination,

I will use following files for this Product Listing tutorial,

  1. index.php : This file is main entry file of php product grid view application.
  2. response.php : This file will contain html of rows.
  3. connection.php : This file will use to create MySQL database connection with PHP.

We will create product_grid_view_example folder into /www directory and create above files and folder structure into product_grid_view_example folder.

Include css and js Files

I will icluded all dependecnies libs files into header section of index.php file.

Create MySQL Database and table For PHP Login

We will create 'test' database into MySQL database server and create table 'tbl_products' using below MySQL script.You can also use MySQL command line to execute SQL file.

Now I will add dummy data into above products MySQL table,You need to run below query into 'test' database.

Mysql Database Connection using PHP MySQLI

I will create connection.php file and added below code into this file.

As you can see, I have passed following mysql database parameters.

$servername : MySQL server host name.
$username : MySQL Database user name.
$password : MySQL Database password.
$dbname : MySQL Database name.

Added below code into response.php file.We will fetch data from MySQL database table using mysqli.

We have included 'connection.php' file into the top of response.php, that use to fetch data from MySQL database.I am creating SQL Query using $start_from and $limit variable, that help to fetch chunks of data from database.

We will create html table listing with pagination links into index.php, we are using bootstrap to create HTML table grid and pagination nav.

We will add jquery code to render first time data,

How To create Pagination navigation

To create pagination nav link into listing page, we will fetch all datas from products table and stored count all rows into a php $total_records variable.We will add below code into top of the index.php file,

We have total number of records of products table, now we will add number pagination link at the bottom of table list grid into index.php file.

Now, we will add jQuery call to render particular page records and bind with in target div container into index.php file.

Added some styling on index.php page using css,

We have created simple product grid view using bootstrap HTML list and bootstrap card, also added pagination with php grid view using jQuery and PHP. I am doing AJAX based pagination using jQuery.