Archi Flask

Identification

Infoforall

Flask sur alwaysdata


Cet article vous montre comment monter facilement un site Flask en ligne.

Logo FLASK

Vous trouverez de nombreux tutos en ligne expliquant comment créer un site Flask local (c'est facile, du moment qu'on dispose des droits nécessaires sur la machine).

Cet article traite de l'installation d'un site sur un serveur distant, ici hébergé chez alwaysdata.

1 - Création du site Flask

L'hébergeur alwaysdata permet de configurer manuellement vos sites mais il offre également des installations automatiques de beaucoup de solutions, dont Flask, Django...

Flask est une bibliothèque permettant de générer un site Web dynamique tournant sous Python. Le moteur est donc un ensemble de scripts Python qui vont générer la distribution des fichiers HTML, CSS, JAVASCRIPT...

Lorsque vous aurez besoin de renseignements sur la façon d'utiliser le module Python Flask, il suffira de partir sur la page du projet en cliquant sur cette image par exemple :

Logo FLASK

En attendant,

  1. Connectez vous à votre console d'administration Alwaysdata.
  2. Allez dans l'onglet Site. Vous devriez y trouver votre site de base, soit en PHP, soit en tant que serveur statique.
  3. Cliquez sur Installer une application en haut à droite.
  4. Les sites au début
  5. Recherchez l'application Flask, puis réalisez ces réglages par exemple :
  6. Les sites au début

    On donne l'adresse du site : ici, testprofad.alwaysdata.net/fk, pour le différencier du site de base comme vous n'avez pas acheter de nom de domaine.

    On demande d'installer le module dans le répertoire /home/testprofad/monsiteflask

    Notez bien que je n'ai pas demandé à placer les fichiers directement dans le répertoire www normalement dédié à ce que vous voulez fournir sans trop de sécurité. Y mettre vos fichiers Python n'est pas une bonne idée.

  7. Vous devriez maintenant avoir deux sites.
  8. Les 2 sites
  9. Cliquez sur l'adresse de votre nouveau site :
  10. Hello

2 - Explication sur la forme initiale du site Flask

Si vous explorez maintenant vos répertoires avec FileZilla, vous devriez voir ceci :

Structure

Le répertoire env contient les informations liées à l'environnemnet virtuel Python qui fait tourner votre site. Demandez moi des informations ou renseignez vous sur cette bonne pratique de programmation si vous voulez en savoir plus.

Le projet en lui-même se trouve dans le fichier __init__.py et dans le sous-répertoire templates.

Voici le contenu de votre fichier __init__.py :

1 2 3 4 5 6 7 8 9 10 11
from flask import Flask from flask import render_template app = Flask(__name__) @app.route('/') def hello_world(): return render_template('hello.html') if __name__ == "__main__": app.run(debug=True)

On voit :

  • L01 : on importe la classe Flask dont on pourra utiliser le constructeur pour créer notre application.
  • L02 : on importe la fonction render_template qui va nous permettre de générer une page HTML dynamique à l'aide d'un modèle (template). Nous y reviendrons dans quelques instants
  • L04 : on crée une instance de Flask qu'on stocke dans la variable app.
  • 06-07-08 : on définit une fonction hello_world() qui renvoie du HTML : celui provoqué par l'action du template hello.html. La ligne 06 contient un appel à un décorateur de fonction (hors programme en NSI). En deux mots, il s'agit d'une fonction qui modifie ou étend le comportement d'une autre fonction, sans en changer directement le code. Ici, le décorateur est assez simple à comprendre : il permet de définir sous quelle condition on doit lancer notre fonction : si la requête HTTP demande directement la racine du site ("/").
  • L10-L11 : s'il s'agit bien d'un lancement direct, se mettre en mode DEBUG. Très dangereux en production réelle car en cas de problème, le mode DEBUG permet d'afficher directement certaines données du site pour comprendre d'où vient l'erreur. Bien entendu, on apprend des choses qui peuvent potentiellement permettre de pirater votre site. Pensez à mettre False assez rapidement et à téléverser à nouveau votre fichier au bon endroit.

Passons au fichier-template hello.html :

1 2 3
<!doctype html> <title>Hello from Flask</title> <h1>Hello, World!</h1>

Comme vous le voyez, c'est juste un fichier de test. Il manque les balises html, head et body.

Comment atteindre cette page ? Elle est accessible depuis "/", il suffit donc de demander testprofad.alwaysdata/fk.

Accueil

Mais vous avez maintenant la structure du code : lorsqu'on reçoit une requête, on analyse sa route pour trouver quelle fonction appeler pour faire le rendu de la réponse.

3 - Envoi de paramètres aux templates

L'un des intérêts des templates est qu'on peux leur fournir des paramètres, comme une fonction : le code HTML de sortie va donc dépendre des valeurs qu'on a fourni en entrée !

Voici le nouveau fichier __init__ qu'il faudra placer à la racine de votre projet :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
from flask import Flask from flask import render_template import random app = Flask(__name__) @app.route('/') def hello_world(): return render_template('hello.html') @app.route('/alea/') def notes_alea(): prenoms = ["Alice", "Bob", "Charlie"] p = prenoms[random.randint(0, len(prenoms)-1)] return render_template('affiche_notes.html', prenom=p, notes=[random.randint(0,20) for _ in range(3)] ) if __name__ == "__main__": app.run(debug=False)

La grande différence est donc qu'on envoie à la fonction render_template plusieurs choses : d'abord le nom du template à utiliser mais surtout deux paramètres nommés prenom et notes :

return render_template( 'affiche_notes.html', prenom=p, notes=[random.randint(0,20) for _ in range(3)] )

Et voici le template affiche_notes.html qu'il faut rajouter dans le répertoire templates :

1 2 3 4 5 6 7 8 9 10 11 12 13
<!doctype html> <html> <head> <title>Page Flask avec paramètres</title> <meta charset="UTF-8"> </head> <body> <h1>Affichage des notes de {{prenom}}</h1> <p>Note 1 : {{notes[0]}}</p> <p>Note 2 : {{notes[1]}}</p> <p>Note 3 : {{notes[2]}}</p> </body> </html>

Comme vous le voyez un template peut donc recevoir des paramètres comme une fonction et peut calculer une expression fournie entre accolades {{ et }} comme une sorte de f-string généralisé. La seule différence est qu'on doit placer à chaque fois deux accolades plutôt qu'une seule avec les f-strings.

Comment atteindre cette page ? Elle est accessible depuis "/alea/", il suffit donc de demander
testprofad.alwaysdata/fk/alea/

Aléatoire

4 - Envoi de paramètres aux pages qui transmettent aux templates

Vous avez vu qu'on pouvait envoyer des informations lors d'une requête, soit avec un GET (on envoie les infos directement dans l'URL), soit avec un POST (on envoie les infos en les plaçant sous l'en-tête HTTP).

Par exemple : testprofad.alwaysdata.net/fk/notes?pre=Alice&not=12,15,20

On voit qu'on rajoute ? après le nom voulu de la page et qu'on fournit ensuite les valeurs des paramètres. Notez qu'on sépare les paramètres par & et pas la virgule.

Ici, on envoie donc deux paramètres : pre et not.

Comme avec input() en Python, tous ces envois sont sous forme de strings. Il faudra donc faire nos transtypages à la main.

Voici le nouveau fichier __init__ qu'il faudra placer à la racine de votre projet :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
from flask import Flask from flask import render_template from flask import request # Gestion GET et POST import random app = Flask(__name__) @app.route('/') def hello_world(): return render_template('hello.html') @app.route('/alea/') def notes_alea(): prenoms = ["Alice", "Bob", "Charlie"] p = prenoms[random.randint(0, len(prenoms)-1)] return render_template('affiche_notes.html', prenom=p, notes=[random.randint(0,20) for _ in range(3)] ) @app.route('/direct/') def notes_direct(): p = "Aucun élève" if request.args.get('pre'): # Si on a bien un paramètre pre dans la requête - Notez les parenthèses p = request.args['pre'] # On récupére "Alice" si '?pre=Alice&not=12,15,30 - Notez les crochets n = [-1,-1,-1] if request.args.get('not'): # Si on a bien un paramètre not dans la requête - Notez les parenthèses ns = request.args['not'] # On récupére "12,15,30" si '?pre=Alice&not=12,15,30 - Notez les crochets nt = ns.split(',') # On obtient ['12', '15', '30'] si ns = "12,15,30" n = [int(v) for v in nt] # On crée [12,15,30] par compréhension return render_template('affiche_notes.html', prenom=p, notes=n ) # On utilise le même template qu'avant ! if __name__ == "__main__": app.run(debug=False)

Lisez bien la nouvelle fonction, la seule difficulté vient de la conversion des strings reçus en tableaux Python. On utilise pour cela la méthode split() puis une création par compréhension.

Notez également qu'on commence par tester si l'objet args qui contient les arguments/paramètres de la requête possède bien le paramètre voulu : en interne, cet objet est un dictionnaire. Or, checher une clé inexistante lève une exception, ce qu'on ne désire pas.

En analysant le code, on voit qu'on est ici plutôt sur de la programmation défensive : on filtre les entrées de l'utilisateur et on leur donne au besoin une fausse valeur qui ne provoquera pas d'erreur plutôt que des transmettre des valeurs erronées au template. Par contre, nous n'avons pas été jusqu'à compter que nous avons bien trois notes ect...

Comment atteindre cette page ? Elle est accessible depuis "/alea/", il suffit donc de demander
http://testprofad.alwaysdata.net/fk/direct/?pre=Alice&not=15,12,10

Direct

Article publié le 19 01 2025
Dernière modification : 19 01 2025
Auteur : ows. h.