Share
Dans ce tutoriel, nous allons créer un plugin jQuery du début à la fin; Ce plugin nous permettra (à d’autres développeurs) d’ajouter facilement un widget de sondage simple à une page Web ou à un blog. Par widget de sondage, j'entends un domaine dans lequel une question est posée et à laquelle les visiteurs sont encouragés à répondre. Une fois qu'ils ont répondu à la question, les résultats du sondage seront affichés..
La vidéo ci-dessus et la capture d'écran ci-dessous montrent ce sur quoi nous allons travailler:
Le plugin utilisera bonté jQuery pour générer la structure DOM du widget, ainsi que pour capturer la réponse à la question et la transmettre au serveur pour le stockage. Nous allons utiliser un peu de base PHP pour ajouter le vote le plus récent à une base de données MySQL, puis renvoyer les nouveaux résultats dans un objet JSON. jQuery sera ensuite utilisé pour traiter la réponse et afficher les résultats (comme indiqué ci-dessus) dans le widget..
Bien que l'installation et la configuration d'un serveur Web, PHP et MySQL n'entrent pas dans le cadre de ce didacticiel, nous allons examiner toutes les étapes nécessaires, y compris la configuration de la base de données. Dans l’ensemble, nous allons travailler avec CSS, HTML, jQuery, PHP, MySQL et JSON au cours de ce didacticiel..
Nous devrions avant tout aménager notre zone de développement. Pour exécuter cet exemple sur un ordinateur de bureau (pour le développement, les tests, etc.), vous devez exécuter les exemples de fichiers à partir d'un répertoire sur lequel notre serveur Web peut servir le contenu. J'utilise Apache et j'ai un dossier de configuration sur mon lecteur C appelé site apache. Ceci est le répertoire de contenu pour mon localhost. Dans ce dossier (ou le dossier équivalent sur votre système), nous devrions créer un nouveau dossier appelé sondage. Ceci est où tous nos exemples de fichiers seront stockés.
Pour créer un plugin jQuery, nous allons aussi avoir besoin d’une copie de jQuery elle-même; la dernière version est 1.31.js et peut être trouvée à http://jquery.com. Téléchargez-le au sondage répertoire que nous venons de créer. Jusqu'ici, le dossier devrait ressembler à ceci dans l'explorateur (ou une application équivalente de l'explorateur de fichiers):
Ensuite, nous pouvons configurer la base de données qui sera utilisée pour stocker les résultats du sondage. nous pouvons le faire assez facilement en utilisant l'interface de ligne de commande MySQL (CLI) assez facilement, bien que des interfaces graphiques frontales de base de données puissent également être utilisées. Ouvrez l'interface de ligne de commande MySQL et créez une nouvelle base de données appelée poll à l'aide de la commande suivante:
CREATE DATABASE poll;
le CREATE DATABASE La commande fait exactement ce qu’elle dit sur l’étain et crée une nouvelle base de données avec le nom spécifié. Une fois que nous avons une base de données, nous devrons créer une nouvelle table dans laquelle stocker les résultats du sondage. Avant de pouvoir le faire, nous devons sélectionner la nouvelle base de données. la UTILISATION commande fera ceci:
USE poll;
Pour créer une nouvelle table, nous utilisons le CREER LA TABLE commande, en spécifiant les noms des colonnes de la table:
CREATE TABLE résultats (choix VARCHAR (20), votes INT);
Si nous déployions cela sur un site, nous commencerions par une table vide, mais pour que nous puissions voir des résultats sans répondre à la question à plusieurs reprises, nous pouvons entrer des données factices dans la table. Le moyen le plus rapide et le plus simple de le faire pour de petits ensembles de données (seulement 5 lignes dans cet exemple) est de le faire manuellement, ce que nous pouvons faire avec la série de commandes suivante:
INSCRIRE DANS LES VALEURS DES RÉSULTATS («choice0», 100); INSÉRER DANS LES VALEURS DES RÉSULTATS (?? choice1 ??, 67); INSCRIRE DANS LES VALEURS DES RÉSULTATS (?? choice2 ??, 11); INSÉRER DANS LES VALEURS DES RÉSULTATS («choice3», 51); INSCRIRE DANS LES VALEURS DES RÉSULTATS («choice4», 38);
La commande doit être assez simple, n'oubliez pas d'appuyer sur Entrée après chaque ligne. Le seul point à noter est que la première ligne est choix0 au lieu de choix1 ceci est fait pour faciliter le travail avec l'objet JSON dans notre script. À ce stade, votre CLI devrait ressembler à la capture d'écran suivante:
Nous en avons terminé avec la CLI afin de pouvoir la quitter et passer à la tâche suivante ?? créer le plugin.
Nous avons un certain nombre de tâches à accomplir avec le code du plugin; nous devons créer la structure DOM pour le widget, ajouter un gestionnaire qui écoute la soumission de la sélection, transmettre les résultats au serveur et traiter la réponse, ainsi que d'afficher les résultats une fois traités. On peut aussi ajouter du sucre sous forme de messages d'erreur et de résultats animés.
Cela va prendre quelques lignes de code à coup sûr, mais cela en vaudra la peine car nous verrons combien il est facile de créer un plugin robuste, fonctionnel et avancé qui offre une interactivité et ajoute de la valeur à la page. Commençons par un début; Dans un nouveau fichier de votre éditeur de texte, ajoutez le code suivant:
Accentsconagua