M2202 – TD #2

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

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

Exercices

Exercice 1

Répétez l'exercice 4 du TP #1 avec les améliorations suivantes :

Utilisez la balise <label> dans le formulaire.
Utilisez une balise <input type="number"> pour entrer n.
Calculez la somme avec une fonction appelée calcul_somme().
Vérifiez que n > 1. Sinon, affichez un message d'erreur et un lien vers la page avec le formulaire.

Utilisez le modèle suivant pour la page du formulaire :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>M2202</title>
</head>
<body>
  <h1>TD #2 / Exo 1</h1>

  <form>
    <!-- formulaire -->
  </form>
</body>
</html>

Exercice 2

Dans cet exercice on va faire un site web protégé avec un mot de passe.

Créez un document HTML appelé index.html avec un formulaire pour entrer le mot de passe.

Dans un document PHP appelé traitement.php, déclarez un tableau avec quelques paires identifiant-mot de passe. Si le mot de passe est dans la liste, affichez un message de bienvenue avec l'identifiant. Sinon, envoyez l'utilisateur vers le site web de votre choix.

Pour envoyer l'utilisateur vers une autre page directement (sans cliquer sur un lien), utilisez la fonction header() [doc]. Par exemple :

<?php
header('Location: https://www.univ-amu.fr/');

Exercice 3

Dans cet exercice vous allez utiliser les tableaux et les fonctions pour créer un code PHP sans redondances.

Le script PHP suivant génère une page web avec un formulaire pour renseigner une date (jour, mois et année) avec des listes déroulantes.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>M2202</title>
</head>
<body>
  <h1>TD #2 / Exo 3</h1>

  <form method="post" action="affichage.php">
    <label for="jour">Jour :</label>
    <select id="jour" name="day">
      <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>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
      <option value="24">24</option>
      <option value="25">25</option>
      <option value="26">26</option>
      <option value="27">27</option>
      <option value="28">28</option>
      <option value="29">29</option>
      <option value="30">30</option>
      <option value="31">31</option>
    </select>

    <label for="mois">Mois :</label>
    <select id="mois" name="month">
      <option value="1">Janvier</option>
      <option value="2">Février</option>
      <option value="3">Mars</option>
      <option value="4">Avril</option>
      <option value="5">Mai</option>
      <option value="6">Juin</option>
      <option value="7">Juillet</option>
      <option value="8">Août</option>
      <option value="9">Septembre</option>
      <option value="10">Octobre</option>
      <option value="11">Novembre</option>
      <option value="12">Décembre</option>
    </select>

    <label for="annee">Année :</label>
    <select id="annee" name="year">
<?php
// afficher les 10 prochaines années
for ($i = 0; $i < 10; $i++) {
  $year = idate('Y') + $i; 
  echo '<option value="' . $year . '">' . $year . '</option>';
}
?>
    </select>
    <input type="submit" value="Valider">
  </form>
</body>
</html>

Vous devez réécrire ce script pour qu'il soit plus propre. Concrètement, vous devez utiliser des tableaux et des fonctions. Voici la structure de ce que vous devez faire :

<?php
// afficher une balise HTML option avec une valeur pour l'attribut value et
// un contenu
function print_option($value, $text) {
  echo '<option value="' . $value . '">' . $text . '</option>';
}

// afficher toutes les balises <option> pour les jours du mois
function print_days() {
  /* remplir */
}

// afficher toutes les balises <option> pour les mois
function print_months() {
  $months = array('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre');
  /* remplir */
}

// afficher toutes les balises <option> pour les années
function print_years() {
  /* remplir */
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>M2202</title>
</head>
<body>
  <h1>TD #2 / Exo 3</h1>

  <form method="post" action="affichage.php">
    <label for="jour">Jour :</label>
    <select id="jour" name="day">
      <?php print_days(); ?>
    </select>

    <label for="mois">Mois :</label>
    <select id="mois" name="month">
      <?php print_months(); ?>
    </select>

    <label for="annee">Année :</label>
    <select id="annee" name="year">
      <?php print_years(); ?>
    </select>
    <input type="submit" value="Valider">
  </form>
</body>
</html>

Exercice 4

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>M2202</title>
</head>
<body>
  <h1>TD #2 / Exo 4</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>M2202</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>

Algorithmique et développement web S2 (M2202) – TD #2

Exercices

Exercice 1

Exercice 2

Exercice 3

Exercice 4