Truc 27 : Gérer une factory $http pour Php-Mysql avec Angularjs. (Pour des applis partagées)

logo-phpIntroduction


Pour rappel, un CRUD veut dire « CREER,LIRE,METTRE A JOUR,SUPPRIMER » et doit être bien géré dans toute application qui se respecte, et être centralisé, pour simplifier la compréhension du code (Et pour une bonne communication avec le Back End..

Dans cet exemple, j’avais commencé à analyser comment concevoir un CRUD Php-Mysql avec Angular Js. Son code était super, seulement, le concepteur n’avait pas créé une factory dédiée à cela, les appels étaient directement dans le controleur, alors que c’est généralement déconseillé, il faut mettre la logique d’accès réseau dans une factory ANGULARJS. Voici donc un petit code avec une factory Angular de connexion à PHP-MYSQL a tester ICI

Je vais essayer de compresser et simplifier au maximum le code !

Voici donc désormais l’ordonnancement de ce qu’il se passe lors d’une simple lecture :

Besoin de lire les données dans le Controleur Angular ->

 Appel à la Factory Angular phpCrud qui envoie les données en JSON au script PHP->

Le script Script PHP decode JSON puis -> Connexion Mysql -> Lecture Mysql ->

Le script PHP encode en JSON la réponse -> Le CallBack Angular Lit les données.

JOURNAL


JOUR 2

J’ai des problèmes pour n’utiliser qu’une seule vue Créer et Modifier, avec deux contrôleurs.

Je me demande si il ne faudrait pas trouver un moyen d’injecter les données json directement dans une directive HTML de formulaire mais en fait probablement que non. L’autre piste est d’utiliser $rootScope, mais probablement que ce n’est pas bien non plus.

POur l’instant, ça marche comme ça, mais cela ne me va pas du tout, puisque je veux que la vue CREER et MODIFIER soient les mêmes pour ne pas avoir à modifier 2 vues à chaque fois que l’on modifie l’application, bien sur !

Jour 3

Finalement, je n’utilise qu’un seul controleur pour tout, du coup, il n’y a qu’une vue pour créer et mettre à jour , ce qui est génial, lorsqu’il faut ajouter des champs à l’application !

Quelques observations:

  • Pour récupérer tous les champs d’un formulaire d’un seul coup comme avec serialize() de jquery, on stocke toutes les valeurs des inputs dans un objet Json , avant de les passer à la factory crudPhp qui fait du $HTTP.POST. http://stackoverflow.com/questions/15877212/is-there-a-more-effective-way-to-serialize-a-form-with-angularjs

Le code :

<!DOCTYPE html>
<html ng-app="monApp">
  <head>
   <meta charset="utf8" >
    <title>Une factory CRUD Partagée en ligne dans une BDD MYSQL avec AngularJs et Php </title>
        <!-- CHARGEMENT DES LIBRAIRIES -->
			<!-- APPEL LIB ANGULAR -->
				<script type="text/javascript" src="angular-1.3.13/angular.min.js"></script>
				<script src="angular-route.min.js"></script>
				<script src="librairies/angular-locale_fr-fr.js"></script>
			<!-- CSS DE L'APPLICATION -->
				 <link href="truc27.css" media="screen" rel="stylesheet" type="text/css" />
		<!-- FIN DE CHARGEMENT DES LIBRAIRIES -->

	<script>
		var monApp = angular.module('monApp',['ngRoute'])

        .config(function ($routeProvider, $locationProvider){

		<!-- ROUTING ANGULAR -->
		$routeProvider
            .when('/accueil', {
              templateUrl: 'defaut.html',
              controller: 'accueilCtrl'
            })
			.when('/creerEtModifier', {
              templateUrl: 'creerEtModifier.html',
              controller: 'accueilCtrl'
            })
			.otherwise({redirectTo: '/accueil'});
		})

		<!-- LE CONTROLEUR GENERAL ET DE LA LISTE -->
		.controller("accueilCtrl", function($scope,crudPhp,$location,$rootScope) {

			<!-- Initialise les valeurs du Formulaire à zéro -->
			$rootScope.formData = {};

			<!-- Lire la liste des utilisateurs -->
			crudPhp.getUtilisateurs().success(function(data){
				$rootScope.utilisateurs = data;
			});

			<!-- rafraichir la liste des utilisateurs -->
			$scope.rf = function (){
				crudPhp.getUtilisateurs().success(function(data){
					$rootScope.utilisateurs = data;
				});
			};

			<!-- Créer un utilisateur -->
			$scope.creerUtilisateur = function (){
				$location.path('creerEtModifier');
				$rootScope.formData = {};

			};

			<!-- Supprimer un utilisateur -->
			$scope.supprimerUtilisateur = function (id){
				crudPhp.supprimerUtilisateur(id).success(function(data){
						$scope.rf(); //rafrachir la liste après suppression
				});
			};

			<!-- Modifier un utilisateur -->
			$scope.majUtilisateur = function (id){

				$location.path('creerEtModifier');
				crudPhp.editerUtilisateur(id).success(function(data){
						$rootScope.formData = data[0];

				});

			};

			<!-- Valider la création ou la modification d'un utilisateur -->		

			<!-- En cas de création, l'id utilisateur est encore inexistant à ce stade, donc on sait qu'il faut créer -->
			$scope.submit = function() {
				if(!$rootScope.formData.id){
					crudPhp.creerUtilisateur($scope.formData).success(function(data){
						$scope.rf(); //rafraichir la liste après création
					});
				}

				else{
					crudPhp.validerModification($scope.formData).success(function(data){
						$scope.rf(); //rafraichir la liste après modif
					});
				}
			};	

		<!-- FIN DU CONTROLEUR -->
		})

	.factory("crudPhp",function($http){
		var factory = {};

			factory.getUtilisateurs = function(){
				return $http.get('dbtruc27.php?action=get_utilisateurs')
			}

			factory.creerUtilisateur = function(formData){
				return $http.post('dbtruc27.php?action=creer_utilisateur' , formData)
			}

			factory.supprimerUtilisateur = function(id){
				return $http.post('dbtruc27.php?action=supprimer_utilisateur' ,{"id":id})
			}

			factory.editerUtilisateur = function(id){
				return $http.post('dbtruc27.php?action=editer_utilisateur' ,{"id":id})
			}

			factory.validerModification = function(formData){
				return $http.post('dbtruc27.php?action=valider_modification' ,formData)
			}
		return factory
	});

	</script>
 </head>

 <!-- La page HTML générale -->
<body ng-controller="accueilCtrl" class="body">

<h1>UN CRUD partagé dans une BDD Mysql avec AngularJs et un Back-end en PHP</h1>

	<!-- Le menu, qui appelle,grâce à HREF, les différentes vues HTML situées plus bas, puis les affiche dans la balise ng-view -->

<div class="container ">

<div >
            <a class="menu" href="#/accueil" class=""><button >Accueil</button></a>
			<a class="menu" href="#/creerEtModifier" class=""><button ng-click="creerUtilisateur()" >Créer</button></a>
		</div>

	</div>

	<!-- LA DIV DE LA LISTE DES UTILISATEURS -->

<div class="liste">

<div class = "personne" ng-repeat="utilisateur in utilisateurs">
			<img src="cowboy-20.png" class="icone"></img>
			Prénom: 	{{utilisateur.prenom}}	

			Nom :		{{utilisateur.nom}}		

			Age :		{{utilisateur.age}}		

			Email: 		{{utilisateur.email}}
			Id: 		{{utilisateur.id}}
			<button ng-click="supprimerUtilisateur(utilisateur.id)" >Supprimer		</button>
			<button ng-click="majUtilisateur(utilisateur.id)" >Mettre à jour	</button>
		</div>

	</div>

	<!-- Cette balise NG-View va afficher les différentes vues -->

<div id="main" class="designDiv">

<div ng-view></div>

        </div>

</body>

	<!-- VUE HTML : DEFAUT-->
    <script type="text/ng-template" id="defaut.html">

<div class="desc"></div>

	</script>

	<!-- VUE HTML : CREER ET MODIFIER-->
    <script type="text/ng-template" id="creerEtModifier.html">

<div class="desc">

<form ng-controller="accueilCtrl" ng-submit="submit()">
				Nom:
				<input type="text" name="nom" ng-model="formData.nom" ng-required="true" >
					<span ng-show="form.size.$error.required">The value is required!</span>
				Prénom:
				<input type="text" name="prenom" ng-model="formData.prenom" ng-required="true" >
					<span ng-show="form.size.$error.required">The value is required!</span>
				Age:
				<input type="text" name="nom" ng-model="formData.age" ng-required="true" >
					<span ng-show="form.size.$error.required">The value is required!</span>
				Email :
				<input type="text" name="prenom" ng-model="formData.email" ng-required="true" >
					<span ng-show="form.size.$error.required">The value is required!</span>
				<input type="submit" value="Ok" >
			</form>

		</div>

	</script>

dbtruc27.php

<?php

include('configtruc27.php'); 

/**  Switch Case pour récupérer la l'action demandée par le controleur  Angular **/

switch($_GET['action'])  {
    case 'creer_utilisateur' :
            creer_utilisateur();
            break;

    case 'get_utilisateurs' :
            get_utilisateurs();
            break;

    case 'editer_utilisateur' :
            editer_utilisateur();
            break;

    case 'supprimer_utilisateur' :
            supprimer_utilisateur();
            break;

    case 'valider_modification' :
            valider_modification();
            break;
}

/**  Function qui ajoute l'utilisateur en base de données MYSQL  **/

function creer_utilisateur() {
    $data = json_decode(file_get_contents("php://input"));
    $nom          = $data->nom ;
    $prenom     = $data->prenom;
    $age         = $data->age;
    $email      = $data->email;

    print_r($data);
    $qry = 'INSERT INTO utilisateurs (nom,prenom,age,email) values ("' . $nom . '","' . $prenom . '",'.$age. ' ,"'.$email .'")';

    $qry_res = mysql_query($qry);
    if ($qry_res) {
        $arr = array('msg' => "Utilisateur ajouté correctement!!!", 'erreur' => '');
        $jsn = json_encode($arr);
        // print_r($jsn);
    }
    else {
        $arr = array('msg' => "", 'erreur' => 'Erreur d insertion de l utilisateur');
        $jsn = json_encode($arr);
        // print_r($jsn);
    }
}

/**  Function to LIT les utilisateurs2 en Base de données Mysql **/

function get_utilisateurs() {
    $qry = mysql_query('SELECT * from utilisateurs');
    $data = array();
    while($rows = mysql_fetch_array($qry))
    {
        $data[] = array(
                    "id"            => $rows['id'],
                    "iduser"        => $rows['iduser'],
                    "nom"             => $rows['nom'],
                    "prenom"         => $rows['prenom'],
                    "age"            => $rows['age'],
                    "email"         => $rows['email']
                    );
    }
    print_r(json_encode($data));
    return json_encode($data);
}

/**  Function qui supprime un utilisateur en base de donnée mysql  **/

function supprimer_utilisateur() {
    $data = json_decode(file_get_contents("php://input"));
    $id = $data->id;
    print_r($data)   ;
    $del = mysql_query("DELETE FROM utilisateurs WHERE id = ".$id);
    if($del)
    return true;
    return false;
}

/**  Functionpour lire les caractéristiques d'un utilisateur en base mysql afin de les éditer **/

function editer_utilisateur() {
    $data = json_decode(file_get_contents("php://input"));
    $id = $data->id;
    $qry = mysql_query("SELECT * from utilisateurs WHERE id = ".$id);
    $data = array();
   while($rows = mysql_fetch_array($qry))
    {
        $data[] = array(
                    "id"            => $rows['id'],
                    "iduser"        => $rows['iduser'],
                    "nom"             => $rows['nom'],
                    "prenom"         => $rows['prenom'],
                    "age"            => $rows['age'],
                    "email"         => $rows['email']
                    );
    }
    print_r(json_encode($data));
    return json_encode($data);
}

/** Function de mise à jour d'un utilisateur **/

function valider_modification() {
    $data = json_decode(file_get_contents("php://input"));
    $id            = $data->id;
    $iduser        = $data->iduser;
    $nom          = $data->nom ;
    $prenom     = $data->prenom;
    $age         = $data->age;
    $email      = $data->email;

   // print_r($data);

    $qry = "UPDATE utilisateurs set nom='".$nom."' , prenom='".$prenom."',iduser='".$iduser."',age='".$age."',email='".$email."' WHERE id=".$id;

    $qry_res = mysql_query($qry);
    if ($qry_res) {
        $arr = array('msg' => "Utilisateur modifié avec succès!!!", 'error' => '');
        $jsn = json_encode($arr);
        // print_r($jsn);
    } else {
        $arr = array('msg' => "", 'error' => 'Erreur dans la mise à jour de l enregistrement');
        $jsn = json_encode($arr);
        // print_r($jsn);
    }
}

?>
Publicités