Web Dynamique PHP – AJAX Master 1 informatique 2009 – 2010 P.-A. Bisgambiglia

Présentation au sujet: "Web Dynamique PHP – AJAX Master 1 informatique 2009 – 2010 P.-A. Bisgambiglia"— Transcription de la présentation:

1 http://www.ent-montecristo.org/paul-antoine2.bisgambiglia Web Dynamique PHP – AJAX Master 1 informatique 2009 – 2010 P.-A. Bisgambiglia bisgambiglia@univ-corse.frbisgambiglia@univ-corse.fr S2M1 Web Dynamique bisgambiglia@univ-corse.fr

2 AJAX2bisgambiglia@univ-corse.fr Maîtrise des technologies liées au WEB HTML XML CSS JavaScript PHP AJaX Création de pages WEB dynamiques Objectifs

3 AJAX3bisgambiglia@univ-corse.fr 12 heures de cours Rappels (HTML, CSS, JavaScript, PHP) Bases d’Ajax Fonctionnement Exercices 12 de TD Exercices pratiques Réalisation de pages web dynamiques Planning

4 AJAX4bisgambiglia@univ-corse.fr Bilan Architectures Client / serveur 1 Internet clientserveur Requête Http Page HTML Interprétation html par le navigateur HTML Client / serveur 2 + js Internet clientserveur Requête Http Page HTML + js Interprétation html et js par le navigateur HTML+js JS Client / serveur 3 PHP Internet clientserveur Requête Http Page HTML générée avec php Interprétation html par le navigateur PHP

5 AJAX5bisgambiglia@univ-corse.fr Bilan Architectures Client / serveur 4 PHP + BD Internet clientserveur Requête Http Page HTML générée avec php Interprétation html par le navigateur PHP Client / serveur 5 Web 2.0 Internet clientserveur Requête Http Page HTML générée avec php Interprétation html par le navigateur PHP BD Echange HTTP asynchrone (AjAX) BD

6 AJAX6bisgambiglia@univ-corse.fr Bilan Flash couplé avec Flex (Plug-in) Java avec Java Web Start (client lourd) ASP.NET (serveur spécifique) => toutes ses technologies nécessitent des ajouts AJAX ne nécessite aucun plug-in pour fonctionner Autres technologies

7 AJAX7bisgambiglia@univ-corse.fr Sommaire 1. Introduction 2. Les principes d’Internet 3. Les langages du web 4. Le web 2.0 5. JavaScript 6. Ajax 7. Conclusion 8. PHP

8 AJAX8bisgambiglia@univ-corse.fr Sommaire

9 AJAX9bisgambiglia@univ-corse.fr Sommaire 1. Introduction 2. Les principes d’Internet 3. Les langages du web 4. Le web 2.0 5. JavaScript 6. PHP 7. XML 8. Ajax 9. Conclusion

10 AJAX10bisgambiglia@univ-corse.fr AJAX Actualisation d’information en tâche de fond; Complétion automatique Contrôle en temps réel des données d’un formulaire; Navigation dynamique; Lecture de flux RSS; Sauvegarde de documents éditables; Personnalisation d’interface Web; Wigjet; Chargement progressif d’information; Pourquoi faire

11 AJAX11bisgambiglia@univ-corse.fr AJAX Google suggest Gmail Google Maps Yahoo! News A9.com Google Calendar Netvibes Google Talk Wikipédia AJAX sur le web !

12 AJAX12bisgambiglia@univ-corse.fr AJAX Terme employé pour la 1ère fois par Jesse James GARRETT dans un article devenu célèbre intitulé A new Approach to Web Applications, en 2005 ; AJAX : Asynchronous JavaScript and XML (JavaScript et XML asynchrones) ; BUT : créer des interfaces réactives et ergonomiques. Historique

13 AJAX13bisgambiglia@univ-corse.fr AJAX AJAX est un acronyme signifiant Asynchronous JavaScript and XML Permet d'appeler des données depuis un client Web sur un serveur en asynchrone AJAX nécessite une architecture client/serveur Web Composants conformes aux standards du W3C. Définition

14 AJAX14bisgambiglia@univ-corse.fr AJAX AJAX est une façon d’utiliser intelligemment plusieurs technologies préexistantes : Une présentation sur des standards utilisant HTML et CSS ; Un affichage dynamique et une interaction utilisant le Modèle Objet Document (DOM) ; L’échange de données et leur manipulation en utilisant XML et XSLT ; La récupération asynchrone de données en utilisant XMLHttpRequest ; Le langage de scripts JavaScript pour lier le tout ensemble. Définition

15 AJAX15bisgambiglia@univ-corse.fr AJAX AJAX n'est pas une technologie mais l'utilisation conjointe d'un ensemble de technologies HTML (ou XHTML) pour la structure sémantique des informations ; CSS ou XSL pour la présentation des informations ; DOM et Javascript pour afficher et interagir dynamiquement avec l'information présentée ; l'objet XMLHttpRequest pour échanger et manipuler les données de manière asynchrone avec le serveur Web. XML pour le transfert de données Définition

16 AJAX16bisgambiglia@univ-corse.fr AJAX AJAX est le mélange de différentes technologies (Java Script, XML, PHP, HTML…) Son utilisation est de plus en plus répandue sur le net Bilan définition

17 AJAX17bisgambiglia@univ-corse.fr AJAX évènement Client (navigateur) Page web avec appli. AJAX Interface utilisateur xHTML JS(gestionnaired’évènement)CSS (mise en forme) DOM(manipulation de la structure ) Moteur ajax Objet XMLHttpRequest Serveur web Programme PHP Serveur BD Base de Données MySQL Serveur Echange HTTP asynchrone (text,xml, json) (text,xml, json)

18 AJAX18bisgambiglia@univ-corse.fr AJAX Exemple d’une procédure de paiement en ligne. Elle est souvent décomposée en plusieurs pages web : 1. Une pour rentrer nos coordonnées postales 2. Une pour valider notre commande 3. Une pour saisir nos coordonnées bancaires 4. Une dernière pour valider définitivement Avec AJAX, l’idée serait de se dire : pourquoi faire 4 pages nécessitant 4 rechargements alors que seule une partie de la page a besoin d’être rechargée ? En pratique

19 AJAX19bisgambiglia@univ-corse.fr AJAX Rappel Architecture trois-tiers : fonctionnement Serveur MySQL Serveur HTTP Client Web (navigateur) Page Web Requête http PHPPHP Requête SQL Réponse SQL

20 AJAX20bisgambiglia@univ-corse.fr AJAX Page Web comprenant la technologie AJaX fonctionnement NAVIGATEURNAVIGATEUR SERVEUR Web PHPPHP BD Interpréteur JAVA script Requête http Requête SQL Réponse SQL HTML +JS XML Requêtes HTTP(tâche de fond)

21 AJAX21bisgambiglia@univ-corse.fr AJAX Récupérer uniquement les données nécessaires via HTTP XMLHttpRequest Requêtes peuvent être « asynchrones » Applications plus réactives, la quantité de données échangées entre le navigateur et le serveur HTTP étant fortement réduite Chargement de la première page peut être pénalisé si l'application utilise une bibliothèque AJAX volumineuse fonctionnement

22 AJAX22bisgambiglia@univ-corse.fr AJAX fonctionnement

23 AJAX23bisgambiglia@univ-corse.fr AJAX fonctionnement

24 AJAX24bisgambiglia@univ-corse.fr AJAX AJAX et la transmission de données asynchrones Comparaison avec le modèle d’application web classique ; Transmission de données asynchrones

25 AJAX25bisgambiglia@univ-corse.fr AJAX Introduction d’un médiateur entre le client et le serveur : le moteur AJAX ; Il se charge du rendu de l’interface, de la communication avec le serveur et de toute réponse à une action de l’utilisateur qui ne requiert pas un transport avec le serveur ; Il permet une interaction avec l’utilisateur de manière asynchrone. Transmission de données asynchrones

26 AJAX26bisgambiglia@univ-corse.fr AJAX Le paramètre method de l'élément HTML et le premier paramètre de la méthode open de l'objet XMLHttpRequest: GET ou POST: Spécifient de façon précise la façon dont les données fournies par l'utilisateur doivent être transmise et traité par le serveur via HTTP. HTTP est un protocole sans état orienté transaction: Pour chaque requête émise par un client, une réponse est générée par le serveur (1 cycle). Dans le cas d'un envoie d'une demande de données au serveur avec AJAX un autre cycle requête-réponse à lieu. Les en-têtes HTTP (en-tête de requête et en-tête de réponse) sont transmis en tant que variables d'environement. Transfert de données avec HTTP

27 AJAX27bisgambiglia@univ-corse.fr AJAX Avant la transmission au serveur, les données sont empaquetées par le navigateur sous la forme d'une chaîne de caractères. La manière dont elles doivent être traitées ensuite est contrôlé par : le paramètre method pour un formulaire ou, par le premier paramètre de la méthode open() de XMLHttpRequest. objRequete.open('get','lander.php?ou='+i,true); Les URL contenant ces variables sont soumises à un processus de codage qui interviens lors de l'envoie de formulaire. Lorsque les données sont envoyé par la méthode open(), vous devez réaliser vous même ce codage (par l'emploie de la fonction JavaScript espace). Transfert de données avec HTTP

28 AJAX28bisgambiglia@univ-corse.fr AJAX GET est utilisé dans la plupart des cas: Les données sont associées à l'aide du symbole: ? Les données envoyés sont visibles dans la barre d'adresse: Longueur max. de l'adresse URL: Méthode inappropriée pour transmettre d'importante quantités de données. POST convient pour toutes les actions impliquant d'accéder à une base de données. Les données n'apparaissent pas dans la barre d'adresse. Les données sont placées dans une variables d'environnement insérée dans le corps de la requête HTTP. GET n'est pas plus sur que POST: mais utilisé pour les signets (évite de refaire la recherche). Transfert de données avec HTTP

29 AJAX29bisgambiglia@univ-corse.fr AJAX L'objet XMLHttpRequest Permet de contrôler les transactions HTTP au moyen de langages de programmation coté client (principalement JavaScript). Pour supporter la communication asynchrone entre navigateur et serveur, il autorise: L'enregistrement de fonctions de rappel: invoquées pour chaque changement d'état transactionnel. L'accès à tous les champs d'en-tête (requête et réponse). Il fournit toutes les méthodes et propriétés pour une communication asynchrone. Transfert de données avec HTTP

30 AJAX30bisgambiglia@univ-corse.fr AJAX L'objet XMLHttpRequest Attention: Pour des raison de sécurité, les requêtes Ajax doivent normalement demander des données issues du même domaine que la page d'origine. Exemple: Si l'URL de la page est http://rjs.fr/ajax.html celle de la requête doit être http://rjs.fr/ajax.phphttp://rjs.fr/ajax.htmlhttp://rjs.fr/ajax.php Ce principe peut être désactivé dans Mozilla FireFox pour pouvoir obtenir des données d'un autre domaine (accès interdomaine). « about:config » dans l'URL de FireFox et modification de l'entrée signed.applets.codebase_principal_support à true. Transfert de données avec HTTP

31 AJAX31bisgambiglia@univ-corse.fr AJAX Quelques méthodes de l'objet XMLHttpRequest abort(): Annule la requête. getAllResponseHeaders(): retourne dans une chaîne les champs d'en-tête envoyés par le serveur. getResponseHeader(''intituléChamp''): Retourne dans une chaîne le champs d'en-tête spécifié. open(''méthode'', ''URL'' [,asyncflag[,''nomutilisateur''[,''motPasse'']]]): ouvre une liaison avec le serveur. send(contenu): Envoie la requête. setRequestHeader(''intitulé'',''valeur''): sert à définir des champs individuels. setMimeType(''typeminme''): spécifie le type MIME des données demandées. Transfert de données avec HTTP

32 AJAX32bisgambiglia@univ-corse.fr AJAX Quelques méthodes de l'objet XMLHttpRequest onreadystatechange: Désigne un gestionnaire d'événement qui sera invoqué chaque fois que l'état de la liaison (readystate) de l'objet XMLHttpRequest changera. readyState: indique l'état de la transaction: 0 (UNINITIALIZED): objet pas encore initialisé (méthode open() pas encore appelée) 1 (LOADING): objet a été crée et initialisé mais aucune requête n'a encore été envoyée par send(). 2 (LOADED): la requête a été envoyée et l'en-tête peut être évaluée. 3 (INTERACTIVE): La réponse de serveur a été reçue. Les données sont contenues dans responseText ou responseXML. 4 (COMPLETED): communication avec le serveur terminée. Transfert de données avec HTTP

33 AJAX33bisgambiglia@univ-corse.fr AJAX Quelques méthodes de l'objet XMLHttpRequest responseText: contient sous forme de texte les données reçues du serveur. responseXML: contient sous forme XML les données reçues du serveur. Si elles n'ont pas été envoyées sous cette forme la réponse st null. status: contient sous forme numérique l'état HTTP de la liaison. statusText: contient sous forme textuelle l'état HTTP de la liaison, si cette information a été transmise. Transfert de données avec HTTP

34 AJAX34bisgambiglia@univ-corse.fr AJAX Exemple de requête Ajax Démarche: 1. Création d'un objet XMLHttpRequest. 2. Enregistrement d'une fonction de rappel dans l'objet. (objReuqete.onreadystatechange = traiteReponse;) 3. Ouverture de la liaison avec open() (objRequete.open('get','http1.php',true);) 4. Transmission de la requête au moyen de send() (objReuqete.send(null);) 5. Utilisation de la réponse. Transfert de données avec HTTP

35 AJAX35bisgambiglia@univ-corse.fr AJAX Afin de réaliser une page contenant la technologie Ajax, il nous faut réaliser trois documents: Une page en HTML Un script en Java Script Un script en PHP qui répondra au Java Script Applications

36 AJAX36bisgambiglia@univ-corse.fr AJAX Un exemple concret Création d'un formulaire qui permet à un utilisateur de sélectionner un des lander d'Allemagne et d'obtenir une information complémentaire le concernant. Cette information ne doit toutefois être demandée au serveur que lorsque l'utilisateur aura fait un choix en cliquant sur une option. Applications

37 AJAX37bisgambiglia@univ-corse.fr AJAX La page HTML écrite en XHTML: ma première page en AJAX Server wants to know your name: Là où monscript.js va écrire son contenu Insertion de monscript.js Déclanchement du traitement de mon script.js Applications : HTML

38 AJAX38bisgambiglia@univ-corse.fr AJAX Mon script PHP: <?php header('Content-Type: text/xml'); echo ' '; $name = $_GET['name']; $userNames = array('CHRISTIAN', ‘MARC', ‘PHILIP', 'MICHEL', ‘JACQUES’); if (in_array(strtoupper($name), $userNames)) echo ‘bonjour, '. htmlentities($name). '!'; else if (trim($name) == '') echo ‘dites moi qui vous êtes!'; else echo htmlentities($name). ', je ne vous connais pas!'; echo ' '; ?> On renvoie du XML Ecriture de l’entête XML Puis génération du contenu: Ma réponse Applications : PHP

39 AJAX39bisgambiglia@univ-corse.fr AJAX var xmlHttp = createXmlHttpRequestObject(); // récupère la référence à l’objet XMLHttpRequest function createXmlHttpRequestObject() { // crée l’objet XMLHttpRequest var xmlHttp; // objet XMLHttpRequest temporaire if(window.ActiveXObject){ // si sous Internet Explorer try{ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch (e) { xmlHttp = false; } } else { // si c’est Mozilla ou un autre browser try { xmlHttp = new XMLHttpRequest(); }catch (e) { xmlHttp = false; } // affiche un message d’erreur ou l’objet créé if (!xmlHttp) alert("Error creating the XMLHttpRequest object."); else return xmlHttp; } Applications : java script

40 AJAX40bisgambiglia@univ-corse.fr AJAX function process(){ // utilise XMLHttpRequest pour requête HTTP asynchrone if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) { // si pas occupé name = encodeURIComponent(document.getElementById("myName").value); // récupération de la valeur du champ myName xmlHttp.open("GET", « monscript.php?name=" + name, true); // se prépare à exécuter monscript.php sur le serveur xmlHttp.onreadystatechange = handleServerResponse; // défini l’action a exécuter lors de la réception de la réponse xmlHttp.send(null); // lance la requête sur le serveur } else setTimeout('process()', 1000); // si occupé réessaie dans une seconde } Applications : java script

41 AJAX41bisgambiglia@univ-corse.fr AJAX function handleServerResponse() { // exécuté quand le serveur répond if (xmlHttp.readyState == 4) { // si la transaction est finie if (xmlHttp.status == 200) { // si fini comme il faut xmlResponse = xmlHttp.responseXML; // extrait le code XML reçu xmlDocumentElement = xmlResponse.documentElement; // obtient la racine du document XML helloMessage = xmlDocumentElement.firstChild.data; // récupère le texte contenu dans le premier sous-element de la racine XML document.getElementById("divMessage").innerHTML = ' ' + helloMessage + ' '; // met à jour l’élément divMessage avec le texte récupéré setTimeout('process()', 1000); // relance la séquence }else { // status différent de 200 = erreur alert("There was a problem accessing the server: " + xmlHttp.statusText); } Applications : java script

42 AJAX42bisgambiglia@univ-corse.fr AJAX Viamichelin.fr ; Gmail (messagerie électronique de Google) ; Google Maps ; Google Suggests ; A9.com (moteur de recherche d’Amazon). Exemples d’applications

43 AJAX43bisgambiglia@univ-corse.fr AJAX Fichier HTML pour un formulaire (lander.html) Un exemple concret 1 2 3 4 5 6 7 Dans quel land habitez-vous ? 8 9 Bade-Wurtemberg 10 Bavière 11 Berlin 12 Brandebourg 13 Brême 14 Hambourg 15 Hesse 16 Mecklembourg-Poméranie 17 19 20 21 22 23

44 AJAX44bisgambiglia@univ-corse.fr AJAX Fichier JavaScript externe (lander.js) Un exemple concret 1 var objRequete; 2 3 if (navigator.appName.search("Microsoft") > -1){ 4 objRequete = new ActiveXObject("MSXML2.XMLHTTP"); 5 }else{ 6 objRequete = new XMLHttpRequest(); 7 } 8 9 function envReq() { 10 for (i=1;i<=8; i++) { 11 if (this.document.f.bundesland.options[i-1].selected){ 12 objRequete.open('get','lander.php?ou='+i,true); 13 objRequete.onreadystatechange = traiteReponse; 14 objRequete.send(null); 15 break; 16 } 17 } 18} 19 function traiteReponse() { 20 if(objRequete.readyState == 4) { 21 document.getElementById("capitale").innerHTML= objRequete.responseText; }}

45 AJAX45bisgambiglia@univ-corse.fr AJAX Coté serveur (lander.php) Un exemple concret 1 <? 2 echo "La capitale de ce land est "; 3 4 switch($_REQUEST['ou']){ 5 6 case 1: echo "Stuttgart"; break; 7 case 2: echo "Munich"; break; 8 case 3: echo "Berlin"; break; 9 case 4: echo "Potsdam"; break; 10 case 5: echo "Brême"; break; 11 case 6: echo "Hambourg"; break; 12 case 7: echo "Wiesbaden"; break; 13 case 8: echo "Schwerin"; break; 14 } 15 ?>

46 AJAX46bisgambiglia@univ-corse.fr AJAX Alternative pour créer la liste de formulaire (pas dans IE !) Un exemple concret

47 AJAX47bisgambiglia@univ-corse.fr AJAX Exercices : Modifiez le programme en exemple de manière qu'il propose à l'utilisateur une liste de noms d'images et charge dynamiquement l'image sélectionnée en l'intégrant à la page Proposer une liste avec deux entrées, où l'utilisateur pourrait choisir un jour de la semaine de travail (cinq jours) ou de la semaine complète (sept jours). Après sa sélection, afficher une autre liste comportant les jours de la semaines choisies: du lundi au vendredi ou du lundi au dimanche. Extensions et variations

48 AJAX48bisgambiglia@univ-corse.fr AJAX Ecrire dans un document: document.write(‘’test’’); Manipuler des balises: function process() { var string; string = " " + " Black " + " Orange " + " Pink " + " "; // obtenir une référence à l’élément de ma page appelé « myDivElement » myDiv = document.getElementById("myDivElement"); // ajouter le texte dans mon élément div myDiv.innerHTML = string; } Black Orange Pink DOM: manipuler des balises en java script

49 AJAX49bisgambiglia@univ-corse.fr AJAX // créer un element UL oUl = document.createElement("ul") //crée la ligne black oLiBlack = document.createElement("li"); oBlack = document.createTextNode("Black"); oLiBlack.appendChild(oBlack); //crée la seconde ligne oLiOrange = document.createElement("li"); oOrange = document.createTextNode("Orange"); oLiOrange.appendChild(oOrange); // crée la troisième ligne oLiPink = document.createElement("li"); oPink = document.createTextNode("Pink"); oLiPink.appendChild(oPink); // ajoute les a l’élément oUl.appendChild(oLiBlack); oUl.appendChild(oLiOrange); oUl.appendChild(oLiPink); Black Orange Pink // récupère la référence du sur la page myDiv = document.getElementById("myDivElement"); // ajoute le contenu au myDiv.appendChild(oUl); DOM: manipuler des balises en java script

50 AJAX50bisgambiglia@univ-corse.fr AJAX function handleServerResponse() { // read the message from the server var xmlResponse = xmlHttp.responseXML; // obtain the XML's document element xmlRoot = xmlResponse.documentElement; // obtain arrays with book titles and ISBNs titleArray = xmlRoot.getElementsByTagName("title"); isbnArray = xmlRoot.getElementsByTagName("isbn"); // generate HTML output var html = ""; // iterate through the arrays and create an HTML structure for (var i=0; i<titleArray.length; i++) html += titleArray.item(i).firstChild.data + ", " + isbnArray.item(i).firstChild.data + " "; // obtain a reference to the element on the page myDiv = document.getElementById("myDivElement"); // display the HTML output myDiv.innerHTML = "Server says: " + html; } Building Reponsive Web Applications with AJAX and PHP Beginning PHP 5 and MySQL E-Commerce: From Novice to Professional <?xml version="1.0" encoding="UTF-8« standalone="yes" ?> - Building Reponsive Web Applications with AJAX and PHP 1-904811-82-5 - Beginning PHP 5 and MySQL E-Commerce: From Novice to Professional 1-59059-392-8 1-904811-82-5 1-59059-392-8 XML par le DOM JavaScript

51 AJAX51bisgambiglia@univ-corse.fr AJAX <?php // set the output content type as xml header('Content-Type: text/xml'); // create the new XML document $dom = new DOMDocument(); // create the root element $response = $dom->createElement('response'); $dom->appendChild($response); // create the element and append it as a child of $books = $dom->createElement('books'); $response->appendChild($books); // create the title element for the book $title = $dom->createElement('title'); $titleText = $dom->createTextNode ('Building Reponsive Web Applications with AJAX and PHP'); $title->appendChild($titleText); // create the isbn element for the book $isbn = $dom->createElement('isbn'); $isbnText = $dom->createTextNode('1-904811-82- 5'); $isbn->appendChild($isbnText); // create the element $book = $dom->createElement('book'); $book->appendChild($title); $book->appendChild($isbn); // append as a child of $books->appendChild($book); // build the XML structure in a string variable $xmlString = $dom->saveXML(); // output the XML string echo $xmlString; ?> DOM en PHP

52 AJAX52bisgambiglia@univ-corse.fr AJAX Réalisez une page ajax faisant effectuer une addition de deux champs au serveur Exemple: 11 += 2 Généré par le serveur en php et affiché par java script Exercice

53 AJAX53bisgambiglia@univ-corse.fr <?php header('Content-Type: text/xml'); //récupération des elements paramètres $a= $_GET[‘A']; $b= $_GET[‘B']; // réalisation du calcul $total=$a+$b; //réalisation du document XML $dom = new DOMDocument(); $response = $dom->createElement('response'); $dom->appendChild($response); $res = $dom->createTextNode($total); $response->appendChild($res); $xmlString = $dom->saveXML(); echo $xmlString; ?> … function process(){ if (xmlHttp) { try { var firstNumber = document.getElementById("A").value; var secondNumber = document.getElementById("B").value; var params = "A=" + firstNumber + "&B=" + secondNumber; xmlHttp.open("GET", "morephp.php?" + params, true); xmlHttp.onreadystatechange = handleRequestStateChange; xmlHttp.send(null); }catch (e){ alert("Can't connect to server:\n" + e.toString()); } function handleRequestStateChange() { if (xmlHttp.readyState == 4){ if (xmlHttp.status == 200){ try { handleServerResponse();} catch(e){ alert("Error reading the response: " + e.toString());} } else{ alert("There was a problem retrieving the data:\n" + xmlHttp.statusText); } function handleServerResponse(){ var xmlResponse = xmlHttp.responseXML; xmlRoot = xmlResponse.documentElement; responseText = xmlRoot.firstChild.data; myDiv = document.getElementById("myDivElement"); myDiv.innerHTML = responseText; } exercice 2 + = Exercice (Correction)

54 AJAX54bisgambiglia@univ-corse.fr PHPPHP A vous : TD (partie 5) : En associant les étapes 1, 2 et 3, faites les vérifications de champs à l’aide de d’AJAX. Notamment vérification en directe de l’unicité du mail. Programmation objet

55 AJAX55bisgambiglia@univ-corse.fr AJAX JSON est reconnu par JavaScript, après que l'ECMA ait définit la fonction eval() qui parse le format, dans le standard ECMAScript, en 1999. Il a été popularisé par le développement d'Ajax. Le terme JSON revient souvent lorsque l'on parle d'Ajax. On sait qu'il s'agit d'un format de fichier alternatif à XML, et ce format à ses adeptes. Mais qu'est-ce exactement que JSON, et quels sont ses avantages ? L'intérêt est que l'on n'a plus besoin de parser un fichier XML pour extraire des informations à travers le net, car JSON est reconnu nativement par JavaScript. JSON

56 AJAX56bisgambiglia@univ-corse.fr AJAX JSON vs XML Les avantages de JSON: La facilité de lecture. La simplicité de mise en oeuvre. Les avantages de XML: XML est extensible. Il est largement utilisé et reconnu par tous les langages de programmation. Noter que XML aussi bien que JSON ne conviennent pas pour représenter des données binaires de taille importante. JSON

57 AJAX57bisgambiglia@univ-corse.fr AJAX La syntaxe JSON Les éléments de JSON: Un objet: contient des objets ou des variables. Une variable scalaire: Number, String, Boolean. Un tableau. Les valeurs litérales: null, true, false, "chaîne de caractères", et les valeurs numériques. L'objet : Il contient un membre ou une liste de membres, chaque membre étant de la forme : "nom" : "valeur« La syntaxe de l'objet est : { membre, membre,.... } Le tableau : Contient une ou plusieurs valeurs séparées par des virgules : [ valeur, valeur,....] Les valeurs : Une valeur peut être: un objet, un tableau, un littéral (chaîne, nombre, true, false, null). Il n'y a besoin de rien de plus à savoir pour créer un fichier JSON ! JSON

58 AJAX58bisgambiglia@univ-corse.fr AJAX Exemple de fichier au format JSON JSON Un exemple simple, définition d'un menu : il s'agit d'un objet composé de membres qui sont un attribut et un tableau lequel contient d'autres objets, les lignes du menu. { "menu": "Fichier", "commandes": [ { "title": "Nouveau", "action":"CreateDoc" }, { "title": "Ouvrir", "action": "OpenDoc" }, { "title": "Fermer", "action": "CloseDoc" } ] }

59 AJAX59bisgambiglia@univ-corse.fr AJAX JSON vs XML JSON { "menu": "Fichier", "commandes": [ { "title": "Nouveau", "action":"CreateDoc" }, { "title": "Ouvrir", "action": "OpenDoc" }, { "title": "Fermer", "action": "CloseDoc" } ] } Fichier Nouveau CreateDoc Ouvrir OpenDoc Fermer CloseDoc

60 AJAX60bisgambiglia@univ-corse.fr AJAX Comment utiliser le format Le fichier permet de charger de l'information stockée dans ce format à partir du serveur ou de transmettre au serveur de l'information dans un fichier de ce format, par exemple, le contenu d'un formulaire qui vient d'être rempli. Il y a donc trois aspects: le traitement par le navigateur, par le serveur, et la transmission des données entre les deux. Coté client : C'est particulièrement simple JSON faisant partie de la norme JavaScript. Le contenu d'un fichier JSON, ou la définition de données dans ce format sont assignés à une variable, laquelle devient un objet du programme. Coté serveur : Les fichiers au format JSON s'utilisent dans différents langages de programmation, notamment PHP et Java grâce à des parseurs qui permettent d'accéder au contenu, et éventuellement de le convertir en classes et attributs, dans ce langage. Le site json.org fournit un parseur en C et donne une liste de parseurs pour d'autres langages. JSON

61 AJAX61bisgambiglia@univ-corse.fr AJAX Comment utiliser le format Le fichier permet de charger de l'information stockée dans ce format à partir du serveur ou de transmettre au serveur de l'information dans un fichier de ce format, par exemple, le contenu d'un formulaire qui vient d'être rempli. Il y a donc trois aspects: le traitement par le navigateur, par le serveur, et la transmission des données entre les deux. L'échange de données : La récupération d'un fichier peut se faire à partir de JavaScript de plusieurs façons: inclusion directe du fichier dans la page HTML au même titre qu'un fichier.js de JavaScript. chargement par une commande JavaScript. emploi de XMLHttpRequest. Le fichier JSON est parsé par la fonction JavaScript eval(). Le transfert d'un fichier au serveur se fait par XMLHttpRequest. Le fichier au format texte est traité par le parseur du langage de programmation utilisant le fichier. JSON

62 AJAX62bisgambiglia@univ-corse.fr AJAX Le code XMLHttpRequest: var req = new XMLHttpRequest(); req.open("GET", "fichier.json", true); req.onreadystatechange = monCode; // la fonction de prise en charge req.send(null); Le code JavaScript: function monCode() { if (req.readyState == 4) { var doc = eval('(' + req.responseText + ')'); } Utilisation des données: var nomMenu = document.getElementById('jsmenu'); // trouver un champ nomMenu.value = doc.menu.value; // assigner une valeur au champ Comment on accède aux données: doc.commands[0].title // lire la valeur de "title" dans le tableau doc.commands[0].action // lire la valeur de "action" dans le tableau JSON Exemple

63 AJAX63bisgambiglia@univ-corse.fr AJAX Démo simple : http://www.xul.fr/ajax-format-json.html Ressources json.org. Diagrammes de la grammaire, liste de parseurs. ECMAScript. La spécification du standard de 1999. Le langage JavaScript. Un répertoire de tutoriels et ressources. Ajason. Parseur pour PHP 5, c'est aussi un framework Ajax. YAML. Site principal de cet autre format d'échange de données. JSON

64 AJAX64bisgambiglia@univ-corse.fr AJAX Interactivité de l’interface (RIA) ; Économie de bande passante ; Augmente la réactivité du site web; Pas de rechargement de page à chaque requête; Accessibilité quelque soit le système d’exploitation ; Complexité relative grâce aux Frameworks (Ex : Open Ajax d’IBM, Atlas de Microsoft). Avantages

65 AJAX65bisgambiglia@univ-corse.fr AJAX Problèmes de compatibilité avec certains navigateurs, si JavaScript est désactivé, Ajax ne peut fonctionner. Il faut demander au lecteur de l'activer parmi les options du navigateur. ; Difficulté de référencement par les robots d’indexation ; Disparitions de certaines fonctionnalités (« Précédent », « Favoris »). Si l'on charge les données à afficher de façon dynamique, elles ne font pas partie de la page et elles ne sont pas prises en compte par les moteurs de recherche. L'aspect asynchrone fait que les modifications se font avec un délai (si le traitement sur le serveur est long), ce qui peut être déconcertant. Limites

66 AJAX66bisgambiglia@univ-corse.fr AJAX GARRETT Jesse James. Ajax : une nouvelle approche pour les applications web. Disponible sur http://www.scriptet.net/ajax-garrett.html http://www.scriptet.net/ajax-garrett.html DROTHIER Yves. Découvrir Ajax en 5 questions. Disponible sur http://solutions.journaldunet.com/0602/060208_qr- ajax.shtml http://solutions.journaldunet.com/0602/060208_qr- ajax.shtml PYG. Ajax : le retour des lessiviers ?. Disponible sur http://www.framasoft.net/article3991.html Webographie

67 AJAX67bisgambiglia@univ-corse.fr Ajax Simulation d’une machine à sous: Une page html (index.html) qui contient un bouton pour lancer le jeu Un fichier texte (gainMax.txt) qui contient juste le gain maximum, soit 100 Communication SYNCHRONE vers un simple fichier TXT Sans feuille de style Pour le navigateur FireFox uniquement (new XMLHttpRequest) Exercice (étape 1)

68 AJAX68bisgambiglia@univ-corse.fr

69 AJAX69bisgambiglia@univ-corse.fr Ajax Étapes 1 : Créer une page hmtl; Associer au bouton un événement onclick qui déclanche la fonction jouer() Cette fonction déclenchera le moteur ajax qui : Créera un objet XMLHttpRequest Le configurera (fonction open(), méthode get, cible gaimMax.txt) Enverra la requête (send()) qui contient le gain Il faut enregistrer la réponse dans nouveauGain via la propriété de l’objet responseText et l’afficher via l’élément innerHTML Exercice (étape 1)

70 AJAX70bisgambiglia@univ-corse.fr Machine à sous - SYNCHRONE /*-----------------------------MOTEUR AJAX-----------------------------*/ function jouer() { /*-----------------------------Config et envoi de la requete SYNCHRONE : */ objetXHR = new XMLHttpRequest();//cration d'une requete uniquement pour FireFox objetXHR. open("get","gainMax.txt", false); //Config. requete GET et Synchrone objetXHR.send(null);//envoi de la requete /*-----------------------------------------Attente du retour SYNCHRONE : */ var nouveauGain = objetXHR.responseText;//recup du rsulat renvoy par le serveur document.getElementById("resultat").innerHTML=nouveauGain;;//affecte le nouveau gain la zone résultat } /*--------------------------FIN DU MOTEUR AJAX--------------------------*/ Titre Bravo, vous avez gagné 0 Euros

71 AJAX71bisgambiglia@univ-corse.fr Ajax Simulation d’une machine à sous: Une page html (index.html) qui contient un bouton pour lancer le jeu Un fichier texte (gainMax.txt) qui contient juste le gain maximum, soit 100 Une feuille de style (style.css) Communication SYNCHRONE vers un simple fichier TXT Avec feuille de style Pour tous navigateurs (XMLHttpRequest) Afficher le résultat qu’après la réponse http Exercice (étape 2)

72 AJAX72bisgambiglia@univ-corse.fr

73 AJAX73bisgambiglia@univ-corse.fr Ajax Étapes 2: Créer une feuille de style; A partir de la page html précédente: Ajouter la balise Modifier les balises en y ajoutant un attribut id qui fait référence à la feuille de style; Modifier la fonction jouer() pour que le code soit compatible avec tout les navigateurs Exercice (étape 2)

74 AJAX74bisgambiglia@univ-corse.fr @charset "utf-8"; /* CSS Document */ body, h1, h2, p { font-size: 1em; margin: 0; padding: 0; } body { font-family: Verdana, Geneva, Arial, sans-serif; text-align: center; } #page { position: relative; margin: 0 auto; width:600px; height:200px; border-top: medium solid #ff0000; border-bottom: medium solid #ff0000; } #info { position: absolute; left: 100px; top: 30px; visibility:hidden } #resultat { font-weight:bold; } #formulaire { position: absolute; left: 290px; top: 100px; } #commentaire { position: relative; margin: 0 auto; width:600px; text-align: left; font-size: 0.8em; font-style: italic } … html function jouer() { /*-----------------------------Config et envoi de la requete SYNCHRONE : */ objetXHR = new XMLHttpRequest();//création d'une requete uniquement pour FireFox objetXHR = new XMLHttpRequest();//création d'une requete uniquement pour FireFox objetXHR.open("get","gainMax.txt", false); //Config. requete GET et Synchrone objetXHR.open("get","gainMax.txt", false); //Config. requete GET et Synchrone objetXHR.send(null);//envoi de la requete objetXHR.send(null);//envoi de la requete /*-----------------------------------------Attente du retour SYNCHRONE : */ var nouveauGain = objetXHR.responseText;//recup du résulat renvoyé par le serveur var nouveauGain = objetXHR.responseText;//recup du résulat renvoyé par le serveur document.getElementById("resultat").innerHTML=nouveauGain;//affecte la zone résultat document.getElementById("resultat").innerHTML=nouveauGain;//affecte la zone résultat document.getElementById("info").style.visibility="visible"; } document.getElementById("info").style.visibility="visible"; } CSS ajax

75 AJAX75bisgambiglia@univ-corse.fr Ajax Simulation d’une machine à sous: Une page php (index.php) identique à la page html qui remplace le moteur Ajax par du code PHP Une feuille de style (style.css) Page dynamique traditionnelle en PHP (valeur de gain aléatoire) Avec une feuille de style Exercice (étape 3)

76 AJAX76bisgambiglia@univ-corse.fr

77 AJAX77bisgambiglia@univ-corse.fr Ajax Étapes 3 (sans ajax avec PHP): Modifier la balise elle ne doit plus envoyer un évènement onclick, mais envoyer des données (method= " get ") à elle-même (action= " index.php ") Modifier le type de bouton pour transformer le bouton jouer en bouton de transmission de données. Ajouter du code PHP, qui doit retourner un gain entre 0 et 100 (rand(0,100)) au clique isset($_GET[‘button’]). Exercice (étape 3)

78 AJAX78bisgambiglia@univ-corse.fr … Bravo, vous avez gagné <?php if(isset($_GET['button'])) { $resultat = rand(0,100); echo $resultat ; }else{ echo "0"; } ?> Euros … PHP #info { position: absolute; left: 100px; top: 30px; visibility:visible } CSS

79 AJAX79bisgambiglia@univ-corse.fr Ajax Simulation d’une machine à sous: Une page html (index.html) identique à celle de l’étape 2 Une page php (serveur.php) qui traite la requête Une feuille de style (style.css) Communication SYNCHRONE vers un fichier PHP (valeur de gain aléatoire) Avec une feuille de style Exercice (étape 4)

80 AJAX80bisgambiglia@univ-corse.fr Ajax Étapes 4 : Créer la page PHP serveur : Entête header(“Centent-Type: text/plain") en renvoie du texte; Ajouter la méthode spleed(2) qui va simuler un temps d’attente client/serveur Avec la méthode rand(0,100) renvoyez un résultat Modifier le moteur ajax pour récupérer les données non plus à partir d’un fichier texte, mais à partir du script PHP ( méthode open(“get“, “serveur.php“, false) ). Exercice (étape 4)

81 AJAX81bisgambiglia@univ-corse.fr <?php //indique que le type de la réponse renvoyée au client sera du Texte header("Content-Type: text/plain"); //simulation du temps d'attente du serveur (2 secondes) sleep(2); //calcul du nouveau gain entre 0 et 100 Euros $resultat = rand(0,100); //envoi de la réponse à la page HTML echo $resultat ; ?> PHP /*-----------------------------MOTEUR AJAX-----------------------------*/ /*-----------------------------MOTEUR AJAX-----------------------------*/ function jouer() { /*-----------------------------Config et envoi de la requete SYNCHRONE : */ function jouer() { /*-----------------------------Config et envoi de la requete SYNCHRONE : */ objetXHR = new XMLHttpRequest();//création d'une requete uniquement pour FireFox objetXHR = new XMLHttpRequest();//création d'une requete uniquement pour FireFox objetXHR.open("get","gainAleatoire.php", false); //Config. requete GET et Synchrone objetXHR.open("get","gainAleatoire.php", false); //Config. requete GET et Synchrone objetXHR.send(null);//envoi de la requete objetXHR.send(null);//envoi de la requete /*-----------------------------------------Attente du retour SYNCHRONE : */ /*-----------------------------------------Attente du retour SYNCHRONE : */ var nouveauGain = objetXHR.responseText;//recup du résulat renvoyé par le serveur var nouveauGain = objetXHR.responseText;//recup du résulat renvoyé par le serveur document.getElementById("resultat").innerHTML=nouveauGain;//affecte la zone résultat document.getElementById("resultat").innerHTML=nouveauGain;//affecte la zone résultat document.getElementById("info").style.visibility="visible"; } document.getElementById("info").style.visibility="visible"; } /*--------------------------FIN DU MOTEUR AJAX--------------------------*/ /*--------------------------FIN DU MOTEUR AJAX--------------------------*/

82 Ajax Prototype : ce framework Javascript est utilisable tel quel, mais il sert également de base pour des librairies plus évoluées et plus lourdes comme Rico et Script.aculo.us. Il n’inclut donc pas d’effets visuels, mais comporte tout le nécessaire pour effectuer des requêtes en Ajax AJAX82bisgambiglia@univ-corse.fr Librairie.js

83 Ajax Rico : A l’inverse de Prototype, Rico propose donc en plus du support Ajax la possibilité de fabriquer des animations ou d’effectuer des glissers-déposers (ou drags and drops en anglais) comme dans un logiciel classique. Malheureusement, sa documentation semble un peu succincte AJAX83bisgambiglia@univ-corse.fr Librairie.js

84 Ajax Script.aculo.us : sûrement un des plus connus (probablement à cause de son intégration à Ruby on Rails). Il bénéficie d’une communauté par conséquent importante et dispose même d’un mécanisme d’extensions. Script.aculo.us est fournit de base avec l’auto-complétion en Ajax. AJAX84bisgambiglia@univ-corse.fr Librairie.js

85 Ajax Mootools : une librairie compacte et modulaire qui a été conçu en suivant les principes de la programmation orientée objet. Sa syntaxe est très agréable et de nombreuses extensions viennent compléter les fonctionnalités de base. Le module Ajax est capable de gérer le format Json. AJAX85bisgambiglia@univ-corse.fr Librairie.js

86 Ajax Dojo Toolkit : certainement une des librairies les plus complètes qui soient. Dojo Toolkit est supportée par une fondation qui regroupe des entreprises comme IBM ou encore Sun Microsystems. Elle repose sur un système de widgets et le package Ajax prend en compte différents types de transport comme les iframes. AJAX86bisgambiglia@univ-corse.fr Librairie.js

87 Ajax jQuery : JQuery est une librairie Javascript très prometteuse. Elle est légère, extensible et très simple à utiliser. La documentation est vraiment très complète, avec des tutoriaux abordant de manière thématique les différentes fonctionnalités. Idéal pour se lancer dans le développement Ajax. AJAX87bisgambiglia@univ-corse.fr Librairie.js

88 Ajax Yahoo! UI Library : Yahoo! a mis à disposition sa librairie Javascript sous une licence open source. Il est donc maintenant possible de concevoir des pages tout aussi riches et interactives que celles des nombreux portails de la société. Le support est bien évidemment exemplaire. AJAX88bisgambiglia@univ-corse.fr Librairie.js

89 Ajax Il existe encore bien d’autres librairies Ajax, dont certaines dépendent d’un langage de programmation comme Google Web Toolkit (Java) ou Xajax (Php) ou bien d’un environnement propriétaire comme Aflax (Flash). Il faut vraiment prendre le temps d’étudier en détails ces librairies afin de choisir celle qui correspond le mieux à ses besoins. Ce choix est important car il n’est pas facile ensuite de faire machine arrière et de migrer vers un autre framework. http://www.simpleentrepreneur.com/2007/05/08/une-liste-de- librairies-javascript-pour-developper-en-ajax/ AJAX89bisgambiglia@univ-corse.fr Librairie.js

90 Ajax Tous les frameworks sont capables de communiquer avec le serveur, donc de lire des fichiers, d'envoyer des données ou de passer des commandes à exécuter sur le serveur, ce qui suppose l'emploi d'un script coté serveur. Un grand nombre de frameworks sont constitués en fait uniquement de fonctions JavaScript, et laisse la partie serveur au soin du programmeur. La plupart d'entre eux utilisent XML comme format de données, et quelquefois JSON, un autre format textuel. Une librairie JavaScript s'utilise simplement à partir d'une page Web avec une balise de la forme: Cette balise inclut le fichier "prototype.js" contenant les fonctions JavaScript dans la page et les rend accessible au navigateur AJAX90bisgambiglia@univ-corse.fr Utilisation d’un frameworks

91 Ajax Tous les frameworks sont capables de communiquer avec le serveur, donc de lire des fichiers, d'envoyer des données ou de passer des commandes à exécuter sur le serveur, ce qui suppose l'emploi d'un script coté serveur. Un grand nombre de frameworks sont constitués en fait uniquement de fonctions JavaScript, et laisse la partie serveur au soin du programmeur. La plupart d'entre eux utilisent XML comme format de données, et quelquefois JSON, un autre format textuel. Une librairie JavaScript s'utilise simplement à partir d'une page Web avec une balise de la forme: Cette balise inclut le fichier "prototype.js" contenant les fonctions JavaScript dans la page et les rend accessible au navigateur AJAX91bisgambiglia@univ-corse.fr Utilisation d’un frameworks

92 Ajax Tous les frameworks sont capables de communiquer avec le serveur, donc de lire des fichiers, d'envoyer des données ou de passer des commandes à exécuter sur le serveur, ce qui suppose l'emploi d'un script coté serveur. Un grand nombre de frameworks sont constitués en fait uniquement de fonctions JavaScript, et laisse la partie serveur au soin du programmeur. La plupart d'entre eux utilisent XML comme format de données, et quelquefois JSON, un autre format textuel. Une librairie JavaScript s'utilise simplement à partir d'une page Web avec une balise de la forme: Cette balise inclut le fichier "prototype.js" contenant les fonctions JavaScript dans la page et les rend accessible au navigateur AJAX92bisgambiglia@univ-corse.fr Utilisation d’un frameworks

93 Ajax + d’info sur prototype.js http://prototype.js.le-developpeur- web.com/index.php http://prototype.js.le-developpeur- web.com/index.php + d’info sur AJAX : http://www.xul.fr/xml-ajax.html AJAX93bisgambiglia@univ-corse.fr Utilisation d’un frameworks

94 AJAX94bisgambiglia@univ-corse.fr Sommaire 1. Introduction 2. Les principes d’Internet 3. Les langages du web 4. Le web 2.0 5. JavaScript 6. Ajax 7. Conclusion 8. PHP

95 AJAX95bisgambiglia@univ-corse.fr L'expression Web 2.0 a été proposée pour désigner ce qui est perçu comme un renouveau du World Wide Web. L'évolution ainsi qualifiée concerne aussi bien les technologies employées que les usages. En particulier, on qualifie de Web 2.0 les interfaces permettant aux internautes d'interagir à la fois avec le contenu des pages mais aussi entre eux. Conclusion WEB 2.0

96 AJAX96bisgambiglia@univ-corse.fr Un site pourrait être appelé comme utilisant une approche web 2.0 s'il fait la part belle à un certain nombre des techniques suivantes : l'utilisation de CSS, d'un balisage XHTML sémantiquement valide et des microformats ; les techniques d’applications riches telles qu'AJAX ; la syndication et l'agrégation de contenu RSS/Atom ; la catégorisation par étiquetage ; l'utilisation appropriée des URL ; une architecture REST ou des services web XML. Conclusion WEB 2.0

97 AJAX97bisgambiglia@univ-corse.fr AJAX est un acronyme signifiant Asynchronous JavaScript and XML (« XML et Javascript asynchrones »), et désignant une solution informatique libre pour le développement d'applications Web. À l'image de DHTML ou de LAMP, AJAX n'est pas une technologie en elle-même, mais un terme qui évoque l'utilisation conjointe d'un ensemble de technologies libres couramment utilisées sur le Web : HTML (ou XHTML) pour la structure sémantique des informations ; CSS pour la présentation des informations ; DOM et JavaScript pour afficher et interagir dynamiquement avec l'information présentée ; l'objet XMLHttpRequest pour échanger et manipuler les données de manière asynchrone avec le serveur Web. XML pour remplacer le format des données informatives (JSON) et visuelles (HTML). Les applications AJAX peuvent être utilisées au sein des navigateurs Web qui supportent les technologies décrites précédemment. Parmi eux, on trouve Mozilla Firefox, Internet Explorer, Konqueror, Google Chrome, Safari et Opera. Conclusion AJAX

98 AJAX98bisgambiglia@univ-corse.fr Les mécanismes d'AJAX sont toujours les mêmes : Création d'une page html qui chargera des données par l'intermédiaire d'un gestionnaire d'événements spécifique ou d'une gestion d'événement globale. Chargement des données qui seront affichées dans la page au moyen de techniques DHTML. Création d'un objet de requête JavaScript XMLHttpRequest qui permet que les données soient demandées au serveur puis insérées à réception sans la page existante. Conclusion AJAX

99 AJAX99bisgambiglia@univ-corse.fr Visual Web Devloper 2008 http://msdn.microsoft.com/fr- fr/express/aa975050.aspx?wt.srch=1 http://msdn.microsoft.com/fr- fr/express/aa975050.aspx?wt.srch=1 WebDev 14 http://www.pcsoft.fr/webdev/index.html?p=g oogle017WB_Ajax http://www.pcsoft.fr/webdev/index.html?p=g oogle017WB_Ajax Liste de ressources Ajax http://forum.topflood.com/graphisme/liste- ressource-2600.html http://forum.topflood.com/graphisme/liste- ressource-2600.htmlConclusion Outils AJAX

100 AJAX100bisgambiglia@univ-corse.fr https://developer.mozilla.org/fr/AJAX/Premie rs_pas https://developer.mozilla.org/fr/AJAX/Premie rs_pas http://www.xul.fr/xml-ajax.html http://www.journaldunet.com/solutions/0602/ 060208_qr-ajax.shtml http://www.journaldunet.com/solutions/0602/ 060208_qr-ajax.shtmlConclusion Liens utils

101 AJAX101bisgambiglia@univ-corse.fr Sommaire

102 Programmation Web Jeu de combat : Chaque visiteur (joueur) pourra créer un personnage avec lequel il pourra frapper d'autres personnages (pas plus de 3 coups par jour). Le personnage frappé recevra des dégâts en fonction de la force du personnage qui l'a frappé. L'utilisateur peut voir ses dégâts se soustraire de 10 s'il se connecte toutes les 24 heures. AJAX102bisgambiglia@univ-corse.fr Exercice

103 Programmation Web Etape 1 : Créer une base de donnée ‘jeu’ Créer la table SQL Joueur id_j => identifiant unique du joueur nom => son nom de famille prenom => son prénom login => son identifiant password => son mot de passe email => son mot de passe de connexion date_newC => sa date de création du compte Remplir la table sous phpmyadmin (4 ou 5 joueurs) Faire une page PHP (index.php) pour afficher les informations de la table Ajouter un formulaire pour se connecter ou si le compte n’existe pas le créer (session) AJAX103bisgambiglia@univ-corse.fr Exercice

104 AJAX104bisgambiglia@univ-corse.fr <?php // Connexion et sélection de la base $link = mysql_connect('mysql_host', 'mysql_user', 'mysql_password')‏ or die('Impossible de se connecter : '. mysql_error()); or die('Impossible de se connecter : '. mysql_error()); echo 'Connected successfully'; mysql_select_db('my_database') or die('Impossible de sélectionner la base de données'); // Exécution des requêtes SQL $query = 'SELECT * FROM my_table'; $result = mysql_query($query) or die('Échec de la requête : '. mysql_error()); // Affichage des résultats en HTML echo " \n"; while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { echo "\t \n"; echo "\t \n"; foreach ($line as $col_value) { foreach ($line as $col_value) { echo "\t\t $col_value \n"; //... echo "\t\t $col_value \n"; //...?>

105 Programmation Web Etape 2 : Avec les classes : Faire une classe (Joueur.class.php) Données : id_j => identifiant unique du joueur nom => son nom de famille prenom => son prénom login => son identifiant password => son mot de passe email => son mot de passe de connexion date_newC => sa date de création du compte id_personnage => l’identifiant de son personnage Méthodes : __construct($info) connexion() deconnexion() save_data() __toString() AJAX105bisgambiglia@univ-corse.fr Exercice

106 AJAX106bisgambiglia@univ-corse.fr PHP Définition simple d'une classe : <?php class SimpleClass { // déclaration d'un membre public $var = 'une valeur par défaut'; // déclaration de la méthode public function displayVar() { echo $this->var; } ?> Programmation objet

107 Programmation Web Etape 3 : Réaliser une classe en PHP qui définie le personnage : Son identifiant (juste utile pour son identification en BDD) ; son nom (unique en BDD) ; sa force ; ses dégâts ; son niveau (sur 100) ; son expérience (sur 100). Au début, le personnage a un niveau de 1. Plus il frappe de personnages, plus son expérience monte. Une fois arrivée à 100, elle revient à 0 et son niveau monte de 1. S'il a 100 de dégâts, il est mort (supprimé de la BDD) AJAX107bisgambiglia@univ-corse.fr Exercice La Classe

108 Programmation Web CREATE TABLE IF NOT EXISTS `personnages` ( `id` smallint(5) unsigned NOT NULL AUTO_INCREMENT, `nom` varchar(50) COLLATE latin1_general_ci NOT NULL, `puissance` tinyint(3) unsigned NOT NULL, `degats` tinyint(3) unsigned NOT NULL, `niveau` tinyint(3) unsigned NOT NULL, `experience` tinyint(3) unsigned NOT NULL, `nombre_coups` tinyint(3) unsigned NOT NULL, `time_coups` int(10) unsigned NOT NULL, `time_connexion` int(10) unsigned NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1; AJAX108bisgambiglia@univ-corse.fr Exercice BD

109 Programmation Web Pour les méthodes : __construct : constructeur de la classe. Il doit demander 2 arguments : le type du personnage (un nouveau personnage ou un personnage déjà existant dont les informations sont contenues en BDD). Pour cela, définition de 2 constantes de classe : NOUVEAU et EXISTANT. Si le personnage est existant, le constructeur appellera perdreDegats. Le deuxième paramètre est l'information qui identifiera le personnage (soit son id (entier), soit son nom). __get : méthode permettant de renvoyer la valeur d'un attribut privé. Ceci permet de mettre les attributs en « lecture seule ». __wakeup : méthode magique qui se contentera d'appeler perdreDegats. enregistrerPersonnage : méthode permettant d'enregistrer le nouveau personnage créé en BDD. Attention, il faut bien vérifier que son nom n'est pas déjà pris ! AJAX109bisgambiglia@univ-corse.fr Exercice La Classe

110 Programmation Web exists : méthode statique permettant de voir si un personnage existe (on passe son id ou son nom en paramètre). La fonction renvoie true s'il existe, false s'il n'existe pas. frapper : méthode chargée de frapper un personnage. La fonction prend l'id du personnage à frapper. Il faut bien vérifier que le personnage existe et que le personnage avec lequel on veut frapper n'a pas déjà frappé 3 autres personnages en moins de 24 heures ! gagnerExperience : méthode augmentant de 20 l'expérience du personnage. Si on arrive à 100, on augmente de 1 le niveau et on remet l'expérience à 0. Si le niveau est multiple de 5, on augmente la force de 5, donc la force = le niveau + 5 (puisque dès le départ, la force est à 5), mais uniquement tous les 5 niveaux. perdreDegats : méthode permettant de soustraire 10 aux dégâts du personnage toutes les 24 heures. recevoirDegats : méthode modifiant les dégâts du personnage en fonction de la force du personnage qui a frappé. Si on arrive à 100 de dégâts, on supprime le personnage présent en BDD. AJAX110bisgambiglia@univ-corse.fr Exercice La Classe

111 Programmation Web Etape 3 : Remplir la table (au moins 4 personnages) Faire une page php pour la création de personnage Faire une page php pour afficher tous les personnages créés Faire une page php pour lancer les combats (afficher les personnages créés + bouton pour lancer la méthode frapper) AJAX111bisgambiglia@univ-corse.fr Exercice La Classe

112 Programmation Web Notre TP sera constitué de 6 fichiers : Joueur.class.php : la classe joueur ; Personnage.class.php : le fichier qui déclarera la classe Personnage ; index.php : le fichier principale le jeu pour créer ou connecter le joueur Forum.new.Personnage.php : le fichier de création du personnage Forum.view.Personnage.php : le fichier qui permet de voir tous les personnages Forum.fight.Personnage.php : le fichier qui permet de lancer les combats. AJAX112bisgambiglia@univ-corse.fr Exercice

113 Programmation Web Avec AJAX : Vous devez vérifier les informations entrées dans le formulaire de création du joueur et du personnage. Sous forme de Google Suggest, lorsqu’un utilisateur entre le nom du personnage, il faut afficher les noms de tous les personnages présent dans la base de données => le nom du personnage doit être unique. AJAX113bisgambiglia@univ-corse.fr Exercice

114 AJAX114bisgambiglia@univ-corse.fr AJAX Exemple de requête Ajax Démarche: 1. Création d'un objet XMLHttpRequest. 2. Enregistrement d'une fonction de rappel dans l'objet. (objReuqete.onreadystatechange = traiteReponse;) 3. Ouverture de la liaison avec open() (objRequete.open('get','http1.php',true);) 4. Transmission de la requête au moyen de send() (objReuqete.send(null);) 5. Utilisation de la réponse. Transfert de données avec HTTP

115 AJAX115bisgambiglia@univ-corse.fr AJAX Afin de réaliser une page contenant la technologie Ajax, il nous faut réaliser trois documents: Une page en HTML Un script en Java Script Un script en PHP qui répondra au Java Script Applications

116 AJAX116bisgambiglia@univ-corse.fr AJAX Fichier HTML pour un formulaire (lander.html) Un exemple concret 1 2 3 4 5 6 7 Dans quel land habitez-vous ? 8 9 Bade-Wurtemberg 10 Bavière 11 Berlin 12 Brandebourg 13 Brême 14 Hambourg 15 Hesse 16 Mecklembourg-Poméranie 17 19 20 21 22 23

117 AJAX117bisgambiglia@univ-corse.fr AJAX Fichier JavaScript externe (lander.js) Un exemple concret 1 var objRequete; 2 3 if (navigator.appName.search("Microsoft") > -1){ 4 objRequete = new ActiveXObject("MSXML2.XMLHTTP"); 5 }else{ 6 objRequete = new XMLHttpRequest(); 7 } 8 9 function envReq() { 10 for (i=1;i<=8; i++) { 11 if (this.document.f.bundesland.options[i-1].selected){ 12 objRequete.open('get','lander.php?ou='+i,true); 13 objRequete.onreadystatechange = traiteReponse; 14 objRequete.send(null); 15 break; 16 } 17 } 18} 19 function traiteReponse() { 20 if(objRequete.readyState == 4) { 21 document.getElementById("capitale").innerHTML= objRequete.responseText; }}

118 AJAX118bisgambiglia@univ-corse.fr AJAX Coté serveur (lander.php) Un exemple concret 1 <? 2 echo "La capitale de ce land est "; 3 4 switch($_REQUEST['ou']){ 5 6 case 1: echo "Stuttgart"; break; 7 case 2: echo "Munich"; break; 8 case 3: echo "Berlin"; break; 9 case 4: echo "Potsdam"; break; 10 case 5: echo "Brême"; break; 11 case 6: echo "Hambourg"; break; 12 case 7: echo "Wiesbaden"; break; 13 case 8: echo "Schwerin"; break; 14 } 15 ?>

119 Programmation Web AIDE Jeu http://www.siteduzero.com/tutoriel-3-147183-tp-mini- jeu-de-combat.html http://www.siteduzero.com/tutoriel-3-147183-tp-mini- jeu-de-combat.html SQL http://www.phpdebutant.org/article65.php PHP http://www.phpfrance.com/documentation.php AJAX119bisgambiglia@univ-corse.fr Correction