Feat(2nd): DS3

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/exercises.tex

@@ -164,9 +164,66 @@
 \end{exercise}
 
 
-% \begin{exercise}[subtitle={QCM}, step={2}, origin={Ma tête}, topics={  Interaction client-serveur }, tags={ HTTP, Flask }]
-%     \begin{enumerate}
-%         \item Dans une page HTML se trouve le formulaire suivant:
-%
-%     \end{enumerate}
-% \end{exercise}
+\begin{exercise}[subtitle={QCM}, step={2}, origin={Ma tête}, topics={  Interaction client-serveur }, tags={ HTTP, Flask }]
+    \begin{enumerate}
+        \item Parmi GET et POST, quelle méthode d'envoi de formulaire crypte les informations envoyées au serveurs?
+            \begin{tasks}(2)
+                \task les deux: GET et POST
+                \task GET seulement
+                \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}

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>

2nd/Evaluations/DS_2023-01-18/exercises.tex

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

2nd/Evaluations/DS_2023-01-18/scripts/indice_imc.py

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

2nd/Evaluations/DS_2023-01-18/scripts/interpretation_imc.py

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

2nd/Evaluations/DS_2023-01-18/sujet.tex

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