Vous êtes sur la page 1sur 11

AngularJS

TP 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’intégrer AngularJS avec du PHP en tant que front-end. Dans ce cas l’application en PHP fonctionnera
en tant que back-end. Le PHP aura pour rôle de fournir les données à AngularJS. Nous allons construire dans ce qui
suit un CRUD (create, read, update, delete) pour un produit. MySQL est utilisé pour enregistrer les données et le
PHP assurera l’interaction avec MySQL.

2 Building Database
Nous commençons par créer une base de données Firstly you create database, for instance mydatabase. Ensuite
nous allons créer une table appelée product. Voici une requête SQL pour créer 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,
‘name‘varchar(45)N OT N U LL,
‘price‘f loatN OT N U LL,
‘created‘datetimeN 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éer la table avec phpMyAdmin. Voici un exemple :


3 Construction du Back-End
Au niveau du Back-End, on développe une application PHP qui va interagir avec MySQL. Le
PHP assurer également le lien avec AngularJS en utilisant le format de données JSON.

3.1 Gestion du CRUD


Pour gérer les pération de CRUD nous créons 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ées en fonction des configurations des variables ci-dessus.
Nous utilisons principalement le SQL pour exécuter des opération de CRUD telles que SELECT,
INSERT, UPDATE, DELETE. Maintenant, nous allons créer une fonction getProducts. Cette
fonction retourne l’ensemble des données sur les produits depuis la base de donnée. Nous
utilisons la librairie Mysqli pour accéder à MySQL. Écrivez 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érer un nouveau produit, nous créons une fonction appelée 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 à jour une donnée, nous avons besoin de l’id pour identifier la donnée qui
sera mise à jour. Voici une implémentation 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;
}

Nous pouvons également supprimer une donnée en utilisant la commande sql DELETE. Voici
une implémentation 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éez 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);

Vous pouvez constater que nous utilisons Product.php et lire les données JSON à l’aide
de jsond ecode().Onvérif iel0 attributcheckoppouridentif ierletyped0 opérationàef f ectuer.Siunerequêtepossèdeunopinvalidealor
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é un header pour Access-Control-Allow-Origin
pour gérer les accès croisés. Ceci signifie que vous pouvez déployer l’application PHP
dans http://api.mydomain/ et le front-end est déployé dans http://mydomain/. La deuxième
opération concerne l’enregistrement. Elle gère l’insertion et la mise à jour des données.
Si une requête ne précise pas un id, une nouvelle donnée est insérée. Sinon, elle mettra
à jour la donnée relative à l’id. Voici un exemple d’implémentation 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ère opération, on détecte le id dans le JSON. Ensuite on fait appel à 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 l’ensemble de vos codes.

4 Building Front-End
Dans cette section, nous allons développer une application front-end en HTML et AngularJS.

4.1 Service et Controller


Nous commençons par créer module, service et contrôleur en créant un fichier productservice.js.
Voici un exemple d’implémentation 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érer les opération CRUD :

• save . Insert/Update data to server


• read . Get all data from server
• delete. Delete data from server

On implémente le contrôleur 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’élément caché
• Le bouton Reload est utilisé pour obtenir la totalité des données depuis le serveur
en appelant getAllData().
• Les données relatives au produit sont renseignées en utilisant ng-repeat.
• Si l’utilisateur clique sur le lien edit les information seront chargée 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 intitulé simple.css.

5 Test de l’application
Maintenant vous êtes prêt à déployer votre application. Tapez l’url de votre application
et visionnez le résultat. Il faut joindre une impression écran de l’affichage que vous
obtenez dans votre compte rendu.

Pour créer un nouveau produit, vous devez suivre les étapes suivantes :

• Renseigner l’ensemble des champs du formulaire


• cliquer sur Save pour enregistrer
• pour recharger la nouvelle donnée cliquez sur Reload

Pour éditer les données :

• cliquez sur edit correspondant à la donnée que vous voulez éditer


• vous pouvez visualiser les données dans un formulaire
• éditer la donnée souhaitée
• si la donnée est éditée, cliquez sur Save
• pour recharger la nouvelle donnée cliquez sur Reload
Pour supprimer une donnée :

• cliquez sur delete correspondant à la donnée 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ée cliquez sur le bouton Reload

Vous aimerez peut-être aussi