AngularJSTP 7: AngularJS, PHP et MySQL

Ce chapitre explique le fonctionnement d’AngularJS en interaction avec PHP et MySQL.

1 AngularJS on PHP

Il est possible d’integrer AngularJS avec du PHP en tant que front-end. Dans ce cas l’application en PHP fonctionneraen tant que back-end. Le PHP aura pour role de fournir les donnees a AngularJS. Nous allons construire dans ce quisuit un CRUD (create, read, update, delete) pour un produit. MySQL est utilise pour enregistrer les donnees et lePHP assurera l’interaction avec MySQL.

2 Building Database

Nous commencons par creer une base de donnees Firstly you create database, for instance mydatabase. Ensuitenous 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 AUTOINCREMENT,‘name‘varchar(45)NOTNULL,‘price‘floatNOTNULL,‘created‘datetimeNOTNULL,PRIMARYKEY (‘idproduct‘))ENGINE = InnoDBAUTO INCREMENT = 35DEFAULTCHARSET = utf8$$

Vous pouvez aussi creer la table avec phpMyAdmin. Voici un exemple :

3 Construction du Back-End

Au niveau du Back-End, on developpe une application PHP qui va interagir avec MySQL. LePHP assurer egalement le lien avec AngularJS en utilisant le format de donnees JSON.

3.1 Gestion du CRUD

Pour gerer les peration de CRUD nous creons une classe Product dans le fichier Product.phpcontenant 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 donnees en fonction des configurations des variables ci-dessus.Nous utilisons principalement le SQL pour executer des operation de CRUD telles que SELECT,INSERT, UPDATE, DELETE. Maintenant, nous allons creer une fonction getProducts. Cettefonction retourne l’ensemble des donnees sur les produits depuis la base de donnee. Nousutilisons la librairie Mysqli pour acceder a MySQL. Ecrivez ce code pour la fonction getProducts.

public function getProducts(){

$product = array();try {$mysqli = new mysqli($this->dbserver, $this->dbuser, $this->dbpass, $this->dbdatabase);if ($mysqli->connecterrno){$this− > msg = $mysqli− > error;return$product;}$query = ”selectidproduct, name, pricefromproduct”;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− > bindresult($id, $name, $price);while($stmt− > fetch()){$pricestring = numberformat((float)$price, 2,′ .′,′′ );arraypush($product, array(”id” => $id, ”name” => $name, ”price” => $pricestring));}}$stmt− > close();$mysqli− > close();}catch(Exception$e){$this− > msg = $e− > getMessage();}return$product;}

Pour inserer un nouveau produit, nous creons une fonction appelee insertProduct() avecle code suivant :

public function insertProduct($name,$price){$product = -1;try {$mysqli = new mysqli($this->dbserver, $this->dbuser, $this->dbpass, $this->dbdatabase);if ($mysqli->connecterrno){$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 = floatval($price);$stmt− > bindparam(′sd′, $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− > getMessage();}return$product;}

Pour mettre a jour une donnee, nous avons besoin de l’id pour identifier la donnee quisera mise a jour. Voici une implementation 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->bindparam(′sdd′, $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− > getMessage();}return$product;}

Nous pouvons egalement supprimer une donnee en utilisant la commande sql DELETE. Voiciune implementation 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->bindparam(′d′, $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− > getMessage();}return$product;}

Enregistrez votre code.

3.2 Gestion et manipulation en JSON

Maintenant nous abordons la communication entre PHP et AngularJS. Creez un fichier api.phpcontenant le script suivant :

} <?phprequire 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);

}

Vous pouvez constater que nous utilisons Product.php et lire les donnees JSON a l’aidede jsondecode().Onverifiel′attributcheckoppouridentifierletyped′operationaeffectuer.SiunerequetepossedeunopinvalidealorslePHPenverraleJSONavecuneinformationinvalideconcernantl′operation.L′etapesuivanteconsisteadecomposerlesoperations.Oncommenceparcreerunefonctiongetproducts.Elleretournetouteslesdonneesrelativesauproduitproduct.V oiciunexempled′implementation.

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 place un header pour Access-Control-Allow-Originpour gerer les acces croises. Ceci signifie que vous pouvez deployer l’application PHPdans http://api.mydomain/ et le front-end est deploye dans http://mydomain/. La deuxiemeoperation concerne l’enregistrement. Elle gere l’insertion et la mise a jour des donnees.Si une requete ne precise pas un id, une nouvelle donnee est inseree. Sinon, elle mettraa jour la donnee relative a l’id. Voici un exemple d’implementation de la fonction servicesave.

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 derniere operation, on detecte le id dans le JSON. Ensuite on fait appel a deleteProduct()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 l’ensemble de vos codes.

4 Building Front-End

Dans cette section, nous allons developper une application front-end en HTML et AngularJS.

4.1 Service et Controller

Nous commencons par creer module, service et controleur en creant un fichier productservice.js.Voici un exemple d’implementation 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 gerer les operation CRUD :

• save . Insert/Update data to server

• read . Get all data from server

• delete. Delete data from server

On implemente le controleur 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 l’id du produit en tant qu’element cache

• Le bouton Reload est utilise pour obtenir la totalite des donnees depuis le serveuren appelant getAllData().

• Les donnees relatives au produit sont renseignees en utilisant ng-repeat.

• Si l’utilisateur clique sur le lien edit les information seront chargee dans le formulaire.Ensuite, l’utilisateur 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 intitule simple.css.

5 Test de l’application

Maintenant vous etes pret a deployer votre application. Tapez l’url de votre applicationet visionnez le resultat. Il faut joindre une impression ecran de l’affichage que vousobtenez dans votre compte rendu.

Pour creer un nouveau produit, vous devez suivre les etapes suivantes :

• Renseigner l’ensemble des champs du formulaire

• cliquer sur Save pour enregistrer

• pour recharger la nouvelle donnee cliquez sur Reload

Pour editer les donnees :

• cliquez sur edit correspondant a la donnee que vous voulez editer

• vous pouvez visualiser les donnees dans un formulaire

• editer la donnee souhaitee

• si la donnee est editee, cliquez sur Save

• pour recharger la nouvelle donnee cliquez sur Reload

Pour supprimer une donnee :

• cliquez sur delete correspondant a la donnee 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 donnee cliquez sur le bouton Reload