TP
Flask

Application WEB

Sommaire

01.

Flask !

Installation

02.

Une première page

Hello World!

03.

D'autres pages

Décorateur et URL.

04.

Template

Un peu de ménage.

045.

Formulaire

Échanger des données.

1. Installation.


Initialisation de l'application



Flask se base sur deux modules Werkzeug et Jinja2 pour proposer plusieurs des fonctionnalités suivantes :
  • Serveur de développement
  • Moteur de template pour le rendu HTML.
  • Debugger


Préparation de l'espace de travail

Préparation de l'espace de travail

  1. Créer un dossier tp_flask
  2. Dans le dossier tp_flask, créer un fichier app.py
  3. Dans le dossier tp_flask, créer un dossier templates
  4. Dans le dossier tp_flask, créer un dossier static
  5. Dans le dossier static, créer les dossier css, js et image


Installation du package Flask

Pour vous servir de Flask à la maison, il nécessaire d'installer le framework. Dans un terminal, taper :
pip install --user flask
1. Une première page
pokemon

Création d'une première page


Accéder aux pages de notre serveur WEB

Dans le TP comme tout se passe sur notre ordinateur, on utilisera localhost pour accéder à notre serveur.
Et petite subtilité, un serveur HTTP peut fonctionner sur différents ports.
Par défaut, le serveur HTTP intégré à Flask fonctionne sur le port 5000, il faut donc le préciser dans l’adresse du navigateur.
Ce qui donne au final l’adresse http://localhost:5000/ pour accéder à la racine notre application.

Une première page


Le code ci-dessous ouvre le fichier app.py
from flask import Flask 

# Creation de l'application
app = Flask(__name__)

# Dans cette partie on mettra toutes le fonctions definissant les pages
@app.route("/", methods=["GET"])
def index():
    return "Hello, World!"


# Toujours garder ces lignes en toute fin, elle lance l'application
if __name__ == "__main__":
    app.run(host="0.0.0.0", debug=True)
    

                    


  Accéder à notre première page


  • Démarrer l'application Flask en lançant le fichier app.py (ctrl + B avec Sublime Text )
  • Ouvrir la page créer dans le navigateur http://localhost:5000/
3. Une seconde page !!!
pokemon


Les décorateurs





Pour savoir quelle fonction le serveur doit être exécuter Flask utilise le système de décorateur (cette notion de décorateur ne sera pas traitée en NSI).
Pour la première page, le décorateur était @app.route("/"), ainsi la requête http://localhost:5000/ ou http://localhost:5000/ exécute la fonction index

Pour créer une nouvelle page, on va créer une nouvelle fonction et l'associer à un nouveau décorateur.


Une seconde page



Dans cette section, nous allons voir comment créer une seconde page :

Dans le fichier app.py ajouter une route vers une nouvelle page /page2



Code

Insérer le code suivant dans le fichier app.py. Le code est à insérer après la fonction index et avant la ligne if __name__ == "__main__":
@app.route("/page2/", methods=["GET"])
def page2():
    return """
<html>
    <head>
        <style>
            h1{
                color:darkorange;
            }
        </style>
    </head>
    <body>
        <h1>Une page très utile</h1>
        <p>
        Enfin presque ...
         </p>
    </body>
</html>  
    
"""
                            




  A faire


Accéder à notre seconde page
  • Démarrer, si nécessaire, l'application Flask
  • Ouvrir la page créée dans le navigateur
Quelle URL permet d'accéder à la page ?






4. Template.


Le système de template

Jinja


Avec les nouvelles pages le code du serveur devient difficilement lisible. Le HTML est mélanger au python et le nombre de lignes augmentent fortement même pour une petite page. Il est temps de faire du ménage.
On va séparer le code python, code HTML ainsi la partie affichage et la partie opérationnelle seront séparées.
Pour ce faire on va utiliser un système de template :. C'est un modèle de la page HTML qui sera utilisée par la vue pour générer la page HTML envoyée au client. On peut la voir comme un texte à trous dans lesquels seront insérées les données calculées par le contrôleur.

Utiliser le rendu de template

A faire

  • >Le HTML Dans le dossier templates, créer un fichier heure.html.
    Et y insérer le code HTML suivant
    <!doctype html>
    <html lang=fr>
        <head>
            <meta charset="utf-8">
            <title>"Horloge"></title>
        </head>
        <body style="background-image:url('https://exomorphisme.fr/static/cours/pnsi/th4/th4b/images/horloge.jpg'); background-size:cover">
            <div style="position:left;max-width:360px;">
            <h1>Horloge</h1>
                Il est : 
    {{heure}} </div> </body> </html>
  • >Python Dans fichier app.py, ajouter render_template dans les fonctions importer.
    from flask import Flask

    devient
    from flask import Flask, render_template

    Puis dans l'application :
    
    @app.route('/heure')
    def heure():
        from datetime import datetime
        heure = datetime.now()
        return render_template("heure.html", heure=heure)
    


    A faire

    • Accéder à la page
    Quelle donnée a été interpréter par le moteur de template ?




    Comment l'application flask a-t'elle transmis la variable heure au moteur de template ?




5. L'Interaction.
pokemon


L'échange de données

Dans cette partie nous allons demander créer un générateur de code L33T.
Pour être bissextile, une année doit remplir l'un des deux critères suivants :
  1. L'année doit être divisible par 4 et non divisible par 100
  2. L'année doit être divisible par 400

A faire

Nous allons construire 2 pages HTML :
  • la première contenant un formulaire pour transmettre les informations de l'utilisateur.
  • la seconde servant à l'affichage des résultats.

HTML

Page 1 : annee.html
Dans le dossier templates, créer un fichier annee.html qui contiendra un formulaire dont la méthode sera POST et qui renverra sur la route annee
  • Un input de type number dont l'attribut name est annee
  • Un button de type submit
Page 2 : rendu.html
  • Dans le dossier templates, créer un fichier rendu.html.
    La page doit contenir un bloc de variable Jinja, nommé rendu pour afficher le résultat. Il peut contenir un bloc de variable Jinja nommé annee si vous le juger nécessaire.

Python

  • Dans fichier app.py, créer la fonction bissextile Au niveau du décorateur, cette fonction doit être appelée par l'URL /bissextile/ et accepter les méthodes GET et POST.
    • En cas d'utilisation de la méthode GET (par défaut), la fonction retourne le rendu du template annee.html, pour permettre à l'utilisateur d'accéder au formulaire.
    • En cas d'utilisation de la méthode POST, la fonction récupère l'année envoyer dans la requête. Puis déterminer si l'année est bissextile ou non et enfin renvoie le rendu du template rendu.html ( voir ci-dessous la partie Interaction avec le formulaire )
    • A l'aide d'un décorateur lier la route /bissextile/ à la fonction bissextile
    • Définir une fonction bissextile qui ne prend aucun paramètre
    • Si la requête est de type POST:
      • recupérer dans la variable annee la valeur transmise par le requête
      • Si annee est divisible par 4 et si annee n'est pas divisible par 100
      • Alors rendu est "L'année est bissextile"
      • Sinon si annee est divisible par 400
      • Alors rendu est "L'année est bissextile"
      • Sinon rendu est "L'année n'est pas bissextile"
    • Sinon renvoyer le rendu de la templage "annee.html"


    Interaction avec le formulaire.


    Pour que le serveur Flask puisse gérer les différentes requêtes faites par le client, il faut ajouter le module request dans l'importation de Flask.
    Modifier la ligne d'importation de Flask pour ajouter l'importation de request

    La ligne 1 :
    from flask import Flask, render_template
    devient
    from flask import Flask, render_template, request


    Dans la fonction, pour distinguer les requêtes ayant une méthode post, on peut utiliser l'instruction :
    request.method


    Qui vaudra soit GET si la requête provient de la barre d'URL, soit POST si la requête provient du formulaire.



    Pour récupérer la valeur d'une entrée utilisateur transmise par une requête POST, il faut connaitre son attribut name.
    Si par exemple, le formulaire contient un input dont l'attribut name email, on peut récupérer la valeur à l'aide de l'instruction :
         request.form["email"]