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.

Vous devez rendre ces exercices. Pour cela, compressez (en format ZIP ou RAR) le répertoire m2202-tp3 et soumettez-le sur AMeTICE dans TP #3 - exercices à rendre. Les exercices marqués avec une étoile (*) sont obligatoires, mais essayez de les faire tous.

Si vous soumettez vos exercices en retard (après la date de remise), la correction sera plus exigeante. Il est impossible de rendre les exercices après la date limite.

Exercices

Exercice 1

Dans cet exercice vous allez faire une validation simple d'un formulaire.

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

Genre, avec deux options : homme et femme
Age, où l'on peut rentrer un nombre

Faites la validation de ce formulaire dans un fichier appelé validation.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>