Feat(1NSI): requete POST et serveur bottle

1NSI/05_Interaction_client-serveur/exercises.tex

@@ -16,7 +16,7 @@
 \end{exercise}
 
 
-\begin{exercise}[subtitle={Faire son serveur web avec Bottle}, step={2}, origin={Ma tête}, topics={  Interaction client-serveur }, tags={ HTTP, Flask }]
+\begin{exercise}[subtitle={Application web avec Bottle - requête GET}, step={2}, origin={Ma tête}, topics={  Interaction client-serveur }, tags={ HTTP, Flask }]
     Dans cette partie, vous allez programmer une application web en utilisant la librairie python \texttt{bottle}. Vous trouverez la documentation (en anglais) à l'adresse suivante
     \begin{center}
         \url{https://bottlepy.org/docs/dev/tutorial.html}
@@ -31,6 +31,7 @@
                             \inputminted[bgcolor=base3,linenos]{python}{./scripts/bottle_base.py}
                         \end{minipage}
                     \end{center}
+                    \label{bottle_base}
 
                 \item Exécuter votre programme puis rendez-vous avec le navigateur à l'adresse
 
@@ -75,11 +76,11 @@
 
                 \item Pour le moment, le code renvoyé par notre application n'est pas du code HTML valide. Il est possible d'écrire des modèles (template en anglais) dans lesquels on va pouvoir injecter des variables python pour les rendre modulables.
 
-                    À côté du fichier de votre application, créer un dossier \texttt{views/} puis un fichier \texttt{utilisateur.html} dans lequel vous mettrait le code HTML suivant
+                    À côté du fichier de votre application, créer un fichier \texttt{utilisateur.html} dans lequel vous mettrait le code HTML suivant
 
                     \begin{center}
                         \begin{minipage}{0.9\linewidth}
-                            \inputminted[bgcolor=base3,linenos]{python}{./scripts/utilisateur.html}
+                            \inputminted[bgcolor=base3,linenos]{html}{./scripts/utilisateur.html}
                         \end{minipage}
                     \end{center}
 
@@ -100,3 +101,72 @@
     \end{enumerate}
 
 \end{exercise}
+
+\begin{exercise}[subtitle={Application web avec Bottle - requête POST}, step={2}, origin={Ma tête}, topics={  Interaction client-serveur }, tags={ HTTP, Flask }]
+    Les requêtes POST envoient des informations au serveur. Ces informations sont le plus souvent envoyé à partir d'une formulaire HTML.
+
+    On reprend le code de la question \ref{bottle_base} de l'exercice précédent. Puis on ajoute à côté du script de notre application, le modèle suivant:
+
+    \begin{center}
+        \begin{minipage}{0.9\linewidth}
+            \inputminted[bgcolor=base3,linenos]{html}{./scripts/modele_base.html}
+        \end{minipage}
+    \end{center}
+    Ce modèle permettra d'avoir une structure HTML propre. Il n'y aura plus qu'à passer le contenu du body.
+
+    \begin{enumerate}
+        \item Supprimer la route \texttt{hello} et ajouter la route suivante
+
+            \begin{center}
+                \begin{minipage}{0.9\linewidth}
+                    \inputminted[bgcolor=base3,linenos]{python}{./scripts/bottle_get_form.py}
+                \end{minipage}
+            \end{center}
+        \item Quelle URL doit-on entrer dans le navigateur pour accéder à ce formulaire? Envoyez un nom et étudier la requête.
+        \item On ajoute maintenant la route suivante du type POST pour réceptionner cette requête. Mais avant cela, vous devez ajouter la fonction \texttt{post} dans les imports.
+
+            \begin{center}
+                \begin{minipage}{0.9\linewidth}
+                    \inputminted[bgcolor=base3,linenos]{python}{./scripts/bottle_post_form.py}
+                \end{minipage}
+            \end{center}
+
+        \item Remplissez le formulaire, envoyez le et étudier les requêtes.
+        \item \textbf{Bilan sur les formulaires et les requêtes post}:
+            \begin{enumerate}
+                \item Identifier les nouvelles balises HTML utiles pour créer un formulaire.
+                \item Chercher sur internet d'autres type possible pour la balise \texttt{input}.
+                \item Comment \texttt{bottle} fait pour accéder au information du formulaire lors une requête POST?
+                \item Quelles sont les différences entre transmettre une information avec une requête POST et l'utilisation des query?
+            \end{enumerate}
+    \end{enumerate}
+\end{exercise}
+
+\begin{exercise}[subtitle={Application web avec Bottle - Accès authentifié}, step={2}, origin={Ma tête}, topics={  Interaction client-serveur }, tags={ HTTP, Flask }]
+    Vous devez écrire une application web qui a les routes suivantes :
+    \begin{itemize}
+        \item \textbf{la racine (/)}: contient un formulaire de connexion avec deux champs (utilisateur et mot de passe). L'envoie du formulaire se fait vers la route \texttt{/prive}
+        \item \textbf{/privé}: route avec deux comportements :
+            \begin{itemize}
+                \item Affiche "accès autorisé" sur le couple utilisateur et mot de passe correspond à l'utilisateur et au mot de passe enregistré dans le code l'application.
+                \item Affiche "accès non autorisé" sinon.
+            \end{itemize}
+    \end{itemize}
+\end{exercise}
+
+\begin{exercise}[subtitle={Application web avec Bottle - Accès authentifié}, step={2}, origin={Ma tête}, topics={  Interaction client-serveur }, tags={ HTTP, Flask }]
+    Vous devez écrire une application web qui a les routes suivantes :
+    \begin{itemize}
+        \item \textbf{/ (la racine)}: contient plusieurs formulaires. Un qui permet de savoir si une année est bissextile et un autre qui compte le nombre de jours depuis le début de l'année.
+        \item \textbf{/bissextile}: qui affiche l'année et qui dit si l'année est bissextile ou non.
+        \item \textbf{/jours}: qui affiche la date et le nombre de jour depuis le début de l'année.
+    \end{itemize}
+\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}

1NSI/05_Interaction_client-serveur/scripts/bottle_get_form.py

@@ -0,0 +1,9 @@
+@get('/formulaire')
+def get_formulaire():
+    formulaire = """
+    <form method='post' action='bonjour'>
+    <input type='text' name='nom' placeholder='Votre nom ?'/>
+    <input type='submit' value='Bonjour bottle !'/>
+    </form>
+    """
+    return template("modele_base.html", boby=formulaire)

1NSI/05_Interaction_client-serveur/scripts/bottle_post_form.py

@@ -0,0 +1,6 @@
+@post('/formulaire')
+def bonjour() :
+    nom = bottle.request.forms.get('nom')
+    body = "<p>Bonjour mon(a) che(è)r(e) " + nom + "</p>"
+
+    return template("modele_base.py", body=body)

1NSI/05_Interaction_client-serveur/scripts/bottle_template_app.py

@@ -0,0 +1,7 @@
+from bottle import get, run, template
+
+@get('/page/<utilisateur>')
+def page_utilisateur(utilisateur):
+    return template("utilisateur.html", utilisateur=utilisateur)
+
+run(host='localhost', port=8080, debug=True)

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

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang=fr>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="Author" content="">
+        <title></title>
+	</head>
+
+	<body>
+        {{ body }}
+	</body>
+</html>