\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{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}
    \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}
                    \label{bottle_base}

                \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 fichier \texttt{utilisateur.html} dans lequel vous mettrait le code HTML suivant

                    \begin{center}
                        \begin{minipage}{0.9\linewidth}
                            \inputminted[bgcolor=base3,linenos]{html}{./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}

\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={Projet Bottle - Années}, 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}
    Bonus : du CSS à votre site (pensez à ajouter la route pour servir le fichier)
\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{tasks}
        \item Parmi les éléments suivants, lequel est un protocole?
            \begin{tasks}(4)
                \task GET
                \task POST
                \task HTTP
                \task HTML
            \end{tasks}
        \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{tasks}
        \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{tasks}
        \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{tasks}
        \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
            \end{tasks}
    \end{enumerate}
\end{exercise}