1re NSI / 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.

Côté serveur, la machine analyse chaque requête reçue et calcule une réponse, 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é.

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 :

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

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 ?

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 :

<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 :
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 ?

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 <meta> dans l'en-tête :
<meta http-equiv="Refresh" content="durée_en_secondes;URL=adresse_de_la_page">
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.

Code source (modification) : Cours Question

Mémorisation 0x - Réussite 0/0

Démarrer

Quels sont les pré-requis à une interaction client-serveur ?

Seul l'ordinateur client doit être allumé.

Ils doivent être proches géographiquement.

Ils doivent utiliser les mêmes protocoles.

Ils doivent être conçu par le même fabricant.

Ils doivent appartenir a un même réseau, ou à des réseaux inter-connectés.

Cocher la ou toutes les bonnes réponses.

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

<!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>

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 <h3>, 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 .

<!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>

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'`

Code source (modification) : Cours Question

Question 1/8 :

Mémorisation 0x - Réussite 0/0

Démarrer

Quels caractères réservés trouvent-on dans une URL :

entre l'adresse de la ressource et les paramètres transmis

Placer 1 élément

entre deux couples paramètre/valeur

Placer 1 élément

entre le nom d'un paramètre et sa valeur

Placer 1 élément

Pacer 1 élément dans chaque groupe sans forcément tous les placer.

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 :

<form method="GET"
action="https://raisintine.fr/chocolatine/assets/1/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>

Interprétation :

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 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 <label> 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' <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 (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 <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é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 reccueillir 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

Code source (modification) : Cours Question

Question 1/11 :

Mémorisation 0x - Réussite 0/0/2

Démarrer

Quelle balise html permet d'y intégrer un formulaire ?

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.

<form method="GET"
action="https://raisintine.fr/chocolatine/assets/1/bonjour.html">
    <label for="nom">Entrez votre nom :</label>
    <input type="text" name="nom" id="nom"
          placeholder="Ex: Jojo" size="20" maxlength="10"
          onkeyup="verifier()";/>
    <input id="btn-envoyer" type="submit" value="Envoyer" />
</form>
<script type="text/javascript">
function verifier() {
    var texte = document.getElementById("nom").value;
    var btn = document.getElementById("btn-envoyer");
    btn.setAttribute("disabled", texte == "");
}
</script>