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