Pages web dynamiques

Formulaires HTML & introduction à PHP

Licence Informatique, semestre 6

Alexandre Niveau — Valentin Lemière

Enseignement des technologies du Web

 

Pages web dynamiques

Formulaires HTML & introduction à PHP

Notes de cours

  • Pages web dynamiques
    • Limites des pages statiques
    • Utilisation de langages pour générer dynamiquement le HTML
    • Transmission de données du client au serveur
  • Formulaires HTML
    • Fonctionnement général des formulaires HTML
    • Détails sur des widgets particuliers (boutons radio, select…)
    • Style et validation côté client
  • Introduction à PHP
    • Syntaxe générale : variables, structures de contrôle, fonctions…
    • Tableaux et tableaux associatifs
    • Lecture d’un fichier
    • Divers détails spécifiques au langage

Travail personnel

Objectifs

Après avoir fait ce TP, vous devriez maîtriser les bases de PHP et son interfaçage avec 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 !

Exercice 1 — Premiers pas avec PHP

Un corrigé de cet exercice est disponible (archive du code, résultat).

Cet exercice vise à vous familiariser avec les pages dynamiques et le fonctionnement de PHP. Pour rappel, une page PHP est un script, qu'il faut exécuter pour en voir le résultat. C'est le serveur qui exécute le script quand un client y accède via HTTP : si vous essayez d'ouvrir une page PHP locale avec votre navigateur, ça ne fonctionnera pas (le navigateur vous proposera probablement de la télécharger).

  1. Créer, sur votre espace web (dev), un fichier hello.php et y placer le code suivant :
    <?php
    	$nom = "World";
    ?>
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8" />
    	<title>Hello World en PHP</title>
    </head>
    <body>
    	<p>Hello <?php echo $nom; ?>!</p>
    </body>
    </html>
    
    Accéder à la page correspondante sur votre site (en HTTP ; pas en local, ni en SFTP). Vérifiez que tout se passe bien (le résultat doit être similaire à cette page).
  2. Modifier le contenu de la variable $nom pour que la page vous salue (par ex. « Hello Jean-Benoît! » si vous vous appelez Jean-Benoît).
  3. Ajouter un titre h1 à la page : « Page de bienvenue de Jean-Benoît »
  4. Changer à nouveau le contenu de $nom (mettre un autre prénom) : vérifier que le titre s'adapte.
  5. Ajouter une deuxième variable et l'utiliser dans la page (par exemple une variable $age).
  6. Regarder le code source de la page dans le navigateur, et le comparer au code source PHP. Le navigateur peut-il savoir que la page a été générée par un script PHP ?

Exercice 2 — Boucles, tableaux et fonctions en PHP

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

Cet exercice a pour objectif de vous faire manipuler la syntaxe de base de PHP.

  1. Créer une page PHP test.php qui affiche tous les nombres entiers de 1234 à 5678, avec un saut de ligne après chaque nombre.
  2. Dans une page PHP, créer un tableau $tab d'au moins 10 cases, tel que la case d'indice i contienne la valeur 3×i+2. Afficher le contenu de $tab deux fois, en utilisant un for la première fois, et un foreach la seconde. On n'attend pas que vous fassiez un tableau HTML ; affichez juste les valeurs, en les séparant par exemple par une espace.
  3. Dans une page PHP, créer un tableau associatif contenant quelques URL de sites : http://google.fr à la clef « Google » et http://wikipedia.org à la clef « Wikipédia », par exemple. Afficher ensuite un menu utilisant ce tableau, par exemple
  4. Amélioration de la question précédente : écrire une fonction prenant un tableau associatif en paramètre, ayant pour clefs des noms de site et pour valeurs des URL, et qui retourne une chaîne de caractères contenant le code HTML du menu correspondant.

Exercice 3 — 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 4 — 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 5 — Architecture d’un site simple

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

    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

    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).