dartoisl/Web
1
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

tp2

Browse Source
This commit is contained in:
Luc Dartois 2024-05-06 10:20:57 +02:00
parent a8e398f198
commit ad0030c065
22 changed files with 340 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
TP/TP2/README.md Normal file
View File

@ -0,0 +1,100 @@
# TP 2 : Intéractions avec le client. Formulaires HTML et PHP.
> On utilisera autant que possible les fonctions
[filter\_input](http://php.net/manual/fr/function.filter-input.php) ou
[filter\_var](http://php.net/manual/fr/function.filter-var.php) qui
permettent de valider le type (ou nettoyer) des entrées d'un formulaire
(entre autre).
### Ex1.
Ecrire le script de traitement associé au formulaire (2 champs texte
pour le nom et prénom, deux boutons radio pour choisir le sexe) qui
affiche le message bonjour Monsieur ou bonjour Madame suivi du
prénom et du nom.
<img src="./img/exo1.png" width="400">
<img src="./img/exo11.png" width="400">
Faites en sorte que la première lettre (et elle seule) du prénom et
du nom soit en en majuscule.
Vous pouvez utilisez les fonctions :
```php
string strtolower ( string $string );
string ucfirst ( string $str );
```
### Ex2.
Ecrire un (seul) script qui saisit dans un champs texte un entier et
qui affiche la table de multiplication correspondante lors de la
soumission.
![](./img/ex2.png)
### Ex3.
Ecrire une petite calculatrice permettant d'effectuer des
opérations arithmétiques élémentaires (+,x,-,/) sur deux opérandes.
![](./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.
### Ex4.
Vous diposez du fichier html `quizz.html`. Pour chaque question, il
n'y a qu'une réponse exacte. On vous demande d'écrire le script
php de traitement des réponses qui affiche au joueur le résultat du
jeu :
![](./img/ex4.png)
![](./img/ex41.png)
Regardez-bien comment est structuré le quizz (nom des variables,
valeurs transmises, etc ). Cela doit vous permettre d'écrire un
script php qui s'adaptera automatiquement si on rajoute ou on
enlève des questions au quizz.
Evidemment, il est très facile de tricher !
### Ex5.
Vous disposez du formulaire suivant :
![](./img/ex5.png)
- Un champ texte permet de saisir un verbe du premier groupe à
conjuguer.
- Des cases à cocher permettent de choisir les temps de
conjugaisons.
Ecrire le script PHP qui receptionne les données **postées** par le
formulaire précédent, et qui affiche le verbe conjugué aux temps
choisis.
![](./img/ex51.png)
<details>
<summary>Conseils</summary>
<div>
Pour extraire le radical, vous pouvez utiliser la
fonction [substr](http://fr2.php.net/manual/fr/function.substr.php)
```php
string substr ( string $string , int $start [, int $length ] );
```
Vous pouvez également stocker dans un tableau associatif les
terminaisons possibles, ainsi que les pronoms personnels.
```php
$terminaisons = array("present"=>array("e","es","e","ons","ez","ent"), ...
```
</div>
</details>

3
TP/TP2/ex1/css/style.css Normal file
View File

@ -0,0 +1,3 @@
form button{
float:right;
}

42
TP/TP2/ex1/ex1.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="http://www.iut-fbleau.fr/css/tacit.css">
<link rel="stylesheet" href="./css/style.css">
<title>Exercice 1</title>
</head>
<body container>
<div grid>
<div column="8 +2">
<h3> Exercice 1</h3>
<form action="ex1.php" method="POST">
<fieldset>
<legend>Qui êtes-vous ?</legend>
<!-- Text input-->
<label>Nom<br>
<input name="nom" placeholder="nom" type="text">
</label>
<!-- Text input-->
<label >Prénom<br>
<input name="prenom" placeholder="prénom" type="text">
</label>
<!-- Multiple Radios -->
<label class="control-label" for="radios">Sexe</label>
<label>
<input name="sexe" value="Homme" checked="checked" type="radio">
Homme
</label>
<label >
<input name="sexe" value="Femme" type="radio">
Femme
</label>
<!-- Button -->
<button type="submit">Envoyer</button>
</fieldset>
</form>
</div>
</div>
</body>
</html>

14
TP/TP2/ex1/ex1.php Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="http://www.iut-fbleau.fr/css/tacit.css">
<link rel="stylesheet" href="./css/style.css">
<meta charset="UTF-8" />
<title></title>
</head>
<body container>
<h3>
<!-- À compléter -->
</h3>
</body>
</html>

4
TP/TP2/ex2/css/style.css Normal file
View File

@ -0,0 +1,4 @@
input[type="text"]{
display:inline;
width:auto;
}

17
TP/TP2/ex2/multiplication.php Normal file
View File

@ -0,0 +1,17 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="http://www.iut-fbleau.fr/css/tacit.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body container>
<!-- À compléter -->
<form method="GET">
<input type=number name="table" placeholder="table">
<button type="submit">ENVOYER</button>
</form>
</body>
</html>

34
TP/TP2/ex3/calculatrice.php Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" href="http://www.iut-fbleau.fr/css/tacit.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body container>
<h3>Calculatrice</h3>
<form method="POST">
<!-- opérande 1 -->
<input placeholder="un nombre" type="number" step="any" name="op1" />
<!-- opération -->
<select name="operation">
<option value="+">+</option>
<option value="-">-</option>
<option value="x">x</option>
<option value="/">/</option>
</select>
<!-- opérande 2 -->
<input placeholder="un nombre" type="number" step="any" name="op2" />
<!-- bouton -->
<button type="submit" name="soumis"> Calculer</button>
</form>
</body>
</html>

6
TP/TP2/ex3/css/style.css Normal file
View File

@ -0,0 +1,6 @@
input[type="text"],
select
{
display:inline-block;
width:auto;
}

4
TP/TP2/ex4/css/style.css Normal file
View File

@ -0,0 +1,4 @@
button{
float:right;
}

48
TP/TP2/ex4/quizz.html Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="http://www.iut-fbleau.fr/css/tacit.css">
<link rel="stylesheet" href="./css/style.css">
<meta charset="UTF-8" />
<title></title>
</head>
<body container>
<h3>Quizz</h3>
<form action="score.php" method="post">
<fieldset>
<h5>Quelle est la capitale de la France ?</h5>
<label class="radio">
<input type="radio" name="question1" value="faux" > Lyon
</label>
<label class="radio">
<input type="radio" name="question1" value="vrai"> Paris
</label>
<label class="radio">
<input type="radio" name="question1" value="faux"> Marseille
</label>
<h5>Quelle est le nombre suivant de la suite 1,2,4,8 ?</h5>
<label class="radio">
<input type="radio" name="question2" value="vrai" > 16
</label>
<label class="radio">
<input type="radio" name="question2" value="faux"> 32
</label>
<h5>La bataille de Marignan a eu lieu en</h5>
<label class="radio">
<input type="radio" name="question3" value="faux" > 1492
</label>
<label class="radio">
<input type="radio" name="question3" value="vrai"> 1515
</label>
<label class="radio">
<input type="radio" name="question3" value="faux"> 1789
</label>
<button type="submit">Envoyer</button>
<input type="hidden" value="3" name="nbq">
</fieldset>
</form>
</body>
</html>

16
TP/TP2/ex4/score.php Normal file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://www.iut-fbleau.fr/css/tacit.css">
<link rel="stylesheet" href="./css/style.css">
<meta charset="UTF-8" />
<title></title>
</head>
<body container>
<h4>Réponses</h4>
<ul>
</ul>
</body>
</html>

24
TP/TP2/ex5/conjuguer.php Normal file
View File

@ -0,0 +1,24 @@
<?php
$terminaisons = array(
"present" => array("e","es","e","ons","ez","ent"),
"futur" => array("erai","eras","era","erons","erez","eront"),
"imparfait" => array("ais","ais","ait","ions","iez","aient")
);
$pronoms=array("je","tu","il","nous","vous","ils");
if (isset($_POST['verbe'])) $verbe = $_POST['verbe'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="http://www.iut-fbleau.fr/css/tacit.css">
<link rel="stylesheet" href="./css/style.css">
<title></title>
</head>
<body container>
</body>
</html>

4
TP/TP2/ex5/css/style.css Normal file
View File

@ -0,0 +1,4 @@
input[type="text"]{
width:auto;
}

24
TP/TP2/ex5/ex5.html Normal file
View File

@ -0,0 +1,24 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="http://www.iut-fbleau.fr/css/tacit.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body container>
<h3>Conjugaison</h3>
<form method="post" action="conjuguer.php" class="form-horizontal">
<fieldset>
<label class="control-label">Verbe du premier groupe</label>
<input type=text name="verbe" >
<label>Temps</label>
<label class="checkbox"><input type=checkbox name="temps[]" value="present"> Présent </label>
<label class="checkbox"><input type=checkbox name="temps[]" value="futur"> Futur </label>
<label class="checkbox"><input type=checkbox name="temps[]" value="imparfait"> Imparfait </label>
<button type="submit" name="accepter">Envoyer</button>
</fieldset>
</form>
</body>
</html>

BIN
TP/TP2/img/ex2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
TP/TP2/img/ex3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
TP/TP2/img/ex4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
TP/TP2/img/ex41.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
TP/TP2/img/ex5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
TP/TP2/img/ex51.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
TP/TP2/img/exo1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
TP/TP2/img/exo11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB