ajout tp4 cookies et sessions

R3.01/README.md

@@ -30,9 +30,12 @@ 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)       |
+| 1   | [Bases du langages](./cours/cm_bases_php.pdf)             |      |
+| 2   |      | [tp1](./tp/tp1)       |
+| 3   | [Intéractions avec le client](./cours/cm_interaction_client_serveur.pdf)     | [tp2](./tp/tp2)       |
+| 4   | [PHP/MySQL](./cours/cm_extension_mysqli.pdf)            | [tp3](./tp/tp3)       |
+| 5   |    [Cookies et sessions](./cours/cm_cookies_sessions.pdf)         | [tp3](./tp/tp3) , [tp4](./tp/tp4)      |
+
 
 
 ## Les TPS
@@ -49,4 +52,18 @@ aborde la récupération des données de formulaires avec PHP.
 À chaque exercice correspond  un  sous répertoire avec
 des fichiers à compléter.
 
+#### TP3 : PHP/Mysql
+Le [tp3](./tp/tp3)
+aborde l'interfaçage de php avec mysql, au moyen de l'extention 
+[mysqli](http://php.net/manual/fr/book.mysqli.php) de php.
+À chaque exercice correspond  un  sous répertoire avec
+des fichiers à compléter.
+
+#### TP4 : Cookies et sessions 
+Le [tp4](./tp/tp4)
+aborde la notion de cookies et de sessions,et 
+les fonctions php dédiées.
+À chaque exercice correspond  un  sous répertoire avec
+des fichiers à compléter.
+
 

R3.01/tp/tp3/README.md

@@ -0,0 +1,140 @@
+# TP 3 : Passage de paramètres à un script,  PHP-MariaDB avec l'extension **mysqli**. 
+
+> Le style utilisé dans les sources est [picocss](https://picocss.com/).
+
+### Ex1.
+Le but est d'écrire un script php simulant le jeu de hasard pierre,
+feuille ciseaux (encore appelé chifoumi).
+<div align="center">
+<img src="./img/chifoumi.png">
+</div>
+
+Le joueur joue en cliquant sur l'icone représentant le coup qu'il
+a choisi. Celui-ci est un lien vers le même script, auquel est passé
+en GET un paramètre représentant son choix. Par exemple :
+
+```html
+<a href="?choice=0"><img href="rock.png"></a>
+<a href="?choice=1"><img href="paper.png"></a>
+<a href="?choice=2"><img href="scissors.png"></a>
+```
+Le script récupère le coup du joueur, fait un tirage aléatoire, et
+affiche les deux coups joués avec un message pour indiquer le
+résultat de la partie.
+
+Le code est organisé sommairement suivant le pattern `MVC`. Le script `index.php` fait office de contrôleur. 
+- il récupére le choix du joueur,
+- il fait jouer l'ordinateur (tirage aléatoire),
+- il calcule l'issue de la partie,
+- il affiche (include) les différentes parties de la vue finale, avec les variables nécessaires.
+
+Remarque : pour éviter un code trop verbeux au niveau des tests pour calculer le résultat d'une partie,
+vous pouvez utiliser un tableau pour représenter les règles du jeu. Par exemple,
+
+```php
+<?php
+// 0 rock, 1 paper, 2 scissors
+$rules = [ 0 => [ 0 => "Draw", 1 => "Loss", 2 => "Win"], ... ];
+```
+
+### Ex2.
+
+**Avant de commencer**
+>-   Vous diposez, sur le serveur mysql qui tourne sur la machine
+>    dwarves.iut-fbleau.fr, d'un compte identifié par votre login. Le mot de
+>    passe a été initailisé avec votre login. Pensez à le changer
+>    rapidement.
+>-   Vous disposez en lecture/écriture d'une seule base de données
+>    identifiée là encore par votre login.
+>-   Vous avez aussi accès à cette
+>    [url](https://dwarves.iut-fbleau.fr/phpmyadmin/) à une interface web
+>    (phpmyadmin) de gestion de votre base.
+
+Pour travailler, importez dans votre base les tables et leurs contenus
+
+```sql
+Artiste (idArtiste,nom,prenom,anneeNaiss)
+         ---------
+Genre (code)
+       ----
+Pays (code,nom,langue)
+      ----
+Film (idFilm,titre,annee,#idMes,#genre,resume,#codePays,urlImage)
+      ------
+Role (#idFilm,#idActeur,nomRole)
+      ------- --------  -------
+```
+
+qui se trouvent dans le fichier **cinema.sql**. Vous pouvez directement
+l'importer à partir de phpmyadmin. Examinez les tables, leurs
+structures et relations.
+
+![](./img/db.gif)  Par pitié !
+
+**Testez directement vos requêtes sql avec phpmyadmin (ou autre) avant
+des les "intégrer" à php !**
+
+
+1. Complétez le script **films.php** qui affiche la liste de tous les films
+   de votre base sous forme d'une table html, classée par titre, avec
+   l'année, le genre et le réalisateur.
+
+    ![](./img/film.png)
+
+    <details><summary>Conseils</summary>
+    <div>
+
+   - le serveur tourne sur le serveur http, donc pour vous connecter,
+      utiliser `localhost` comme nom. 
+   - Pour récuperer les informations demandées, pensez à faire une
+      jointure entre Film et Artiste.
+    </div>
+    </details>   
+
+2. Modifiez le script précédent afin de paginer l'affichage des films.
+
+    ![](./img/film1.png)
+
+    <details><summary>Conseils</summary>
+    <div>
+
+   - La clause `LIMIT` dans un SELECT permet de restreindre le nombre de
+    résultats de la requête.
+
+   - L'option `SQL_CALC_FOUND_ROWS` permet, en présence de la clause
+    LIMIT, de savoir combien de resultats auraient été selectionnée en
+    son absence.  
+
+    Il faut utliser juste après la requête la fonction MySQL
+    `FOUND_ROWS()`.
+	 </div>
+	 </details>
+
+3. Ajoutez dans le script précédent un formulaire avec une liste déroulante
+   qui permet de filtrer les films par réalisateur.
+
+    ![](./img/film2.png)
+
+    <details><summary>Conseils</summary>
+    <div>
+
+    Il faut récupérer dans la table Artiste les réalisateurs, et peupler une
+    liste déroulante. La valeur envoyé par le formulaire sera bien sûr
+    l'identifiant du réalisateur.
+
+    Faites en sorte, comme sur la capture d'écran, de réafficher la liste
+    déroulante avec le nom du réalisateur dernièrement selectionné.
+    </div>
+    </details>
+
+4. On veut dans cette question, à partir de la liste, afficher le détail
+   d'un film. Pour cela, chaque titre, dans le tableau, sera un lien qui
+   conduira à la fiche du film. L'identifiant du film sera passé dans
+   l'url du lien. 
+   
+		<a href="./fiche.php?film=1">Vertigo</a>
+
+    ![](./img/film3.png)  
+
+5. Pour ceux qui s'ennuient, faites en sorte que l'on puisse trier
+   l'affichage sous forme de tableau par odre de titre, année, ou genre.

R3.01/tp/tp3/chifoumi/css/style.css

@@ -0,0 +1,10 @@
+.center{
+	text-align:center;
+}
+.Win{
+color:#2E8B57;
+
+}
+.Loss{
+color:#FF6347;
+}

R3.01/tp/tp3/chifoumi/index.php

@@ -0,0 +1,20 @@
+<?php
+$images = ["rock.png","paper.png","scissors.png"];
+$isPlaying = true;
+
+$playerChoice = 0;
+$computerChoice = 1;
+
+$message = "Win";
+$class = "Win";
+
+$imagePlayer = $images[$playerChoice];
+$imageComputer = $images[$computerChoice];
+
+include './views/header.php';
+if ($isPlaying){
+	include './views/game.php';
+	include './views/message.php';
+}
+include './views/footer.php';
+?>

R3.01/tp/tp3/chifoumi/views/footer.php

@@ -0,0 +1,3 @@
+		</main>
+	</body>
+</html>

R3.01/tp/tp3/chifoumi/views/game.php

@@ -0,0 +1,15 @@
+<div class="grid">
+	<article>
+		<header>Player</header>
+		<section class="center">
+			<img src="./images/<?php echo $imagePlayer;?>">
+		</section>
+	</article>
+	<article>
+		<header>Computer</header>
+		<section class="center">
+			<img src="./images/<?php echo $imageComputer;?>">
+		</section>
+	</article>
+</div>
+

R3.01/tp/tp3/chifoumi/views/header.php

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" >
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
+/>
+
+		<link rel="stylesheet" href="./css/style.css">
+		<title>Chifoumi</title>
+	</head>
+	<body>
+		<main class="container">
+
+			<h3>Rock Paper Scissors</h3>
+
+			<section class="center">
+				<p>Choose : </p>
+				<a href="?choice=0"><img width="100px" src="./images/rock.png"></a>
+				<a href="?choice=1"><img width="100px" src="./images/paper.png"></a>
+				<a href="?choice=2"><img width="100px" src="./images/scissors.png"></a>
+			</section>
+
+		

R3.01/tp/tp3/chifoumi/views/message.php

@@ -0,0 +1,3 @@
+<h2 class="center">
+	<span class="<?php echo $class;?>"><?php echo $message;?></span>
+</h2>

R3.01/tp/tp3/cinema/src/css/style.css

@@ -0,0 +1,18 @@
+table{
+	width:100%;
+}
+img{
+width:500px;
+}
+td + td + td + td{
+width : 20%;
+}
+td:first-child + td{
+width:10%;
+}
+td:first-child{
+width:30%;
+}
+td:first-child + td + td {
+width:30%;
+}

R3.01/tp/tp3/cinema/src/films.php

@@ -0,0 +1,14 @@
+<?php
+include './modeles/modeleFilms.php';
+
+$films = getFilms();
+
+//
+// on "charge" la vue 
+//
+
+include './vues/header.php';
+include './vues/vueFilms.php';
+include './vues/footer.php';
+?>
+

R3.01/tp/tp3/cinema/src/modeles/modeleFilms.php

@@ -0,0 +1,16 @@
+<?php
+function _getConnection()
+{
+	static $_conn = NULL;
+	if ($_conn === NULL){
+		$_conn = mysqli_connect("localhost","","","");
+	}
+	return $_conn;
+}
+
+
+function getFilms()
+{
+	// A completer
+}
+?>

R3.01/tp/tp3/cinema/src/vues/footer.php

@@ -0,0 +1,3 @@
+      </main>
+	</body>
+</html>

R3.01/tp/tp3/cinema/src/vues/header.php

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="fr">
+	<head>
+		<meta charset="UTF-8" />
+		<title>Films</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">

R3.01/tp/tp3/cinema/src/vues/vueFilms.php

@@ -0,0 +1,32 @@
+<!-- 
+	Variables de la vue
+	$films : les films de la page
+-->
+
+<h2>Films</h2>
+<table>
+	<thead>
+		<tr>
+			<th>Titre</th>
+			<th>Année</th>
+			<th>Genre</th>
+			<th>Réalisateur</th>
+		</tr>
+	</thead>
+	<tbody>
+<?php
+foreach($films as $film){
+
+	echo "
+	<tr>
+		<td><a href='#'>{$film['titre']}</a></td>
+		<td>{$film['annee']}</td>
+		<td>{$film['genre']}</td>
+		<td>{$film['prenom']} {$film['nom']}</td>
+	</tr>";
+
+}
+?>
+	</tbody>
+</table>
+

R3.01/tp/tp4/README.md

@@ -0,0 +1,76 @@
+
+#  TP4 : Cookies et sessions en PHP.
+
+### Ex1.
+Complétez le script `index.php` de l'exercice 1 de manière à
+mémoriser grâce à un cookie votre os préféré (parmi Linux, Windows et
+MacOS). Le cookie est valable pendant une minute, et l'os par
+défaut est Linux.
+
+![](./img/cookie.png)
+### Ex2.
+Le but est de créer un min-jeu de morpion.
+
+![](./img/ttt.png)
+
+Les variables de session :
+- `grid` : le plateau du jeu. tableau de 9 cases, prennant les valeurs 0 (libre), 1 (joueur 1), 2 (joueur 2).
+- `playerTurn` : le joueur qui joue.
+
+Le script prend en paramètre la variable `pos` : la position du coup joué par le joueur.
+
+### Ex3.
+On désire rendre les pages du [tp3](./../tp3) (cinema) accessibles
+uniquement à des utilisateur **inscrits au préalable**.
+
+1. Rajouter à la base une table `user` qui comprend un **login**,
+**email** et un **password**. (login est la clé)
+2. Ecrire un formulaire d'inscription au site qui comprend les
+   champs correspondants. Vous enregistrerez dans la base la mot de
+   passe hashé avec la fonction
+    [password\_hash](http://php.net/manual/fr/function.password-hash.php)
+    de php.
+3. Faire en sorte que toutes les pages de l'application soient
+    accessibles **uniquement** si l'utilisateur s'est authentifié.
+    (utiliser une session)
+
+Ecrire les scripts ou pages suivants
+<dl>
+<dt><code>inscription.php</code></dt>
+<dd>formulaire d'inscription, et qui traite les données du formulaire.
+Si le formulaire n'est pas correctement rempli, Il est réaffiché.
+(les champs correctes sont conservés !)</dd>
+<dt><code>authentification.html</code></dt>
+<dd>formulaire d'authentification.</dd>
+<dt><code>verification.php</code></dt>
+<dd>traite le formulaire précédent et vérifie si l'utilisateur est
+enregistré. En cas de succés, renvoie vers la page d'accueil du
+site. Pour éviter des attaques force brute, ajoutez une
+temporisation qui ralentira de telles attaques.</dd>
+<dt><code>securite.php</code></dt>
+<dd>morceau de code que vous inclurez systématiquement dans vos pages
+que vous voulez rendre accessible uniquement aux utilisateurs dûment
+authentifiés. Ce script vérifiera l'existence d'une variable de
+session créée lors de la connexion.</dd>
+</dl>
+
+Pour permettre l'authentification d'un utilisateur, il faut que
+login et le mot de passe conviennent. On compare le hash de
+l'utilisateur stocké dans la base avec le hashage calculé du
+password soumis lors de l'authentification :  
+
+
+```php
+<?php
+// Voir l'exemple fourni sur la page de la fonction password_hash()
+// pour savoir d'où cela provient.
+$hash = '$2y$07$BCryptRequires22Chrcte/VlQH0piJtjXl.0t1XkA8pw9dMXTpOq';
+
+if (password_verify('rasmuslerdorf', $hash)) {
+	echo 'Le mot de passe est valide !';
+} else {
+	echo 'Le mot de passe est invalide.';
+}
+?>
+```
+

R3.01/tp/tp4/ex1/index.php

@@ -0,0 +1,6 @@
+<?php
+$osSet = ['linux','apple','windows'];
+$os = "linux";
+
+include './views/main.php';
+?>

R3.01/tp/tp4/ex1/views/main.php

@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<link
+		rel="stylesheet"
+		href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
+		/>
+		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+
+	</head>
+	<body>
+		<main class="container">
+			<form method="POST">
+				<fieldset class="grid">
+					<legend>Changez votre os</legend>
+					<label>
+						<input type="radio" name="os" value="linux"> 
+						<i class="fa fa-linux fa-2x" aria-hidden="true"></i>
+					</label>
+					<label>
+						<input type="radio" name="os" value="windows"> 
+						<i class="fa fa-windows fa-2x" aria-hidden="true"></i>
+					</label>
+					<label>
+						<input type="radio" name="os" value="apple"> 
+						<i class="fa fa-apple fa-2x" aria-hidden="true"></i>
+					</label>
+				</fieldset>
+
+				<button type="submit">Envoyer</button> 
+			</form>
+			<article>
+				<header>Votre os</header>
+				<?php echo "<i class='fa fa-$os fa-5x'></i>";?>
+				<footer>
+					Rafraîchir la page <a href=""><i class="fa fa-refresh" aria-hidden="true"></i></a>
+				</footer>
+			</article>
+
+		</main>
+	</body>
+</html>
+

R3.01/tp/tp4/ex2/css/style.css

@@ -0,0 +1,32 @@
+table.morpion{
+	border-collapse: collapse;
+	table-layout:fixed;
+	margin-left:auto;
+	margin-right:auto;
+	display:inline-block;
+	width:auto;
+}
+table.morpion td {
+	border : 1px solid #aaaaaa;
+	width:10rem;
+	height:10rem;
+	padding : 0px;
+	margin:0px;
+	overflow: hidden;
+	white-space: nowrap;
+	text-align:center;
+	vertical-align:middle;
+}
+table.morpion i {
+font-size:8rem;
+}
+
+table.morpion a {
+display : inline-block;
+width : 8rem;
+height: 8rem;
+
+}
+.center{
+	text-align:center;
+}

R3.01/tp/tp4/ex2/helpers.php

@@ -0,0 +1,54 @@
+<?php
+function isWinner($grid, $player)
+{
+	$winStates = array
+		(
+			array(0, 1, 2), array(3, 4, 5), array(6, 7, 8),     // Horizontal
+			array(0, 3, 6), array(1, 4, 7), array(2, 5, 8),     // Vertical
+			array(0, 4, 8), array(2, 4, 6)                      // Diagonal
+		);
+
+	foreach ($winStates as $winState)
+	{
+		if ($grid[$winState[0]] == $player &&
+			$grid[$winState[1]] == $player &&
+			$grid[$winState[2]] == $player)
+		{
+			return true;
+		}
+	}
+	return false;
+}
+
+function noWinner($grid)
+{
+	for($i = 0; $i < 9; $i++)
+		if ($grid[$i] == 0) 
+			return false;
+
+	return true;
+}
+
+function displayGrid($grid)
+{
+	echo '<table class="morpion">';
+	for ($i = 0; $i < 3; $i ++){
+		echo "<tr>";
+		for ($j = 0; $j < 3; $j ++){
+
+			echo "<td>";
+
+			$pos = 3*$i + $j;
+			if ($grid[$pos] == 0)
+				echo "<a href='?pos=$pos'></a>";
+			if ($grid[$pos] == 1)
+				echo '<i class="fa fa-times" aria-hidden="true"></i>';
+			if ($grid[$pos] == 2)
+				echo '<i class="fa fa-circle-o" aria-hidden="true"></i>';
+
+			echo "</td>";
+		}
+		echo "</tr>";
+	}
+	echo "</table>";
+}

R3.01/tp/tp4/ex2/index.php

@@ -0,0 +1,11 @@
+<?php
+include 'helpers.php';
+
+// view variables 
+$message = "";
+$grid = [0,1,0,1,0,2,2,0,0]; 
+$playerTurn = 1; // 1 or 2
+
+
+include './views/tictactoe.php';
+

R3.01/tp/tp4/ex2/views/tictactoe.php

@@ -0,0 +1,24 @@
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<link
+	  rel="stylesheet"
+   href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
+   />
+		<link rel="stylesheet" href="./css/style.css">
+		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+
+	</head>
+	<body>
+		<main class="container center">
+			<h4>Tic Tac Toe : <?php echo "player $playerTurn turn";?></h4>
+			<?php
+				displayGrid($grid);
+
+				if ($message != "")
+					echo "<h5>$message  <a  href='.'>new game</a></h5>";
+			  ?>
+		</main>
+	</body>
+</html>
+