Pages web dynamiques

Alexandre Niveau
GREYC — Université de Caen

Pages web statiques

  • Les pages web sont en HTML/CSS
  • Un navigateur web est (par définition) un logiciel qui :
    • sait afficher du HTML/CSS
    • sait communiquer en HTTP pour récupérer les pages auprès d'un serveur
  • HTML n'est pas un langage de programmation : pas d'instructions, pas de conditions, pas de boucles…
  • Les pages web écrites purement en HTML/CSS sont dites statiques

Limites des pages web statiques

  • Pas pratiques à écrire
    • on voudrait des variables pour éviter les répétitions, des fonctions pour simplifier la mise en forme…
    • pas un problème : rien n'empêche d'utiliser son langage préféré pour générer des pages HTML statiques, qui seront mises ensuite sur le serveur. un peu comme si l'on compilait ses pages HTML
  • Une page visible par l'utilisateur = une page HTML à écrire.
    • parfait pour un site avec cinq pages sur des sujets différents…
    • impensable pour le site d'une bibliothèque avec une page par livre !
    • le contenu des pages doit pouvoir dépendre d'une base de données et être mis à jour en temps réel
      ⇒ la solution précédente ne suffit plus

Pages web dynamiques

  • La solution est de générer le HTML à la demande
    • le client demande la page toto.truc
    • le serveur n'a pas de page HTML toto.truc : il sait que cette page doit être générée en lançant un certain programme
    • il lance le programme et récupère en sortie une page HTML
    • il envoie le HTML ainsi généré au client
  • Le client ne sait pas tout ça : il a demandé une page et a obtenu du HTML. Il n'a aucun moyen de savoir que la page a été générée dynamiquement.

Langages de génération de HTML

  • On peut utiliser n'importe quel langage côté serveur !
  • Il faut juste que le serveur sache lancer le programme quand il reçoit les requêtes correspondantes
  • Exemple (shell) : on a configuré le serveur pour qu'il exécute ce script shell quand quelqu'un demande la page pagedynamique.html (qui n'existe pas en tant que fichier, comme on peut le voir)
  • Exemple (Python) : on a configuré le serveur pour qu'il exécute ce script Python quand quelqu'un demande la page pagedynamique.html (qui n'existe pas en tant que fichier, comme on peut le voir)
  • Langages généralistes souvent utilisés : Java, Ruby, Perl, Python…
  • Langages prévus expressément pour cet usage : PHP, ASP.NET (Microsoft)
  • … mais rien n'empêche d'utiliser autre chose (C, C++… assembleur, shell !…)

Autre limitation des sites statiques

Sur un site entièrement en HTML, l'utilisateur est passif

Il ne fait que visiter les pages, il ne peut pas agir dessus
  • impossible de laisser un commentaire, de s'authentifier…
  • impossible de faire une requête non explicitement prévue par les concepteurs du site (par exemple demander « tous les livres de Victor Hugo édités après 1990 »)

Nécessité d'envoyer des données du client vers le serveur

prévu dans le protocole HTTP

Nécessité de paramétrer une page

prévu dans les URL

Envoi de données avec HTTP

Pour envoyer des données, méthode POST de HTTP avec données dans le corps de la requête

Requête souvent générée via un formulaire HTML, et utilise alors le format application/x-www-form-urlencoded (sauf cas particuliers)
POST /chemin/pagederecup HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 21

nom=Toto&couleur=vert+clair

Couples clef-valeur séparés par des &

Espaces remplacées par +

Encodage particulier des caractères spéciaux et non-ASCII

URL paramétrée

Autre façon pour le client de transmettre des informations au serveur : méthode GET normale, mais avec une URL paramétrée

On ajoute à l'URL une partie de requête après le chemin
  • Le chemin est séparé de la requête par un point d'interrogation
  • La syntaxe de la requête n'est pas précisée par la norme…
  • … mais de fait c'est généralement la même syntaxe que pour le corps de POST :
    http://youpi.fr/home?nom=Toto&couleur=vert+clair

Peuvent aussi être générées par les formulaires HTMLex: Google

Une URL paramétrée est une URL comme une autre : on peut en faire un lien, l'enregistrer dans ses marque-page, etc.

Choix de la méthode

Requête POST ou requête GET avec URL paramétrée : deux façons de « transmettre des informations » du client vers le serveur

N'ont pas le même rôle :
  • POST sert à envoyer des données
  • GET sert à récupérer une page, éventuellement différente suivant certains paramètres

En cas d'hésitation entre POST et URL paramétrée, une seule question à se poser : est-ce que l'URL paramétrée a un sens en tant que lien ?

NB : il est parfaitement possible d'envoyer des données avec POST à une URL paramétrée

Remarque sur les paramètres

Les paramètres d'URL sont souvent utilisés abusivement pour le routage (mauvaises pratiques qui se sont répandues notamment par le biais de PHP), par ex. http://toto.fr/forum?post=754

Ce n'est pas non plus leur rôle !

L'URL du post 754 devrait être quelque chose comme http://toto.fr/forum/posts/754

Les paramètres, comme leur nom l'indique, servent à paramétrer une page

ils ne devraient être utilisés que pour filtrer ou rechercher :
http://toto.fr/forum?date=2015-02-23&sort=title
http://toto.fr/forum?q=glace+vanille

Utilisation des données

L'envoi de données est géré par le navigateur en HTTP classique, à partir de formulaires purement HTML

les pages HTML statiques permettent d'envoyer des données

Pourquoi parler de ça dans le cours sur les sites dynamiques ?

les pages HTML statiques ne savent pas récupérer les données !

Il est nécessaire de les envoyer vers une page pour laquelle le serveur va exécuter un programme dynamiquement (ex. : script PHP)