RESSOURCES PYTHON – Webapp Fonctionnalités avancées Flask

Python : Personnalise ta webapp avec Flask !

Personnalise ta webapp

Dans cette section, tu verras comment personnaliser ta webapp avec Flask, du HTML et du CSS !

Tu trouveras ici des idées de créations et des tuto autour de :

- créer une page personnalisée
- comment intégrer HTML & CSS
- comment personnaliser une page d’erreur
- comment renvoyer une erreur
- comment renvoyer vers une autre page (autre route)
- comment importer une image
- comment ajouter un formulaire
- comment importer des sons

Page personnalisée

Pour aller plus loin, on peut spécifier un nom d’utilisateur pour créer une page personnalisée, à récupérer en argument pour notre fonction:

Voici le code:

@app.route('/hello/')
def coucou(username):
	return("Hello " + username + "!")

Intégrer de l'html et du css

La structure des fichiers

Le module flask permet également d’afficher une page html, tu peux donc faire un fichier html et l’afficher sur ton site ! Tu dois avoir une structure de fichiers spéciale pour qu’il puisse chercher un fichier .html. Le module render_template de flask permet d’importer les pages html.

Voici la structure spéciale qu’il faut avoir pour afficher une page html et ajouter un css qu’il faut spécifier, comme ceci:

Structure des fichiers (où monfichier.py comporte le programme python):

Ligne à spécifier pour utiliser du css dans le fichier .html :

<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='main.css') }}">

Renvoyer du HTML

Avant tout, on va donc créer un dossier templates dans lequel on va ranger nos différents templates. Il est essentiel que le dossier s’appelle templates et que les fichiers soient rangés dedans car Flask va aller chercher dans ce dossier. Si le template n’est pas bien rangé, il n’arrivera pas à le trouver.

La fonction que nous allons utiliser s’appelle render_template. On commence par l‘importer.

Puis dans la fonction de notre route, au lieu de retourner simplement du texte, on retourne la page HTML que l’on a créé avec render_template()

Utiliser des arguments pour personnaliser

Tu peux également donner un argument en paramètre de la fonction render_template et l’intégrer à ton code html ! Il suffit de rajouter en argument de la fonction le nom de la variable: name=moi

#Affiche la page avec un parametre (page stylee)
@app.route('/cestmieux/')
def super(moi):
	return render_template('elements.html', name=moi)

Dans la page html, on peut choisir d’afficher le nom s’il est donné ou pas:

Tu affiches une variable comme ceci: {{ variable }}

{% if name %}
 	<h1>Hello {{ name }}!</h1>
{% else %}
 	<h1>Hello, World!</h1>
{% endif %}

Personnaliser une page d'erreur

Tu connais l’erreur 404 affichée dans ton navigateur ?! Ça veut dire que la page trouvée n’existe pas ! Voilà un exemple:

On peut construire une fonction lorsque cette erreur apparaît. C’est très pratique lorsqu’un utilisateur se trompe d’adresse, cela permet d’afficher une page élégante par exemple !

Il suffit de rajouter cette ligne (en spécifiant l’erreur que l’on veut modifier en argument):

@app.errorhandler(404)

Voici le code au complet:

#Change la page d'erreur 404 (page non trouvee)
@app.errorhandler(404)
def page_not_found(error):
    return render_template('hello.html'), 404

Renvoyer une erreur

Le sous-module abort de flask permet de renvoyer une erreur si l’on accède à une page, par exemple. On spécifiera le code d’erreur en argument, comme ici:

#Renvoie un message d'erreur lorsqu'on accede a la page
@app.route('/coucou')
def index():
    abort(401)

Lien vers une autre page

Depuis ton code HTML

Si tu veux ajouter un lien vers autre page de ta webapp, tu peux utiliser la balise html de lien que tu connais et noter directement le chemin de page :

<a href="/double">

Depuis ton code Python

Dans certaines situations, on peut vouloir faire une action spécifique, mais ne pas afficher de page spécifique à cette action, mais plutôt rediriger vers l’accueil.

Par exemple si on se déconnecte, on va vouloir faire l’action de déconnexion, mais pas forcement arriver sur une page « Vous avez bien été deconnecté ». On peut préférer renvoyer sur la page d’accueil, ou la page de connexion.

On va importer les fonctions redirect et url_for : redirect permet de rediriger et url_for de spécifier la fonction à exécuter pour la redirection.

Puis dans la fonction de notre route, au lieu de retourner une page, on redirige vers la fonction de notre choix.

Importer une image

Afficher une image

Pour ajouter une image dans notre fichier HTML, on va utiliser une formule spéciale pour appeler l’image. Attention au nom du dossier où tu ranges ton image :

<img src= {{ url_for('static', filename='images/img.jpg'}} />

permettre à l'utilisateur d'importer une image

Si tu souhaites permettre à l’utilisateur d’uploader des images, la démarche est un peu plus compliquée.

Dans notre code Python, il nous faut des modules supplémentaires :

from flask import Flask
from flask import render_template,redirect, url_for, request, send_from_directory
import os
from werkzeug.utils import secure_filename

On va configurer des paramètres pour pouvoir sauvegarder le fichier localement :

#-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-#
#               Config pour upload                  #
#-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-#

UPLOAD_FOLDER = './static/images'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

ALLOWED_EXTENSIONS = set(['jpg', 'jpeg'])

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

- On définit le dossier où on enregistre l’image (UPLOAD_FOLDER). Ici on va enregistrer l’image dans le dossier ‘images’ du dossier ‘static’.
- On définit les extensions autorisées. Ici on autorise les fichiers png, jpg, et jpeg.

On crée ensuite une page pour upload des images :

#-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-#
#               Page pour upload                    #
#-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-#

@app.route('/upload', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        # check if the post request has the file part
        if 'file' not in request.files:
            print('No file part')
            return redirect(request.url)
        file = request.files['file']
        # if user does not select file, browser also
        # submit an empty part without filename
        if file.filename == '':
            print('No selected file')
            return redirect(request.url)
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], "img.jpg"))
            return redirect("filtres")
    return render_template('upload.html')

- On utilise la méthode POST pour envoyer des données
- On vérifie qu’il y ait bien un fichier chargé et avec une extension autorisée
- On sauvegarde l’image dans notre dossier et on lui donne le nom ‘img.jpg’ pour pouvoir l’appeler facilement après
- On redirige vers la page voulue (ici la page ‘filtres’)

Dans notre page HTML, on ajoute un formulaire :

	<form method=post enctype=multipart/form-data>
			<input type=file name=file>
			<input type=submit value=Upload>

- on définit la méthode
- on définit le type de données entrées et le nom pour l’utiliser dans notre code Python

Si tu as envie d’en savoir plus, tu peux regarder la doc de Flask sur le sujet mais attention, elle est en anglais.

Attention dans le cas où tu affiches une image dans ton fichier HTML, si tu la modifies dans le code Python mais en gardant le même nom pour la nouvelle image, ton image ne se mettra pas à jour ! Pour y remédier, tu peux ajouter une variable ‘version’ qui modifiera le nom complet de l’image que ton code va chercher et le forcera donc à la mettre à jour. Si tu as un cas similaire, va voir le code du projet exemple filtres ou sons ou demande de l’aide à ton animateur.

Ajouter un formulaire

On a d’abord besoin d’une nouvelle balise dans notre page HTML, la balise form qui permet de récupérer des données :

	<form method="POST" action=/decrypt>
			<input type="text" name="texte_input">

- on définit la méthode et la page vers laquelle on redirige une fois le texte entré
- on définit le type de données entrées et le nom pour l’utiliser dans notre code Python

On ajoute dans notre code Python :

@app.route("/crypto", methods=['POST'])
def texte() :

    # on recupère l'input de l'utilisateur
    texte_utilisateur = request.form['texte_input']

- sur la page où on redirige l’utilisateur une fois son texte entré, on définit la méthode
- on récupère le texte entré dans une variable
- il faut auparavant importer le module request de flask !

Uploader des sons

Pour uploader des sons, la démarche est la même que pour des images, on va simplement spécifier les extensions que l’on souhaite :

Dans notre code Python, il nous faut des modules supplémentaires :

from flask import Flask
from flask import render_template, redirect, url_for, request, send_from_directory
import os
from werkzeug.utils import secure_filename

On va configurer des paramètres pour pouvoir sauvegarder le fichier localement :

#-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-#
#               Config pour upload                  #
#-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-#

UPLOAD_FOLDER = './static/sons'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

ALLOWED_EXTENSIONS = set(['mp3'])

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

- On définit le dossier où on enregistre l’image (‘UPLOAD_FOLDER’)
- on définit les extensions autorisées (ici seulement ‘mp3’)

On crée ensuite une page pour upload des sons :

#-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-#
#               Page pour upload                    #
#-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-#

@app.route('/upload', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        # check if the post request has the file part
        if 'file' not in request.files:
            print('No file part')
            return redirect("upload")
        file = request.files['file']
        # if user does not select file, browser also
        # submit an empty part without filename
        if file.filename == '':
            print('No selected file')
            return redirect("upload")
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], "son.mp3"))
            return redirect("sons")
    return render_template('upload.html')

- On utilise la méthode POST
- On vérifie qu’il y ait bien un fichier chargé et avec une extension autorisée
- On sauvegarde le son dans notre dossier et on lui donne un nom pour pouvoir l’appeler facilement après (‘son.mp3’)
- On redirige vers la page souhaitée (ici la page ‘sons’)

Dans notre page HTML, on ajoute un formulaire :

	<form method=post enctype=multipart/form-data>
			<input type=file name=file>
			<input type=submit value=Upload>

- on définit la méthode
- on définit le type de données entrées et le nom pour l’utiliser dans notre code Python

Si tu as envie d’en savoir plus, tu peux regarder la doc de Flask sur le sujet mais attention, elle est en anglais.

On peut ensuite ajouter une balise pour jouer un son dans notre fichier html :

	<audio controls="controls">
  	<source src={{ url_for('static', filename='sons/son.mp3' }} type="audio/mp3" />

Attention dans le cas où tu joues un son dans votre fichier HTML, si tu le modifies dans le code Python mais en gardant le même nom pour le nouveau son, ton son ne se mettra pas à jour ! Pour y remédier, tu peux ajouter une variable ‘version’ qui modifiera le nom complet du son que ton code va chercher et le forcera donc à le mettre à jour. Si tu as un cas similaire, va voir le code du projet exemple filtres ou sons et demande de l’aide à ton animateur.

EXPERIMENTER