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 un formulaire pour interagir avec un site web.
Avant de commencer, créez dans votre espace personnel un répertoire nommé r213 pour y sauvegarder tout votre travail dans ce module.
Dedans, créez un autre répertoire nommé r213-td1 pour sauvegarder les exercices de cette séance (TD #1).
Dans ce répertoire r213-td1, créez un répertoire appelé exo1 pour le premier exercice, exo2 pour le deuxième, etc.
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>R213</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.
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 : finalistes2020.html et finalistes2021.html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>R213</title>
<style>
img {
max-width: 70%;
}
</style>
</head>
<body>
<header>
<h1>2020 - 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 · 2022
</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>R213</title>
<style>
img {
max-width: 70%;
}
</style>
</head>
<body>
<header>
<h1>2021 - 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 · 2022
</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 : finalistes2020.php, finalistes2021.php et footer.php.
D'abord on va créer quelques scripts simples avec ce qu'on connaît déjà en PHP.
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 »
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>R213</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.
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, utilisez la fonction idate('w'). Lisez sa documentation pour plus de détails.
Vérifiez toujours que le code HTML généré est valide.
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.
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>R213</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>
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 un formulaire.
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="post" 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 = $_POST['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 :
<form>). La valeur de l'attribut action dit quel fichier va traiter le formulaire.
<input> : c'est un champ de saisie où un peut écrire du texte.
<input> de type submit : c'est le bouton pour traiter le formulaire.
action du formulaire.
$_POST['un_texte'] parce que un_texte est aussi la valeur de l'attribut name du champ de saisie.
$texte et on l'affiche avec un echo.
Répétez l'exercice 3 avec un formulaire pour que l'utilisateur puisse choisir le jour et le mois.
Pour entrer deux données il vous faudra deux éléments <input> dans le même formulaire mais avec des valeurs différentes pour l'attribut name.
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.
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 pour que l'utilisateur puisse choisir le nombre de départ. Quelle est la suite la plus longue que vous avez trouvée ?