AngularJS select using php MYSQL

The AngularJS Supports display data from database securely and flexibly, but the data format should be in JSON format.
There are list of server side code used to fetch SQL data, such as PHP, JSP, ASP.NET with VB, ASP.NET with C#, etc.
There are list of databases used to fetch SQL data, such as MySQL, SQL Lite, MS Access, Oracle etc.
We should allow cross-site HTTP requests for allowing requests from different servers.
You can download XAMPP and MySQL from the following site

XAMPP - https://www.apachefriends.org/download.html
MySQL -https://www.mysql.com/downloads/

Select Statement in MySQL with PHP in AngularJS:

The Select statement is used to retrieve the data from the database

Syntax for MySQL Select Statement with PHP and MySQL:

$conn = mysql_connect('myServer', ' myUser ', ' myPassword ');
mysql_select_db(' myDb ', $conn);
$result=mysql_query('SELECT * FROM tbl_name ');

Syntax for MySQL Select Statement with PHP and MySQLi:

$conn = mysqli_connect('myServer', 'myUser', 'myPassword', 'myDb');
$result=mysqli_query($conn, 'SELECT * FROM tbl_name ');

Syntax for MySQL Select Statement with PHP and PDO:

$conn = new PDO ("mysql:host=myServer;dbname=myDb", "myUser", "myPassword");
$result=$conn->query( 'SELECT * FROM tbl_name ');

Sample code for MySQL Select with PHP in AngularJS:

Let’s create a sample code for MySQL select with PHP by PDO method.

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
        angular.min.js"> </script>
    </head>
    <body>
        <div ng-app="selectApp" ng-controller=" selectController">
            <h1>MYSQL Select with PHP in AngularJS</h1>
            <table border="1">
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Mobile</th>
                    <th>Email</th>
                </tr>
                <tr ng-repeat="x in content" >
                    <td>{{x.id}}</td>
                    <td>{{x.name}}</td>
                    <td>{{x.mobile}}</td>
                    <td>{{x. email}}</td>
                </tr>
            </table>
            <h3>Please Use Ctrl+F5 for Refresh</h3>
        </div>
    </body>
    <script>
        var app = angular.module("selectApp", []);
        app.controller("selectController", function($scope, $http) {
            $http.get("select.php") 
            .then(function(response) { 
            $scope.content = response.data.details;       
            });
        });
    </script>
</html>

Data:

Set of data has been retrieved from $http service for our AngularJS Application.

content = response.data.details;

HTML:

Viewable HTML contents in AngularJS Application.

<div ng-app="selectApp" ng-controller=" selectController">
            <h1>MYSQL Select with PHP in AngularJS</h1>
            <table border="1">
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Mobile</th>
                    <th>Email</th>
                </tr>
                <tr ng-repeat="x in content" >
                    <td>{{x.id}}</td>
                    <td>{{x.name}}</td>
                    <td>{{x.mobile}}</td>
                    <td>{{x. email}}</td>
                </tr>
            </table>
            <h3>Please Use Ctrl+F5 for Refresh</h3>
</div>

Logic:

Controller logic for the AngularJS application.

 var app = angular.module("selectApp", []);
 app.controller("selectController", function($scope, $http) {
    $http.get("select.php") 
    .then(function(response) { 
    $scope.content = response.data.details;       
    });
 });

Code Explanation for MySQL Select with PHP in AngularJS:

Code Explanation for AngularJS select Using PHP Mysql

The ng-controller is a directive to control the AngularJS Application.
To bind the content to <td> by ng-repeat directive.
The “selectController” used to create the controller for the Application with arguments $scope object and $http service.
The $http is a service and it is used to call the get method, this http get request will get the content from the “select.php” as response.
The response.data.details is used to get the response data.

Sample code for select.php:

<?php
error_reporting(0);
header("Access-Control-Allow-Origin: *");   
header("Content-Type: application/json; charset=UTF-8");  
$conn = new PDO("mysql:host=myServer;dbname=myDb", "myUser", "myPassword");   
$result = $conn->query("SELECT * FROM tbl_name order by id");     
$outp = ""; 
while($rs = $result->fetch()) {     
    if ($outp != "") {$outp .= ",";}     
    $outp .= '{"id":"'  . $rs["id"] . '",'; 
    $outp .= '"name":"'   . $rs["name"]  . '",'; 
    $outp .= '"mobile":"'   . $rs["mobile"]  . '",'; 
    $outp .= '"email":"'. $rs["email"]  . '"}'; 
    } 
$outp ='{"details":['.$outp.']}'; 
echo($outp); 
?>

Code Explanation for select.php:

The "Access-Control-Allow-Origin: *" used to allow cross-site HTTP requests.
To specify the Content-Type as JSON and characterset as UTF-8.
The myServer is used to specify the name of the server.
The myDb is used to specify the name of the DataBase.
The myUser is used to specify the name of the User.
The myPassword is used to specify the Password.
Select statement to retrieve the set of results from the database table.
To get the individual rows from Result Set by using while loop and create a JSON format string.
Create a string variable $outp as JSON string.
Print the output string.

Sample Output for MySQL Select with PHP in AngularJS:

Sample Output for AngularJS select using PHP Mysql

The output shows the table data retrieved from MySQL database.

PDF

AngularJS select using php MYSQL

Select Statement in MySQL with PHP in AngularJS:

Syntax for MySQL Select Statement with PHP and MySQL:

Syntax for MySQL Select Statement with PHP and MySQLi:

Syntax for MySQL Select Statement with PHP and PDO:

Sample code for MySQL Select with PHP in AngularJS:

Data:

HTML:

Logic:

Code Explanation for MySQL Select with PHP in AngularJS:

Sample code for select.php:

Code Explanation for select.php:

Sample Output for MySQL Select with PHP in AngularJS:

Related Searches to angularjs select using PHP Mysql

Wikitechy

Join our Community

Other Languages