>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
- <title>PHP : Sessions et persistance</title>
+ <title>Formulaires</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</script>
</head>
<body>
- <a href="prog_internet_07.xhtml" class="sws-previous"/>
+ <a href="unix_prog_web_07.xhtml" class="sws-previous"/>
<div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Programmation Internet</h1>
+ <h1>Unix et Programmation Web</h1>
<h1>Cours 8</h1>
<a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
<a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
</div>
- <h1>En-tête de requêtes HTTP</h1>
-
+ <h1>Formulaires (utilisation avancée)</h1>
<div class="sws-slide">
- <h1>Retour sur le protocole HTTP</h1>
- <ul><li><em>Client : </em>
-<code>GET <em>/~kn/index.html</em> HTTP/1.1
-Host: www.lri.fr
-</code> </li>
-<li><em>Serveur : </em><br/>
- <code style="display:inline-block;width:60%;vertical-align:top;">HTTP/1.1 200 OK
-Server: nginx/1.4.1 (Ubuntu)
-Date: Sun, 17 Nov 2013 16:44:48 GMT
-Content-Type: <em>text/html</em>
-Content-Length: 2038
-<![CDATA[
-<html>
- <head><title>Homepage</title> </head>
- <body>
- …
-]]>
- </code>
-<code style="display:inline-block;
- black;width:30%;vertical-align:top;">} ← <em>code de retour</em>
+ <h1>Champs de texte</h1>
+ <p>On peut placer un champ de texte dans un formulaire au moyen
+ de la balise <em><tt><input type="text"
+ /></tt></em>.
+ </p>
+ <code><![CDATA[ <input size="10" name="montexte" type="text" value="abc" />]]></code>
+ <p>Apperçu: <input size="10" name="montexte" type="text"
+ value="abc"/><br/><br/>
+ Attributs:
+ </p>
+ <ul>
+ <li>size: donne la largeur en caractères</li>
+ <li>name: le nom de l'élément (pour y accéder depuis PHP)</li>
+ <li>value: la valeur initiale du champ (si on veut le pré-remplir)</li>
+ </ul>
+ <p>Accès à la valeur depuis PHP se fait
+ via <tt>$_GET["montexte"]</tt> ou <tt>$_POST["montexte"]</tt>
+ selon la valeur de l'attribut <tt>method</tt> de
+ l'élément <tt>form</tt> englobant.</p>
+ </div>
-} ← <em>type de contenu</em>
-} ← <em>longueur du contenu</em>
-<span style="font-size:400%;vertical-align:middle;">}</span> <span>←</span> <em>contenu (2038 octets)</em>
-</code>
-</li>
+ <div class="sws-slide">
+ <h1>Champs de texte long</h1>
+ <p>Pour des textes multilignes, on utilise la
+ balise <em><tt><textarea /></tt></em>.
+ </p>
+ <code><![CDATA[ <textarea name="montexte" rows="3" cols="10">du texte!</textarea>
+]]></code>
+ <p>Apperçu: <textarea name="montexte" rows="3" cols="10">du texte!</textarea>
+ Attributs:
+ </p>
+ <ul>
+ <li>rows: donne le nombre de lignes</li>
+ <li>cols: donne le nombre de colonnes (largeur en nombre de caractères)</li>
+ <li>name: le nom de l'élément (pour y accéder depuis PHP)</li>
</ul>
+ <p>On peut pré-remplir la zone en mettant du texte entre la
+ balise ouvrante et fermante.
+ Accès à la valeur depuis PHP se fait
+ via <tt>$_GET["montexte"]</tt> ou <tt>$_POST["montexte"]</tt>
+ selon la valeur de l'attribut <tt>method</tt> de
+ l'élément <tt>form</tt> englobant.</p>
</div>
-
<div class="sws-slide">
- <h1>Retour sur le protocole HTTP (2)</h1>
- <ul><li><em>Client : </em>
-<code>GET <em>/~kn/fichier.pdf</em> HTTP/1.1
-Host: www.lri.fr
-</code> </li>
-<li><em>Serveur : </em><br/>
- <code >HTTP/1.1 200 OK
-Server: nginx/1.4.1 (Ubuntu)
-Date: Sun, 17 Nov 2013 16:44:48 GMT
-Content-Type: <em>application/pdf</em>
-Content-Length: 103449
-<![CDATA[
-%PDF-1.2
-%
-8 0 obj
-<</Length 9 0 R/Filter /FlateDecode>>
-stream
-………
- ]]>
- </code>
-
-</li>
+ <h1>Listes déroulantes</h1>
+ <p>On peut définir une liste déroulante avec les
+ balises <tt><select></tt> et <tt><option></tt></p>
+<code><![CDATA[
+ <select name="maliste">
+ <option value="bleu" >Bleu</option>
+ <option value="vert" >Vert</option>
+ <option value="rouge" >Rouge</option>
+ <option value="jaune" selected="selected" >Jaune</option>
+ </select>
+]]></code>
+<p> Apperçu: <select name="maliste">
+ <option value="bleu" >Bleu</option>
+ <option value="vert" >Vert</option>
+ <option value="rouge" >Rouge</option>
+ <option value="jaune" selected="selected" >Jaune</option>
+ </select>
+ Attributs:
+ </p>
+ <ul>
+ <li>name (dans select): le nom de l'élément (pour y accéder
+ depuis PHP)</li>
+ <li>value (dans option): donne la valeur du choix</li>
+ <li>checked (dans option): pré-selectionne cette option</li>
</ul>
+ <p>Le contenu de chaque élément option est celui affiché dans la
+ liste.
+ Accès à la valeur depuis PHP se fait
+ via <tt>$_GET["maliste"]</tt> ou <tt>$_POST["maliste"]</tt>
+ selon la valeur de l'attribut <tt>method</tt> de
+ l'élément <tt>form</tt> englobant.</p>
</div>
-<div class="sws-slide">
-<h1>Modifier le <em>content-type</em> en PHP</h1>
-<p>Fichier <tt>notes_csv.php</tt>:</p>
-<code> <?php<em>
- header('Content-type: application/csv');
- header('Content-Disposition: attachement; filename="notes.csv"');</em>
- echo "Nom, Note\n";
- foreach ($NOTES as $nom => $note)
- echo $nom . ", " . $note . "\n";
+ <div class="sws-slide">
+ <h1>Boutons à choix unique</h1>
+ <p>On peut définir un choix avec la balise
+ <tt><input type="radio"></tt></p>
+<code><![CDATA[
+ 8h<input type="radio" name="h" value="matin"/>
+ 12h<input type="radio" name="h" value="midi"/>
+ 20h<input type="radio" name="h" value="soir"/>
+]]>
+</code>
+<p>Apperçu : 8h<input type="radio" name="h" value="matin"/>
+12h<input type="radio" name="h" value="midi"/>
+20h<input type="radio" name="h" value="soir"/>
+</p>
+ <p>
+ Accès à la valeur depuis PHP se fait
+ via <tt>$_GET["h"]</tt> ou <tt>$_POST["h"]</tt>
+ selon la valeur de l'attribut <tt>method</tt> de
+ l'élément <tt>form</tt> englobant.<br/>
+ <s>Attention</s> il faut réutiliser la même valeur de
+ l'attribut <tt>name</tt> pour les boutons du même groupe.
- ?></code>
-<p class="sws-pause"><b style="color:red">⚠ Attention!</b></p>
-<ul>
- <li>Les appels à la fonction <em><tt>header()</tt></em> doivent se
- trouver <s>avant</s> le premier <tt>echo()</tt> du code PHP</li>
- <li>
- Le code PHP doit générer (avec <tt>echo()</tt>) du contenu
- compatible avec le type annoncé (et pas du HTML)
- </li>
-</ul>
+</p>
</div>
+ <div class="sws-slide">
+ <h1>Cases à choix multiples</h1>
+ <p>On peut définir des cases à cocher à choix multiple avec la balise
+ <tt><input type="radio"></tt></p>
+<code><![CDATA[
+ 8h<input type="checkbox" name="tab[]" value="matin"/>
+ 12h<input type="checkbox" name="tab[]" value="midi"/>
+ 20h<input type="checkbox" name="tab[]" value="soir"/>
+]]>
+</code>
+<p>Apperçu:
+ 8h<input type="checkbox" name="tab[]" value="matin"/>
+ 12h<input type="checkbox" name="tab[]" value="midi"/>
+ 20h<input type="checkbox" name="tab[]" value="soir"/>
+</p>
+ <p>
+ Accès à la valeur depuis PHP se fait
+ via <tt>$_GET["tab"]</tt> ou <tt>$_POST["tab"]</tt>
+ selon la valeur de l'attribut <tt>method</tt> de
+ l'élément <tt>form</tt> englobant.<br/>
+ <s>Attention</s> il faut rajouter <tt>[]</tt> dans l'attribut <tt>name</tt> pour
+ que PHP crée un tableau. <tt>tab[<i>i</i>]</tt> contient la
+ valeur de la <i>i<sup>ème</sup></i> cases cochée (à partir de 0).
+</p>
+</div>
+<h1>Variables super-globales (rappels)</h1>
<div class="sws-slide">
-<h1>Quelques en-tête utiles</h1>
-<p>En tête utilisés par le serveur dans ses réponses</p>
-<dl>
- <dt><tt>Content-type</tt></dt><dd>type MIME du contenu envoyé par le
- serveur</dd>
- <dt><tt>Content-Disposition</tt></dt><dd>permet de mentionner un nom de
- fichier : <em><tt>attachment; filname="foobar.baz"</tt></em></dd>
- <dt><tt>Cache-Control</tt></dt><dd>permet de forcer le client à
- retélécharger la page: <em><tt>no-cache, must-revalidate</tt></em>
- </dd>
- <dt><tt>Last-Modified</tt></dt><dd>date de dernière modification du
- contenu demandé</dd>
-</dl>
-<p>En tête utilisés par le client dans ses requêtes</p>
-<dl>
- <dt><tt>Range</tt></dt><dd>permet de ne récupérer qu'un intervale
- d'octets donné dans un fichier: <em><tt>bytes=500-999</tt></em>
- </dd>
- …
-</dl>
+ <h1>Variables super-globales</h1>
+ <p>PHP définit un certain nombre de variables dites
+ « super-globales ». Ce sont des variables accessible
+ depuis n'importe où dans un programme PHP, y compris depuis des
+ fonctions, sans adjonction du mot clé <tt>global</tt>.</p>
+ <code>
+ $TOTO = 42;
+ function f() {
+ global $TOTO; // obligatoire, sinon $TOTO n'est pas visible
+ echo $TOTO;
+ echo $_GET["champ"]; //fonctionne toujours, même sans 'global'
+ //au début de la fonction.
+
+ }
+
+ </code>
</div>
<div class="sws-slide">
- <h1>Retour sur le protocole HTTP (3)</h1>
- <p>On rappelle que HTTP est un protocole <em><i>stateless</i></em>
- (sans état, <i>i.e.</i> le serveur Web ne conserve pas d'information
- entre les connexions). Quel problème cela pose-t-il ?</p>
- <ul >
- <li class="sws-pause">Pas de partage d'information entre plusieur
- pages</li>
- <li class="sws-pause">Pas de mécanisme de reprise sur panne
- </li>
- <li class="sws-pause">Pas de persistance de l'information</li>
- <li class="sws-pause">Pas d'authentification (impossible de savoir
- que deux connexions successives ont été faites par le même
- client)</li>
- </ul>
- <p class="sws-pause">⇒ difficle de réaliser une « application »
- moderne répartie sur plusieurs pages</p>
+<h1>Variable <tt>$_GET</tt> et <tt>$_POST</tt></h1>
+<p>
+ Ces variables contiennent les valeurs des champs d'un formulaire.
+ Si l'attribut <tt>method</tt> de l'élément <tt>form</tt>
+ vaut <tt>get</tt> la variable <tt>$_GET</tt> contient les valeurs.
+ S'il vaut <tt>post</tt> la variable <tt>$_POST</tt> est à utiliser.
+</p>
</div>
-
-<h1>Cookies</h1>
<div class="sws-slide">
-<h1>Cookies</h1>
-<p>Un <em><i>cookie</i></em> est un packet de données envoyé par le
- serveur, stocké par le client (navigateur Web) et renvoyé au serveur
- lors d'une nouvelle connexion. Les propriétés d'un cookie sont:
+<h1>Variable <tt>$_FILES</tt></h1>
+<p>
+ Cette variable contient les informations relatives aux fichiers
+ envoyés par le client.<br/>Si le nom du champ est <tt>fichier</tt>,
+ alors:
+
</p>
<dl>
- <dt>Son nom</dt><dd>une chaîne de caractères</dd>
- <dt>Sa valeur</dt><dd>une chaîne de caraceres</dd>
- <dt>Sa durée de vie</dt><dd>jusqu'à la fin de la « session » ou pour
- une période donnée</dd>
- <dt>Son domaine</dt><dd>Le nom du site web émetteur du cookie</dd>
- <dt>Son chemin</dt><dd>Le sous-répertoire (par rapport à la racine
- du site) pour lequel le cookie est valide</dd>
-</dl>
-<p><b style="color:red">⚠ Attention!</b> seul le domaine qui a
- déposé le cookie est capable de le relire</p>
+ <dt><tt>$_FILES["fichier"]["error"]</tt></dt> <dd>Code d'erreur
+ (0 si tout c'est bien passé, <tt>></tt> 0 si une erreur s'est produite. Les
+ autres champs ne sont définis que si "error" vaut 0).
+ </dd>
+ <dt><tt>$_FILES["fichier"]["tmp_name"]</tt></dt><dd>Nom du fichier
+ temporaire sur le serveur où a été sauvegardé le contenu du
+ fichier envoyé</dd>
+ <dt><tt>$_FILES["fichier"]["name"]</tt></dt><dd>Nom original du fichier</dd>
+ <dt><tt>$_FILES["fichier"]["size"]</tt></dt><dd>Taille du
+ fichier</dd>
+ <dt><tt>$_FILES["fichier"]["type"]</tt></dt><dd>Le type MIME du fichier</dd>
+ </dl>
</div>
<div class="sws-slide">
-<h1>Cookies en PHP</h1>
-<p>Créer ou mettre à jour un cookie sur le client:</p>
-<code style="text-justify:center">
- setcookie(<em>$nom</em>, <em>$val</em>, <em>$date</em>);
-</code>
-<dl>
- <dt><tt>$nom</tt></dt><dd>nom du cookie</dd>
- <dt><tt>$val</tt></dt><dd>valeur du cookie</dd>
- <dt><tt>$date</tt></dt><dd>date d'expiration en secondes
- depuis <i>epoch</i> (1<sup>er</sup> janvier 1970 00:00:00)
- ou <tt>NULL</tt> pour une expiration automatique.</dd>
-</dl>
-<p>(on peut récupérer le nombre de secondes depuis <i>epoche</i> avec
- la fonction <tt>time()</tt>).<br/>
- Exemple:
+<h1>Variable <tt>$_SESSION</tt></h1>
+<p>Contient les <em>variables de sessions</em>. La variable n'est
+ accessible qu'après un appel à <tt>session_start()</tt>. Ces
+ le contenu de cette variable persiste durant toute la durée de la
+ session même sur des pages différentes. La
+ variable <tt>$_SESSION</tt> est un tableau.
</p>
-<code> setcookie("mon_cookie", "42", time() + 3600 * 24 * 30);</code>
</div>
<div class="sws-slide">
- <h1>Cookies en PHP</h1>
- <p>On peut récupérer la valeur d'un cookie depuis PHP:
- </p>
- <code> <em>$_COOKIE["mon_cookie"]</em></code>
- <p>Un cookie <tt>"foo"</tt> existe (<i>i.e.</i> a été défini
- auparavant) si une entrée correspondante existe dans le tableau
- global <em><tt>$_COOKIE</tt></em>. On peut tester qu'une entrée
- existe dans un tableau avec <em><tt>isset()</tt></em>.
- </p>
- <p><b style="color:red">⚠ Attention!</b> </p>
- <ul>
- <li>On ne peut pas écrire dans <em>$_COOKIE</em> (par
- exemple <tt>$_COOKIE["foo"] = 42</tt>), il faut
- utiliser <em><tt>setcookie()</tt></em>.
- </li>
- <li><em><tt>setcookie()</tt></em>
- utilise <em><tt>header()</tt></em> et doit donc être appelé avant
- le premier <em><tt>echo()</tt></em> du fichier.
- </li>
- <li>Pour effacer un cookie, on peut lui donner une date
- d'expiration antérieure à l'instant présent (<tt>0</tt> par exemple)</li>
- </ul>
-</div>
-
-<div class="sws-slide">
- <h1>Avantages et inconvénients des cookies</h1>
-<ul style="list-style-type:none;">
- <li class="sws-pause"><b>+</b> stockage persistant</li>
- <li class="sws-pause"><b>+</b> interface simple d'utilisation (une
- variable pour la lecture et <tt>setcookie</tt> pour l'écriture)</li>
- <li class="sws-pause"><b>-</b> limité en taille </li>
- <li class="sws-pause"><b>-</b> limité en nombre par domaine</li>
- <li class="sws-pause"><b>-</b> type de donnée limité à des chaînes
- (on ne peut pas stocker un tableau PHP par exemple)</li>
-<li class="sws-pause"><b>+/-</b> stocké sur le client</li>
-</ul>
-</div>
-<h1>Sessions</h1>
-<div class="sws-slide">
-<h1>Sessions</h1>
- <p>Une <em>session HTTP</em> est un ensemble de requêtes/réponses HTTP
- entre un serveur et un <em>même</em> client.<br/>
- Exemple d'un sondage en ligne:
- </p>
- <ol> <li>Le visiteur arrive sur la page <tt>q1.php</tt> en cliquant sur
- le lien « commencer le sondage » (<em>Début de session</em>)
- </li>
- <li> Sur <tt>q1.php</tt>, l'utilisateur coche des choix dans un formulaire et appuie
- sur un boutton de soumission qui l'envoie sur <tt>q2.php</tt>
- </li>
- <li>…</li>
- <li> Sur <tt>q10.php</tt>, l'utilisateur coche des choix dans un
- formulaire et appuie sur un bouton de soumission qui l'envoie
- sur <tt>resultat.php</tt></li>
- <li> Sur <tt>resultat.php</tt>, le résultat global du sondage (%
- par question, nombre de participants jusqu'à présent etc...) est
- affiché (<em>Fin de session</em>)
- </li>
- </ol>
-
-</div>
-<div class="sws-slide">
- <h1>Variables de session</h1>
- <p>Pour programmer une application Web, on souhaîte avoir accès à
- des <em>variables de session</em> c'est à dire des variables qui
- sont:
- </p>
- <ul><li>Globale au serveur, et accessibles depuis plusieurs pages
- PHP différentes</li>
- <li>Spécifiques à un « utilisateur » (c'est à dire à une session
- particulière)
- </li>
- </ul>
- <p>Les variables de sessions sont donc propres à chaque client et
- persistent le temp de la session (le temps de session est décidé par
- le serveur)</p>
+<h1>Variable <tt>$_COOKIE</tt></h1>
+<p>Contient les <em>cookies</em> que le client à envoyé au serveur.
+ La
+ variable <tt>$_COOKIE</tt> est un tableau.
+</p>
</div>
+<h1>Conception d'une application simple (étude de cas)</h1>
<div class="sws-slide">
- <h1>Variables de session en PHP</h1>
- <p>On initie une session avec la fonction:</p>
- <code> <em>session_start();</em> </code>
- <p>Une fois appelée, la variable <em><tt>$_SESSION</tt></em>
- contient un tableau que l'on peut utiliser entre plusieurs
- pages. Les valeurs contenues dans le tableau persistent jusqu'à la
- fin de la session. Une session se termine:
+ <h1>Cahier des charges</h1>
+ <p>On souhaite créer une application Web simple de gestion de QCM.
+ L'application doit répondre au contraintes suivantes :
</p>
- <ul><li>Quand le client se déconnecte</li>
- <li>Après un certain temps (« votre session a expiré, veuillez
- vous reconnecter»)</li>
- <li>Quand le code PHP
- appelle <em><tt>session_end();</tt></em></li>
+ <ul>
+ <li>Un QCM est un ensemble de questions, suivies d'une liste de
+ choix. Il peut y avoir plusieurs choix possible. La réponse à la
+ question est correcte si uniquement les bons choix sont
+ sélectionnés.</li>
+ <li>Un QCM doit être facilement modifiable/éditable</li>
+ <li>Après la réponse à la dernière question, le score de
+ l'utilisateur est affiché, ainsi que les bonnes réponses</li>
+ <li>Il y a un temps limite par question</li>
</ul>
-<p><b style="color:red">⚠
- Attention!</b> <em><tt>session_start()</tt></em> doit être appelé
- avant le premier <tt>echo</tt> du fichier.</p>
</div>
<div class="sws-slide">
- <h1>Variables de session en PHP (2)</h1>
-<code style="border: 2pt dashed gray;margin:5pt;">
- <?php /* Fichier page1.php */
- <em>session_start();
- $_SESSION["Valeur"] = 42;</em>
- ?>
- <![CDATA[<html>
- <body>
- Veuillez cliquer sur le <a href=]]><em>"page2.php"</em><![CDATA[>lien</a>
- </body>
- </html>
-]]></code>
-<code style="border: 2pt dashed gray;margin:5pt;"> <![CDATA[<html>
- <body>
- La valeur est <?php]]> <em>echo $_SESSION["Valeur"];</em> <![CDATA[?>
- <!-- affiche 42 -->
- </body>
- </html>
-]]></code>
-</div>
-<div class="sws-slide">
- <h1>Avantages et inconvénients des session</h1>
-<ul style="list-style-type:none;">
- <li class="sws-pause"><b>+</b> Informations stockées sur le serveur</li>
- <li class="sws-pause"><b>+</b> Pas de limite de taille</li>
- <li class="sws-pause"><b>+</b> Pas limité à des chaînes de caractères</li>
- <li class="sws-pause"><b>-</b> Valeurs perdues en fin de session</li>
- <li class="sws-pause"><b>-</b> <s>Nécessite des cookies</s></li>
-</ul>
-</div>
-<div class="sws-slide">
- <h1>Sessions PHP: détails d'implantation</h1>
- <div class="twocol">
- <div><em>Coté client</em><br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-Connexion à une page PHP (envoie du cookie ("php_ssid", "12345"))
-
-
- </div>
- <div><em>Coté serveur (PHP)</em><br/>
- <tt>session_start();</tt><br/>
- - génération d'un ID unique "12345"<br/>
- - dépot d'un cookie "php_ssid", valeur "12345", durée 10 minutes
- - création dans un tableau global d'une entrée:<br/>
- <tt>$_GLOBAL["12345"] = Array();</tt><br/>
- <br/>
- <tt>$_SESSION = $_GLOBAL[$_COOKIE["php_ssid"]]</tt>
- </div>
- </div>
-</div>
+<h1>But du jeu</h1>
+<p>Nous allons concevoir, le plus précisément possible l'application
+ (prenez des notes) :
+</p>
-<div class="sws-slide">
- <h1>Dans la vraie Vie<sup>TM</sup></h1>
- <p>Mélange de variables de sessions, cookies et bases de données.<br/>
- Scénario réaliste: site de commerce en ligne
- </p>
- <ul>
- <li>Login/mot de passe stocké dans
- une <em style="color:blue;">BD</em> </li>
- <li>Panier courant stocké dans une <em>variable de
- session</em></li>
- <li>Login, date de dernière visite, dernière page visitée stockés
- dans un <em style="color:orange">en cookie</em></li>
- </ul>
- <p class="sws-pause">Pourquoi ?</p>
<ul>
- <li><em style="color:blue;">BD</em>: information persistante,
- côté serveur (mais la mise à jour, récupération de l'info est
- coûteuse (en temps))
- </li>
- <li><em>Variables de sessions</em> : le panier n'a pas forcément
- besoin d'être conservé entre deux sessions, mais on ne veut pas
- que le client puisse fabriquer un panier frauduleux
- </li>
- <li><em style="color:orange">Cookie</em> : persistante à faible
- coût (stocké sur le client), ce n'est pas grave si les
- informations sont perdues ou corrompues
- </li>
+ <li>Rafiner le cahier des charges</li>
+ <li>Prévoir plusieurs scénarios d'utilisation</li>
+ <li>Concevoir l'application (données, interface grapique,
+ code)</li>
+ <li>Tester/vérifier la robustesse</li>
</ul>
-
- </div>
+<p>Vous devrez écrire le code correspondant en TP</p>
+</div>
</body>
+
+
</html>