23
Déc 08
Posté à 18:14 par eMeRiKa -
Catégorie : Programmation
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.

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.
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.
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 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 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 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.
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 !
Lu 6576 fois
Bonjour.
Dans votre fichier save_vote.php vous mettez le commentaire suivant:
/* On peut imaginer vérifier si le membre a déja voté ou pas */
Comment réaliser cela ?
Merci d'avance!
#1 Posté par Zizou le 05/07/09 à 19:56, son 1er commentaire
Bonjour,
Il s'agit de PHP et de MySQL (ou d'un autre langage). Il faut enregistrer le vote et regarder si le membre (ou le visiteur via son adresse IP) a déjà voté.
Cela dépasse largement le cadre de ce tuto qui est du javascript.
#2 Posté par eMeRiKa le 07/07/09 à 18:57, son 192ème commentaire
bravo pour ce script.
Je me demande comment faire pour que le systeme de notation "préaffiche" la note moyenne deja obtenue par les precedents votes, (par exemple en coloriant les etoiles dans une autre couleur) avant la notation par l'utilisateur du moment
J'ai evidemment couplé un SQl derriere save vote .php, où j'enegistre l'id de chaque article noté ainsi que deux compteurs: nb de vote, et total des scores.
J'aimerai donc pouvoir utiliser la note moyenne dejà obtenue par l'article, avant qu'il soit noté de nouveau.
Merci de ta réponse, mage de l'ajax ;-) (ne pas confondre avec gerard majax,lol)
#3 Posté par bdoliver007 le 27/10/09 à 17:06, son 1er commentaire
alors en fait il faut que tu fasses une recherche de note, si le membre connecté a déjà une note tu affiches sa note sinon tu laisses vide.
un truc qui ressemble à :
if($userNote > 0) echo 'images déjà voté" else echo "images pas voté"
#4 Posté par eMeRiKa le 28/10/09 à 10:39, son 192ème commentaire
135 articles dans la base de données
bonjour moi je connais une adresse mail contact francophone oiu on peut commander s ...
Posté par seb le 11/08/10 à 22:24 sur l'article Acheter ses cigarettes sur internet
bonjour ou on peut acheté des clop en ligne
Posté par nana le 08/08/10 à 16:40 sur l'article Acheter ses cigarettes sur internet
Pour la livraison je compte 2 semaines
J'y suis depuis quelques temps je oeux vous ...
Posté par jean le 07/06/10 à 08:39 sur l'article Acheter ses cigarettes sur internet
Posté par extrem le 28/05/10 à 13:11 sur l'article Digipresse en ligne
Cigarettes bon marché en ligne
Cigarettes bon marché - Les cigaret ...
Posté par 561zeevwi le 03/05/10 à 12:37 sur l'article Acheter ses cigarettes sur internet
Bonjour tout le monde, Merci eMeRiKa pour ce tuto très clair, mais j'aimerai ...
Posté par spykoN le 30/04/10 à 10:45 sur l'article Tutorial : Ajax avec Prototype
Je ne trouve pas de référence à FF comme le principal concurre ...
Posté par eMeRiKa le 18/04/10 à 18:27 sur l'article Google Chrome
Je ne suis pas d'accord sur le fait que Firefox soit le principal concurrent de Chr ...
Posté par Tof le 17/04/10 à 00:51 sur l'article Google Chrome
664 commentaires dans la base de données
Singstar : une love story qui sonne faux
Clip the parachute ending - Birdy Nam Nam
Google Street View Slow motion
Cat Shower 2
Wii Kebab
Le Jour du Permis - Facebook
Chargement en cours!
