La version améliorée de PixChoice

30 mai 202430 mai 2024
par Robin C.

PixChoice est un site créé par Vincent ROBERT, Kevin FEDYNA et Ilyas R. Le site affiche 6 images de manières aléatoires parmi une liste afin de pouvoir voter pour la meilleure proposition. Le site calcule par la suite les résultats et permet de les afficher. Et j’en ai fait une version améliorée pour faciliter la modification des paramètres ou des utilisateurs notamment et je vais la présenter.

Sommaire

1 L’idée
2 Quelques images du site
3 Fonctionnement
4 Fonctionnalités
5 Configuration du vote
6 Configuration des images
7 Configuration des résultats
8 Gestion des utilisateurs
9 Configuration du compte
10 Conclusion
11 Dépôt Github
12 Articles similaires

L’idée

Comme dit dans l’extrait le site propose 6 images parmi une liste et vous permet de voter pour celle qui vous plaît le plus. Cependant lors de sa V1 le site ne permettait pas un changement de paramètre optimal ce qui obligeait de se souvenir de l’utilisation de l’année passé et ce qui était une perte de temps, j’ai donc créé la V2 qui ajoute un interface administrateur qui permet de paramétrer les images, le vote et l’affichage des résultats. Pour cela je me suis appuyé sur le code de la V1 trouvable ici ainsi que le framework CSS PureCSS.io (Un framework CSS est un ensemble prédéfini de styles et de composants prêts à l’emploi pour faciliter le développement web). C’est ainsi que j’ai pu concevoir la V2 de PixChoice

Quelques images du site

Vous avez donc ici quelques images du site de la vue d’un utilisateur ne possédant pas de compte et qui ne peut accéder qu’à la page de vote, aux résultats et à la page de connexion.

Fonctionnement

Je vais vous faire une brève explication du fonctionnement du site :

Les différentes pages du site sont faites en php c’est à dire que dans la page écrite en html on peut y ajouter du code, des fonctions… C’est ainsi que les pages du site sont dynamiques et s’affichent selon les paramètres. Et en parlant de paramètres, il faut bien les stocker mais où ? Pour stocker les informations, une base de donnée à été mise à ma disposition afin de sauvegarder des informations comme les utilisateurs avec leur identifiant et leur mot de passe, les images avec leur nombre de vote et combien de fois elles sont apparues, l’adresse ip des votants et la configuration du site. Et comme le php permet nativement de faire des requêtes sql l’utilisation de la base de donnée est simplifiée.

Dans les fonctionnalitées de php on peut également inclure d’autres page, c’est à dire que le code de la page donnée en paramètre va être placé au niveau de l’appel via la fonction ce qui me permet de n’avoir que 3 pages principales, c’est à dire que seulement 3 pages vont être les fondations du sites et les autres pages vont seulement remplir les 3 pages principales. On le retrouve notamment dans le code de la page index.php

<?php
session_start(); // Création d'une session pour sauvegardé des données
// Appel de différentes pages pour instancier ...
require_once(__DIR__ . '/config.php'); // Les identifiants de la base de donnée
require_once(__DIR__ . '/databaseconnect.php'); // Une connexion à la base de donnée
require_once(__DIR__ . '/variables.php'); // Des variables récupérées en sql
require_once(__DIR__ . '/fonctions.php'); // Des fonctions

cookie($temps_vote[0][0]); // Appel de la fonction cookie qui va créer un cookie 
//pour sauvegarder le nombre de vote fait
?>

<!doctype html> <!-- Code html basique -->
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pixchoice</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>

<?php // retour en php pour récupérer les variables envoyés en post ou en get
$postData = $_POST;
$getData = $_GET;

include('header.php'); // Ajout de l'en tête de page

// ajout de la page de connexion si des variables existent
if (isset($postData['connexion']) || isset($_GET['connexion'])) { 
    include('login.php');
} else {
    include('vote.php'); // et si elles n'existent pas ajout de la page de vote
};?>
</body> <!-- Fin du code html -->
</html>

Vous remarquerez donc que mes pages ne sont pas bien conséquentes comme je peux créer d’autres pages pour les ajouter directement dans le code d’une autre, et c’est pourquoi j’ai 3 pages principales mais 19 pages secondaires qui sont appelées par les pages principales.

Fonctionnalités

Voici donc les différentes fonctionnalités proposées par le site afin de faciliter l’utilisation du site par les administrateurs :

Configuration du vote
- Activation / Désactivation du vote.
- Activation / Désactivation du vote pour les admins malgré la limite. (permet aux administrateurs de voter sans limites)
- Gestion du nombre de vote avant d’être bloqué
- Gestion du temps avant d’être débloqué
Configuration des images
- Ajout d’image (avec gestion de formatage du nom et d’id dans la db)
- Suppression d’images (avec gestion dans la db)
Configuration des résultats
- Activation / Désactivation des résultats pour tous.
- Activation / Désactivation de l’affichage des résultats pour les admins.
Gestion des utilisateurs
- Ajout d’utilisateurs avec génération de mot de passe temporaire aléatoire
- Tableau référençant les utilisateurs qui permet d’en supprimer ou d’activer ou non le fait qu’ils soient superadmin (seul les superadmin ont accès à cette page)
Configuration du compte
- Modification de l’identifiant
- Modification du mot de passe