Feat(NSI): ajoute les bilans du cours Interaction

1NSI/05_Interaction_client-serveur/1B_http.tex

@@ -0,0 +1,88 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+\usepackage{minted}
+
+\author{Benjamin Bertrand}
+\title{Interaction client/serveur - Cours}
+\date{janvier 2023}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\section{Protocole HTTP}
+
+\begin{definition}[HTTP]
+    \texttt{HTTP} est un protocole qui permet de récupérer des ressources telles que des documents HTML, les feuilles CSS, les images... Il est à la base de tout échange de données sur le Web.
+
+    C'est un protocole de type client-serveur, ce qui signifie que les \textbf{requêtes} sont initiées par le client (qui est généralement un navigateur web) et attendent une \textbf{réponse} du serveur.
+\end{definition}
+
+\paragraph{Remarques:} pour obtenir une page web complète, il faut la plupart du temps faire plusieurs \textbf{requêtes} HTTP vers plusieurs serveurs.
+
+\begin{center}
+    \includegraphics[scale=0.2]{./fig/fetching_a_page}
+\end{center}
+
+\section{Requêtes HTTP}
+
+\begin{propriete}[Requête]
+    Une requête est l'un des deux types de message que l'on peut s'échanger dans le protocole HTTP.
+
+    Elle est constituée des éléments suivants
+    \begin{multicols}{3}
+        \begin{itemize}
+            \item Une méthode
+            \item un chemin
+            \item la version du protocole
+            \item d'une entête
+            \item d'un corps
+        \end{itemize}
+    \end{multicols}
+
+
+\end{propriete}
+
+Le protocole HTTP propose différentes méthodes pour faire des requêtes:
+
+\begin{definition}[requêtes GET]
+
+    Les requêtes GET permettent de demander l'accès à des ressources au serveur.
+
+
+\end{definition}
+
+\paragraph{Utilisation d'une requête GET}
+\begin{itemize}
+    \item En tapant \colorbox{highlightbg}{http://monsite.fr/fichier}, le navigateur réalise la requête suivante :
+        \begin{center}
+            \colorbox{highlightbg}{
+                \begin{minipage}{0.5\linewidth}
+                    GET /fichier HTTP/2 \\ \\
+                    Host: monsite.fr \\
+                    User-Agent: Mozilla/5.0 ... \\
+                    Accept-Language: fr,fr-FR
+                \end{minipage}
+            }
+        \end{center}
+
+    \item Il est possible de passer des paramètres à une requête GET en les ajoutant après un ? dans l'URL.
+
+        En tapant \colorbox{highlightbg}{http://monsite.fr/fichier?age=12\&nom=bob}, le navigateur réalise la requête suivante :
+        \begin{center}
+            \colorbox{highlightbg}{
+                \begin{minipage}{0.5\linewidth}
+                    GET /fichier?age=12\&name=jkl HTTP/2 \\ \\
+                    Host: monsite.fr \\
+                    User-Agent: Mozilla/5.0 ... \\
+                    Accept-Language: fr,fr-FR
+                \end{minipage}
+            }
+        \end{center}
+
+        Comme ces paramètres sont écrits directement dans l'URL, il n'est pas conseillé de l'utiliser pour transmettre des informations confidentielles ou nombreuses.
+\end{itemize}
+
+\end{document}

1NSI/05_Interaction_client-serveur/2B_post_formulaire.tex

@@ -0,0 +1,103 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+\usepackage{minted}
+
+\author{Benjamin Bertrand}
+\title{Interaction client/serveur - Cours}
+\date{janvier 2023}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\begin{definition}[requêtes POST]
+
+    Les requêtes GET permettent d'envoyer des informations au serveur. Ces informations ne sont pas transmises via l'URL mais dans le corps de la requête. Elles peuvent donc être sécurisées.
+
+\end{definition}
+
+\paragraph{Construction d'une requête POST}
+Le \textbf{formulaire} HTML est l'élément qui permet de construire des requêtes POST.
+
+Exemple de formulaire
+
+
+\begin{minipage}{0.8\linewidth}
+    \inputminted[bgcolor=base3,linenos]{html}{./scripts/formulaire.html}
+\end{minipage}
+
+Ce formulaire enverra le nom (de type texte) et si l'utilisateur est majeur (type booléen) par la méthode POST vers le fichier bonjour. Soit la requête suivante
+
+        \begin{center}
+            \colorbox{highlightbg}{
+                \begin{minipage}{0.5\linewidth}
+                    GET /bonjour HTTP/2 \\
+
+                    Host: monsite.fr \\
+                    User-Agent: Mozilla/5.0 ... \\
+                    Accept-Language: fr,fr-FR \\
+
+                    nom=azert\&majeur=on
+                \end{minipage}
+            }
+        \end{center}
+
+Type de input disponibles:
+
+\afaire{compléter la liste}
+
+\vspace{2cm}
+
+\section{Réponse du serveur}
+
+\begin{definition}[Réponse du serveur]
+    C'est l'autre type de message que l'on peut s'échanger dans le protocole HTTP.
+
+    Il est constitué des éléments suivants :
+
+    \begin{multicols}{2}
+        \begin{itemize}
+            \item La version du protocole
+            \item le code d'état (status code)
+            \item du message d'état
+            \item d'une entête
+        \end{itemize}
+    \end{multicols}
+
+
+\end{definition}
+
+Exemple d'une réponse
+\begin{center}
+    \colorbox{highlightbg}{
+        \begin{minipage}{0.5\linewidth}
+            HTTP/1.1 200 OK \\
+
+            Date: Sat, 09 Oct 2010 14:28:02 GMT \\
+            Server: Apache \\
+            Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT \\
+            Content-Type: text/html \\
+            ... \\
+
+            <!DOCTYPE html...
+
+        \end{minipage}
+    }
+\end{center}
+
+\begin{propriete}[Code status]
+    Les codes status d'un serveur est un nombre à 3 chiffres auquel on associe une message.
+
+    \begin{itemize}
+        \item Code en 2..: réponse fructueuse (tout s'est bien passée)
+        \item Code en 3..: la requête a été redirigée
+        \item Code en 4..: le client a fait une erreur de requête
+        \item Code en 5..: le serveur est en erreur
+    \end{itemize}
+
+\end{propriete}
+
+
+\end{document}

1NSI/05_Interaction_client-serveur/index.rst

@@ -2,7 +2,7 @@ Interaction client-serveur
 ###########################
 
 :date: 2023-01-03
-:modified: 2023-01-03
+:modified: 2023-01-16
 :authors: Benjamin Bertrand
 :tags: Http, Flask
 :category: 1NSI
@@ -38,8 +38,16 @@ Cours: rappels de ce qui a été déjà fait sur le web: client serveur, url, po
 
 Exploration de l'onglet "Network" dans les outils de dev des navigateurs.
 
-Étape 2: Formulaire
+Bilan:
--------------------
 
-Étape 3: Construire un serveur web avec Flask
+.. image:: ./1B_http.pdf
+    :height: 200px
+    :alt: Bilan sur le protocole HTTP et les requêtes GET
+
+.. image:: ./2B_post_formulaire.pdf
+    :height: 200px
+    :alt: Bilan sur les requêtes POST, les formulaires et les codes status du serveur
+
+
+Étape 2: Construire un serveur web avec Flask
 ---------------------------------------------

1NSI/05_Interaction_client-serveur/scripts/formulaire.html

@@ -0,0 +1,7 @@
+<form method='post' action='bonjour'>
+
+    <input type='text' name='nom' placeholder='Votre nom ?'/>
+    <input type='checkbox' name='majeur' placeholder='Etes vous majeur?'/>
+
+    <input type='submit' value='Bonjour bottle !'/>
+</form>