CREATE TABLE `posts` (
`id` int(11) NOT NULL,
`title` varchar(100) NOT NULL,
`content` text NOT NULL,
`link` varchar(255) NOT NULL,
`timestamp` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `posts` (`id`, `title`, `content`, `link`, `timestamp`) VALUES
(4, 'What is AngularJS', 'AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, declarative and maintainable front-end applications which provides solutions to standard infrastructure concerns.', 'link-5', '2021-03-20 08:00:00'),
(5, 'What is MongoDB', 'It is a quick tutorial on MongoDB and how you can install it on your Windows OS. We will also learn some basic commands in MongoDB for example, creating and dropping a Database, Creation of a collection and some more operations related to the collection.', 'link-6', '2021-03-21 08:00:00'),
(6, 'Python Flask Load content Dynamically in Bootstrap Modal with Jquery AJAX and Mysqldb', 'Python Flask Load content Dynamically in Bootstrap Modal with Jquery AJAX and Mysqldb', 'link-6', '2021-03-20 08:00:00'),
(7, 'AutoComplete Textbox with Image using jQuery Ajax PHP Mysql and JqueryUI', 'AutoComplete Textbox with Image using jQuery Ajax PHP Mysql and JqueryUI', 'link-7', '2021-03-14 08:00:00'),
(8, 'PHP Mysql Registration Form Validation using jqBootstrapValidation with Jquery Ajax', 'PHP Mysql Registration Form Validation using jqBootstrapValidation with Jquery Ajax', 'link-8', '2021-03-20 08:00:00'),
(9, 'Python Flask Registration Form Validation using jqBootstrapValidation with Jquery Ajax and Mysql', 'Python Flask Registration Form Validation using jqBootstrapValidation with Jquery Ajax and Mysql', 'link-9', '2021-03-19 08:00:00'),
(10, 'Displaying Popups data on mouse hover using Jquery Ajax and PHP Mysql database', 'Displaying Popups data on mouse hover using Jquery Ajax and PHP Mysql database', 'link-10', '2021-03-15 08:00:00'),
(11, 'Displaying Popups data on mouse hover using Jquery Ajax and Python Flask Mysql database', 'Displaying Popups data on mouse hover using Jquery Ajax and Python Flask Mysql database', 'link-11', '2021-03-14 08:00:00');
ALTER TABLE `posts`
ADD PRIMARY KEY (`id`);
ALTER TABLE `posts`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12;
index.html
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Load more data with PHP MySQLi</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="myController" ng-init="fetch()">
<div class="container">
<h1 class="page-header text-center">AngularJS Load more data with PHP MySQLi</h1>
<div class="col-md-12">
<div class="panel panel-default" ng-repeat="rs in posts">
<div class="panel-body">
<span style="font-size:20px">{{ rs.id }} {{ rs.title }}</span>
</div>
</div>
<button class="btn btn-success btn-lg btn-block" ng-click="loadmore()">{{ loadName }}</button>
<br><br>
</div>
</div>
<script>
var app = angular.module('app', []);
app.controller('myController', function($scope, $http){
$scope.loadName = 'Load More';
$scope.fetch = function(){
$http.get('fetch.php')
.success(function(data){
$scope.posts = data;
console.log($scope.posts);
});
}
$scope.loadmore = function(){
var lastid = $scope.posts.length - 1;
var lastobj = $scope.posts[lastid];
$http.post('loadmore.php', lastobj)
.success(function(data){
if(data == ''){
$scope.loadName = 'No more Data to Load';
}
else{
angular.forEach(data, function(newpost){
$scope.posts.push(newpost);
});
}
console.log($scope.posts);
});
}
});
</script>
</body>
</html>
fetch.php
//fetch.php
<?php
$conn = new mysqli('localhost', 'root', '', 'testingdb');
$output = array();
$sql = "SELECT * FROM posts ORDER BY id ASC LIMIT 3";
$query=$conn->query($sql);
while($row=$query->fetch_array()){
$output[] = $row;
}
echo json_encode($output);
?>
loadmore.php
//loadmore.php
<?php
$conn = new mysqli('localhost', 'root', '', 'testingdb');
$data = json_decode(file_get_contents('php://input'));
$output = array();
$id = $data->id;
$sql = "SELECT * FROM posts WHERE id > '$id' ORDER BY id ASC LIMIT 3";
$query=$conn->query($sql);
while($row=$query->fetch_array()){
$output[] = $row;
}
echo json_encode($output);
?>
