Affinity-web`Blog

Il y a un moment qu'aucun tutoriel n'avait été publié sur ce blog. Pour corriger cela, je vous propose aujourd'hui un tutoriel pour créer un système de vote Ajax via Mootools. Il s'agit en faite du tutoriel Système de vote Ajax via Prototype réécrit pour fonctionner avec un autre framework JS du nom de Mootools.

Pourquoi changer de framework

Il existe de nombreux frameworks Javascript dont les plus connus : Jquery, Prototype & Scriptaculous et enfin Mootools. Jusqu'à présent je me servait de Prototype & Scriptaculous mais avec le temps Jquery et Mootools ont bien évolué et sont devenus plus performants que prototype & scriptaculous. Plus rapide, proposant un code plus propre, plus léger et avec de nombreuses extensions disponibles, il était temps de changer de framework JS. J'ai choisi mootools car il dérive à la base de Prototype, le changement est donc plus facile même s'il s'est bien différencié de son ancien modèle.

Le tuto

Voici la démo du résultat final du tutoriel. Visuellement aucun changement par rapport à l'ancien tuto réalisé avec Prototype.

Le tutoriel a été écrit avec la version 1.2.1 de Mootools. Je vous ai préparé une archive contenant le fichier html de base, les images et le PHP, vous pouvez la télécharger ici (click droit, enregistrez la cible du lien sous) .

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.

Avec mootools on utilise du Javascript non intrusif, c'est à dire que l'on ne met plus d'attribut onclick, onmouseover... dans le HTML. Ces évènements sont directement gérés via le fichier JS. La première étape est donc d'attribuer 3 évènements à chaque étoile.

• Un évènement au passage de la souris qui va faire changer l'image des étoiles
• Un évènement lors du click qui va envoyer la note
• Et enfin lorsque la souris quitte les étoiles on remet les images par défaut

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

La fonction globale window.addEvent('domready', function() {}); définit le chargement de notre page. Nous sélectionnons ensuite toutes les zones de vote, c'est à dire les balises ayant un span .zone_vote, grâce à la fonction Mootools $$(). (cf doc).

La fonction each (cf doc) permet de parcourir les zones de vote. On récupère tous les images de la zone de vote avec getChildren (cf doc).

Enfin on ajoute les trois évènements aux étoiles avec la fonction addEvent (cf doc). Comme avec Prototype il suffit de mettre "click" ou "mouseover" et non "onclick" et "onmouseover".

Au final nous avons créé trois évènements sur chaque étoile qui appellent trois fonctions : onStars, outStars, clickStar.

La fonction onStars

La première fonction permet de changer l'image des étoiles pour que l'utilisateur visualise son vote. On va rajouter au fichier JS :

La grand force de Mootools est de récupérer l'élément sélectionné uniquement en utilisant dans notre code this. La fonction getAllPrevious (cf doc) va servir à sélectionner les éléments précédents du même noeux du DOM. On change alors simplement l'image via l'attribut src.

La fonction outStars

La deuxième fonction fait exactement la même chose que la précédente mais avec l'image de base des étoiles. On va rajouter au fichier JS :

On pourrait très bien regrouper ces deux fonctions en une.

La fonction clickStar

La dernière fonction permet d'enregistrer le vote en Ajax et de l'afficher. On va rajouter au fichier JS :

On utilise encore this pour sélectionner l'image clickée, la valeur du vote a été placée dans l'attribut HTML alt de l'image. Ensuite on récupère l'identifiant de la photo qui correspond dans notre HTML à l'attribut id de la zone de vote. Il suffit donc de récupérer l'id de la balise au dessus via la fonction getParent (cf doc).

Si ce n'est pas clair regardez comment le HTML a été fait. On aurait pu trouver bien d'autres façons pour récupérer l'identifiant de la photo et la valeur du vote.

Une fois les valeurs récupérées, nous allons les transmettre en AJAX grâce à la méthode Request.HTML (cf doc). Les données seront envoyées en GET au fichier save_vote.php. Le résultat du fichier save_vote.php, ici un simple echo de la valeur du vote, remplacera les étoiles. La fonction $('') (cf doc) permet de cibler la zone que nous voulons remplacer.

Mootools rox

Au final, il est encore plus simple de réaliser ce système avec Mootools que Prototype. Je n'ai pris en main Mootools que depuis aujourd'hui mais je suis déjà convaincu de ces avantages.

A vous de jouer... Et en cas de problème laissez un commentaire !

Les derniers articles de la catégorie : Programmation

• Mes logiciels pour le développement web
• Le choix d'une technologie
• Zend Framework
• 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 ...