Tutorial on Making Infinite Scroll With PHP, MySQL, Jquery
Infinite Scroll or website pages that when scrolled have no limit because they are made to automatically take (load) new data to be displayed on one page until all the data is downloaded. This infinite scroll replaces the paging function (page numbering) which we often see from the start on various websites.
In this article, Tutorial-webdesign.com will discuss how to make a simple infinite scroll for your website, where we will try to make it in a simple gallery page.
As we know, several websites that apply this infinite scroll model are Twitter, Facebook, Pinterest, Mashable, etc.
First Step: Creating SQL Database
First we need to prepare a database, here as an example we only create one table to accommodate the names of the image files that we want to display, the database name is infinitescroll.
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(255) NOT NULL,
order int(11) NOT NULL,
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;
Creating Index.php Pages
On this index.php page, we don’t really need a lot of HTML tags, if we look at it we only need to create 3 divs with different IDs, of course with a standard HTML structure, put these divs in the body.
Loading More Content
No More Content
We will display 2 images on the index.php page by placing the PHP code for the following sql query at the very top of index.php
$con = mysql_connect(“localhost”, “username”, “password”);
$result = mysql_query(“select SQL_CALC_FOUND_ROWS * from scroll_images order by id asc limit 2”);
$row_object = mysql_query(“Select Found_Rows() as rowcount”);
$row_object = mysql_fetch_object($row_object);
$actual_row_count = $row_object->rowcount;
Ajax with Jquery