Les échanges d'information sur le web sont dissymétriques.
L'utilisateur face à sa machine (ordinateur, mobile) est du côté client de l'échange. L'autre extrémité constitue le côté serveur. Client et serveur échangent de l'information suivant un protocole (ensemble de règles) appelé HTTP.
Les mots client et serveur s'appliquent aussi bien à une machine qu'aux logiciels qu'elle fait tourner.Une machine peut jouer le rôle de serveur parce qu'elle exécute des logiciels serveurs.
Le navigateur web constitue le logiciel client le plus fréquemment utilisé côté client.
Le navigateur web (ou autre logiciel client web) envoie au serveur des demandes appelées requêtes HTTP.
Les informations demandées (ressources) sont contenues dans les réponses envoyées par le serveur (à condition que le serveur soit capable de les fournir).
Pour charger une page web, qui peut être composée de différents éléments (texte, images, styles, scripts...) le navigateur envoie une première requête lui permettant d'obtenir le code source de la page, puis si nécessaire de nouvelles requêtes pour demander les autres ressources mentionnées dans ce code source.
Le navigateur assemble ensuite les différentes ressources d'après les instructions fournies dans le code source de la page web.
Le code source est contenu dans un fichier html au format texte pur. Il utilise un ensemble de langages spécifiques, que le navigateur doit interpréter pour afficher correctement le contenu.
Langages interprétés par le navigateur
Le code source d'une page web est écrit en utilisant les trois langages suivants :
Le langage HTML
Ce langage permet de décrire la structure de la page web, considérée comme un assemblage ordonné de différents éléments : texte, images, videos...
HTML signifie "HyperText Markup Language". Le qualificatif HyperText renvoie à la possibilité de relier différents documents entre eux, via des liens hypertexte cliquables.
"Markup" désigne la technique de description de contenu par des "balises" incluses dans le document.
Le langage HTML est le plus ancien langage du web. Les descripteurs HTML d'une page sont la base sur laquelle viennent éventuellement s'appuyer les deux autres langages CSS et Javascript
Le langage CSS
Le langage CSS permet de décrire la mise en forme et la mise en page du contenu HTML (couleurs, polices de caractères, marges...).
Le langage Javascript (côté client)
Contrairement au HTML et au CSS qui sont des langages de description, Javascript est un langage de programmation. Le navigateur est capable d'exécuter les instructions données en Javascript. Le Javascript côté client est le principal outil pour l'interaction entre l'utilisateur et la page Web.
Les langages de description
Description en HTML et CSS
Exemple en HTML seul
On montre ci-dessous un exemple de contenu de page Web, avec le code source correspondant. Vous pouvez aussi visualiser l'un et l'autre en cliquant sur ce lien pour ouvrir la page dans le navigateur, et utiliser la combination de touches Ctrl+U pour visualiser le code source.
Le contenu affichable Le code source
On peut observer la différence entre le contenu affichable et le code source, dans lequel le code HTML est visible.
On constate que le code HTML, qui s'intercale au milieu du contenu affichable, est toujours encadré par les caractères "<"et ">".
. Un élément de code HTML entre "<" et ">" est appelé balise . Certaines balises s'emploient isolément, par exemple les balises <br> et <img>, une balise unique suffisant dans ces deux cas à désigner l' élément du document (saut de ligne et image).
Cependant la plupart des balises s'emploient par paire, sous la forme d'une balise "ouvrante" et d'une balise "fermante" identique à un / près, comme par exemple <div> et </div> ou <body> et </body>. Elles délimitent alors un élément dans le document. Différents éléments être emboités les uns dans les autres, suivant une structure arborescente.
En ouvrant la page dans le navigateur puis en utilisant la combinaison de touches Ctrl+Maj+C, on peut mieux visualiser l'arborescence des éléments et la correspondance entre élément et code.
Les indications en vert encadrées par "<!--" et "-->". sont des commentaires du code html.
Une page Web est composée d'éléments HTML de divers type. Dans le code source, chaque élément est délimité par des balises encadrées par les symboles "<" et ">" et contenant le code HTML. Le code html contenu dans une balise commence toujours par l'identifiant du type de l'élément (image, paragraphe ou division d'un texte, élément de liste, lien ....) Il peut également définir un certain nombre de propriétés pour l'élément, en fixant des valeurs pour ses attributs, sous la forme attribut=valeur ( la valeur est de préférence encadrée par des guillemets, simples ou doubles).
Selon son type, un élément HTML peut être
soit entièrement décrit par une seule balise : on parle alors d'élément vide. C'est le cas par exemple des images
soit encadré par une balise ouvrante et une balise fermante. La balise ouvrante contient l'identifiant de type et les attributs, la balise fermante contient uniquement l'identifiant de type précédé de "/". Le contenu de l'élément, entre les deux balises, est le plus souvent du texte qui apparaîtra dans la page Web. Des éléments non vides peuvent être emboîtés les uns dans les autres.
On constate que le HTML permet une certaine mise en page (titres, paragraphes, sauts de ligne) ainsi qu'un peu d'interactivité (lien hypertexte) mais cela demeure limité. Aux débuts du web, HTML disposait aussi de fonctionnalités de mise en forme des éléments mais actuellement toutes ces fonctionnalités sont déléguées à CSS.
La mise en page du code source lui-même (saut de ligne, indentations....) n'a aucune importance, elle ne sert qu'à faciliter sa lecture. Toute la mise en page du contenu affichable doit être explicitement décrite en HTML et/ou CSS
Styles avec CSS
Cet exemple montre comment l'utilisation de règles CSS permet de modifier l'aspect du document précédent. On peut voir ci-dessous côte à côte le code source et son résultat?
En examinant le code source on peut constater qu'un attribut nommé style a été ajouté dans la balise des éléments dont l'aspect a changé. Les propriétés de style de l'élément sont décrites dans la valeur de l'attribut style..
Par exemple <div style="background-color:#eeeeff;font-size:14pt;"> pour modifier la couleur de fond (background-color) et la taille (font-size) de l'élément div concerné.
Chaque indication de style est composée d'un nom de propriété (ex : color pour désigner la couleur de texte) suivie de ':' et de la valeur à donner à cette propriété. Elle se termine par un point-virgule. Plusieurs propriétés peuvent être modifiées, comme c'est le cas pour l'élément div cité ci-dessus, ainsi que, dans l'exemple, pour l'élément image img.
Cet autre exemple illustre une autre façon d'inclure du style dans une feuille, à partir de l'en-tête du document, dans lequel on ajouté un élément HTML de type style :
décrit la mise en forme qui va concerner l'élément de type titre de premier niveau, entouré par les balises <h1> et </h1> dans le code source. Ses propriétés CSS, séparées par des ';', sont données entre accolades.
Il est à noter que si la page contient plusieurs éléments de type h1, la mise en forme s'appliquera à tous ces éléments : on dit qu'on a défini une règle CSS que devront suivre tous les éléments du type désigné.
s'appliquera aux éléments de type div de la page, mais à condition qu'ils appartiennent en plus à la "classe" qu'on a appelé 'special'. Cette règle CSS ne concerne donc dans notre document que l'élément indroduit par la balise <div class='special'> dans le code source.
Une page web peut aussi utiliser des règles CSS définies dans un fichier externe de type css.
La mise en forme du contenu d'une page Web est décrite par du code CSS sous la forme d'une série d'indications propriété : valeur séparées par des points-virgules.
Ce code peut être écrit :
soit comme valeur de l'attribut style d'un élément particulier : le style ne s'applique alors qu'à cet élément
soit par une règle CSS définie dans un élément HTML style ou dans un fichier style externe.
Entraînement et références
La documentation des langages du Web est de nos jours centralisée sur le site de la fondation Mozilla , et très largement traduite en Français. Outre la documentation, on y trouve également de très nombreux tutoriaux pour tout niveau, dont nous allons profiter.
Ces tutoriaux incluent des exercices à réaliser directement dans la page web. Cependant certains exercices demandent de créer une page web autonome. Pour cela vous pouvez utiliser un éditeur de texte pur comme Notepad++ disponible sur le réseau. En plus de permettre de lire et d'éditer le code des pages HTML, il fournit quelques outils pratiques: coloration syntaxique qui permet de distinguer le code (en couleurs) du contenu (en noir), propositions de complétion... Pour profiter de la coloration syntaxique il faut enregistrer le fichier avec l'extension ".html". Le menu "exécution" permet d'ouvrir le fichier dans un navigateur pour voir ce que produit le code.
Pour CSS
Une connaissance approfondie de CSS pour la NSI, cependant pour compléter la rapide présentation précédente vous pouvez consulter cette page et consulter également cette page pour comprendre les différentes possibilités pour coder une couleur. .
Inclusion de scripts
En plus de la description de contenu en HTML/CSS, le code source d'une page web peut contenir des instructions écrites en langage de programmation Javascript, que le navigateur sait interpréter. Cela permet de modifier dynamiquement la page en réponse aux actions de l'utilisateur ou à d'autres évènements.
Les gestionnaires d'évènement
Le navigateur va réagir à certains des évènements concernant la page Web en exécutant les blocs de code (scripts) appropriés.
Un script qui s'exécute en réponse à un évènement est appelé "gestionnaire d'évènement" (en anglais : "event handler") et la convention usuelle est de lui attribuer un nom commençant pas "on" suivi du nom de l'évènement concerné. Chacun des éléments HTML d'une page Web peut être une source d'évènement.
Exemple : donner à un élément HTML la capacité de répondre à des actions de la souris
Modification de contenu
Ouvrir dans Notepad++ le fichier exemple2 déjà vu précédemment.
Modifier la ligne
<div> première division </div>
de la façon suivante:
<div onclick="this.innerHTML='et voilà le travail';"> première division</div>
.
Utiliser le menu Exécuter/ouvrir dans Firefox de Notepad++ pour voir le résultat.
Cliquer sur la ligne "première division" transforme ce texte en "et voilà le travail".
Analyse du code Javascript ajouté :
Ce code a été ajouté dans la balise ouvrante d'un élément HTML, qui sera donc la cible des évènements dont on va définir ou redéfinir le traitement.
onclick="..." signifie qu'on va définir (ou redéfinir) la façon dont l'élément cible va répondre au clic de souris. Les actions qui devront être effectuées (gestionnaire d'évènement) seront décrites entre les guillemets.
innerHTML désigne le contenu HTML d'un élément, qui apparaît entre la balise ouvrante et la balise fermante. Ici on a écrit this.innerHTML pour spécifier qu'on s'intéresse au contenu HTML de l'élément cible (this).
On redéfinit la valeur de ce contenu en lui affectant une chaîne de caractères "et voilà le travail". En Javascript les chaînes de caractères peuvent être entourées par "" ou '' mais ici les "" sont déjà utilisés pour encadrer le gestionnaire d'évènement. Le principe est le même qu'en Python : il faut alterner soigneusement les "" et '' !
Le point-virgule marque la fin d'une instruction Javascript.
Modification de style
Il est possible de modifier dynamiquement non seulement le contenu mais aussi le style de l'élément.
Modifier le code précédent pour ajouter une nouvelle instruction au gestionnaire d'évènements :
<div onclick="this.innerHTML='et voilà le travail';this.style.color='#ff4499';"> première division </div>
Changement de classe de style
Il est aussi possible de modifier dynamiquement la classe de style d'un élément.
<div onclick="this.innerHTML='et voilà le travail';this.className='special';"> première division </div>
Autres évènements souris
A la place de onclick vous pouvez essayer ce que donnent onmouseover, onmouseenter, onmouseout
Notions de base en Javascript
Javascript est un langage complet permettant par exemple d'effectuer des branchements conditionnels :
<div onclick="
if (this.className==''){
this.className='special';
}
else {
this.className='';
}
">
ce texte changera de style chaque fois que l'on cliquera dessus
</div>
dont l'effet peut être testé ci-dessous en cliquant sur le texte :
Ce texte changera de style chaque fois que l'on cliquera dessus
On peut aussi écrire et appeler des fonctions :
<!doctype html>
<html>
<head>
<title> exemple de page simple </title>
<meta charset="utf-8">
<script>
function change(cible){
cible.innerHTML='et voilà le travail';
cible.style.backgroundColor='#ffffaa';
cible.style.margin='4em';
cible.style.padding='0 10em';
cible.style.fontWeight='bolder';
}
</script>
</head>
<body>
<div onclick="change(this);"> division cliquable</div>
</body>
</html>
à tester dans le cadre ci-dessous :
On remarque que le code de la fonction est contenu dans un élément HTML script , entre deux balises <script> et </script>. Un élément script peut se placer n'importe où dans le code source.
Un élément script peut aussi être utilisé pour importer du javascript à partir d'un fichier externe, de type js, en donnant le nom de ce fichier comme attribut 'src' d'un élément script vide. Par exemple si le code source d'une page contient l'élément <script scr='monfichierscript.js'><script> alors le code javascript contenu dans le fichier 'monfichierscript.js' sera chargé et éventuellement exécuté lors du chargement de la page.
En javascript la fin d'une instruction est signalée par un point-virgule (une instruction peut s'écrire sur plusieurs lignes).
Un bloc d'instructions est délimité par des accolades { }.
L'indentation est facultative.
Une expression dont on teste la valeur logique doit être écrite entre parenthèses.
Dans une page web le code javascript peut figurer dans les gestionnaires d'évènement des éléments, ou comme contenu d'éléments script . Il peut également être importé depuis un fichier javascript externe.
Manipulation d'éléments Web en Javascript
L'identifiant d'élément
Il est possible d'attribuer à chaque élément HTML un identifiant grâce à l'attribut id . Par exemple
<div id="paragraphe1"> Voici un élément qui n'est plus anonyme </div>
Il est alors possible de faire référence à cet élément dans un script de la page, en utilisant la fonction document.getElementById()
Par exemple
<!doctype html>
<html>
<head>
<title> exemple de page simple </title>
<meta charset="utf-8">
<style type="text/css">
div{
font-size:18pt;
color:darkblue;
padding:1em;
}
</style>
</head>
<body>
<div onclick="
cible=document.getElementById('changement');
cible.innerHTML='et ça a changé !';
cible.style.color='magenta';
"> Cliquer ici</div>
<div id="changement"> Il faut que ça change ! </div>
</body>
</html>
à tester dans le cadre ci-dessous :
Explication du code du gestionnaire d'évènement onclick :
cible=document.getElementById('changement');
cible.innerHTML='et ça a changé !';
cible.style.color='magenta';
La première ligne crée une variable appelée cible et lui affecte le résultat de l'appel de document.getElementById('changement') . Autrement dit, après l'exécution de cette ligne, le mot "cible" désignera dans le script l'élément dont l'identifiant est "changement".
La ligne suivante change le contenu de cet élément.
La dernière ligne change son style.
On reconnaît l'opérateur . déjà rencontré en Python, qui exprime une appartenance de ce qui le suit à ce qui le précède (par exemple, cible.style pour désigner le style de l'objet appelé cible)
Ensemble d'éléments
Les éléments HTML peuvent aussi être ciblés en fonction de leur type, à l'aide de la fonction document.getElementsByTagName(), ou en fonction de leur classe de style à l'aide de la fonction document.getElementsByClassName(). Chacune de ces fonctions renvoie un tableau contenant tous les éléments concernés. Comme dans une liste python, chaque élément peut alors être récupéré depuis ce tableau à l'aide de son index.
Par exemple le code ci-dessus permet de changer les propriétés de tous les éléments de type div.
<!doctype html>
<html>
<head>
<title> exemple de page simple </title>
<meta charset="utf-8">
<style type="text/css">
div {
font-size:14pt;
color:darkgreen;
margin:1em;
}
</style>
</head>
<body>
<p style='background-color:yellow;'
onmouseover="
liste=document.getElementsByTagName('div');
liste[0].style.color='magenta';
liste[1].style.color='blue';
liste[2].style.color='grey';
"
onmouseout="
liste=document.getElementsByTagName('div');
for (elt of liste){
elt.style.color='green';
}
"
> Passer la souris ici </p>
<div> Elément 1 </div>
<div> Elément 2 </div>
<div> Elément 3 </div>
</body>
</html>
à tester dans le cadre ci-dessous en passant la souris sur la ligne à fond jaune :
Boîtes de dialogue
Javascript permet d'ouvrir trois sortes de boîte de dialogue permettant d'obtenir une réponse de l'utilisateur. Elles ont pour caractéristique commune de bloquer l'accès à la page web en attendant une action de l'utilisateur.
boîte de dialogue alert : elle permet de communiquer une information à l'utilisateur.
boîte de dialogue confirm : elle permet à l'utilisateur de donner une réponse affirmative ou négative.
boîte de dialogue prompt : elle permet à l'utilisateur de fournir une réponse de type texte.
Pour chacune de ces boîtes, l'ouverture se fait à l'aide d'une fonction Javascript, dont la valeur de retour code la réponse éventuelle de l'utilisateur dans le cas des boîtes confirm et prompt. Les paramètres de la fonction permettent de personnaliser la boîte de dialogue.
Exemple : le code source ci-dessous crée une page HTML trois éléments div d'aspect personnalisé grâce à un style, un clic sur chacun d'eux permet d'ouvrir un des types de dialogue.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type='text/css'>
div{
border:solid 1px #000000;
background-color:#ddeeff;
margin:10px;
width:15em;
}
</style>
</head>
<body>
<div onclick="alert('Ceci est une boite alert');">
Cliquer ici pour ouvrir une boite alert
</div>
<div onclick="confirm('Ceci est une boîte confirm, êtes vous d\'accord ?');">
Cliquer ici pour ouvrir une boite confirm
</div>
<div onclick="prompt('Ceci est une boite prompt','réponse suggérée');">
Cliquer ici pour ouvrir une boite prompt
</div>
</body>
</html>
ce qui donne :
L'allure et le contenu des boîtes de dialogue dépendent aussi du navigateur utilisé. Si vous testez l'effet du code dans le cadre ci-dessus sous Firefox, vous pourrez observer que si vous ouvrez des boîtes de dialogue à intervalle trop rapprochés, Firefox rajoute une case à cocher permettant de bloquer l'ouverture de nouvelles boîtes de dialogue. Avec d'autres navigateurs, vous pourrez observer que le nom de la page web ayant ouvert la boîte de dialogue est indiqué dans celle-ci.
Une utilisation logique des fonctions confirm et prompt conduit à utiliser leurs valeurs de retour. Par exemple,
le code ci-dessous remplace le contenu de l'élément div sur lequel on a cliqué pour ouvrir la boîte, par la réponse de l'utilisateur dans cette boite.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type='text/css'>
div{
border:solid 1px #000000;
background-color:#ddeeff;
margin:10px;
width:15em;
}
</style>
</head>
<body>
<div onclick="this.innerHTML=confirm('Ceci est une boîte confirm, êtes vous d\'accord ?');">
Cliquer ici pour ouvrir une boite confirm
</div>
<div onclick="this.innerHTML=prompt('Que pensez vous des boîtes prompt ?','Elles sont top');">
Cliquer ici pour ouvrir une boite prompt
</div>
</body>
</html>
A tester dans le cadre ci-dessous :
La valeur de retour de prompt est une chaîne de caractères tandis que celle de confirm peut être utilisée comme un booléen. Par exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type='text/css'>
div{
border:solid 1px #000000;
background-color:#ddeeff;
margin:10px;
width:15em;
}
</style>
</head>
<body>
<div onclick="if (confirm('C\'est confirmé ou \r\n c\'est annulé ?! \r\n Réfléchissez bien '))
{this.innerHTML='Vous avez confirmé ! ';}
else
{this.innerHTML='Vous avez annulé! ';}
">
Confirmer ou annuler, that is the question ...
</div>
<div onclick=
"this.innerHTML=
'Les boîtes prompt sont '+prompt('Comment trouvez-vous les boîtes prompt','top')
;">
Cliquer ici pour donner votre avis sur les boîtes prompt.
</div>
</body>
</html>
A tester dans le cadre ci-dessous :
On remarque au passage que le caractère d'échappement \ , et les codes spéciaux \r\n pour le saut de ligne, s'utilisent, à l'intérieur des chaînes de caractères Javascript, exactement comme en Python (et, de fait, comme dans beaucoup d'autres langages de programmation).
Formulaires
Les formulaires sont à l'origine conçus pour permettre à l'utilisateur (côté client, donc) d'envoyer des données au serveur. Ils peuvent contenir différents types d'éléments, permettant à l'utilisateur de saisir du texte, un mot de passe, de faire un choix dans une liste....
Les types input
La balise < input> permet de créer une grande variété de champs différents, grâce à son attribut "type". C'est une balise vide, il n'y a donc ni contenu ni balise fermante (pas de </input> ).
Quelques exemples de type usuels d'éléments input :
Le gestionnaire onclick ouvre dans cet exemple une boîte alert. Le nom saisi par l'utilisateur dans l'élément input dont
l'identifiant est ton_nom est récupéré grâce à l'instruction document.getElementById('ton_nom').value, pour être inséré dans le texte de la boîte alert.
Il existe une grande variété de types possibles pour input, plus ou moins bien pris en charge par les navigateurs car beaucoup sont d'introduction relativement récente en HTML.
On peut citer en particulier les types color, number et range qui sont relativement bien supportés par les navigateurs.
<input type='color' id='sel_choix_fond'
onchange="document.getElementById('aperçu').style.backgroundColor=this.value;">
Choisis ta couleur de fond
<p>
<input type='range' id='taille' value='12' min='6' step='2' max='28'
onchange="document.getElementById('aperçu').style.fontSize=this.value+'pt';">
Choisis la taille des caractères <br>
<div id="aperçu"> Et voilà ce que ça donne </div>
Quelques rares contrôles de formulaire ne font pas appel à input. Ce ne sont pas des éléments vides, c'est à dire qu'ils attendent tous une balise fermante. Il s'agit des types <textarea> , qui permet à l'utilisateur de saisir plusieurs lignes de texte,
< button> qui donne un résultat similaire à celui de <input type=button> et <select qui permet d'afficher une liste de choix possibles (ce dernier élément est censé être obsolète mais son remplaçant utilisant input est encore très mal géré par les navigateurs.)
Jusqu'à présent nous avons vu que les différents contrôles de formulaire permettent à l'utilisateur de donner des informations utilisables localement par la page Web elle-même, sous la forme de l'attribut 'value' de chacun des contrôles de formulaire.
Il est aussi possible (et c'est leur destination première) d'utiliser ces contrôles pour transmettre les informations fournies par l'utilisateur à un serveur distant, qui pourra en effectuer le traitement.
Pour cela il faut inclure les contrôles de formulaire dans un élément HTML form (pour 'formulaire'), entre <form> et </form>. L'élément form constitue une sorte d'"enveloppe" virtuelle qui va permettre d'indiquer à quoi et comment les données vont être envoyées. Il faut aussi ajouter dans l'élément form un élément input de type "submit" qui permettra de soumettre les données du formulaire, c'est à dire de les envoyer au serveur pour traitement.
Lorsqu'on clique sur le bouton submit, le navigateur envoie les données du formulaire vers le serveur via une requête HTTP. Les données peuvent être incluses dans la requête suivant deux méthodes différentes, correspondant chacune à un type de requête : requête GET ou requête POST.
Requête GET
Le type 'get' est le type par défaut des requêtes HTTP. Comme son nom l'indique, une requête GET a pour but d'obtenir des données du serveur, ce qui représente l'essentiel de l'activité du navigateur.
Lorsqu'un formulaire est soumis en utilisant une requête GET, les données sont incorporées dans l'URL (adresse web visible dans la barre d'adresse).
Comparez par exemple l'adresse web de la page actuelle avant et après avoir complété le formulaire ci-dessous et cliqué sur 'Envoyer' (bouton submit).
Si par exemple on a complété la ligne 'Nom' avec 'Tamarin' et la ligne 'Prénoms' avec 'Casimir Louis', après qu'on ait cliqué sur 'Envoyer' (bouton produit par le code <input type=submit> ) on constate que l'adresse web est suivie de '?nom=Tamarin&prenom=Casimir+Louis'.
La méthode utilisée pour envoyer le formulaire est indiquée dans la balise <form> en début de formulaire : method='get'.
Lorsque des données du formulaire sont envoyées par la méthode GET, ces données sont ajoutée à la suite de l'adresse web (URL) destinataire, précédées d'un point d'interrogation et séparées par des éperluettes &. Chaque donnée est identifiée à l'aide de l'attribut 'name' du contrôle de formulaire dont elle provient.
Dans cet exemple, aucun destinaire n'a été indiqué pour les données du formulaire, donc elles sont par défaut envoyées à la page courante, et comme rien n'a été prévu dans cette page pour utiliser ces données, il ne se passe rien de particulier.
Attribut 'action' et langage php
Pour spécifier un destinataire pour les données du formulaire, on utilise l'attribut 'action' de la balise <form>. Le destinaire est un fichier situé sur le serveur, qui sera en principe capable de faire quelque chose à partir des données du formulaire.
Le code envoie maintenant le contenu du formulaire à un fichier appelé 'traite_g.php', situé sur le serveur. Cliquer sur 'Envoyer' mène alors sur une nouvelle page web. L'adresse (URL) visible dans la barre d'adresse du navigateur est celle du fichier 'traite_g.php' suivie des données du formulaire.
En visualisant le code source de la page affichée,(Ctrl-U) on peut constater qu'il est bien écrit en html, et qu'il inclut les données du formulaires, ce qui montre qu'il a été créé lors de l'envoi du formulaire.
Le serveur a ici fait davantage que fournir simplement des fichiers préexistants demandés par le navigateur : il a exécuté une commande en utilisant les paramètres fournis par la requête.
Vous pouvez le vérifier en modifiant les valeurs des paramètres de la requête directement dans la barre d'adresse du navigateur, sans passer par le formulaire : vous obtiendrez une page web générée sur la base de ces nouvelles valeurs;
Le code source du fichier destinataire 'traite_g.php' est le suivant :
On peut constater que ce code source est composé de HTML, CSS et Javascript, mais également de code php qui est la partie encadrée par <?php et > . Ce code php ne peut être interprété et exécuté que sur un serveur web supportant le langage php. Si vous copiez ce code dans un fichier sauvegardé sur votre ordinateur, et que vous ouvrez ce fichier avec le navigateur, vous verrez seulement le bouton (codé en html).
Un langage exécuté sur le serveur a la possibilité de créer et de modifier des fichiers sur ce serveur. Lorsqu'un site web veut pouvoir conserver des données concernant ses visiteurs, il doit donc faire appel à php (ou à un autre langage exécuté côté serveur).
La méthode POST
Lorsque les données d'un formulaire sont envoyées par la méthode POST au lieu de la méthode GET, elles sont encapsulées dans le corps de la requête (alors que le corps d'une requête GET est vide). Cela présente l'avantage de permettre d'envoyer des données plus volumineuses, et de manière plus discrète, qu'avec la méthode GET qui les envoie dans l'URL.
Après avoir cliqué sur Envoyer, vous pouvez vérifier qu'aucune donnée n'est visible dans l'URL de la page obtenue, mais que ces données lui ont bien été tranmises.
Utiliser la combinaison de touches Ctrl-Maj-I et cliquer sur réseau (ou simplement Ctrl-Maj-E sous Firefox) , puis recharger la page, en confirmant le renvoi des données, pour visualiser la requête. Cliquer sur la ligne de la requête POST, puis sur Requête : vous pouvez voir les données du formulaire, transmises à la page. Si vous faites la même chose pour la page obtenue avec la méthode GET, vous constaterez que la requête est vide.
Lorsque des données du formulaire sont envoyées par la méthode POST, ces données sont envoyées dans le corps de la requête. Chaque donnée est identifiée à l'aide de l'attribut 'name' du contrôle de formulaire dont elle provient.
Requête POST : les données sont transmises dans le corps de la requête Requête GET : les données sont transmises dans l'URL du fichier requis, le corps de la requête est vide
On peut avoir l'impression qu'une requête POST est plus sécurisée qu'une requête GET pour transmettre une information sensible, comme un mot de passe, mais ce n'est pas tout à fait vrai. Il est certain que la requête GET n'est pas du tout adaptée pour transmettre des données confidentielles puisqu'elle les affiche en clair à la vue de tout le monde, mais des informations en clair contenues dans le corps d'une requête POST sont également faciles à extraire. Pour transmettre ces données de manière vraiment sécurisée, il faut les transmettre sous forme cryptée, en utilisant https.
