Cours

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 (front-end) et ce qui est exécuté sur le serveur (back-end).

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 ici est pour l'ordinateur client (console de jeu, ...) qui 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é (faible latence et grand débit).

Côté client, la machine fait des requêtes d'accès à des données sur un serveur.
Elle reçoit et interprète du code HTML, CSS et Javascript via le navigateur.

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é.

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 ici sera d'afficher l'heure.

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

Code source :

Horloge réalisée en javascript :

Interprétation :
1 - Réaliser un clic droit sur l'horloge réalisée en javascript et sélectionner Inspecter.
2 - Voyez-vous le code source javascript ? Pourquoi ?

Oui, le code javascript est envoyé par le serveur au client pour que son navigateur l'interprète localement.

Remarques : Tout fonctionne correctement car tout s'exécute sur votre ordinateur (côté client). Il n'y a pas besoin d'interagir avec le serveur via de nouvelle requête.

Repérer les différences entre le langage de programmation javascript et python.

Fonctionnalités|Python|Javascript Définir une fonction|def|function Réperer les blocs|indentation de 4 espaces|entre accolades Définir une variable|pas de mot clé spécifique|var Fin de ligne|rien|;

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 inclus dans une balise <?php ... ?>.

Code source :

Horloge réalisée en php :

Interprétation :
1 - Réaliser un clic droit sur l'horloge affichée en php et sélectionner Inspecter.
2 - Voyez-vous le code source PHP ? Pourquoi ?

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 a été envoyé au client.

Remarque : 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 vous le renvoyer à vous : le client.
Il est possible de forcer l'actualisation de la page en utilisant la balise dans l'en-tête :

Celle-ci demande au navigateur d'envoyer une requête pour réactualiser la page à intervalle de temps régulier.

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.

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 exemples d'URL :

• http://raisintine.fr/chocolatine
  Par défaut, c'est la page index.html du site internet chocolatine hébergé sur le serveur raisintine.fr qui sera envoyé par le serveur.
• https://raisintine.fr/chocolatine/document.php?id=402
  URL de la page document.php avec le paramètre id et ayant pour valeurs 402.
  Ces valeurs peuvent ensuite être 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 opérations sensibles telles que des transactions bancaires.

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 afin de pouvoir adapter la réponse du serveur.
Ici la requête consiste à demander la page web http://www.google.com au format text ou html pour le navigateur Firefox (Mozilla).

Navigateur

• 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 : Le nombre de paramètres pouvant être demandé est limitée par la longueur maximale d'une URL d'environ 2000 caractères. De plus seuls les caractères de la table ASCII sont acceptés dans une URL.

Exemple : https://raisintine.fr/chocolatine/document.php?id=402&idsb=2242

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 ici javascript qui est exécuté coté client.
En effet, si nous voulions utiliser PHP, il faudrait installer le 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

Requête GET
1 - S'approprier le code ci-dessus et prévoir ce qu'il fait.

Les lignes 7 et 8 permettent de générer un dictionnaire (objet javascript) d'après les paramètres inscrit dans l'URL.
Les lignes suivante récupère la valeur associée à la clé nom dans la variable vars. Il écrit alors sur le document, en

, bonjour suivi du nom ou bien bonjour inconnu sinon.

2 - Créer un fichier texte bonjour.html, y copier le code ci-dessus et l'ouvrir avec un navigateur.
3 - Passer une valeur en GET à l'attribut nom et constater le résultat.

L'URL complétée est : bonjour.html?nom=Julien.

Voici la version équivalente en PHP. Ici pas besoin de lire les paramètres GET (ligne 7 et 8 du code javascript précédent) car c'est natif 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 .

Bonjour '.$_GET['nom'].' !';} else { echo '

Bonjour inconnu !

';} ?> Repérer les différences entre le langage de programmation PHP et python.

Fonctionnalités|Python|PHP Réperer les blocs|indentation de 4 espaces|entre accolades Concaténation|+|. Fin de ligne|rien|; Écrire du HTML||echo 'texte'

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.

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

Code source HTML :

Entrez votre nom :

Interprétation :

Entrez votre nom :

Ici nous avons une étiquette suivie d'une case à remplir 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 envoyée au serveur.
id est 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.
for dans la balise permet d'associer l'étiquette au champ à remplir. Si on clique sur Entrez votre nom, le curseur se place automatiquement dans l champ de saisie associé.
L' 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 (ici seulement name) et leurs valeurs.

Premier formulaire
1 - 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 le fichier de l'exercice précédente bonjour.html.
2 - Ouvrir cette page dans un navigateur.
3 - Compléter le formulaire et l'envoyer.

Il existe de nombreux types de balise 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ée est GET. Si l'on supprime method="GET" comme attribut du formulaire, celui-ci sera envoyé par défaut avec cette méthode.

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 l'URL de la barre d'adresse ce qui peut poser des problèmes de confidentialité. De plus l'URL est inscrite en clair dans la requête HTTP qui circule sur Internet jusqu'au serveur et pourrait être intercepter pour recueillir ces données.

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 au jeu de caractères de la table ASCII.
Attention, bien que les données ne sont pas visibles dans l'URL, 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 l'URL|Invisible pour l'utilisateur lambda 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|Jeu de caractères ASCII. Certains caractères sont réservés (= ou &).|Jeu de caractère bien plus large. Longueur des données|Longueur maximale de l'URL d'environ 2000 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 avant l'envoi.

Voici la liste des événements gérés par javascript : évènement;explications onclick;souris : clic sur l'élément ondblclick;souris : double-clic sur l'élément onmouseenter;souris : le curseur entre sur l'élément onmouseleave;souris : le curseur quitte l'élément onkeydown;clavier : une toucheest enfoncée onkeypress;clavier : une touche est maintenue enfoncée onkeyup;clavier : une touche est relâchée 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 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

1 - En reprenant les exercices précédents, dans quel fichier : bonjour.html ou formulaire.html, où faut-il ajouter du code javascript permettant de valider les données avant l'envoie ?

Dans le fichier formulaire.html.

2 - Ajouter une fonction javascript permettant d'activer le bouton d'envoi du formulaire seulement si le champ de saisie n'est pas vide.

L'attribut disabled ajouté au bouton permet de le désactiver.
Obtenir un élément du DOM avec l'instruction javascript : document.getElementById(id).
Obtenir la valeur entrée dans le champ d'un élément avec : .value
Ajouter une propriété à un élément du DOM grâce à la méthode javascript .setAttribute(nom_attribut, valeur).
Pour ajouter l'attribut disabled à une élément du DOM, utiliser la méthode : .setAttribute("disabled", true).

Il faut ajouter un identifiant au bouton ainsi qu'un évènement onkeyup pour le champ permettant d'appeler la fonction verifier()dès qu'une touche du clavier est relâchée.

Entrez votre nom :