Comment créer un sondage avec PHP et jQuery, première partie
Concevoir RAPIDEMENT un système de vote simple
Vous avez besoin de créer un sondage sur votre site web, mais ne souhaitez pas vous encombrer d’un autre module externe lourd et restrictif ? Voici la solution !
Il est assez simple de créer un système de vote sur votre site web. Dans cette première partie, je vais vous expliquer comment. Dans la deuxième partie à venir, je montrerai comment pousser le module un peu plus loin selon vos besoins. Il est donc temps d’ouvrir votre éditeur de code favori et de débuter le travail !
Si vous souhaitez seulement récupérer les fichiers du projet, c’est ici.
Pour voir et tester le résultat final du projet, c’est ici.
Base de données et architecture des fichiers
Vous pouvez structurer le projet comme vous le désirez, l’exemple que je vous donne n’étant pas lié à un site web particulier, je vais faire ça simplement.
Commençons par la base de données. Libre à vous d’utiliser une nouvelle base de données ou une préexistante, vous allez y ajouter une table avec 3 colonnes (name, image et votes) et la nommer pollitems. Voici ce que vous devriez avoir :
Vous pouvez maintenant ajouter les éléments de vote à votre BD. La colonne name contient le nom de l’élément tel qu’il sera affiché dans le sondage. La colonne image contient le nom de fichier de l’image liée à l’élément et pour la colonne votes, mettez-la simplement à zéro.
Ensuite, sur votre serveur, à la racine du dossier choisi, vous allez créer 5 fichiers : f.php, index.php, poll.js, styles.css et voteProcess.php. Vous devez aussi inclure un dossier pour les images si vous souhaitez en utiliser, mon dossier sera donc simplement nommé images. Vous pouvez déjà ajouter les images pour chaque élément du sondage.
Commencez par lier l’index aux styles, au fichier poll.js et incluez-y le fichier f.php. Vous devrez aussi ajouter la librairie jQuery, ici ajoutée via un CDN.
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="poll.js"></script>
<link rel="stylesheet" href="styles.css">
<title>PHP Poll</title>
</head>Mais à quoi serviront tous ces fichiers ?
f.php : ce fichier regroupera toutes nos fonctions PHP.
index.php : l’accueil de notre projet, ce fichier affichera le sondage.
poll.js : fichier qui englobera les besoins du projet au niveau du JavaScript / jQuery.
styles.css : fichier des styles pour donner un beau visuel à notre sondage. Vous pourrez le personnaliser comme vous voudrez, je vais donc passer très rapidement sur cette partie.
voteProcess.php : fichier qui sera appelé via AJAX pour soumettre les votes.
Créons les fonctions PHP
Ouvrez f.php, nous allons y créer les fonctions nécessaires à ce projet. À noter que j’utilise PDO pour accéder à ma base de données. Il est possible d’y aller autrement, vous devrez cependant adapter le code. Donc, la première étape est d’établir la connexion avec la BD.
function Query($z){
$user = "USERNAME";
$pass = "PASSWORD";
$dbname="DATABASE NAME";
$dbh = new PDO('mysql:host=localhost;dbname='.$dbname, $user, $pass);
$dbh->query('SET NAMES utf8');
return $dbh->query($z);
}Nous créerons ensuite les 4 fonctions dont nous aurons besoin. Rien de bien complexe ici.
function Query($z){
$user = "USERNAME";
$pass = "PASSWORD";
$dbname="DATABASE NAME";
$dbh = new PDO('mysql:host=localhost;dbname='.$dbname, $user, $pass);
$dbh->query('SET NAMES utf8');
return $dbh->query($z);
}
function selectAllItemsRand(){
$contents = Query("SELECT * FROM pollitems ORDER BY RAND()");
return $contents;
}
function selectAllItemsByVote(){
$contents = Query("SELECT * FROM pollitems ORDER BY `votes` DESC");
return $contents;
}
function selectVoteFrom($name){
$contents = Query("SELECT * FROM pollitems WHERE `name`='".$name."'");
foreach($contents as $content){
return $content['votes'];
}
}
function addVoteTo($name){
Query("UPDATE `pollitems` SET `votes`='".(selectVoteFrom($name)+1)."' WHERE `name`='".$name."'");
}Mais à quoi serviront ces fonctions ?
selectAllItemsRand : cette fonction sélectionne tous les éléments de la BD dans un ordre aléatoire. En ayant un ordre variable, aucun élément du sondage ne sera favorisé par son emplacement.
selectAllItemsByVote : cette fonction sélectionne tous les éléments de la BD en les classant par nombre de votes. Ce sera utilisé pour afficher les résultats du sondage dans le bon ordre.
selectVoteFrom : cette fonction nous permet de récupérer le nombre de votes d’un élément. Elle sera utilisé dans la fonction suivante.
addVoteTo : cette fonction ajoute un vote à un élément. Nous récupérons le nombre de votes et y ajoutons un vote supplémentaire avant de réinsérer le nombre dans la BD.
Affichons notre sondage
Maintenant que vos fonctions sont créées, ouvrez à nouveau index.php. Le balisage que je vais vous montrer est très simple, vous pouvez le modifier afin d’accommoder vos besoins (certaines parties du code pourraient nécessiter un ajustement selon les modifications apportées). La partie importante ici est la boucle PHP qui va récupérer les éléments à afficher un par un.
<body>
<div class="wrapper poll">
<h1>Vote for your favorite punk rock band</h1>
<div class="pollitems">
<?php
$pollitems = selectAllItemsRand();
$i = 0;
foreach($pollitems as $pollitem){
?>
<input type="radio" class="pollInput" name="pollInput" value="<?=$pollitem['name'];?>" id="poll<?=$i;?>">
<label for="poll<?=$i;?>" class="pollLabel">
<img src="images/<?=$pollitem['image'];?>" alt="<?=$pollitem['name'];?>">
<h2><?=$pollitem['name'];?></h2>
</label>
<?php
$i++;
}
?>
</div>
<a href="#" class="submitPoll">Vote</a>
</div>
</body>À ce moment, si vous affichez votre projet dans votre navigateur, vous devriez y voir vos éléments. Assurez-vous que c’est bien le cas avant de poursuivre.
La prochaine étape est créer le style visuel de votre sondage en CSS dans le fichier styles.css. Vous pouvez reprendre le style qui accompagne ce projet ou créer entièrement le vôtre. Vous pouvez récupérer le style du projet avec le reste des fichiers ici.
Préparation du fichier chargé en AJAX
Nous allons maintenant préparer le fichier qui s’occupera d’envoyer les votes et qui nous retournera les résultats du sondage. Ouvrez voteProcess.php et insérez-y ce bout de code.
<?php
include('f.php');
$voteValue = $_POST['value'];
addVoteTo($voteValue);
?>
<h2 class="resultH2">You voted for : <strong><?=$voteValue;?></strong></h2>
<table class="results">
<?php
$pollItems = selectAllItemsByVote();
foreach($pollItems as $pollItem){
?>
<tr>
<td><strong><?=$pollItem['name'];?> :</strong></td>
<td><?=$pollItem['votes'];?></td>
</tr>
<?php
}
?>
</table>Ce code récupère le nom de l’élément sélectionné et qui sera envoyé par AJAX. On envoie ensuite le vote avec la fonction addVoteTo. Le reste du code consiste en une boucle similaire à celle sur index.php qui retournera un tableau des résultats de vote pour les afficher à l’utilisateur après la soumission de son choix.
Gestion des erreurs et de la soumission du vote avec jQuery
Nous avons presque terminé. Ouvrez le fichier poll.js, nous allons y insérer un peu de code pour faire le lien entre nos fichiers.
En premier lieu, nous voulons créer un message d’erreur si un utilisateur soumet le sondage sans avoir sélectionné un élément de vote. Nous utilisons ici la classe “enabled” pour vérifier si un choix a été fait ou non.
Une fois cette vérification faite, si un choix a bien été fait, nous allons envoyer les données au fichier voteProcess.php créé précédemment et afficher les résultats du vote qui nous serons retournés.
$(document).ready(function(){
$(".pollLabel").click(function(){
$("p.error").remove();
$("a.submitPoll").addClass("enabled");
});
$("a.submitPoll").click(function(){
if($(this).hasClass("enabled")){
var voteValue = $("input[name='pollInput']:checked").val();
$.post( "voteProcess.php", {value: voteValue}, function(data) {
$(".wrapper.poll").slideUp(400, function() {
$(".wrapper.poll").html(data);
$(".wrapper.poll").slideDown();
});
});
}else{
$(this).before("<p class='error'>You need to select an item in order to vote.</p>");
}
});
});Le sondage devrait maintenant être entièrement fonctionnel. Il ne vous reste plus qu’à adapter le style selon les besoins de votre utilisation.
C’est ce qui conclut le premier chapitre de ce projet. La deuxième partie se concentrera sur des éléments d’amélioration à apporter au sondage. On y verra entre autres comment ajouter une date de clôture du sondage et comment prévenir le vote multiple.
C’est tout ! J’espère que vous avez apprécié cet article. Vous pouvez me contacter à tout moment si vous souhaitez plus d’informations sur ce projet ou si vous avez besoin d’un coup de main.