Exercice 46 : Filtrer une base de données Php-Mysql , une base noSql Firebase, et une base Java-Mysql dans la même application AngularJs très courte.

Firebase  logo-phpjava

Introduction


Il peut arriver que l’on ne puisse pas charger tout notre modèle de données d’un seul coup dans une application AngularJs 1.5 parce qu’il est trop grand et que le temps de chargement est trop long.

POUR TESTER L’APP, CLIQUER ICI.

De ce fait, je décide d’imposer un filtrage de la base de données à l’aide d’un select HTML, avant le chargement Ajax de notre modèle de données JSON dans mon navigateur.
En effet, filtrer en local, avec ng-repeat, peut nécessiter beaucoup de processeur, alors que si on filtre AVANT dans les requêtes, on gagne. cependant, Ng-repeat est fantastiquement utile pour les selects html par exemple, qu’il mets à jour automatiquement, à ce moment, on peut filtrer en local sur de modestes données, à noter que pas mal de plug-ins dropdowns proposent cette fonctionnalité.

Voici donc un exercice fonctionnel répertoriant :

  • 1 filtrage de la base de données noSql firebase (similaire à MongoDb)
  • 1 filtrage de la base de données relationnelle Mysql avec le langage PHP en Back End.
  • 1 fitrage de la base de données relationnelle Mysql avec le langage JAVA en Back End.

Temps de réalisation : 3h(A cause d’un pb de syntaxe avec une var string dans la rqt sql PHP qui m’a ralenti 45 min!)
EDIT : Le code Java est sérieusement compliqué à mettre en place(Comme d’hab), il ne sera pas dispo de suite !

A noter que le filtrage sur Firebase aurait pu être organisé différemment si les nodes avaient été rangés par catégorie. Ici, j’utilise la fonction .equalTo(critère)de l’api firebase, probablement plus couteuse en temps.

Le framework Css utilisé est tout simplement Foundation 6 .css avec un template. Celui-ci est excellent car il passe aussi bien sur les ordis de bureau que sur les téléphones mobiles 5 pouces si on fait bien attention aux classes CSS.

Phase 1 : Créer nos bases de données :


Voici le look de ma base de données noSql sur firebase, j’ai donc une branche nommée « Aliments », mon but est de pouvoir quérir et les trier par catégories à l’aide d’angularJs 1.x: (Pour créer ma base, j’ai créé un mini prog en angularJs mais on peut le faire en ligne de commande avec les commandes firebase.)

nodescool

.

Dans Mysql, je crée ma base de donnée relationnelle, contenant les mêmes aliments que la base noSql, cela donne ça :

mysql huidf

PHASE 2 : Le code :


Index.html : il contient un html select qui récupère une variable categorie grâce au ng-model. Des fonctions appropriées lancent les requêtes sur telle ou telle database, en fonction du bouton ou on appuie.

<!doctype html>
<html ng-app="app"  lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
<!-- CHARGEMENT DES LIBRAIRIES -->

				<!-- CHARGEMENT CSS FOUNDATION  6.0-->
				<!-- <link rel="stylesheet" href="test_fichiers/foundation.css">
				<link href="test_fichiers/foundation-icons.css" rel="stylesheet" type="text/css">
				 -->

				<!-- CHARGEMENT LIB ANGULAR -->
				<script type="text/javascript" src="librairies/angular-1.3.13/angular.min.js"></script>
				<script src="librairies/angular-1.3.13/angular-animate.js"></script>
				<!-- <script src="librairies/angular-1.3.13/angular-route.min.js"></script> -->
				<script src="librairies/angular-1.3.13/angular-locale_fr-fr.js"></script>
				<!-- <script src="librairies/angular-1.3.13/angular-sanitize.min.js"></script> -->

				<!-- CHARGEMENT LIB FIREBASE -->
				<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>

				<!-- MODULE ANGULARJS AngularFire pour firebase-->
				<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>

		<!-- Le CONTROLEUR -->
				<script src="controleurs/app.js"></script>

		<!-- FIN DE CHARGEMENT DES LIBRAIRIES -->		

</head>
<body ng-controller="appCtrl">
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
	<div class="off-canvas position-left reveal-for-large" id="my-info" data-off-canvas data-position="left">
		<div class="row column">
			<br>
			<img class="thumbnail" src="http://placehold.it/550x350">
			<h5>Exercice 46</h5>
			<span ng-if="montreLoader" class="animate-if"><img src="img-app/loading.gif"></img></span>
			<p>Un petit exercice pour filtrer directement lors d'une requête, une base de données Mysql ou une base de données noSql Firebase</p>

		</div>
	</div>
	<div class="off-canvas-content" data-off-canvas-content>
		<div class="title-bar hide-for-large">
			<div class="title-bar-left">
			<button class="menu-icon" type="button" data-open="my-info"></button>
			<span class="title-bar-title">Salut</span>
			</div>
		</div>
		<div class="callout primary">
			<div class="row column">
				<h1>Filtrer les bases de données par catégorie</h1>
				<p class="lead">

				<select ng-model="choixCategorie" class="form-field "  required>
					<option value="" disabled>Sélectionner</option>
					<option value="fruit">fruit</option>
					<option value="legume">legume</option>
					<option value="viande">viande</option>
				</select><BR>
				<button class = "button expanded" ng-click="filtrerAvecPhpMysql()">Filtrer la base de données Php-Mysql. </button>
				<button class = "button expanded" ng-click="filtrerAvecFirebase()">Filtrer la base de données Firebase noSql.</button>
				<button class = "button expanded" ng-click="filtrerAvecJava()">Filtrer la base de données Java-Mysql.</button>

			</div>
		</div>
		<div class="row small-up-2 medium-up-3 large-up-4">
		{{infos}}
			<div class="column" ng-repeat="aliment in aliments" >
				<img class="thumbnail" ng-src="http://placehold.it/550x550">
				<h5>{{aliment.nom}}</h5>
			</div>
			<hr>
		</div>
	</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"></script>
<script>
      $(document).foundation();
    </script>
</body>
</html>

Le fichier controleur de l’application app.js , qui lance les lectures sur les bases de données:


/* CHARGEMENT DES MODULES ANGULARJS */
var app = angular.module('app', ['firebase' ])

/* CONTROLEUR UNIQUE */
app.controller('appCtrl',
[
/* CHARGEMENT DES DEPENDANCES*/
'$scope',
'$http',
'$firebaseArray',
"$firebaseAuth",
"$firebaseObject",
"$timeout",

function ($scope,$http,$firebaseArray,$firebaseAuth,$firebaseObject,$timeout) {

	/* INITIALISATION DU SCOPE : */
	$scope.aliments = null;
	$scope.infos = "Commencez à filtrer pour afficher les aliments ici...";
	$scope.montreLoader = "" ;

	/* FILTRER DIRECTEMENT LA BASE DE DONNEES Php-Mysql */
	$scope.filtrerAvecPhpMysql = function(){
		/* GESTION DE L ICONE LOADER */
		$scope.montreLoader = true ;
		$scope.infos = "";

		/* APPEL AU SCRIPT PHP AVEC UN ARGUMENT $scope.choixCategorie */
		$http.post('filtrer.php?action=get_aliments',{'categorie':$scope.choixCategorie}).success(function(data){
               $scope.aliments = data;   //Chargement des données filtrées
			   /* GESTION DE L ICONE LOADER */
			   $scope.montreLoader = "" ;
            }).error(function(data){ $scope.infos = " Pas de données ou pb de connexion";$scope.montreLoader = "" ;});

	}

	/* FILTRER DIRECTEMENT LA BASE DE DONNEES noSql FIREBASE */
	$scope.filtrerAvecFirebase = function(){
		/* GESTION DE L ICONE LOADER */
		$scope.montreLoader = true ;
		$scope.infos = "";

		/* CONNEXION A LA BDD FIREBASE AVEC UN ARGUMENT DE RECHERCHE  $scope.choixCategorie*/
		var ref = new Firebase("https://blinding-heat-8502.firebaseio.com");
		$scope.aliments = $firebaseArray(ref.child('aliments').orderByChild("categorie").equalTo($scope.choixCategorie));// $scope.choixCategorie est la variable acquise lors du choix dans le select .

		/* GESTION DE L ICONE LOADER */
		$timeout(function(){
				$scope.montreLoader = "";
			}, 400);

	}

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

Le fichier PHP filtrer.php qui se connecte à la base de données relationnelle Mysql puis imprime un Json. Remarquer qu’il acquiert la variable « catégorie » à l’aide de POST provenant de Angular. on peut facilement le customiser grâce au switch pour l’avenir.

<?php

include('connexionConfig.php'); 

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

switch($_GET['action'])  {

    case 'get_aliments' :
            get_aliments();
            break;

}

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

function get_aliments() {
	$data = json_decode(file_get_contents("php://input"));
    $categorie = $data->categorie;   

	$q = "SELECT * from aliments WHERE categorie = '" .$categorie."'"; // Attention à la syntaxe parce que $categorie est du string, c'est hyper chiant
    $qry = mysql_query($q);
    $data = array();
    while($rows = mysql_fetch_array($qry))
    {
        $data[] = array(
                    "nom"            => $rows['nom'],
                    "categorie"      => $rows['categorie'],
                    "img"            => $rows['nom'],
                    );
    }
    print_r(json_encode($data));

}

?>

Le fichier connexionConfig.php qui contient les informations de connexion à mysql :

<?php

  /****** Database Details *********/

    $host      = "nicolash.org.mysql";
    $user      = "nicolash_org";
    $pass      = "xxxxxxxxx";
    $database  = "nicolash_org";
    $con       = mysql_connect($host,$user,$pass);

    if (!$con) {
        die('Could not connect: ' . mysql_error());
    }

    //echo 'Connected successfully'; 

    mysql_select_db($database,$con);  

    /*******************************/

?>
Publicités