Introduction
Flask n’est pas seulement un excellent outil pour créer des APIs REST. Il est aussi parfaitement capable de générer des sites web dynamiques en utilisant des templates HTML, du CSS, et même du JavaScript. Grâce à sa simplicité et sa flexibilité, Flask est idéal pour créer des sites web personnels, des pages de portfolio, ou des dashboards interactifs.
Dans cet article, vous allez apprendre à construire un site web basique avec Flask, comprenant une page d’accueil, une page dynamique avec des données, et l’intégration d’un template HTML avec des variables Python.
1. Installer Flask
Si ce n’est pas déjà fait :
pip install flask
2. Structure de projet recommandée
mon_site/
│
├── app.py
├── templates/
│ ├── index.html
│ └── profil.html
└── static/
└── style.css
app.py: fichier principal Flasktemplates/: dossiers de fichiers HTMLstatic/: contient CSS, JS, images…
3. Créer un site avec une page d'accueil
app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def accueil():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
4. Créer un fichier HTML (template)
templates/index.html
<!DOCTYPE html>
<html>
<head>
<title>Accueil</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<h1>Bienvenue sur mon site Flask !</h1>
<p>Ceci est la page d’accueil générée avec Flask.</p>
<a href="/profil/John">Voir profil</a>
</body>
</html>
5. Créer une page dynamique avec variable
app.py (ajouter une nouvelle route)
@app.route('/profil/<nom>')
def profil(nom):
return render_template('profil.html', nom=nom)
templates/profil.html
<!DOCTYPE html>
<html>
<head>
<title>Profil</title>
</head>
<body>
<h1>Profil de {{ nom }}</h1>
<p>Bienvenue sur la page de {{ nom }} !</p>
<a href="/">Retour à l’accueil</a>
</body>
</html>
6. Ajouter du style avec un fichier CSS
static/style.css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
h1 {
color: #333;
}
7. Transmettre des données dynamiques (liste, dictionnaire)
app.py
@app.route('/utilisateurs')
def utilisateurs():
liste = ["Alice", "Bob", "Charlie"]
return render_template('utilisateurs.html', utilisateurs=liste)
templates/utilisateurs.html
<h1>Liste des utilisateurs</h1>
<ul>
{% for u in utilisateurs %}
<li>{{ u }}</li>
{% endfor %}
</ul>
8. Bonus : gérer des formulaires simples
HTML (formulaire)
<form method="POST" action="/bonjour">
<input type="text" name="nom" placeholder="Votre nom">
<button type="submit">Envoyer</button>
</form>
Flask (réception)
from flask import request
@app.route('/bonjour', methods=['POST'])
def dire_bonjour():
nom = request.form.get('nom')
return f"Bonjour, {nom} !"
Conclusion
Avec Flask, il est très facile de créer un site web fonctionnel à partir de quelques lignes de code. En combinant les routes Python, les templates HTML, les données dynamiques et le CSS, vous pouvez développer rapidement un site web clair, fluide, et extensible. C’est une excellente base pour créer un portfolio, un mini-blog, ou un dashboard interactif.