diff --git a/1NSI/05_Interaction_client-serveur/exercises.tex b/1NSI/05_Interaction_client-serveur/exercises.tex index a1f250c..bfd0eff 100644 --- a/1NSI/05_Interaction_client-serveur/exercises.tex +++ b/1NSI/05_Interaction_client-serveur/exercises.tex @@ -1,7 +1,102 @@ -\begin{exercise}[subtitle={<++>}, step={1}, origin={<++>}, topics={ Interaction client-serveur }, tags={ HTTP, Flask }] - <++> +\begin{exercise}[subtitle={Requêtes et réponses}, step={1}, origin={Ma tête}, topics={ Interaction client-serveur }, tags={ HTTP, Flask }] + \begin{enumerate} + \item Ouvrir le navigateur, allez chercher les outils de développement (\texttt{F12}) puis allez sur l'onglet \texttt{Réseau} (ou network). + \begin{enumerate} + \item Allez à l'adresse \url{raw.opytex.org}.. Faire apparaitre les colonnes \texttt{chemin} (ou path) et \texttt{url}. + \item En cliquant sur la requête, noter la méthode, le domaine (host), le fichier, l'adresse IP de la requête et l'état (ou status) de la réponse. \label{element} + \item Faire la même chose pour l'adresse \\ \url{https://raw.opytex.org/1NSI/05_Interaction_client-serveur/}. + \item La requête vers l'adresse \url{https://optez.org} engendre plusieurs requêtes noter les éléments (précisés à la question \ref{element}) pour chacune d'entre elles. + \end{enumerate} + \item Éléments théoriques - recherche documentaire + \begin{enumerate} + \item Expliquer le rôle que joue les méthodes vues dans les questions précédentes + \item Expliquer le rôle que joue les codes status vus dans les questions précédentes + \end{enumerate} + \end{enumerate} \end{exercise} -\begin{solution} - <++> -\end{solution} + +\begin{exercise}[subtitle={Faire son serveur web avec Bottle}, 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} + \end{center} + \begin{enumerate} + \item \textbf{Mise en place de Bottle et vérifications} + \begin{enumerate} + \item Copier-coller le code suivant (tiré de la documentation) pour initialiser l'application. + + \begin{center} + \begin{minipage}{0.9\linewidth} + \inputminted[bgcolor=base3,linenos]{python}{./scripts/bottle_base.py} + \end{minipage} + \end{center} + + \item Exécuter votre programme puis rendez-vous avec le navigateur à l'adresse + + \url{http://localhost:8080/hello} + + Étudiez la requête (méthode, domaine, fichier et status). + \item Rendez-vous avec le navigateur à l'adresse \url{http://localhost:8080/plop}. Étudiez la requête (méthode, domaine, fichier et status). + \item Relier ce que vous avez noté aux questions précédentes avec le code exemple de Bottle. + \item Comment peut-on ajouter d'autres chemins à notre application? + \end{enumerate} + + \item \textbf{Requêtes GET} + + Pour toutes les questions suivantes, vous devrez tester votre travail en visitant la page associée et vous noterez l'URL. + \begin{enumerate} + \item Supprimer le chemin \texttt{/hello}. + \item Ajouter le chemin accessible à la racine de l'application (\texttt{/}) qui saluera les nouveaux venus. + \item Ajouter le chemin \texttt{/about} qui vous présentera (en une phrase). + \item Ajouter le chemin \texttt{/bottle} qui vous donnera le lien (cliquable) vers la documentation de Bottle. + \item (*) On peut créer des chemins dynamiques en suivant la syntaxe suivante + + \begin{center} + \begin{minipage}{0.9\linewidth} + \inputminted[bgcolor=base3,linenos]{python}{./scripts/bottle_route_dynamique.py} + \end{minipage} + \end{center} + + Ajouter ce chemin à votre application. Proposez plusieurs URL qui l'utilisent. + + \item On peut aussi configurer des \texttt{query} + + \begin{center} + \begin{minipage}{0.9\linewidth} + \inputminted[bgcolor=base3,linenos]{python}{./scripts/bottle_query.py} + \end{minipage} + \end{center} + + Ajouter ce chemin à votre application sans oublier d'ajouter les nouveaux imports. En reprenant votre cours sur les URL, trouver l'URL qui permet d'avoir sur votre navigateur le message + \begin{center} + Bob a 5 ans. + \end{center} + + \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 + + \begin{center} + \begin{minipage}{0.9\linewidth} + \inputminted[bgcolor=base3,linenos]{python}{./scripts/utilisateur.html} + \end{minipage} + \end{center} + + Ajoutez la fonction \mintinline{python}{template} dans les imports de bottle. Puis modifier le chemin \texttt{page\_utilisateur} pour avoir le contenu suivant + + \begin{center} + \begin{minipage}{0.9\linewidth} + \inputminted[bgcolor=base3,linenos]{python}{./scripts/bottle_template.py} + \end{minipage} + \end{center} + + Visitez plusieurs pages utilisateur et constatez les différences. + + Comment fait-on pour utiliser une variable python dans modèle? + \end{enumerate} + + + \end{enumerate} + +\end{exercise} diff --git a/1NSI/05_Interaction_client-serveur/plan_de_travail.pdf b/1NSI/05_Interaction_client-serveur/plan_de_travail.pdf new file mode 100644 index 0000000..1b9b465 Binary files /dev/null and b/1NSI/05_Interaction_client-serveur/plan_de_travail.pdf differ diff --git a/1NSI/05_Interaction_client-serveur/plan_de_travail.tex b/1NSI/05_Interaction_client-serveur/plan_de_travail.tex index 9097085..48ca3d5 100644 --- a/1NSI/05_Interaction_client-serveur/plan_de_travail.tex +++ b/1NSI/05_Interaction_client-serveur/plan_de_travail.tex @@ -1,5 +1,6 @@ \documentclass[a4paper,12pt]{article} \usepackage{myXsim} +\usepackage{minted} \author{Benjamin Bertrand} \title{ Interaction client-serveur - Plan de travail} @@ -25,11 +26,6 @@ Savoir-faire de la séquence \item \end{itemize} -\bigskip - -Ordre des étapes à respecter - - \section{} \listsectionexercises diff --git a/1NSI/05_Interaction_client-serveur/scripts/bottle_base.py b/1NSI/05_Interaction_client-serveur/scripts/bottle_base.py new file mode 100644 index 0000000..6b19aa9 --- /dev/null +++ b/1NSI/05_Interaction_client-serveur/scripts/bottle_base.py @@ -0,0 +1,7 @@ +from bottle import get, run + +@get('/hello') +def hello(): + return "Hello World!" + +run(host='localhost', port=8080, debug=True) diff --git a/1NSI/05_Interaction_client-serveur/scripts/bottle_query.py b/1NSI/05_Interaction_client-serveur/scripts/bottle_query.py new file mode 100644 index 0000000..96348c8 --- /dev/null +++ b/1NSI/05_Interaction_client-serveur/scripts/bottle_query.py @@ -0,0 +1,14 @@ +from botte import request, get + +@get('/age') +def age_de(): + + name = request.query.name + age = request.query.age + + if age > 1: + return name, " a ", age, " ans." + elif age <= 0: + return "Mouai..." + else: + return name, " a ", age, " an." diff --git a/1NSI/05_Interaction_client-serveur/scripts/bottle_route_dynamique.py b/1NSI/05_Interaction_client-serveur/scripts/bottle_route_dynamique.py new file mode 100644 index 0000000..698ffef --- /dev/null +++ b/1NSI/05_Interaction_client-serveur/scripts/bottle_route_dynamique.py @@ -0,0 +1,3 @@ +@get('/page/') +def page_utilisateur(utilisateur): + return "Bonjour ", utilisateur, ". Comment allez vous?" diff --git a/1NSI/05_Interaction_client-serveur/scripts/bottle_template.py b/1NSI/05_Interaction_client-serveur/scripts/bottle_template.py new file mode 100644 index 0000000..38890dc --- /dev/null +++ b/1NSI/05_Interaction_client-serveur/scripts/bottle_template.py @@ -0,0 +1,3 @@ +@get('/page/') +def page_utilisateur(utilisateur): + return template("utilisateur.html", utilisateur=utilisateur) diff --git a/1NSI/05_Interaction_client-serveur/scripts/utilisateur.html b/1NSI/05_Interaction_client-serveur/scripts/utilisateur.html new file mode 100644 index 0000000..d07683c --- /dev/null +++ b/1NSI/05_Interaction_client-serveur/scripts/utilisateur.html @@ -0,0 +1,14 @@ + + + + + + Page de {{utilisateur}} + + + +

{{ utilisateur }}

+

Cette page change en fonction de l'utilisateur.

+

Elle sait même faire des calculs 1+1 = {{1+1}}

+ +