M2202 – TP #3

Dans le répertoire m2202 que vous avez déjà créé, ajoutez un répertoire nommé m2202-tp3 pour sauvegarder les exercices de cette séance (TP #3).

Dans ce répertoire m2202-tp3, créez un répertoire appelé exo1 pour le premier exercice, exo2 pour le deuxième, etc. Vos exercices ne seront pas corrigés si vous ne respectez pas ces instructions.

À la fin de la séance, vous devez compresser (en format ZIP ou RAR) le répertoire m2202-tp3 avec tous vos exercices et le soumettre sur AMeTICE.

Seuls les exercices marqués avec une étoile (*) seront évalués. La date limite pour rendre vos exercices est visible sur AMeTICE, et aucun travail ne sera accepté après. Le corrigé sera affiché après l'évaluation des exercices.

Exercices

Exercice 1

Dans cet exercice vous allez faire un formulaire complet avec un traitement simple.

Dans un fichier appélé index.html, faites un formulaire avec deux champs :

Genre, avec deux options : homme ou femme. Il faut choisir une seule.
Age, où l'on peut rentrer un nombre.

Les données de ce formulaire sont envoyées dans un fichier appelé traitement.php. Si l'utilisateur est une femme de 21 à 40 ans, affichez un message ; sinon, affichez un autre message.

Exercice 2

Faites l'exercice 4 du TP #2 avec les améliorations suivantes :

Utilisez la balise <label> dans le formulaire.
Utilisez une balise <input type="number"> pour entrer le nombre n.
Créez une fonction appelée afficher_lien() pour générer et afficher le lien dans chaque case du tableau. Cette fonction prend deux paramètres.
Vérifiez que n > 0. Sinon, affichez un message d'erreur et un lien vers la page avec le formulaire.

Exercice 3*

Dans cet exercice vous allez traiter un tableau avec des notes pour l'afficher.

On vous donne un tableau de dimension deux : une liste d'étudiants, chacun avec un nom, un prénom et une note. Vous devez :

Afficher ces information sur un tableau (balise HTML <table>)
Si la note est plus petite que 10, elle est affichée en rouge ; sinon, en vert
Dans la dernière ligne, on affiche la note moyenne
De plus, dans un paragraphe, on affiche la proportion d'étudiants admis

Le code HTML généré doit être comme ceci :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <style>
    .rouge {
      color: #e22;
    }
    .vert {
      color: #5b1;
    }
    table, td {
      border: 1px solid #333;
    }
    thead, tfoot {
      background-color: #333;
      color: #fff;
    }
  </style>
  <title>M2202</title>
</head>
<body>
  <h1>TP #3 / Exo 3</h1>

  <table>
    <thead>
      <tr>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Note</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cotuand</td>
        <td>Serge</td>
        <td class="vert">12.6</td>
      </tr>
      <tr>
        <td>Ricard</td>
        <td>Roch</td>
        <td class="rouge">8</td>
      </tr>
      <tr>
        <td>Fresne</td>
        <td>Aleron</td>
        <td class="vert">19.3</td>
      </tr>
    </tbody>
    <tfoot>
      <th></th>
      <th></th>
      <th>13.3</th>
    </tfoot>
  </table>
  <p>
    Admis : 2 / 3
  </p>
</body>
</html>

Voici la structure de votre script :

<?php
$notes = array(
  array('prenom' => 'Serge', 'nom' => 'Cotuand', 'note' => 12.6),
  array('prenom' => 'Roch', 'nom' => 'Ricard', 'note' => 8.0),
  array('prenom' => 'Aleron', 'nom' => 'Fresne', 'note' => 19.3),
  array('prenom' => 'Thibaut', 'nom' => 'Dubeau', 'note' => 14.8),
  array('prenom' => 'Vivienne', 'nom' => 'Louineaux', 'note' => 9.8),
  array('prenom' => 'Mathilde', 'nom' => 'Bois', 'note' => 11.6),
  array('prenom' => 'Eulalie', 'nom' => 'Poulin', 'note' => 16.3),
  array('prenom' => 'Tanguy', 'nom' => 'Michel', 'note' => 9.9),
  array('prenom' => 'Simone', 'nom' => 'Beaujolie', 'note' => 10.1),
  array('prenom' => 'Aubine', 'nom' => 'Leclerc', 'note' => 14.8),
  array('prenom' => 'Amedee', 'nom' => 'Dupéré', 'note' => 7.3),
  array('prenom' => 'Agathe', 'nom' => 'Dagenais', 'note' => 13.4),
  array('prenom' => 'Brunella', 'nom' => 'Duperré', 'note' => 12.9),
  array('prenom' => 'Prewitt', 'nom' => 'Norbert', 'note' => 18.5),
  array('prenom' => 'Carine', 'nom' => 'Lessard', 'note' => 6.2),
  array('prenom' => 'Brigitte', 'nom' => 'Guimond', 'note' => 13.4),
  array('prenom' => 'Marcel', 'nom' => 'Metivier', 'note' => 8.4),
  array('prenom' => 'Claude', 'nom' => 'Caouette', 'note' => 16.3),
  array('prenom' => 'Éric', 'nom' => 'Audet', 'note' => 14.6),
  array('prenom' => 'Platt', 'nom' => 'Lejeune', 'note' => 9.3),
  array('prenom' => 'Percy', 'nom' => 'Lebel', 'note' => 17.5)
);

function print_tbody($array)
{
  /* remplir */
}

function print_average_note($array)
{
  $average = 0;
  /* remplir */
  echo number_format($average, 2); // pour afficher seulement deux chiffres décimales
}

function print_admis($array)
{
  /* remplir */
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <style>
    .rouge {
      color: #e22;
    }
    .vert {
      color: #5b1;
    }
    table, td {
      border: 1px solid #333;
    }
    thead, tfoot {
      background-color: #333;
      color: #fff;
    }
  </style>
  <title>M2202</title>
</head>
<body>
  <h1>TP #3 / Exo 3</h1>

  <table>
    <thead>
      <tr>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Note</th>
      </tr>
    </thead>
    <tbody>
      <?php print_tbody($notes); ?>
    </tbody>
    <tfoot>
      <th></th>
      <th></th>
      <th><?php print_average_note($notes); ?></th>
    </tfoot>
  </table>
  <p>
    Admis : <?php print_admis($notes); ?>
  </p>
</body>
</html>

Exercice supplémentaire

Exercice 4

Dans cet exercice vous allez créer une image avec PHP.

Le but de cet exercice est de faire un élement <table> où chaque cellule a une couleur différente. Le code HTML résultant doit être similaire à ceci :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>M2202</title>
  <style>
    table {
      border-spacing: 0px;
    }
    td {
      width:  20px;
      height: 20px;
      padding: 0px;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <td style="background-color: rgb(81,152,215)"></td>
      <td style="background-color: rgb(98,117,253)"></td>
      <td style="background-color: rgb(115,247,52)"></td>
    </tr>
    <tr>
      <td style="background-color: rgb(210,62,188)"></td>
      <td style="background-color: rgb(35,192,58)"></td>
      <td style="background-color: rgb(170,19,216)"></td>
    </tr>
  </table>
</body>
</html>