Développement web S2 (R213) – TP #5

Dans cette séance de TP vous allez faire un exercice sur la validation de formulaires.

Liens utiles : CM #2 · TP #3 · TP #4

Dans le répertoire r213 que vous avez déjà créé, ajoutez un répertoire nommé r213-tp5 pour sauvegarder les exercices de cette séance (TP #5).

Dans ce répertoire r213-tp5, créez un répertoire appelé exo1 pour le premier exercice, exo2 pour le deuxième, etc. Vos exercices ne seront pas corrigés si vous ne respectez pas ces instructions.

À la fin de la séance, vous devez compresser (en format ZIP ou RAR) le répertoire r213-tp5 avec tous vos exercices et le soumettre sur AMeTICE.

Seuls les exercices marqués avec une étoile (*) seront évalués. La date limite pour rendre vos exercices est visible sur AMeTICE, et aucun travail ne sera accepté après. Le corrigé sera affiché après l'évaluation des exercices.

La fonction header()

Pour l'instant, quand nous traitons les données d'un formulaire, nous affichons toujours un message (d'erreur ou de réussite). Pourtant, la pratique courante est de traiter les données dans un fichier PHP (sans rien afficher) et puis envoyer l'utilisateur automatiquement vers une autre page PHP, où on affiche les informations.

Pour envoyer l'utilisateur vers une autre page, nous utilisons la fonction header() [doc]: 

<?php
// envoie l'utilisateur vers le site « http://www.exemple.fr/ »
header('Location: http://www.exemple.fr/');
?>

Cette fonction a comme paramètre une chaîne de caractères qui commence par « Location: », suivie de l'URL (ou l'adresse locale) de la page vers laquelle on envoie l'utilisateur. Il y a deux erreurs courantes à éviter :

Voyons un exemple. Nous avons un page index.html avec un formulaire : 

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R213</title>
</head>
<body>
  <form method="post" action="traitement.php">
    <input type="text" name="texte">
    <input type="submit" value="Recherche">
  </form>
</body>
</html>

Les données de ce formulaire sont envoyées vers la page traitement.php : 

<?php
if (strlen($_POST['texte']) == 0) {
  // si le formulaire est vide, on renvoie l'utilisateur vers la page d'accueil
  header('Location: index.html');
} else {
  // sinon, on renvoie l'utilisateur vers la page Google avec les résultats pour cette recherche
  header('Location: https://www.google.com/search?q=' . $_POST['texte']);
}
?>

Remarquez comment cette page traitement.php n'affiche rien, et comment le script ne fait rien après l'appel à la fonction header.

Dans les exercices suivants on utilisera cette fonction pour protéger un site web avec un mot de passe

Exercices

Dans les exercices d'aujourd'hui nous allons protéger un site web avec un mot de passe, en augmentant de plus en plus la flexibilité et la sécurité.

Exercice 1

Dans cet exercice vous allez faire un site web qui affiche une page seulement si l'utilisateur connaît le mot de passe.

Vous avez un fichier appelé index.html avec un formulaire pour entrer le mot de passe (remarquez la façon alternative d'utiliser l'élément <label>) : 

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R213</title>
</head>
<body>
  <form method="post" action="traitement.php">
    <label>
      Mot de passe : <input type="password" name="mdp">
    </label>
    <input type="submit" value="Envoyer">
  </form>
</body>
</html>

Le fichier traitement.php doit vérifier si le mot de passe entré est « abc123 ». Si oui, on renvoie l'utilisateur vers la page secret.html. Sinon, on affiche un message d'erreur avec un lien vers le formulaire. Ce vous qui allez faire cette page.

Le code pour la page secret.html est : 

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R213</title>
</head>
<body>
  <p>
    Mes codes de connexion sont :
  </p>
  <ul>
    <li>Gmail : azerty@gmail.com - hucAf9G2BqDE</li>
    <li>Netflix : azerty@gmail.com - 8KQxpPFTibtf</li>
  </ul>
</body>
</html>

Notez que si quelqu'un connaît l'adresse URL de la page secret.html, il peut la voir sans passer par le formulaire. L'exercice suivant ajoute une couche supplémentaire de sécurité.

Exercice 2

Vous allez modifier l'exercice 1 pour rendre la page secret.html plus sécurisée en utilisant la méthode GET.

Vous allez adapter votre fichier secret.html pour faire une page PHP qui affiche le contenu seulement si l'URL contient une variable appelée « code » avec la valeur « Fap9GrKh ». Sinon, on renvoie l'utilisateur vers le formulaire.

La page traitement.php doit alors envoyer l'utilisateur vers l'URL secret.php?code=Fap9GrKh

Vous voulez maintenant partager votre page sécurisée avec d'autres personnes, mais vous ne voulez pas leur donner votre mot de passe. Nous allons gérer maintenant plusieurs mots de passe.

Exercice 3*

Vous allez modifier l'exercice 2 pour gérer plusieurs utilisateurs avec des mots de passe différents.

Dans la page traitement.php vous aurez maintenant un tableau contenant plusieurs mots de passe, comme « abc123 », « def456 » et « ghi789 ».

Vous devez ensuite modifier le code PHP pour vérifier si le mot de passe entré dans le formulaire appartient à cette liste. La suite du traitement reste la même.

Ce site web n'est pas encore parfait : un utilisateur qui connaît l'adresse URL « secret.php?code=Fap9GrKh » peut toujours voir la page sécurisée sans avoir besoin des mots de passe. Pour faire mieux, il faut utiliser les sessions (vous le verrez l'année prochaine), mais il existe une façon de les contourner.

Exercice 4

Dans cet exercice vous allez protéger un contenu de manière totalement sécurisée.

L'astuce consiste à envoyer les données du formulaire vers la page elle-même. Alors, il y a cas possibles :

  • La variable $_POST['mdp'] n'est pas définie. Ça veut dire que l'utilisateur n'a pas encore rempli le formulaire. Dans ce cas, on affiche le formulaire.
  • La variable $_POST['mdp'] est définie, mais le mot de passe n'est pas dans la liste. Ça veut dire que l'utilisateur a rempli le formulaire avec un mot de passe incorrect, donc il se trouve de nouveau dans la page index.php. Dans ce cas, on affiche un message d'erreur et le formulaire.
  • La variable $_POST['mdp'] est définie et le mot de passe est dans la liste. Dans ce cas, on affiche le contenu de la page secret.php

Remarquez comment cette solution ne nécessite qu'une seule page (assez compliquée). Pour rappel, on vérifie si une variable existe avec la fonction isset().