Introduction au Framework Flask

Cet article présente la base du micro framework Flask pour la conception de site web en Python

Home flask

Contexte

Lors du développement d'une application web, il faut gérer des fonctionnalités très diverses telles que la gestion des requêtes http, leur routage, les interactions avec la base de données, l'authentification des utilisateurs, la gestion des Cookies, la protection du site vis à vis des requêtes malveillantes, le renvoi de pages html, etc. Le codage de l'ensemble de ses fonctionnalités peut rapidement devenir complexe. Pour aller plus vite (et éviter de réinventer la roue), il est préférable d'utiliser un framework web intégrant déjà l'ensemble de ces fonctionnalités.

Principe

Documentation de Flask: http://flask.pocoo.org/docs/0.12/

Flask est un framework web très léger. Pour développer une application web en Flask, il suffit de coder un fichier Python spécifiant: comment router les requêtes des clients (via le décorateur @app.route(.)) comment traiter les requêtes après routage (via une fonction Python).

Pour vérifier que Flask est bien installé, nous allons créer une application permettant d'afficher la chaîne de caractères "Hello World" sur une page Web. Pour y arriver, nous allons inscrire le code Python suivant dans un fichier nommé server.py.

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'

Les deux premières lignes permettent d'importer la librairie Flask et de créer votre application web. La 4ieme ligne est un décorateur de fonction Python. Un décorateur de fonction est une fonction qui modifie le comportement d'une autre fonction. Ici, ce décorateur indique que les requêtes pointant vers l'url "/" doivent être traitées par la fonction hello\_world. La fonction hello\_world renvoie ici simplement la chaine de caractères "Hello, World!"

Pour lancer notre première application web, rien de plus simple !

  • Dans votre terminal, nous allons lancer les commandes suivantes
$ export FLASK_APP=server.py
$ flask run

Si tout se passe bien, Flask doit afficher les lignes suivantes sur votre terminal:

$ * Serving Flask app "server"
$ * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
  • Pour tester votre application, nous allons ouvrir notre navigateur internet à l'adresse spécifiée par Flask (ici http://127.0.0.1:5000/).

Si tout fonctionne bien, la page web doit alors afficher la chaine "Hello, World!".

Implémentation (Part I)

Pour implémenter notre application, nous allons tout d'abord stocker nos contacts dans une liste python nommée contact_list. Cette liste sera initialisée directement dans le fichier server.py.

Dans notre premier version de notre application, nous allons uniquement router l'url "/" vers une fonction index(). La fonction index() devra ensuite construire un tableau HTML (balise <table>) listant l'ensemble des éléments de la liste contact_list.

from flask import Flask
app = Flask(__name__)

contact_list=[{"nom":"Einstein","prenom":"Albert","tel":"06.00.00.00.00","mail":"albert@emc2.com"},
              {"nom":"Shannon","prenom":"Claude","tel":"06.00.00.00.00","mail":"claude@fesup2fmax.com"},
              {"nom":"Fourier","prenom":"Joseph","tel":"09.00.03.00.01","mail":"joseph@maserie.fr"}]

@app.route('/')
def index():
    #construction de la chaine html

    html="<!DOCTYPE html>\n"
    html=html+"<html>\n"
    html=html+"<head><title>Mon site de gestion de contact</title></head>\n"
    html=html+"<body>\n"
    html=html+"<h1>Mes contacts</h1>\n"
    html=html+"<table>\n"
    html=html+"<tr>\n"
    html=html+"<th>Nom</th><th>Prenom</th><th>Telephone</th><th>Email</th>"
    html=html+"</tr>\n"

    for indice in range(len(contact_list)):
        mon_contact=contact_list[indice]

        html=html+"<tr>\n"
        html=html+"<td>"+mon_contact["nom"]+"</td>\n"
        html=html+"<td>"+mon_contact["prenom"]+"</td>\n"
        html=html+"<td>"+mon_contact["tel"]+"</td>\n"
        html=html+"<td>"+mon_contact["mail"]+"</td>\n"
        html=html+"</tr>\n"

    html=html+"</table>\n"
    html=html+"</body>\n"
    html=html+"</html>\n"
    return html

L'image ci-dessous présente la première page de notre application.

Application de gestion de contacts

Le code complet de notre application est disponible sur Github.