20 Avril
BIN
BACKEND/PHP/tp2.tar.gz
Normal file
101
BACKEND/PHP/tp2/README.md
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
# 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">
|
||||||
|
<img src="./img/exo11.png">
|
||||||
|
|
||||||
|
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 <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
BACKEND/PHP/tp2/ex1/css/style.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
form button{
|
||||||
|
float:right;
|
||||||
|
}
|
43
BACKEND/PHP/tp2/ex1/ex1.html
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/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>Sexe</legend>
|
||||||
|
<label>
|
||||||
|
<input name="sexe" value="Homme" checked="checked" type="radio">
|
||||||
|
Homme
|
||||||
|
</label>
|
||||||
|
<label >
|
||||||
|
<input name="sexe" value="Femme" type="radio">
|
||||||
|
Femme
|
||||||
|
</label>
|
||||||
|
<!-- Button -->
|
||||||
|
</fieldset>
|
||||||
|
<button type="submit">Envoyer</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
31
BACKEND/PHP/tp2/ex1/ex1.php
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
<?php
|
||||||
|
include 'include/controller.php';
|
||||||
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/css/pico.classless.min.css">
|
||||||
|
<link rel="stylesheet" href="./css/style.css">
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<h3>
|
||||||
|
<?php
|
||||||
|
$sexe=$_POST['sexe'];
|
||||||
|
$prenom=ucfirst($_POST['prenom']);
|
||||||
|
$nom=ucfirst($_POST['nom']);
|
||||||
|
|
||||||
|
if($sexe=="Homme"){
|
||||||
|
$civilite="Monsieur";
|
||||||
|
} else{
|
||||||
|
$civilite="Madame";
|
||||||
|
}
|
||||||
|
echo "Bonjour $civilite $prenom $nom";
|
||||||
|
?>
|
||||||
|
</h3>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
2
BACKEND/PHP/tp2/ex1/include/controller.php
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
<?php
|
||||||
|
// TODO
|
4
BACKEND/PHP/tp2/ex2/css/style.css
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
input[type="text"]{
|
||||||
|
display:inline;
|
||||||
|
width:auto;
|
||||||
|
}
|
8
BACKEND/PHP/tp2/ex2/include/controller.php
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<?php
|
||||||
|
$nombre=$_GET['table'];
|
||||||
|
echo "<h3> Table de $nombre </h3>";
|
||||||
|
for($i=1;$i<11;$i++){
|
||||||
|
$resultat=$i*$nombre;
|
||||||
|
echo "<li> $i x $nombre = $resultat </li>";
|
||||||
|
}
|
||||||
|
?>
|
21
BACKEND/PHP/tp2/ex2/multiplication.php
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
<?php
|
||||||
|
include 'include/controller.php';
|
||||||
|
?>
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/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>
|
32
BACKEND/PHP/tp2/ex3/calculatrice.php
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<?php
|
||||||
|
include 'include/controller.php';
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title></title>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/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
BACKEND/PHP/tp2/ex3/css/style.css
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
input[type="text"],
|
||||||
|
select
|
||||||
|
{
|
||||||
|
display:inline-block;
|
||||||
|
width:auto;
|
||||||
|
}
|
24
BACKEND/PHP/tp2/ex3/include/controller.php
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<?php
|
||||||
|
$nbr1=$_POST['op1'];
|
||||||
|
$nbr2=$_POST['op2'];
|
||||||
|
$ope=$_POST['operation'];
|
||||||
|
if ($ope=="+"){
|
||||||
|
$resultat=$nbr1+$nbr2;
|
||||||
|
echo "<h3> Le resultat est $resultat </h3>";
|
||||||
|
}
|
||||||
|
if ($ope=="-"){
|
||||||
|
$resultat=$nbr1-$nbr2;
|
||||||
|
echo "<h3> Le resultat est $resultat </h3>";
|
||||||
|
}
|
||||||
|
if ($ope=="x"){
|
||||||
|
$resultat=$nbr1*$nbr2;
|
||||||
|
echo "<h3> Le resultat est $resultat </h3>";
|
||||||
|
}
|
||||||
|
if ($ope=="/"){
|
||||||
|
if($nbr2==0){
|
||||||
|
die("<h2> Division par 0 </h2>");
|
||||||
|
}
|
||||||
|
$resultat=$nbr1/$nbr2;
|
||||||
|
echo "<h3> Le resultat est $resultat </h3>";
|
||||||
|
}
|
||||||
|
?>
|
4
BACKEND/PHP/tp2/ex4/css/style.css
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
button{
|
||||||
|
|
||||||
|
float:right;
|
||||||
|
}
|
57
BACKEND/PHP/tp2/ex4/quizz.html
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/css/pico.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>
|
37
BACKEND/PHP/tp2/ex4/score.php
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="./css/style.css">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/css/pico.min.css">
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="container">
|
||||||
|
<h4>Réponses</h4>
|
||||||
|
<?php
|
||||||
|
$rep1=$_POST['question1'];
|
||||||
|
$rep2=$_POST['question2'];
|
||||||
|
$rep3=$_POST['question3'];
|
||||||
|
$score=0;
|
||||||
|
if($rep1=="vrai"){
|
||||||
|
echo "<li> Question 1 : <p style=\"color:green\"> Bonne réponse </p></li>";
|
||||||
|
$score++;
|
||||||
|
}else{
|
||||||
|
echo "<li> Question 1 : <p style=\"color:red\"> Mauvaise réponse </p></li>";
|
||||||
|
} if($rep2=="vrai"){
|
||||||
|
echo "<li> Question 2 : <p style=\"color:green\"> Bonne réponse </p></li>";
|
||||||
|
$score++;
|
||||||
|
}else{
|
||||||
|
echo "<li> Question 2 : <p style=\"color:red\"> Mauvaise réponse </p></li>";
|
||||||
|
} if($rep3=="vrai"){
|
||||||
|
echo "<li> Question 3 : <p style=\"color:green\"> Bonne réponse </p></li>";
|
||||||
|
$score++;
|
||||||
|
}else{
|
||||||
|
echo "<li> Question 3 : <p style=\"color:red\"> Mauvaise réponse </p></li>";
|
||||||
|
} echo "<br><h2> Score : $score </h2>"
|
||||||
|
?>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
BIN
BACKEND/PHP/tp2/img/ex2.png
Normal file
After Width: | Height: | Size: 28 KiB |
BIN
BACKEND/PHP/tp2/img/ex3.png
Normal file
After Width: | Height: | Size: 8.7 KiB |
BIN
BACKEND/PHP/tp2/img/ex4.png
Normal file
After Width: | Height: | Size: 35 KiB |
BIN
BACKEND/PHP/tp2/img/ex41.png
Normal file
After Width: | Height: | Size: 22 KiB |
BIN
BACKEND/PHP/tp2/img/ex5.png
Normal file
After Width: | Height: | Size: 20 KiB |
BIN
BACKEND/PHP/tp2/img/ex51.png
Normal file
After Width: | Height: | Size: 19 KiB |
BIN
BACKEND/PHP/tp2/img/exo1.png
Normal file
After Width: | Height: | Size: 23 KiB |
BIN
BACKEND/PHP/tp2/img/exo11.png
Normal file
After Width: | Height: | Size: 8.6 KiB |