Chapitre 8 : Interface Client-Serveur

Définition

L'interaction entre un ordinateur client et un ordinateur serveur est à la base d'Internet. L'idée est de permettre à une machine d'accéder à une ressource disponible sur une autre machine du réseau. Une ressource peut aussi bien être une page web, qu'une base de données ou bien encore de la puissance de calcul. Il est important de comprendre ce qui est exécuté sur votre ordinateur et ce qui est exécuté sur le serveur.

Dans le cas extrême du « cloud-gaming » ou « cloud-working », toute la puissance de calcul est déportée vers le serveur. L'ordinateur client sert alors seulement d'interface. Il gère l'affichage et les périphériques : manette de jeux, souris, capteurs de réalité virtuelle. Il capte les événements et les transmet au serveur qui calcule et renvoie le résultat à afficher.
L'avantage est que l'ordinateur client (console de jeu, ...) n'a plus besoin d'une grande puissance de calcul.
L'inconvénient est que cela nécessite une connexion internet de très bonne qualité.

Côté client, une machine fait une demande d'accès à une donnée sur un serveur. Elle reçoit et interprète du code HTML, CSS et Javascript.

Côté serveur, pour chaque requête reçue, une machine génère une réponse et l'envoie, le plus souvent grâce à un moteur PHP, mais il existe aussi node.js (javascript) ou Django (python).
PHP (Hypertext Processor) est un langage de scripts généraliste et Open Source, spécialement conçu pour le développement d'applications web et très facilement intégré au HTML.

Pour communiquer entre eux, le client et le serveur doivent parler la même langue c'est-à-dire utiliser les mêmes protocoles.
Pour les requêtes web, c'est le protocole HTTP (HyperText Transfer Protocol) qui est utilisé.

I. et II. inspirés de : https://www.numerique-sciences-informatiques.fr/coursInteractionClientServeur.php.

Exécution côté client ou côté serveur ?

Voici un exemple qui permet de comprendre la différence entre une action réalisée côté client et une autre côté serveur. Notre objectif est d'afficher l'heure.

Première méthode : côté client en javascript

Code source : Interprétation :

Code source :	Interprétation :
`<html> <head> <meta charset="UTF-8"> <title>horloge javascript</title> </head> <body> <p>Horloge réalisée en javascript :</p> <p id="heure"></p> <script type="text/javascript"> function actualiser() { var date = new Date(); var str = date.getHours()+':'+date.getMinutes()+':'+date.getSeconds(); document.getElementById('heure').innerHTML = str;} setInterval(actualiser, 1000); </script> </body> </html>`	Horloge réalisée en javascript :


<html>
<head>
    <meta charset="UTF-8">
    <title>horloge javascript</title>
</head>
<body>
    <p>Horloge réalisée en javascript :</p>
    <p id="heure"></p>
        <script type="text/javascript">
            function actualiser() {
                var date = new Date();
                var str = date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
                document.getElementById('heure').innerHTML = str;}
            setInterval(actualiser, 1000);
        </script>
</body>
</html>

Horloge réalisée en javascript :

Cela fonctionne bien car tout s'exécute sur votre ordinateur (côté client), et il est inutile de recharger la page en envoyant une nouvelle requête au serveur.

Deuxième méthode : côté serveur en PHP

Voici ce code tel qu'il est sur le serveur. On repère le code PHP car il est dans la balise : <?php ... ... ?>.

Code source : <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>horloge PHP</title> </head> <body> <p>Horloge réalisée en php :</p> <?php date_default_timezone_set("Europe/Andorra"); echo date("H:i:s"); ?> </body> </html>

Interprétation :

Horloge réalisée en php :

10:55:38

On constate que l'horloge est bloquée. Afin d'obtenir une actualisation de l'heure, il faut réinterroger le serveur en réactualisant la page (touche F5).
Le serveur va réinterpréter le code PHP de la page et le renvoyer à vous : le client.
Il est possible de forcer l'actualisation de la page en utilisant la balise <meta> dans l'en-tête <head> :


  <meta http-equiv="Refresh" content="durée_en_secondes;URL=adresse_de_la_page">

C'est ce qui a été réalisé sur la page : horloge-php.php

Remarque : Malgré la demande de rafraîchissement de la page, inclue dans le code de celle-ci, les méthodes d'optimisation des navigateurs pour diminuer la consommation de données et permettre un chargement plus rapide des pages peut rendre inefficace cette méthode.
Cela montre que pour ce genre d'application, il est préférable de déporter le calcul côté client (javascript) et ainsi soulager le réseau et le serveur.

Depuis votre navigateur accéder aux Outils de développement (dans « Plus d'outils » pour Chrome et « Développement web » pour Firefox ou avec le raccourci CTRL+MAJ+I) et explorer le code de cette page à la recherche de code PHP. Il est impossible de trouver du code PHP depuis le navigateur car tout a été interprété par le moteur PHP du serveur pour générer le fichier HTML qui vous a été envoyé.

Requêtes HTTP

Des requêtes différentes

Entrer une adresse URL (Uniform Ressource Locator) dans la barre d'adresse de votre navigateur consiste à faire une requête HTTP à un serveur distant en lui demandant de fournir une ressource.
Voici quelques URL non-fonctionnelles juste pour l'exemple :

http://deodat.free.fr/
Par défaut, c'est la page index.html du site internet deodat hébergé sur le serveur free.fr qui sera envoyé par le serveur.
http://deodat.free.fr/NSI.php#test3
URL de la page NSI.php et plus précisément sur l'ancre test3 de cette page. Une ancre correspond à la balise HTML ayant cette valeur d'id.
http://deodat.free.fr/NSI.php?nom=bob&test=3
URL de la page NSI.php avec les paramètres nom et test ayant pour valeurs bob et 3.
Ces valeurs peuvent ensuite être récupérées et utilisées par le moteur PHP du serveur pour générer le code html de la page.

Le protocole d'échange est toujours indiqué au début de l'URL. Le protocole le plus utilisé est le HTTP.
Le HTTPS est un protocole d'échange sécurisé, c'est-à-dire que les données qui transitent entre le client et le serveur sont chiffrées. Veillez à vérifier que vous êtes en HTTPS lorsque vous effectuer des transactions bancaires en ligne.

Voici un exemple de requête HTTP :


GET [/ http://www.google.com] HTTP/1.0
Accept : text/html
If-Modified-Since : Saturday, 15-January-2017 14:37:11 GMT
User-Agent : Mozilla/8.0 (compatible; MSIE 7.0; Windows 7)

Une requête HTTP contient des informations sur la ressource demandée mais aussi sur l'utilisateur à l'origine de la requête.

Depuis votre navigateur accéder aux Outils de développement (dans « Plus d'outils » pour Chrome et « Développement web » pour Firefox ou avec le raccourci CTRL+MAJ+I) ;
Sélectionner l'onglet « Réseau » ou « Network » ;
Observer les requêtes GET.

Paramètres dans URL

Les paramètres dans l'URL sont généralement générés par des formulaires. Ils sont repérés dans l'URL par un point d'interrogation suivi du nom du paramètre et de sa valeur. Chaque couple paramètre-valeur est séparé par le symbole &.
Attention : La longueur des paramètres est limitée à 2048 caractères et sont limités à la table ASCII.

Exemple : http://deodat.free.fr/NSI.php?nom=bob&test=3

Nous allons créer une page capable de réagir aux paramètres fournis par l'URL. Généralement cela se produit côté serveur en PHP mais pour simplifier l'exemple, nous utiliserons un code javascript exécuté coté client.
En effet pour utiliser le PHP, il est nécessaire d'installer un moteur PHP sur votre ordinateur.

→ Pour aller plus loin : Installer et apprendre le PHP avec graphikart.fr

→ Toute la documentation du langage PHP est sur : php.net


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script async>
        // Récupération des valeurs passées dans l'URL (méthode GET)
        var vars = {};
        window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {vars[key] = value;});
        
        if (vars["nom"] != undefined) {
            document.write("<h3>Bonjour "+vars["nom"]+" !</h3>");}
        else {
            document.write("<h3>Bonjour inconnu !</h3>");}
    </script>
</head>
<body>
</body>
</html>

S'approprier le code ci-dessus et prévoir ce qu'il fait. Créer un fichier texte bonjour.html, y copier le code ci-dessus et l'ouvrir avec un navigateur : Le script récupère le paramètre nom dans les variables vars.
Il écrit alors sur le document, en <h3>, bonjour suivi du nom ou bien bonjour inconnu.
bonjour.html
Compléter l'URL dans votre navigateur en donnant une valeur au paramètre nom et observer la page. L'URL avec le paramètre est : bonjour.html?nom=votre_nom.

Voici la version équivalente en PHP. Ici pas besoin de créer une fonction pour récupérer les paramètres car celle-ci est native en PHP. En effet, le PHP a été développé spécifiquement pour produire des pages web dynamiques depuis un serveur. La variable contenant les paramètres de l'URL est la variable $_GET .


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <?php 
        if (isset($_GET['nom'])) {
            echo '<h3>Bonjour '.$_GET['nom'].' !</h3>';}
        else {
            echo '<h3>Bonjour inconnu !</h3>';}
    ?>
</body>
</html>

Compléter l'URL de cette page dans votre navigateur en donnant une valeur au paramètre nom et réactualiser cette page.

Résultat du code PHP : Bonjour inconnu !

Il faut ajouter ?nom=votre_nom à l'URL.
On peut aussi inclure les paramètres dans un hyperlien : exemple

Formulaire d'une page Web

Construction d'un formulaire

Un formulaire dans une page web permet à l'utilisateur de saisir des valeurs qui seront traitées par le serveur. Vous utilisez des formulaires lorsque vous créez un compte par exemple, ou lorsque vous répondez à des questions sur un site.

Exemple : Une zone de texte qui demande votre prénom :

Code source HTML : Interprétation :

Code source HTML :	Interprétation :
`<form method="GET" action="https://raisintine.fr/croissant/assets_choco/P-08-client-serveur/bonjour.html"> <label for="nom">Entrez votre nom :</label> <input type="text" name="nom" id="nom" placeholder="Ex: Jojo" size="20" maxlength="10"/> <input type="submit" value="Envoyer" /> </form>`	Entrez votre nom :


<form method="GET" 
action="https://raisintine.fr/croissant/assets_choco/P-08-client-serveur/bonjour.html">
    <label for="nom">Entrez votre nom :</label>
    <input type="text" name="nom" id="nom" 
          placeholder="Ex: Jojo" size="20" maxlength="10"/>
    <input type="submit" value="Envoyer" />
</form>

Ici nous avons une étiquette <label> suivie d'une case à remplir <input type="text"> préremplie avec Ex: Jojo.
Les attributs placeholder, size et maxlength sont facultatifs.
name est le nom du champ du formulaire et correspond au nom du paramètre dans la requête.
id l'identifiant unique de la balise.
Dans le cas d'une liste déroulante, nous aurions un seul attribut name pour la liste mais plusieurs id pour chaque choix possible dans cette liste.
Le for dans la balise <label> permet d'associer l'étiquette au champ à remplir ; si on clique sur Entrez votre nom, le curseur se placera dans la case à remplir.

L' <input> de type submit va créer un bouton qui sera chargé de l'envoi du formulaire au fichier bonjour.html avec en paramètres les différents champs (name) et leurs valeurs.

Créer un formulaire
Créer une page HTML formulaire.html, avec l'exemple de formulaire ci-dessus.
Cette page doit être située dans le même répertoire que la page précédente bonjour.html.
Ouvrir cette page dans un navigateur.
Compléter le formulaire et l'envoyer. Voici la page : formulaire.html
En cliquant sur "Ennvoyer", on bascule sur la page bonjour.html et le nom est passé en paramètre dans l'URL.

Il existe de nombreux types de balise <input> pour faire des formulaires en HTML.
Retrouver de nombreux exemples sur sur scriptol.fr et sur w3schools.

La méthode GET

Maintenant que nous savons créer un formulaire voyons plus en détails comment l'envoyer et traiter les entrées de l'utilisateur. Dans l'exemple précédent la méthode d'envoie utilisé est GET. Si l'on supprime method="GET" comme attribut du formulaire, celui-ci sera envoyé par défaut avec cette méthode GET.

La méthode GET consiste à passer tous les paramètres et leurs valeurs dans l'URL pour que celle-ci soit traitées sur le serveur. L'inconvénient de cette méthode est que toutes les réponses au formulaire sont visibles dans la barre d'adresse ce qui peut poser des problèmes de confidentialité.

La méthode POST

Avec la méthode POST les données sont directement transmises au serveur dans la requête HTTP. Elles ne sont pas ajoutées à l'URL. La méthode POST permet d'envoyer bien plus de données que la méthode GET et ne se limite pas à la table ASCII.

Attention, bien que les données ne soient pas visibles dans la barre d'adresse, elles peuvent être enregistrées par un logiciel sniffeur tel que Wireshark si votre page n'est pas en HTTPS.

Comparaison des méthodes

	Méthode GET	Méthode POST
Visibilité des paramètres	Visible pour l'utilisateur dans le champ d'adresse	Invisible pour l'utilisateur
Marque-page et historique de navigation	Les paramètres de l'URL sont stockés en même temps que l'URL.	L'URL est enregistrée sans les paramètres.
Type de données	Caractères ASCII uniquement.	Caractères ASCII mais également données binaires.
Longueur des données	Longueur maximale de l'URL à 2 048 caractères.	Illimitée

Rôle du javascript dans les formulaires

Le javascript, interprété côté client par le navigateur, permet de vérifier la validité des données entrées par l'utilisateur dans le formulaire avant qu'elles soient envoyées vers le serveur. Il permet aussi de donner des indications sur d'éventuelles erreurs de saisie commises par l'utilisateur du formulaire afin qu'il se corrige.

Voici la liste des événements gérés par javascript :

`onfocus`	le champ prend le focus (la souris est dedans)
`onblur`	le champ perd le focus (permet donc de lancer un contrôle de validité du champ)
`onchange`	la valeur du champ change
`onformchange`	le formulaire est modifié
`oninput`	le champ est rempli
`onvalid`	la saisie n'est pas valide, par exemple un texte pour un nombre
`onselect`	lorsqu'on sélectionne un champ dans un menu
`onsubmit`	lorsqu'on envoie le formulaire