tp2
This commit is contained in:
parent
b76a9de642
commit
db9aedd9aa
R3.01/tp/tp2
118
R3.01/tp/tp2/README.md
Normal file
118
R3.01/tp/tp2/README.md
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
# 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, quatre boutons radio pour choisir le système) qui
|
||||||
|
affiche les données saisies :
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img src="./img/exo1.png">
|
||||||
|
<img src="./img/exo11.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img src="./img/exo2.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
### Ex3.
|
||||||
|
Ecrire une petite calculatrice permettant d'effectuer des
|
||||||
|
opérations arithmétiques élémentaires (+,x,-,/) sur deux opérandes.
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img src="./img/exo3.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
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 :
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img src="./img/exo4.png">
|
||||||
|
<img src="./img/exo41.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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 :
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img src="./img/exo5.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- 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.
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img src="./img/exo51.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Conseils</summary>
|
||||||
|
<div>
|
||||||
|
Pour extraire le radical, vous pouvez utiliser la
|
||||||
|
fonction <a href='http://fr2.php.net/manual/fr/function.substr.php'>substr</a>
|
||||||
|
|
||||||
|
```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
R3.01/tp/tp2/ex1/css/style.css
Normal file
3
R3.01/tp/tp2/ex1/css/style.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
form button{
|
||||||
|
float:right;
|
||||||
|
}
|
||||||
54
R3.01/tp/tp2/ex1/ex1.html
Normal file
54
R3.01/tp/tp2/ex1/ex1.html
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="./css/style.css">
|
||||||
|
<title>Exercice 1</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<h3> Exercice 1</h3>
|
||||||
|
|
||||||
|
<form action="ex1.php" method="POST">
|
||||||
|
<fieldset>
|
||||||
|
<legend>Qui êtes-vous ?</legend>
|
||||||
|
<!-- Text input-->
|
||||||
|
<label>Nom
|
||||||
|
<input name="nom" placeholder="nom" type="text">
|
||||||
|
</label>
|
||||||
|
<!-- Text input-->
|
||||||
|
<label >Prénom
|
||||||
|
<input name="prenom" placeholder="prénom" type="text">
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
<!-- Multiple Radios -->
|
||||||
|
<fieldset>
|
||||||
|
<legend>Système d'exploitation préféré</legend>
|
||||||
|
<label>
|
||||||
|
<input name="os" value="1" checked="checked" type="radio">
|
||||||
|
Linux
|
||||||
|
</label>
|
||||||
|
<label >
|
||||||
|
<input name="os" value="2" type="radio">
|
||||||
|
Windows
|
||||||
|
</label>
|
||||||
|
<label >
|
||||||
|
<input name="os" value="3" type="radio">
|
||||||
|
macOS
|
||||||
|
</label>
|
||||||
|
<label >
|
||||||
|
<input name="os" value="4" type="radio">
|
||||||
|
Android
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
<!-- Button -->
|
||||||
|
<button type="submit">Envoyer</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
26
R3.01/tp/tp2/ex1/ex1.php
Normal file
26
R3.01/tp/tp2/ex1/ex1.php
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
<?php
|
||||||
|
include 'include/controller.php';
|
||||||
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||||
|
<link rel="stylesheet" href="./css/style.css">
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<ul>
|
||||||
|
<?php
|
||||||
|
echo "<li>$prenom $nom</li>";
|
||||||
|
echo "<li><i class='fa-brands $icon fa-2x'></i></li>";
|
||||||
|
?>
|
||||||
|
</ul>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2
R3.01/tp/tp2/ex1/include/controller.php
Normal file
2
R3.01/tp/tp2/ex1/include/controller.php
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
<?php
|
||||||
|
// TODO
|
||||||
4
R3.01/tp/tp2/ex2/css/style.css
Normal file
4
R3.01/tp/tp2/ex2/css/style.css
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
input[type="text"]{
|
||||||
|
display:inline;
|
||||||
|
width:auto;
|
||||||
|
}
|
||||||
2
R3.01/tp/tp2/ex2/include/controller.php
Normal file
2
R3.01/tp/tp2/ex2/include/controller.php
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
<?php
|
||||||
|
// TODO
|
||||||
23
R3.01/tp/tp2/ex2/multiplication.php
Normal file
23
R3.01/tp/tp2/ex2/multiplication.php
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<?php
|
||||||
|
include 'include/controller.php';
|
||||||
|
?>
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="./css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<h4>Table de multiplication</h4>
|
||||||
|
<form method="GET">
|
||||||
|
<input type=number name="table" placeholder="table">
|
||||||
|
<button type="submit">ENVOYER</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
34
R3.01/tp/tp2/ex3/calculatrice.php
Normal file
34
R3.01/tp/tp2/ex3/calculatrice.php
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<?php
|
||||||
|
include 'include/controller.php';
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title></title>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="./css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="container">
|
||||||
|
<h3>Calculatrice</h3>
|
||||||
|
<form method="POST">
|
||||||
|
<div class="grid">
|
||||||
|
<input placeholder="un nombre" type="number" step="any" name="op1" value ="" required>
|
||||||
|
<select name="operation" required>
|
||||||
|
<option value="+">+</option>
|
||||||
|
<option value="-">-</option>
|
||||||
|
<option value="x">x</option>
|
||||||
|
<option value="/">/</option>
|
||||||
|
</select>
|
||||||
|
<input placeholder="un nombre" type="number" step="any" name="op2" required>
|
||||||
|
<button type="submit" name="soumis"> Calculer</button>
|
||||||
|
</grid>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
6
R3.01/tp/tp2/ex3/css/style.css
Normal file
6
R3.01/tp/tp2/ex3/css/style.css
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
input[type="text"],
|
||||||
|
select
|
||||||
|
{
|
||||||
|
display:inline-block;
|
||||||
|
width:auto;
|
||||||
|
}
|
||||||
2
R3.01/tp/tp2/ex3/include/controller.php
Normal file
2
R3.01/tp/tp2/ex3/include/controller.php
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
<?php
|
||||||
|
//TODO
|
||||||
4
R3.01/tp/tp2/ex4/css/style.css
Normal file
4
R3.01/tp/tp2/ex4/css/style.css
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
button{
|
||||||
|
|
||||||
|
float:right;
|
||||||
|
}
|
||||||
61
R3.01/tp/tp2/ex4/quizz.html
Normal file
61
R3.01/tp/tp2/ex4/quizz.html
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="./css/style.css">
|
||||||
|
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="container">
|
||||||
|
<h3>Quizz</h3>
|
||||||
|
<form action="score.php" method="post">
|
||||||
|
<fieldset>
|
||||||
|
Quelle est la capitale de la France ?
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
Quelle est le nombre suivant de la suite 1,2,4,8 ?
|
||||||
|
|
||||||
|
<label class="radio">
|
||||||
|
<input type="radio" name="question2" value="vrai" > 16
|
||||||
|
</label>
|
||||||
|
<label class="radio">
|
||||||
|
<input type="radio" name="question2" value="faux"> 32
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
La bataille de Marignan a eu lieu en
|
||||||
|
<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>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<button type="submit">Envoyer</button>
|
||||||
|
</fieldset>
|
||||||
|
<input type="hidden" value="3" name="nbq">
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
17
R3.01/tp/tp2/ex4/score.php
Normal file
17
R3.01/tp/tp2/ex4/score.php
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="./css/style.css">
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
|
||||||
|
/>
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<h4>Réponses</h4>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
23
R3.01/tp/tp2/ex5/conjuguer.php
Normal file
23
R3.01/tp/tp2/ex5/conjuguer.php
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<?php
|
||||||
|
include 'include/controller.php';
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="./css/style.css">
|
||||||
|
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
4
R3.01/tp/tp2/ex5/css/style.css
Normal file
4
R3.01/tp/tp2/ex5/css/style.css
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
input[type="text"]{
|
||||||
|
width:auto;
|
||||||
|
|
||||||
|
}
|
||||||
31
R3.01/tp/tp2/ex5/ex5.html
Normal file
31
R3.01/tp/tp2/ex5/ex5.html
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<h3>Conjugaison</h3>
|
||||||
|
<form method="post" action="conjuguer.php">
|
||||||
|
<fieldset>
|
||||||
|
<label>Verbe du premier groupe<br>
|
||||||
|
<input type=text name="verbe" required>
|
||||||
|
</label>
|
||||||
|
Temps
|
||||||
|
<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>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<button type="submit" name="accepter">Envoyer</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
12
R3.01/tp/tp2/ex5/include/controller.php
Normal file
12
R3.01/tp/tp2/ex5/include/controller.php
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<?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");
|
||||||
|
|
||||||
|
$verbe = filter_input(INPUT_POST,"verbe",FILTER_SANITIZE_STRING);
|
||||||
|
$radical = substr($verbe,0,strlen($verbe)-2);
|
||||||
|
|
||||||
BIN
R3.01/tp/tp2/img/exo1.png
Normal file
BIN
R3.01/tp/tp2/img/exo1.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 26 KiB |
BIN
R3.01/tp/tp2/img/exo11.png
Normal file
BIN
R3.01/tp/tp2/img/exo11.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 4.2 KiB |
BIN
R3.01/tp/tp2/img/exo2.png
Normal file
BIN
R3.01/tp/tp2/img/exo2.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 25 KiB |
BIN
R3.01/tp/tp2/img/exo3.png
Normal file
BIN
R3.01/tp/tp2/img/exo3.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 6.8 KiB |
BIN
R3.01/tp/tp2/img/exo4.png
Normal file
BIN
R3.01/tp/tp2/img/exo4.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 30 KiB |
BIN
R3.01/tp/tp2/img/exo41.png
Normal file
BIN
R3.01/tp/tp2/img/exo41.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 18 KiB |
BIN
R3.01/tp/tp2/img/exo5.png
Normal file
BIN
R3.01/tp/tp2/img/exo5.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 17 KiB |
BIN
R3.01/tp/tp2/img/exo51.png
Normal file
BIN
R3.01/tp/tp2/img/exo51.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 35 KiB |
Loading…
x
Reference in New Issue
Block a user