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"}]


#bandieuhoacuanphuc, #baoduongdieuhoaanphuc, #ban_dieu_hoa_cu_an_phuc, #ha_tuan_khang, #lapdieuhoaanhuc, #muadieuhoacu, #seoconghuong, #signal_buiding, #suadieuhoaanphuc, #trendy, #user_is_king

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


Boucler avec Jquery $.each() sur un tableau d’objets Json

Introduction:

J’en avait marre de faire des boucles For en JS, alors je commence à utiliser $.each().

C’est pour boucler sur un tableau d’objets JSON . (Rappel : Un tableau [] contient des objets {} Json)

Exemple

La méthode JS suivante récupère son tableau d’objets Json de  listingCoursTotal.php, puis, dans sa fonction de rappel(callback) affiche chaque photo :


function listingCours(){
    $.ajax({
        type: "POST",
        url: "listingCoursTotal.php",
        dataType: "json",
        success: function (data) {
            $( "#vlc" ).dialog( "open" );//Ouvre la fenêtre
            $.each(data, function(i, item) {//Jquery $.each est l'équivalent d'une boucle foreach
                // Dans la ligne suivante, je demande d'afficher l'image de chaque objets{} du tableau d'objets json data, c'est une  boucle, et dans cette boucle, je peut récupérer toutes les données.
                $("#vlc_content").append('<img src="images/'+data[i].photo+'" title="'+data[i].photo+'" class="photographie">');
                });
        }
    });
};

On voit passer le tableau d’objets Json dans Firebug, il peut être énorme, mais c’est très rapide et performant:

each1

Le fichier listingCoursTotal.php qui génère ce fichier Json est celui-ci :

<?php
  
include('connexionSql.php');
connexionSql();
  
$lectureSql="select cours.idcours,cours.idsalle,cours.idliste,cours.datedebut,cours.datefin,cours.photo,cours.nom,cours.heure,salle.nom,professeur.nom,cours.jour,cours.idfrequence,cours.nbetudiantmax,cours.nbetudiantmin,cours.remarque,cours.adresse,cours.idcategcours,cours.idprofesseur,cours.idbatiment,cours.idorganisation,cours.idniveaurequis,cours.notedecours from cours left join salle on cours.idsalle=salle.idsalle left join professeur on cours.idprofesseur=professeur.idprofesseur ";
$lecture = mysql_query($lectureSql) or die(mysql_error());
 
while ($col=mysql_fetch_array($lecture)){
    $tabCours[]=array(
        "idcours"        =>$col[0],
        "idsalle"        =>$col[1],
        "idliste"        =>$col[2],
        "datedebut"      =>$col[3],
        "datefin"        =>$col[4],
        "photo"          =>$col[5],
        "nom"            =>$col[6],
        "heure"          =>$col[7],
        "salle"          =>$col[8],
        "professeur"     =>$col[9],
        "jour"           =>$col[10],
        "idfrequence"    =>$col[11],
        "nbetudiantmax"  =>$col[12],
        "nbetudiantmin"  =>$col[13],
        "remarque"       =>$col[14],
        "adresse"        =>$col[15],
        "idcategcours"   =>$col[16],
        "idprofesseur"   =>$col[17],
        "idbatiment"     =>$col[18],
        "idorganisation" =>$col[19],
        "idniveaurequis" =>$col[20],
        "notedecours"    =>$col[21]
        );
};

print_r(json_encode($tabCours)); // Affiche le tab au format Json pour que Jquery le récupère
exit();	 

Et voici le résultat dans Supercours, sans rechargement de page :

each2

Conclusion

Bien sur, dans la boucle, on ne charge pas que des photos, on peut charger des tas d’autres variables, et les insérer dans un $.load en html.

Encore une fois, à comparer avec Angular.js ng-repeat la semaine prochaine.

Manipuler Html avec $.load() et Json

Samedi 28 Février 2015

Introduction :

Voici ma méthode actuelle pour charger une page HTML dans une DIV, puis appliquer des variables dessus.

Cette méthode est celle qui après 8 mois d’expérience, m’apparait comme la plus facile.

A l’avenir, il faudra voir ce que peut faire Angular, car les méthodes de type ng-repeat m’ont l’air bien sympa.

A noter que cette méthode n’est pas tributaire d’un langage de query de donnée en particulier comme PHP ou JAVA ou Node.js.

 

Comment faire ?

Ordonnancement :

Phase 1. Exécuter $.ajax() pour récupérer un fichier JSON de données.

Phase 2. Dans la fonction de rappel de $.ajax(), charger la page HTML dans sa DIV à l’aide de $.load().

Phase 3.Dans la fonction de rappel(callback) de $.load(), appliquer les variables de Json dans le HTML de la phase 1 à l’aide de $.val()

 

Note : Les phases 1 et 2 sont inversibles.

Note 2 : C’est dans la fonction de rappel Ajax que l’on peut activer tout notre Javascript sur la page HTML.

 EXEMPLE

Voici une méthode qui charge un fichier JSON, puis affiche une page HTML, puis affiche des variables provenant du fichier JSON dans le DOM de la page html, dans des champs de type INPUT :

function modificationEtudiant(id){
	$.ajax({
		type: "POST", // Peut être du Get ou du Post
		data:$.param({'id':id}),			// Transmet une variable au fichier PHP, ça permet de préciser le query SQL sur la base de données.
		url: "listingEtudiantUnique.php", //Fichier Php sur lequel on pointe, il contient généralement une requête sql.
		dataType: "json",
		success: function (data) {// Voici la fonction et les instructions exécutée lorsque l'appel AJAX a été correctement effectuée. "data" contient le tableau d'objets JSON généré par le fichier PHP ou par JAVA
	 
			$( "#modifEtudiant" ).dialog( "open" );										// Ouvre la fenêtre de modif de l'utilisateur
			$("#modifEtudiant_content").empty(); 										// Supprime le contenu de la fenêtre
			$("#modifEtudiant_content").load('modificationEtudiant.html',function() { // Charge la page HTML puis injecte les données JSON dans sa fonction de rappel
				$("#tbt1").tabs(); 														// Activation des onglets
				$( "#datenaissance" ).datepicker({dateFormat: "yy-mm-dd"});				// Jquery Ui qui affiche les dates
				$( "#dateentree" ).datepicker({dateFormat: "yy-mm-dd"});
				$( "#datesortie" ).datepicker({dateFormat: "yy-mm-dd"});
				$("#prenom").val(data[0].prenom); 										// Injecte les données JSON dans le HTML
				$("#nom").val(data[0].nom); 											// Injecte la donnée JSON data[0].nom dans le champs input de type HTML ayant l'id "nom"
				$("#age").val(data[0].age);
				$("#pays").val(data[0].pays);
				$("#adresse").val(data[0].adresse);
				$("#paiement").val(data[0].paiement);
				$("#dateentree").val(data[0].dateentree);
				$("#datesortie").val(data[0].datesortie);
				$("#datenaissance").val(data[0].datenaissance);
				$("#imgmod1").attr("width", "500");
				$("#imagejo").append('<img src="images/'+data[0].photo+'" title="'+data[0].photo+'" class="photographie">');// remplace la photo du html initiale par la photo de l'objet json
				$("#retudiant").validationEngine();
			});
		};
	)};



Lorsqu’on exéctue ce code, on voit dans firebug le tableau d’objets JSON contenant les données passer, puis le fichier HTML se lancer :
cl2

 

Finalement, voici le résultat, et la fenêtre qui s’affiche avec les variables provenant de la base SQL directement dans le HTML, et cela sans rechargement de page :

cl

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