Friday, 9 September 2016

AngularJS Tutorial with PHP - Fetch / Select Data from Mysql Database

           , ,      3 comments   


Hello friends in previous tutorial we have discuss how to insert data into mysql table by using PHP programming with AngularJS, but now In this tutorial we will discuss how to fetch or select data from mysql table by using AngularJS with php script. If you work on project PHP with AngularJS and you want to show data on web page from mysql table, then at that time how to show data on web page by using AngularJS, then at that time you can follow this tutorial. In this post we will make AngularJS function for fetching data from table by using PHP script.So this is my AngularJS with PHP tutorial on Select or fetch data from mysql table and display that data on web page without page refresh, In this post we have make angularjs function for fetch data from table and we have use get method to send request to the server, we have also discuss ng repeat directive for display repetitive data on web page and we have also discuss ng init directive for called angularjs function on page load. This all things we have discuss in this post.



Source Code

Database


 --  
 -- Table structure for table `tbl_user`  
 --  
 CREATE TABLE IF NOT EXISTS `tbl_user` (  
  `id` int(11) NOT NULL AUTO_INCREMENT,  
  `first_name` varchar(200) NOT NULL,  
  `last_name` varchar(200) NOT NULL,  
  PRIMARY KEY (`id`)  
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=32 ;  
 --  
 -- Dumping data for table `tbl_user`  
 --  
 INSERT INTO `tbl_user` (`id`, `first_name`, `last_name`) VALUES  
 (31, 'Tom', 'Cruze'),  
 (30, 'Bill', 'Gates'),  
 (29, 'John', 'Smith'),  
 (28, 'Big', 'Show'),  
 (27, 'Smith', 'Johnson'),  
 (26, 'The', 'Rock'),  
 (25, 'Peter', 'Parker'),  
 (18, 'Mark', 'John');

index.php


 <!DOCTYPE html>  
 <!-- index.php !-->  
 <html>  
      <head>  
           <title>Webslesson Tutorial | AngularJS Tutorial with PHP - Fetch / Select Data from Mysql Database</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
      </head>  
      <body>  
           <br /><br />  
           <div class="container" style="width:500px;">  
                <h3 align="center">AngularJS Tutorial with PHP - Fetch / Select Data from Mysql Database</h3>  
                <div ng-app="myapp" ng-controller="usercontroller" ng-init="displayData()">  
                     <label>First Name</label>  
                     <input type="text" name="first_name" ng-model="firstname" class="form-control" />  
                     <br />  
                     <label>Last Name</label>  
                     <input type="text" name="last_name" ng-model="lastname" class="form-control" />  
                     <br />  
                     <input type="submit" name="btnInsert" class="btn btn-info" ng-click="insertData()" value="ADD"/>  
                     <br /><br />  
                     <table class="table table-bordered">  
                          <tr>  
                               <th>First Name</th>  
                               <th>Last Name</th>  
                          </tr>  
                          <tr ng-repeat="x in names">  
                               <td>{{x.first_name}}</td>  
                               <td>{{x.last_name}}</td>  
                          </tr>  
                     </table>  
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 var app = angular.module("myapp",[]);  
 app.controller("usercontroller", function($scope, $http){  
      $scope.insertData = function(){  
           $http.post(  
                "insert.php",  
                {'firstname':$scope.firstname, 'lastname':$scope.lastname}  
           ).success(function(data){  
                alert(data);  
                $scope.firstname = null;  
                $scope.lastname = null;  
                $scope.displayData();  
           });  
      }  
      $scope.displayData = function(){  
           $http.get("select.php")  
           .success(function(data){  
                $scope.names = data;  
           });  
      }  
 });  
 </script>

select.php


 <?php  
 //select.php  
 $connect = mysqli_connect("localhost", "root", "", "testing");  
 $output = array();  
 $query = "SELECT * FROM tbl_user";  
 $result = mysqli_query($connect, $query);  
 if(mysqli_num_rows($result) > 0)  
 {  
      while($row = mysqli_fetch_array($result))  
      {  
           $output[] = $row;  
      }  
      echo json_encode($output);  
 }  
 ?>

3 comments: