Angular JS Load more data using PHP/MySQLi

Submitted by: 
Language: 
Visitors have accessed this post 261 times.

Getting Started

I've used CDN for Bootstrap in this tutorial so you need internet connection for it to work.

Creating our Database

First, we're going to create our database and insert sample data to use in our load more.

  1. CREATE TABLE `fruits` (
  2. `fruitid` int(11) NOT NULL AUTO_INCREMENT,
  3. `fruitname` varchar(30) NOT NULL,
  4. PRIMARY KEY(`fruitid`)
  1. INSERT INTO `fruits` (`fruitid`, `fruitname`) VALUES
  2. (1, 'Apple'),
  3. (2, 'Orange'),
  4. (3, 'Strawberry'),
  5. (4, 'Pineapple'),
  6. (5, 'Star Apple'),
  7. (7, 'Banana'),
  8. (8, 'Lemon'),
  9. (9, 'Mango'),
  10. (10, 'Guava'),
  11. (11, 'Watermelon'),
  12. (12, 'Avocado'),
  13. (13, 'Apricot'),
  14. (14, 'Blackberry'),
  15. (15, 'Coconut'),
  16. (16, 'Melon'),
  17. (17, 'Papaya'),
  18. (18, 'Peach'),
  19. (19, 'Pomelo'),
  20. (20, 'Grapes');

database sql

index.html

This is our index where we display our data.

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="app">
  3. <meta charset="utf-8">
  4. <title>Angular JS Load more data using PHP/MySQLi</title>
  5. <link href="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"" rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</a> rel="stylesheet">
  6. <script src="angular-1.5.7.min.js"></script>
  7. </head>
  8. <body ng-controller="myController" ng-init="fetch()">
  9. <div class="container">
  10. <h1 class="page-header text-center">Angular JS Load more data using PHP/MySQLi</h1>
  11. <div class="col-md-4 col-md-offset-4">
  12. <div class="panel panel-default" ng-repeat="fruit in fruits">
  13. <div class="panel-body text-center">
  14. <span style="font-size:20px">{{ fruit.fruitname }}</span>
  15. </div>
  16. </div>
  17. <button class="btn btn-primary btn-lg btn-block" ng-click="loadmore()">{{ loadName }}</button>
  18. <br><br>
  19. </div>
  20. </div>
  21. <script src="angular.js"></script>
  22. </body>
  23. </html>

angular.js

This contains our angular js scripts.

  1. var app = angular.module('app', []);
  2. app.controller('myController', function($scope, $http){
  3. $scope.loadName = 'Load More';
  4. $scope.fetch = function(){
  5. $http.get('fetch.php')
  6. .success(function(data){
  7. $scope.fruits = data;
  8. console.log($scope.fruits);
  9. });
  10. }
  11.  
  12. $scope.loadmore = function(){
  13. var lastid = $scope.fruits.length - 1;
  14. var lastobj = $scope.fruits[lastid];
  15. $http.post('loadmore.php', lastobj)
  16. .success(function(data){
  17. if(data == ''){
  18. $scope.loadName = 'No more Data to Load';
  19. }
  20. else{
  21. angular.forEach(data, function(newfruit){
  22. $scope.fruits.push(newfruit);
  23. });
  24. }
  25. console.log($scope.fruits);
  26. });
  27. }
  28. });

fetch.php

This is our PHP api/code in fetching our initial data.

  1. <?php
  2. $conn = new mysqli('localhost', 'root', '', 'angular');
  3.  
  4. $output = array();
  5. $sql = "SELECT * FROM fruits ORDER BY fruitid ASC LIMIT 4";
  6. $query=$conn->query($sql);
  7. while($row=$query->fetch_array()){
  8. $output[] = $row;
  9. }
  10.  
  11. echo json_encode($output);
  12. ?>

loadmore.php

Lastly, this is our PHP code/api to fetch our addition data.

  1. <?php
  2. $conn = new mysqli('localhost', 'root', '', 'angular');
  3.  
  4. $data = json_decode(file_get_contents('php://input'));
  5.  
  6. $output = array();
  7.  
  8. $id = $data->fruitid;
  9.  
  10. $sql = "SELECT * FROM fruits WHERE fruitid > '$id' ORDER BY fruitid ASC LIMIT 4";
  11. $query=$conn->query($sql);
  12. while($row=$query->fetch_array()){
  13. $output[] = $row;
  14. }
  15.  
  16. echo json_encode($output);
  17. ?>

That ends this tutorial. Happy Coding :)


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.