11
Nov 07
Posté à 18:26 par eMeRiKa -
Catégorie : Programmation
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 :
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.
Lu 7430 fois
Pense à changer de frameworks jvs, prototype est légèrement à la bourre en terme de vitesse/légèreté/plugins vis à vis de ces concurrents tels que jquery.
( la nouvelle version de Scriptaculous compte plus de 230ko de codes jvs pour inclure tous les modules, jquery 20ko. Trouvez le pbm ! )
#1 Posté par YoTsumi le 11/11/07 à 20:14, son 2ème commentaire
jquery il est certes léger, mais j'aime pas son système a multiple pluguin. C'est plutot mootools qui est intéressant!
Tu notes quand même que je parle pas de scriptaculous là donc son poids je m'en fous!! D'ailleurs les dernières versions de Prototype et scriptaculous viennent de sortir et la v2 de scriptaculous sera entièrement recodée!!
Donc merci je reste sur ce framework!!
#2 Posté par eMeRiKa le 11/11/07 à 20:37, son 192ème commentaire
Bonjour,
Je pense que votre blog aurait sa place dans http://www.blogobulle.com
bonne journée :)
#3 Posté par blogobulle le 12/11/07 à 15:36, son 1er commentaire
Merci pour ce tuto' Antoine ! Très intéressant... comme ton site ;o)
Continues comme ça !
@+
#4 Posté par Rém! le 12/11/07 à 20:42, son 0er commentaire
je cite : Il suffit de faire l'enregistrement de la note en base de donnée dans le fichier save_vote.php
et bein je suis pas dans la merde
#5 Posté par toto le 04/06/08 à 06:40, son 1er commentaire
Va aussi falloir faire le calcul de la note pour l'affichage :)
#6 Posté par eMeRiKa le 04/06/08 à 10:12, son 192ème commentaire
wow merci pour votre tuto vous m'avez sauve la vie je viens de passer 4jours a chercher un tuto qui repondait a mes besoins modifiable etc la j ai eu ce que je cherchais you guys are the best thx
#7 Posté par val le 11/06/08 à 15:54, son 1er commentaire
lien mort por le téléchargement des sources domage
http://www.lemondedesenigmes.com
#8 Posté par Tounet le 22/11/08 à 20:07, son 1er commentaire
C'est bon j'ai corrigé le lien mort. Les sources sont disponibles (enregistrer la cible du lien sous).
#9 Posté par eMeRiKa le 22/11/08 à 22:04, 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!
