tite fractale

Introduction au HTML dynamique

Il est nécessaire, avant de démarrer cette activité, de bien comprendre les principes du HTML statique. Pour cela une activité est disponible ici.

1. Sites statiques, sites dynamiques

1.1. Définition

Un site statique servira invariablement le même code HTML, indépendament des requêtes, et donc indépendament des utilisateurs, et sans système de mémorisation des requêtes précédentes.

Un site dynamique, au contraire, génère à la volée le code html au niveau du serveur en fonction de la requête qui lui est faite.

En fait, cette vision manichéenne est naïve. Le spectre statique/dynamique est non seulement très large, mais ne constitue pas un ensemble totalement ordonné (comme on dit en maths, autrement dit : deux sites ne peuvent pas toujours être comparés en général).

Voici quelques exemples illustrant le spectre statique/dynamique. On peut remarquer qu'il n'est pas linéaire : un site dit « dynamique » (en rouge) peut être plus statique qu'un site dit « statique » (en bleu), et inversement.

wiki fermé rarement mis à jour (utilisé comme gestionnaire de contenu) wiki à accès restreint, peu actif,
blog aux commentaires fermés		 wiki actif,
blog aux commentaires ouverts		 wiki, blog ou forum très actif,
autres (emails en ligne, bugs trackers…)
site statique simple, rarement mis à jour site statique mis à jour régulierement site statique contenant des animations Javascript représentant des données en temps réel site statique mis à jour toutes les heures, voire plus souvent, intégrant un système de commentaires

1.2. Remarques

1.3. L’exemple du restaurant

À table dans un restaurant « statique », on peut commander différents plats (différentes pages). Si deux personnes commandent le même plat, ils auront exactement la même assiette, avec éventuellement du sel, du poivre et quelques sachets de sauce sur le côté (quelques animations ou même des inclusions de mini-pages dynamiques). Pas de surprise, bonne ou mauvaise, et on est vite servi.

Un restaurant « dynamique » acceptera des commandes de plats plus complexes, voire anticipera la demande du client si le client est un habitué (inscrit sur le site) ou s’il s’est renseigné sur ses goûts dans les autres restaurants (à l’aide par exemple de cookies (sic) tierce partie).

2. Démarrage et premières requêtes

2.1. Mongoose

Mongoose est un micro-serveur multi-plateforme. C’est peut-être la façon la plus simple de démarrer un serveur car il suffit de copier l’exécutable dans un répertoire. Ce répertoire, après lancement de Mongoose, sera la racine du site http://127.0.0.1:8080.

Si Python est installé, ou si vous pouvez l’installer, autant passer à la section suivante.

Sinon, il est possible d’observer les premières requêtes avec l’option -access_log et le caractère privilégié des pages d’accueil. Pour la programmation sur le serveur, c’est plus délicat.

Plus de détail bientôt (n’hésitez pas à me relancer si ça vous intéresse)…

2.2. Python

2.2.1. En général

Si Python est installé, une commande suffit pour démarrer un serveur basique :

Un répertoire (ou dossier) va être considéré comme la racine du site. Disons ici le dossier mon_site. La commande tree permet de voir le contenu d’un répertoire sous la forme d’un arbre :

$ tree mon_site
mon_site
├── test.html
└── img
    └── test.png

1 directory, 2 files

Si on déploie ce site à l’adresse http://example.com/,

2.2.2. Avec Windows

Ouvrez un terminal (touches Win+R, puis tapez cmd dans la petite fenêtre, suivi de la touche Entrée), puis suivez la session suivante :

C:\Documents and Settings\GRAGNIC> cd ..
C:\Documents and Settings> cd ..
C:\> cd Python32
C:\Python32> dir
 Le volume dans le lecteur C s'appelle HDD
 Le numéro de série du volume est 20BA-87C0

 Répertoire de C:\Python32

01/01/2000  00:00              .
01/01/2000  00:00              ..
...
01/01/2000  00:00            26 624 python.exe
...
              13 fichier(s)        3 281 545 octets
               9 Rép(s)  49 146 564 608 octets libres

C:\Python32> python -m http.server
Serving HTTP on 0.0.0.0 port 8000 ...

Ou directement dans le répertoire racine du site, voire dans un .bat :

C:\Python32\python -m http.server

2.2.3. Premières requêtes

On peut maintenant effectuer des requêtes à l’aide d’un navigateur. Il suffit de taper une de ces URL dans la barre d’adresse :

De plus, dans la fenêtre qui a lancé le serveur, on observe un journal (ou log) des requêtes :

Serving HTTP on 0.0.0.0 port 8000 ...
localhost - - [1/Jan/2000 00:00:00] "GET / HTTP/1.1" 200 -
localhost - - [1/Jan/2000 00:00:00] code 404, message File not found
localhost - - [1/Jan/2000 00:00:00] "GET /favicon.ico HTTP/1.1" 404 -

Question : Quelle est la racine de ce site ? Le vérifier :

Question : À quoi correspondent les codes 200 et 404 ?

Ce sont les codes de réponse HTTP. Voici quelques exemples de pages d’erreur de type 404 :

2.2.4. Quelques expériences

Par défaut, s’il n’y a pas de fichier index.html, la liste des fichiers à la racine est affichée.

2.2.4.1. Le responsable

Attention, ne pas confondre cette liste avec celle qu’un navigateur construit en allant faire lui-même la liste des fichiers, comme quand on le fait pointer vers file:/// (ou (file:///c:/ si vous utilisez Windows). Ici, c’est le serveur Python qui génère du HTML. On peut même voir le code de la bibliothèque standard qui en est responsable puisque le code source de Python est ouvert.

Manipulations :

  1. Afficher le code source de la page pour observer les différences entre http://localhost:8000 et file:///(ou file:///c:/ si vous utilisez Windows). Qu’affiche Firefox ?
  2. Localiser le fichier server.py de votre installation Python et modifier la procédure list_directory afin de changer le titre de la page qui présente la liste des fichiers.

2.2.4.2. Page d’accueil

Créer un fichier index.html à la racine du site http://localhost:8000. Attention, si vous utilisez Windows, les extensions sont parfois masquées.

  1. Que devient la liste des fichiers qu’affichait http://localhost:8000 ?
  2. Que se passe-t-il si on renomme index.html en index.htm ?
  3. Que se passe-t-il si on renomme index.htm en index.ht ?
  4. Repérer le code responsable de ce comportement dans server.py et essayer de retirer le statut de page d’accueil à index.htm.

2.2.5. Écrire un programme sur le serveur

Plutôt que de renvoyer la liste des fichiers, nous allons renvoyer le code HTML qui correspond au site que l’on veut publier.

2.2.5.1. Un premier programme

Lancer ce programme.

Attention : Certains scripts Python sont assez simples pour être exécutés directement dans le navigateur (bouton exécuter), mais pour les programmes auxquels on fait référence ici, il faudra les télécharger puis les exécuter sur votre ordinateur (Python3).

On y retrouve :

2.2.5.2. Le port

Lancer maintenant le même programme avec deux messages différents sur deux ports différents et observer les deux messages depuis un navigateur.

Vous aurez peut-être besoin de créer un autre fichier suivant la façons dont vous lancerez le programme.

2.2.5.3. Un service qui prend en compte la requête

Lancer ce programme et rafraîchir la page plusieurs fois (touche F5). Qu’observe-t-on ? Qu’observe-t-on depuis un autre navigateur ?

2.2.5.4. Un lien vers une autre page

Nous sommes maintenant capables de faire un site dynamique comportant plusieurs pages. En effet, en testant self.path, on peut simuler plusieurs pages (en quelque sorte virtuelles car aucun fichier .html ne leur correspond), et même avertir le navigateur si la page requise n’existe pas.

if self.path == "/":
    # page d’accueil
    # Ici le traitement correspondant à la page d’accueil.
elif self.path == "/test.html":
    # une autre page
    # Ici le traitement correspondant à cette autre page.
else:
    # ???

Cette manipulation de code source Python est plus délicate que les précédentes. Si jamais vous ne connaissez pas bien ce langage, vous aurez peut-être besoin de consulter le memento Python. Retenez surtout qu’il n’y a pas d’accolades en Python. C’est l’indentation définit les blocs.

2.2.6. Zoom sur les cookies

2.2.6.1. La technique

Reprendre le deuxième programme Python vu plus haut en observant les dernières lignes de do_GET, à partir de # - lecture et écriture de cookie. Pourquoi le compteur ne fonctionne pas ? Comment le réparer ?

Si besoin, inspecter les cookies avec :

2.2.6.2. La philosophie

Certains sites « polis » préviennent leurs utilisateurs qu’ils vont déposer des cookies, mais ils sont encore très peu nombreux, même si la tendance est à la hausse. Voir par exemple :

En revanche, tous les grands sites, ou les sites de toutes les grandes marques, ont une page dédiée à leur politique d’utilisation des cookies :

Il est possible de configurer son navigateur pour ne pas qu’il stocke ces cookies. À chacun de décider !

Les cookies ne permettent pas au serveur de donner l’identité des visiteurs sans que le visiteur ne l’aie permis, mais est un mouchard, un « témoin » comme on dit outre-Atlantique.

Pour plus de détails :

2.3. PHP avec UWAMP

2.3.1. Présentation

PHP a longtemps été le langage préféré des apprentis développeurs de sites, puisque libre et gratuit et disponible gratuitement chez certains hébergeurs. Il est possible d’utiliser UwAmp qui combine :

2.3.2. Installation et démarrage

UwAmp est une application portable et est donc très facile à installer (si on peut parler d’installation).

Au démarrage, il est possible qu’il y ait un conflit de port.

conflit port 80

S1 S2 Navi (C) uWAMP port 80 autre port

Exercice : Trouver une liste des ports existants, puis établir une liste des 10 plus utilisés.

Pour le régler, il faut ouvrir la configuration du serveur Apache en appuyant sur le bouton correspondant :

bouton apache

Puis changer de port :

configuration apache

Ensuite, si tout est bien configuré, un navigateur pointant vers http://localhost:8000 devrait afficher :

UwAmp works

2.3.3. Modification de la page de démonstration

La page de démonstration est bien sûr à supprimer lorsque l’on développe son site. Le fichier responsable de cette page est dans le sous-dossier www du répertoire de UwAmp.

À vous de modifier ce fichier pour y corriger la faute d’orthographe, en observant au passage les différentes parties de ce fichier et en essayant de reconnaître les parties :

Attention : Un vrai site bien organisé ne devra pas être codé sur un seul fichier car le principe de séparation des tâches (forme, fond, traductions, gestion des différents clients…) ne sera pas appliqué. Ici, pour simplifier la suppression de la page de démonstration (et peut-être pour frimer un peu), elle a été réalisée en un seul fichier.

On note que le serveur n’a pas besoin d’être relancé pour tester les modifications.

2.3.4. Hello PHP

Des squelettes de type Hello world! sont mis à disposition :

À vous de les mettre au bon endroit et d’effectuer la bonne requête pour voir le résultat. En quoi hello.php et hello1.php sont différents ?

D’autres expérimentations plus poussées seront faites plus loin.

3. Sites plus complexes

L’utilisation d’un langage généraliste seul pour développer tout un site fera souvent apparaître des répétitions. Pour ne pas « réinventer la roue », il sera intéressant d’utiliser un cadriciel (ou framework) voire de développer un greffon (ou plugin) sur un SGC, ou système de gestion de contenu (ou CMS pour Content Management System).

Grossièrement, un CMS est une application web qui permet d’afficher du contenu et de modifier ce même contenu en ligne (avec le navigateur).

Si on se remémore la succession des couches, on aurait grossièrement :

Puis, dans le langage de programmation sur le serveur, on écrit une application web, qui peut se décomposer en plusieurs programmes ou non. On peut avoir :

3.1. Avec Python

3.1.1. Cadriciels

Voici une liste non exhaustive de frameworks simples pour Python :

3.1.2. Systèmes de gestion de contenu

Moins simples à mettre en place si on utilise Windows, nous n’étudierons ici que des SGC (CMS) écrits en PHP (voir section suivante).

3.2. Avec PHP

3.2.1. Cadriciels

Voici une liste non exhaustive de frameworks simples pour PHP :

3.2.2. CMS

Ce sont bien sûr des produits idéaux pour le dog-fooding.

3.2.2.1. Dokuwiki

Ce wiki est simple à mettre en place car il ne nécessite pas de base de données. Quelques liens :

L’installation est simple : supprimer le fichier index.php de uWAMP et le remplacer par le contenu dans l’archive que vous avez téléchargée.

Si jamais ce moteur de wiki ne vous convient pas, vous pouvez toujours chercher le vôtre sur l’excellente Wikimatrix.

3.2.2.2. WordPress

WordPress est un moteur de blog qui s’est tellement développé et devenu tellement souple que l’on peut l’utiliser pour des applications très différentes. Quelques liens :

3.2.2.3. Quelques autres CMS généralistes




Christophe Gragnic, grandement inspiré pour certaines sections par
l’application web du site de ressources ISN
et certains travaux de Fabien Le-Bris. L’allégorie du restaurant est de Ronan., le 15/01/2015, 23h24'26".






Page générée le 27/05/2021, 09h06'59" (source).
historique de la page
historique global