Exercice 17 : Création de la vue  » Pourcentages d’Evolutions  » de l’exercice 11 avec une boucle FOR.

Introduction

Il faut donc que l’utilisateur de l’exercice 11(Commandis) soit capable de visualiser les Pourcentages d’évolution du prix d’un objet quelconque en tapant sa référence. (Il est aidé pour cela par un JQUERY AUTOCOMPLETE, lorsqu’il tape dans le champs.). Il doit aussi visualiser la date de changement du pourcentage d’évolution du prix dans le graphe qui va se générer. Comme d’hab, il s’agit d’un pseudo MVC avec AJAX->VUE->GENEREJSON-GENEREGRAPHE

Ma méthode pour y arriver :

Tout d’abord, je lis le théorème des pourcentages d’évolution dans un livre de PREBABAC 1ère ES de Nathan Copyright 2008:

maths1

Ensuite, vu qu’il n’y a pas d’UML2.0, je pense les variables mathématiques dans le contexte de l’exercice 11, un peu à l' »arrache ». Comme d’hab, faut remplacer les var mathématiques par des vars « informatiques »… La difficulté ici, est que nous n’avons pas qu’un seul pourcentage d’évolution à calculer, mais un tableau …D’ou l’idée de la boucle For.

L' »ordonnancement » du traitement dans la vue sera donc celui-ci (J’ai choisi cela) :

1. Une Requête SQL en Lecture sous le critère référence de l’objet, qui va donc chercher tous les prix d’un objet puis les trie par date.

2. Création de 3 tableaux
-Les dates
-les Prix
-Et une copie du tableau prix.
Ceux ci sont en quelque sorte « synchronisés  » de par leur ids qui sont identiques, ce qui va permettre de réassembler le tableau des dates et celui des pourcentages $Pe qui aura été généré.

3. L’idée est d’avoir 2 tableaux des prix identiques afin de pouvoir traiter à l’aide d’une boucle for les variables PRIX  » de départ » et PRIX « d’arrivée ». Ensuite, je crée mon pourcentage et l’injecte dans un nouveau tableau de pourcentage $Pe dans la boucle for qui sera ensuite collé à mon tableau de date $tabDates. C’est la solution que j’ai trouvé. L’index du prix dans ma première boucle for sera $x, et je vais me servir de cet index de cette façon $x-1 ou $x+1 afin de me déplacer dans mon tableau pour faire les calculs conformément au théorème du livre prépabac puis les injecter dans $Pe.

4. Au final, le tableau $tabF qui comprends les dates et les pourcentages est converti au format JSON et nous obtenons une vue très importante suceptible d’être utilisée dans un Graphe !
En l’occurrence, c’est JQPLOT qui va devoir être également paramétré pour les dates et les pourcentages(C’est assez difficile).

Le code :

C’est une vue, il n’y a donc qu’un fichier:
afficherPourcentages.php

<?php
include('connexionSql.php');
indique que le type de la réponse renvoyée au client sera du Texte
header(&quot;Content-Type: text/plain&quot;);
//anti Cache pour HTTP/1.1
header(&quot;Cache-Control: no-cache , private&quot;);
//anti Cache pour HTTP/1.0
header(&quot;Pragma: no-cache&quot;);

// Transmission des var qui arrivent en mode get en variables classique PHP
$referenceP= $_GET['referenceP'];

connexionSql();
$lectureSql=&quot;Select date,prix from livraison where reference like ".$referenceP." order by livraison.date;&quot;;
$lecture = mysql_query($lectureSql) or die(mysql_error());

/* REQUETE SQL pour GRAPHE 1 */
/* POURCENTAGE DEVOLUTION DES PRIX PAR DATES*/
/* -----------------------------------------------------------------------------------------------------	 */	
while ($col=mysql_fetch_array($lecture)){
		$col[prix]=intval($col[prix]); 
		$tabPrix[] = $col[prix];
		$tabDates[] = $col['date'];
		$tabCopie[]=$col[prix];
}
/* -------------------------------------------------------------------------------------------------------- */

 // CALCUL ET POSITIONNEMENT DES POURCENTAGES D EVOLUTION des prix dans le tableau $Pe
for ($x=0;$x<sizeof($tabPrix);$x++){
	$Pe[$x]=$tabCopie[$x+1]-$tabPrix[$x];// IDEM LIVRE MATHSPREPABAC
	$Pe[$x]=$Pe[$x]/$tabPrix[$x]*100; // FORMULE DU LIVRE PREPABAC
	};

// ENLEVE LE DERNIER POURCENTAGE DU TABLEAU PE QUI EST forcement a zero et ne sert à rien
$size=sizeof($Pe)-1;
unset($Pe[$size]);

// INJECTION DES POURCENTAGES DEVOLUTION DANS LE TABLEAU DES DATES
for ($z=0;$z<sizeof($Pe);$z++){
	$tabF[]=array($tabDates[$z+1],$Pe[$z]);
	}

echo json_encode($tabF);

Voici les données JSON générées, Je n’ai pas encore arrondi les pourcentages à x.xx%, parce que certains moteurs de graphes le font par défaut. On voit donc que le 17 Septembre 2014, prix de notre article a bondi de 175.9 pour cent:

[["2014-09-17",175.86206896552],["2014-09-17",400],["2014-09-17",5.2],["2014-09-20",-87.690114068441],["2014-09-20",33.204633204633]]

Pour contrôle, on voit bien que ces pourcentages d’évolution correspondent bien aux données de PRIX de la requête SQL concernant l’article de référence gh2012 :

exercice17-1

Note : Ces données ne sont pas réalistes, car généralement, le prix d’un article ne peux bondir de 400 pour cent en une journée, ce qui nous donne des pourcentages d’évolution grotesques du style +400% ou -87.7% …

Note:
Jqplot a besoin de placer ces donnnées entre deux crochets additionels, ce qui donne (J’lai pas encore fait dans le code):

[[["2014-09-17",175.86206896552],["2014-09-17",400],["2014-09-17",5.2],["2014-09-20",-87.690114068441],["2014-09-20",33.204633204633]]]

Exercice 16 : Créer des objets Javascript sur appel Jquery Ajax.

Introduction :

Dans cet exercice, je crée deux objets Javascripts, EMPLOYE et EMPLOYEUR, qui ont des sous fonctions qui permettent de les imprimer à l’écran (Très basiquement, pour faire court pour l’instant..)

L’acquisition des variables est soumise à un critère ID, puis se fait sur un fichier JSON qui aura été généré au préalable à l’aide d’une requête SQL, puis affiché à l’aide d’un langage quelconque (Php en l’occurence, mais ça aurait pu être du JAVA ou fait avec NODE.JS.).

L’acquisition et le parsing des variables du fichier JSON est faite à l’aide de la fameuse fonction Jquery $.ajax. cela se passe dans la fonction success: (de rappel ).

Ordonnancement :

Appel AJAX ->
Requête SQL ->
Conversion en JSON ->
Récupération et Parsing des Variables ->

Injection dans les objets Javascript ->
Affichage des objets Javascript.

Le code :

Index.html : Ne sert qu’à charger la lib jquery ;

<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
<head>
<!-- -----------------------------------------------DEBUT DU CHARGEMENTDES LIBRAIRIES------------------------ -->
		<!--	APPEL LIB JQUERY -->
		<script	 type="text/javascript" src="librairies/jquery.js"></script>

		<!--	CSS DU PROGRAMME -->
		<link rel="stylesheet" type="text/css" href="style.css" />
		
		<!-- Fonction Machine-->
		<script src="fonctionsMachines.js" language="javascript"></script>

<!-- ----------------------------------------------FIN DU CHARGEMENT DES LIBRAIRIES------------------------ -->
</head>
<html> 
<body>

</body>
</html>

fonctionsMachines.js : Le moteur qui va chercher les données JSON puis les injecter dans les objets …


/* CONSTRUCTEUR DE L'OBJET "EMPLOYE" */
function Employe(txtNom,txtPrenom,txtAge,txtDateNaissance,txtEmploi,txtSalaire,objEmployeur){
	this.nom=txtNom;
	this.prenom=txtPrenom;
	this.age=txtAge;
	this.datenaissance=txtDateNaissance;
	this.emploi=txtEmploi;
	this.salaire=txtSalaire;
	this.print=affEmploye;
	this.employeur=objEmployeur;
}

/* Fonction additionnelle de l'objet EMPLOYE qui affiche  les données */
function affEmploye(){
	document.write("Cet employé s'appelle ",this.prenom," ",this.nom," Il a  ",this.age," ans, son emploi :  ",this.emploi," son salaire est :",this.salaire," son employeur est :  <br/>");
	this.employeur.print();
}

/* CONSTRUCTEUR DUN OBJET SECONDAIRE  : EMPLOYEUR; CELUI-CI SERA IMBRIQUE AU PREMIER*/
function Employeur(txtNom,txtAdresse){
	this.nom=txtNom;
	this.adresse=txtAdresse;
	this.print=affEmployeur;
}
function affEmployeur(){
	document.write(this.nom," est a l'adresse ",this.adresse,".<br/>");
}

/* var id = 2; FACULTATIF Cet Id sera récupéré par le biais d'un formulaire ... */

/* CREATION DOBJET JAVASCRIPTS A PARTIR DE FICHIERS JSON */
/* PHASE 1 LECTURE EN BDD ET RECUPERATION DE VARIABLES AU FORMAT JSON */
$.ajax({
    type: "POST",
    url: "lectureBdd.php",
   /*  data: 'id=' + userid,  On peut transmettre l'id au fichier PHP pour choisir la personne appropriée dans la BDD... */
    dataType: "json", // Set the data type so jQuery can parse it for you
    success: function (data) {
							
							/* PHASE 2 CREATION DOBJETS JAVASCRIPT AVEC LES VAR PROVENANT DU FICHIER JSON */
							var employeur1 = new Employeur(data[7],data[8]);
							var employe1= new Employe(data[0],data[1],data[2],data[3],data[4],data[5],employeur1); 
							
							/* PHASE 3  AFFICHAGE DOBJETS AVEC LA METHODE PRINT DE LOBJET EMPLOYE */
							employe1.print();
							
							/*  document.getElementById("nom").innerHTML = data[0]; Autre solution pour remplir directement la page en HTML. */
    }
});




/* FACULTATIF : EXEMPLE DE CREATION DOBJETS IMBRIQUES MANUELLE REMARQUER LOBJET SECONDAIRE CITE EN DERNIERE POSITION   */
/* var employeur1 = new Employeur("BP","12 rue de Lilas 75016 Paris");
var employeur2 = new Employeur("Shell","44 Avenue de Picpus 75015 Paris");
var employe1= new Employe("Dupont","Nicolas","35","03021980","ingenieur","350000",employeur1);
var employe2= new Employe("Durant","philbert","40","03021976","employé","320000",employeur2);  */


lectureBdd.php qui retourne un tableau qui sera converti au format JSON, je n’ai pas mis la requête SQL cela ne sert à rien …

<?php
// Ce tableau est censé être le résultat d'une requête SQL ** sur deux tables différentes** :
$employe = array();
$employe[0] = "Dupont";
$employe[1] = "Pierre";
$employe[2] = "42";
$employe[3] = "03021973";
$employe[4] = "Ingenieur";
$employe[5] = "42003";
$employe[6] = "employeur1";
$employe[7] = "BP";
$employe[8] = "12 rue de Lilas 75016 Paris";

// On encode en JSON,le format compréhensible par Javascript et par d'autres langages...
echo json_encode($employe);
exit();


// Autre méthode de création de tableaux possible ...
/* 'nom'=>"Dupont",
'prenom'=>"Pierre" */

lectureBdd.php retourne les données Json suivantes directement à l’écran:

["Dupont","Pierre","42","03021973","Ingenieur","42003","employeur1","BP","12 rue de Lilas 75016 Paris"]

Finalement, l’aspect HTML du résultat est celui-ci :

Cet employé s'appelle Pierre Dupont Il a 42 ans, son emploi : Ingenieur son salaire est :42003 son employeur est :
BP est a l'adresse 12 rue de Lilas 75016 Paris.

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

Truc 2 : Lire un fichier JSON à intervalles régulières avec JQuery

 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script  type="text/javascript" src="jquery.min.js"></script>
  </head>
 <script>
<!-- relancer une lecture json a intervalles régulières.
 setInterval('getPos()', 5000) 
 window.onload = function(){setInterval('getPos()',5000)};
 
  function getPos() {
 $.getJSON( "testjson.txt", function( json ) {
  document.write( "donnees  "+json);
 });
 }
 getPos();

 </script>
 
 
 
 

Truc 1 : Transférer une variable PHP dans une variable Javascript.

Introduction :

il faut déjà savoir transférer une variable Php dans une variable Javascript


 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script  type="text/javascript" src="jquery.min.js"></script>
  </head>
 

<?php
// Créer la variable PHP
$message = "Message";
?>

<script type="text/javascript">
<!-- Récupérer la variable PHP dans une Var Javascript
	var msg='<?PHP echo $message;?>';
	document.write(msg);
</script>

Bon article pour récupérer un fichier JSON avec PHP

Voici le Lien : 

http://www.actualitix.com/utiliser-manipuler-fichier-json-php.html

Générer un fichier JSON avec PHP

Intro:

Ajax a souvent besoin d’un fichier JSON pour générer des choses, comme par exemple un tableau ou un graphe :

Comment faire (Modif de l’article en cours…):

ca copie le tableau dans un fichier test.txt pour etre récupéré par jqplot, ajouter une connexion bdd et c’est bon !!!

</pre>
<?

$tableau=array(250,25,45,5);
 $tabenc=json_encode($tableau);
 echo '['.$tabenc.']';
 //$var=urlencode(serialize($tableau));
 //echo getcwd();
 $fp=fopen('testjson.txt','w');
 if ($fp==false)
 {echo 'echec';

}
 else
 {
 fputs($fp,'['.$tabenc.']');
 fclose($fp);
 }
<pre>