In this tutorial, we will show you how can you dynamically load data on div tag using PHP, MySQL, JQuery and Ajax. We have used similar paging technique like Facebook to load data from database. Whenever user scroll down and reach to bottom of the page, then it will fetch the new data from database without page reload.
First Create "Post" Database Table
config.php
Consists of database configuration details to establish database connection.
DAO.php
This DAO class helps to establish the database connection and populate/fetch the record from MySQL database on AJAX call.
controller.php
Controller work is to control the flow of execution. Here on scroll down, JQuery script send request to controller.php page and it will process the request and return response to be displayed.
index.php
This page consist of Jquery, AJAX, PHP and HTML code, which helps to fetch records form MySQL database when user scroll down to bottom of the page.
Download Link :
------------------------------
https://github.com/skptricks/php-Tutorials/tree/master/Dynamically%20load%20data%20on%20div%20scroll%20using%20php-%20mysql-%20jquery%20and%20ajax
Check out our blog archive on the topic if you’re looking to learn about :
1. Load More Data Using JQuery Ajax And PHP From MySQL Database.
2. PHP Limit Data Selections From MySQL Database.
Facebook Style Auto Scroll Pagination using jQuery and PHP
Lets see the below complete example, where we Load Data on Page Scroll using JQuery Ajax PHP from MySQL Database.First Create "Post" Database Table
CREATE TABLE `post` (
`POSTID` int(3) NOT NULL,
`POSTTITLE` varchar(100) NOT NULL,
`POSTDETAILS` varchar(10000) NOT NULL,
`POSTLINK` varchar(100) NOT NULL
)
Consists of database configuration details to establish database connection.
<?php /* DATABASE CONFIGURATION */ define('DB_SERVER', 'localhost'); define('DB_DATABASE', 'skptricksdemo'); define('DB_USERNAME', 'root'); define('DB_PASSWORD', ''); ?>
DAO.php
This DAO class helps to establish the database connection and populate/fetch the record from MySQL database on AJAX call.
<?php include("config.php"); class DAO{ public function dbConnect(){ $dbhost = DB_SERVER; // set the hostname $dbname = DB_DATABASE ; // set the database name $dbuser = DB_USERNAME ; // set the mysql username $dbpass = DB_PASSWORD; // set the mysql password try { $dbConnection = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass); $dbConnection->exec("set names utf8"); $dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); return $dbConnection; } catch (PDOException $e) { echo 'Connection failed: ' . $e->getMessage(); } } public function getData($groupNo){ //sanitize post value $group_number = $groupNo; $items_per_group = 5 ; //throw HTTP error if group number is not valid if(!is_numeric($group_number)){ header('HTTP/1.1 500 Invalid number!'); exit(); } //get current starting point of records $position = ($group_number * $items_per_group); try { $dbConnection = $this->dbConnect(); $stmt = $dbConnection->prepare("SELECT * FROM `post` order by `POSTID` LIMIT :position , :items_per_group"); $stmt->bindParam(':position', $position , PDO::PARAM_INT); $stmt->bindParam(':items_per_group', $items_per_group, PDO::PARAM_INT); $stmt->execute(); $Count = $stmt->rowCount(); //echo " Total Records Count : $Count .<br>" ; $result ="" ; if ($Count > 0){ while($data=$stmt->fetch(PDO::FETCH_ASSOC)) { $result = $result ."<div class='user-post-right-display-main-container-upto-last' > <div style='margin-left:10px;' > <span style='margin-left:12px;' ><h1><a href='".$data['POSTLINK']. "' style='text-decoration:none;'>".$data['POSTTITLE']."<a/> </h1></span> <span>".$data['POSTDETAILS']."</span> </div> </div>" ; } return $result ; } } catch (PDOException $e) { echo 'Connection failed: ' . $e->getMessage(); } } public function getTotalNumberOfRecordsCount(){ $items_per_group = 5 ; try { $dbConnection = $this->dbConnect(); $stmt = $dbConnection->prepare('SELECT count(*) as `total_count` FROM `post`'); $stmt->execute(); $Count = $stmt->rowCount(); //echo " Total Records Count : $Count .<br>" ; if ($Count > 0){ $data=$stmt->fetch(PDO::FETCH_ASSOC) ; $total_groups = ceil($data['total_count']/$items_per_group); return $total_groups; } } catch (PDOException $e) { echo 'Connection failed: ' . $e->getMessage(); } } } ?>
controller.php
Controller work is to control the flow of execution. Here on scroll down, JQuery script send request to controller.php page and it will process the request and return response to be displayed.
?php include("DAO.php"); if(isset($_POST["group_no"])){ $group_number = filter_var($_POST["group_no"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH); $dao = new DAO(); echo $dao->getData($group_number); } ?>
index.php
This page consist of Jquery, AJAX, PHP and HTML code, which helps to fetch records form MySQL database when user scroll down to bottom of the page.
- JQuery script helps to detect scroll down to load.
- AJAX helps to fetch records without page refresh.
<?php include("DAO.php"); $dao = new DAO(); ?> <html> <head> <script src="jquery-3.2.1.min.js"> </script> <style> .user-post-right-display-main-container-upto-last { float:left; line-height:20px; min-height:50px; word-wrap:break-word; overflow:hidden; display:block; font-size:15px; width:600px; margin-top:15px; background-color:white; border:1px solid #d6d7da; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; box-shadow: 0 2px 10px #cbcbcb; -moz-box-shadow: 0 2px 10px #cbcbcb; -webkit-box-shadow: 0 2px 10px #cbcbcb; } .user-post-display-body-main-container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .animation-load{ float:left; min-height:30px; text-align: center; width:600px; font-size:18px; margin-bottom:15px; margin-top:15px; background-color:white; border:1px solid #d6d7da; border-radius:4px; padding-top:5px; -moz-border-radius:4px; -webkit-border-radius:4px; box-shadow: 0 2px 10px #cbcbcb; -moz-box-shadow: 0 2px 10px #cbcbcb; -webkit-box-shadow: 0 2px 10px #cbcbcb; display:none; font-weight: bold; cursor: pointer; } </style> <script type="text/javascript"> $(document).ready(function() { var track_load = 0; //total loaded record group(s) var loading = false; //to prevents multipal ajax loads var total_groups = <?php echo $dao->getTotalNumberOfRecordsCount(); ?> //total record group(s) // Load data on first load... $.post('controller.php',{ 'group_no': track_load} , function(data){ track_load++; $('.user-post-display-body-main-container').append(data); $('.animation-load').show(); } ); // Scroll to load data $(window).scroll('scroll', function() { if($(window).scrollTop() >= $('#display_posts').offset().top + $('#display_posts').outerHeight() - window.innerHeight) { loadData(); } } ); function loadData() { if(track_load <= total_groups && loading==false) //there's more data to load { loading = true; //prevent further ajax loading $('.animation-load').html('<img src="loading-animation.gif" width="70px;" height="50px">'); //load data from the server using a HTTP POST request $.post('controller.php',{ 'group_no': track_load} , function(data){ $(".user-post-display-body-main-container").append(data); //append received data into the element //hide loading image $('.animation-load').html('Load More...'); //hide loading image once data is received track_load++; //loaded group increment loading = false; } ).fail(function(xhr, ajaxOptions, thrownError) { //any errors? alert(thrownError); //alert with HTTP error $('.animation-load').hide(); //hide loading image loading = false; } ); } if(track_load >= total_groups-1) { //reached end of the page yet? disable load button $('.animation-load').html('No more post'); } } $(".animation-load").click(function (e) { //user clicks on button loadData(); } ); } ); </script> </head> <body style="margin:0px auto;width:700px;"> <div id="display_posts" class="user-post-display-body-main-container" style="margin:0px auto;width:700px;"> <?php // echo $dao->getData(0); ?> </div> <div class="animation-load" > Load More... </div> </body> </html>
Download Link :
------------------------------
https://github.com/skptricks/php-Tutorials/tree/master/Dynamically%20load%20data%20on%20div%20scroll%20using%20php-%20mysql-%20jquery%20and%20ajax
Check out our blog archive on the topic if you’re looking to learn about :
1. Load More Data Using JQuery Ajax And PHP From MySQL Database.
2. PHP Limit Data Selections From MySQL Database.
No comments:
Post a Comment