2/27/2019 How to work with AngularJS as frontend and PHP MYSQL as backend ­ W3SCHOOL

HOME > PHP > HOW TO WORK WITH ANGULARJS AS FRONTEND AND PHP
MYSQL AS BACKEND

Published February 20, 2016 by Jeetendra Singh

How to work with AngularJS as frontend and PHP

MYSQL as backend
Hi Geeks,

In this tutorial you will learn that how to work with AngularJs as web frontend or in any
hybrid app and get retrieve data from database using php and mysql. We have created restful
webservice for return records to angular app.

Now steps for making a angularjs app with php and mysql –
Step 1) Create a database and table for fetching content from the table

https://www.w3school.info/2016/02/20/how­to­work­with­angularjs­as­frontend­and­php­mysql­as­backend/ 1/7
2/27/2019 How to work with AngularJS as frontend and PHP MYSQL as backend ­ W3SCHOOL

Note: If you want to use existing database then select you db else create a new db with
‘news_db’ or whatever you want to take a db name.
Now Create a table named ‘news’ for getting data by following sql statement

1 CREATE TABLE IF NOT EXISTS `news` (

2   `id` int(12) NOT NULL AUTO_INCREMENT,
3   `title` varchar(255) NOT NULL,
4   `permalink` varchar(255) NOT NULL,
5   `details` text NOT NULL,
6   `thumbnail` varchar(255) NOT NULL,
7   `category_id` int(12) NOT NULL,
8   `source_id` int(12) NOT NULL,
9   `datetime` int(12) NOT NULL,
10   `day` int(2) NOT NULL,
11   `month` int(2) NOT NULL,
12   `year` int(4) NOT NULL,
13   `hits` int(12) NOT NULL,
14   `published` int(1) NOT NULL,
15   PRIMARY KEY (`id`)
16 ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1;

Now Dump some dummy records by following insert statement:

1 --
2 -- Dumping data for table `news`
3 --
4  
5 INSERT INTO `news` (`id`, `title`, `permalink`, `details`, `thumbnail`, `category_id
6 (1, 'MY NEWS TITLE 1', '', 'The standard chunk of Lorem Ipsum used since the 1500s is reproduce
7 (2, 'MY NEWS TITLE 2', '', 'Lorem Ipsum is simply dummy text of the printing and typesetting in

Step 2) Create a file named config.php with following code

1 <?php
2 $details=array();
3 $details['server_host']="localhost";//server host name
4 $details['mysql_name']="root";//your mysql user name
5 $details['mysql_password']="";//your mysql user name
6 $details['mysql_database']="news_db";//your database name
7 ?>

change credential according to your database and server host

Step 3) Now create a file for webservices named wsdl.php
Define Cross origin headers in this file by following code

1 <?php
2 header("Access-Control-Allow-Origin: *");
3 header("Content-Type: application/json; charset=UTF-8");
4 ?>

Now code for getting data from database and provide in restful json format by following
code

1 <?php
2 include 'config.php';//make the cofig file include
3 global $details;//make the connection vars global
4  

https://www.w3school.info/2016/02/20/how­to­work­with­angularjs­as­frontend­and­php­mysql­as­backend/ 2/7
2/27/2019 How to work with AngularJS as frontend and PHP MYSQL as backend ­ W3SCHOOL

5 if($_GET['method'] == "load_news")
6 {
7 $conn = new mysqli($details['server_host'], $details['mysql_name'],$details['mysql_passwor
8 $result = $conn->query("SELECT title,details,hits FROM news");
9 $data=array();
10 while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
11 $row=array();
12    $row['title']=addslashes($rs["title"]);
13    $row['details']=addslashes($rs["details"]);
14    $row['hits']=addslashes($rs["hits"]);
15   
16    $data[]=$row;
17
18 }
19 $jsonData=array();
20 $jsonData['records']=$data;
21  
22 $conn->close();
23 echo json_encode($jsonData);
24  
25 }
26 ?>

So complete Code for wsdl.php is following

1 <?php
2 header("Access-Control-Allow-Origin: *");
3 header("Content-Type: application/json; charset=UTF-8");
4 include 'config.php';//make the cofig file include
5 global $details;//make the connection vars global
6  
7 if($_GET['method'] == "load_news")
8 {
9 $conn = new mysqli($details['server_host'], $details['mysql_name'],$details['mysql_passwor
10 $result = $conn->query("SELECT title,details,hits FROM news");
11 $data=array();
12 while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
13 $row=array();
14    $row['title']=addslashes($rs["title"]);
15    $row['details']=addslashes($rs["details"]);
16    $row['hits']=addslashes($rs["hits"]);
17   
18    $data[]=$row;
19
20 }
21 $jsonData=array();
22 $jsonData['records']=$data;
23  
24 $conn->close();
25 echo json_encode($jsonData);
26  
27 }
28 ?>

Step 4) Now Start with frontend

Step for Getting data from database using angularjs as frontend and php & mysql as backed
make a file named index.html
include the script which i have attached with this post

1 <script src="js/angular.1.4.8.min.js"></script>

Now make a ng-app with following html

https://www.w3school.info/2016/02/20/how­to­work­with­angularjs­as­frontend­and­php­mysql­as­backend/ 3/7
2/27/2019 How to work with AngularJS as frontend and PHP MYSQL as backend ­ W3SCHOOL

1 <div ng-app="myApp" ng-controller="newsCtrl">

2  
3 </div>

make a html table format inside the div for getting data from datasource(php/mysql restful
service) as following

1 <div ng-app="myApp" ng-controller="newsCtrl">

2 <table border="2">
3   <tr ng-repeat="x in names">
4     <td>{{ x.title }}</td>
5     <td>{{ x.details }}</td>
6     <td>{{ x.hits }}</td>
7   </tr>
8 </table>
9 </div>

Now put the script that call the restful web service and load data to the table

1 <script>
2 var app = angular.module('myApp', []);
3 app.controller('newsCtrl', function($scope, $http) {
4     $http.get("http://localhost/angular/wsdl.php?method=load_news")
5     .then(function (response) {$scope.names = response.data.records;});
6 });
7 </script>

Now complete Code for index.html

1 <script src="js/angular.1.4.8.min.js"></script>
2 <div ng-app="myApp" ng-controller="newsCtrl">
3  
4 <table border="2">
5   <tr ng-repeat="x in names">
6     <td>{{ x.title }}</td>
7     <td>{{ x.details }}</td>
8     <td>{{ x.hits }}</td>
9   </tr>
10 </table>
11  
12 </div>
13  
14 <script>
15 var app = angular.module('myApp', []);
16 app.controller('newsCtrl', function($scope, $http) {
17     $http.get("http://localhost/angular/wsdl.php?method=load_news")
18     .then(function (response) {$scope.names = response.data.records;});
19 });
20 </script>

Congratulations you have completed with this tutorial please provide comments for this
tutorial. DOWNLOAD COMPLETE CODE

Previous Post
Array to Xml Conversion and Xml to Array Convert in PHP

https://www.w3school.info/2016/02/20/how­to­work­with­angularjs­as­frontend­and­php­mysql­as­backend/ 4/7
2/27/2019 How to work with AngularJS as frontend and PHP MYSQL as backend ­ W3SCHOOL

Next Post
Custom form validation in Codeigniter

Jeetendra Singh
Jeetendra is a Web Developer, technical writer and a blogger from
jaipur. He's worked with PHP,Mysql,JavaScript,Node Js,Angular
Js,Jquery,JQuery Mobile,.Net,Sql Server etc., but his language of
choice is PHP & JAVASCRIPT. You can learn more and discussion
with him at w3school

 ANGULAR JS MYSQL PHP

https://www.w3school.info/2016/02/20/how­to­work­with­angularjs­as­frontend­and­php­mysql­as­backend/ 5/7
2/27/2019 How to work with AngularJS as frontend and PHP MYSQL as backend ­ W3SCHOOL

1 Comment w3school 
1 Login

  Recommend t Tweet f Share Sort by Best

Join the discussion…

LOG IN WITH
OR SIGN UP WITH DISQUS  ?

Name

Esinniobiwa Quareeb • a year ago
nice one
33 △   ▽ • Reply • Share ›

ALSO ON W3SCHOOL

Codeigniter best tricks and hacks Progress bar for php form post ,
2 comments • 2 years ago Download the Code
w3school — Yes chintan it is really very 1 comment • a year ago
straight solutions which I came to know in Jack — i can't download. the facebook
some of my projects, button dies not work

Array to Xml Conversion and Xml to Stripe Subscriptions using php –
Array Convert in PHP Download Full Source Code
1 comment • 3 years ago 9 comments • 2 years ago
daud khan — Hi,Do you like to try tom macdougall — Hi I am currently in
Laravel. Please come and join us the process of building my first
athttps://www.facebook.com/la... application and am wondering if this will
work for paying …
✉ Subscribe d Add Disqus to your siteAdd DisqusAdd
🔒 Disqus' Privacy PolicyPrivacy PolicyPrivacy

Search... Go

SPONCERED BY

https://www.w3school.info/2016/02/20/how­to­work­with­angularjs­as­frontend­and­php­mysql­as­backend/ 6/7
2/27/2019 How to work with AngularJS as frontend and PHP MYSQL as backend ­ W3SCHOOL

Subscribe our Newsletter

Name:

E-mail:

Subscribe

RECENT POSTS

Create Restful CRUD API using Node js Express MongoDB

Images to Video making php script using FFMPEG

Stripe Subscriptions using php – Download Full Source Code

Implement Stripe in 3 steps using php

Radio and Checkbox use in Angularjs Post method

CATEGORIES

Angular js

Apis

Codeigniter

javascript

jQuery

Mean Stack

https://www.w3school.info/2016/02/20/how­to­work­with­angularjs­as­frontend­and­php­mysql­as­backend/ 7/7