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.
Infinity Scroll
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.
CREATE TABLE scroll_images
(id
int(11) NOT NULL AUTO_INCREMENT,name
varchar(255) NOT NULL,order
int(11) NOT NULL,
PRIMARY KEY(id
)
) 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”);
mysql_select_db(“database_name”);
$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
Still in the index.php file, we will add Javascript / Ajax with the jquery framework to load other data after the 2 images that we load at the beginning of the website are run, this javascript script is placed in [head] and [/head], previously don’t forgot to include the jquery script which can be downloaded directly from the jquery.com website