Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Créer un sondage dynamique avec jQuery et PHP

by
Difficulty:IntermediateLength:LongLanguages:

French (Français) translation by Syméon Smith (you can also view the original English article)

Lorsque vous combinez des fonctionnalités intéressantes de PHP et l'intelligence de jQuery, vous pouvez arriver à des résultats plutôt cools. Dans ce tutoriel, on va créer un sondage en utilisant PHP et HTML, et ensuite utiliser un peu des effets de jQuery Ajax pour éliminer le besoin de rafraîchir la page et ajouter des petites animations.

  1. HTML
  2. PHP
    1. Introduction
    2. poll_default()
    3. poll_submit()
    4. poll_return_results()
    5. poll_ajax()
  3. CSS
  4. Javascript
    1. Introduction
    2. formProcess()
    3. loadResults()
    4. animateResults()

HTML

Configurons notre <head> :

  • style.css va contenir le CSS.
  • jquery.js est la librairie de base de jQuery.
  • jquery.cookie.js est un plugin de Klaus Hartl pour ajouter la manipulation de cookies à jQuery.
  • poll.js contiendra le code Javascript qui rendra le sondage dynamique.

Ensuite, on va créer un simple formulaire de sondage :

Poll

Ce formulaire sera traité par le PHP pour l'instant, et lorsque nous écrirons le Javascript il le sera par jQuery. Le PHP et Javascript sont créés pour extraire l'option ID du tag value. &nbsp; est juste un espace encodé en HTML, et &rarr; une flèche : →


PHP

Introduction

Si Javascript est désactivé, le PHP va :

  1. Prendre les requêtes GET/POST du formulaire
  2. Installer/vérifier un cookie
  3. S'assurer que la requête vient d'un IP unique
  4. Stocker le vote dans une base de données
  5. Renvoyer les résultats avec un fichier HTML

Si Javascript est activé, le PHP va :

  1. Prendre les requêtes GET/POST du formulaire
  2. S'assurer que la requête vient d'un IP unique
  3. Stocker le vote dans une base de données
  4. Renvoyer les résultats en JSON

Pour la base de données nous utiliserons un package écrit par Luke Plant.

D'abord, on a besoin d'un tableau avec les noms et les IDs des options du sondage :

Le package de la base de données utilise des nombres pour identifier les colonnes, donc on crée des constantes pour les convertir en noms :

Lorsque le formulaire est soumis, PHP a besoin de savoir dans quel fichier inscrire et récupérer les résultats, donc on crée une autre constante :

On doit inclure flatfile.php et initialiser l'objet de la base de données :

Les flat files sont juste des fichiers textes stockés dans le dossier de données :

Si on a une requête avec le paramètre du sondage, c'est le formulaire statique, donc on le traite. Si la requête contient un paramètre de vote, c'est une requête Ajax. Autrement, on renvoie juste HTML_FILE.

poll_default()

poll_default() redirige les requêtes directement vers le script sans requête GET/POST valide.

La ligne global rend l'objet $db accessible à la portée de la fonction.

Le script traque les IPs uniques pour être sûr que vous ne votiez qu'une fois, donc on fait une requête pour vérifier si c'est dans la base de données.

Si on a pas de cookie et que la requête d'IP revient vide, le client n'a donc pas encore voté, et on peut donc envoyer le fichier HTML qui contient le formulaire. Sinon, on envoie les résultats du sondage :

poll_submit()

poll_submit() prend la soumission du formulaire, vérifie su le client a déjà voté et met ensuite à jour la base de données avec le nouveau vote.

Ces lignes prennent l'ID de l'option sélectionnée et lui ajoute $id :

On doit vérifier si l'option est déjà dans la base de données :

Si elle est déjà dans la base (le résultat n'est pas vide), on doit lancer updateSetWhere(). Si elle n'y est pas on fait un insert() :

Dans les deux cas, on doit insérer l'IP dans la base et ajouter un cookie (qui expire dans un an) :

poll_return_results()

poll_return_results() génère les résultats du sondage, remplace le formulaire avec les résultats dans le fichier HTML et renvoie le fichier au client.

D'abord, on prend le fichier HTML et on l'attache à $html :

Ensuite, on commence la structure HTML des résultats :

Pour créer le HTML des résultats on doit trier les lignes (options) de la base de données par nombre de votes :

On doit aussi avoir le nombre total de votes pour calculer les pourcentages :

Ensuite, on calcule le pourcentage de votes que l'option en cours a :

Le HTML pour les résultats sera une liste de définitions (<dl>) stylée avec CSS pour créer des barres de graphe :

Aussi, on doit vérifier si l'option en cours est celle pour laquelle le client a voté, et donc si on doit en changer la couleur :

Ici, on ajoute le nombre total de votes et on ferme les tags HTML :

Ceci est une expression qui trouve la <div> poll-container :

La dernière étape pour cette fonction est de remplacer le formulaire avec les résultats en utilisant le regex, puis renvoyer le résultat :

poll_ajax()

poll_ajax() prend une requête de Javascript, ajoute le vote à la base de données et renvoie le résultat sous forme de JSON.

Il y a quelques lignes de code qui sont différentes de poll_submit(). La première vérifie si Javascript veut juste les résultats, et si aucun vote ne doit être compté :

Les 2 autres lignes sélectionnent toute la base et la renvoie en JSON :


CSS

Poll Results

Ce CSS stylise les résultats retournés par le PHP ou le Javascript.

  • .graph stylise le conteneur des barres, des titres et des pourcentages. La largeur (width) sera différente pour chaque site.
  • .bar-title stylise les titres des barres du graphique.
  • .bar-container stylise les barres individuelles et les conteneurs des pourcentages.
  • .bar-container div stylise la div à laquelle la barre est accrochée. Pour créer les barres, un width en pourcentage est ajoutée par PHP ou Javascript.
  • .bar-container strong stylise les pourcentages.
  • #poll-results p stylise le nombre de votes total.

Javascript

Introduction

Le Javascript va intercepter le bouton d'envoi, envoyer le vote avec Ajax et animer les résultats.

D'abord, quelques variables globales. Vous reconnaîtrez sûrement les 3 premières du PHP. votedID stocke l'ID de l'option pour laquelle le client a voté.

Maintenant, on a besoin d'une fonction jQuery qui se lance quand la page charge :

Dans cette fonction on enregistre le bouton de vote qui lancera formProcess lorsqu'il sera activé :

On doit aussi vérifier si la <div> des résultats existe, et animer les résultats si oui :

Si on a un cookie on passe directement à la génération des résultats car l'utilisateur à déjà voté. Pour ce faire, on doit se débarrasser du formulaire de sondage, obtenir l'id depuis le cookie, obtenir les résultats depuis le PHP et les passer à loadResults().

formProcess()

formProcess() est appelé par l'évènement de soumission qui passe un objet. Il empêche le formulaire d'être soumis normalement, vérifie/met en place les cookies, lance une soumission par Ajax à la place, et appelle ensuite loadResults() pour convertir les résultats en HTML.

D'abord, on doit empêcher l'action par défaut (soumettre le formulaire) :

Ensuite, on récupère l'ID de l'option sélectionnée :

input[@name='poll']:checked est un sélecteur jQuery qui sélectionne un <input> avec un attribut de name='poll' coché. attr("value") récupère la valeur de l'objet qui est dans notre cas optnn est l'ID de l'option.

Maintenant que l'on a l'ID, on peut le traiter. Pour commencer, on fait disparaître le formulaire avec une animation et on crée une fonction anonyme qui se lance lorsque l'animation est terminée. Les animations n'arrêtent pas le script, et des choses bizarres arrivent si vous n'utilisez pas cette méthode.

Après que l'animation soit terminée, on peut supprimer le formulaire du DOM en utilisant empty() :

Dans ce cas, $(this) est un raccourci jQuery pour l'élément du DOM auquel l'animation était appliquée.

jQuery a d'autres fonctions de raccourcis, comme $.getJSON() qui prend des requêtes pour des objets JSON. Quand on a l'objet, on appelle loadResults() avec :

La dernière chose à faire est de mettre en place le cookie :

loadResults()

loadResults() est appelé par $.getJSON() qui passe un objet JSON contenant les résultats. C'est presque la même chose qu'avec le PHP poll_return_results() avec quelques exceptions. La première différence est que l'on met la width de toutes les barres à 0% parce qu'on va les animer. L'autre différence est que l'on utilise append() de jQuery au lieu d'un regex pour montrer les résultats. Après que les résultats soient apparus, la fonction appelle animateResults().

animateResults()

animateResults() passe dans toutes les barres et anime la width de chacune d'entre elles basé sur le pourcentage de votes.

each() est une fonction jQuery qui passe dans chaque élément sélectionné.

D'abord, on ajoute le pourcentage au texte de l'élément à côté de la barre, qui est le <strong> contenant le pourcentage.

On s'assure ensuite que la width est bien à 0%, puis on l'anime :

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.