# Modèle Client-Serveur <br> Février 2022 --- ## Rappels ---- :::info Quel langage permet de décrire **le fond** d'une page web ? ::: :::success Le langage HTML pour *HyperText Markup Language* permet de décrire **le contenu** d'une page web. <!-- .element: class="fragment" --> ::: ---- :::info Quel langage permet de décrire **la forme** d'une page web ? - Le JavaScript - Le CSS <!-- .element: class="fragment highlight-green" --> - Le C - Le Python ::: ---- :::info Qui **interprète** le HTML,CSS et JS ? * Le navigateur <!-- .element: class="fragment highlight-green" --> * L'interpréteur python * Le serveur web ::: --- ## Le modèle Client-Serveur Pour obtenir une **page web** le navigateur (*client*) émet une **requête** au *serveur web*. Ensuite, le *serveur* répond avec un **contenu** sous forme de **code HTML,CSS,Javascript**. <!-- .element: class="fragment fade-in" --> Enfin, le *client* (navigateur) **interpréte ces codes** pour permettre de: <!-- .element: class="fragment fade-in" --> * la visualiser <!-- .element: class="fragment fade-in" --> * interagir avec les élèments (JS et CSS) <!-- .element: class="fragment fade-in" --> * <!-- .element: class="fragment fade-in" --> interagir avec les formulaires (Requêtes HTTP). ----  ---- ### Pages web complexes Une page web est constitué de **plusieurs fichiers**. :::warning Chaque fichier occasionne **une requête HTTP** au serveur web. Une page web **nécessite plusieurs requêtes** pour être *complète*. ::: --- ## Notion d'URL Pour accéder à une page *web* on doit utiliser **une URL[^1]**. Une **URL** identifie donc **une ressource** sur le web (vidéo, texte, fichier PDF, ...). [^1]: Uniform Resource Locator ---- ### Format d'une URL  | Champ | Description | | ------------- |:------------------------------------------ | | Protocole | **Comment** récupérer | | Nom / Adresse | **Où** sur le web | | Port | **Où** sur le serveur | | Ressource | **Quoi** sur le serveur | | Paramètres | Des arguments si la page est **dynamique** | --- # Pause ## 5 minutes :sleeping: --- ## Requêtes HTTP Pour communiquer des pages web en **HTML** désignées par des **URL** on utilise le protocole **HTTP**. **HTTP** se base sur des **requêtes** et des **réponses**. :::success Requête: Message envoyé par le client pour obtenir une ressource. Réponse: Message envoyé par le serveur pour donner la ressource au client. ::: ---- ### Exemple de dialogue Un vrai dialogue depuis le terminal ```bash curl https://nsi.codeberg.page/premiere/ -v -s -o /dev/null 2>&1 | grep -v '^[*\{\}]' ``` ---- ### Format d'une requête HTTP >*type* *ressource* HTTP/*version* >Host: *nom de domaine ou adresse* >User-Agent: *valeur client* >*Champ*: *valeur* >... >**contenu** <!-- .element: style="text-align: left" --> ---- ### Format d'une réponse HTTP >HTTP/*version* *code de retour* >Date: *la date du serveur* >Content-type: ... >Content-length: ... >*Champ*: *valeur* > <!-- .element: style="text-align: left" --> ---- ### Les différents types de requêtes Pour une liste exhaustive : <https://fr.wikipedia.org/wiki/Hypertext_Transfer_Protocol> | Type | Description | | ---- |:---------------------------------------------------------------------- | | GET | La plus courante, pour demander une ressource. | | HEAD | Demande des informations sur la ressource, sans demander la ressource. | | POST | Utilisée pour transmettre des données | ---- ### Les codes de retour: | Ensembles de code | Description | |:----------------- | -------------------------- | | 1xx | Information sur la requête | | 2xx | La requête a abouti | | 3xx | Redirection de page | | 4xx | Erreur du **client** | | 5xx | Erreur du **serveur** | --- ## Les formulaires Pour transmettre des informations au serveur on utilise: * Les requêtes GET (non sécurisées) * Les requêtes POST (sécurisées si la connexion l'est) ---- ### Les requêtes GET On transmet les informations dans l'URL **via la partie paramêtres**. Voir le *serveur2.py*. ---- ### Les requêtes POST Les informations sont transmises **dans le corps de la requête**. Voir le *serveur3.py*. --- # Pour demain * Exercice suivant de france-ioi