Se connecter à MongoDb avec Jquery

Introduction


Pour stocker un objet JSON dans une base de donnée relationnelle comme Mysql ou Oracle, il faut utiliser un langage annexe(PHP, JAVA), et « déconstruire l’objet » Json avant de l’enregistrer dans la base de donnée.

Pour rappel, JSON veut dire « javascript objet notation » et un objet Json ressemble à ça :


{"Nom":"Durand","Prenom":"Paul"}

Il vient donc qu’on pourrait imaginer une base de donnée qui stockerait directement des objets JSON, sans avoir à les modifier, ou à les « passer » à un autre langage.

Voilà pourquoi MongoDB existe. C’est une base de donnée non relationelle, qui stocke des objets JSON.

L’inconvénient est qu’on ne peut pas utiliser le langage SQL dessus, et que si on a besoin de filtrer, on doit utiliser Javascript.

L’avantage est qu’on a plus besoin de Java ou de PHP pour gérer les connexions etc…

J’adore le SQL qui permet d’appliquer des fonctions très puissantes comme sum(), avg() et de faire des jointures; néanmoins je vais donc commencer à me servir de MongoDb pour certains projets.

Comment se connecter à MongoLab et lire les données:


Etape 1 :

Mongolab nous permet de tester MongoDb en ligne, et de créer une base de donnée MongoDb.

Donc : Créer une base de donnée MongodDb gratuite sur le site Mongolab en suivant ce tuto en Anglais .

Ne pas suivre ses informations de la seconde partie concernant la connexion.Il existe 2 methodes de connexion : avec un driver, ou avec REST(en html) et nous allons utiliser cette dernière.

Etape 2 :

Dans un bête fichier  index.html, Utiliser la fonction habituelle Ajax de Jquery $.ajax() pour se connecter en ligne à notre base de donnée MONGODB.


<html ng-app="myApp">
	<head>
		<meta charset="iso-8859-15" >
		<!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->

		<!--	APPEL LIB ANGULAR -->
		<!-- <script	type="text/javascript" 	src="angular-1.3.13/angular.min.js"></script> -->

		<!--	APPEL LIB JQUERY -->
		<script	type="text/javascript" 	src="librairies/jquery.js"					></script>

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

	</head>

<script>

			$.ajax({
				url: "https://api.mongolab.com/api/1/databases/superjojo/collections/Test?apiKey=GP50LkzEgoxBnZDP9N-jCkpO5xxxxxxx",
				contentType: "application/json",
				success: function (data) {
				console.log(data);
				alert(data);
				},
			}); 

</script>

Voilà, on peut visualiser le contenu de notre Base de donnée dans la console grâce à l’instruction

console.log(data);

Explication pour trouver l’URL de connexion à notyre base de donnée(Ils appelent ça « REST »): Dans l’interface de Mongolab, cliquer sur « user ».  On trouve alors l’url qui va nous permettre de nous connecter, il faut y coller son ID à la fin de l’url pour que ça marche.

mongo

Dans l’url, on peut modifier d’autres choses, comme le nom de notre « collection » qui est en fait le nom de notre database, pour pouvoir bien se connecter. En l’occurence, ma collection se nomme « Test ». Ma Sandbox s’appelle Superjojo, et apparait également dans l’URL.

[/sourcecode]

 Comment écrire les données dans MONGOLAB avec Jquery ?


A suivre ..

Publicités

Truc 5 : Créer un Slider Jquery auto-alimenté avec AnySlider et Ajax.

Introduction:


Mieux qu’une liste, un slider permet de soulager l’expérience visuelle de l’utilisateur.

Plutôt que de l’utiliser pour de banales photos, on peut utiliser un slider pour présenter des fiches d’étudiants ou d’objets à vendre ou à modifier, générées à partir d’appels AJAX.

Exemple 1 : Avec le plug in AnySlider.js, sans appel Ajax.


Cliquer ici pour tester en live.

D’abord on crée index.html, avec en première partie les DIV, puis la fonction qui génére AnySlider en seconde partie. Pour plus de « fun » on présente le slider dans une fenêtre Jquery Dialog.

INDEX.HTML


<html lang="fr">
    <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />

    <!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->
            <!--    APPEL LIB JQUERY -->
            <script    type="text/javascript"     src="librairies/jquery.js">                    </script>
            
            <!--    APPEL LIB JQUERY UI ( look sympa du programme) -->
            <script type="text/javascript"     src="librairies/jquery-ui.min.js">            </script>
            <link     href="librairies/jquery-ui.css" rel="stylesheet" type="text/css">
            <script type="text/javascript"     src="librairies/jquery.dialogextend.js"    >    </script>
            
            <!--     TOUCH Pour les tablettes Android-->
            <script src="librairies/jquery.ui.touch-punch.js" language="javascript">    </script>
            
            <!--     ANYSLIDERS pour les DIVS-->
            <script src="librairies/jquery.anyslider.js">                                </script>
             <link rel="stylesheet" href="librairies/jquery-anyslider.css">
            
            <!--    CSS DU PROGRAMME -->
            <link     rel="stylesheet"                 type="text/css" href="style.css" />
    <!-- ----------------------------------------------FIN DU CHARGEMENT DES LIBRAIRIES------------------------ -->
    </head>

<body>

<div id="fen">

  <div class="slider-wrapper " >

            <div class="slider slider2 basique">

                <div>

                    Texte 1

                </div>

                <div>

                   Texte 2

                </div>

            </div>

        </div>
</div>



<script>
    $(function () {

        $('.slider2').anyslider({
            easing: 'easeOutBounce',
            interval: 0,
            keyboard: true,
            showBullets:false,
            speed: 1500
        });
        
        $('#fen').dialog({show: 'fade',hide: 'fold',width:800,height:600,autoOpen: true,draggable: true,appendTo: 'body'});
        
        
        
        
    });
</script>

</body>
</html>

mon fichier CSS général du programme est celui-ci :

STYLE.CSS


.slider {
    overflow: auto; 
    position: relative; 
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}

.basique{
    
    
    border-top: medium solid gainsboro;
    border-bottom: medium solid gainsboro;
    border-left: medium solid gainsboro;
    border-right: medium solid gainsboro;
    background-color:tan;
    border-style:outset;
}

Et je modifie la ligne 16 du fichier css du plug in AnySliders, pour qu’il se place bien dans la fenêtre Jquery dialog (je mets width à 95% à la place de 100%):


.slider {
    border: 1px dotted #333;
    height: 250px;
    margin: 40px auto; 
    padding: 5px;
    text-align: left;
    width: 95%;
}

 

Ce qui donne :

slide

Remarque :

Ca fonctionne bien, cependant, on aimerait éventuellement avoir les numéros ou les noms des divs dans un menu inférieur. En effet, imaginons qu’on ait 150 étudiants dans des divs auto-générées par AJAX, ils serait bon de pouvoir naviguer dans un menu inférieur. C’est pour cela qu’on va tester un autre plug-in : Anythingsliders, et utiliser le code de quelqu’un qui l’a déjà fait avant nous.

Mais avant cela, nous allons améliorer l’exercice suivant avec un appel AJAX qui va nous sortir des fiches étudiants.

 

Exemple 2 : Avec le plug in AnySlider.js, avec un appel Ajax.


A tester ici .

On reprends tout le code de l’exo précedent, sauf qu’on ajoute un appel Ajax qui récupère un fichier JSON contenant la photo, les prénoms et les noms des étudiants d’une école… tout cela dans index.html.

Ensuite, dans la fonction de rappel $.ajax() de Jquery, on crée à la volée une nouvelle div par étudiant à l’aide d’une boucle jquery $.each(). On les génère dans la div qu’on a identifiée « general »(id=general).

Finalement, on applique le plugin anyslider comme dans l’exo 1 , sur la classe CSS .slider2, et cela fonctionne impeccable. On a donc accès à touts nos fiches étudiants, à l’aide du slider, peut importe qu’il y ait 5 étudiants, ou 1000 étudiants.

Le code :

<html lang="fr">
	<head>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />

	<!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->
			<!--	APPEL LIB JQUERY -->
			<script	type="text/javascript" 	src="librairies/jquery.js">					</script>
			
			<!--	APPEL LIB JQUERY UI ( look sympa du programme) -->
			<script type="text/javascript" 	src="librairies/jquery-ui.min.js">			</script>
			<link 	href="librairies/jquery-ui.css" rel="stylesheet" type="text/css">
			<script type="text/javascript" 	src="librairies/jquery.dialogextend.js"	>	</script>
			
			<!-- 	TOUCH Pour les tablettes Android-->
			<script src="librairies/jquery.ui.touch-punch.js" language="javascript">	</script>
			
			<!-- 	ANYSLIDERS pour les DIVS-->
			<script src="librairies/jquery.anyslider.js">								</script>
			 <link rel="stylesheet" href="librairies/jquery-anyslider.css">
			
			<!--	CSS DU PROGRAMME -->
			<link 	rel="stylesheet" 				type="text/css" href="style.css" />
	<!-- ----------------------------------------------FIN DU CHARGEMENT DES LIBRAIRIES------------------------ -->
	</head>

<body>

<div id="fen">

	<div class="slider-wrapper " >

		<div class="slider slider2 basique" id="general"> 

              <!-- Les div ci dessous ne servent plus à rien, Jquery va en générer dynamiquement à cet endroit en fonction des données ajax reçues
                <div > 

                    Texte 1

                </div>

                <div >

                   Texte 2

                </div> 
 -->
		</div>
</div>

	<script>
		$(function () {
			// Création de la fenêtre Jquery Dialog
			$('#fen').dialog({show: 'fade',hide: 'fold',width:300,height:400,autoOpen: true,draggable: true,appendTo: 'body'});
			
			// Appel Ajax et création des Fiches
			$.ajax({
					type: "POST",
					url: "listingEtudiant.php",
					dataType: "json", 
					success: function (data) {
						$.each(data, function(i, item) { // Pour chaque élément du fichier JSON reçu, afficher le nom et le prénom de l'étudiant dans une div différente.
								$("#general").append('<div  class="" ><img src="images/'+data[i].photo+'" class="photographie">'+data[i].prenom+'..'+data[i].nom+'</img>');
								$("#general").append('</div>');
							});
							
							// Création du Slider qui sépare chaque div en sliders à l'aide de la classe CSS slider2...
							$('.slider2').anyslider({
								easing: 'easeOutBounce',
								interval: 0,
								keyboard: true,
								showBullets:false,
								speed: 1500
							});
					}
			});
		});

	</script>

</body>
</html>

Remarque : Bien sur, pour l’instant, il n’y a rien dans les divs, hormis la photo, le nom et le prénom, mais on peut ajouter pleins d’autres choses, des images, des graphes etc …

Ce qui donne :slider2

Voici le fichier JSON qui est déjà assez gros :


[{"id":"10","nom":"CHIPIE","prenom":"Candice","age":"35","datenaissance":"02-03-1976","adresse":"","dateentree":"03-03-2015","datesortie":"10-03-2015","paiement":"1000","pays":"","photo":"f1.jpg"},{"id":"166","nom":"CHOUBALA","prenom":"Thierry","age":"28","datenaissance":"12-10-1976","adresse":"12 Avenur des lilas","dateentree":"11-09-2014","datesortie":"15-10-2015","paiement":"90","pays":"BELGIQUE","photo":"bouton-ENF.png"},{"id":"7","nom":"DOLORIS","prenom":"Jobert","age":"27","datenaissance":"14-10-1978","adresse":"12 rue des oies, Biarritz","dateentree":"15-03-2014","datesortie":"22-10-2014","paiement":"150","pays":"FRANCE","photo":"h5.jpg"},{"id":"180","nom":"DUPONT","prenom":"Roger","age":"57","datenaissance":"01-01-1970","adresse":"12 rue des tomates","dateentree":"01-01-1970","datesortie":"01-01-1970","paiement":"120","pays":"","photo":"h2.jpg"},{"id":"179","nom":"DURAND","prenom":"Thierry","age":"57","datenaissance":"25-03-1980","adresse":"12 rue des tomates","dateentree":"03-09-2014","datesortie":"10-03-2015","paiement":"120","pays":"BELGIQUE","photo":"h1.jpg"},{"id":"6","nom":"FRANCIS","prenom":"Dillinger","age":"47","datenaissance":"01-01-1970","adresse":"24 rue de lis cannes","dateentree":"01-01-1970","datesortie":"18-03-2015","paiement":"120","pays":"","photo":"h4.jpg"},{"id":"161","nom":"GOLUS","prenom":"Philipbert","age":"45","datenaissance":"11-02-1955","adresse":"","dateentree":"13-10-2014","datesortie":"19-02-2015","paiement":"450","pays":"UK","photo":"kansastrain.jpg"},{"id":"2","nom":"GONZAGUES","prenom":"Xavier","age":"32","datenaissance":"15-10-1970","adresse":"141 bd fleurs","dateentree":"08-01-2014","datesortie":"20-08-2015","paiement":"110","pays":"ANGLETERRE","photo":"h2.jpg"},{"id":"181","nom":"GONZO","prenom":"Jolus","age":"0","datenaissance":"01-01-1970","adresse":"","dateentree":"01-01-1970","datesortie":"01-01-1970","paiement":"","pays":"NON","photo":"88ce5a1f961832585f329292d22451fc.jpg"},{"id":"162","nom":"HULEUX","prenom":"Jojo","age":"53","datenaissance":"10-02-1978","adresse":"","dateentree":"14-10-2014","datesortie":"01-01-1970","paiement":"100","pays":"NON","photo":"nicb.jpg"},{"id":"57","nom":"JOBERT","prenom":"Eric","age":"24","datenaissance":"10-01-1970","adresse":"12 rue flipo","dateentree":"10-06-2014","datesortie":"01-01-1970","paiement":"200","pays":"","photo":"eric.jpg"},{"id":"1","nom":"MICHEL","prenom":"Henri","age":"28","datenaissance":"01-01-1970","adresse":"12 rue lilas","dateentree":"01-01-1970","datesortie":"01-01-1970","paiement":"120","pays":"","photo":"h1.jpg"},{"id":"165","nom":"PHILIBERT","prenom":"Jolo","age":"47","datenaissance":"10-02-1969","adresse":"","dateentree":"19-11-2014","datesortie":"14-02-2015","paiement":"110","pays":"USA","photo":"88ce5a1f961832585f329292d22451fc.jpg"},{"id":"163","nom":"PHILIPBERT","prenom":"Jalanne","age":"50","datenaissance":"10-02-1978","adresse":"","dateentree":"11-11-2014","datesortie":"17-02-2015","paiement":"125","pays":"BELGIQUE","photo":"f6.jpg"},{"id":"158","nom":"PHILIPPE","prenom":"Bertand","age":"46","datenaissance":"10-02-1978","adresse":"12 rue des koloks","dateentree":"12-08-2014","datesortie":"22-01-2015","paiement":"465","pays":"USA","photo":"preuve-logement-facture-eau.jpg"},{"id":"182","nom":"TEST1","prenom":"Test1","age":"0","datenaissance":"03-03-2015","adresse":"","dateentree":"04-03-2015","datesortie":"11-03-2015","paiement":"","pays":"NON","photo":"eric.jpg"},{"id":"183","nom":"TEST2","prenom":"Test2","age":"0","datenaissance":"01-01-1970","adresse":"","dateentree":"01-01-1970","datesortie":"01-01-1970","paiement":"","pays":"NON","photo":"each1.jpg"},{"id":"184","nom":"TEST3","prenom":"Test3","age":"0","datenaissance":"03-03-2015","adresse":"","dateentree":"01-03-2015","datesortie":"01-03-2015","paiement":"","pays":"NON","photo":"each1.jpg"},{"id":"185","nom":"TEST4","prenom":"Trst4","age":"0","datenaissance":"01-01-1970","adresse":"","dateentree":"01-01-1970","datesortie":"01-01-1970","paiement":"","pays":"","photo":"eric.jpg"},{"id":"5","nom":"THOMAS","prenom":"Jalabert","age":"15","datenaissance":"14-10-1978","adresse":"20 allee truc 42010paris","dateentree":"15-02-2014","datesortie":"22-10-2014","paiement":"100","pays":"FRANCE","photo":"h3.jpg"}]


Ajouter des Photos dans DataTables.js

Introduction :

POur ajouter des photos dans Datatables.js, si le nom de la photo en base de donnée est img.jpg, il faut modifer le code php comme ceci :


<?php
include('connexionSql.php');
connexionSql();

$jsonresponse=array("data"=>array());

$lectureSql="SELECT * FROM etudiant";
$lecture = mysql_query($lectureSql) or die(mysql_error());

while ($col=mysql_fetch_array($lecture)){

$img = "<img src=\"images/".$col[10]."\" class='photodatatable'>";
$tab=array(
$col[0],
$img,
$col[1],
$col[2],
$col[3],
$col[4],
$col[5],
$col[6],
$col[7],
$col[8],
$col[9],
);

array_push($jsonresponse["data"],$tab);
};

echo json_encode($jsonresponse);

exit();

Puis, on crée la table en html, normalement, avec un champs « photo », et la balise src est interprétée dans datatable:


table id="tbe" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                
                <th>Id Etudiant            </th>
                <th>Photo                </th>
                <th>Nom                    </th>
                <th>Prénom                </th>
                <th>Age                    </th>
                <th>Date de Naissance    </th>
                <th>Adresse                </th>
                <th>Date Entrée            </th>
                <th>Date Sortie            </th>
                <th>Paiement            </th>
                <th>Pays                </th>
                
                
            </tr>
            </thead>
            <tfoot>
                <tr>
                </tr>
            </tfoot>
        </table>

ce qui donne : 
tb1


Exercice 20 : Utilisation de SuperFish.js (Menu)

Le 17 Février 2015

Introduction

Aujourd’hui je vais créer un menu Superfish.js pour gérer toutes les statistiques dans SuperCours.

Voici le rendu du menu, avec ses sous menus:

superf

Comment Faire ?

Le code est très bien expliqué sur la page de Super Fish .

Cependant, j’ai ajouté des icônes dans le menu.

De plus, le système est tel que, lorsqu’un menu est cliqué, cela active la fonction javascript ONCLICK(« chargePhp(fichierPhp) ») qui charge le fichier php de la statistique désirée dans la DIV située dans la partie inférieure de la fenêtre.

Autrement dit, la fonction chargePhp(fichierPhp) prends en argument le fichier PHP de statistiques qui sera exécuté dans la fenêtre .

Il existera aussi une 2ème fonction appelée chargeJs(libJS) qui elle, exécutera des appels ajax et des librairies de statistique de style D3.js

On aboutit donc à un système très simple, ou dans un premier temps, je programmerais les statistiques en PHP. Mais, ensuite, certaines stats seront en javascript, ou feront appel à des librairies de style D3.js

On pourrait même imaginer un menu qui s’autogénérerait en fonction de fichiers phps de stats, mais bon l’intérêt est limité.

Le Code :

PHASE 1 : CREATION DES ELEMENTS DU MENU

Tout d’abord, je crée le menu en HTML dans la page statsGen.html.

(statsGen.html sera chargée à l’aide d’un $.load() dans la fenêtre Jquery Dialog appropriée)


<div id="men1" > 
 
 
 <ul class="sf-menu" id="example">
 <li class="current">
 <a href="followed.html">Décomptes<span class="ui-icon ui-icon-person"></a>
 <ul>
 <li>
 <a href="#decompte">Généraux</a>
 </li>
 <li class="current">
 <a href="followed.html">Graphiques</a>
 <ul>
 <li class="current"><a href="followed.html">menu item</a></li>
 <li><a href="#decompte" onclick="phpCharge(decompte.php)" >Decompte</a></li>
 <li><a href="followed.html" >menu item</a></li>
 <li><a href="followed.html" >menu item</a></li>
 <li><a href="followed.html" >menu item</a></li>
 </ul>
 </li>

</ul>
 </li>
 <li>
 <a href="#moyenne">Moyennes<span class="ui-icon ui-icon-person"></a>
 </li>
 <li>
 <a href="followed.html">Pourcentages<span class="ui-icon ui-icon-person"></a>
 <ul>
 <li>
 <a href="followed.html"></a>
 <ul>
 <li><a href="followed.html">short</a></li>
 <li><a href="followed.html">short</a></li>
 <li><a href="followed.html">short</a></li>
 <li><a href="followed.html">short</a></li>
 <li><a href="followed.html">short</a></li>
 </ul>
 </li>
 <li>
 <a href="followed.html">menu item</a>
 <ul>
 <li><a href="followed.html">menu item</a></li>
 <li><a href="followed.html">menu item</a></li>
 <li><a href="followed.html">menu item</a></li>
 <li><a href="followed.html">menu item</a></li>
 <li><a href="followed.html">menu item</a></li>
 </ul>
 </li>
 <li>
 <a href="followed.html">menu item</a>
 <ul>
 <li><a href="followed.html">menu item</a></li>
 <li><a href="followed.html">menu item</a></li>
 <li><a href="followed.html">menu item</a></li>
 <li><a href="followed.html">menu item</a></li>
 <li><a href="followed.html">menu item</a></li>
 </ul>
 </li>
 
 </ul>
 </li>
 <li>
 <a href="followed.html">optimisations<span class="ui-icon ui-icon-person"></a>
 </li> 
 <li>
 <a href="followed.html">Stats Dynamiques<span class="ui-icon ui-icon-person"></a>
 </li> 
 </ul>
</div>



Pour l’instant, je n’ai activé onclick= »phpCharge(decompte.php) » que sur le sous-menu « decompte »

Donc, en cliquant sur decompte, on exécute la fonction Javascript phpCharge qui charge le fichier PHP.

PHASE 2 : ACTIVATION DE SUPERFISH AVEC JQUERY

Donc, j’active ensuite le menu Superfish à l’aide de la fonction Jquery Suivante :


var example = $('#example').superfish({
 //add options here if required
 });

PHASE 3 : TRAITEMENT DU CHOIX DE L’UTILISATEUR

Voici donc ma fonction JS qui va lancer le fichier PHP dans la DIV choisie. La fonction prends en argument le nom du fichier php à exécuter, c’est êxtremement simple. (j’ai pas encore fait la fonction, je la mettrais plus tard


function phpCharge(fichierphp){
$("#stats").empty();// Efface le contenu de la DIV stats qui est située dans la fenêtre des stats

//Le reste est à venir avec bien sur un appel ajax

}

Lire la suite

Exercice 20 : Utilisation de Datatables.js

Le 14 Février 2015

Introduction


Aujourd’hui, je vais utiliser datatables.js pour organiser la vue des étudiants dans l’exercice 20 Supercours.

La fonction de recherche de Datatables.js est très performante et effectue des recherches sur tout le tableau. La fonctionnalité de tri par colonne est très agréable également. Toujours dans l’optique de ne pas recréer la roue MAIS de créer des applications novatrices, je continue dans cette voie, en intégrant divers plugins, qui communiquent à  l’aide d’objets JSON.

De plus, je vais ajouter la fonctionnalité de Drag and Drop sur chaque ligne, afin de plus tard, pouvoir réaliser des listes ou des statistiques personnalisées-dynamiques par drag and drop.

Le petit problème est actuellement que je ne suis pas encore sur la piste de faire les changements directement à la volée dans le tableau, pour l’instant, je sais le faire en ouvrant une fenêtre additionnelle. Ce n’est pas grave, puisqu’à l’avenir, le double clic ouvrira la fenêtre de l’étudiant, qui sera modifiable, cela revient au même.

Voici le résultat :

dttb

Le code :


Voici l’ordonnancement :

En résumé:

Il faut ouvrir la fenêtre, lire les données en base de données, les « donner » à datatable.js, puis générer datatables dans sa  TABLE.

On peut voir datatables.js comme un « améliorateur de design« , qui vient se plaquer sur une balise <TABLE> Html.

En détail :

PHASE 1

tabet

Je clique dans le menu dans le navigateur sur « Tableau des étudiant », la fonction Table() est alors exécutée avec pour argument le fichier lTbEtudiant.php qui sera donc exécuté. Tout ceci se trouve dans le fichier de type HTML index.html :


 <li onclick="Table('lTbEtudiant.php')"> <span class="ui-icon ui-icon-person"> </span>Tableau des Etudiants</li>

PHASE 2

Voici ma méthode Table() de ma classe classeTable.js Javascript dont le but est de :

  • Ouvrir la fenêtre Dialog appropriée.
  • Spécifier les options de traduction de datatables.js.
  • Appeler en Ajax le fichier lTbEtudiant.php qui va nous fournir les données des étudiants au format Json en retour, après avoir lu dans la base de donnée.
  • Dans sa deuxième partie, la fonction gère les évènements onclick, dblclick et le drag and drop, cette partie n’est pas finie.

var oTable = null;

function Table(selectphp){

 $( "#tableEtudiant" ).dialog( "open" );
 
 /* DESTRUCTION D'UN TABLEAU PRE EXISTANT */
 if (oTable) {
 oTable.fnDestroy();
 }

 /* TRADUCTION DES TITRES ET LECTURE AJAX DES DONNEES*/
 oTable = $('#tbe').dataTable({
 "language": {
 "lengthMenu": "Afficher _MENU_ enregistrements par page",
 "zeroRecords": "Rien trouve - Tentez d'autres critères",
 "info": "Montrer _PAGE_ de _PAGES_",
 "infoEmpty": "Il ny a pas d'enregistrement",
 "infoFiltered": "(filtre sur _MAX_ total d'enregistrements)",
 "search": "Rechercher",
 },
 "ajax": selectphp,
 }); 

 /* EVENEMENTS SUR SIMPLE CLICK */
 $('#tbe tbody').on( 'click', 'tr', function () {
 var aPos = $('#tbe').dataTable().fnGetPosition(this);
 var aData = $('#tbe').dataTable().fnGetData(aPos[0]);
 $(this).draggable({helper:'clone',scroll: false}); // Draggable
 
 if ( $(this).hasClass('selected') ) {
 $(this).removeClass('selected');
 
 }
 else {
 oTable.$('tr.selected').removeClass('selected');
 $(this).addClass('selected');
 
 }
 $('#button').click( function () {
 oTable.row('.selected').remove().draw( false );
 });
 });
 
 /* EVENEMENTS SUR DOUBLE CLICK */
 $('#tbe tbody').on( 'dblclick', 'tr', function () {
 var aPos = $('#tbe').dataTable().fnGetPosition(this);
 var aData = $('#tbe').dataTable().fnGetData(aPos[0]); 
 var id = aData[aPos][0];
 alert(id); 
 /* modifierObjet(id); */
 /* DEBUGGING */
 /* alert( 'Numéro de Livraison: '+aData[aPos][0] ); alert( 'Row index: '+oTable.row( this ).index() ); */
 });
}

Note : oTable permet de regénérer « à la barbare » tout le tableau lorsqu’on rappelle la méthode Table(). C’est un moyen rapide que j’ai trouvé pour ne pas avoir d’erreur, cependant, il existe des méthodes plus élégantes qui ne rechargent que les données du tableau, mais qui sont plus compliquées…

La ligne

$(this).draggable({helper:'clone',scroll: false});

permet de rendre chaque ligne draggable, ce qui permet d’envisager des solutions novatrices pour un peu plus tard.

PHASE 3

Le fichier PHP, comme d’habitude, sert uniquement à requêter la base de données.

Il faudrait savoir le remplacer par Nodes.js dès que j’ai le temps, ou Java.

Pour l’instant, il n’y a pas de jointures, mais l’intérêt futur(d’ici 2 jours) sera d’ajouter par jointures les notes des élèves, leurs professeurs, et surtout leurs cours. Ce qui permettra le tri par notes des élèves par exemple, en un clin d’oeil, on pourra savoir quel élève a les meilleures notes de l’école ! C’est carrément tripant. Et avec le drag and drop, on pourra créer des listes des meilleurs élèves par exemple, super facilement.

lTbEtudiant.php:
<?php
include('connexionSql.php');
connexionSql();

$jsonresponse=array("data"=>array()); 

$lectureSql="SELECT * FROM etudiant";
$lecture = mysql_query($lectureSql) or die(mysql_error());

while ($col=mysql_fetch_array($lecture)){ 
 $tab=array(
 $col[0],
 $col[1],
 $col[2],
 $col[3],
 $col[4],
 $col[5],
 $col[6],
 $col[7],
 $col[8],
 $col[9]);
 
 array_push($jsonresponse["data"],$tab);
}; 
 
echo json_encode($jsonresponse);

exit();

PHASE 4

Dans le fichier HTML de la PHASE  1 se trouve la TABLE  qui a l’id « tbe » qui va recueillir la génération de datatables.js, grâce à la méthode $(‘#tbe’).dataTable() de la Phase 1.

Contrainte :

Le nombre de colonnes du tableau doit correspondre au nombre de colonnes de l’objet JSON et donc, de la requête SQL.:


<table id="tbe" class="display" cellspacing="0" width="100%">
 <thead>
 <tr>
 <th>Id Etudiant </th>
 <th>Nom </th>
 <th>Prénom </th>
 <th>Age </th>
 <th>Date de Naissance </th>
 <th>Adresse </th>
 <th>Date Entrée </th>
 <th>Date Sortie </th>
 <th>Paiement </th>
 <th>Pays </th>

 
 </tr>
 </thead>

 <tfoot>
 <tr>
 
 
 </tr>
 </tfoot>
</table>

En annexe, pour info, voici la méthode de création de la fenêtre Jquery Dialog #tableEtudiant :

$(function() {
 $( "#tableEtudiant" ).dialog({width:900,height:530,autoOpen: true,draggable: true,appendTo: 'body'}).dialogExtend({
 "closable" : true,
 "maximizable" : false,
 "minimizable" : false,
 "collapsable" : false,
 "dblclick" : "collapse",
 "minimizeLocation" : "right",
 });
 $( "#tableEtudiant" ).dialog( "close" );//Par défaut
 });

Exercice 20 : Elaboration des Statistiques.

Introduction :


La partie la plus excitante de la programmation dans Supercours va être les statistiques(Ou en Anglais, Reporting). Dans un premier temps, on va assurer les statistiques générales, décomposées en :

1. Enumérations génériques, des infos simples mais toujours très utiles pour les décisionnaires.

2. Moyennes générales les plus utiles (Moyenne de Notes des élèves, Moyenne de présence en Cours, Moyenne des notes des élèves d’un professeur donné; et bien d’autres…

3. Pourcentages de remplissage des cours, pourcentages d’évolution d’inscriptions par dates. (Tout cela en graphiques fromages, ou en barres, avec des graphes en 3 dimension et j’en passe, le but est que ça pête visuellement !)

4. Ensuite on pourra commencer à penser à des choses plus compliquées du style : Stats prévisionnelles, Optimisation de remplissage des cours par algorithmes, Evaluations de Rentabilité d’un cours, etc … (Vu que je ne suis pas spécialiste, il faudra étudier un peu… Voir beaucoup…)

st1

Introduction au code:


Le but est d’effectuer des requêtes dans la base de données, puis de présenter les données à l’utilisateur. Ordonnancement : ->AFFICHAGE DE HTML

->JQUERY AJAX EXECUTE UN FICHIER PHP

->PHP LIT UNE REQUETE SQL

->JQUERY AJAX RECUPERE LE CONTENU DE LA REQUETE AU FORMAT JSON DANS SUCCESS(){}

-> JQUERY AFFICHE LES DONNEES EN HTML.

Description : Il y a le fichier HTML, le fichier JAVASCRIPT, et les fichiers PHP.

  • Le fichier HTML contient 2 DIV :La div du menu appelée « men1 » et la div destinée à recevoir les données et les graphiques appelée « infovue« .Chaque click sur un élément du menu HTML lance une fonction Javascript à l’aide de onclick= »Gx() » ou onclick= »Nx() », qui remets à jours en tous les cas la div « infovue« . Si c’est une fonction Gx(), le résultat sera un graphe; si c’est une fonction Nx() le résultat sera des chiffres.
  • Le fichier Javascript contient toutes les fonctions javascript AJAX tel que Gx() soit une fonction de génération de graphe, et Nx() une fonction de génération de chiffres.(avec x<n pour n= nombre de fonctions). (Note:La fonction Jquery Ajax peut aussi bien récupérer les données d’un fichier Json mais peut aussi afficher directement le contenu d’un fichier PHP directement dans le HTML)
  • Les fichiers PHP vont requêter la base de données avec les requêtes SQL appropriées, puis créent un objet JSON qui est récupéré dans la fonction de rappel de chaque fonction Javascript tel que Gx.php soit un fichier de génération de graphe, et Nx.php soit un fichier de génération de chiffres.( avec x<n pour n = nombre de fichiers)

Le code :

Voici le fichier HTML statsGen.html

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>

<div id="men1" > 
        
        <ul class="sf-menu" id="example">
            <li class="current">
                <a href="">Enumérations<span class="ui-icon ui-icon-person"></a>
                <ul>
                    <li>
                        <a href="#" onclick="N1()">Chiffres</a>
                    </li>
                        <li class="current">
                            <a href="#">Graphiques</a>
                            <ul>
                                <li><a href="#"     onclick="G1()"    >Nombre de Professeurs par Catégories</a></li>
                                <li><a href="#"                    >Graphe 2</a></li>
                                <li><a href="#"                    >Graphe 3</a></li>
                                <li><a href="#"                    >Graphe 4</a></li> 
                            </ul>
                        </li>
                </ul>
            </li>
                
                <li class="current">
                <a href="">Moyennes<span class="ui-icon ui-icon-person"></a>
                <ul>
                    <li>
                        <a href="#" onclick="N2()">Chiffres</a>
                    </li>
                        <li class="current">
                            <a href="#">Graphiques</a>
                            <ul>
                                <li><a href="#"     onclick=""    >Graphe 1</a></li>
                                <li><a href="#"                    >Graphe 2</a></li>
                                <li><a href="#"                    >Graphe 3</a></li>
                                <li><a href="#"                    >Graphe 4</a></li> 
                            </ul>
                        </li>
                </ul>
            </li>
            
            <li>
                <a href="">Pourcentages<span class="ui-icon ui-icon-person"></a>
                <ul>
                    <li>
                        <a href=""></a>
                        <ul>
                            <li><a href="#"                     >Graphe 1</a></li>
                            <li><a href="#"                    >Graphe 2</a></li>
                            <li><a href="#"                    >Graphe 3</a></li>
                            <li><a href="#"                    >Graphe 4</a></li> 
                        </ul>
                    </li>
                    <li>
                        <a href="">menu item</a>
                        <ul>
                            <li><a href="#"                     >Graphe 1</a></li>
                            <li><a href="#"                    >Graphe 2</a></li>
                            <li><a href="#"                    >Graphe 3</a></li>
                            <li><a href="#"                    >Graphe 4</a></li> 
                        </ul>
                    </li>
                    <li>
                        <a href="">menu item</a>
                        <ul>
                            <li><a href="#"                     >Graphe 1</a></li>
                            <li><a href="#"                    >Graphe 2</a></li>
                            <li><a href="#"                    >Graphe 3</a></li>
                            <li><a href="#"                    >Graphe 4</a></li> 
                        </ul>
                    </li>
                
                </ul>
            </li>
            <li>
                <a href="">Optimisations<span class="ui-icon ui-icon-person"></a>
            </li>    
            <li>
                <a href="">Stats Dynamiques<span class="ui-icon ui-icon-person"></a>
            </li>    
        </ul>
</div> 

<div id='infovue'></div>

</body>




Le fichier Javascript classeStatsGen.js comprends les fonctions de type Nx() ou Gx(), elles contiennent des appels AJAX de type $.ajax() et traitent les données reçues grâce à leurs fonctions de rappel success().

function statsGen(){
    $( "#statsGen" ).dialog( "open" );// Ouverture de la fenetre des stats générales
    $("#statsGen").load('statsGen.html'); 
    var example = $('#example').superfish({
                //add options here if required
                });
 
}

 
 // Decomptes 
function N1(){

document.getElementById("charge").style.visibility="visible";
    $.ajax({
        type: "POST",
        url: "N1.php",
        dataType: "json", 
        success: function (dataStats) {
            window.dataStats = dataStats;
            $("#infovue").empty();
            $("#infovue").append('\
                                <b>Nombre de Cours :                </b>\
                                <span id="nbcours">                    </span><br>\
                            \
                                <b>Nombre d\'étudiants :            </b>\
                                <span id="nbetudiants">                </span><br>\
                            \
                                <b>Nombre de professeurs :            </b>\
                                <span id="nbprofs">                    </span><br>\
                            \
                                <b>Nombre de documents hébergés :    </b>\
                                <span id="nbdocsheb">                </span><br>\
                            \
                                <b>Nombre d\'inscrits dans les cours:</b>\
                                <span id="nbinscrits">                </span><br>\
                                ');
            $("#nbcours").html        (dataStats[0].nbCours);
            $("#nbetudiants").html    (dataStats[1].nbEtudiants);
            $("#nbprofs").html        (dataStats[2].nbProfesseurs);
            $("#nbdocsheb").html    (dataStats[3].nbDocumentsCours); 
            $("#nbinscrits").html    (dataStats[4].nbInscrits); 
            document.getElementById("charge").style.visibility="hidden";
        }
    });

}

// Moyennes
function N2(){

document.getElementById("charge").style.visibility="visible";
    $.ajax({
        type: "POST",
        url: "N2.php",
        dataType: "json", 
        success: function (dataStats) {
            window.dataStats = dataStats;
            $("#infovue").empty();
            //Age Moyen des étudiants:
            $("#infovue").append('<b>Age Moyen des étudiants: </b>');
            $("#infovue").append(dataStats[0].ageMoyen);
            $("#infovue").append('<br>');
            //Paiement Moyen des étudiants: 
            $("#infovue").append('<b>Paiement Moyen des étudiants: </b>');
            $("#infovue").append(dataStats[1].paiementMoyen);
            $("#infovue").append(' Euros');
            $("#infovue").append('<br>');
            //Moyenne Etudiants Max par Cours
            $("#infovue").append('<b>Moyenne du nombre d\'Etudiants Max par Cours: </b>');
            $("#infovue").append(dataStats[2].nbemaxMoyen);
            $("#infovue").append(' Etudiants au maximum par Cours');
            $("#infovue").append('<br>');
            
            document.getElementById("charge").style.visibility="hidden";
        }
    });

}


function G1(){
$("#infovue").empty();
document.getElementById("charge").style.visibility="visible";
    $.ajax({    
            type: "POST",
            url: "G1.php",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (response){
                                        plot = $.jqplot('infovue',response, {// La librairie Jqplot se sert de l'objet JSON response pour créer le graphique,celui-ci a été généré par G1.php.
                                             async: false,
                                            title:'Nombre de professeurs par Catégories :',
                                            seriesDefaults:{
                                            renderer:$.jqplot.BarRenderer,pointLabels: { show: true },
                                            rendererOptions: { varyBarColor: true }},    
                                            axes: {xaxis: {renderer: $.jqplot.CategoryAxisRenderer,}},
                                            });

            document.getElementById("charge").style.visibility="hidden";
            },
            failure: function (errMsg){
                                    $('#errorMessage').text(errMsg);  //errorMessage is id of the div
            }        
    })

};


Voici maintenant les fichiers PHP dont le nom correspond au nom de la fonction Javascript. Par Exemple, le fichier qui requête pour la génération du graphe Nombre de professeurs par Catégorie de Cours, il s’appelle G1.php et sa fonction Js associée est G1().


<?php
// Connexion à la BDD
include('connexionSql.php');
connexionSql();

/* --------------------------------------------------------Stat 6 : Nombre de professeurs par Catégorie de Cours----------------------------------------------------- */
$lectureSql5="SELECT distinct count(professeur.idcategcours) as decompte,categcours.nom as nom FROM professeur INNER JOIN categcours ON professeur.idcategcours=categcours.idcategcours group by professeur.idcategcours";
$lecture5 = mysql_query($lectureSql5) or die(mysql_error());

while ($col=mysql_fetch_array($lecture5)){ 
        $col[0]=intval($col[0]); 
        $tabGen[]=array($col[1],$col[0]);
};    

$tabAdded=json_encode($tabGen);
echo('['.$tabAdded.']');




Voici l’objet Json qu’on voit passer dans Firebug à la suite de l’exécution du script précédent : json1 Voici un autre exemple : N1.php est le fichier qui comprends des requêtes SQL de type count(), qui servent pour générer les Enumérations.

Sa fonction javascript relative est N1() dans le fichier Javascript: Le résultat de ces requêtes est placé dans un tableau PHP qui est converti en JSON à la fin du fichier PHP, pour être traité par la fonction de rappel de jquery.ajax() qui s’appelle success(dataStats). dataStats contient alors l’objet JSON, et donc toutes ses variables, qui deviennent accessibles dans la fonction success de jquery.ajax().


<?php
// Connexion à la BDD
include('connexionSql.php');
connexionSql();

// Initialisation du tableau
/* $tabGen = []; */


/* --------------------------------------------------------Stat 1 : Nombre de Cours----------------------------------------------------- */
$lectureSql="SELECT count(*) from cours  ";
$lecture = mysql_query($lectureSql) or die(mysql_error());
$row    = mysql_fetch_assoc($lecture);

// On remplit le tableau tabGen avec la Stat 1
foreach ($row as $value){
 $tabGen[]=array(
    "nbCours"        =>$value,
    );
}

/* --------------------------------------------------------Stat 2 : Nombre d'étudiants----------------------------------------------------- */

$lectureSql="SELECT count(*) from etudiant  ";
$lecture = mysql_query($lectureSql) or die(mysql_error());
$row    = mysql_fetch_assoc($lecture);

// On remplit le tableau tabGen avec la Stat 2
foreach ($row as $value){
 $tabGen[]=array(
    "nbEtudiants"        =>$value,
    );
}

/* --------------------------------------------------------Stat 3 : Nombre de professeurs----------------------------------------------------- */

$lectureSql="SELECT count(*) from professeur  ";
$lecture = mysql_query($lectureSql) or die(mysql_error());
$row    = mysql_fetch_assoc($lecture);

// On remplit le tableau tabGen avec la Stat 3
foreach ($row as $value){

 $tabGen[]=array(
    "nbProfesseurs"        =>$value,
    );
}

/* --------------------------------------------------------Stat 4 : Nombre de documents hébergés----------------------------------------------------- */

$lectureSql="SELECT count(*) from documentscours  ";
$lecture = mysql_query($lectureSql) or die(mysql_error());
$row    = mysql_fetch_assoc($lecture);

// On remplit le tableau tabGen avec la Stat 4
foreach ($row as $value){

 $tabGen[]=array(
    "nbDocumentsCours"        =>$value,
    );
}

/* --------------------------------------------------------Stat 5 : Nombre d'élèves inscrits----------------------------------------------------- */

$lectureSql="SELECT count(idetudiant) from listeetudiant";
$lecture = mysql_query($lectureSql) or die(mysql_error());
$row    = mysql_fetch_assoc($lecture);

// On remplit le tableau tabGen avec la Stat 5
foreach ($row as $value){

 $tabGen[]=array(
    "nbInscrits"        =>$value,
    );
}





echo json_encode($tabGen);

exit();


Voici l’objet Json qu’on voit passer dans Firebug à la suite de l’exécution du script précédent : json2 CONCLUSION :


Une fois que l’on a compris la logique de la génération des graphiques à l’aide de JSON, on peut envisager de créer des appllcations Sympas.

Les autres graphes -Google code- étant trèèèès esthétiques mais pas toujours faciles à créer et à gérer. La méthode énoncée ici va me permettre d’exploiter d’autres librairies de génération de graphes telles que D3.js, et cela avec une méthode structurée.

La méthode $.ajax() de Jquery: Avec la méthode jquery $.ajax(), on 2 choix

1. Afficher directement le contenu d’un fichier PHP dans le HTML avec un $.load(), ce qui est bien si un dév PHP a créé un super script.

2. Mais on peut aussi récupérer les variables du script PHP au format JSON et les traiter avec Javascript dans la fonction de rappel de $.ajax() success(reponse){]. En ce cas, reponse est un objet JSON qui comprends toutes les données récupérées par notre fichier PHP, et en ce cas on travaille en mémoire VIVE, avec toutes la vivacité de Javascript.

Note personelle : Contrairement à Commandis, les graphiques en barres ne sont plus générés à partir de fichiers en dur JSON, mais directement à partir de conversion à l’aide de la fonction php json_encode(), ça va bien plus vite.

Samedi 21 Février


Aujourd’hui, je vais créer un camembert de pourcentages statistiques avec la librairie Jqplot.js: cm Demain, j’en ferais d’autres avec Highcharts.js puis, plus tard, avec D3.js. On s’y prends la même manière que décrit précédemment, sauf que la requête SQL est naturellement différente, ainsi que la méthode Jqplot, qui, cette fois-ci, utilise $.jqplot.PieRenderer pour générer le graphique. La difficulté principale est la création de la requête SQL, qui fait appel à la logique. Le reste n’est que répétition. Je vais élaborer la requête Pourcentage d’étudiants inscrits par catégories :

Phase 1 : Créer le lien de menu qui appelle la méthode Ajax G7() : Fichier concerné :statsGen.html


 <li><a href="#" onclick="G7()" >Pourcentage d'étudiants inscrits par catégories</a></li>

Phase 2 : Elaborer la requête SQL puis, récupérer son résultat à l’aide du langage PHP, puis créer un objet JSON. Fichier concerné : G7.php

<?php
// Connexion à la BDD
include('connexionSql.php');
connexionSql();
/* --------------------------------------------------------Pourcentage etudiants par catégories------------------------------ */
$lectureSql="SELECT Distinct COUNT( idetudiant ) AS nbinscrits,categcours.nom,ROUND(COUNT(idetudiant)/(SELECT COUNT(*) FROM listeetudiant )*100)FROM listeetudiant LEFT JOIN cours ON listeetudiant.idcours=cours.idcours LEFT JOIN categcours ON cours.idcategcours=categcours.idcategcours GROUP BY cours.idcategcours ";
$lecture = mysql_query($lectureSql) or die(mysql_error());

while ($col=mysql_fetch_array($lecture)){ 
 
 $col[0]=intval($col[0]); 
 $tabGen[]=array($col[1],$col[0]);
};
echo json_encode($tabGen); 
exit();


Note : Lors de l’élaboration de la Rqt, je récupère 3 champs, mais ensuite, finalement, je n’en récupère que 2 lors de la boucle PHP. Lorsque je conçois les rqts, je les teste dans Mysql, ce qui fait que parfois, c’est utilise de garder quelques champs dans le SQL, mais j’aurais du l’enlever. 2ème note, dans la boucle PHP, il y a une conversion INT, sans cela Json mets les nombres entre guillemets, bien sur.

Phase 3: Le contenu de l’objet JSON est récupéré dans la méthode success de Jquery, et c’est dans cette méthode de rappel que j’exécute la librairie Jqplot.(Note : L’indendation n’a pas été reprise par wordpress) Fichier concerné : ClasseStatsGen.js


// Pourcentages
function G7(){
$("#infovue").empty();
document.getElementById("charge").style.visibility="visible";
$.ajax({
type: "POST",
url: "G7.php",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (response){
var plot2 = jQuery.jqplot ('infovue', [response],
{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Turn off filling of slices.
fill: false,
showDataLabels: true,
// Add a margin to seperate the slices.
sliceMargin: 4,
// stroke the slices with a little thicker line.
lineWidth: 5
}
},
legend: { show:true, location: 's' }
}
);
document.getElementById("charge").style.visibility="hidden";
},
failure: function (errMsg){
$('#infovue').append(errMsg); //infovue is id of the div
}
})
};

 

 

Mercredi 25 Février

 

Aujourd’hui, je vais élaborer une statistique avec un premier graphique HighCharts.js:

hc

 

C’est la somme des paiements des étudiants par mois (en Euros) pour une année donnée.

 

Comme d’hab, en PHASE 1, je crée un lien dans le menu qui pointe sur ma méthode Javascript G8() :


 <li><a href="#"  onclick="G8()" >Somme des Paiements par mois </a></li> 

 

Phase 2 : Je crée la requête SQL qui retourne la somme des paiements par mois :


SELECT sum( paiement ) , monthname( dateentree ) FROM etudiant WHERE year( dateentree ) =2014 GROUP BY month( dateentree )

A remarquer que cette requête retourne un tableau comme ceci :
tb1

 

On remarque donc que les mois ne sont pas cités lorsqu’il n’y a pas eu de paiement.

Par contrainte de temps, je m’en contente et adapte le graphique à cela , en Phase 3, en créant un premier appel ajax qui récupère les mois pour les nommer les colonnes.

Donc, toujours  pour la phase 2, comme d’hab je crée mon fichier PHP G8.php :


<?php
// Connexion à la BDD
include('connexionSql.php');
connexionSql();
/* --------------------------------------------------------Somme des Paiement par mois ----------------------------------------------------- */
$lectureSql="SELECT sum( paiement ) , monthname( dateentree ) FROM etudiant WHERE year( dateentree ) =2014 GROUP BY month( dateentree )";

$lecture = mysql_query($lectureSql) or die(mysql_error());

while ($col=mysql_fetch_array($lecture)){ 
 
 $col[0]=intval($col[0]); 

 $tabGen[]=array($col[1],$col[0]);
};


echo json_encode($tabGen);

exit();

sauf qu’en plus j’en crée un annexe G8mois.php pour récupérer facilement les titres des colonnes:


<?php

<?php
// Connexion à la BDD
include('connexionSql.php');
connexionSql();
/* --------------------------------------------------------Somme des Paiement par mois ----------------------------------------------------- */
$lectureSql="SELECT sum(paiement),monthname(dateentree) from etudiant group by month(dateentree)";
$lecture = mysql_query($lectureSql) or die(mysql_error());

while ($col=mysql_fetch_array($lecture)){ 
 
 

 $tabGen[]=array($col[1]);
};



echo json_encode($tabGen); 
exit();

 

En Phase 3, Je récupère le contenu des 2 fichiers PHP dans la fonction de rappel de Jquery Ajax, puis crée le graphe( Comme d’hab, wordpress ne reprends pas l’indentation, on ne comprends rien…) :


function G8(){
$("#infovue").empty();
document.getElementById("charge").style.visibility="visible";
$.ajax({ 
 type: "POST",
 url: "G8mois.php",
 dataType: "json",
 contentType: "application/json; charset=utf-8",
 success: function (mois){
 $.ajax({ 
 type: "POST",
 url: "G8.php",
 dataType: "json",
 contentType: "application/json; charset=utf-8",
 success: function (response){
 $(function () {
 $('#infovue').highcharts({
 chart: {
 type: 'column',
 margin: 75,
 options3d: {
 enabled: true,
 alpha: 10,
 beta: 25,
 depth: 70
 }
 },
 title: {
 text: 'Paiements par mois'
 },
 tooltip: {
 headerFormat: '<b>{point.key}</b><br>',
 pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
 },
 
 subtitle: {
 text: 'Somme des paiements des étudiants par mois'
 },
 plotOptions: {
 column: {
 depth: 25
 }
 },
 xAxis: {
 categories: mois/* ['January', 'February', 'March', 'June', 'August','September','October','November'] */
 
 },
 yAxis: {
 title: {
 text: "Euros"
 }
 },
 series: [{
 name: 'Ventes',
 data: response,
 stack: 'Euros'
 
 }]
 });
 });

 document.getElementById("charge").style.visibility="hidden";
 },
 failure: function (errMsg){
 $('#infovue').append(errMsg); //infovue is id of the div
 } 
 })


 }
 });
};

pour conlure, on constate que les noms des mois sont en Anglais, pour les traduire, une solution est utiliser month( dateentree ) à la place de monthname( dateentree ) dans le sql, cela retourne des vars « int », de cette façon, on peut affecter chaque int à un nom en français en javascript.

Exercice 15 : Uploader 1 fichier avec JQuery Upload File, puis parser avec PAPAPARSE

Introduction

Voici comment importer un fichier CSV dans une application, puis le parser( décomposer) en un tableau javascript.
J’utilise pour ceci 2 librairies JQuery/Javascript :

1. http://hayageek.com/docs/jquery-upload-file.php

et

2. http://papaparse.com/

exo15

Tester en ligne :
http://nicolash.org/exercice15/

Le Code :

index.html


<meta http-equiv="content-type" content="text/html;charset=utf8" />

							<!-- 		DEBUT DU CHARGEMENT DES LIBRAIRIES -->
<!--	APPEL LIB JQUERY -->
	<script	 type="text/javascript" src="librairies/jquery.js"></script>

<!--	APPEL LIB JQUERY UI ( look sympa du programme) -->
<!--	<link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> -->
	<script type="text/javascript" src="librairies/jquery-ui.js"></script>
	<link href="librairies/jquery-ui.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="librairies/jquery.dialogextend.js"></script>

<!-- 	CHARGEMENT LIB UPLOADFILE -->
		<link rel="stylesheet" href="librairies/jquery-upload-file-master/css/uploadfile.min.css" type="text/css"/>
	<script src="librairies/jquery-upload-file-master/js/jquery.uploadfile.min.js" type="text/javascript" charset="utf-8"></script>

<!--	FONCTIONS AJAX DU PROGRAMME -->
	<script type="text/javascript" src="fonctionsMachine.js"></script>

<!--	CSS DU PROGRAMME -->
	<link rel="stylesheet" type="text/css" href="style.css" />

<!-- 	PAPAPARSE CSV TO JSON -->
	<script src="librairies/papaparse.js" type="text/javascript" ></script>
<!-- 		FIN DU CHARGEMENT DES LIBRAIRIES -->

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Exercice 15</title>
	<body BGCOLOR=white>
	<img src="COMMANDIS.jpg" height=30px width=150px /> 

<!-- PAGE PRINCIPALE -->
<div id="page" >
<div id="info" >Les données vont apparaitre ici</div>

<!-- ICONES -->
<h3 id="clickMe2" id="draggable" class="icone" style="width:130px; background:tan; border:4px outset black;border-radius:5px;left: 400px; top:200px ">
<img src="photoscommandis/exercice.jpg" height=100px width=100px />Parser un fichier CSV</h3>

<!-- FENETRES -->
<div id="dialog2" title="Lancer 1 lecture jquery ajax">
<div id="fileuploader">Télécharger votre fichier Csv</div>
<div id="eventsmessage">debug</div>

<!--zone du petit gif animé AJAX-->
<img id="charge" src="chargeur.gif" width=50px  />

<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<!-- <button class="submit" type="submit" id="tbutton" >Requête Jquery Ajax</button> -->
</div> 

<!-- FIN DE PAGE -->
</body>
</html>

fonctionMachines.js


// JavaScript Document

// --------------------------------------------------- RECEPTION DES REQUETES AJAX ------------------------------------------------------

/* Requete En lecture Ajax JQUERY*/
 $(function() {
     $("#tbutton").click(function(){
	//gestion du bouton et du gif animé chargeur Ajax
	document.getElementById("tbutton").disabled= true;
	document.getElementById("charge").style.visibility="visible";

	$.ajax({
            url: 'afficher.php',
            type: "GET",
			 data: "",
				success: function(data) {
				/* 	//code to execute */
				document.getElementById("info").innerHTML=data;
				//affiche la zone info
				document.getElementById("info").style.visibility="visible";
				alert('Requete ajax Jquery ok');
				/* 	Fait disparaitre l'image du chargeur Ajax et réactive le button ! */
				document.getElementById("tbutton").disabled= false;
				document.getElementById("charge").style.visibility="hidden";
				}
            });	

		});
 });
/*
-----------------------------------------------RECEPTION DE FICHIER ET PARSING----------------------  */

 /*Téléchargement du Fichier CSV */
 /* http://hayageek.com/docs/jquery-upload-file.php */

$(document).ready(function()
{
	$("#fileuploader").uploadFile({
	url:"upload.php",
	fileName:"myfile",
	allowedTypes:"csv",
	/* 	Traduction */
	dragDropStr: "<span><b>Faites glisser et deposez les fichiers</b></span>",
	abortStr:"abandonner",
	cancelStr:"resilier",
	doneStr:"fait",
	multiDragErrorStr: "Plusieurs Drag & Drop de fichiers ne sont pas autorises.",
	extErrorStr:"n'est pas autorisé. Extensions autorisees:",
	sizeErrorStr:"n'est pas autorisé. Admis taille max:",
	uploadErrorStr:"Upload n'est pas autorise",
	extErrorStr:"n'est pas autorise. Extensions autorisees:",

onSubmit:function(files)
{
	$("#eventsmessage").html($("#eventsmessage").html()+"<br/>Soumission:"+JSON.stringify(files));
},
onSuccess:function(files,data,xhr)
{
	$("#eventsmessage").html($("#eventsmessage").html()+"<br/>Succes pour : "+JSON.stringify(data));
	var nomFichier= JSON.stringify(files);

	/* PARSING CSV->JSON AVEC PAPAPARSE */
	var nomFichier= nomFichier.replace('"','');
	var nomFichier= nomFichier.replace('"','');
	var nomFichier= nomFichier.replace('[','');
	var nomFichier= nomFichier.replace(']','');
	var nomFichier= "/exercice15/uploads/"+nomFichier;
	alert(nomFichier);
	Papa.parse(nomFichier, {
	download: true,
	complete: function(results) {
		console.log("Le fichier CSV a ete parse en un tableau javascript JSON", results);
		var tableau = results.data;
/* 		document.write(results.data); */
		$("#eventsmessage").html($("#eventsmessage").html()+"<br/>Voici les donnees parsees: "+results.data);
		}
});

},
afterUploadAll:function(files)
{
	$("#eventsmessage").html($("#eventsmessage").html()+"<br/>Tous les fichiers sont uploades");

},
onError: function(files,status,errMsg)
{
	$("#eventsmessage").html($("#eventsmessage").html()+"<br/>Erreur pour: "+JSON.stringify(files));
}
});
	});

/*  ----------------------------------------GENERATION DE TABLES ------------------------------------------------------------ */

/*   ---------------------------------PLUGS IN DE FORMULAIRES --------------------------------------------------------------- */

/*  --------------------------------------FENETRAGE et ICONES-----------------------------------------------------------------------------  */

  // Ouvre les fenetres sur clic d'icone
$(function() {
$('#clickMe2').click(function(event) {
   /*  var mytext = $('#myText').val(); */

/* ligne dorigine tres inteeressante qui affiche une var supplemenaire dans la page (mytext)
   $('<div id="dialog2">'+mytext+'</div>').appendTo('body');
 */

  $('<div id="dialog2"></div>').appendTo('body');
	event.preventDefault();

		 var dialog2Opts = {width:600, height:600, maxWidth: 800, maxHeight: 800, minWidth: 300, minHeight: 200,left: 100, top:10 ,autoOpen: true};
		 $( "#dialog2" ).dialog(dialog2Opts).dialogExtend({
        "closable" : true,
        "maximizable" : true,
        "minimizable" : true,
        "collapsable" : true,
        "dblclick" : "collapse",

        "minimizeLocation" : "right",

      });
    }); //close click
});

$(function() {
var dialogOpts = {width:400, height:400, maxWidth: 800, maxHeight: 800, minWidth: 300, minHeight: 200,left: 100, top:10 , autoOpen: false} ;
$( "#dialog2" ).dialog(dialogOpts).dialogExtend({
        "closable" : true,
        "maximizable" : true,
        "minimizable" : true,
        "collapsable" : true,
        "dblclick" : "collapse",

        "minimizeLocation" : "right",

      });
  });

   // Rends draggable les icones avec JQUERY
$(function() {
$( "#clickMe2" ).draggable();
});

essai.csv

paul;12345
pierre;45121
jacques ;467874

upload.php


<?php
$output_dir = "uploads/";
if(isset($_FILES["myfile"]))
{
	$ret = array();

//	This is for custom errors;
/*	$custom_error= array();
	$custom_error['jquery-upload-file-error']="File already exists";
	echo json_encode($custom_error);
	die();
*/
	$error =$_FILES["myfile"]["error"];
	//You need to handle  both cases
	//If Any browser does not support serializing of multiple files using FormData()
	if(!is_array($_FILES["myfile"]["name"])) //single file
	{
 	 	$fileName = $_FILES["myfile"]["name"];
 		move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$fileName);
    	$ret[]= $fileName;
	}
	else  //Multiple files, file[]
	{
	  $fileCount = count($_FILES["myfile"]["name"]);
	  for($i=0; $i < $fileCount; $i++)
	  {
	  	$fileName = $_FILES["myfile"]["name"][$i];
		move_uploaded_file($_FILES["myfile"]["tmp_name"][$i],$output_dir.$fileName);
	  	$ret[]= $fileName;
	  }

	}
    echo json_encode($ret);
 }
 ?>