Créer Une Application Web Avec Flask Python

Home » Apprendre Flask » Créer Une Application Web Avec Flask Python

Maybe your like

Actuellement, votre application n'affiche qu'un simple message sans aucun HTML. Les applications web utilisent principalement le HTML pour afficher des informations à l'intention du visiteur. Vous allez donc maintenant travailler à l'incorporation de fichiers HTML à votre application, qui pourront être affichés dans le navigateur web.

Flask fournit une fonction render_template() qui permet l'utilisation du moteur de modèle (template) Jinja. Cela facilitera grandement la gestion du HTML en écrivant votre code HTML dans des fichiers .html et en utilisant la logique dans votre code HTML. Vous allez utiliser ces fichiers HTML (modèles ou templates) pour construire toutes les pages de votre application, comme la page principale où vous afficherez les articles de blog en cours, la page de l'article de blog, la page où l'utilisateur peut ajouter un nouvel article, etc.

Dans cette étape, vous allez créer votre application Flask principale dans un nouveau fichier.

Tout d'abord, dans votre répertoire flask_blog, utilisez nano ou votre éditeur préféré pour créer et modifier votre fichier app.py. Ce fichier contiendra tout le code que vous utiliserez pour créer l'application de blog :

Sélectionnez(env)sammy@localhost:$ nano app.py

Dans ce nouveau fichier, vous allez importer l'objet Flask pour créer une instance d'application Flask comme vous l'avez déjà fait. Vous importerez également la fonction render_template() qui vous permet générer des pages web à partir de modèles HTML qui existent dans le dossier des modèles que vous êtes en train de créer. Le fichier aura une fonction d'affichage unique qui sera responsable de la gestion des demandes vers la principale route /. Ajoutez le contenu suivant :

flask_blog/app.pySélectionnezfrom flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html')

La fonction d'affichage index() renvoie le résultat de l'appel de render_template() avec index.html en argument, ce qui indique à render_template() qu'il doit rechercher un fichier appelé index.html dans le dossier des modèles. Le dossier et le fichier n'existent pas encore, vous obtiendriez une erreur si vous deviez exécuter l'application à ce stade. Vous l'exécuterez néanmoins afin de vous familiariser avec cette exception couramment rencontrée. Vous la corrigerez ensuite en créant le dossier et le fichier nécessaires.

Enregistrez et quittez le fichier.

Arrêtez le serveur de développement dans votre autre terminal qui exécute l'application hello avec CTRL+C.

Avant d'exécuter l'application, assurez-vous de spécifier correctement la valeur de la variable d'environnement FLASK_APP, puisque vous n'utilisez plus l'application hello :

Sélectionnez(env)sammy@localhost:$ export FLASK_APP=app (env)sammy@localhost:$ flask run

En ouvrant l'URL http://127.0.0.1:5000/ dans votre navigateur, la page du débogueur vous informera que le modèle index.html n'a pas été trouvé. La ligne principale du code responsable de cette erreur sera mise en évidence. Dans ce cas, il s'agit de la ligne return render_template('index.html').

Si vous cliquez sur cette ligne, le débogueur vous révélera plus de code afin que vous disposiez de plus de contexte pour vous aider à résoudre le problème.

Image non disponible

Pour corriger cette erreur, créez un répertoire appelé templates à l'intérieur de votre répertoire flask_blog. Ensuite, à l'intérieur de ce répertoire, ouvrez un fichier appelé index.html pour l'éditer :

Sélectionnez(env)sammy@localhost:$ mkdir templates (env)sammy@localhost:$ nano templates/index.html

Puis, ajoutez le code HTML suivant dans index.html :

flask_blog/templates/index.htmlSélectionnez<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FlaskBlog</title> </head> <body> <h1>Welcome to FlaskBlog</h1> </body> </html>

Enregistrez le fichier et utilisez votre navigateur pour naviguer à nouveau sur http://127.0.0.1:5000/ ou actualisez la page. Cette fois, le navigateur doit afficher le texte Welcome to FlaskBlog dans une balise <h1>.

En plus du dossier templates, les applications web de Flask disposent généralement d'un dossier static pour l'hébergement des fichiers statiques, tels que les fichiers CSS, les fichiers JavaScript et les images utilisées par l'application.

Vous pouvez créer un fichier de feuille de style style.css pour ajouter du CSS à votre application. Tout d'abord, créez un répertoire appelé static à l'intérieur de votre répertoire principal flask_blog :

Sélectionnez(env)sammy@localhost:$ mkdir static

Ensuite, créez un autre répertoire appelé css à l'intérieur du répertoire static pour héberger les fichiers .css. Cela est généralement fait pour organiser les fichiers statiques dans des dossiers dédiés. Par exemple, les fichiers JavaScript se trouvent généralement dans un répertoire appelé js, les images sont placées dans un répertoire appelé images (ou img), etc. La commande suivante créera le répertoire css à l'intérieur du répertoire static :

Sélectionnez(env)sammy@localhost:$ mkdir static/css

Ouvrez ensuite un fichier style.css à l'intérieur du répertoire css pour l'éditer :

Sélectionnez(env)sammy@localhost:$ nano static/css/style.css

Ajoutez la règle CSS suivante à votre fichier style.css :

flask_blog/static/css/style.cssSélectionnezh1 { border: 2px #eee solid; color: brown; text-align: center; padding: 10px; }

Le code CSS ajoutera une bordure, changera la couleur en marron, centrera le texte et ajoutera un peu de padding aux balises <h1>.

Enregistrez et fermez le fichier.

Ensuite, ouvrez le fichier de modèle index.html pour le modifier :

Sélectionnez(env)sammy@localhost:$ nano templates/index.html

Vous ajouterez un lien vers le fichier style.css à l'intérieur de la section <head> du fichier modèle index.html :

flask_blog/templates/index.htmlSélectionnez… <head> <meta charset="UTF-8"> <link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}"> <title>FlaskBlog</title> </head> …

Ici, vous utilisez la fonction d'aide url_for() pour générer l'emplacement approprié du fichier. Le premier argument spécifie que vous créez un lien vers un fichier statique et le deuxième argument est le chemin du fichier à l'intérieur du répertoire static.

Enregistrez et fermez le fichier.

En rafraîchissant la page d'index de votre application, vous remarquerez que le texte Welcome to FlaskBlog est maintenant en brun, centré et entouré d'une bordure.

Vous pouvez utiliser le langage CSS pour styliser l'application et la rendre plus attrayante en utilisant votre propre design. Toutefois, si vous n'êtes pas un concepteur de sites web ou si vous ne connaissez pas le langage CSS, vous pouvez utiliser la boîte à outils Bootstrap, qui fournit des composants faciles à utiliser pour styliser votre application. Dans ce projet, nous utiliserons Bootstrap.

Vous pourriez penser que la création d'un autre modèle HTML impliquerait la répétition de l’essentiel du code HTML que vous avez déjà écrit dans le modèle index.html. Vous pouvez éviter la répétition inutile du code à l'aide d'un fichier de modèle de base, dont tous vos fichiers HTML hériteront. Pour plus d'informations, voir la section Héritage de modèles dans Jinja.

Pour créer un modèle de base, créez d'abord un fichier appelé base.html dans votre répertoire templates :

Sélectionnez(env)sammy@localhost:$ nano templates/base.html

Tapez le code suivant dans votre modèle base.html :

flask_blog/templates/base.htmlSélectionnez<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>{% block title %} {% endblock %}</title> </head> <body> <nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand" href="{{ url_for('index')}}">FlaskBlog</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </nav> <div class="container"> {% block content %} {% endblock %} </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>

Enregistrez et fermez le fichier une fois que vous avez terminé de le modifier.

La majeure partie du code du bloc précédent est du HTML standard et du code requis pour Bootstrap. Les balises <meta> fournissent des informations pour le navigateur web, la balise <link> relie les fichiers CSS de Bootstrap et les balises <script> sont des liens vers le code JavaScript qui permet certaines fonctionnalités supplémentaires de Bootstrap. Consultez la documentation de Bootstrap pour en savoir plus.

Cependant, les parties surlignées suivantes sont spécifiques au moteur de template Jinja :

  • {% block title %} {% endblock %} : un bloc qui sert d'emplacement pour un titre, vous l'utiliserez plus tard dans d'autres modèles pour donner un titre personnalisé à chaque page de votre application sans réécrire à chaque fois toute la section <head>.
  • {{ url_for('index')}} : un appel de fonction qui renvoie l'URL pour la fonction d'affichage index(). Il est différent de l'ancien appel url_for() que vous utilisiez pour lier un fichier CSS statique, car il ne prend qu'un seul argument, qui est le nom de la fonction de visualisation, et renvoie à la route associée à la fonction au lieu de renvoyer l’URL d'un fichier statique.
  • {% block content %} {% endblock %} : un autre bloc qui sera remplacé par un contenu dépendant du modèle enfant (parmi les modèles qui héritent de base.html) qui le remplacera.

Maintenant que vous avez un modèle de base, vous pouvez en tirer profit grâce à l'héritage. Ouvrez le fichier index.html :

Sélectionnez(env)sammy@localhost:$ nano templates/index.html

Ensuite, remplacez son contenu par le suivant :

flask_blog/templates/index.htmlSélectionnez{% extends 'base.html' %} {% block content %} <h1>{% block title %} Welcome to FlaskBlog {% endblock %}</h1> {% endblock %}

Dans cette nouvelle version du modèle index.html, vous utilisez la balise {% extends %} pour hériter du modèle base.html. Vous l'étendez ensuite en remplaçant le bloc de contenu dans le modèle de base par ce qui se trouve à l'intérieur du bloc de contenu dans le bloc de code précédent.

Ce bloc de contenu contient une balise <h1> avec le texte Welcome to FlaskBlog à l'intérieur d'un bloc de titre, qui à son tour remplace le bloc de titre original dans le modèle base.html par le texte Welcome to FlaskBlog. De cette façon, vous pouvez éviter de répéter deux fois le même texte, car il fonctionne à la fois comme un titre pour la page et un titre qui apparaît sous la barre de navigation héritée du modèle de base.

L'héritage du modèle vous donne également la possibilité de réutiliser le code HTML que vous avez dans d'autres modèles (base.html dans ce cas) sans avoir à le répéter chaque fois que nécessaire.

Enregistrez et fermez le fichier et rafraîchissez la page d'index sur votre navigateur. Vous verrez votre page avec une barre de navigation et un titre stylisé.

Image non disponible

Vous avez utilisé des modèles HTML et des fichiers statiques dans Flask. Vous avez également utilisé Bootstrap pour commencer à affiner l'apparence de votre page et un modèle de base pour éviter la répétition du code. Dans l'étape suivante, vous allez configurer une base de données qui va stocker les données de votre application.

Tag » Apprendre Flask