Méthodes GET/POST et formulaires HTML
Notes de cours
- Envoi de données avec HTTP & Formulaires HTML
- Envoi de données avec HTTP
- Méthode POST
- Fonctionnement général des formulaires HTML
- Détails sur des widgets particuliers (boutons radio,
select
…) - Style et validation côté client
Travail personnel
Objectifs
Dans ce TP, on manipule des formulaires avec les méthodes GET et POST.
Exercice 1 — Pseudo-forum #
Récupérer cette archive.
Elle contient un répertoire forum
qui lui-même contient un fichier CSS ainsi qu'un fichier donnees.php
,
qui déclare un tableau $donnees
contenant les messages d'une sorte de pseudo-forum.
Chaque message est un tableau associatif avec trois champs :
- le pseudo
- le texte du message
- la date (une instance de la classe
DateTime
)
Le but de l'exercice est de réaliser un site présentant ces messages. Bien sûr, un vrai site ne stockerait pas les messages de cette façon (dans un tableau écrit en dur dans un script PHP) — l'objectif est de vous faire travailler plusieurs notions (et notamment réviser les formulaires), indépendamment des problèmes spécifiques aux BD (connexion, erreurs de requêtes, etc.).
Site de base
-
Placer le répertoire
forum
sur votre serveur, et créer un fichierliste.php
dans le répertoire. Inclure le fichierdonnees.php
au début du scriptliste.php
: nous pourrons dès lors accéder aux messages dans la variable$donnees
, qui constituera notre pseudo-base de données. -
Afficher une liste de tous les messages de la base. NB: les messages ne sont pas dans l'ordre chronologique. C'est normal. Cela fera l'objet d'une question ultérieure.
-
Améliorer la présentation, en vous appuyant sur le fichier CSS fourni : le résultat doit être similaire à cette page (dont il n'est pas interdit de regarder le code source HTML !).
-
S'assurer que le HTML résultant est valide, grâce au validateur du W3C.
-
Modifier le script pour qu'il réagisse à un paramètre
chercher
dans l'URL, en n'affichant que les messages dont le texte contient la chaîne de caractères valeur du paramètre. Par exemple,liste.php?chercher=blabla
doit afficher tous les messages dont le texte (et seulement le texte — pas le pseudo) contient la chaîneblabla
, et aucun autre. -
Ajouter un menu en haut de la page, avec trois liens :
- « Tous les messages » doit pointer vers
liste.php
- « Filtrer » doit pointer vers
filtre.php
- « Ajouter » doit pointer vers
ajout.php
S'assurer que le HTML est toujours valide.
- « Tous les messages » doit pointer vers
-
Créer le script
filtre.php
. Il doit contenir un formulaire avec un champ texte servant à faire une recherche dans le texte des messages, en s'appuyant sur le paramètrechercher
implémenté précédemment dansliste.php
. -
S'assurer que le HTML généré par
filtre.php
est valide. -
Créer le script
ajout.php
. Il doit contenir un formulaire d'ajout de message, avec un champ pour le pseudo et un champ pour le texte. La soumission du formulaire doit envoyer le message sous la forme d'une requête POST versliste.php
. -
S'assurer que le HTML généré par
ajout.php
est valide. -
Modifier
liste.php
pour que, lorsque la requête est POST, un nouveau message soit créé (avec le pseudo et le texte donnés, et comme date la date courante) et ajouté au tableau$donnees
, avant que la liste ne soit affichée. -
Normalement, vous devez bien voir votre nouveau message dans la liste (a priori, tout en bas)… mais il doit disparaître quand vous cliquez sur « Tous les messages » ! Assurez-vous d'avoir compris pourquoi. Autrement dit : si vous ne comprenez pas ce qui se passe, demandez des explications à votre chargé·e de TP !
L'ajout de message nécessite de mettre en place de la persistance de données. On abordera cela dans les prochaines semaines — ce n'est pas l'objectif de cet exercice. On va à présent améliorer notre filtre.
Améliorations du filtre
-
Ajouter un paramètre
pseudo
à la pageliste.php
, qui permet de n'afficher que les messages dont le champ « pseudo » correspond exactement au pseudo donné.Lors de vos tests, n'oubliez pas de vérifier que les deux paramètres fonctionnent bien ensemble : on doit pouvoir rechercher une chaîne dans les messages postés par un pseudo fixé.
-
Ajouter au formulaire de
filtre.php
un champ texte permettant d'utiliser le paramètrepseudo
que vous venez d'implémenter.Une fois que ça fonctionne, remplacer le champ texte par un menu déroulant contenant tous les pseudos de la base de messages. (Il faudra bien sûr inclure la « base de données » dans le script
filtre.php
.) -
Ajouter un paramètre
après
à la pageliste.php
, qui prend une date et une heure au formatYYYY-MM-DDThh:mm
(par exemple2024-10-13T11:30:41
). La liste des messages ne doit alors contenir que des messages qui datent d'après la date indiquée dans le paramètreaprès
. -
Ajouter à
liste.php
un paramètreavant
qui fonctionne commeaprès
, mais dans l'autre sens.Bien sûr,
avant
etaprès
doivent pouvoir fonctionner ensemble — et avecchercher
etpseudo
. Tous ces critères sont orthogonaux et donc compatibles. -
Ajouter deux champs de type
datetime-local
au formulaire defiltre.php
, pour exploiter les paramètresavant
etaprès
que vous venez d'implémenter. -
Vérifiez que
filtre.php
est bien toujours valide !
Encore des améliorations, plus compliquées
-
Ajouter un paramètre
ordre
àliste.php
.-
Faire en sorte qu'il ne puisse prendre que la valeur
pseudo
: lui donner toute autre valeur doit générer une page d'erreur avec comme statut HTTP400 Bad Request
. -
Lorsque
ordre=pseudo
, les messages doivent être ordonnés dans l'ordre alphabétique du pseudo de leur auteur/trice. Il y a plusieurs façons de faire, je n'en connais pas qui soit vraiment satisfaisante. -
Ajouter à présent une autre valeur possible,
ordre=texte
, permettant d'obtenir les messages classés dans l'ordre alphabétique de leur texte. -
Ajouter encore une autre valeur possible,
ordre=chronologique
: elle doit avoir pour effet que les messages soient classés dans l'ordre chronologique (du plus ancien au plus récent). NB: les opérateurs de comparaison numérique fonctionnent sur les instances deDateTime
. Une autre possibilité est d'utiliser leur méthodegetTimestamp()
.
-
-
Ajouter trois boutons radio dans le formulaire
filtre.php
pour choisir l'ordre d'affichage de la liste via le paramètreordre
. On regroupera les boutons dans un élémentfieldset
, et on vérifiera une nouvelle fois la validité de la page de formulaire. -
Ajouter un dernier paramètre à
liste.php
:inverser
. Lorsqu'il est présent avec la valeuroui
, l'ordre des messages doit être inversé (par exemple, avec les paramètresordre=chronologique&inverser=oui
, l'ordre sera du plus récent au plus ancien). Toute autre valeur que oui doit générer une page d'erreur avec comme statut HTTP400 Bad Request
. -
Ajouter une case à cocher au formulaire de
filtre.php
permettant d'inverser l'ordre d'affichage des messages. -
Faire en sorte que lors de l'utilisation du paramètre
chercher
, le scriptliste.php
surligne la chaîne de caractère recherchée à l'intérieur des messages listés. L'élément HTML approprié pour cela estmark
.Bien vérifier que le surlignement est correct dans les messages contenant des caractères non-ASCII avant la chaîne recherchée. Penser également à vérifier la validité d'une page avec des résultats de recherche.