Tutorial: Load More Data using AngularJS with PHP/MySQLi with Source Code
Getting Started
Load More Data using AngularJS with PHP/MySQLi with Free Source Code. I’ve used CDN for Bootstrap in this tutorial, so you need an internet connection for it to work.
Related Tutorials: Signup and Register using AngularJS, Inline Edit using AngularJS
Creating a Database
First, we’re going to create our database and insert sample data to use in our load more.
CREATE TABLE `fruits` ( `fruitid` int(11) NOT NULL AUTO_INCREMENT, `fruitname` varchar(30) NOT NULL, PRIMARY KEY(`fruitid`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `fruits` (`fruitid`, `fruitname`) VALUES (1, 'Apple'), (2, 'Orange'), (3, 'Strawberry'), (4, 'Pineapple'), (5, 'Star Apple'), (7, 'Banana'), (8, 'Lemon'), (9, 'Mango'), (10, 'Guava'), (11, 'Watermelon'), (12, 'Avocado'), (13, 'Apricot'), (14, 'Blackberry'), (15, 'Coconut'), (16, 'Melon'), (17, 'Papaya'), (18, 'Peach'), (19, 'Pomelo'), (20, 'Grapes');
load more data using angularjs
index.html
This is an index where we display a data.
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>Angular JS Load more data using PHP/MySQLi</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="angular-1.5.7.min.js"></script>
</head>
<body ng-controller="myController" ng-init="fetch()">
<div class="container">
<h1 class="page-header text-center">Angular JS Load more data using PHP/MySQLi</h1>
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default" ng-repeat="fruit in fruits">
<div class="panel-body text-center">
<span style="font-size:20px">{{ fruit.fruitname }}</span>
</div>
</div>
<button class="btn btn-primary btn-lg btn-block" ng-click="loadmore()">{{ loadName }}</button>
<br><br>
</div>
</div>
<script src="angular.js"></script>
</body>
</html>
angular.js
This contains an angular.js scripts.
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.fruits = data;
console.log($scope.fruits);
});
}
$scope.loadmore = function(){
var lastid = $scope.fruits.length - 1;
var lastobj = $scope.fruits[lastid];
$http.post('loadmore.php', lastobj)
.success(function(data){
if(data == ''){
$scope.loadName = 'No more Data to Load';
}
else{
angular.forEach(data, function(newfruit){
$scope.fruits.push(newfruit);
});
}
console.log($scope.fruits);
});
}
});
fetch.php
This is an PHP api/code in fetching a initial data.
<?php
$conn = new mysqli('localhost', 'root', '', 'angular');
$output = array();
$sql = "SELECT * FROM fruits ORDER BY fruitid ASC LIMIT 4";
$query=$conn->query($sql);
while($row=$query->fetch_array()){
$output[] = $row;
}
echo json_encode($output);
?>
loadmore.php
Lastly, this is a PHP code/api to fetch a addition data.
<?php
$conn = new mysqli('localhost', 'root', '', 'angular');
$data = json_decode(file_get_contents('php://input'));
$output = array();
$id = $data->fruitid;
$sql = "SELECT * FROM fruits WHERE fruitid > '$id' ORDER BY fruitid ASC LIMIT 4";
$query=$conn->query($sql);
while($row=$query->fetch_array()){
$output[] = $row;
}
echo json_encode($output);
?>
That ends this tutorial. Happy Coding!
Download Here
Facebook Comments
