Compare commits

..

No commits in common. "784d5b2d2a4c6a93c1afce963b0250bfe0db2d18" and "5b206949dd21e072d0fb929eb7e81fd30105be63" have entirely different histories.

14 changed files with 10 additions and 497 deletions

View File

@ -1,88 +0,0 @@
\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}

View File

@ -1,103 +0,0 @@
\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}

View File

@ -164,66 +164,9 @@
\end{exercise} \end{exercise}
\begin{exercise}[subtitle={QCM}, step={2}, origin={Ma tête}, topics={ Interaction client-serveur }, tags={ HTTP, Flask }] % \begin{exercise}[subtitle={QCM}, step={2}, origin={Ma tête}, topics={ Interaction client-serveur }, tags={ HTTP, Flask }]
\begin{enumerate} % \begin{enumerate}
\item Parmi GET et POST, quelle méthode d'envoi de formulaire crypte les informations envoyées au serveurs? % \item Dans une page HTML se trouve le formulaire suivant:
\begin{tasks}(2) %
\task les deux: GET et POST % \end{enumerate}
\task GET seulement % \end{exercise}
\task POST seulement
\task aucune des deux
\end{tasks}
\item Parmi les réponses suivantes, que permet d'effectuer la méthode POST du protocole HTTP?
\begin{tasks}(2)
\task Définir le style d'une page
\task Pirater des données bancaire
\task Envoyer une page web vers le client
\task Envoyer les données saisies dans un formulaire HTML vers un serveur
\end{tasks}
\item Charles veut accéder à son forum favori. Il sais son adresse (URL) sur son navigateur Web, qui lui affiche une erreur 404.
Quelle cas de figure \textbf{n'explique pas} sa situation?
\begin{tasks}(2)
\task une mise à jour du serveur qui héberge le forum
\task une erreur de saisie de sa part
\task une panne de sa connexion internet
\task un changement de titre du forum qu'il veut consulter
\end{task}
\item Parmi les éléments suivants, lequel est un protocole?
\begin{tasks}(4)
\task GET
\task POST
\task HTTP
\task HTML
\end{task}
\item Dans une page HTML, que pet la balise \texttt{<form action="http://monsite.fr" method="POST">}?
\begin{tasks}
\task d'envoyer des données à l'URL \texttt{http://monsite.fr} sans les ajouter au corps de la requête HTTP
\task d'envoyer des données à l'URL \texttt{http://monsite.fr} et de les ajouter au corps de la requête HTTP mais pas à l'URL
\task de télécharger une formulaire depuis l'URL \texttt{http://monsite.fr}
\task de récupérer des données depuis l'URL \texttt{http://monsite.fr}
\end{task}
\item Dans le contexte du Web, qu'est-ce qu'une transmission chiffrée?
\begin{tasks}
\task une transmission optimisée pour les grands nombres
\task une transmission sous forme binaire
\task une transmission d'information cryptée
\task une transmission facturée proportionnellement à la taille du message
\end{task}
\item Mehdi a écrit une page HTML contenant des éléments \texttt{input} de formulaire. Il place ces éléments de formulaire:
\begin{tasks}
\task entre la balise \texttt{<form>} et la balise \texttt{</form>}
\task entre la balise \texttt{<formulary>} et la balise \texttt{</formulary>}
\task entre la balise \texttt{<code>} et la balise \texttt{</code>}
\task entre la balise \texttt{<script>} et la balise \texttt{</script>}
\end{task}
\item Quelle utilisation faut-il avoir pour garantir qu'une transmission entre un client et un serveur sera-t-elle chiffrée?
\begin{tasks}(2)
\task lorsqu'on utilise le navigateur web Firefox
\task lorsqu'on utilise la méthode POST
\task lorsqu'on utilise le protocole HTTPS
\task lorsqu'on utilise HTML et CSS
\item
\end{task}
\end{enumerate}
\end{exercise}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

View File

@ -2,7 +2,7 @@ Interaction client-serveur
########################### ###########################
:date: 2023-01-03 :date: 2023-01-03
:modified: 2023-01-16 :modified: 2023-01-03
:authors: Benjamin Bertrand :authors: Benjamin Bertrand
:tags: Http, Flask :tags: Http, Flask
:category: 1NSI :category: 1NSI
@ -38,16 +38,8 @@ 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. Exploration de l'onglet "Network" dans les outils de dev des navigateurs.
Bilan: Étape 2: Formulaire
-------------------
.. image:: ./1B_http.pdf Étape 3: Construire un serveur web avec Flask
: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
--------------------------------------------- ---------------------------------------------

View File

@ -1,7 +0,0 @@
<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>

View File

@ -1,182 +0,0 @@
\begin{exercise}[subtitle={Probabilités}, step={1}, origin={Ma tête}, points=7, topics={ }, tags={ Probabilités }]
Dans cet exercice les parties sont indépendantes, elles peuvent être traités séparément.
\begin{enumerate}[label={\textbf{Partie \Alph*:}}]
\item \textbf{répartition géographique}
On a relevé le sexe des enfants nés en février dans 3 communes différentes et on a noté les résultats.
On considère l'expérience aléatoire qui consiste à tirer au hasard un enfant né en février dans une de ces trois communes.
\hspace{-1cm}
\begin{minipage}{0.4\linewidth}
\begin{center}
\begin{tabular}{|c|c|c|c|}
\hline
Communes & Garçons & Filles & Total \\
\hline
Villeouf & 432 & 456 & 888\\
\hline
Betedeville & 11 & 10 & 21\\
\hline
Sacrévillage & 54 & 70 & 124\\
\hline
Total & 497 & 536 & 1033\\
\hline
\end{tabular}
\end{center}
\end{minipage}
\hfill
\begin{minipage}{0.6\linewidth}
\begin{tasks}[label={\Alph*=}]
\task $\left\{ \mbox{ l'enfant est une fille} \right\}$
\task $\left\{ \mbox{ l'enfant est né à Betedeville} \right\}$
\task $\left\{ \mbox{ l'enfant est un garçon et il est né à Villeouf}\right\}$
%\task $\left\{ \mbox{ l'enfant est une fille ou il est né à Sacrévillage} \right\}$
\end{tasks}
\end{minipage}
\item \textbf{fonder une famille}
M.Dupont et Mme Dupont souhaitent avoir 3 enfants. Ils se sont renseignés, chaque enfants a autant de chance d'être un garçon qu'une fille.
On associe ce souhait d'avoir 3 enfants à une expérience aléatoire où l'on s'intéressera au sexe des enfants.
\begin{enumerate}
\item En utilisant un arbre de probabilité, déterminer l'univers de cette expérience aléatoire.
\item Quelle est la loi de probabilité de cette expérience aléatoire ? Est-ce une situation d'équiprobabilité?
\item Quelle est la probabilité pour que le couple ait 2 filles puis un garçon?
\item Quelle est la probabilité pour que le couple ait 2 filles ?
% \item Quelle est la probabilité que leur deuxième enfant soit un garçon?
\item Quelle est la probabilité pour que les deux ainés (les deux enfants nés en premier) soient du même sexe ?
\item Quelle est la probabilité pour d'avoir une seule fille?
\end{enumerate}
\end{enumerate}
\end{exercise}
\begin{solution}
\begin{enumerate}[label={\textbf{Partie \Alph*:}}]
\item
Probabilités
\[
P(A) = \frac{536}{1033} \qquad P(B) = \frac{21}{1033} \qquad P(C)= \frac{432}{1033}
\]
\item
\begin{enumerate}
\item En notant $F$ une fille et $G$ un garçon. L'univers est
\[
\Omega = \left\{ FFF, FFG, FGF, FGG, GFF, GFG, GGF, GGG \right\}
\]
\item Loi de probabilités
\begin{center}
\begin{tabular}{|c|*{8}{c|}}
\hline
Issues & FFF & FFG & FGF & FGG & GFF & GFG & GGF & GGG \\
\hline
Probabilités & $\frac{1}{8}$ & $\frac{1}{8}$ & $\frac{1}{8}$ & $\frac{1}{8}$ & $\frac{1}{8}$ & $\frac{1}{8}$ & $\frac{1}{8}$ & $\frac{1}{8}$ \\
\hline
\end{tabular}
Comme il y a autant de chance d'avoir une fille ou un garçon, c'est une situation d'équiprobabilité.
\end{center}
\item La probabilités d'avoir deux filles est de $\frac{3}{8}$
\item La probabilité d'avoir les deux ainés du même sexe est de $\frac{4}{8} = \frac{1}{2}$
\end{enumerate}
\end{enumerate}
\end{solution}
\begin{exercise}[subtitle={Tableaux}, step={1}, origin={Création?}, topics={Fonctions}, tags={Tableau de signes, Tableau de variations}, points=5]
\begin{enumerate}
\item Tracer le tableau de signes puis le tableau de variation de la fonction suivante
\begin{center}
\begin{tikzpicture}[yscale=0.5]
\tkzInit[xmin=-5,xmax=5,xstep=1,
ymin=-5,ymax=4,ystep=1]
\tkzGrid
\tkzAxeXY
\draw[very thick, color=red] plot [smooth,tension=0.5, mark=*] coordinates{(-4, -4) (-3.5, -3) (-3, 0) (-2, 1) (-1, 0) (0, -3) (1, -1) (2, -3) (2.5,0) (3, 2) (4, 3)};
\draw (4,3) node[above right] {$\mathcal{C}_f$};
\end{tikzpicture}
\end{center}
\item En utilisant la calculatrice tracer le \textbf{tableau de signes} de la fonction
\[
g(x) = x^3 + x^2 - 2x
\]
\end{enumerate}
\end{exercise}
\begin{exercise}[subtitle={Cducosto}, step={1}, origin={Création?}, topics={Fonctions}, tags={Tableau de signes, Tableau de variations, inéquations}, points=5]
L'entreprise Cducosto produit des outils de bricolages, en particulier, des marteaux. Voici les tableaux décrivant le signe et les variations des bénéfices (notés $B(x)$) en fonction du nombre de marteaux qu'elle produit et vend.
\begin{center}
\begin{tikzpicture}
\tkzTabInit[]{$x$/1,Signes de $B(x)$/2}{0, 30, 120, 150}
\tkzTabLine{, -, z, +, z, -,}
\end{tikzpicture}
\begin{tikzpicture}[baseline=(a.north)]
\tkzTabInit[]{$ x $/1, Variations de $ B(x) $/2}{0, 75, 150}
\tkzTabVar{ -/-175, +/100, -/-175}
\end{tikzpicture}
\end{center}
\begin{enumerate}
\item Tracer le graphique d'une fonction qui aurait le même tableau de signes que la fonction $B(x)$.
\item Tracer le graphique d'une fonction qui aurait le même tableau de variations que la fonction $B(x)$.
\item Si l'entreprise produit 10 marteaux, fait-elle des bénéfices?
\item Sur quel intervalle doit-elle produire pour que ses bénéfices soient positifs?
\item Quelle quantité de marteaux doit-elle produire pour faire un maximum de bénéfices?
\end{enumerate}
\end{exercise}
\begin{solution}
\begin{enumerate}
\item Graphique possible
\begin{center}
\begin{tikzpicture}[xscale=1]
\begin{axis}[
xscale=2,
axis lines = center,
%grid = both,
xlabel = {Quantité},
%xtick={0, 20, ..., 150},
xtick distance=10,
ylabel = {Bénéfices},
ytick distance=50,
ymax=150,
grid=major
]
\addplot[domain=0:150,samples=40, color=red, very thick]{-0.05*x*x + 7.5*x - 180};
\end{axis}
\end{tikzpicture}
\end{center}
\item Si l'entreprise produit 10 marteaux, on est entre 0 et 30 marteaux donc les bénéfices sont négatifs.
\item Pour que les bénéfices soient positifs , il faut que la production reste sur l'intervalle $\intFF{30}{120}$
\item Pour des bénéfices maximaux, il faut produire 75 marteaux d'après le tableau de variations.
\end{enumerate}
\end{solution}
\begin{exercise}[subtitle={Programmation}, step={1}, origin={Création}, topics={Programmation}, tags={Python}, points=3]
Dans cet exercice, vous devez compléter les programmes Python au niveau des pointillés.
\begin{enumerate}
\item On souhaite écrire une programme qui calculer l'indice IMC avec la formule $IMC = \dfrac{taille^2}{masse}$.
\begin{center}
\begin{minipage}{0.9\linewidth}
\inputminted[bgcolor=base3,linenos]{python}{./scripts/indice_imc.py}
\end{minipage}
\end{center}
\item A un indice IMC, on associe une interprétation suivant la règle suivante
\begin{center}
\begin{tabular}{|c|c|c|c|}
\hline
Indice IMC & 0 à 18.5 & 18.5 à 25 & plus de 25 \\
\hline
Interprétation & Insuffisance & Normale & Surpoids\\
\hline
\end{tabular}
\end{center}
\begin{center}
\begin{minipage}{0.9\linewidth}
\inputminted[bgcolor=base3,linenos]{python}{./scripts/interpretation_imc.py}
\end{minipage}
\end{center}
\end{enumerate}
\end{exercise}

View File

@ -1,6 +0,0 @@
taille = int(input("Quelle est votre taille (en m)?"))
taille = int(input("Quelle est votre masse (en kg)?"))
imc = .....
print("Votre indice IMC est de ", imc)

View File

@ -1,8 +0,0 @@
imc = float(input("Quel est votre indice IMC?"))
if ..... :
print("Insuffisance")
...........
print("Normale")
...........
print("Surpoids")

View File

@ -1,28 +0,0 @@
\documentclass[a4paper,12pt]{article}
\usepackage{myXsim}
\usepackage{minted}
% Title Page
\title{ DS3 \hfill }
\tribe{2nd}
\date{18 janvier 2023}
\duree{1h}
\DeclareExerciseCollection[step=1]{banque}
\xsimsetup{collect}
\pagestyle{empty}
\begin{document}
\maketitle
Le barème est donné à titre indicatif, il pourra être modifié.
\input{exercises.tex}
\printcollection{banque}
\end{document}
%%% Local Variables:
%%% mode: latex
%%% TeX-master: "master"
%%% End: