M2202 – TD #5

Avant de commencer, créez dans votre répertoire m2202 un sous-répertoire m2202-td5 pour sauvegarder les exercices de cette séance (TD #5).

Dans ce répertoire m2202-td5, créez un répertoire appelé exo1 pour le premier exercice, exo2 pour le deuxième, etc.

La démocratie

Cet exercice est un problème réel : quand vous vous inscrivez à l'Université, vous payez la Contribution de Vie Étudiante et de Campus (CVEC). Une fois par an, l'Université lance un appel à projets pour investir cet argent (dans l'ordre de 13 000 €) dans les différents campus.

Tous les étudiants du site d'Arles (IUT, Faculté ALLSH, FEG, FDSP, IFSI, OSU-Institut Pythéas) peuvent proposer des projets pour améliorer la vie étudiante, qui sont ensuite évalués par une commission et éventuellement financés.

Dans ce TD nous allons construire un site web pour choisir démocratiquement les meilleurs projets proposés par l'IUT.

Le site web doit présenter une page sur laquelle on voit les différentes projets avec leurs nombres de votes. On peut ajouter un nouveau projet, ou ajouter un vote sur un projet existant.

Exercice 1

Dans cet exercice nous allons construire la base de données nécessaire pour ce projet.

Il nous faut une table pour les projets, dans laquelle on répertorie l'auteur, le message et le nombre de votes de chaque projet. Comme d'habitude, on ajoute une identifiant numérique, ce qui sera très pratique dans la suite.

La table doit donc contenir 4 champs :

id, un identifiant numérique pour identifier chaque entrée. Sa valeur est définie automatiquement quand on ajoute une nouvelle entrée.
auteur est une chaîne de caractères courte (100 caractères maximum) pour le nom de l'auteur.
description est une chaîne de caractères longue pour la description du projet.
votes est un nombre entier qui compte le nombre de votes de chaque projet. Il faut l'initialiser à zéro quand on ajoute une nouvelle entrée.

Ajoutez un projet à la main (avec phpMyAdmin) pour pouvoir continuer avec les exercices suivants, même si à la fin les projets seront ajoutés par les utilisateurs avec un formulaire.

Note : l'adresse de l'application phpMyAdmin du serveur universitaire est : https://a-pedagoarles-mmi.aix.univ-amu.fr/phpmyadmin/.

Une fois la base de données faite, nous pouvons commencer la page d'accueil.

Exercice 2

Dans cet exercice nous allons faire la page d'accueil du site web, dans lequelle il faut afficher tous le projets avec des liens pour voter un projet, et un formulaire pour ajouter un nouveau projet.

Quelques explications :

Nous allons afficher tous les projets de la base de données et on va les trier par nombre de votes. La requête SQL est donc statique (elle ne dépende pas d'aucune variable).
Pour voter sur un projet, on n'a pas besoin de faire un formulaire pour chaque projet (même si on peut). On va plutôt faire un lien vers une autre page qui ajoutera le projet, et on indiquera le projet concerné avec la méthode GET. Rappelez-vous de l'exercice 4 du TP #2.
Le formulaire doit récupérer les information nécessaires pour ajouter un nouveau projet : le nom de l'auteur et une description.

Le code HTML généré par index.php peut être comme ceci :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>M2202</title>
</head>
<body>
  <h1>TD #5</h1>
  <ul>
    <li>
      <em>Auteur 1</em> : Description 1.<br>
      Votes : 12. <a href="voter.php?id=1">Voter</a>
    </li>
    <li>
      <em>Auteur 2</em> : Description 2.<br>
      Votes : 6. <a href="voter.php?id=2">Voter</a>
    </li>
  </ul>
  <p>
    Voulez-vous proposer un nouveau projet ?
  </p>
  <form method="post" action="ajouter.php">
    <div>
      <label for="nom">Votre nom :</label>
      <input id="nom" type="text" name="user_name">
    </div>
    <div>
      <label for="msg">Idée :</label><br>
      <textarea id="msg" name="user_message" rows="5" cols="40"></textarea>
    </div>
    <input type="submit" value="Envoyer">
  </form>
</body>
</html>

Il nous reste maintenant deux pages qui modifient la base de données : une pour ajouter un nouveau projet et une autre pour ajouter un vote sur un projet.

Exercice 3

Dans cet exercice nous allons écrire le fichier ajouter.php pour ajouter un projet dans la base de données.

Les étapes à faire sont :

Se connecter à la base de données.
Exécuter la requête SQL préparée avec les données du formulaire.
Renvoyer l'utilisateur vers la page d'accueil.

On devrait aussi valider les formulaire : vérifier que le nom de l'auteur n'est pas vide, limiter la longueur de la description, etc. Nous le ferons à la fin de la séance si nous avons le temps.

Exercice 4

Dans cet exercice nous allons écrire le fichier voter.php pour incrémenter le nombre de votes d'un projet.