Développement web S2 (R213) – TP #3

Dans cette séance de TP vous allez faire des exercices avec des tableaux, des fonctions et des formulaires.

Liens utiles : CM #2

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

Dans ce répertoire r213-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 r213-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.

Utilisez bien les éléments label afin de renseigner correctement l'information demandée par le formulaire.

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. Utilisez le modèle suivant : 

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R213</title>
</head>
<body>
  <h1>TP #3 / Exo 1</h1>
<?php
  // traiter les données du formulaire
?>
</body>
</html>

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 à deux dimensions : une liste d'étudiants, chacun avec un nom, un prénom et une note. Vous devez :

  1. Afficher ces information sur un tableau (balise HTML <table>)
  2. Si la note est plus petite que 10, elle est affichée en rouge ; sinon, en vert
  3. Dans la dernière ligne, on affiche la note moyenne
  4. 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>R213</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)
{
  /* Vous devez parcourir le tableau $array et, pour chaque élément 
   * (qui est lui-même un tableau associatif) afficher les trois informations
   * sur une ligne (élément <tr>).
   * De plus, en fonction de la note, vous ajouterez la classes vert ou rouge dans
   * sa cellule (élément <td>)
   */
}

function print_average_note($array)
{
  $average = 0;
  /* Vous devez parcourir le tableau $array pour additionner toutes les notes.
   * Puis, vous divisez ce nombre par le nombre d'étudiants.
   * Comme vous le savez, vous pouvez obtenir le nombre d'étudiants avec la fonction
   * count()
   */
  echo number_format($average, 2); // pour afficher seulement deux chiffres décimales
}

function print_admis($array)
{
  /* Vous devez parcourir le tableau $array et compter les étudiants qui ont
   * une note supérieur ou égale à 10.
   * Puis, vous affichez ce nombre et le nombre total d'étudiants comme c'est 
   * illustré dans l'exemple. 
   */
}
?>
<!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>R213</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>

Exercices supplémentaires

Exercice 4

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

Le but de cet exercice est de faire un élément <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>R213</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>

Vous aurez besoin d'un double boucle for pour parcourir les cellules du tableau. Vous allez choisir les couleurs de façon aléatoire en utilisant la fonction rand() [doc].

Exercice 5

Dans cet exercice on va afficher la liste de commentaires d'un album du groupe Talking Heads.

Le fichier index.html contient un formulaire pour choisir l'album : 

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R213</title>
</head>
<body>
  <h1>TP #3 / Exo 5</h1>
  <form method="post" action="commentaires.php">
    <input type="radio" name="album" id="radio-1" value="talking-heads-77">
    <label for="radio-1">Talking Heads: 77</label><br>
    <input type="radio" name="album" id="radio-2" value="more-songs-about-buildings-and-food">
    <label for="radio-2">More Songs About Buildings and Food</label><br>
    <input type="radio" name="album" id="radio-3" value="fear-of-music">
    <label for="radio-3">Fear of Music</label><br>
    <input type="radio" name="album" id="radio-4" value="remain-in-light">
    <label for="radio-4">Remain in Light</label><br>
    <input type="radio" name="album" id="radio-5" value="speaking-in-tongues">
    <label for="radio-5">Speaking in Tongues</label><br>
    <input type="submit" value="Valider">
  </form>
</body>
</html>

Dans le fichier commentaires.php, vous devez afficher dans un élément <ul> les commentaires de l'album choisi. Utilisez ce modèle qui contient déjà les commentaires dans un tableau bidimensionnel ainsi que la structure du code HTML : 

<?php
$commentaires = array(
  array('remain-in-light', 'Un bijou intemporel !!!'),
  array('remain-in-light', 'Le meilleur album des TH,une originalité extraordinaire pour un album de 38 ans...que de bons souvenirs de cette fabuleuse époque...Merci pour Mr Fela Kuti,pensé pour Joe8410'),
  array('remain-in-light', 'rarement vu autant de commentaires pour un album de plus de presque 40 ans et qui reste d\'une originalité et d\'une création hors paire c\'est tout simplement un des 10 best of du rock et jean Philippe ne pourra me contre-dire un vrai chef d\'oeuvre'),
  array('remain-in-light', 'Un album assez difficile d\'accès. Mais comme souvent avec TH, les 3/4 des morceaux sont redoutables à la réécoute.'),
  array('talking-heads-77', 'tellement ridicule que ça me plait...."qu\'est ce que c\'est"...c\'est grave docteur?'),
  array('talking-heads-77', 'Purée Psycho killer est tellement ridicule c’est dingue.'),
  array('talking-heads-77', 'Groupe incontournable, tellement modernes'),
  array('talking-heads-77', 'First Week / Last Week j\'adore!'),
  array('talking-heads-77', 'Talking Heads!'),
  array('fear-of-music', 'Heaven.....35 ans qu\'il me touche au coeur....comment il sont su ça, si jeune.....real ARTISTS!'),
  array('fear-of-music', 'un autre monde , un monde qui n \'existes plus !!! de la créativité a tous les étages !!!!'),
  array('fear-of-music', 'Un must d\'album !!!!'),
  array('fear-of-music', 'My life during wartime '),
  array('more-songs-about-buildings-and-food', '★★★★★'),
  array('more-songs-about-buildings-and-food', 'Ya hahhh!! C bon de réécouter ce chef d\'oeuvre!!! Du bon engrais pour nos jeunes oreilles!!!'),
  array('speaking-in-tongues', 'poisons'),
  array('speaking-in-tongues', 'Reconnaissance avec Cheyenne (Sean) réelle ! THE ARTISTE'),
  array('speaking-in-tongues', 'De très bons titres, c\'est pas mon album préféré mais y a du gros. Making flippy floppy, I get Wild, this must be the place.'),
  array('speaking-in-tongues', 'violence et misere,emeute ,Thatcher et Reagan s\'entendent pour exploiter le monde,la speculation decole,les salaire et avantage divers des PDG et autres financiers flambent,l\'eccart avec le reste de la population se creuse et annonce la crise 2008 ! '),
  array('speaking-in-tongues', 'encore un super album,je suis adolescent à l\'époque,scene underground rock post punk,la musique evolue ,son 80\'s,l\'electronique et le hip hop arrivent,Le rock mute,les année radio sont là(les radio pirate aussi!),la world musique s\'installe. '),
  array('speaking-in-tongues', 'Burning down the house : chanson parfaite. ')
)
?>
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R213</title>
</head>
<body>
  <h1>TD #2 / Exo 4</h1>
  <p>
    Commentaires : 
  </p>
  <ul>
    <!-- À faire -->
  </ul>
  <p>
    <a href="index.html">Retour</a>
  </p>
</body>
</html>