[Plan du site]
Vous êtes ici ---
> Le Site du Zéro
> Les tutoriels
> Non-Officiels
> Site Web
> PHP
> Systèmes complets
> Création d'un système de sondage complet
> Lecture du tutoriel
Création d'un système de sondage complet
Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Bonjour à tous !
Vous avez déjà un site Web ou vous en créez un ?
Ce tuto est fait pour vous !
Nous allons réaliser un système complet de sondage où vos visiteurs pourront donner leur avis sur des questions que vous vous posez (à la manière du Site du Zéro).
Pour pouvoir suivre sans aucun problème ce tuto, il faut que vous maîtrisiez sans problème le
HTML et le
PHP.
- Vous êtes prêts ?
- Ouuui !
- Alors c'est partiii !
Nous allons faire un système complet de sondage, il faudra donc pouvoir :
- proposer un nouveau sondage (admin)
- voir le sondage et voter
- disposer d'une archive de tout les sondages (admin)
On va donc faire 3 pages différentes pour chacun des 3 points de cette liste.
Vous pouvez regrouper sans problème ces pages en modifiant le code (tant que vous avez la base, c'est bon). Cela dépend de votre site !
Pour enregistrer les résultats, nous allons avoir besoin de créer une table dans votre base de données.
On va aussi considérer que vous pouvez mettre au maximum 5 propositions pour une question ; pour cela il faudra initialiser 12 champs dans la table...
Il y a un grand nombre de champs mais c'est le minimum vital. Voyez vous-même :
Aperçu de la table "sondage"
| Nom du champs | Initialisation |
|---|
| id |
smallint / auto-increment |
| question |
text |
| proposition1 |
varchar |
| proposition2 |
varchar |
| proposition3 |
varchar |
| proposition4 |
varchar |
| proposition5 |
varchar |
| resultats1 |
smallint |
| resultats2 |
smallint |
| resultats3 |
smallint |
| resultats4 |
smallint |
| resultats5 |
smallint |
Je vous donne aussi la requête SQL qui permet de créer cette table (à copier dans PHPMyAdmin et n'oubliez pas de remplacer "BDD" par le nom de votre base de données) :
Code : SQL 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 | CREATE TABLE `BDD`.`sondage` (
`id` SMALLINT NOT NULL AUTO_INCREMENT,
`question` TEXT NOT NULL ,
`proposition1` VARCHAR( 100 ) NOT NULL ,
`proposition2` VARCHAR( 100 ) NOT NULL ,
`proposition3` VARCHAR( 100 ) NOT NULL ,
`proposition4` VARCHAR( 100 ) NOT NULL ,
`proposition5` VARCHAR( 100 ) NOT NULL ,
`resultats1` SMALLINT NOT NULL ,
`resultats2` SMALLINT NOT NULL ,
`resultats3` SMALLINT NOT NULL ,
`resultats4` SMALLINT NOT NULL ,
`resultats5` SMALLINT NOT NULL ,
PRIMARY KEY ( `id` )
) ENGINE = InnoDB
|
Autre chose : nous allons naviguer entre 3 pages. Pour vous aider, chaque fois que l'on va créer une nouvelle page, faites des liens pour les relier entre elles.
Créez une nouvelle page en appelant la
BDD puis en mettant le code source.
Reprenons, sur cette page concernant le webmaster, pour proposer un nouveau sondage vous écrivez une question et entre 2 et 5 propositions, vous validez et votre sondage est accessible par tout le monde.
Ecrivez un formulaire contenant 6 zones de textes (1 question et 5 propositions) et redirigez-le vers la même page. Ce formulaire représente tout le code XHTML de la page, le reste ne sera que du PHP et du MySQL.
Je vous montre le formulaire : pour la suite, reprenez les mêmes noms pour les zones de textes.
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13 | <form method="post" action="proposerSondage.php">
<p>
Question : <br/>
<input type="text" name="question" /><br/>
Propositions :<br/>
1 : <input type="text" name="proposition1" /><br/>
2 : <input type="text" name="proposition2" /><br/>
3 : <input type="text" name="proposition3" /><br/>
4 : <input type="text" name="proposition4" /><br/>
5 : <input type="text" name="proposition5" /><br/><br/>
<input type="submit" value="sonder !" />
</p>
</form>
|
Passons au PHP/MySQL pour enregister votre sondage dans la BDD.
- 1ère étape :
vérifier si la question existe, accompagnée au minimum de 2 propositions.
- 2ème étape :
verifier si la question et les 2 propositions ne sont pas nulles (égales à "")
- 3ème étape :
Après avoir ouvert la connexion avec la BDD, appliquer un "mysql_real_escape_string" à nos infos pour la sécurité mais aussi pour les apostrophes par exemple afin d'éviter les bugs ("C'est super !" devient "C\'est super !").
- Dernière étape :
Enregistrer toutes les informations dans la BDD !
Etant d'une extrême bonté, j'accepte de vous donner le code !
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32 | <?php
//On verifie si les infos existent
if (isset($_POST['question']) AND isset($_POST['proposition1']) AND isset($_POST['proposition2']))
{
//On verifie si elles ne sont pas nulles
if ($_POST['question'] != "" AND $_POST['proposition1'] != "" AND $_POST['proposition2'] != "")
{
//On ouvre la connexion avec la base de données
mysql_connect("localhost", "root", ""); //(La connexion se fait ici sur un réseau local)
mysql_select_db("sondage");
//On change la question et les propositions pour les enregistrer dans la BDD
$modif_question = mysql_real_escape_string($_POST['question']);
$modif_prop1 = mysql_real_escape_string($_POST['proposition1']);
$modif_prop2 = mysql_real_escape_string($_POST['proposition2']);
$modif_prop3 = mysql_real_escape_string($_POST['proposition3']);
$modif_prop4 = mysql_real_escape_string($_POST['proposition4']);
$modif_prop5 = mysql_real_escape_string($_POST['proposition5']);
//Enfin on enregistre les infos de notre sondage
mysql_query("INSERT INTO sondage SET
question = '" . $modif_question . "',
proposition1 = '" . $modif_prop1 . "',
proposition2 = '" . $modif_prop2 . "',
proposition3 = '" . $modif_prop3 . "',
proposition4 = '" . $modif_prop4 . "',
proposition5 = '" . $modif_prop5 . "' ") or die(mysql_error());
mysql_close(); // On se déconnecte de MySQL
}
}
?>
|
Chers Zéros nous en avons fini avec cette page !
Si tout marche bien vous devriez pouvoir maintenant enregistrer un sondage sans problème (dans la BDD,
1 entrée = 1 sondage).
Passons à la page visiteurs.
Cette page est celle visible par tous vos visiteurs. C'est sur celle-ci qu'ils en prennent connaissance et qu'ils votent.
Comme la page "proposerSondage.php", elle est composée de 2 blocs distincts : PHP/MySQL et XHTML.
Avant toutes choses, appelez la BDD pour avoir sous la main toutes les infos dont on va avoir besoin.
Il nous faut un array contenant la question et les propositions et un autre contenant le nombre de votes pour chaque choix. Pour les "récolter", il faut savoir quel est l'id le plus grand donc pour savoir quel est le sondage le plus récent.
Je crois que ce sera plus facile à comprendre en voyant le code :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 | <?php
//On prend l'id le plus grand (donc le plus récent).
$nombreEntrees = mysql_query("SELECT MAX(id) AS nbre_entrees FROM sondage") or die(mysql_error());
$numeroDuSondage = mysql_fetch_assoc($nombreEntrees);
//On sélectionne le nombre de votes
$MySQL_votes = mysql_query("SELECT resultats1, resultats2, resultats3, resultats4, resultats5 FROM sondage WHERE id = '" . $numeroDuSondage['id'] . "'") or die(mysql_error());
$votes = mysql_fetch_assoc($MySQL_votes);
//On sélectionne la question et les choix
$MySQL_questProp = mysql_query("SELECT question, proposition1, proposition2, proposition3, proposition4, proposition5 FROM sondage WHERE id = '" . $numeroDuSondage['id'] . "'") or die(mysql_error());
$infos = mysql_fetch_array($MySQL_questProp);
?>
|
Maintenant que tout est prêt, on va faire le formulaire permettant à votre visiteur bien-aimé de pouvoir exprimer sa voix.
Là encore je vais vous demander de garder la valeur de l'attribut "value" pour les tests PHP plus tard.
Et si on a choisi moins de 5 propositions ? Il y aura des cases à cocher qui ne correspondent à rien ! C'est nul !
Mais non voyons !
J'ai
oublié de pas encore eu le temps de vous dire qu'il va falloir vérifier que le champ correspondant à la proposition 3, 4 et 5 n'est pas vide avant d'afficher les 3 derniers boutons.
Regardez :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 | <!-- On mais le même attribut pour "name" pour qu'on puisse cocher qu'une case-->
<form method="post">
<fieldset>
<!-- On affiche la question au visiteur ;-) -->
<legend><?php echo "" . $infos['question'] . ""; ?></legend>
<input type="radio" name="sondage" value="prop1" id="prop1" /> <label for="prop1"><?php echo $infos['proposition1'] . " ..... (votes : " . $votes['resultats1'] . ")"; ?> </label><br />
<input type="radio" name="sondage" value="prop2" id="prop2" /> <label for="prop2"><?php echo $infos['proposition2'] . " ..... (votes : " . $votes['resultats2'] . ")"; ?></label><br />
<!-- On verifie si il est utile de mettre plus de boutons -->
<?php
if ($infos['proposition3'] != "")
echo "<input type='radio' name='sondage' value='prop3' id='prop3' /> <label for='prop3'>" . $infos['proposition3'] . " ..... (votes : " . $votes['resultats3'] . ") </label><br />";
if ($infos['proposition4'] != "")
echo "<input type='radio' name='sondage' value='prop4' id='prop4' /> <label for='prop4'>" . $infos['proposition4'] . " ..... (votes : " . $votes['resultats4'] . ") </label><br />";
if ($infos['proposition5'] != "")
echo "<input type='radio' name='sondage' value='prop5' id='prop5' /> <label for='prop5'>" . $infos['proposition5'] . " ..... (votes : " . $votes['resultats5'] . ") </label><br />";
?>
</fieldset>
<input type="submit" value="Voter !"/>
</form>
|
Et voilà !
Il ne nous reste plus que l'enregistrement du vote. Ce sera assez rapide : nous avons déjà l'array renvoyé par MySQL contenant le nombre de votes dans chaque catégorie.
En fonction de la case qui a été cochée, il ne nous reste plus qu'à incrémenter (+1) les votes et les enregistrer.
On fait 5 tests pour 5 conditions ;
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 | <?php
$prop = "prop";
$resultat = "resultats";
$fin = false;
if(isset($_POST['sondage']))
{
for($i = 1; $i <= 5 && !$fin; $i++)
{
if($_POST['sondage'] == $prop . $i)
{
$votes[$resultat . $i] ++;
mysql_query("UPDATE sondage SET " . $resultat . $i ." = '" . $votes[$resultat . $i] . "' WHERE id = '" . $numeroDuSondage['nbre_entrees'] . "'") or die(mysql_error());
$fin = true;
}
}
}
?>
|
Je vous conseille de mettre ce dernier morceau de code avant le formulaire : le visiteur qui a voté va voir le compteur des votes s'incrémenter sans avoir à actualiser la page.
Nous en avons fini avec cette page ! Maintenant que vous créez un sondage et que tous vos visiteurs ont voté, vous voulez en recréer un : celui-ci va remplacer l'ancien. Il faut donc créer une archive pour pouvoir reconsulter les anciens résultats à tout moment.
Faisons-le !
Vous êtes toujours là ?
Parés pour la dernière page de votre système de sondage ?
Super !
Sur "archive.php", nous allons coder une liste déroulante contenant toutes les questions des sondages effectués (ou en cours). Vous cliquez sur le bouton et vous avez toutes les caractéristiques de votre sondage.
Reste plus qu'à l' faire !
Première chose : le formulaire.
On demande à voir toutes les questions et on effectue une boucle avec l'array que MySQL nous renvoie.
Dans cette boucle on inscrit la question dans un nouvel élément de la liste et le tour est joué !
Voyons tout ça avec le code ;
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | <form method="post" action="archive.php">
<p>
Sondages archivés :
<select name="archive">
<?php
//on crée une liste déroulante avec les questions des sondages effectués
$reponseMySQL = mysql_query("SELECT id, question FROM sondage") or die(mysql_error());
while ($infos = mysql_fetch_assoc($reponseMySQL))
{
echo "<option value=\"" . $infos['id'] . "\">" . $infos['question'] . "</option>";
}
?>
</select><br/>
<input type="submit" value="Voir l'archive"/>
</p>
</form>
|
Une fois que vous avez fait votre choix, on sélectionne tout ce qui concerne ce sondage et on affiche tout ce qu'on sait sur lui (propositions existantes et résultats pour chaque choix).
Il ne faut pas oublier non plus les 3 tests à faire si vous avez choisi moins de 5 propositions.
Cette partie de code est très simple ;
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 | <?php
if (isset($_POST['archive']))
{
//on selectionne les infos sur notre choix
$MySQL_archive = mysql_query("SELECT * FROM sondage WHERE id='" . $_POST['id'] . "'") or die(mysql_error());
$archive = mysql_fetch_assoc($MySQL_archive);
//on affiche la question, les propositions et le nombre de votes
echo $archive['question'] . "<br/>";
echo $archive['proposition1'] . " => " . $archive['resultats1'] . " votes<br/>";
echo $archive['proposition2'] . " => " . $archive['resultats2'] . " votes<br/>";
//on fait les tests habituels pour verifier la présences d'autres propositions
if ($archive['proposition3'] != "")
echo $archive['proposition3'] . " => " . $archive['resultats3'] . " votes<br/>";
if ($archive['proposition4'] != "")
echo $archive['proposition4'] . " => " . $archive['resultats4'] . " votes<br/>";
if ($archive['proposition5'] != "")
echo $archive['proposition5'] . " => " . $archive['resultats5'] . " votes<br/>";
}
?>
|
J'ai maintenant une grande nouvelle à vous annoncer : vous venez de finir votre système !
L'annexe ne complète pas le code mais vous donne des idées pour améliorer et intégrer votre système de sondage au sein de votre site.
Je vais vous donner quelques conseils ou idées. Il en existe des milliers pour personnaliser entièrement votre système de sondage, autant qu'au niveau du code que du CSS. N'hésitez donc pas si vous avez une idée à la partager avec les autres dans les commentaires.
Vote unique
Si votre site marche avec un système de compte, créez un champ supplémentaire dans la BDD de l'inscrit valant 1 s'il a déjà voté, 0 pour le contraire.
On évite ainsi qu'une même personne ne puisse voter 1000 fois sans problème ce qui pose un assez gros souci !
Par contre, si votre site ne marche pas de cette façon là, analyser l'IP du visiteur et enregistrez-la.
Pourcentage
Il est aussi agréable pour votre visiteur de calculer la représentation en % du nombre de votes pour chaque proposition. Si parmi toutes vos propositions les votes sont élevés, cette manière sera beaucoup plus explicite.
Vous pouvez faire une barre de pourcentage en dessous de chaque proposition avec 3 images (début, milieu plus ou moins grande, fin).
Vous modifiez l'image du milieu (épaisse à la source de 1 pixel) en l'élargissant avec la valeur du pourcentage : 100% = 100 pixels par exemple.
Remarque : Ce serait bien de faire (par un petit code facile) en sorte que le système reconnaisse la proposition "Vote blanc" pour qu'il n'affiche pas la barre de sondage en dessous (comme le Site du Zéro).
Influence
Vous pouvez également faire en sorte que le visiteur ne voit les résultats du sondage qu'une fois qu'il ait voté.
Ainsi il n'y a aucun risque qu'il soit influencé.
Visibilité / Utilité
Faites en sorte que votre sondage soit voyant et attractif sans pour autant gêner le visiteur.
Plus le nombre de votes sera grand et plus les résultats obtenus sur votre sondage seront fiables. Il vaut mieux donc laisser un sondage à l'actualité pendant un bon moment.
Enfin essayez de sonder vos visiteurs sur un sujet en rapport avec votre site ! (ne demandez pas s'ils aiment les carottes si vous tenez un site de bricolage

)
Âge
Si votre site fonctionne sur un système de comptes, demandez l'âge de la personne lors de son inscription. Vous pourrez classer après vos résultats par tranches d'âges. L'âge est lui aussi influençable (ne demandez pas sur un site destiné aux personnes âgées s'ils font du sport quotidiennement).
Mon imagination se tarie ...
Le sondage est une très bonne manière d'améliorer son site en recueillant les voix de vos visiteurs.
Si vous n'y êtes pas arrivés, posez votre question dans les commentaires si elle ne s'y trouve pas déjà.
Je me ferais un plaisir de vous répondre !
En espérant vous avoir aidés,
à la prochaine chers Zéros !