SRC2 CIM320-2013 - Intranet | IUT de Troyes

1
SRC2 CIM320-2013
TP Jquery , appli chat
Présentation
Réalisation d'une application chat avec jquery
source de départ :
SRC2
2
SRC2 CIM320-2013
pour stocker toutes les phrases « dites » par les « chateurs » :
SRC2
3
SRC2 CIM320-2013
Exercice 1: préparation
• créer une table chat(id,pseudo,phrase) dans votre base de données
• remplir cette table avec une quinzaine d'enregistrement
Exercice 2: réaliser la page d'enregistrement d'une nouvelle phrase par un
chatteur (dire.php?pseudo=toto&phrase=salut...)
• cette page devra enregistrer dans la base la phrase (et le pseudo) passée dans l'url
aucun affichage de retour n'est nécessaire (ou alors juste un message pour le débuggage!)
…
• faites des essais pour plusieurs phrase et vérifier leurs présences dans la base
Exercice 3 réaliser la page d'affichage des 10 dernières phrases (affiche.php)
• cette page devra afficher les 10 dernières phrases tapées sur le chat sous la forme
pseudo > phrase ( + <br/>)
bob > hello !
Toto > tu va bien ?
Bob > oui merci
…
faites des essais en saissisant des phrases grace à la page dire.php?pseudo=... et en les relisant avec
la page affiche.php
Exercice 4: réaliser la page html affichant l'interface du chat
Attention, INDISPENSABLE : utiliser Firebug (ou autre outils de débug) pour tester votre
développement !
…
<div id='affiche'> load ...</div>
<input id='pseudo' type='text'><input id='phrase' type='text'>
<input id='bouton' type='submit' value='dire'>
...
• lors du click sur le bouton « dire », générer l'appel à la ressource dire.php en utilisant jquery :
$(...).click() , $(...).val() et $().ajax() ;
• faire une routine qui se lance régulièrement (toute les secondes) , et qui vient récupérer
l'affichage de la page affiche pour l'afficher dans la zone spécifique.
utiliser « setInterval » pour lire régulierement la page.
Et $(...).load(...) pour écrire dans la zone d'affichage les 10 dernieres phrases. (en « loadant » la
page lire.php)
• modifier l'ensemble pour que la phrase « parte » lorsque l'on appuis sur « Entrée » plutôt que
lors du clique sur le bouton. (pour cel utiliser $(...).keydown(function( event ) {…}) déjà vue au
SRC2
4
SRC2 CIM320-2013
tp précédent...). Profitez en pour vider la zone de saisie de la phrase pour etre prêt à retaper un
autre text.
Exercice 5: fonctionnalités avancées
•reprendre les améliorations possibles indiquées sur la diapo (page 2 de ce document)...
• faites un parseur de tag (ou smiley) permettant de faire vibrer par exemple la zone des phrases
affichées lorsque l'on tape « vibre » comme phrase …
•réaliser une zone affichant la liste des connectés...
TP complementaire: fonctionnalités avancées
• possibilité 1 :
améliorer la mise en forme par exemple en adoptant cette mise en forme
c'est surtout un travail à faire dans le fichier lire.php
Astuce : lors de l'appel à lire.php (dans $(...)load(« lire.php ») renvoyer le pseudo du chateur à
lire.php pour qu'en php vous puissiez mettre en forme d'une façon différente votre avatar.
SRC2
5
SRC2 CIM320-2013
• possibilité 2 :
faire un parseur de tag (ou smiley) permettant de faire vibrer par exemple la zone des phrases
affichées lorsque l'on tape «#votrepseudo» dans une phrase.
analyser la derniere phrase ecrite et si le tag '#' apparaît suivi de votre pseudo, faite vibrer la zone
d'affichage (ou la faire clignoter)
pour cela, rajouter un timer (setInterval) qui récupere dans une variable la derniere phrase « dite »
et analysez cette phrase à la recherche de #monpseudo, si vous le trouvez faite bouger la zone
d'affichage.
Astuces :
lance la fonction toute les 2s
setInterval(function(){ ..}, 2000) ;
recupere dans la variable recup le resultat de l'appel au fichier dernierephrase.php
$.ajax({url: "dernierephrase.php"}).done(function( recup ) {
...
});
pour savoir si la chaine recup contient la sous-chaine « #monpseudo »
recup.indexOf('#monpseudo')
cette fonction renvois -1 si elle ne trouve pas la souschaine (sinon elle renvois une valeur entre 0 et
n...)
pour faire vibrer un div avec jquery :
et bien, voir google « faire vibrer div avec jquery« !
SRC2