Introduction à l'architecture d'un site web
Notes de cours
- Sensibilisation à l’ergonomie des sites web
- Introduction à l’ergonomie
- Fondements de l’ergonomie
- Règles de base de l’ergonomie web
- Architecture d’un site web
- Séparation traitement des données & affichage
Travail personnel
Objectifs
L'exercice est une application directe de l'architecture présentée en cours pour la manipulation des données.
Exercice 1 — Poemes #
Exemple du cours (Page PHP : hello.php / Squelette : squelette.php)
Pour récupérer cette archive, veuillez cliquer sur le lien. L'archive contient un répertoire poemes
qui comprend :
- un répertoire
textes
, contenant les textes de quatre poèmes - un répertoire
images
, contenant les images des poètes - un fichier
donnees.php
déclarant un tableau avec des informations sur les poèmes (auteur, titre, image correspondante)
Première partie : création d'un site fonctionnel
L'objectif de cet exercice est de réaliser un site présentant les quatre poèmes contenus dans l'archive. Bien qu'un site plus complet utiliserait une base de données, ce exercice vise à vous familiariser avec la manipulation des tableaux PHP et l'architecture d'un site web sans recourir aux bases de données.
Une approche naïve consisterait à créer un script PHP distinct pour chaque page du site (un pour chaque poème plus la page d'accueil). Cependant, cela entraînerait de nombreuses redondances entre les scripts et compliquerait l'ajout de nouveaux poèmes.
Une solution plus efficace consiste à générer le site à partir d'un seul et même script principal, qui choisira les contenus à afficher en fonction de l'URL.
Pour simplifier l'exercice, nous utiliserons un paramètre d'URL pour sélectionner le poème à afficher. Cette approche vous semble-t-elle pertinente ?
- Placez le répertoire
poemes
sur le serveur et créez un fichierindex.php
à l'intérieur. Ce fichier contiendra le modèle de base pour les pages HTML du site. Dans cette partie de l'exercice, vous ne modifierez que ce fichierindex.php
. - Incluez le fichier
donnees.php
dans le fichierindex.php
afin de pouvoir accéder aux informations sur les poèmes. - Affichez une liste des titres des poèmes en utilisant le tableau.
- Récupérez le paramètre
poeme
de l'URL. Si sa valeur correspond à l'une des quatre clés (boheme
,correspondances
,bois
,automne
), affichez la page du poème correspondant. Pour l'instant, affichez simplement le titre du poème en tant que titre principal de la page (h1
) et dans l'élémenttitle
de l'en-tête HTML. - Ajoutez le texte du poème correspondant ainsi que le nom de l'auteur en dessous.
- Affichez l'image correspondante avec le nom de l'auteur en tant que texte alternatif.
- Transformez la liste des titres des poèmes en une liste de liens où un clic sur un poème mène à la page correspondante.
- Assurez-vous qu'un message d'accueil s'affiche si aucun paramètre
poeme
n'est présent dans l'URL. - Gérez l'affichage d'un message d'erreur si la valeur du paramètre
poeme
dans l'URL est incorrecte.