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.
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 :
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 parfile://
- 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
- Ouvrir votre éditeur de texte (p.ex. VSCode), et dans Open Folder, vous sélectionnez votre dossier
cswd
qui est dans votre dossierespaces/www
(ou bien sur vos propres ordinateurs surC:\mamp\htdocs
ou/Applications/MAMP/htdocs
ouc:\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
.
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 titreh2
avec le texte Addition de deux nombres.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>
- A l’intérieur de la balise
<form>
, créez deux champs<input>
de type text avec les noms de valeurnombre1
etnombre2
dans les attibutsname
, qui permettent de saisir deux nombres, ainsi qu’un bouton<input type="submit">
qui permet de soumettre votre formulaire.
- 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/).
Si vous travaillez sur votre propre ordinateur, c’est
http://localhost/cswd/td4/formulaire.php
ou alors, selon, la configuration
Pour expérimenter avec les champs HTML5, changez le type des deux balises
<input>
en y mettant l’attributtype="number"
au lieu detype="text"
. Comparez.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&
) ?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) :
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
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 titreh2
avec le texte Résultat de l’addition.En tout début du fichier, rajoutez l’instruction PHP suivante :
<?php print_r($_GET); ?>
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.
En tout début du fichier, récupérez les deux paramètres
nombre1
etnombre2
avec la méthode$_GET
, et stockez les dans les deux variables$nombre1
et$nombre2
, respectivement.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.Mettez chaque nombre et le résultat dans des balises
<strong>...</strong>
.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).Si vous ne l’avez pas encore fait, protégez votre page au cas où les paramètres
nombre1
etnombre2
ne seraient pas renseignés, en utilisant des conditions avec la fonctionisset
. Testez !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 bienand
).
Exercice 4.3 CSS : exemples pour des formulaires (1)
Dans votre dossier
td4
, créez un dossiercss
. Dans ce dossier, créez un fichierformulaire.css
, et intégrez-le dans votre page formulaire.php (via la baliselink
dans la partiehead
, comme d’habitude) :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.
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.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 pagerecap.php
avec la méthodeget
, 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.Créer la page
recap.php
qui récupère et qui affiche les données du formulaire dans une listeul
, avec deux éléments “Votre nom :” et “Votre commentaire :”, suivi du nom et du texte du commentaire, respectivement.
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 !
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 pagerecette.php
!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 :
- Changez la méthode de passage de paramètres de votre formulaire
recette.php
en méthode post en modifiant l’attributmethod
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
. ).
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); ?>
- 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:
- 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;
} }
Testez, en modifiant drastiquement la largeur de la fenêtre de votre navigateur avec votre souris/trackpad.
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.
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
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 :
- 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’appelantemail
permettant de renseigner une adresse mail, - un champs de type
password
s’appelantmotdepasse
, - une case à cocher, permettant de spécifier si l’utilisateur souhaite être reconnu,
- et un bouton de type
submit
permettant de se connecter.
Testez votre formulaire dans un navigateur.
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é. TestezComplé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 bienand
). 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”.
Vous avez certainement remarqué les points suivants :
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.
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.
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.
Créez une page
sondage-creer-question.php
avec les balises HTML simplistes. Cette page contiendra un formulaire qui renvoie vers la pagesondage-creer-reponses.php
avec la méthode GET. Ce formulaire contient un champ texte permettant de saisir une question et qui s’appellequestion
, un champ nombre s’appelantnombre
qui permet de spécifier le nombre de réponses, ainsi qu’un bouton pour soumettre le formulaire.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.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’appelantreponse1
,reponse2
,reponse3
, etc., ainsi qu’un bouton soumettre.Dans votre formulaire, ajoutez également deux champs
<input>
de type caché (avec la attributtype="hidden"
). Le premier aura comme attributname="question"
et comme valuer le texte de la question, et le deuxième aura comme attributname="nombre"
et comme valeur le nombre de réponses. Ces champs serviront à la page du récapitulatif pour avoir les informations respectives.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.
- 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.
Comme d’habitude, les exercices sont à rendre sur moodle jusqu’à mercredi prochain, 23h59.