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

Dans cette séance de TD on va commencer à faire des programmes simples (souvent appelés scripts) en PHP.

D'abord on va apprendre à utiliser include pour pouvoir utiliser PHP sans aucune connaissance en programmation.

Ensuite on va faire quelques scripts en utilisant les variables et les structures de contrôle. Pensez donc à réviser le CM #1.

Pour finir, on va apprendre à utiliser la méthode get pour interagir avec un programme.

Avant de commencer, créez dans votre espace personnel un répertoire nommé m2202 pour y sauvegarder tout votre travail dans ce module.

Dedans, créez un autre répertoire nommé m2202-td1 pour sauvegarder les exercices de cette séance (TD #1).

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

La fonction include()

Très souvent, un site web contient des pages avec une structure similaire : le même en-tête, la même barre latérale, le même pied de page, etc.

Au lieu d'écrire le même code HTML dans chaque fichier (ce n'est pas seulement ennuyant, mais si on veut modifier une chose alors il faut le faire dans chaque fichier), on peut le mettre dans un fichier à part et l'importer avec la fonction include().

Par exemple, on a deux fichiers : index.php et entete.php. Dans entete.php on a :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>M2202</title>
</head>
<body>
<header style="background-color: lime;">
  <h1>Le titre principal</h1>
</header>

Et dans index.php :

<?php include('entete.php'); ?>
<main>
  <p>
    Un paragraphe.
  </p>
  <p>
    Un autre paragraphe.
  </p>
</main>
<footer style="background-color: grey;">
  Aldo G.L. - 2020
</footer>
</body>
</html>

La fonction include() dans index.php insère le contenu du fichier entete.php pour donner un document HTML complet. Notez que le fichier entete.php n'a pas de code PHP.

Exercice 1

Dans cet exercice on va utiliser la fonction include() pour factoriser le code HTML d'un site web.

On a un site web avec deux pages qui ont le même pied de page : finalistes2017.html et finalistes2018.html :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>M2202</title>
  <style>
    img {
      max-width: 70%;
    }
  </style>
</head>
<body>
  <header>
    <h1>2017 - Finalistes</h1>
  </header>
  <main>
    <img src="https://www.comedywildlifephoto.com/images/gallery/9/00000219_p.jpg" alt="Une loutre">
    <img src="https://www.comedywildlifephoto.com/images/gallery/4/00000224_p.jpg" alt="Deux têtards">
    <img src="https://www.comedywildlifephoto.com/images/gallery/1/00000231_p.jpg" alt="Deux foques">
  </main>
  <footer style="text-align: right;">
    <p>
      The Comedy Wildlife · 2021
    </p>
    <p>
      <a href="https://www.facebook.com/comedywildlifephotoawards">Facebook</a> · <a href="https://twitter.com/FunnyPhotoAward">Twitter</a> · <a href="https://instagram.com/comedywildlifephoto">Instagram</a>
    </p>
  </footer>
</body>
</html>
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>M2202</title>
  <style>
    img {
      max-width: 70%;
    }
  </style>
</head>
<body>
  <header>
    <h1>2018 - Finalistes</h1>
  </header>
  <main>
    <img src="https://www.comedywildlifephoto.com/images/gallery/5/00000315_p.jpg" alt="Deux ours polaires">
    <img src="https://www.comedywildlifephoto.com/images/gallery/9/00000319_p.jpg" alt="Deux ours dansants">
    <img src="https://www.comedywildlifephoto.com/images/gallery/0/00000320_p.jpg" alt="Deux lézards dansants">
  </main>
  <footer style="text-align: right;">
    <p>
      The Comedy Wildlife · 2021
    </p>
    <p>
      <a href="https://www.facebook.com/comedywildlifephotoawards">Facebook</a> · <a href="https://twitter.com/FunnyPhotoAward">Twitter</a> · <a href="https://instagram.com/comedywildlifephoto">Instagram</a>
    </p>
  </footer>
</body>
</html>

Utilisez la fonction include() pour factoriser le pied de page de ces deux pages web. Vous devriez faire trois fichiers : finalistes2017.php, finalistes2018.php et footer.php.

Premiers scripts

D'abord on va créer quelques scripts simples avec ce qu'on connaît déjà en PHP.

Exercice 2

Déclarez et initialisez deux variables, une pour le jour du mois (de type integer) et l'autre pour le mois (string). Donnez-leur les valeurs que vous voulez.

Affichez les deux variables dans une phrase. Par exemple, « Nous sommes le 31 mai »

Exercice 3

Répétez l'exercice 2, mais en faisant un code HTML valide comme ceci :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>M2202</title>
</head>
<body>
  <h1>TD #1 / Exo 3</h1>
  <p>
    <!-- Ajouter des choses ici -->
  </p>
</body>
</html>

Notez qu'il serait intéressant de laisser quelques lignes en dehors des balises PHP.

Utilisez le W3C Markup Validation Service pour valider la structure de votre code HTML.

Exercice 4

Faites un script qui nous dit si on est en week-end (samedi-dimanche) ou si on doit travailler (lundi-vendredi). Rédigez les deux messages comme vous voulez.

Pour récupérer le jour de la semaine, vous pouvez utiliser la fonction idate('w'). Lisez sa documentation pour plus de détails.

Vérifiez toujours que le code HTML généré est valide.

Exercice 5

Dans cet exercice vous allez faire un script qui calcule votre âge en fonction de votre date de naissance et de la date actuelle.

Pour donner votre date de naissance, utilisez trois variables (par exemple, $day, $month et $year). Pour récupérer le jour, le mois et l'année courante, utilisez les fonctions idate('d'), idate('m') et idate('Y'), respectivement.

Ensuite, comparez ces données pour calculer votre âge.

Exercice 6

Créez le code HTML suivant avec un script PHP en utilisant une boucle.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>M2202</title>
</head>
<body>
  <h1>TD #1 / Exo 6</h1>
  <ul>
    <li>Item numéro 10</li>
    <li>Item numéro 9</li>
    <li>Item numéro 8</li>
    <li>Item numéro 7</li>
    <li>Item numéro 6</li>
    <li>Item numéro 5</li>
    <li>Item numéro 4</li>
    <li>Item numéro 3</li>
    <li>Item numéro 2</li>
    <li>Item numéro 1</li>
  </ul>
</body>
</html>

La méthode get

Jusque là, nous (les utilisateurs) n'avons pas pu interagir avec les programmes en PHP. On sait afficher des données (avec echo), mais on ne sait pas encore comment les entrer. La façon la plus simple de transmettre une information à un script PHP est avec la méthode get.

Faites deux fichiers appelés formulaire.php et affichage.php. Le premier (formulaire.php) contient :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Formulaire</title>
</head>
<body>
  <form method="get" action="affichage.php">
    <input type="text" name="un_texte">
    <input type="submit" value="Valider">
  </form>
</body>
</html>

Et le deuxième (affichage.php) contient :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Affichage</title>
</head>
<body>
<?php 
$texte = $_GET['un_texte'];
echo '<p>Vous avez écrit ' . $texte . '</p>';
?>
</body>
</html>

Ces deux fichiers montrent comment on peut transmettre une variable d'un fichier PHP à un autre avec un formulaire :

  1. formulaire.php contient un formulaire (élément <form>). La valeur de l'attribut action dit quel fichier va traiter le formulaire.
  2. Dedans, il y a une balise <input> : c'est un champ de saisie où un peut écrire du texte.
  3. Après il y a une autre balise <input> de type submit : c'est le bouton pour traiter le formulaire.
  4. Quand on clique sur le bouton de validation du formulaire, PHP nous dirige vers le fichier affichage.php parce c'est ce qu'on a mis comme valeur dans l'attribut action du formulaire.
  5. Dans le fichier affichage.php, on retrouve ce qu'on a écrit dans le champ de saisie dans $_GET['un_texte'] parce que un_texte est aussi la valeur de l'attribut name du champ de saisie.
  6. On affecte ce string à la variable $texte et on l'affiche avec un echo.

Vous pouvez voir la variable qu'on a transmise aussi dans l'URL : affichage.php?un_texte=blablabla. Après le nom du fichier, il y a le symbole ? suivi du nom de la variable, (un_texte), le symbol =, et sa valeur (blablabla). Vous pouvez modifier cette URL à la main pour changer la valeur de la variable !

Exercice 7

Répétez l'exercice 3 avec un formulaire pour que l'utilisateur puisse choisir le jour et le mois.

Un exercice supplémentaire

Si vous avez le temps, faites cet exercice sur la conjecture de Syracuse.

Prenez n'importe quel nombre plus grand que 0. S'il est pair, divisez-le par deux. Sinon, multipliez-le par 3 et ajoutez un. Et puis, répétez cette opération jusqu'à arriver à 1. Par exemple :

3 → 10 → 5 → 16 → 8 → 4 → 2 → 1
5 → 16 → 8 → 4 → 2 → 1
7 → 22 → 11 → 34 → 16 → 8 → 4 → 2 → 1

La conjecture de Syracuse dit que, pour n'importe quel nombre plus grand que zéro, la suite s'arrête dans un nombre fini d'étapes : on tombe toujours sur 1. C'est une conjecture parce que personne ne sait si c'est vrai.

Exercice 8

Dans cet exercice on va programmer la suite de Syracuse.

Faites d'abord un programme qui prend une variable ($x, par exemple), affiche sa suite et affiche aussi sa longueur. Par exemple, si $x est égale à 10, ça doit afficher :

...
<p>Suite : 10 5 16 8 4 2 1</p>
<p>Longueur : 7</p>
...

Ensuite, utilisez un formulaire avec la méthode get pour que l'utilisateur puisse choisir le nombre de départ. Quelle est la suite la plus longue que vous avez trouvée ?