Affinity-web`Blog

Utiliser le Javascript non intrusif !!

Voici un tuto permettant de réaliser un système de vote Ajax. Pour ce faire vous devez avoir des connaissances en HTML, JS (particulièrement le framework Prototype) et PHP.

Tester la demo pour voir le résultat final.

J'ai choisi de réaliser le tuto avec du JS non intrusif, c'est à dire qu'il sera séparé du html. Il utilisera la méthode Event de Prototype et la navigation dans le DOM en JS. Cela parait plus compliqué mais le code HTML est vraiment plus propre et une fois l'habitude prise c'est aussi facile.

Si vous ne vous sentez pas à l'aise avec Prototype, vous pouvez consulter deux tutoriaux que j'ai écrits :

• Débuter avec PrototypeJS (je décrit la méthode des évènements et du js non intrusif dans la 2ème partie
• Tutorial : Ajax avec Prototype

SI vous ne vous rappelez plus comment naviguer dans l'arbre DOM en JS, je vous conseille cet article : Savoir se placer sur un document XHTML

J'utilise la version 1.5 de Prototype JS que vous retrouverez dans l'archive contenant les fichiers et images de base à télécharger ici.

Le fichier vote_ajax.html est celui qui va nous servir de base. Deux photos sont affichées ainsi que des étoiles permettant de voter.

La première étape est d'attribuer des évènements sur les étoiles, ce que d'habitude on fait dans le HTML en mettant onclick, onmouseover et onmouseout.

Nous allons donc rajouter dans le fichier fonctions.js le code suivant :

Le code étant commenté, vous devriez avoir compris la méthode. Nous avons au final 3 fonctions saveVote, starOver et starOut qui vont nous permettre de réaliser le système.

Nous voulons maintenant dans la fonction starOver, changer les images des étoiles au survol sur l'une d'elle.

Prototype nous facilite grandement la tâche via sa méthode Element.previousSiblings() dont la doc est consultable ici

On va utiliser exactement le même principe pour la fonction starOut, on pourrait imaginer d'ailleurs les regrouper en une seule fonction.

Dernière partie sauvegarder la note attribuée et l'afficher, on va bien sur utiliser Ajax pour le faire en asynchrone.

Vous remarquerez que l'attribut alt des étoiles contient la note (de 1 à 5 ici) qui est totalement compréhensible si les images ne s'affichent pas et qui nous permet de récupérer la valeur simplement.

Enfin, il faut également savoir pour qui on vote : ici j'ai mis l'id de ma photo dans le span parent des étoiles. Prototype récupère l'élément parent en utilisant la méthode Element.up() consultable ici.

L'id de l'élément span servira également à remplacer les étoiles de vote par la note attribuée par l'utilisateur ou la somme des notes. Ici j'indique la valeur du vote pour plus de simplicité.

Il suffit de faire l'enregistrement de la note en base de donnée dans le fichier save_vote.php. On peut ajouter une vérification si le membre a voté. Ensuite on echo le résultat. Mais tout çà je vous laisse faire!!!

Au final on se rend compte qu'utiliser le DOM et prototype rend cet exercice de système de vote en AJAX beaucoup plus simple que s'il avait été fait autrement et surtout beaucoup plus facilement utilisable dans une page dynamique. Il suffit de mettre une balise p avec la classe zone_vote et un id, puis de mettre les 5 images d'étoiles dedans.

Les derniers articles de la catégorie : Programmation

• Mes logiciels pour le développement web
• Le choix d'une technologie
• Zend Framework
• Tuto : système de vote Ajax via Mootools
• Tuto PHP : couper une chaîne fin d'un mot
• IE 6 enfin accessible sous Windows Vista
• Tuto: menu rollover et preload des images
• Un site web valide W3C ne prouve rien ...