AngularJS

TP 7: AngularJS, PHP et MySQL

Ce chapitre explique le fonctionnement dAngularJS en interaction avec PHP et MySQL.

AngularJS on PHP

Il est possible dintegrer AngularJS avec du PHP en tant que front-end. Dans ce cas lapplication en PHP fonctionnera
en tant que back-end. Le PHP aura pour r
ole de fournir les donnees `a AngularJS. Nous allons construire dans ce qui
suit un CRUD (create, read, update, delete) pour un produit. MySQL est utilise pour enregistrer les donnees et le
PHP assurera linteraction avec MySQL.

Building Database

Nous commencons par creer une base de donnees Firstly you create database, for instance mydatabase. Ensuite
nous allons creer une table appelee product. Voici une requete SQL pour creer la table product :

delimiter $$
CREATE DATABASE mydatabase /*!40100 DEFAULT CHARACTER SET utf8 */$$
CREATE TABLE product (
idproduct int(11) NOT NULL AUTOI N CREM EN T,
namevarchar(45)N OT N U LL,
pricef loatN OT N U LL,
createddatetimeN OT N U LL,
P RIM ARY KEY (idproduct)
)EN GIN E = InnoDBAU T O IN CREM EN T = 35DEF AU LT CHARSET = utf 8$$
Vous pouvez aussi cr
eer la table avec phpMyAdmin.

Voici un exemple :

Construction du Back-End

Au niveau du Back-End, on d
eveloppe une application PHP qui va interagir avec MySQL. Le
PHP assurer
egalement le lien avec AngularJS en utilisant le format de donn
ees JSON.

3.1

Gestion du CRUD

Pour g
erer les p
eration de CRUD nous cr
eons une classe Product dans le fichier Product.php
contenant le code suivant :
class Product {
private $dbserver = "localhost";
private $dbuser = "username";
private $dbpass = "password";
private $dbdatabase = "mydatabase";
private $msg = "";
public function getMsg()
{
return $this->msg;
}
}

Modifiez votre base de donn

ees en fonction des configurations des variables ci-dessus.
Nous utilisons principalement le SQL pour ex
ecuter des op
eration de CRUD telles que SELECT,
INSERT, UPDATE, DELETE. Maintenant, nous allons cr
eer une fonction getProducts. Cette
fonction retourne lensemble des donn
ees sur les produits depuis la base de donn
ee. Nous
utilisons la librairie Mysqli pour acc
eder `
a MySQL.
Ecrivez ce code pour la fonction getProduct
public function getProducts()
{

$product = array();
try {
$mysqli = new mysqli($this->dbserver, $this->dbuser, $this->dbpass, $this->dbdatabase);
if ($mysqli->connecte rrno){
$this > msg = $mysqli > error;
return$product;
}
$query = selectidproduct, name, pricef romproduct;
if (!($stmt = $mysqli > prepare($query))){
$mysqli > close();
$this > msg = $mysqli > error;
return$product;
}
if (!$stmt > execute()){
$mysqli > close();
$this > msg = $stmt > error;
return$product;
}else{
$stmt > bindr esult($id, $name, $price);
while($stmt > f etch()){
$prices tring = numberf ormat((f loat)$price, 2,0 .0 ,00 );
arrayp ush($product, array(id => $id, name => $name, price => $prices tring));
}
}
$stmt > close();
$mysqli > close();
}catch(Exception$e){
$this > msg = $e > getM essage();
}
return$product;
}
Pour ins
erer un nouveau produit, nous cr
eons une fonction appel
ee insertProduct() avec
le code suivant :
public function insertProduct($name,$price)
{
$product = -1;
try {
$mysqli = new mysqli($this->dbserver, $this->dbuser, $this->dbpass, $this->dbdatabase);
if ($mysqli->connecte rrno){
$this > msg = $mysqli > error;
return$product;
}
$query = insertintoproduct(name, price, created)values(?, ?, now());
if (!($stmt = $mysqli > prepare($query))){
$mysqli > close();
$this > msg = $mysqli > error;
return$product;
}
$newprice = f loatval($price);
$stmt > bindp aram(0 sd0 , $name, $newprice);
if (!$stmt > execute()){
$mysqli > close();
$this > msg = $stmt > error;
return$product;
}

$product = 1;
$this > msg = ;
$stmt > close();
$mysqli > close();
}catch(Exception$e){
$this > msg = $e > getM essage();
}
return$product;
}
Pour mettre `
a jour une donn
ee, nous avons besoin de lid pour identifier la donn
ee qui
sera mise `
a jour. Voici une impl
ementation de la fonction updateProduct() :

public function updateProduct($id,$name,$price)

{
$product = -1;
try {
$mysqli = new mysqli($this->dbserver, $this->dbuser, $this->dbpass, $this->dbdatabase);
if ($mysqli->connect errno) {
$this->msg = $mysqli->error;
return $product;
}
$query = "update product set name=?,price=? where idproduct=?";
if (!($stmt = $mysqli->prepare($query))) {
$mysqli->close();
$this->msg = $mysqli->error;
return $product;
}
$newprice = floatval($price);
$stmt->bindp aram(0 sdd0 , $name, $newprice, $id);
if (!$stmt > execute()){
$mysqli > close();
$this > msg = $stmt > error;
return$product;
}
$product = 1;
$this > msg = ;
$stmt > close();
$mysqli > close();
}catch(Exception$e){
$this > msg = $e > getM essage();
}
return$product;
}
galement supprimer une donn
Nous pouvons e
ee en utilisant la commande sql DELETE. Voici
une impl
ementation de la fonction deleteProduct()

public function deleteProduct($id)

{
$product = -1;
try {
$mysqli = new mysqli($this->dbserver, $this->dbuser, $this->dbpass, $this->dbdatabase);
if ($mysqli->connect errno) {
$this->msg = $mysqli->error;

return $product;
}
$query = "delete from product where idproduct=?";
if (!($stmt = $mysqli->prepare($query))) {
$mysqli->close();
$this->msg = $mysqli->error;
return $product;
}
$stmt->bindp aram(0 d0 , $id);
if (!$stmt > execute()){
$mysqli > close();
$this > msg = $stmt > error;
return$product;
}
$product = 1;
$this > msg = ;
$stmt > close();
$mysqli > close();
}catch(Exception$e){
$this > msg = $e > getM essage();
}
return$product;
}
Enregistrez votre code.

3.2

Gestion et manipulation en JSON

Maintenant nous abordons la communication entre PHP et AngularJS. Cr

eez un fichier api.php
contenant le script suivant :

} <?php
require once(Product.php);
$data = file get contents(php://input);
$json = json decode($data);
$op = $json->{op};
if(isset($op)){
switch($op){
default:
$ret = -999;
$resp = array(code => $ret, msg => invalid operation);
echo json encode($resp);
break;
}
}else{
$ret = -999;
$resp = array(code => $ret, msg => invalid operation);
header(Content-Type: application/json);
header(Access-Control-Allow-Origin: *);
echo json encode($resp);
}

` laide
Vous pouvez constater que nous utilisons Product.php et lire les donn
ees JSON a
de jsond ecode().Onv
erif iel0 attributcheckoppouridentif ierletyped0 op
eration`
aef f ectuer.Siunerequ
eteposs`
edeunopinvalidealor

case "getproducts":
$obj = new Product();
$ret = $obj->getProducts();
$count = count($ret,1);
$msg = $obj->getMsg();
if(empty($msg)) {
$resp = array(code => -1, msg => $msg);
}else{
} $resp = array(code => 1, msg => ,data => $ret);
header(Content-Type: application/json);
header(Access-Control-Allow-Origin: *);
header(Access-Control-Allow-Methods: GET, POST);
echo json encode($resp);
break;
Vous pouvez constater que nous avons plac
e un header pour Access-Control-Allow-Origin
pour g
erer les acc`
es crois
es. Ceci signifie que vous pouvez d
eployer lapplication PHP
dans http://api.mydomain/ et le front-end est d
eploy
e dans http://mydomain/. La deuxi`
eme
op
eration concerne lenregistrement. Elle g`
ere linsertion et la mise `
a jour des donn
ees.
Si une requ
ete ne pr
ecise pas un id, une nouvelle donn
ee est ins
er
ee. Sinon, elle mettra
`
a jour la donn
ee relative `
a lid. Voici un exemple dimpl
ementation de la fonction service
save.
case "save":
$id = $json->{data.id};
$name = $json->{data}->{name};
$price = $json->{data}->{price};
$obj = new Product();
$code = -1;
if(empty($id) || $id="") {
// insert new product
$code = $obj->insertProduct($name,$price);
}else{
// update product
$code = $obj->updateProduct($id,$name,$price);
}
$resp = array(code => $code, msg => $obj->getMsg());
header(Content-Type: application/json);
header(Access-Control-Allow-Origin: *);
header(Access-Control-Allow-Methods: GET, POST);
echo json encode($resp);
break;

Pour la derni`
ere op
eration, on d
etecte le id dans le JSON. Ensuite on fait appel `
a deleteProduc
depuis la classe Product.

case "delete":
$id = $json->{id};
$obj = new Product();
$code = $obj->deleteProduct($id);
$resp = array(code => $code, msg => $obj->getMsg());
header(Content-Type: application/json);
header(Access-Control-Allow-Origin: *);
header(Access-Control-Allow-Methods: GET, POST);
echo json encode($resp);

break;
Enregistrez lensemble de vos codes.

Building Front-End

Dans cette section, nous allons d

evelopper une application front-end en HTML et AngularJS.

4.1

Service et Controller

Nous commenc
ons par cr
eer module, service et contr
oleur en cr
eant un fichier productservice.js.
Voici un exemple dimpl
ementation du module et du service :

var myApp = angular.module(ProductService,[]);

myApp.service(DataService, function($http){
this.save = function(data,callback) {
var postdata = {
"op": "save",
"data": data
};
$http({
method: POST,
url: php/api.php,
data: postdata,
headers: {
Content-type: application/json
}
}).success(function(resp){
callback(resp);
}).error(function(){
callback(undefined);
});
};
this.read = function(callback) {
var postdata = {
op: "getproducts"
};
$http({
method: POST,
url: php/api.php,
data: JSON.stringify(postdata),
headers: {
Content-type: application/json
}
}).success(function(resp){
callback(resp);
}).error(function(){
callback(undefined);
});
};
this.delete = function(id,callback) {
var postdata = {
op: "delete",
id: id
};

$http({
method: POST,
url: php/api.php,
data: JSON.stringify(postdata),
headers: {
Content-type: application/json
}
}).success(function(resp){
callback(resp);
}).error(function(){
callback(undefined);
});
};
});
Voici trois services qui vont g
erer les op
eration CRUD :
save .

Insert/Update data to server

read .

Get all data from server

delete.

Delete data from server

On impl
emente le contr
oleur comme suit :
myApp.controller(MyControlller, function($scope,DataService) {
$scope.products = [];
$scope.product = {};
$scope.result = {};
$scope.getAllData = function() {
DataService.read(function(data){
if(data.code==1) {
$scope.products = data.data;
}
});
};
$scope.edit = function(product) {
$scope.product = product;
};
$scope.delete = function(id) {
var r = confirm("Are you sure to delete this item?");
if(r==true) {
DataService.delete(id,function(data){
if(data.code==1) {
alert("Deleted data was success");
}else {
alert("Deleted data was failed");
}
});
}
};
$scope.save = function() {
DataService.save($scope.product,function(data){
if(data.code==1){
alert("Saved data was success");
}else{
alert("Saved data was failed");
}

$scope.result = data;
$scope.product = {};
});
};
});

4.2

HTML

On HTML side, we create HTML called index.html.

Write this script.

<!DOCTYPE html>
<html ng-app="ProductService">
<head>
<title>Demo AngularJS+PHP+MySQL</title>
<link rel="stylesheet" href="css/simple.css">
<script src="lib/angular.min.js"></script>
<script src="services/productservices.js"></script>
</head>
<body ng-controller=MyControlller data-ng-init="getAllData()" >
<header>
<h1>Demo AngularJS+PHP+MySQL</h1>
</header>
<br>
<form name="form" ng-submit="submitForm(form.$valid)" novalidate >
<div>
<p>
<input type="hidden" ng-model="product.id">
<label class="control-label" for="name">Product Name:</label>
<input type="text" id="name" ng-model=product.name placeholder="Name" required>
</p>
<p>
<label class="control-label" for="price">Price:</label>
<input type="text" id="price" ng-model=product.price placeholder="Price" required>
</p>
<p>
<button ng-disabled="form.$invalid" ng-click="save()" >Save</button> Response from server:
{{ result }}
</p>
</div>
</form>
<br>
<p>
<button ng-click="getAllData()" >Reload</button>
</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody ng-repeat="product in products">
<tr ng-class="{even: $even, odd: $odd}">
<td>{{ product.name }}</td>
<td>{{ product.price | number:2 }}</td>

<td><a href="javascript:void(0)" ng-click="edit(product)">edit</a> |

<a href="javascript:void(0)" ng-click="delete(product.id)">delete</a></td>
</tr>
</tbody>
</table>
</body>
</html>
Explications :
Concevoir un formulaire pour saisir le produit
On met lid du produit en tant qu
el
ement cach
e
Le bouton Reload est utilis
e pour obtenir la totalit
e des donn
ees depuis le serveur
en appelant getAllData().
Les donn
ees relatives au produit sont renseign
ees en utilisant ng-repeat.

Si lutilisateur clique sur le lien edit les information seront charg

ee dans le formulaire.
Ensuite, lutilisateur clique sur le bouton save pour enregistrer.
Concernant le CSS, vous pouvez utiliser le code suivant :
table { margin: 1em; border-collapse: collapse; }
td, th { padding: .3em; border: 1px ccc solid; }
thead { background: 70ff45; }
.even{
background-color: beffca;
}
.odd{
background-color: f0fff6;
} Enregistrez ce code dans un fichier intitul
e simple.css.

Test de lapplication

Maintenant vous
etes pr
et `
a d
eployer votre application. Tapez lurl de votre application
et visionnez le r
esultat. Il faut joindre une impression
ecran de laffichage que vous
obtenez dans votre compte rendu.
Pour cr
eer un nouveau produit, vous devez suivre les
etapes suivantes :
Renseigner lensemble des champs du formulaire
cliquer sur Save pour enregistrer
pour recharger la nouvelle donn
ee cliquez sur Reload
Pour
editer les donn
ees :
cliquez sur edit correspondant `
a la donn
ee que vous voulez
editer
vous pouvez visualiser les donn
ees dans un formulaire

editer la donn
ee souhait
ee
si la donn
ee est
edit
ee, cliquez sur Save
pour recharger la nouvelle donn
ee cliquez sur Reload

Pour supprimer une donn

ee :
cliquez sur delete correspondant `
a la donn
ee que vous souhaitez supprimer.
vous obtenez une boite de dialogue pour confirmation
valider avec le bouton OK pour effectuer la suppression
vous obtiendrez la confirmation concernant la suppression
pour recharger la nouvelle donn
ee cliquez sur le bouton Reload