Feat(NSI): ajoute les bilans du cours Interaction
This commit is contained in:
parent
34650b8b12
commit
a7ec11b23f
Binary file not shown.
|
|
@ -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}
|
||||
Binary file not shown.
|
|
@ -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}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
|
|
@ -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
|
||||
---------------------------------------------
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue