Introduction
Dans ce laboratoire, nous allons apprendre à créer et à utiliser des modèles dans Flask. Les modèles sont une partie cruciale des applications web. Ils nous permettent de générer des pages HTML dynamiques qui peuvent afficher des données différentes chaque fois qu'elles sont chargées. Nous utiliserons le moteur de modèles Jinja2 qui est inclus avec Flask.
Note: Vous devez créer le fichier de code vous-même et l'exécuter dans l'environnement. Vous pouvez prévisualiser l'état du service Flask sur Web 5000.
Création de la mise en page de base
Notre première étape consiste à créer une mise en page de base qui sera utilisée pour toutes nos pages. Cette mise en page de base inclura les éléments communs de notre application, comme la barre de navigation et le titre de la page.
<!-- flaskr/templates/base.html -->
<!doctype html>
<title>{% block title %}{% endblock %} - Flaskr</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
<nav>
<h1>Flaskr</h1>
<ul>
{% if g.user %}
<li><span>{{ g.user['username'] }}</span></li>
<li><a href="{{ url_for('auth.logout') }}">Déconnexion</a> {% else %}</li>
<li><a href="{{ url_for('auth.register') }}">Inscription</a></li>
<li>
<a href="{{ url_for('auth.login') }}">Connexion</a>
{% endif %}
</li>
</ul>
</nav>
<section class="content">
<header>{% block header %}{% endblock %}</header>
{% for message in get_flashed_messages() %}
<div class="flash">{{ message }}</div>
{% endfor %} {% block content %}{% endblock %}
</section>
Modèle d'inscription
Ensuite, nous allons créer un modèle pour la page d'inscription. Ce modèle étendra notre mise en page de base et complètera le contenu spécifique de cette page.
<!-- flaskr/templates/auth/register.html -->
{% extends 'base.html' %} {% block header %}
<h1>{% block title %}Inscription{% endblock %}</h1>
{% endblock %} {% block content %}
<form method="post">
<label for="username">Nom d'utilisateur</label>
<input name="username" id="username" required />
<label for="password">Mot de passe</label>
<input type="password" name="password" id="password" required />
<input type="submit" value="Inscrire" />
</form>
{% endblock %}
Modèle de connexion
De manière similaire, nous allons créer un modèle pour la page de connexion. Ce modèle étendra également notre mise en page de base et complètera le contenu spécifique de cette page.
<!-- flaskr/templates/auth/login.html -->
{% extends 'base.html' %} {% block header %}
<h1>{% block title %}Connexion{% endblock %}</h1>
{% endblock %} {% block content %}
<form method="post">
<label for="username">Nom d'utilisateur</label>
<input name="username" id="username" required />
<label for="password">Mot de passe</label>
<input type="password" name="password" id="password" required />
<input type="submit" value="Connexion" />
</form>
{% endblock %}
Sommaire
Dans ce laboratoire, nous avons appris à créer et à utiliser des modèles dans Flask. Nous avons créé une mise en page de base qui inclut les éléments communs de notre application, puis nous avons créé des modèles spécifiques pour les pages d'inscription et de connexion qui étendent cette mise en page de base et complètent leur contenu spécifique. Cela nous permet de conserver notre code DRY (Ne pas répéter soi-même), ce qui le rend plus facile à maintenir et moins sujet à des erreurs.