Application AJAX/jquery Réalisation d'un chat en AJAX Structure de la page boby>hello titi> salut rene> bonjour boby> A+ titi bye envois Zone d'afchage (<div>) Bouton de validation <input type=button> Zone de saisie du pseudo (<input>) Zone de saisie de la phrase (<input>)
AJAX / jquery Il faut rafraichir régulièrement la zone d'afchage des messages (toutes les secondes par exemple) Il existe une methode bien pratique avec la librairie prototype «PeriodicalUpdater «, Hélas,elle n'existe pas d'origine dans jquery Il faudra donc utiliser une librairie supplémentaire on peut en trouver pour jquery Ou utiliser simplement la fonction javascript setinterval : setinterval(function() { // Do something every 5 seconds }, 5000);
Application AJAX <html> <head> <script type="text/javascript" src="jquery.js"> <body> $(document).ready ( function(){ <div id='afche'>ici</div> <input type="text" id="pseudo" > <input type= "text" id="phrase" size="32" > <input type="submit" id="envois" value="envoyer" />
Application AJAX/jquery+prototype Mettre en place une table dans une base de données: chat(id,pseudo,phrase)
Application AJAX/jquery+prototype Réaliser 2 fichiers php lire.php => ce fichier doit afcher la liste des 5 dernières phrases tapées par les usagers Resultat d'afche de ce fichier : toto>hello Bob> bonjour... valider.php => ce fichier doit enregistrer dans la table chat la phrase et le pseudo passés en paramètre (pseudo et phrase) Valider.php?pseudo=toto&phrase=salut!
Application AJAX <html> <head> <script type="text/javascript" src="jquery.js"> <body> $(document).ready ( function(){ //declaration du «timer» pour raffraichir toutes les 2s la zone d'affichage (div «affiche») // utilisation de setinterval et de $(...).load pour appeler le fichier lire.php // declaration de l'évènement click sur le bouton envoyer // utilisation de $(...).click() et de $().ajax() ainsi que de $(..).val() pour appeler le fichier dire.php <div id='afche'>ici</div> <input type="text" id="pseudo" > <input type= "text" id="phrase" size="32" > <input type="submit" id="envois" value="envoyer" />
Application AJAX Amélioration : 1) vider la zone de saisie (phrase) après avoir envoyer une ligne sur le chat (utiliser $(...).val() par exemple) 2) lancer l'envois d'un phrase saisie lors de l'appuis sur la touche Enter à la place du click sur le bouton envoyer (utiliser $().keyup() par exemple et tester la touche ENTER(code ASCII 13) ) 3) protéger le systeme contre l'injection de script (à faire en php dans le fichier dire.php). 4) protéger le systeme contre le flood (à faire dans le fichier dire.php) 5) ajouter un systeme afchant la liste des connectés......
Drag&Drop avec jquery UI (http://jqueryui.com) Dans la librairie de base de jquery, il n'existe pas d'outils direct pour les drag&drop Il est donc nécessaire de faire appel à des librairies complémentaires: jquery.ui ou/et interface.js <html><head> <script type="text/javascript" src="js/jquery-1.4.4.min.js"> <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"> <body > <div id="poubelle"> Poubelle </div> <div id='liste'>ici la liste des abonnes</div>
Drag&Drop avec jquery UI (http://jqueryui.com) Dans la librairie de base de jquery, il n'existe pas d'outils direct pour les drag&drop Il est donc nécessaire de faire appel à des librairies complémentaires: jquery.ui ou/et interface.js <html><head> <script type="text/javascript" src="js/jquery-1.4.4.min.js"> <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"> $(document).ready ( function(){ <body > <div id="poubelle"> Poubelle </div> <div id='liste'>ici la liste des abonnes</div>
Drag&Drop avec jquery <html><head> <script type="text/javascript" src="js/jquery-1.4.4.min.js"> <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"> $(document).ready ( function(){ $("#liste").load("lister.php"); <body > <div id="poubelle"> Poubelle </div> <div id='liste'>ici la liste des abonnes</div>
Drag&Drop avec jquery Fichier lister.php: <? echo «<div id='1' class='abo' >Martin Martial</div>?> <div id='2' class='abo' >Arganini Gerald</div> <div id='3' class='abo' >ARNAUD Jean-Michel</div> <div id='4' class='abo' >ARONICAbu Aude</div> <div id='5' class='abo' >Aubert Florien</div>»; // cette liste est a generer via mysql biensur!
Drag&Drop avec jquery Declaration de la fonction qui se déclenche quand la liste est entièrement chargée <html><head> <script type="text/javascript" src="js/jquery-1.4.4.min.js"> <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"> $(document).ready ( function() { $("#liste").load("lister.php", function() {... } ); <body > <div id="poubelle"> Poubelle </div> <div id='liste'>ici la liste des abonnes</div>
Drag&Drop avec jquery Declaration de la fonction qui se déclenche quand la liste est entièrement chargée <html><head> <script type="text/javascript" src="js/jquery-1.4.4.min.js"> <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"> $(document).ready ( function() { $("#liste").load("lister.php", function() { $(".abo").draggable({ revert: true }) } ); //ici tous les éléments chargés avec liste.php ayant la class abo seront draggable avec //avec retour en position initial si on lache l'élément <body > <div id="poubelle"> Poubelle </div> <div id='liste'>ici la liste des abonnes</div>
Drag&Drop avec jquery <html><head> <script type="text/javascript" src="js/jquery-1.4.4.min.js"> <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"> $(document).ready ( function(){ $("#liste").load("lister.php", function() { $(".abo").draggable({ revert: true }) } ); $("#poubelle").droppable({ drop: function(ev, ui) { <body > } <div id="poubelle"> Poubelle </div> <div id='liste'>ici la liste des abonnes</div>
Drag&Drop avec jquery <html><head> <script type="text/javascript" src="js/jquery-1.4.4.min.js"> <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"> $(document).ready ( function(){ $("#liste").load("lister.php", function() { $(".abo").draggable({ revert: true }) } ); $("#poubelle").droppable({ drop: function(ev, ui) { alert($(ui.draggable).attr('id')); $(ui.draggable).remove(); <body > } <div id="poubelle"> Poubelle </div> <div id='liste'>ici la liste des abonnes</div>
Drag&Drop avec jquery <html><head> <script type="text/javascript" src="js/jquery-1.4.4.min.js"> <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"> $(document).ready ( function(){ $("#liste").load("lister.php", function() { $(".abo").draggable({ revert: true }) } ); $("#poubelle").droppable({ drop: function(ev, ui) { <body > <div id="poubelle"> Poubelle </div> alert($(ui.draggable).attr('id')); $.ajax("supprimer.php?id="+$(ui.draggable).attr('id')); $(ui.draggable).remove(); } <div id='liste'>ici la liste des abonnes</div>
Drag&Drop avec jquery Autre ecriture possible <html><head> <script type="text/javascript" src="js/jquery-1.4.4.min.js"> <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"> $(document).ready ( function(){ $("#liste").load("lister.php", function() { $(".abo").draggable({ revert: true }) } ); $("#poubelle").droppable({ drop: function(ev, ui) { $.ajax({ type: "GET", url: "supprimer.php", data: "id=»+$(ui.draggable).attr('id') $(ui.draggable).remove(); } <body > <div id="poubelle"> Poubelle </div> <div id='liste'>ici la liste des abonnes</div>
Drag&Drop avec jquery Autre ecriture possible <html><head> <script type="text/javascript" src="js/jquery-1.4.4.min.js"> <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"> $(document).ready ( function(){ $("#liste").load("lister.php", function() { $(".abo").draggable({ revert: true }) } ); $("#poubelle").droppable({ drop: function(ev, ui) { $.ajax({ type: "GET", url: "supprimer.php", data: "id=»+$(ui.draggable).attr('id') $(ui.draggable).remove(); } <body > <div id="poubelle"> Poubelle </div> <div id='liste'>ici la liste des abonnes</div>
Ajax et l'avenir Beaucoup d'outils de développement s'orientent vers l'utilisation d'ajax On le voit avec les librairies de script: aculo, mootools, openrico, jquery... On le voit dans les framework (rubyonrails, cakephp qui integre des fonctionnalités AJAX) On le voit dans les outils spécifiques web comme chez adobe avec SPRY (Framework)
Ajax et jquery Element pour le TD2:exo3 a) generation de la liste des abonnes avec un id différent pour chacun b) recuperation de l'id et appel du formulaire Utilisation de $(this).attr(«id») c) regeneration de la liste lors d'une modification d'un abonné d) postionnement du div formulaire près du nom cliqué Utilisation de $(this).position() pos=$(this).position() ; Ou $(this).position().top ; puis pos.top et pos.left
Ajax et jquery Element pour le TD2:exo3 a) generation de la liste des abonnes avec un id différent pour chacun b) recuperation de l'id et appel du formulaire Utilisation de $(this).attr(«id») c) regeneration de la liste lors d'une modification d'un abonné d) postionnement du div formulaire près du nom cliqué Utilisation de $(this).position() pos=$(this).position() ; Ou $(this).position().top ; puis pos.top et pos.left