4.B - Exemple du Web
On va maintenant développer le fonctionnement du Web. Le Web est une des applications les plus utilisées sur Internet, qui consiste à pouvoir récupérer des documents sur un serveur : des documents qui sont liés entre eux par des liens et qui sont de nature très variée. On peut bien sûr récupérer des pages web (des documents écrits en HTML) à l'aide d'un navigateur web. Dans ces pages web, il est possible d'incorporer des objets de différents types : vidéos, images, documents, liens vers des documents et liens vers d'autres pages web. Nous allons également voir le protocole HTTP. Ce protocole permet de décrire les échanges entre le navigateur Web et le serveur Web. Nous verrons également comment on peut faire du web interactif, c'est-à-dire avec des pages dynamiques dont le contenu dépend des éléments qui ont pu être saisis dans la page précédente qui contient un formulaire.
Qu'est-ce que le Web ?
Le Web repose sur le modèle client-serveur, comme nous l'avons vu dans le cours précédent. C'est-à-dire que le client fait une requête vers le serveur à l'aide d'un protocole applicatif, ici HTTP. Le serveur est en permanence en attente des requêtes provenant des clients. Son rôle est simplement de répondre aux requêtes provenant des clients. De son côté, le navigateur joue le rôle du client : il envoie les requêtes aux serveurs web et sert d'interface avec les humains en affichant les réponses à ces requêtes. On connaît tous les principaux navigateurs Web actuels : Firefox, Internet Explorer, Chrome ou encore Safari.
Le rôle des navigateurs Web est donc de formuler des requêtes vers des pages Web à partir d'une URL qui est saisie et d'afficher le résultat. Il peut également renvoyer des éléments au serveur à partir d'un formulaire.
Le Web est une application Internet qui existe depuis 1994 et qui s'est très rapidement développée en raison de son interface conviviale et surtout de la très grande quantité d'informations disponibles.
Le Web repose sur 3 piliers :
- la notion d'URL,
- le protocole HTTP,
- et les langages du Web (HTML, CSS, JavaScript, PHP, etc.).
Les URL
Pour demander une page Web, on utilise l'URL (Uniform Resource Locator) qui permet d'identifier de manière unique une ressource. D'ailleurs, les URL peuvent aussi servir dans d'autres applications que le Web. Le format des URL est défini dans une norme (RFC 3986).
Une URL se décompose en trois parties : le "comment", le "où" et le "quoi" :
- Le "comment" : c'est le protocole utilisé pour faire la requête. On utilise généralement le protocole HTTP ou HTTPS (qui est sa version sécurisée).
- Le "où" : c'est le nom du serveur ou son adresse IP.
- Le "quoi" : c'est l'objet demandé sur le serveur.
Prenons l'exemple d'URL suivante : http://www.univ-lyon1.fr/licence/lifasr2.html
Le "comment" c'est http://
(on va utiliser le protocole HTTP), le "où" c'est
www.univ-lyon1.fr
(qui est le nom du serveur) et le "quoi" est la page Web
/licence/lifasr2.html
(c'est-à-dire le fichier lifasr2.html
qui se trouve dans
le répertoire /licence
du serveur). Le "comment" se trouve avant le ://
et
le "où" se trouve après le ://
et avant le /
. Le "quoi" se trouve après le
/
.
Dans le "où", on peut également spécifier le port du serveur. Par exemple
http://www.univ-lyon1.fr:80
pour le port 80. Si on ne spécifie pas le port,
c'est le port 80 qui est utilisé par défaut.
Dans le "quoi", on peut également spécifier des paramètres. Par exemple
http://www.univ-lyon1.fr/licence/lifasr2.html?param1=1¶m2=2
pour spécifier
deux paramètres. Dans ce cas, le paramètre param1
a pour valeur 1
et le
paramètre param2
a pour valeur 2
. On peut également ajouter un point
d'ancrage dans le lien. Par exemple
http://www.univ-lyon1.fr/licence/lifasr2.html#ancre
pour spécifier un point
d'ancrage. Dans ce cas, le point d'ancrage s'appelle ancre
et permet de
désigner une partie particulière de la page web.
Le protocole HTTP
Le protocole HTTP (HyperText Transfer Protocol) définit le format et la signification des messages échangés entre le navigateur et le serveur Web. Il va donc spécifier comment sont transmises les requêtes effectuées depuis le client au serveur. Et il va également préciser comment sont faites les réponses. Nous reviendrons un peu plus loin dans ce cours sur le fonctionnement de ce protocole.
Les langages du Web
Les langages du Web sont nombreux. On va simplement en citer quelques-uns. Le premier langage incontournable est le HTML (Hypertext Markup Language). Il permet de décrire le contenu d'une page web et est interprété par le navigateur Web pour afficher la page et les objets incorporés (images, etc.). Il décrit donc la structure du document demandé et permet de définir des styles et les positions pour l'affichage des pages Web.
Ensuite, le CSS (Cascading Style Sheets) est également incontournable. Il permet de définir des styles encore plus précis et complets. Cela concerne tout ce qui est relatif aux couleurs, aux positions des objets et aux formats des différents objets. Ce style garantit que l'affichage se fasse dans de bonnes conditions et soit correctement interprété par les différents navigateurs.
Enfin, on a besoin de langages de programmation, soit côté client, soit côté serveur. Cela permet d'incorporer dans des pages Web des petits programmes qui rendent dynamiques les pages Web. On peut citer par exemple le PHP côté serveur qui va donc s'exécuter à travers le serveur web lorsque la page demandée nécessite de la programmation pour répondre, c'est-à-dire pour construire la page HTML qui va être renvoyée au navigateur. On parle alors de page dynamique. Ce dynamisme peut venir du fait que le client a saisi des données dans un formulaire et que ces données vont être utilisées pour construire la page HTML qui va être renvoyée au client. Un autre cas de figure est lorsque que le serveur doit interroger une base de données pour construire la page HTML.
Les moteurs de recherche ou les sites d'e-commerce sont des exemples de sites qui utilisent des pages dynamiques.
Côté client (dans le navigateur), on a également besoin d'un langage de programmation pour animer les pages web. On peut citer par exemple JavaScript. Typiquement, des morceaux de programmes écrits en JavaScript sont incorporés dans la page web. Ils vont s'exécuter dans le navigateur web et ils vont permettre de faire des animations, de faire des vérifications sur les données saisies dans les formulaires, de faire des calculs, etc.
Nota Bene : Nous revenons plus en détail sur la syntaxe de ces langages dans la suite de ce cours.
Récupération d'une page web par le navigateur
Regardons dans le détail ce qui se passe lorsqu'on saisit une URL dans le navigateur :
- Le navigateur va commencer à analyser cette URL. Il va récupérer le nom du serveur dans l'URL.
- Ensuite, il va faire une requête DNS pour obtenir l'adresse IP du serveur (à partir de son nom).
- Une fois cette adresse IP récupérée, il va établir une connexion TCP vers le port 80 du serveur web (ou vers le numéro de port indiqué dans l'URL). Cette connexion TCP va permettre les échanges entre le navigateur et le serveur web.
- Le navigateur web va ensuite fabriquer la requête HTTP à partir de ce qui est indiqué dans la partie "quoi" de l'URL.
- Cette requête HTTP va être envoyée au serveur web à travers la connexion TCP.
- Ensuite, le serveur traite la requête et retourne une réponse qui contient le contenu de la page demandée.
- Le navigateur Web interprète le code HTML reçu pour afficher une page web avec toute la mise forme.
- Si la page web contient d'autres objets (par exemple des images, des sons, du code JavaScript, ...), le navigateur Web va faire une nouvelle requête HTTP pour chaque objet incorporé dans la page.
- Enfin, il pourra exécuter le ou les programmes JavaScript s'il y en a dans la page.
Fonctionnement du serveur Web
Regardons maintenant ce qu'il se passe côté serveur Web. Le serveur Web est en permanence à l'écoute des requêtes formulées par les clients (qui peuvent être très nombreux). Dès qu'il reçoit une requête, il va la traiter :
- Dans un premier temps, il va vérifier que la requête est correcte.
- Il va vérifier également que le document demandé existe bien. Si le document
demandé n'existe pas, il va répondre
Error 404 : document not found
. - Il va vérifier que l'accès aux documents demandés est possible (par exemple, s'il y a besoin d'une authentification au préalable).
- Enfin, il répond à la requête en renvoyant le document demandé : soit du code HTML, soit des images, soit une feuille de style (CSS), soit un code JavaScript à exécuter sur le client.
- Si le document demandé est une page HTML dynamique (par exemple, une page PHP), le serveur va exécuter le code correspondant pour générer la page HTML qui sera renvoyée au client.
Voici un exemple de requête et de réponse HTTP qui est fait depuis un terminal
avec la commande telnet
:
Dans cet exemple, on se connecte au serveur web sur le port 80 et on lui demande
une page web avec la méthode GET
:
GET /~ogluck/index2.html HTTP/1.1
Host: localhost
Accept: */*
Cette requête suit la norme du protocole HTTP. Elle commence par la méthode
GET
qui indique que l'on veut récupérer un document. Ensuite, on indique le
chemin vers le document demandé. Ici, c'est le document index2.html
qui se
trouve dans le répertoire ~ogluck
du serveur web. Enfin, on indique la version
du protocole HTTP utilisé. Ici, c'est la version 1.1. Pour terminer, on indique
le nom du serveur web qui va traiter la requête (ici, c'est localhost
). Enfin,
on indique le type de document accepté. Ici, on accepte tous les types de
documents. La requête se termine par une ligne vide.
Ce qu'on voit dessous, c'est la réponse du serveur. La première ligne HTTP/1.1 200 OK
indique la version du protocole HTTP utilisée (1.1), le code de retour
(200) et le message associé au code de retour (OK). Ensuite, on a les entêtes de
la réponse. On a par exemple le type de serveur, la date de dernière
modification de la page web, la date de création de la page web, le type de
document, la taille du document, etc. Enfin, on a une ligne vide puis le contenu
de la page web demandée : <html> ... </html>
.
Analyse d'un échange dynamique
Comme nous l'avons vu, le web permet une certaine dynamicité dans les pages web. Pour illustrer cela, nous allons considérer le cas d'une page web contenant un formulaire permettant de définir une requête pour interroger une base de données. Typiquement on peut imaginer une page web permettant d'interroger les horaires et les tarifs pour un trajet en train ou en avion.
Le schéma suivant illustre les différents échanges entre le client et le serveur pour réaliser une requête dynamique.
1) Dans un premier temps l'utilisateur saisit l'URL de la page web contenant le formulaire. Le navigateur web envoie une requête HTTP au serveur web pour récupérer la page web. 2) Le serveur récupère sur son disque dur le fichier HTML contenant le formulaire. 3) Cette page web est ensuite envoyée au navigateur dans une réponse HTTP 4) L'utilisateur remplit le formulaire et le code JavaScript de la page web valide les données saisies. 5) Le navigateur web envoie une requête HTTP avec les données saisies au serveur web. 6) Le serveur web lance le programme. Dans cet exemple, c'est un programme CGI, mais ça pourrait être du PHP. 7) Ce programme s'exécute et va par exemple interroger une base de données. 8) Le gestionnaire de base de données va renvoyer les données au programme. 9) Le programme va générer une page web contenant les données récupérées bien formatées. 10) Une réponse HTTP est envoyée au navigateur web avec la page web contenant les données. 11) Le navigateur affiche le résultat de la requête.
Fonctionnement du protocole HTTP
Nous allons maintenant rentrer un peu plus dans le détail du protocole HTTP.
La version 1.0 de ce protocole est définie par la RFC 1945. La version 1.1 quant à elle est définie par la RFC 9112, Il existe 2 versions plus récentes de ce protocole (2.0 et 3.0), mais elles ne sont pas encore très utilisées.
Le protocole HTTP s'appuie sur des échanges en texte, au-dessus du protocole TCP. Une fois la connexion ouverte, le client envoie une requête au serveur et le serveur répond à cette requête. Une transaction HTTP est simplement une requête suivie d'une réponse.
- Dans HTTP 1.0 : 1 connexion = 1 transaction.
- Dans HTTP 1.1 : 1 connexion = plusieurs transactions (sauf si le client
indique qu'il veut fermer la connexion avec l'entête
Connection: close
).
Le protocole HTTP est un protocole sans état. Cela signifie que le serveur ne garde pas d'information sur les requêtes précédentes. C'est au client de gérer les transactions, c'est-à-dire de savoir si la réponse qu'il reçoit correspond à la requête qu'il a envoyé.
Attardons-nous un peu sur le format des requêtes et des réponses.
Format des requêtes et des réponses
Format des requêtes
Une requête HTTP est composée de 4 éléments :
1) Une première ligne qui indique la méthode, le document demandé et la version du protocole HTTP utilisé. 2) 0, 1 ou plusieurs lignes d'entêtes. 3) Une ligne vide (obligatoire). 4) Éventuellement un corps de la requête.
La première ligne se découpe en 3 parties :
- La méthode HTTP (GET, POST, HEAD, PUT, DELETE, OPTIONS, TRACE, CONNECT, PATCH).
- Le chemin vers le document demandé.
- La version du protocole HTTP utilisé.
Exemple : GET /~ogluck/index2.html HTTP/1.1
Les méthodes les plus classiques sont GET et POST. GET est utilisé pour récupérer un document. POST est utilisé pour envoyer des données au serveur (typiquement les champs d'un formulaire). Les autres méthodes sont bien moins utilisées.
Les entêtes sont des lignes de la forme nom: valeur
. Elles permettent
d'indiquer des informations supplémentaires sur la réponse. Par exemple, on peut
indiquer le type de document envoyé, le type de codage des caractères, etc.
Voici un exemple d'un enchainement de 3 entêtes :
User-Agent: Mozilla/4.0 (compatible;MSIE 6.0;Windows NT 5.1)
Host: www710.univ-lyon1.fr
Accept: image/gif, image/jpeg, */*
- Le premier entête indique que le navigateur utilisé est Internet Explorer 6.0.
- Le deuxième entête indique le nom de domaine du serveur web interrogé.
- Le troisième entête indique que le navigateur accepte des images de type gif ou jpeg, mais également n'importe quel type de document.
Format des réponses
Le format des réponses est assez similaire au format des requêtes. Une réponse HTTP est composée de 4 éléments :
1) Une première ligne qui indique la version du protocole HTTP utilisé, le code de retour et le message associé au code de retour. 2) 0, 1 ou plusieurs lignes d'entêtes, comme pour les requêtes. 3) Une ligne vide (obligatoire). 4) Le corps de la réponse.
Les codes de retour sont des nombres qui indiquent le résultat de la requête :
- 100-199 : message d'information.
- 200-299 : succès de la requête cliente (OK).
- 300-399 : la requête n'est pas directement réalisable, le client doit préciser certaines choses.
- 400-499 : échec de la requête qui incombe au client.
- 500-599 : échec de la requête qui incombe au serveur (par exemple, erreur d'exécution d'un programme sur le serveur).
Voici 3 codes de retour courants :
HTTP/1.1 200 OK
(la requête a été traitée avec succès).HTTP/1.1 404 Not Found
(la ressource demandée n'a pas été trouvée).HTTP/1.1 500 Internal Server Error
(erreur du serveur).
Voici un exemple d'entête de réponse :
Date: Sun, 23 May 2004 17:46:01 GMT
Server: Apache/1.3.28 (Debian GNU/Linux) PHP/3.0.18
Last-Modified: Sun, 23 May 2004 17:42:12 GMT
Content-Length: 90
Content-Type: text/html; charset=iso-8859-1
La première indique la date et l'heure à laquelle la réponse a été générée. La deuxième indique le nom du serveur web utilisé. La troisième indique la date et l'heure à laquelle le document a été modifié pour la dernière fois. La quatrième indique la taille du document en octets. La cinquième indique le type de document et le type de codage des caractères utilisé.
Sessions, champs cachés et cookies
Une chose importante est que HTTP est un protocole sans état. Cela signifie que, entre deux requêtes successives depuis le même navigateur vers le même serveur web, par défaut, le serveur ne conserve aucune information.
Si l'on souhaite avoir quand même un effet mémoire, il faut avoir recours à d'autres mécanismes au-dessus d'HTTP. Cela peut se faire par exemple en utilisant des cookies ou en utilisant des champs cachés dans un formulaire. Grâce à cela, il est par exemple possible de maintenir des sessions PHP.
Une session PHP, c'est un ensemble de données (des variables) qui peuvent être conservées et retrouvées côté serveur lors de chaque nouvelle requête HTTP, à condition d'avoir un identifiant de la session PHP transmis dans la requête HTTP.
Voici un exemple de code HTML définissant un formulaire avec un champ caché :
<!DOCTYPE html>
<html>
<body>
<form action="process.php" method="GET">
<label for="nom">Nom :</label>
<input type="text" name="nom">
<input type="hidden" name="num_cache" value="1024">
<input type="submit" value="Envoyer">
</form>
</body>
</html>
Et voici le rendu associé dans un navigateur.
Ce formulaire contient un champ de type texte et un champ caché. Le champ caché
contient la variable num_cache
qui a une valeur de 1024
. Lorsqu'on clique
sur le bouton Envoyer
, le navigateur va accéder à l'URL
process.php?nom=Olivier&num_cache=1024
. On peut ainsi voir que le champ caché
a été transmis au serveur.
Un cookie est une chaîne de caractères qui fait 4 ko au maximum et qui est
stockée dans le navigateur Web côté client et qui est positionnée par le
serveur. Plus exactement, c'est le serveur qui va demander au navigateur de
stocker cette valeur associée à un cookie. De plus, cette chaîne de caractères
va être renvoyée au serveur dans toutes les requêtes HTTP, sous forme d'entête
Cookie: nom=valeur
.
Ce mécanisme permet donc de stocker des informations côté client et de les récupérer côté serveur, et donc d'avoir un effet mémoire. Typiquement, on peut stocker dans un cookie un identifiant de session PHP, l'identifiant d'un panier d'achat, les préférences d'un utilisateur, etc.
Cela permet également au serveur de se souvenir de toutes les requêtes HTTP qui ont été faites par un même client, et donc de pouvoir générer des pages web en fonction de l'historique des précédentes navigations. Sur des sites marchands, cela permet par exemple de générer des pages web qui contiennent de la publicité ciblée en fonction des produits que l'utilisateur a déjà achetés précédemment.
Connexions persistantes
Il y a plusieurs versions du protocole HTTP. Aujourd'hui, on en est au protocole HTTP 1.1 ou 2.0. La version HTTP 1.1 apporte comme principale nouveauté la notion de connexions persistantes, ce qui signifie que lorsqu'un navigateur web demande une page web, il va également demander les objets incorporés dans la page web, sans devoir refaire une nouvelle connexion TCP pour chaque objet demandé.
Considérons l'exemple d'un navigateur web, qui souhaite afficher la page
index.html
d'un serveur web, incluant 3 objets, un fichier de style et deux
images. Si c'est une connexion persistante, le navigateur web va ouvrir une
connexion TCP vers le serveur web pour demander la page index.html
dans la
première requête HTTP, ainsi que les trois objets incorporés dans la même
connexion TCP. Il y aura donc quatre requêtes-réponses HTTP qui se feront à
l'aide d'une seule connexion TCP, ce qui permet un affichage plus rapide.
Cache web et proxy web
Un cache web est un espace mémoire qui va permettre de stocker des pages web qui ont déjà été demandées. Cet espace mémoire peut être situé directement sur le client web (navigateur) ou sur un serveur web intermédiaire, appelé proxy.
Au sein d'une même organisation, lorsque les mêmes serveurs Web sont très souvent sollicités, l'utilisation d'un proxy web permet d'améliorer les performances et d'obtenir des réponses plus rapides.
En effet, plutôt que de redemander toutes les minutes la même page web au serveur web qui se trouve sur Internet, l'utilisation du proxy de l'organisation (qui se trouve dans le réseau local) va permettre de répondre avec la page web qui se trouve en cache. En outre, cela permet aussi de soulager le serveur Web qui se trouve sur Internet.
Le proxy Web est donc un intermédiaire entre le navigateur Web et le serveur Web. Cela permet également, pour une organisation à travers ce proxy Web, de filtrer éventuellement les pages Web demandées et les réponses obtenues. Typiquement, les filtres peuvent se faire soit sur des URL, soit sur des mots-clés et donc empêcher l'accès à certains serveurs Web par exemple. Le proxy est donc comme une sorte de pare-feu, mais simplement au niveau du protocole HTTP.
Les types MIME
Le type MIME (Multipurpose Internet Mail Extensions) indique de manière standardisée les types de données qui peuvent être transférées sur Internet. C'est un standard qui a été défini par l'IETF et qui est utilisé par le protocole HTTP.
Un type MIME est composé de deux parties : le type et le sous-type. Par exemple, le type text
et le sous-type html
pour un document HTML. Le type image
et le sous-type jpeg
pour une image JPEG...
On retrouve ce type MIME dans les entêtes HTTP. Par exemple, dans l'entête
Content-Type
qui indique le type MIME d'un document. Par exemple :
Content-Type: text/html
ou Content-Type: image/jpeg
ou encore
Content-Type: application/pdf
.
Les langages Web
Afin de programmer un site web, il est nécessaire de maîtriser plusieurs technologies web, ainsi que les langages de base associés : HTML, CSS et JavaScript.
Nota Bene : Nous présentons en Annexe quelques compléments sur le développement Web.
HTML
Commençons par les bases du langage HTML (version 5). Un document HTML débute
par une balise spéciale <!DOCTYPE html>
et se compose de balises (également
appelés éléments) ouvrantes (<html>
) et fermantes (</html>
), qui servent à
décrire la structure du document. Voici donc une page minimaliste :
demo-01.html. Faire Ctrl-U
pour afficher le code
source dans votre navigateur (ou F12
, onglet Sources
).
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Demo Web</title>
</head>
<body>
<h1>Ma Page Web</h1>
<h2>Un Sous-Titre</h2>
<p>Un paragraphe, pour dire que ma page est chouette !</p>
<!-- un commentaire -->
</body>
</html>
En partant de cet exemple minimaliste, il est possible d'enrichir cette une page
HTML en utilisant un large éventail de balises pour structurer son texte :
<h1>
, <h2>
, <p>
, <pre>
, <br>
, ... On peut encore ajouter d'autres
éléments comme une liste (balises <ul>
, <ol>
, <li>
), une image (balise
<img>
), ou un lien vers une page web externe (balise <a>
). Il faut ensuite
compléter sa page avec des meta-informations dans la partie <head>
, comme
par exemple : author, charset, description, keywords, ... Il est
également possible de structurer plus fortement votre document avec les balises
: <header>
, <nav>
, <main>
, <section>
, <footer>
, ...
Notez que pour mettre du texte en évidence, il faut privilégier l'utilisation
des balises sémantiques <em>
et <strong>
, plutôt que <i>
(italic) et <b>
(bold). De manière générale, on s'interdira volontairement d'effectuer de la
mise en forme en changeant par exemple les polices de caractères (<font>
),
l'alignement (<center>
), la couleur, ... Nous allons faire cela de manière
beaucoup plus élégante dans la section suivante avec une feuille de style CSS.
Voici quelques documentations complémentaires :
- Un premier tutoriel : https://developer.mozilla.org/fr/docs/Web/HTML
- Un autre tutoriel : https://www.w3schools.com/html/default.asp
- Les différentes balises : https://developer.mozilla.org/fr/docs/Web/HTML/Element ou https://www.w3schools.com/tags/default.asp
- Spécification : https://html.spec.whatwg.org
CSS
Jusqu'à présent, notre page web a le style par défaut du navigateur. Pour
appliquer notre propre style et ainsi contrôler l'aspect de la page, on intègre
à la page une feuille de style, défini dans le fichier mystyle.css, via la
balise <link>
dans l'en-tête du document (<head>
).
<head>
<meta charset ="utf-8" />
<title> Demo Web </title>
...
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Une feuille de style se décompose en blocs de règles encadrées par des
accolades, s'appliquant à un ensemble d'éléments HTML décrit par un ou plusieurs
sélecteurs séparés par des virgules (selector_1, selector_2 { ... }
).
Considérons par exemple le style mystyle.css ci-dessous :
h2, .important {
color: darkblue;
background: #eeeeee;
}
#labri {
color: red;
font-family: monospace;
font-weight: bold;
font-size: 20px;
}
Et voici un exemple de page demo-02.html, qui utilise
ce style. Dans cet exemple, on change les couleurs du texte et de l'arrière-plan
de tous les éléments <h2>
et de tous les éléments de classe important
(attribut class
). De plus, on modifie le style du texte et sa couleur pour
l'élément avec l'identifiant labri
(attribut id
). Voici un extrait du code
HTML, qui utilise ce style :
<h2>Un sous-titre</h2>
<p>Un paragraphe normal...</p>
<p class="important"> Un paragraphe important...</p>
<p>Un lien avec une style particulier <a href="https://www.labri.fr" id="labri">LaBRI</a>.</p>
Nota Bene : Les couleurs peuvent s'écrire dans plusieurs formats comme
#rrggbb
en hexadécimal ou encore en utilisant des noms de couleur standards
(https://www.w3schools.com/html/html_colors.asp).
Notez que vous pouvez utiliser la balise <div>
comme un simple conteneur pour
appliquez votre style à tout un bloc de HTML. La balise <span>
permet de faire
la même chose à l’inérieur d’une ligne.
Voici quelques documentations complémentaires :
- Un premier tutoriel : https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/CSS_basics
- Les couleurs HTML/CSS : https://www.w3schools.com/colors/default.asp
- Les sélecteurs CSS : https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Selectors
- Une même page et 5 styles : https://www.w3schools.com/css/demo_default.htm.
Pour aller plus loin, vous pouvez mettre en place un layout dans votre
document avec, par exemple, le <header>
dans un bloc en haut, des balises
<section>
répartis sur deux ou trois colonnes au milieu et le <footer>
en
bas (https://www.w3schools.com/css/css_templates.asp).
JavaScript
Une fois la page HTML, les styles CSS et les images chargées, la page (son contenu et son aspect) ne change plus. On dit que la page est statique. Pour ajouter un peu de dynamisme, il est possible d'intégrer à sa page web un programme écrit en langage JavaScript. Considérons un petit exemple, demo-03.html.
<body>
...
<script>
console.log("Hello World!");
</script>
<script src="myscript.js"></script>
</body>
La balise <script>
permet d'injecter du code JavaScript directement dans la
page HTML. Notez que le message Hello World!
va s'afficher dans la console de
votre navigateur web, accessible sous Chrome ou Firefox avec la touche F12.
C'est très pratique pour faire du débogage !
Mais, en pratique, il est préférable d'écrire son code JavaScript dans un
fichier à part, comme par exemple myscript.js. Ce code
va s’exécuter à la fin du chargement de la page et va principalement contenir la
définition de fonctions, qui seront appelées en réaction à des évènements, comme
un clic souris. Dans l’exemple ci-dessous, la première fonction modifie le titre
<h1>
, tandis que la seconde fonction modifie le style d’un élément avec
l’identifiant foo
.
function func1 () {
let elm = document.querySelector("h1");
elm.textContent = "Un Nouveau Titre";
}
function func2 () {
let elm = document.getElementById ("foo");
elm.style.fontWeight ="bold ";
}
Vous noterez que ce code utilise la variable globale prédéfinie document
(qui
représente la page web courante au format
DOM), pour
sélectionner un élément de ce document soir à partir de son type <h1>
, soit à
partir d'un identifiant unique foo
. Il existe d'autres variables globales
ainsi prédéfinies comme window
ou console
.
Afin de réagir à un évènement particulier, il est nécessaire d’affecter le nom
d’une fonction JavaScript à certains attributs spéciaux (onclick
,
onmousemove
, onmouseover
, onload
, onfocus
, ...) des différents éléments.
Par exemple :
<h1 onmouseover="func1()">Un Titre</h1>
<h2>Un Sous-Titre</h2>
<p>Un paragraphe, pour dire que ma page est <span id="foo">chouette</span> !</p>
<button onclick="func2()">Clic</button>
Voici un autre démo très simple tempus/ de code JavaScript qui
utilise la fonction setInterval()
pour afficher périodiquement la date et
l'heure du jour... Notez que le sablier qui tourne n'est pas programmé en
JavaScript, c'est juste un Gif animé.
Voici quelques documentations de base :
- Syntaxe : https://fr.wikipedia.org/wiki/Syntaxe_JavaScript
- Les bases : https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics
- Un tutoriel interactif : https://www.w3schools.com/js/
Pour aller plus loin, vous pouvez vous aider de la documentation complémentaire suivante :
- Langage JavaScript : https://developer.mozilla.org/fr/docs/Web/JavaScript
- Langage : https://javascript.info/
- Des exemples : https://www.w3schools.com/js/js_examples.asp
- Les évènements : https://www.w3schools.com/js/js_events.asp
- Modification de la page : https://developer.mozilla.org/fr/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
- Timer et intervalle : https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals
Utilisation d'un formulaire HTML/PHP
Nous allons maintenant voir comment utiliser un formulaire HTML/PHP pour envoyer des données au serveur Web avec les méthodes GET et POST du protocole HTTP.
Méthode GET
La méthode standard qui est utilisée par le protocole HTTP pour récupérer une page web est la méthode GET. Avec cette méthode, le contenu (qui est normalement après les entêtes) de la requête est toujours vide.
Si on reprend l'exemple du formulaire minimaliste présenté ci-dessus, un clic sur le bouton Envoyer
générera une requête HTTP avec la méthode GET :
GET process.php?nom=Olivier&num_cache=1024 HTTP/1.1
On constate qu'après le nom du script process.php
il y a un point
d'interrogation ?
et ensuite les paramètres du formulaire séparés par un &
:
nom=Olivier&num_cache=1024
.
Ce fonctionnement est pratique, mais il y a une limite dans la taille des URL qui dépend du navigateur et du serveur. En général, on ne dépasse pas 2000 caractères.
Donc, si on souhaite par exemple envoyer un fichier, la méthode GET ne convient pas.
Méthode Post
Dans ce cas-là, on préférera la méthode POST qui permet également de transmettre les données d'un formulaire, non pas dans l'URL, mais dans le contenu de la requête HTTP (après les entêtes, de manière analogue aux réponses HTTP) :
POST process.php HTTP/1.1
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0
Host: localhost
Accept: */*
Content-Type: application/x-www-form-urlencoded
Content-Length: 27
nom=Olivier&num_cache=1024
Encodage des données
Que ce soit avec la méthode GET ou avec la méthode POST, les paramètres sont transmis au format URL encodé. Cela signifie que les caractères spéciaux sont remplacés pour respecter la syntaxe des URL.
Ainsi, les caractères non-alphanumériques sont remplacés par leur code
hexadécimal précédé du caractère %
. Par exemple, le caractère +
est remplacé
par %2B
et le caractère &
est remplacé par %26
.
Récupération des données d'un formulaire
Dans un script PHP, on récupère les données d'un formulaire en utilisant deux
tableaux préremplis : $_GET
et $_POST
que l'on peut utiliser selon la
méthode employée. Ces tableaux sont indexés par le nom des champs du formulaire.
Par exemple, si on a un champ de type text
avec le nom nom
et un champ de
type hidden
avec le nom num_cache
, on peut récupérer les données du
formulaire :
$nom = $_GET['nom'];
$num_cache = $_GET['num_cache'];
// ou bien
$nom = $_POST['nom'];
$num_cache = $_POST['num_cache'];
Exemple de formulaire
Voici un exemple compteur.php
de formulaire en HTML/PHP qui contient un
compteur qui est incrémenté à chaque fois qu'on clique sur le bouton +1
. On
utilise la méthode GET pour transmettre les données du formulaire.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>compteur.php </title>
</head>
<body>
<form name="compteur" method="get" action="compteur.php">
<?php
if (isset($_GET['compteur']))
$cpt = $_GET['compteur'];
else
$cpt = 0;
$cpt = $cpt + 1;
// Pour propager la nouvelle valeur de cpt vers la page suivante
echo '<input type="hidden" name="compteur" value="'.$cpt.'"/>';
echo "Le compteur vaut $cpt.\n";
?>
<input type="submit" name="action" value="+1" />
</form>
</body>
</html>
Ce compteur peut donc être transmis de page en page, en utilisant toujours la
même page web, c'est-à-dire que cette page se rappelle elle-même. Pour
transmettre la valeur du compteur de page en page (à chaque fois qu'on clique
sur le bouton), il faut récupérer l'ancienne valeur du compteur, l'incrémenter
côté serveur et la remettre dans la page web. Cela se fait avec un champ caché
(hidden
) où la valeur du compteur est stockée. Vous avez donc ici le code PHP
qui permet de faire cela. Ce code est remplacé à l'exécution sur le serveur par
l'insertion dans le formulaire du champ avec la bonne valeur du compteur.
On peut faire la même chose avec la méthode POST
:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>compteur.php</title>
</head>
<body>
<form name="compteur" method="post" action="compteur.php">
<?php
if (isset($_POST['compteur'])) {
$cpt = $_POST['compteur'];
} else {
$cpt = 0;
}
$cpt = $cpt + 1;
// Pour propager la nouvelle valeur de cpt vers la page suivante
echo '<input type="hidden" name="compteur" value="'.$cpt.'"/>';
echo "Le compteur vaut $cpt.\n";
?>
<input type="submit" name="action" value="+1" />
</form>
</body>
</html>
Les seuls changements sont les suivants :
- On récupère la valeur du compteur dans le tableau
$_POST
au lieu de$_GET
. - On utilise la méthode
POST
au lieu deGET
pour le formulaire.
Autre exemple de formulaire
On présente ici tous les éléments qu'on peut rencontrer dans un formulaire, c'est-à-dire avec tous les types de champs.
<html><head><title>Éléments d'un formulaire</title>
</head><body>
<form name="f1" method="POST" action="4-form.html">
<input name="email" value="Entrez votre email ici" size="30" maxlength="50" />
<input type="password" name="pass" value="Entrez votre passwd ici" size="8" maxlength="8" /><br />
<input type="checkbox" name="cours1" value="1" checked />HTML
<input type="checkbox" name="cours1" value="2" checked />JS
<input type="checkbox" name="cours1" value="3" />CGI<br />
<input type="radio" name="cours2" value="1" />HTML <input type="radio" name="cours2" value="2" checked />JS
<input type="radio" name="cours2" value="3" />CGI<br />
<input type="submit" name="s" value="login" /> <input type="submit" name="s" value="logout" />
<input type="reset" name="raz" value="Effacer" /><br />
<input type="hidden" name="MAX_FILE_SIZE" value="1048576" />
<input type="file" name="fichier" value="Parcourir" /><br />
<textarea name="t1" rows="3" cols="40">Entrez vos remarques ici</textarea>
<select name="pop">
<option value="v1" />1
<option value="v2" selected />2
<option value="v3" />3
</select>
<select name="mul" size="3" multiple>
<option value="v1" />1
<option value="v2" selected />2
<option value="v3" selected />3
<option value="v4" />4
</select>
</form>
</body>
</html>
Graphiquement, le formulaire ressemble à ceci :
Et en dessous, on voit à quoi ressemble la transmission de ce formulaire à l'aide de l'inspecteur du navigateur.
Voici les différents types de champ :
INPUT
: champ de saisie de textePASSWORD
: champ de saisie de texte masquéCHECKBOX
: case à cocher, avec pour chaque case un nom et une valeurRADIO
: bouton radio. Cela fonctionne comme les cases à cocher, mais on ne peut cocher qu'une seule case à la foisSUBMIT
: bouton de validation du formulaire qu'on a déjà vu. Il permet de transmettre les données du formulaire à la page cible avec la méthodeGET
ouPOST
RESET
: bouton qui permet de réinitialiser les champs du formulaire. Il remet les champs à leur valeur par défautHIDDEN
: champ caché, qui permet de transmettre des informations entre les pagesFILE
: champ de saisie le chemin d'un fichier. Ce champ permet de transmettre un fichier depuis le client au serveur. Il faut utiliser la méthodePOST
pour pouvoir transmettre un fichier.TEXTAREA
: champ de saisie de texte sur plusieurs lignesSELECT
: liste déroulante, avec pour chaque élément un nom et une valeur
Pour afficher tous les champs d'un formulaire avec un code PHP, il suffit de faire une boucle sur le tableau $_GET$
ou $_POST$
avec le mot-clé foreach
:
// afficher la chaîne CGI en méthode GET
echo $_SERVER['QUERY_STRING'];
echo "<br />";
// afficher tous les champs transmis en méthode GET
foreach ($_GET as $name => $value) {
echo "$name = $value<br />\n";
}
// afficher tous les champs transmis en méthode POST
foreach ($_POST as $name => $value) {
echo "$name = $value<br />\n";
}