Load More Data using AngularJS with PHP/MySQLi

January 27, 2021
PHP
load more data using angularjs

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');

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

Leave a Reply

Your email address will not be published.