Formulaires HTML et interaction client-serveur avec PHP

Licence Informatique, semestre 6

Alexandre NiveauJean-Marc Lecarpentier — Judith Jeyafreeda Andrew

Enseignement des technologies du Web

 

Formulaires HTML et interaction client-serveur avec PHP

Notes de cours

  • Quelques compléments sur les bases de PHP
    • Lecture d’un fichier
    • Existence d’une clef ou d’une valeur dans un tableau
    • Affichage des erreurs et configuration
    • Variables superglobales
    • isset() et empty()
  • Formulaires HTML
    • 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

Les deux premiers exercices de ce TP visent à vous faire comprendre comment faire communiquer le client et le serveur avec PHP, via les paramètres d'URL et les formulaires. Cette étape est très importante, car toute la suite s'appuie dessus : assurez-vous d'avoir bien compris !

Le troisième exercice est une initiation pas à pas à la mise en place d'une architecture propre. Ces aspects seront revus et complétés dans la suite du cours.

Exercice 1 — Table de multiplication #

Un corrigé de cet exercice est disponible (archive).

Dans cet exercice, on continue à manipuler tableaux & boucles, on récupère un paramètre d'URL et on crée un premier formulaire.

Construction de la table

  1. Écrire une page multiplication.php qui affiche une table de multiplication comme sur la figure suivante. Les couleurs sont facultatives, sauf pour les plus à l'aise, qui s'efforceront d'obtenir ce rendu en pur CSS, sans utiliser les attributs class, id ou style.
    La table de multiplication de 1 à 15
  2. Modifier le code pour que l'affichage de la table soit géré par une fonction, qui prend en argument la borne supérieure de la table (15 dans le modèle) ; par exemple, si on lui passe 20, elle affiche la table de 1 à 20.
  3. Modifier à nouveau le code, pour que la borne supérieure de la table soit contrôlé par un paramètre borne dans l'URL : ainsi, la page multiplication.php?borne=20 affichera la table de 1 à 20.
  4. Si la borne est trop grande, le script met trop longtemps à générer la page, et le serveur le tue avant qu'il ait terminé. Vérifier que la borne fournie dans l'URL est entre 1 et 100 ; si elle n'y est pas, afficher un message d'erreur, ou choisir une borne par défaut.
  5. Ajouter sur la page un lien vers la « page » affichant la plus petite table et un autre vers la « page » affichant la plus grande table.

Formulaire

On veut permettre à l'internaute d'afficher une table quelconque (dans l'intervalle autorisé). On ne va évidemment pas lui fournir une liste avec 100 liens : il est beaucoup plus naturel de lui fournir un formulaire.

  • Créer une page HTML formulaire.html contenant un formulaire avec un champ texte et un bouton de soumission contenant le texte « Afficher ». Le résultat devrait ressembler à la figure suivante.
    Un formulaire HTML très simple
  • Ajouter une étiquette au champ texte, qui dit « Taille de la table : ».
    Un formulaire HTML avec un label
    S'assurer qu'un clic sur l'étiquette place le curseur dans le champ texte.
  • Faire en sorte que lors de la soumission, les données du formulaires soient transmises à votre page multiplication.php, en passant le contenu du champ texte comme valeur du paramètre borne.
  • Optionnel : empêcher l'internaute de soumettre le formulaire si le champ texte ne contient pas un entier positif. De la même façon, empêcher la soumission si l'entier n'est pas entre 1 et 100.
  • Exercice 2 — Formulaire et récupération #

    Un corrigé de cet exercice est disponible (archive).

    Un formulaire HTML
    1. Écrire une page HTML contenant un formulaire correspondant au modèle ci-dessus.
    2. Lors d'un clic sur « Envoyer », les données doivent être transmises à une page PHP recup.php, sans qu'elles n'apparaissent dans l'URL.
    3. Écrire la page recup.php : pour commencer, afficher simplement le nom donné par l'internaute.
    4. Faire en sorte que la couleur de fond de la page plaise au maximum à l'internaute.
    5. Saluer l'internaute dans toutes les langues qu'il ou elle dit parler. Si aucune langue n'a été sélectionnée, rediriger l'internaute vers une page d'erreur erreur.html.

    Exercice 3 (optionnel) — Architecture d’un site simple #

    Une proposition de correction de cet exercice est disponible : première partie (archive), deuxième partie (archive).'

    Je laisse cet exercice pour les rapides, mais il sera proposé à nouveau dans un prochain TP.

    Récupérer cette archive. Elle contient un répertoire poemes, qui lui-même contient

    • un répertoire textes, avec les textes de quatre poèmes
    • un répertoire images, avec les images des poètes
    • un fichier donnees.php, qui déclare un tableau contenant des informations sur les poèmes (auteur, titre, image correspondante)

    Le but de l'exercice est de réaliser un site présentant ces quatre poèmes. Un site plus conséquent utiliserait évidemment une base de données ; un des objectifs est de vous faire manipuler les tableaux PHP, et de vous faire travailler sur l'architecture d'un site indépendamment des problèmes spécifiques aux BD (connexion, erreurs de requêtes, etc.).

    Pour simplifier l'énoncé et l'exercice, on va utiliser un paramètre d'URL pour choisir le poème à afficher. Ce choix vous semble-t-il pertinent ?

    Première partie : un site fonctionnel

    1. Placer le répertoire poemes sur le serveur, et créer un fichier index.php dans le répertoire. Mettre un modèle de page HTML de base dans le fichier index.php. Dans toute cette partie, on ne modifiera que ce fichier index.php.
    2. Inclure le fichier donnees.php depuis le fichier index.php. On va ainsi pouvoir accéder aux informations sur les poèmes.
    3. Afficher une liste des titres des poèmes.
    4. Récupérer le paramètre poeme dans l'URL, et si sa valeur correspond à l'une des quatre clefs (boheme, correspondances, bois, automne), alors on va afficher la page du poème correspondant : pour l'instant, afficher le titre du poème comme titre principal de la page (h1) et dans l'élément title de l'en-tête HTML.
    5. Ajouter à la page le texte du poème correspondant, et le nom de l'auteur en-dessous.
    6. Ajouter l'image correspondante, avec comme texte alternatif le nom de l'auteur.
    7. Transformer la liste des titres de poèmes en une liste de liens : un clic sur un poème mène à la « page » correspondante.
    8. Faire en sorte que s'il n'y pas de paramètre poeme dans l'URL, un message d'accueil soit affiché.
    9. Faire en sorte que si la valeur du paramètre poeme dans l'URL est erronée, un message d'erreur soit affiché.

    Deuxième partie : une meilleure architecture

    À ce niveau-là, le mini-site doit fonctionner correctement. Il n'est cependant pas très propre, car on a mélangé la logique et l'affichage. Pour bien faire, il faut séparer notre fichier en deux morceaux.

    • index.php va être le contrôleur, il ne s'occupera que d'analyser l'URL pour déterminer le poème désiré et récupérer les informations correspondantes dans les données. Il ne devra rien afficher lui-même : une fois son travail terminé, il se contentera d'inclure l'autre fichier.
    • On va créer un fichier squelette.php, qui au contraire ne s'occupera que de l'affichage. Il contiendra une page HTML « à trous » (on parle de template) : on n'utilisera PHP que pour afficher des variables. Les variables seront remplies au préalable par le contrôleur.

    Créer un squelette pour les pages affichant un poème, et modifier index.php pour qu'il se comporte comme un contrôleur tel que décrit ci-dessus.

    Créer un squelette pour les autres pages (accueil et erreur) si nécessaire, et adapter index.php.

    Pour les rapides : compléments (optionnels)

    Ajouter un système de recherche, en essayant de garder une architecture propre. Dans un premier temps, l'internaute doit pouvoir retrouver un poème à partir du nom de l'auteur. Ensuite la recherche doit pouvoir porter sur le texte des poèmes.

    Si vous estimez que vos squelettes partagent trop de code HTML, n'hésitez pas à extraire des fragments communs, qui seront inclus depuis plusieurs squelettes (l'exemple typique est le pied de page).