ajout md TD et TP seconde semaine sur les formulaires

This commit is contained in:
Florent Madelaine 2022-04-21 13:50:21 +02:00
parent 783eb2c035
commit 9c96eeb151
2 changed files with 229 additions and 0 deletions

165
2TDFormSansCorrection.md Normal file
View File

@ -0,0 +1,165 @@
# TD Formulaire (intro). #
## Exo (Quizz) ##
* Pour transmettre l'information d'un formulaire, je peux utiliser
- get
- set
- post
- lock
- mock
* Quelle forme est la plus adaptée si je veux pouvoir mettre un marque-page?
* Quelle forme est la plus adaptée si je veux transmettre un mot de passe? pourquoi?
* Quel élément de formulaire permet de choisir exactement une option?
* Quel élément de formulaire permet de choisir plusieurs options?
**correction**
* get, post
* get
* post, car la valeur du mdp sera caché alors qu'avec get elles apparaitra dans l'url.
* radio
* checkbox
## Exo (Syntaxe) ##
Notre page web contient ceci.
```html
<form action="salut.php" method="get">
ton surnom : <input type="text" name="toto">
</form>
```
Nous souhaitons que salut.php (ci-dessous) affiche salut suivi du surnom entré à la page précédente.
**à corriger**
```php
<html>
<body>
Welcome <?php echo "toto"; ?>
</body>
</html>
```
**correction**
```php
<html>
<body>
Welcome <?php echo $_GET[$toto]; ?>
</body>
</html>
```
## Exo (Un jeu) ##
On souhaite coder le jeu super ludique suivant.
L'utilisateur doit écrire une ligne de texte sur une première ligne et une autre ligne de texte sur une seconde ligne qui soit la traduction en rot13.
Pour ceci PhP offre une méthode intéressante `str_rot13(string $string): string`
Ainsi le fichier suivant :
```php
<!DOCTYPE html>
<html>
<body>
<?php
echo str_rot13("Salut toto, rot13 c'est nul comme crypto");
echo "<br>";
echo str_rot13("Fnyhg gbgb, ebg13 p'rfg ahy pbzzr pelcgb");
?>
</body>
</html>
```
va afficher ceci sur le navigateur.
```
Fnyhg gbgb, ebg13 p'rfg ahy pbzzr pelcgb
Salut toto, rot13 c'est nul comme crypto
```
Pour le jeu on veut donc un formulaire
```html
<h1>Le Jeu du rot13</h1>
<form action="rot13.php" method="get">
<label>le clair :</label>
<br>
<input type="text" name="clair">
<br>
<label>le chiffré :</label>
<br>
<input type="text" name="chiffre">
<br>
<br>
<input type="submit" value="Jouer">
</form>
```
Détaillez les parties intéressates du fichier `rot13.php` qui permettent d'afficher win ou loss (en rot13 évidemment) selon que le joueur a gagné ou perdu en dessous du texte chiffré initial.
Exemple si je soumet
```
le clair :
Salut toto
le chiffré :
Fnyhg gbgb
```
alors le navigateur va afficher
```
Fnyhg gbgb
???
```
où ??? correspond à win en rot13.
Question bonus : quelle url permet-elle d'afficher win en rot13 en dessous de win?
## Exo ##
à faire exo luc qui transforme le get en post
idem dans l'autre sens.
## Exo (string et tableaux associatifs)##
introduction quelques méthodes pour les string.
explode(string $separator, string $string, int $limit = PHP_INT_MAX): array
Pour obtenir le tableau des mots d'une phrase :
explode(" ","bonjour tout le monde")
Pour faire la différence entre deux tableaux
array_diff(array $array, array ...$arrays): array
Exemple :
<?php
$a1=array("a"=>"red","b"=>"green","c"=>"blue","d"=>"yellow");
$a2=array("e"=>"red","f"=>"green","g"=>"blue");
$result=array_diff($a1,$a2);
print_r($result);
?>
va afficher
Array ( [d] => yellow )
Question.
Écrire un programme PhP qui prend une phrase en argument, enlève les mots pas intéressants ou vulgaires (par exemple "le la les de du au à quel quelle il elle tu je nous vous ils mais ou et donc or ni car zouave étudiant athlète") et compte le nombre de mots.
On affiche les mots sous forme d'un nuage de mot du pauvre en changeant la taille des mots en fonction de leur fréquence.
Par exemple, dix fois leur fréquence en pixel:
<p style="font-size:30px">Trendy</p>
<p style="font-size:60px">Cool</p>

64
2TPFormSansCorrection.md Normal file
View File

@ -0,0 +1,64 @@
# TP Formulaire (intro). #
## Exo (Multiplication) ##
On souhaite mettre en oeuvre une petite page permettant d'afficher une table de multiplication.
Un bouton permet d'envoyer un entier pour générer la table appropriée.
On aura ainsi un fichier html contenant ce code quand on selectionne 7.
```html
<h3>Table de 7</h3>
<ul>
<li>1 x 7 = 7</li>
<li>2 x 7 = 14</li>
<li>3 x 7 = 21</li>
<li>4 x 7 = 28</li>
<li>5 x 7 = 35</li>
<li>6 x 7 = 42</li>
<li>7 x 7 = 49</li>
<li>8 x 7 = 56</li>
<li>9 x 7 = 63</li>
<li>10 x 7 = 70</li>
</ul>
<h4>Table de multiplication</h4>
<form method="GET">
<input type="number" name="table" placeholder="table">
<button type="submit">ENVOYER</button>
</form>
```
* Testez rapidement ce code html, en particulier le comportement du boutton selon que vous saissez un nombre ou du texte dans le formulaire. Regardez la documentation (par exemple sur W3schools) de la balise `<input>`
* Proposez un fichier php qui permette d'utiliser la variable changée par l'action du bouton pour générer le code html ci-dessus.
* Que se passe-t-il si vous changez la valeur du nombre dans l'url par un autre nombre?
* Allez relire le cours sur GET et documentez vous à ce sujet (par exemple PHP superglobals sur le site de la W3schools).
* Que se passe-t-il si vous changez la valeur numérique par du texte dans l'url?
* Allez lire la documentation de `filter-input`
* Améliorez votre page en filtrant.
## Exo (Calculette ##
Ecrire une petite calculatrice permettant d'effectuer des opérations arithmétiques élémentaires (+,x,-,/) sur deux opérandes.
[//]: # (This may be the most platform independent comment) ![](./img/ex3.png)
1. Première version : affichez un formulaire permettant, dans
l'ordre, de saisir la première opérande, puis dans une liste
(`SELECT`) l'opération, enfin de saisir la deuxième opérande.
Associez à ce formulaire le script effectuant le calcul et
affichant le résultat.
2. Assurez-vous qu'on ne puisse pas diviser par 0.
3. Deuxième version : après un calcul, réaffichez le formulaire en
proposant comme valeur par défaut de la première opérande le
résultat du calcul précédent.