Introduction : Show
Accessible avec un navigateur Internet, le web offre l’accès à des pages et des données du monde entier. Les interactions avec les sites Internet ne se limitent pas à la consultation de pages ; il est également possible de demander et de transmettre des données. Nous allons nous pencher sur la manière dont ces données peuvent être transmises sur le web. Après un rappel sur les protocoles HTTP et HTTPS découverts en
classe de seconde, nous nous intéresserons aux requêtes formulées avec les méthodes GET et POST du protocole HTTP. Rappel sur les protocoles HTTP et HTTPSLe web est construit sur le protocole HTTP et sa version sécurisée HTTPS. Le protocole HTTPHTTP est le protocole de communication du web.
Définition HTTP : HTTP signifie HyperText Transfer Protocol, ou protocole de transfert hypertexte en français. La notion d’hypertexte renvoie aux liens cliquables qui permettent de naviguer de page en page et de site en site sur le world wide web, appelé plus simplement le « web ». Le protocole HTTPSDéfinition HTTPS : HTTPS est une version sécurisée du HTTP qui ajoute un chiffrement des données échangées pour garantir la confidentialité des échanges.
Ainsi, lorsqu’un internaute clique sur un lien pour accéder à une page web, son navigateur (le client) envoie une requête au site web (le serveur), qui répond en lui envoyant la page demandée. Les méthodes du protocole HTTPLe protocole HTTP s’appuie sur une dizaine de méthodes pour indiquer les actions souhaitées. Nous nous intéresserons aux deux méthodes les plus courantes que sont GET et POST. Définition Méthodes : Les méthodes sont des commandes, parfois appelées verbes, qui permettent aux clients de formuler des requêtes d’actions auprès des serveurs, afin d’obtenir en réponse des ressources. À retenir Ces ressources peuvent être des pages web, des images ou d’autres types de documents. Les serveurs traitent les requêtes d’actions envoyées par les clients et émettent en retour des réponses. Les ressources peuvent être aussi bien des données préexistantes que des données générées dynamiquement pour répondre à une requête spécifique. Pour savoir quelles données fournir et sous quelle forme, les serveurs web s’appuient sur les requêtes envoyées.
Exemple
La méthode GETDéfinition Méthode GET : La méthode GET envoie des donnés au serveur pour obtenir une ressource spécifiée. À retenir Cette méthode n’a aucun effet sur la ressource requise dans le sens où elle ne la modifie pas. La méthode GET peut donc être répétée et fournira le même résultat.
Exemple Lorsque vous consultez les prévisions météorologiques du jour pour votre ville ou votre région, la ressource existe déjà : stockée sur le serveur, elle est simplement transmise à votre navigateur qui se chargera de son affichage. La météo d’une ville donnée est en effet identique pour vous et pour votre voisin.
Attention Les requêtes GET ne doivent jamais être utilisées pour modifier des données sur le serveur.
La méthode POSTDéfinition Méthode POST : La méthode POST envoie des données au serveur pour créer, obtenir ou mettre à jour une ressource. À retenir Cette méthode conduit généralement à des modifications côté serveur.
Exemple Lorsque vous vous connectez à un forum, à un service de messagerie ou à un
réseau social, les données sont générées dynamiquement pour fournir des informations qui vous sont propres. L’envoi de données dans le cadre d’un formulaireIntéressons-nous de plus près aux méthodes GET et POST. Ces deux méthodes comportent un certain
nombre de points communs, mais aussi des différences. Nous allons composer ce formulaire à partir de l’élément FORM du langage HTML et analyser son fonctionnement. Principe de fonctionnement d’un formulaireUn formulaire permet à un client (le navigateur Internet) de collecter et de transmettre des données à un serveur (ici le serveur web). À retenir Pour pouvoir envoyer ces données, le navigateur Internet a besoin de connaître deux informations qui lui seront fournies par le code HTML du formulaire :
La destination est l’adresse de la ressource (URL) côté serveur qui traitera les données issues de notre formulaire et qui transmettra en retour une réponse.
Création du formulaire en HTML avec la méthode GETNotre formulaire de démonstration nous permettra de
saisir et d’envoyer un code postal au serveur afin d’obtenir en retour les prévisions météorologiques locales à notre ville.
<form action="meteo.php" method="get"> <label for="codepostal">Indiquez votre code postal : </label> <input type="text" name="code_postal" id="codepostal"> <input type="submit" value="envoyer"> </form> À retenir Notre élément FORM comporte trois éléments enfants – les deux éléments de type INPUT sont indispensables :
Vous aurez remarqué que nous utilisons dans un premier temps la méthode GET. Nous ferons par la suite évoluer notre code pour employer la méthode POST et comparer les résultats obtenus. Attention
Nous insérons le code de notre formulaire dans un fichier html que nous nommerons « meteo.html ». Nous plaçons ce fichier sur un serveur web local ou distant (dans notre cas le serveur local nommé « localhost ») et nous y accédons avec un navigateur Internet à partir de son URL pour obtenir son rendu.
À retenir Lorsque nous saisissons un code postal et que nous cliquons sur le bouton, notre navigateur Internet transmet :
Traitement du formulaire côté serveurPour les besoins de notre démonstration, nous souhaitons vérifier que les données soumises par le biais de notre formulaire sont correctement reçues côté serveur pour pouvoir y être traitées. Nous utilisons pour cela le langage PHP qui est actuellement le langage de programmation web côté serveur le plus répandu.
<?php if (!empty($_GET)) { echo('Informations transmises avec GET : '); print_r($_GET); } if (!empty($_POST)) { echo('Informations transmises avec POST : '); print_r($_POST); } ?>
Définition Variables superglobales : Il s’agit de variables internes réservées par PHP et qui sont accessibles quel que soit le contexte. Ces variables $_GET et $_POST sont de type tableau associatif : elles contiennent des paires de clés et de valeurs qui sont automatiquement renseignées par PHP et rendues accessibles dans le script courant.
Nous nommons « meteo.php » la page contenant notre code. Nous la plaçons sur notre serveur web à l’adresse indiquée par l’attribut action » de la balise FORM dans notre page HTML. Lorsque nous soumettons notre formulaire depuis la page « meteo.html » en cliquant sur son bouton « envoyer », nous constatons que notre navigateur se rend sur notre page de destination « meteo.php ».
Nous avons soumis les données avec la méthode GET.
Si notre formulaire avait comporté plusieurs champs, le tableau associatif correspondant aurait affiché chaque paire clé-valeur à la suite. Attention Le nom de la clé correspond à l’attribut name de l’élément INPUT de notre formulaire html. Si cet attribut est omis, la valeur saisie dans le champ INPUT correspondant ne pourra pas être récupérée par le serveur. À retenir Vous remarquerez dans la barre d’adresse du navigateur la présence de la clé et de la valeur à la fin de l’URL après le signe « ? ».
Observons d’abord ce qui se produit si nous employons la méthode POST à la place de GET. Soumission de notre formulaire avec la méthode POSTPour soumettre notre formulaire avec la méthode POST, il nous faut seulement éditer dans notre code source HTML l’attribut method de la balise FORM : nous remplaçons GET par POST et nous enregistrons les changements.
À retenir Vous remarquerez que l’URL dans la barre d’adresses du navigateur indique uniquement l’adresse de notre fichier PHP : aucune donnée saisie dans le formulaire n’apparaît plus à ce niveau. Les données sont en effet transmises dans le corps de la requête et non plus à la suite de l’URL de la destination du formulaire.
Les types de données transmissibles par formulaireNous savons maintenant créer un formulaire et déterminer la méthode d’envoi appropriée en fonction des cas. Nous allons maintenant aborder les différents types de données que nous pouvons collecter avec un formulaire, ainsi que la manière dont l’utilisateur nous communique ces données : saisie au clavier, clic de souris, choix dans des listes déroulantes etc. Revenons dans un premier temps sur la balise INPUT et son attribut type.
L’attribut type permet de spécifier le type de données traitées. Nous avons déjà découvert au travers des exemples précédents :
D’autres types spécialisés sont à notre disposition pour faciliter la saisie et le contrôle préalable de certaines données fréquemment récoltées via des formulaires : adresse de courrier électronique, mot de passe, date, fichier joint, etc. Un formulaire peut également comporter des cases à cocher ou des boutons cliquables (appelés boutons radio). Le tableau suivant récapitule les principaux types de champs d’un formulaire :
À retenir N’oubliez pas la principale différence entre les cases à cocher et les boutons radio :
On peut également proposer à l’utilisateur des listes déroulantes de choix qu’il va pouvoir manipuler avec la souris.
À retenir La balise SELECT permet de construire une liste déroulante avec un certain nombre de choix parmi lesquels l’utilisateur pourra sélectionner la valeur souhaitée. Exemple <select name="pays"> <option value="fr">France</option> <option value="be">Belgique</option> <option value="ch">Suisse</option> </select> Attention Par défaut, les choix sont mutuellement exclusifs. Un attribut optionnel multiple permet d’autoriser les choix multiples, mais au prix de manipulations assez peu ergonomiques.
L’utilisateur de notre formulaire peut par ailleurs vouloir nous transmettre un message plus ou moins long. Une balise dédiée permet de le faire.
La balise TEXTAREA permet la saisie d’un texte long avec d’éventuels retours à la ligne, non gérés par le type "text" de la balise INPUT. À retenir On emploiera une balise TEXTAREA pour collecter des commentaires de blog ou sur des plateformes communautaires, des avis clients sur un livre d’or, etc. Des attributs dédiés permettent de préciser le nombre de lignes et de colonnes de ce champ de saisie multilignes. Exemple < textarea name="commentaire" rows="8" cols="80"></textarea> Nous voilà familiers avec les formulaires, passons en revue et comparons maintenant les spécificités de GET et de POST, pour mieux comprendre dans quel cas utiliser l’une ou l’autre de ces méthodes. Comparaisons GET et POSTL’emploi de l’une ou l’autre méthode dépend à la fois de considérations techniques, de sécurité et de bonne pratique. Principales différences entre GET et POSTNous venons de le voir : avec la méthode GET, les données transmises apparaissent dans la barre d’adresse du navigateur, contrairement à la méthode POST, où seule l’URL de destination est affichée. La méthode GET est assez limitée dans la quantité et le type de données qu’elle peut transmettre : au maximum deux mille caractères environ, et uniquement des caractères. Les pages obtenues avec la méthode GET peuvent être mises en cache et enregistrées dans les marque-pages ou favoris, contrairement aux pages obtenues avec la méthode POST.
Toutefois, il n’est pas nécessaire ni souhaitable d’utiliser systématiquement POST. On se priverait par exemple de la possibilité de mettre des données en cache, ce qui est parfois très utile, en particulier pour optimiser les sollicitations du serveur et préserver ainsi ses performances. Quand utiliser GET ? Quand utiliser POST ?À retenir La règle pour choisir entre GET et POST est la suivante :
Les navigateurs Internet intègrent les spécificités des méthodes GET et POST et proposent certains garde-fous. C’est pourquoi il vous sera possible de revenir en arrière ou de recharger une page obtenue avec une requête GET, mais pas avec une méthode POST.
Exemple Si vous rechargez une page montrant la météo de votre ville, un rechargement n'aura aucune conséquence, ni pour vous ni pour le serveur. À retenir Dès que le traitement des données issues de votre formulaire entraîne côté serveur la création d'une entrée dans une base de données (table des commentaires pour le blog, table des commandes pour le site de commerce électronique), il faut systématiquement
employer POST. Exemple Lorsque vous modifiez des paramètres de votre profil sur un site ou un réseau social, l’état du serveur va changer : il va en effet effectuer des mises à jour dans ses bases de données pour prendre en compte les modifications demandées.
Conclusion : Les formulaires nous permettent de collecter toutes sortes de données et le langage HTML nous offre un large éventail de fonctionnalités pour rendre les saisies de données ergonomiques pour l’utilisateur. Ainsi, le protocole HTTP permet de recueillir des informations
par l’intermédiaire de formulaires HTML et de les transmettre à un serveur web en employant, selon les cas, la méthode GET ou la méthode POST. Comment se fait l'interaction clientL'interaction est à l'initiative des clients (les applications qui se connectent au Web, dont les navigateurs), qui envoient des requêtes HTTP aux serveurs. Ces derniers renvoient leur résultat : des pages qu'ils ont stockées ou qu'ils créent dynamiquement (souvent en PHP) en fonction de la requête formulée.
Comment voir les messages sont échangés entre le navigateur et le site web ?Une requête POST se différencie d'une requête GET par le fait que le navigateur envoie des données au serveur. Ces données sont visibles dans le panneau de détail : dans l'onglet Parameters / Paramètres sous Firefox, en bas de l'onglet Headers / En-têtes sous Chrome.
Comment fonctionne un serveur informatique ?Côté fonctionnement, le serveur informatique apporte, de façon automatique, une réponse à la requête d'un client en respectant tout un ensemble de codifications et de protocoles réseau. Il exerce sa mission en toute autonomie et en toute permanence, 24 heures sur 24, pour pouvoir offrir une continuité du service.
Quelle classe permet de faire transiter les requêtes entre le serveur et le client web ?Le protocole HTTP
Le protocole http (hypertext transfert protocol) va permettre au client d'effectuer des requêtes à destination d'un serveur web. En retour, le serveur web va envoyer une réponse.
|