Merge branch 'main' into correction-ulysse

2026-04-02 13:49:18 +02:00
parent 6dd596e7b3 e51a65fe0f
commit 43e09b46ec
30 changed files with 463 additions and 18 deletions
@@ -31,6 +31,9 @@ Les notions suivantes seront abordées :
 | Semaine            | Cours                                                    | TD/TP              |
 | ------------------ | -------------------------------------------------------- | ------------------ |
 | 1 : 16/03 - 20/03| [Bases du langages](./cours/cm_bases_php.pdf)             |      |
+| 2 : 23/03 - 27/03  |      | [tp1](./tp/tp1)       |
+| 3 : 30/03 - 03/04  | [Intéractions avec le client](./cours/cm_interaction_client_serveur.pdf)     | [tp2](./tp/tp2)       |
+

 ## Les TPS

@@ -40,4 +43,10 @@ permet de se familiariser avec le langage PHP.
 À chaque exercice correspond  un  sous répertoire avec
 des fichiers à compléter.

+#### TP2 : Intéractions avec le client, formulaires et PHP
+Le [tp2](./tp/tp2)
+aborde la récupération des données de formulaires avec PHP.
+À chaque exercice correspond  un  sous répertoire avec
+des fichiers à compléter.
+

@@ -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>
@@ -0,0 +1,3 @@
+form button{
+float:right;
+}
@@ -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>
@@ -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>
@@ -0,0 +1,2 @@
+<?php
+// TODO
@@ -0,0 +1,4 @@
+input[type="text"]{
+display:inline;
+width:auto;
+}
@@ -0,0 +1,2 @@
+<?php
+// TODO
@@ -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>
@@ -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>
@@ -0,0 +1,6 @@
+input[type="text"],
+select
+{
+display:inline-block;
+width:auto;
+}
@@ -0,0 +1,2 @@
+<?php
+//TODO
@@ -0,0 +1,4 @@
+button{
+
+	float:right;
+}
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,4 @@
+input[type="text"]{
+width:auto;
+
+}
@@ -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>
@@ -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);
+
@@ -1,19 +1,29 @@
 ## Groupes projet
- Rayan Lankechari / Ibrahima Bah
- Demrici-Özmen Canpolat / Eliot Maxime
- Ozvann ABRAHAM / Karl FRAMERY
- SOLAR Dimitri / ZAABAY Tarehi
- Nicolas Miekisiak / Loïc Sainton
- Torreblanca Mathys / Poitou Enzo / Haffa BAKHOUCHE
- WIECZOREK Valentin / PLOUVIER Luka
- Kouami Kpeglo / Alexis Fort
- Ugo Faye / Mathis Leclere
- Nathan Couchot / Théo Anastasio / Adrien Rabot
- Pierre COURTEHOUX / Lukas SIMOES
- CAMILLE Cléo / Warrhen Roland
- Aylane Sehl / Séri-Khane / ?? 
- Arwa Ben Fraj / Bounni Loubelo Benicia
- Hicham Cherifi / Wael Atik
- DERQSI BILAL / CAMILLE LECHAVLIER
-  Ayoub ANHDIRE / Algassimou Pellel DIALLO
- Soraya Amina KHADIR/ Jéremy CAYRON
+
+> Chaque groupe vient 10 minutes avant son horaire. Le site et les sources
+> sont consultables sur une machine de la salle pour le test.
+
+**Lundi 30/03**
+- Rayan Lankechari / Ibrahima Bah (9h00 222)
+- Demrici-Özmen Canpolat / Eliot Maxime (9h20 223)
+- Ozvann ABRAHAM / Karl FRAMERY (9h40 222)
+- SOLAR Dimitri / ZAABAY Tarehi (10h00 223)
+- Nicolas Miekisiak / Loïc Sainton (10h20 222)
+- Torreblanca Mathys / Poitou Enzo / Haffa BAKHOUCHE (10h40 223)
+- WIECZOREK Valentin / PLOUVIER Luka (11H00 222)
+- Kouami Kpeglo / Alexis Fort (11h20 223)
+- Ugo Faye / Mathis Leclere (11h40 222)
+- Nathan Couchot / Théo Anastasio / Adrien Rabot (12h00 223)
+
+**Jeudi 02/04**
+- Yanis AMRANI, Jimmy COLOMB-RAVAT (13h45 223)
+- Pierre COURTEHOUX / Lukas SIMOES (14h00 222)
+- CAMILLE Cléo / Warrhen Roland (14h20 223)
+- Aylane Sehl / Séri-Khane / ??  (14h40 222)
+- Arwa Ben Fraj / Bounni Loubelo Benicia (15h00 223)
+- Hicham Cherifi / Wael Atik (15h20 222)
+- DERQSI BILAL / CAMILLE LECHAVLIER (15h40 223)
+- Ayoub ANHDIRE / Algassimou Pellel DIALLO (16h00 222)
+- Soraya Amina KHADIR/ Jéremy CAYRON (16h20 223)
+- Yassine MABCHOUR (16h40 222)
+- Mathys Tribeau / Boulalam Youness (17h00 223)