Dans ce didacticiel, nous allons créer un système de sondage et de vote sécurisé avec PHP et MySQL, que vous pouvez utiliser pour communiquer avec votre public de manière avisée.
Vous apprendrez à créer des sondages, à mettre en place un système de vote, à supprimer des sondages et à remplir la liste des sondages publiés.
Lors de la phase de création du sondage, nous pourrons spécifier autant de réponses que nous le souhaitons car toutes les réponses seront stockées dans une table de base de données distincte. Une table sera dédiée aux sondages, dans laquelle nous pourrons stocker les données relatives aux sondages (titre, description, etc.), et l'autre nous utiliserons pour stocker toutes les réponses, puis associerons les deux tables pour remplir une liste.
Le package Advanced comprend des fonctionnalités supplémentaires et un lien de téléchargement vers le code source.
1. Mise en route
Avant de nous lancer dans la programmation de notre système de sondage et de vote, il y a quelques exigences qui doivent être remplies. Nous devons installer les outils de développement et configurer la structure de fichiers pour notre application.
1.1. Ce que vous apprendrez dans ce tutoriel
- Conception de formulaires — Concevez une application de sondage et de vote avec HTML5 et CSS3.
- Système de sondage - Créez un système de sondage fonctionnel avec PHP et MySQL (créez des sondages, supprimez des sondages et affichez des sondages).
- Système de vote - Chaque sondage sera composé de réponses que l'utilisateur peut sélectionner pour voter et ensuite afficher le résultat.
- Interaction avec la base de données MySQL — Interagissez avec une base de données MySQL à l'aide de l'interface PHP PDO. Toutes les données saisies lors de la phase de création seront stockées dans la base de données MySQL.
- Système de modèles de base - Nous allons créer un système de modèles de base pour notre application, qui comprendra des fonctions d'en-tête et de pied de page. Ces fonctions peuvent ensuite être implémentées sur toutes les pages que nous créons. C'est pour ne pas avoir à écrire le même code encore et encore.
1.2. Exigences
- Téléchargez et installez XAMPP — XAMPP est un serveur Web qui inclut les logiciels essentiels pour les développeurs Web (PHP, MySQL, Apache, etc.). Ignorez cette étape si vous avez déjà installé un serveur de développement.
1.3. Structure et configuration des fichiers
Accédez à votre répertoire XAMPP htdocs (généralement situé dans C:\xampp\htdocs ) et créez les fichiers et répertoires suivants :
Chaque fichier contiendra les éléments suivants :
- functions.php — Le fichier de fonctions contiendra les fonctions de modèle et de connexion à la base de données.
- index.php — La page d'index contiendra la liste des sondages publiés et les boutons de navigation.
- create.php — La page de création contiendra des champs de saisie de formulaire, que nous pourrons utiliser pour créer de nouveaux sondages.
- vote.php — La page de vote comprendra les réponses aux sondages avec la possibilité de voter.
- result.php — La page de résultats affichera les résultats du sondage spécifié, tandis que chaque réponse affichera le nombre de votes et la barre de pourcentage.
- style.css — La feuille de style (CSS3) pour notre système de sondage et de vote.
2. Création de la base de données et configuration des tables
Si vous avez installé XAMPP, vous pouvez créer la base de données MySQL avec phpMyAdmin . Cependant, vous devez vous assurer de démarrer votre serveur Web : ouvrez le panneau de configuration XAMPP et cliquez sur le bouton Démarrer pour Apache et MySQL.
- Accédez à http://localhost/phpmyadmin/ dans votre navigateur.
- Cliquez sur l' onglet SQL en haut et exécutez l'instruction SQL suivante :
CREATE DATABASE IF NOT EXISTS `phppoll` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE `phppoll`;
CREATE TABLE IF NOT EXISTS `polls` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` text NOT NULL,
`description` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
INSERT INTO `polls` (`id`, `title`, `description`) VALUES (1, 'What''s your favorite programming language?', '');
CREATE TABLE IF NOT EXISTS `poll_answers` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`poll_id` int(11) NOT NULL,
`title` text NOT NULL,
`votes` int(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;
INSERT INTO `poll_answers` (`id`, `poll_id`, `title`, `votes`) VALUES (1, 1, 'PHP', 0), (2, 1, 'Python', 0), (3, 1, 'C#', 0), (4, 1, 'Java', 0);Dans phpMyAdmin, notre base de données devrait ressembler à ceci :
Un résumé de chaque tableau et des colonnes qui leur sont associées :
- table des sondages — Cette table contiendra des informations relatives aux sondages que nous créons (titre et description).
- id — L'identifiant unique du sondage, qui sera automatiquement incrémenté.
- title — Le titre du sondage, qui peut être une question, etc.
- description — La description du sondage, qui est facultative pendant la phase de création.
- table poll_answers — Cette table contiendra toutes les réponses pour nos sondages créés.
- id — ID unique, qui sera automatiquement incrémenté.
- poll_id — L'ID du sondage, qui sera associé à la colonne id dans la table polls. C'est ainsi que nous pouvons relier les deux tables.
- title — Le titre de la réponse au sondage.
- votes — Le nombre de votes que la réponse a.
Pour vous assurer que la base de données a été importée avec succès, vous pouvez vérifier sur phpMyAdmin — cliquez sur le nom de la base de données dans le panneau de navigation de gauche et vous devriez voir ce qui suit :
3. Création de la feuille de style (CSS3)
La feuille de style formatera la structure de notre système de sondage et de vote et la rendra plus attrayante. Ajoutez le code CSS suivant au fichier style.css :
* {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #FFFFFF;
margin: 0;
}
.navtop {
background-color: #3f69a8;
height: 60px;
width: 100%;
border: 0;
}
.navtop div {
display: flex;
margin: 0 auto;
width: 1000px;
height: 100%;
}
.navtop div h1, .navtop div a {
display: inline-flex;
align-items: center;
}
.navtop div h1 {
flex: 1;
font-size: 24px;
padding: 0;
margin: 0;
color: #ecf0f6;
font-weight: normal;
}
.navtop div a {
padding: 0 20px;
text-decoration: none;
color: #c5d2e5;
font-weight: bold;
}
.navtop div a i {
padding: 2px 8px 0 0;
}
.navtop div a:hover {
color: #ecf0f6;
}
.content {
width: 1000px;
margin: 0 auto;
}
.content h2 {
margin: 0;
padding: 25px 0;
font-size: 22px;
border-bottom: 1px solid #ebebeb;
color: #666666;
}
.home .create-poll {
display: inline-block;
text-decoration: none;
background-color: #38b673;
font-weight: bold;
font-size: 14px;
border-radius: 5px;
color: #FFFFFF;
padding: 10px 15px;
margin: 15px 0;
}
.home .create-poll:hover {
background-color: #32a367;
}
.home table {
width: 100%;
padding-top: 30px;
border-collapse: collapse;
}
.home table thead {
background-color: #ebeef1;
border-bottom: 1px solid #d3dae0;
}
.home table thead td {
padding: 10px;
font-weight: bold;
color: #767779;
font-size: 14px;
}
.home table tbody tr {
border-bottom: 1px solid #d3dae0;
}
.home table tbody tr:nth-child(even) {
background-color: #fbfcfc;
}
.home table tbody tr:hover {
background-color: #376ab7;
}
.home table tbody tr:hover td {
color: #FFFFFF;
}
.home table tbody tr:hover td:nth-child(1) {
color: #FFFFFF;
}
.home table tbody tr td {
padding: 10px;
}
.home table tbody tr td:nth-child(1) {
color: #a5a7a9;
}
.home table tbody tr td.actions {
padding: 8px;
text-align: right;
}
.home table tbody tr td.actions .view, .home table tbody tr td.actions .edit, .home table tbody tr td.actions .trash {
display: inline-flex;
text-align: right;
text-decoration: none;
color: #FFFFFF;
padding: 10px 12px;
border-radius: 5px;
}
.home table tbody tr td.actions .trash {
background-color: #b73737;
}
.home table tbody tr td.actions .trash:hover {
background-color: #a33131;
}
.home table tbody tr td.actions .edit {
background-color: #37afb7;
}
.home table tbody tr td.actions .edit:hover {
background-color: #319ca3;
}
.home table tbody tr td.actions .view {
background-color: #37b770;
}
.home table tbody tr td.actions .view:hover {
background-color: #31a364;
}
.update form {
padding: 15px 0;
display: flex;
flex-flow: column;
width: 400px;
}
.update form label {
display: inline-flex;
width: 100%;
padding: 10px 0;
margin-right: 25px;
}
.update form input, .update form textarea {
padding: 10px;
width: 100%;
margin-right: 25px;
margin-bottom: 15px;
border: 1px solid #cccccc;
}
.update form textarea {
height: 200px;
}
.update form input[type="submit"] {
display: block;
background-color: #38b673;
border: 0;
font-weight: bold;
font-size: 14px;
color: #FFFFFF;
cursor: pointer;
width: 200px;
margin-top: 15px;
border-radius: 5px;
}
.update form input[type="submit"]:hover {
background-color: #32a367;
}
.delete .yesno {
display: flex;
}
.delete .yesno a {
display: inline-block;
text-decoration: none;
background-color: #38b673;
font-weight: bold;
color: #FFFFFF;
padding: 10px 15px;
margin: 15px 10px 15px 0;
border-radius: 5px;
}
.delete .yesno a:hover {
background-color: #32a367;
}
.poll-vote form {
display: flex;
flex-flow: column;
}
.poll-vote form label {
padding-bottom: 10px;
}
.poll-vote form input[type="radio"] {
transform: scale(1.1);
}
.poll-vote form input[type="submit"], .poll-vote form a {
display: inline-block;
padding: 8px;
border-radius: 5px;
background-color: #38b673;
border: 0;
font-weight: bold;
font-size: 14px;
color: #FFFFFF;
cursor: pointer;
width: 150px;
margin-top: 15px;
}
.poll-vote form input[type="submit"]:hover, .poll-vote form a:hover {
background-color: #32a367;
}
.poll-vote form a {
text-align: center;
text-decoration: none;
background-color: #37afb7;
margin-left: 5px;
}
.poll-vote form a:hover {
background-color: #319ca3;
}
.poll-result .wrapper {
display: flex;
flex-flow: column;
}
.poll-result .wrapper .poll-question {
width: 50%;
padding-bottom: 5px;
}
.poll-result .wrapper .poll-question p {
margin: 0;
padding: 5px 0;
}
.poll-result .wrapper .poll-question p span {
font-size: 14px;
}
.poll-result .wrapper .poll-question .result-bar {
display: flex;
height: 25px;
min-width: 5%;
background-color: #38b673;
border-radius: 5px;
font-size: 14px;
color: #FFFFFF;
justify-content: center;
align-items: center;
}N'hésitez pas à le personnaliser ou à utiliser votre propre feuille de style.
4. Création du système de sondage et de vote avec PHP
Nous pouvons enfin commencer à programmer notre système de sondage et de vote avec PHP.
4.1. Les fonctions
Le fichier functions.php contiendra les fonctions de modèle et de connexion à la base de données, que nous pouvons implémenter dans toutes les pages que nous créons.
Editez le fichier functions.php et ajoutez :
<?php
function pdo_connect_mysql() {
// Update the details below with your MySQL details
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'phppoll';
try {
return new PDO('mysql:host=' . $DATABASE_HOST . ';dbname=' . $DATABASE_NAME . ';charset=utf8', $DATABASE_USER, $DATABASE_PASS);
} catch (PDOException $exception) {
// If there is an error with the connection, stop the script and display the error.
exit('Failed to connect to database!');
}
}Chaque fois que nous voulons nous connecter à notre base de données MySQL, il nous suffit d'exécuter la fonction ci-dessus, comme suit :
pdo_connect_mysql();Si vous rencontrez un problème de connexion avec MySQL, vous devrez très probablement mettre à jour les variables de la base de données pour refléter vos informations d'identification MySQL et le nom de la base de données. Vous ne devriez pas avoir à modifier les variables si vous utilisez XAMPP.
Ajouter après :
// Template header, feel free to customize it, but DO NOT INDENT THE PHP CODE
function template_header($title) {
// DO NOT INDENT THE BELOW PHP CODE OR YOU WILL ENCOUNTER ISSUES
echo <<<EOT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>$title</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body>
<nav class="navtop">
<div>
<h1>Voting & Poll System</h1>
<a href="index.php"><i class="fas fa-poll-h"></i>Polls</a>
</div>
</nav>
EOT;
}La fonction d'en-tête de nos modèles, qui comprend la section d'en-tête du document et la barre de navigation supérieure qui apparaîtra sur chaque page. Nous incluons également la bibliothèque Font Awesome , qui est une bibliothèque d'icônes gratuite (icônes que nous utiliserons dans notre application).
Ajouter après :
// Template footer
function template_footer() {
// DO NOT INDENT THE PHP CODE
echo <<<EOT
</body>
</html>
EOT;
}La fonction de pied de page du modèle, qui est essentiellement la fin du document : fermeture des balises HTML, etc.
Et maintenant, si nous voulions créer une nouvelle page, nous pourrions implémenter un code comme celui-ci :
<?php
// examplepage.php
include 'functions.php';
$pdo = pdo_connect_mysql();
?>
<?=template_header('Example Page')?>
<p>Hello World! Welcome to my custom page!</p>
<?=template_footer()?>Génial, non ? Désormais, nous n'avons plus besoin d'inclure le même code de fonction de modèle et le même code de fonction de connexion dans tous nos fichiers PHP, car tout ce que nous avons à faire est d'exécuter la fonction.
Attention, le code suivant :
<?=template_footer()?>Est la version courte de :
<?php echo template_footer(); ?>Ce sont toutes les fonctions créées que nous allons utiliser.
4.2. Sommaire
La page d'index comprendra toute la liste remplie de sondages ainsi que des boutons que nous pouvons utiliser pour afficher et supprimer des sondages.
Modifiez le fichier index.php et ajoutez :
<?php
// Include the function file
include 'functions.php';
// Connect to MySQL
$pdo = pdo_connect_mysql();
// MySQL query that retrieves all the polls and poll answers
$stmt = $pdo->query('SELECT p.*, GROUP_CONCAT(pa.title ORDER BY pa.id) AS answers FROM polls p LEFT JOIN poll_answers pa ON pa.poll_id = p.id GROUP BY p.id');
$polls = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>Le code ci-dessus récupérera tous les sondages et réponses aux sondages de nos tables de base de données, que nous pourrons ensuite remplir une liste au format de table HTML.
Ajouter après :
<?=template_header('Polls')?>
<div class="content home">
<h2>Polls</h2>
<p>Welcome to the home page! You can view the list of polls below.</p>
<a href="create.php" class="create-poll">Create Poll</a>
<table>
<thead>
<tr>
<td>#</td>
<td>Title</td>
<td>Answers</td>
<td></td>
</tr>
</thead>
<tbody>
<?php foreach($polls as $poll): ?>
<tr>
<td><?=$poll['id']?></td>
<td><?=$poll['title']?></td>
<td><?=$poll['answers']?></td>
<td class="actions">
<a href="vote.php?id=<?=$poll['id']?>" class="view" title="View Poll"><i class="fas fa-eye fa-xs"></i></a>
<a href="delete.php?id=<?=$poll['id']?>" class="trash" title="Delete Poll"><i class="fas fa-trash fa-xs"></i></a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?=template_footer()?>Tout d'abord, nous commençons le code ci-dessus avec l'exécution de la fonction d'en-tête de modèle (template_header()), puis itérer les sondages à l'aide d'une boucle foreach et les remplir dans un tableau HTML, et enfin, nous terminons le modèle avec la fonction de pied de modèle (template_footer()).
Avec les liens d'ancrage HTML dans le tableau, vous pouvez voir que nous allons passer le paramètre ID (en utilisant une requête GET) aux pages vote.php et delete.php . C'est ainsi que le code PHP saura sur quel sondage l'utilisateur a cliqué dans le tableau.
Astuce : pour créer une requête GET personnalisée en PHP, vous pouvez ajouter des paramètres au fichier PHP dans l'URL, par exemple : contact.php?name=david&email=david@codeshack.io.
Si nous naviguons vers http://localhost/phppoll/index.php , nous devrions voir ce qui suit :
Nous pouvons maintenant consulter la liste des sondages créés sur la page d'index. Ne vous inquiétez pas du fait que les boutons ne fonctionnent pas car nous n'avons pas encore créé les pages qui leur sont associées.
4.3. Créer une page
La page de création que nous pouvons utiliser pour créer de nouveaux sondages à l'aide d'un formulaire HTML et de champs de saisie, et côté serveur, nous pouvons utiliser PHP et MySQL pour insérer de nouveaux enregistrements dans nos tables de base de données, cependant, pour que cela se produise, nous devons d'abord pour exécuter une requête POST avec PHP.
Modifiez le fichier create.php et ajoutez :
<?php
include 'functions.php';
$pdo = pdo_connect_mysql();
$msg = '';Nous allons devoir utiliser MySQL et utiliser les fonctions de modèle que nous avons créées précédemment. Par conséquent, nous devons inclure le fichier functions.php . le$msg sera le message de sortie à l'utilisateur.
Ajouter après :
// Check if POST data is not empty
if (!empty($_POST)) {
// Post data not empty insert a new record
// Check if POST variable "title" exists, if not default the value to blank, basically the same for all variables
$title = isset($_POST['title']) ? $_POST['title'] : '';
$description = isset($_POST['description']) ? $_POST['description'] : '';
// Insert new record into the "polls" table
$stmt = $pdo->prepare('INSERT INTO polls (title, description) VALUES (?, ?)');
$stmt->execute([ $title, $description ]);
// Below will get the last insert ID, this will be the poll id
$poll_id = $pdo->lastInsertId();
// Get the answers and convert the multiline string to an array, so we can add each answer to the "poll_answers" table
$answers = isset($_POST['answers']) ? explode(PHP_EOL, $_POST['answers']) : '';
foreach($answers as $answer) {
// If the answer is empty there is no need to insert
if (empty($answer)) continue;
// Add answer to the "poll_answers" table
$stmt = $pdo->prepare('INSERT INTO poll_answers (poll_id, title) VALUES (?, ?)');
$stmt->execute([ $poll_id, $answer ]);
}
// Output message
$msg = 'Created Successfully!';
}
?>Le code ci-dessus ne s'exécutera que si l'utilisateur a cliqué sur le bouton Soumettre dans le formulaire HTML car il s'agit d'une requête POST. Si la variable POST n'est pas vide, insérez un nouvel enregistrement dans les tables polls et poll_answers — le nombre d'enregistrements insérés dans la table poll_answers dépend du nombre de réponses spécifiées par l'utilisateur.
Non seulement nous pouvons insérer de nouveaux enregistrements, mais nous sécurisons également l'entrée de l'utilisateur car les instructions préparées empêcheront l'injection SQL. Nous n'avons pas besoin d'échapper à l'entrée de l'utilisateur si nous utilisons des instructions préparées.
Ajouter après :
<?=template_header('Create Poll')?>
<div class="content update">
<h2>Create Poll</h2>
<form action="create.php" method="post">
<label for="title">Title</label>
<input type="text" name="title" id="title" placeholder="Title" required>
<label for="description">Description</label>
<input type="text" name="description" id="description" placeholder="Description">
<label for="answers">Answers (per line)</label>
<textarea name="answers" id="answers" placeholder="Description" required></textarea>
<input type="submit" value="Create">
</form>
<?php if ($msg): ?>
<p><?=$msg?></p>
<?php endif; ?>
</div>
<?=template_footer()?>Vous souvenez-vous du modèle d'index que nous avons créé précédemment ? Nous utilisons techniquement les mêmes fonctions d'en-tête et de pied de page pour structurer notre modèle HTML.
Le formulaire que nous avons créé ci-dessus peut être utilisé pour insérer de nouveaux enregistrements dans nos tables de base de données. Les noms des variables PHP POST reflètent les noms des éléments dans le formulaire HTML. La méthode des formulaires est définie sur post car nous devons faire une requête POST.
Et maintenant, si nous cliquons sur le bouton Créer un sondage sur la page d'index, nous verrons ce qui suit :
C'est tout ce que nous devons faire pour insérer de nouveaux enregistrements dans nos tables de base de données.
4.4. Page de vote
Sur la page de vote, les utilisateurs pourront voir la liste remplie de réponses pour le sondage spécifié et auront la possibilité de voter. Ils peuvent également voir le résultat sans voter.
Modifiez le fichier vote.php et ajoutez :
<?php
include 'functions.php';
// Connect to MySQL
$pdo = pdo_connect_mysql();
// If the GET request "id" exists (poll id)...
if (isset($_GET['id'])) {
// MySQL query that selects the poll records by the GET request "id"
$stmt = $pdo->prepare('SELECT * FROM polls WHERE id = ?');
$stmt->execute([ $_GET['id'] ]);
// Fetch the record
$poll = $stmt->fetch(PDO::FETCH_ASSOC);
// Check if the poll record exists with the id specified
if ($poll) {
// MySQL query that selects all the poll answers
$stmt = $pdo->prepare('SELECT * FROM poll_answers WHERE poll_id = ?');
$stmt->execute([ $_GET['id'] ]);
// Fetch all the poll anwsers
$poll_answers = $stmt->fetchAll(PDO::FETCH_ASSOC);
// If the user clicked the "Vote" button...
if (isset($_POST['poll_answer'])) {
// Update and increase the vote for the answer the user voted for
$stmt = $pdo->prepare('UPDATE poll_answers SET votes = votes + 1 WHERE id = ?');
$stmt->execute([ $_POST['poll_answer'] ]);
// Redirect user to the result page
header('Location: result.php?id=' . $_GET['id']);
exit;
}
} else {
exit('Poll with that ID does not exist.');
}
} else {
exit('No poll ID specified.');
}
?>Pour que la page de vote fonctionne correctement, le identifiantdoit être spécifié dans l'URL (vote.php?id=2, etc). Si laidentifiantparamètre existe, nous pouvons récupérer l'enregistrement de notre base de données MySQL par leidentifiantcolonne (table de sondage) et lapoll_idcolonne (table poll_answers).
Non seulement nous faisons une requête GET, mais nous faisons également une requête POST - uniquement si l'utilisateur sélectionne une réponse et clique sur le bouton Voter , ce qui mettra ensuite à jour les votes pour cette réponse particulière (requête MySQL UPDATE). Lors d'une requête POST réussie, l'utilisateur est redirigé vers la page de résultats (result.php).
Ajouter après :
<?=template_header('Poll Vote')?>
<div class="content poll-vote">
<h2><?=$poll['title']?></h2>
<p><?=$poll['description']?></p>
<form action="vote.php?id=<?=$_GET['id']?>" method="post">
<?php for ($i = 0; $i < count($poll_answers); $i++): ?>
<label>
<input type="radio" name="poll_answer" value="<?=$poll_answers[$i]['id']?>"<?=$i == 0 ? ' checked' : ''?>>
<?=$poll_answers[$i]['title']?>
</label>
<?php endfor; ?>
<div>
<input type="submit" value="Vote">
<a href="result.php?id=<?=$poll['id']?>">View Result</a>
</div>
</form>
</div>
<?=template_footer()?>Le modèle ci-dessus itérera chaque réponse et remplira les champs radio d'entrée dont nous avons besoin pour notre formulaire HTML.
Si nous cliquons sur l'icône en forme d'œil à côté du sondage test sur la page d'index, nous verrons ce qui suit :
Nous pouvons maintenant voter sur les sondages que nous avons créés.
4.5. Page de résultats
Sur la page de résultats, l'utilisateur peut afficher la liste des réponses remplie ainsi que le nombre de votes.
Editez le fichier result.php et ajoutez :
<?php
include 'functions.php';
// Connect to MySQL
$pdo = pdo_connect_mysql();
// If the GET request "id" exists (poll id)...
if (isset($_GET['id'])) {
// MySQL query that selects the poll records by the GET request "id"
$stmt = $pdo->prepare('SELECT * FROM polls WHERE id = ?');
$stmt->execute([ $_GET['id'] ]);
// Fetch the record
$poll = $stmt->fetch(PDO::FETCH_ASSOC);
// Check if the poll record exists with the id specified
if ($poll) {
// MySQL Query that will get all the answers from the "poll_answers" table ordered by the number of votes (descending)
$stmt = $pdo->prepare('SELECT * FROM poll_answers WHERE poll_id = ? ORDER BY votes DESC');
$stmt->execute([ $_GET['id'] ]);
// Fetch all poll answers
$poll_answers = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Total number of votes, will be used to calculate the percentage
$total_votes = 0;
foreach($poll_answers as $poll_answer) {
// Every poll answers votes will be added to total votes
$total_votes += $poll_answer['votes'];
}
} else {
exit('Poll with that ID does not exist.');
}
} else {
exit('No poll ID specified.');
}
?>Semblable à la page de vote, nous devons récupérer le paramètre ID GET (result.php?id=2, etc.), et avec cela, nous pouvons récupérer les résultats du sondage de notre base de données - classés par le nombre de votes (décroissant). Les réponses sont itérées à l'aide d'une boucle foreach et le total des votes est compté en conséquence.
Ajouter après :
<?=template_header('Poll Results')?>
<div class="content poll-result">
<h2><?=$poll['title']?></h2>
<p><?=$poll['description']?></p>
<div class="wrapper">
<?php foreach ($poll_answers as $poll_answer): ?>
<div class="poll-question">
<p><?=$poll_answer['title']?> <span>(<?=$poll_answer['votes']?> Votes)</span></p>
<div class="result-bar" style= "width:<?=@round(($poll_answer['votes']/$total_votes)*100)?>%">
<?=@round(($poll_answer['votes']/$total_votes)*100)?>%
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?=template_footer()?>Le modèle ci-dessus itérera les réponses et les remplira au format HTML avec le nombre de votes et une barre de pourcentage.
Accédez au sondage de test et vous pouvez soit cliquer sur Voter , soit cliquer sur le bouton Afficher les résultats , que vous devriez ensuite voir quelque chose comme ce qui suit :
C'est essentiellement ainsi que vous remplissez les résultats du sondage et que vous utilisez un peu de magie CSS pour créer la barre de pourcentage.
4.6. Supprimer la page
Sur la page de suppression, nous pourrons supprimer des sondages — nous inclurons une confirmation afin que l'utilisateur ne supprime pas accidentellement le mauvais sondage.
Modifiez le fichier delete.php et ajoutez :
<?php
include 'functions.php';
$pdo = pdo_connect_mysql();
$msg = '';
// Check that the poll ID exists
if (isset($_GET['id'])) {
// Select the record that is going to be deleted
$stmt = $pdo->prepare('SELECT * FROM polls WHERE id = ?');
$stmt->execute([ $_GET['id'] ]);
$poll = $stmt->fetch(PDO::FETCH_ASSOC);
if (!$poll) {
exit('Poll doesn\'t exist with that ID!');
}
// Make sure the user confirms beore deletion
if (isset($_GET['confirm'])) {
if ($_GET['confirm'] == 'yes') {
// User clicked the "Yes" button, delete record
$stmt = $pdo->prepare('DELETE FROM polls WHERE id = ?');
$stmt->execute([ $_GET['id'] ]);
// We also need to delete the answers for that poll
$stmt = $pdo->prepare('DELETE FROM poll_answers WHERE poll_id = ?');
$stmt->execute([ $_GET['id'] ]);
// Output msg
$msg = 'You have deleted the poll!';
} else {
// User clicked the "No" button, redirect them back to the home/index page
header('Location: index.php');
exit;
}
}
} else {
exit('No ID specified!');
}
?>Si l'ID de sondage est spécifié et existe dans notre table de sondages , nous pouvons demander à l'utilisateur s'il souhaite supprimer le sondage ou non. S'ils choisissent Oui , le sondage sera définitivement supprimé avec les réponses au sondage. Les données seront supprimées des tables de base de données polls et poll_answers à l'aide de l'instruction DELETE.
Ajouter après :
<?=template_header('Delete')?>
<div class="content delete">
<h2>Delete Poll #<?=$poll['id']?></h2>
<?php if ($msg): ?>
<p><?=$msg?></p>
<?php else: ?>
<p>Are you sure you want to delete poll #<?=$poll['id']?>?</p>
<div class="yesno">
<a href="delete.php?id=<?=$poll['id']?>&confirm=yes">Yes</a>
<a href="delete.php?id=<?=$poll['id']?>&confirm=no">No</a>
</div>
<?php endif; ?>
</div>
<?=template_footer()?>Le code ci-dessus est le modèle de la page de suppression. Si nous accédons à la page d'index et cliquons sur l'icône de la corbeille à côté de l'un de nos sondages, nous verrons quelque chose comme ce qui suit :
Conclusion
Toutes nos félicitations! Vous avez maintenant créé avec succès un système de sondage et de vote avec PHP et MySQL.
Et ensuite ? Envisagez d'implémenter une fonctionnalité d'authentification qui empêche certains utilisateurs de créer et de supprimer des sondages, ou d'implémenter vos propres fonctionnalités dans le système de sondage et de vote.
Si vous avez apprécié cet article, envisagez de le partager sur les sites Web de médias sociaux, car plus nous recevons de visiteurs, plus nous pouvons créer de contenu de qualité.