Algo. et développement web S2 (M2202) — TD #5

Dans cette séance de TD on va utiliser les sessions, les cookies et les bases de données.

Révisez le CM #3 pour faire ces exercices.

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.

Exercices

On commence par un exercice qui utilise les sessions.

Exercice 1

On va faire un site web dynamique qui compte nos clics et affiche quelques statistiques.

Un fichier appelé index.php affiche le nombre de clics effectués, la vitesse (clics par seconde) et la vitesse maximale. En bas, il y a un lien pour cliquer, et un autre pour réinitialiser le compteur.

Le code HTML généré doit ressembler à ceci :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>M2202</title>
</head>
<body>
  <h1>TD #5 / Exo 1</h1>
  <p>
    Nombre de clics : <!-- remplir -->
  </p>
  <p>
    Vitesse (clics/sec) : <!-- remplir -->
  </p>
  <p>
    Vitesse max : <!-- remplir -->
  </p>
  <p>
    <a href="index.php">Click !</a> ⋅ <a href="reset.php">Reset</a>
  </p>
</body>
</html>

Démarrez une session pour stocker le nombre de clics (initialisé à zéro) et la date de début (utilisez la fonction time() [doc]). Chaque fois qu'on visite cette page, on incrémente les compteur de clics et on recalcule les statistiques.

Dans le fichier reset.php, fermez la session et renvoyez l'utilisateur vers la page d'accueil.

Astuce : pour afficher une variable de type float avec moins de chiffres décimales, utilisez la fonction number_format().

Ensuite, un exercice avec des cookies.

Exercice 2

On va faire un site web qui affiche un message quand on a cliqué 1000 fois sur un bouton.

Dans un fichier index.php on affiche le nombre de clics, avec une barre de progression, et un bouton. Quand on arrive à 1000 clics, le bouton disparaît et on voit un message.

Quand on clique sur le bouton, un fichier count_click.php met à jour un cookie pour ajouter un nouveau clic.

Le code HTML généré doit ressembler à ceci :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>M2202</title>
</head>
<body>
  <h1>TD #5 / Exo 2</h1>
  <p>
    Tu as fait 30 / 1000 clics.
  </p>
  <progress value="30" max="1000" style="width: 50%;">30</progress>
  <form action="count_click.php">
    <input type="submit" value="Click">
  </form>
</body>
</html>

La vraie vie

Cette exercice est un problème réel : nous voulons organiser un cours de soutien en PHP pour une vingtaine d'étudiants. On va donc créer un formulaire, sauvegarder les informations dans une base de données, et utiliser ces données pour prendre une décision.

Exercice 3

On va faire un formulaire d'enquête sur votre niveau en PHP.

On fait le formulaire dans un fichier index.html. On demande le nom, une note sur 5 points, les exercices que vous ne comprenez pas et un message.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>M2202</title>
</head>
<body>
  <h1>TD #5 / Exo 3</h1>
  <p>
    Cette enquête nous aidera à organiser le cours de mise à niveau en PHP. Le but est de vous aider à maîtriser ce langage de programmation.
  </p>
  <form method="post" action="validation.php">
    <div>
      <label for="nom">Prénom NOM :</label>
      <input type="text" name="nom" id="nom">
    </div>
    <div>
      <label for="note">Comment évaluez-vous vos compétences en PHP (0-5) ? :</label>
      <select id="note" name="note">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div>
    <div>
      <label for="exos">Cochez les exercices que vous souhaitez revoir :</label><br>
      <b>TD #1</b> 
      <input type="checkbox" name="td1exo1" id="td1exo1"><label for="td1exo1">Exo 1</label>
      <input type="checkbox" name="td1exo2" id="td1exo2"><label for="td1exo2">Exo 2</label>
      <input type="checkbox" name="td1exo3" id="td1exo3"><label for="td1exo3">Exo 3</label>
      <input type="checkbox" name="td1exo4" id="td1exo4"><label for="td1exo4">Exo 4</label>
      <input type="checkbox" name="td1exo5" id="td1exo5"><label for="td1exo5">Exo 5</label>
      <input type="checkbox" name="td1exo6" id="td1exo6"><label for="td1exo6">Exo 6</label>
      <input type="checkbox" name="td1exo7" id="td1exo7"><label for="td1exo7">Exo 7</label>
      <input type="checkbox" name="td1exo8" id="td1exo8"><label for="td1exo8">Exo 8</label> <br>
      <b>TP #1</b> 
      <input type="checkbox" name="tp1exo1" id="tp1exo1"><label for="tp1exo1">Exo 1</label>
      <input type="checkbox" name="tp1exo2" id="tp1exo2"><label for="tp1exo2">Exo 2</label>
      <input type="checkbox" name="tp1exo3" id="tp1exo3"><label for="tp1exo3">Exo 3</label>
      <input type="checkbox" name="tp1exo4" id="tp1exo4"><label for="tp1exo4">Exo 4</label>
      <input type="checkbox" name="tp1exo5" id="tp1exo5"><label for="tp1exo5">Exo 5</label>
      <input type="checkbox" name="tp1exo6" id="tp1exo6"><label for="tp1exo6">Exo 6</label> <br>
      <b>TD #4</b> 
      <input type="checkbox" name="td4exo1" id="td4exo1"><label for="td4exo1">Exo 1</label>
      <input type="checkbox" name="td4exo2" id="td4exo2"><label for="td4exo2">Exo 2</label>
      <input type="checkbox" name="td4exo3" id="td4exo3"><label for="td4exo3">Exo 3</label>
      <input type="checkbox" name="td4exo4" id="td4exo4"><label for="td4exo4">Exo 4</label>
      <input type="checkbox" name="td4exo5" id="td4exo5"><label for="td4exo5">Exo 5</label>
      <input type="checkbox" name="td4exo6" id="td4exo6"><label for="td4exo6">Exo 6</label>
      <input type="checkbox" name="td4exo7" id="td4exo7"><label for="td4exo7">Exo 7</label> <br>
      <b>TP #4</b> 
      <input type="checkbox" name="tp4exo1" id="tp4exo1"><label for="tp4exo1">Exo 1</label>
      <input type="checkbox" name="tp4exo2" id="tp4exo2"><label for="tp4exo2">Exo 2</label>
      <input type="checkbox" name="tp4exo3" id="tp4exo3"><label for="tp4exo3">Exo 3</label> <br>
      <b>TD #5</b> 
      <input type="checkbox" name="td5exo1" id="td5exo1"><label for="td5exo1">Exo 1</label>
      <input type="checkbox" name="td5exo2" id="td5exo2"><label for="td5exo2">Exo 2</label>
      <input type="checkbox" name="td5exo3" id="td5exo3"><label for="td5exo3">Exo 3</label> <br>
    </div>
    <div>
      <label for="message">Quelles notions souhaitez-vous renforcer ? :</label><br>
      <textarea id="message" name="message" rows="5" cols="80"></textarea>
    </div>
    <input type="submit" value="Valider">
  </form>
</body>
</html>

Pour créer la table dans votre base de données, tapez cette instruction SQL dans phpMyAdmin :

CREATE TABLE td5exo3 (
  id INT PRIMARY KEY NOT NULL AUTO_INCREMENT,
  nom VARCHAR(100),
  note INT,
  exos VARCHAR(27),
  message TEXT
);

Dans un fichier validation.php insérez les données saisies dans le formulaire dans la table de la base de données. Avant, on construit une chaîne de caractères pour encoder les exercices choisis. Utilisez cette fonction :

function make_string_exos()
{
  $str = '';
  if (isset($_POST['td1exo1'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['td1exo2'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['td1exo3'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['td1exo4'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['td1exo5'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['td1exo6'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['td1exo7'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['td1exo8'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['tp1exo1'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['tp1exo2'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['tp1exo3'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['tp1exo4'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['tp1exo5'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['tp1exo6'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['td4exo1'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['td4exo2'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['td4exo3'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['td4exo4'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['td4exo5'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['td4exo6'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['td4exo7'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['tp4exo1'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['tp4exo2'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['tp4exo3'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['td5exo1'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['td5exo2'])) $str .= '1'; else $str .= '0';
  if (isset($_POST['td5exo3'])) $str .= '1'; else $str .= '0';
  return $str;
}

Dans un fichier affichage.php, affichez les données dans un tableau :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>M2202</title>
  <style>
    table,
    td {
      border: 1px solid #333;
    }
    th {
      text-align: left;
    }
    thead,
    tfoot {
      background-color: #333;
      color: #fff;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Nom</th>
        <th>Note</th>
        <th>Exos</th>
        <th>Commentaire</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Roch RICARD</td>
        <td>1</td>
        <td>100000001100001110000110010</td>
        <td>Différence entre get et post</td>
      </tr>
      <tr>
        <td>Serge COTUAND</td>
        <td>4</td>
        <td>000000110000110000011001000</td>
        <td>Comment utiliser la fonction header()</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Que peut-on faire pour choisir les 20 étudiants ?