TD4 - HTML/PHP : Formulaires HTML, méthodes GET et POST

Objectifs

L’objectif de ce TD est d’introduire les formulaires HTML. Ils sont un élément essentiel pour récolter des informations des utilisateurs, comme p.ex. des formulaire de saisi de données (comme des commentaires laissés sur un article sur un site web d’e-commerce), d’authentification (pour vous connecter à un réseau social), etc.

Note

Vous disposez d’une nouvelle Cheatsheet pour les formulaires !

Utilisez aussi systématiquement la référence MDN pour HTML :

<https://developer.mozilla.org/fr/docs/Web/HTML/Element

et la référence PHP :

https://www.php.net/manual/fr/langref.php

Important

A respecter tout au long de ce TD :

  • Les extensions des fichiers doivent être toujours .php
  • Dans le navigateur, l’URL commence toujours par http:// et non pas par file://
  • Si vous travaillez sur vos propres ordinateurs avec un environnement de développement du serveur web local, comme par exemple MAMP, vérifiez que votre serveur Apache (donc MAMP) est bien démarré.

Exercice 4.1 “Votre premier formulaire HTML5 : addition de deux nombres

  1. Ouvrir votre éditeur de texte (p.ex. VSCode), et dans Open Folder, vous sélectionnez votre dossier cswd qui est dans votre dossier espaces/www (ou bien sur vos propres ordinateurs sur C:\mamp\htdocs ou /Applications/MAMP/htdocs ou c:\wampserver64\www ou similaire, selon votre configuration).

Dans ce dossier cswd, créez un nouveau dossier td4.

Votre arborescence sera donc :

    espaces/
    └── www/
        └── cswd/
            └── td1/
                └── ...
            └── td2/
                └── ...
            └── td3/
                └── ...
            └── td4/

Dans ce dossier td4, créez un fichier formulaire.php.

  1. Dans ce fichier, mettez les balises pour un document HTML5 simpliste (donc avec les balises DOCTYPE, html, head, body, …) et enregistrez-le. Dans dans le corps du document (donc après l’ouverture du <body>), créez un titre h2 avec le texte Addition de deux nombres.

  2. Après ce titre, créez un formulaire qui renvoie vers la page addition.php avec la méthode get comme suit :

<form action="addition.php" method="get">
...
</form>
  1. A l’intérieur de la balise <form>, créez deux champs <input> de type text avec les noms de valeur nombre1 et nombre2 dans les attibuts name, qui permettent de saisir deux nombres, ainsi qu’un bouton <input type="submit"> qui permet de soumettre votre formulaire.

  1. Ouvrir votre page en allant sur votre page web personnel, comme par exemple :

https://prenom-nom.emi.u-bordeaux.fr/cswd/td4/formulaire.php

(Vous pouvez connaître l’URL de vos pages perso en vous connectant sur https://services.emi.u-bordeaux.fr/intranet/mesinfos/).

Note

Si vous travaillez sur votre propre ordinateur, c’est

http://localhost/cswd/td4/formulaire.php

ou alors, selon, la configuration

http://localhost:8888/cswd/td4/formulaire.php

  1. Pour expérimenter avec les champs HTML5, changez le type des deux balises <input> en y mettant l’attribut type="number" au lieu de type="text". Comparez.

  2. Que se passe-t-il lorsque vous cliquez sur le bouton “Envoyer” ? Regardez bien l’URL, et essayez de la comprendre intégralement. Bien sûr, comme la page addition.php n’existe pas encore, il y a un message d’erreur. Vous souvenez-vous comment accéder à ces plusieurs paramètres passés par l’URL (et qui sont séparés par des ?et &) ?

  3. Il est possible de regrouper des champs dans un formulaire avec la balise <fieldset>, et de mettre des étiquettes avec la balise <label> permettant d’activer le champ par clic de souris. Essayez d’utiliser ces deux balises afin d’obtenir le rendu suivant (n’oubliez pas de consulter le Cheatsheet sur les formulaires) :

Important

Attention : lorsque vous apportez des changements dans votre page du formulaire (ici formulaire.php), n’oubliez pas de recharger la page dans le navigateur (ctrl-R ou cmd-R) pour que les modifications soient prises en compte !

Exercice 4.2 Evaluation d’un formulaire

  1. Maintenant, ouvrir votre éditeur de texte et créer un nouveau document HTML5 (donc avec les balises DOCTYPE, html, head, body, …) dans le fichier addition.php. Dans dans le corps du document (donc après l’ouverture du <body>), créez un titre h2 avec le texte Résultat de l’addition.

  2. En tout début du fichier, rajoutez l’instruction PHP suivante :

<?php print_r($_GET); ?>

Note

L’instruction print_r vous permet de connaître le contenu intégral des variables de types tableaux. Ici, nous allons l’utiliser pour afficher le contenu de la variable $_GET (qui est un tableau associatif). Notez que cette instruction ne sert que pour vous aider et donc de simuler un mode debug.

  1. En tout début du fichier, récupérez les deux paramètres nombre1 et nombre2 avec la méthode $_GET, et stockez les dans les deux variables $nombre1 et $nombre2, respectivement.

  2. Ensuite, dans la partie

    affichez les deux nombres ainsi que leur somme, comme par exemple “Le résultat de l’addition de 47+95 est égal à 142”. Vous pouvez d’abord déclarer une variable $resultat, et l’affecter à la somme des deux nombres.

  3. Mettez chaque nombre et le résultat dans des balises <strong>...</strong>.

  4. Une fois tout fonctionne bien, vous pouvez bien évidemment commenter (ou supprimer) l’instruction print_r (qui ne servait qu’à simuler un mode debug, c’est à dire pour faciliter de trouver des erreurs).

  5. Si vous ne l’avez pas encore fait, protégez votre page au cas où les paramètres nombre1 et nombre2 ne seraient pas renseignés, en utilisant des conditions avec la fonction isset. Testez !

  6. Testez votre formulaire en laissant vos champs de textes vide. Essayez de comprendre le comportement. Pour éviter d’accepter des paramètres qui existent mais sans contenu (vide, en anglais empty), vous pouvez également essayer la fonction empty : if (!empty($_GET[...])), sachant que l’opérateur ! fait une négation logique. Vous pouvez également tester l’existence des deux paramètres en utilisant l’opérateur booléen && (ou bien and).

Exercice 4.3 CSS : exemples pour des formulaires (1)

  1. Dans votre dossier td4, créez un dossier css. Dans ce dossier, créez un fichier formulaire.css, et intégrez-le dans votre page formulaire.php (via la balise link dans la partie head, comme d’habitude) :

  2. Changez la taille de la police des deux champs <input> en définissant une classe nombre, comme expliqué sur le Cheatsheet des formulaires HTML.

Exercice 4.4 Formulaire pour un commentaire (difficulté : facile)

Dans cet exercice, nous allons faire principalement la même chose que dans l’exercice précédent, et vous allez donc voir si vous avez tout compris.

  1. Créer une nouvelle page HTML5 dans le fichier recette.php avec un titre <h1> de votre choix (par exemple culinaire) et créez les 3 paragraphes (avec la balise avec <p>...</p>) avec le texte issu de la version populaire de “Lorem ipsum” issue de la page https://fr.wikipedia.org/wiki/Faux-texte.

  2. A la fin de votre page recette.php, créez un titre <h3> avec le texte “Laissez votre commentaire”. Ajoutez un formulaire qui renvoie vers la page recap.php avec la méthode get, et qui permet de renseigner un champ d’entrée de texte (input, appelé nom), une zone de texte (textarea, appelée texte) ainsi qu’un bouton pour soumettre le formulaire.

  3. Créer la page recap.php qui récupère et qui affiche les données du formulaire dans une liste ul, avec deux éléments “Votre nom :” et “Votre commentaire :”, suivi du nom et du texte du commentaire, respectivement.

Note

Pour vous aider, vous pouvez temporairement toujours afficher tous le paramètres GET pendant la phase de développement, avec l’instruction :

<?php print_r($_GET); ?>

Une fois que votre page fonctionne parfaitement, enlevez cette instruction !

  1. A la fin de votre page recap.php, créez un lien hypertexte avec le texte “retourner à la recette”, et qui permet de renvoyer à la page recette.php !

  2. Réfléchissez si vous êtes d’accord que ce serait une bonne idée que vos commentaires apparaissent maintenant sur la page de recette. A votre avis, de quoi a-t-on besoin pour faire ceci ?

Exercice 4.5 Formulaire pour un commentaire avec POST (difficulté : facile)

Avec la méthode GET, les informations saisies dans les formulaires sont visibles dans l’URL, ce qui pose notamment un problème pour des paramètres longs tels que des commentaires, ou alors les mots de passe. Pour remédier à ce problème, nous allons changer l’exercice précédent et utiliser la méthode POST au lieu de la méthode GET :

  1. Changez la méthode de passage de paramètres de votre formulaire recette.php en méthode post en modifiant l’attribut method de la balise <form> comme suit :
<form action="recap.php" method="post">
...
</form>

Pour récupérer les paramètres, dans votre page recap.php, utilisez donc $_POST (Remarque: Remplacez donc toutes les occurrences de $_GET par $_POST. ).

Note

Pour vous aider, vous pouvez temporairement toujours afficher tous le paramètres POST pendant la phase de développement, avec l’instruction :

<?php print_r($_POST); ?>
  1. Testez votre formulaire. N’oubliez pas de recharger la page recette.php qui contient votre formulaire dans votre navigateur avec ctrl-R ou cmd-R afin que les modifications soient prises en compte ! Lors de la soumission du formulaire, qu’observez-vous dans l’URL ?

Exercice 4.6 CSS: Les “Media queries” pour des sites web adaptatifs

Avant de faire d’autres exercices sur les formulaires, nous allons revenir sur la mise en forme, avec l’objectif de créer des mises en formes différentes en fonction du média (ordinateur, tablette, téléphone) dans lequel la page web est affichée.

On fait cela avec les les Media queries:

  1. Rajoutez le code suivant à la fin de votre feuille de style formulaire.css.
@media screen and (max-width: 640px) {
    body {
        background-color : #FFFFFF;
    }
}
@media screen and (min-width: 641px) {
    body {
        background-color : #CCCCCC;
    }
}
  1. Testez, en modifiant drastiquement la largeur de la fenêtre de votre navigateur avec votre souris/trackpad.

  2. Ajoutez une règle dans votre feuille de style pour que pour les navigateurs à petits largeurs, toutes les balises input auront une taille de police de 40px. Testez avec le navigateur de votre ordinateur.

  3. Maintenant, testez sur votre téléphone mobile. Afin d’éviter de taper l’URL dans votre téléphone, vous pouvez créer un QRCode avec un générateur, comme par exemple sur URL suivante :

https://patrick-reuter.emi.u-bordeaux.fr/qrcode/phpqrcode/index.php

Note

Remarque : Bien évidemment, si vous travaillez en local sur MAMP ou similaire, il faut d’abord envoyer vos fichiers sur le serveur du CREMI.

Exercice 4.7 Formulaire de connexion (difficulté : moyenne)

Dans cet exercice, nous allons créer un scénario de connexion à une page web via un email et un mot de passe :

  1. Créer une page PHP connexion.php avec les en-têtes HTML5. Ajoutez un titre titre h2 “Connexion” ainsi qu’un formulaire permettant à un membre de se connecter au site. Cette page devrait renvoyer à une page verifier-connexion.php avec la méthode POST.

Cette page contiendra :

  • un champs de type email s’appelant email permettant de renseigner une adresse mail,
  • un champs de type password s’appelant motdepasse,
  • une case à cocher, permettant de spécifier si l’utilisateur souhaite être reconnu,
  • et un bouton de type submit permettant de se connecter.
  1. Testez votre formulaire dans un navigateur.

  2. Créez la page verifier-connexion.php. Cette page devra afficher le texte “Votre email est …” suivi par l’adresse email que l’utilisateur a renseigné. Testez

  3. Complétez votre page verifier-connexion.php pour qu’elle affiche “Bienvenue, vous êtes désormais connecté.” si l’email connecté correspond à mail@monmail.fr et le mot de passe correspond à f2aL+RSw. Vous pouvez de nouveau utiliser l’opérateur booléen et && (ou bien and). Référez-vous, comme d’habitude, au Cheatsheet PHP pour vous rappeler de la syntaxe de la structure de contrôle if. N’oubliez pas que les comparaisons en PHP se font avec == et non pas =. Si le mot de passe ne correspond pas, affichez “Login/mot de passe incorrect”.

Note

Vous avez certainement remarqué les points suivants :

  1. Bien évidemment, il peut y avoir plusieurs paires d’email et de mot de passe qui correspondent à différents utilisateurs. Dans un prochain TD, nous allons vérifier les codes d’accès stockés dans une table utilisateur d’une base de données.

  2. Comme les informations saisies dans les formulaires contiennent des mots de passe, nous avons utilisé la méthode POST afin de ne pas les rendre visibles dans la barre d’adresse de votre navigateur.

  3. Pour rester pédagogiquement simple, cet exercice ne respecte pas une règle de sécurité informatique, car dans votre code source PHP, vous avez accès à un mot de passe stocké “en clair”, à savoir d’une manière non-crypté. Vous allez voir dans de prochains TDs que, quand nous allons stocker les mots de passe dans une table d’une base de données, nous allons respecter cette règle de sécurité informatique, et nous allons crypter les mots de passe, car même un créateur ou adminstrateur de site n’a pas le droit de connaître les mots de passe ….

Exercices optionnels

Exercice 4.8 Préparation d’un sondage (plutôt difficile)

Dans cet exercice, nous allons préparer un site web permettant de créer une question, et de proposer différentes réponses pour un sondage.

  1. Créez une page sondage-creer-question.php avec les balises HTML simplistes. Cette page contiendra un formulaire qui renvoie vers la page sondage-creer-reponses.php avec la méthode GET. Ce formulaire contient un champ texte permettant de saisir une question et qui s’appelle question, un champ nombre s’appelant nombre qui permet de spécifier le nombre de réponses, ainsi qu’un bouton pour soumettre le formulaire.

  2. Créez la page sondage-creer-reponses.php qui doit récupérer et afficher la question posée, ainsi que le nombre de réponses.

  3. Cette page doit également elle-même avoir un formulaire qui renvoie vers la page sondage-recap.php. Elle doit afficher plusieurs champs de texte (autant de champs que renseigné dans nombre), s’appelant reponse1, reponse2, reponse3, etc., ainsi qu’un bouton soumettre.

  4. Dans votre formulaire, ajoutez également deux champs <input>de type caché (avec la attribut type="hidden"). Le premier aura comme attribut name="question" et comme valuer le texte de la question, et le deuxième aura comme attribut name="nombre" et comme valeur le nombre de réponses. Ces champs serviront à la page du récapitulatif pour avoir les informations respectives.

  5. Créer la page sondage-recap.php qui doit afficher la question et toutes les réponses possibles.

Exercice 4.9 Fonctions de hachage pour les mots de passe

Pour l’exercice de vérification de mot de passe, nous souhaitons maintenant éviter de faire apparaître le mot de passe en clair dans le fichier PHP. Pour ce faire, nous allons utiliser des clés de hachage. J’ai donc créé une clé de hashage pour le mot de passe f2aL+RSw avec la fonction password_hash, et cette clé de hashage est

$2y$10$bl5FefAR.UsABYJ8znHeb.ZPI4fVTirJ33nSIuVSZNgBkS2GO5RUq

La fonction password_verify permet de vérifier si un mot de passe correspond à une clé de hachage.

  1. Modifiez le test de mot de passe en utilisant la fonction password_verify de la manière suivante :

password_verify($motdepasse_du_formulaire, '$2y$10$bl5FefAR.UsABYJ8znHeb.ZPI4fVTirJ33nSIuVSZNgBkS2GO5RUq')

Cette fonction renvoie vrai si le mot de passe du formulaire correspond au clé de hashage, et faux sinon.

Important

Comme d’habitude, les exercices sont à rendre sur moodle jusqu’à mercredi prochain, 23h59.