Exploration de quelques exemples d'applications avec Flask.
Dans cette section, nous allons explorer quelques exemples d'applications que vous pouvez développer en utilisant le framework Flask. Ces exemples vous aideront à comprendre les possibilités offertes par Flask et à vous inspirer pour vos propres projets.
Une application de blog simple permet aux utilisateurs de créer, lire, mettre à jour et supprimer des articles. Vous pouvez utiliser une base de données pour stocker les articles et les commentaires.
Cette application permet aux utilisateurs de suivre leurs tâches quotidiennes. Les utilisateurs peuvent ajouter, supprimer et marquer les tâches comme complètes.
Créez un site de portfolio personnel où les utilisateurs peuvent afficher leurs projets, compétences et expériences professionnelles.
Développez une application de e-commerce où les utilisateurs peuvent parcourir, ajouter au panier et acheter des produits.
Cette application permet aux utilisateurs de discuter en temps réel à travers des salons de chat. Utilisez Flask-SocketIO pour la communication en temps réel.
Ces exemples d'applications montrent la flexibilité et les capacités de Flask. Que vous souhaitiez créer une application simple ou complexe, Flask peut vous aider à réaliser vos idées. N'hésitez pas à explorer ces projets et à les adapter à vos besoins !
Dans cette activité, vous allez créer une application de blog simple en utilisant le framework Flask. Cette application permettra aux utilisateurs de créer, lire, mettre à jour et supprimer des articles de blog.
pip install Flask
Créez un dossier pour votre projet, par exemple blog_app
, et à l'intérieur, créez les sous-dossiers suivants :
static
: pour vos fichiers CSS et JavaScript.templates
: pour vos fichiers HTML.Créez un fichier nommé database.py
pour initialiser votre base de données SQLite :
import sqlite3
def init_db():
conn = sqlite3.connect('blog.db')
c = conn.cursor()
c.execute('''CREATE TABLE IF NOT EXISTS posts (
id INTEGER PRIMARY KEY AUTOINCREMENT,
title TEXT,
content TEXT,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
)''')
conn.commit()
conn.close()
if __name__ == '__main__':
init_db()
Ce code crée une table posts
pour stocker les articles de blog.
Dans le dossier templates
, créez les fichiers suivants :
index.html
: pour afficher la liste des articles.create.html
: pour créer un nouvel article.edit.html
: pour éditer un article existant.Voici le contenu de index.html
:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon Blog</title>
</head>
<body>
<h1>Articles de Blog</h1>
<a href="/create">Créer un nouvel article</a>
<ul>
{% for post in posts %}
<li><a href="/edit/{{ post[0] }}">{{ post[1] }}</a> - <a href="/delete/{{ post[0] }}">Supprimer</a></li>
{% endfor %}
</ul>
</body>
</html>
Voici le contenu de create.html
:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Créer un article</title>
</head>
<body>
<h1>Nouvel Article</h1>
<form action="/create" method="post">
<label for="title">Titre:</label>
<input type="text" id="title" name="title" required>
<label for="content">Contenu:</label>
<textarea id="content" name="content" required></textarea>
<input type="submit" value="Créer">
</form>
</body>
</html>
Voici le contenu de edit.html
:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Modifier l'article</title>
</head>
<body>
<h1>Modifier l'article</h1>
<form action="/edit/{{ post[0] }}" method="post">
<label for="title">Titre:</label>
<input type="text" id="title" name="title" value="{{ post[1] }}" required>
<label for="content">Contenu:</label>
<textarea id="content" name="content" required>{{ post[2] }}</textarea>
<input type="submit" value="Modifier">
</form>
</body>
</html>
Dans le dossier principal, créez un fichier nommé app.py
et ajoutez le code suivant :
from flask import Flask, render_template, request, redirect
import sqlite3
app = Flask(__name__)
def get_db_connection():
conn = sqlite3.connect('blog.db')
conn.row_factory = sqlite3.Row
return conn
@app.route('/')
def index():
conn = get_db_connection()
posts = conn.execute('SELECT * FROM posts').fetchall()
conn.close()
return render_template('index.html', posts=posts)
@app.route('/create', methods=['GET', 'POST'])
def create():
if request.method == 'POST':
title = request.form['title']
content = request.form['content']
conn = get_db_connection()
conn.execute('INSERT INTO posts (title, content) VALUES (?, ?)', (title, content))
conn.commit()
conn.close()
return redirect('/')
return render_template('create.html')
@app.route('/edit/<int:id>', methods=['GET', 'POST'])
def edit(id):
conn = get_db_connection()
post = conn.execute('SELECT * FROM posts WHERE id = ?', (id,)).fetchone()
if request.method == 'POST':
title = request.form['title']
content = request.form['content']
conn.execute('UPDATE posts SET title = ?, content = ? WHERE id = ?', (title, content, id))
conn.commit()
conn.close()
return redirect('/')
conn.close()
return render_template('edit.html', post=post)
@app.route('/delete/<int:id>')
def delete(id):
conn = get_db_connection()
conn.execute('DELETE FROM posts WHERE id = ?', (id,))
conn.commit()
conn.close()
return redirect('/')
if __name__ == '__main__':
app.run(debug=True)
Avant de démarrer votre application, exécutez database.py
pour créer la base de données et la table :
python database.py
Pour démarrer votre application, exécutez le fichier Python principal :
python app.py
Vous avez maintenant créé une application de blog simple avec Flask. Vous pouvez créer, lire, modifier et supprimer des articles de blog. Explorez davantage en ajoutant des fonctionnalités comme des commentaires ou une authentification des utilisateurs !
Dans cette activité, vous allez créer une application de gestion de tâches qui permettra aux utilisateurs de suivre leurs tâches quotidiennes. Cette application inclura des fonctionnalités pour ajouter, supprimer et marquer les tâches comme complètes.
pip install Flask
Créez un dossier pour votre projet, par exemple task_manager
, et à l'intérieur, créez les sous-dossiers suivants :
static
: pour vos fichiers CSS et JavaScript.templates
: pour vos fichiers HTML.Créez un fichier nommé database.py
pour initialiser votre base de données SQLite :
import sqlite3
def init_db():
conn = sqlite3.connect('tasks.db')
c = conn.cursor()
c.execute('''CREATE TABLE IF NOT EXISTS tasks (
id INTEGER PRIMARY KEY AUTOINCREMENT,
title TEXT,
completed BOOLEAN DEFAULT 0
)''')
conn.commit()
conn.close()
if __name__ == '__main__':
init_db()
Ce code crée une table tasks
pour stocker les tâches.
Dans le dossier templates
, créez les fichiers suivants :
index.html
: pour afficher la liste des tâches.create.html
: pour créer une nouvelle tâche.Voici le contenu de index.html
:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Gestion de Tâches</title>
</head>
<body>
<h1>Liste de Tâches</h1>
<a href="/create">Ajouter une Tâche</a>
<ul>
{% for task in tasks %}
<li>{{ task[1] }} - <a href="/complete/{{ task[0] }}">Compléter</a> - <a href="/delete/{{ task[0] }}">Supprimer</a></li>
{% endfor %}
</ul>
</body>
</html>
Voici le contenu de create.html
:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Créer une Tâche</title>
</head>
<body>
<h1>Nouvelle Tâche</h1>
<form action="/create" method="post">
<label for="title">Titre:</label>
<input type="text" id="title" name="title" required>
<input type="submit" value="Ajouter">
</form>
</body>
</html>
Dans le dossier principal, créez un fichier nommé app.py
et ajoutez le code suivant :
from flask import Flask, render_template, request, redirect
import sqlite3
app = Flask(__name__)
def get_db_connection():
conn = sqlite3.connect('tasks.db')
conn.row_factory = sqlite3.Row
return conn
@app.route('/')
def index():
conn = get_db_connection()
tasks = conn.execute('SELECT * FROM tasks').fetchall()
conn.close()
return render_template('index.html', tasks=tasks)
@app.route('/create', methods=['GET', 'POST'])
def create():
if request.method == 'POST':
title = request.form['title']
conn = get_db_connection()
conn.execute('INSERT INTO tasks (title) VALUES (?)', (title,))
conn.commit()
conn.close()
return redirect('/')
return render_template('create.html')
@app.route('/complete/<int:id>')
def complete(id):
conn = get_db_connection()
conn.execute('UPDATE tasks SET completed=1 WHERE id=?', (id,))
conn.commit()
conn.close()
return redirect('/')
@app.route('/delete/<int:id>')
def delete(id):
conn = get_db_connection()
conn.execute('DELETE FROM tasks WHERE id=?', (id,))
conn.commit()
conn.close()
return redirect('/')
if __name__ == '__main__':
app.run(debug=True)
Avant de démarrer votre application, exécutez database.py
pour créer la base de données et la table :
python database.py
Pour démarrer votre application, exécutez le fichier Python principal :
python app.py
Vous avez maintenant créé une application de gestion de tâches simple avec Flask. Vous pouvez ajouter, supprimer et marquer des tâches comme complètes. Explorez davantage en ajoutant des fonctionnalités comme des dates d'échéance ou des catégories de tâches !
Dans cette activité, vous allez créer une application de portfolio personnel qui permettra aux utilisateurs de présenter leurs projets, compétences et expériences professionnelles. Cette application inclura des fonctionnalités pour ajouter, modifier et afficher des projets.
pip install Flask
Créez un dossier pour votre projet, par exemple portfolio_app
, et à l'intérieur, créez les sous-dossiers suivants :
static
: pour vos fichiers CSS et JavaScript.templates
: pour vos fichiers HTML.Créez un fichier nommé database.py
pour initialiser votre base de données SQLite :
import sqlite3
def init_db():
conn = sqlite3.connect('portfolio.db')
c = conn.cursor()
c.execute('''CREATE TABLE IF NOT EXISTS projects (
id INTEGER PRIMARY KEY AUTOINCREMENT,
title TEXT,
description TEXT,
url TEXT
)''')
conn.commit()
conn.close()
if __name__ == '__main__':
init_db()
Ce code crée une table projects
pour stocker les projets du portfolio.
Dans le dossier templates
, créez les fichiers suivants :
index.html
: pour afficher la liste des projets.create.html
: pour ajouter un nouveau projet.edit.html
: pour modifier un projet existant.Voici le contenu de index.html
:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon Portfolio</title>
</head>
<body>
<h1>Projets</h1>
<a href="/create">Ajouter un Projet</a>
<ul>
{% for project in projects %}
<li><a href="{{ project[3] }}">{{ project[1] }}</a> - <a href="/edit/{{ project[0] }}">Modifier</a> - <a href="/delete/{{ project[0] }}">Supprimer</a></li>
{% endfor %}
</ul>
</body>
</html>
Voici le contenu de create.html
:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ajouter un Projet</title>
</head>
<body>
<h1>Nouveau Projet</h1>
<form action="/create" method="post">
<label for="title">Titre:</label>
<input type="text" id="title" name="title" required>
<label for="description">Description:</label>
<textarea id="description" name="description" required></textarea>
<label for="url">URL:</label>
<input type="text" id="url" name="url" required>
<input type="submit" value="Ajouter">
</form>
</body>
</html>
Voici le contenu de edit.html
:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Modifier le Projet</title>
</head>
<body>
<h1>Modifier le Projet</h1>
<form action="/edit/{{ project[0] }}" method="post">
<label for="title">Titre:</label>
<input type="text" id="title" name="title" value="{{ project[1] }}" required>
<label for="description">Description:</label>
<textarea id="description" name="description" required>{{ project[2] }}</textarea>
<label for="url">URL:</label>
<input type="text" id="url" name="url" value="{{ project[3] }}" required>
<input type="submit" value="Modifier">
</form>
</body>
</html>
Dans le dossier principal, créez un fichier nommé app.py
et ajoutez le code suivant :
from flask import Flask, render_template, request, redirect
import sqlite3
app = Flask(__name__)
def get_db_connection():
conn = sqlite3.connect('portfolio.db')
conn.row_factory = sqlite3.Row
return conn
@app.route('/')
def index():
conn = get_db_connection()
projects = conn.execute('SELECT * FROM projects').fetchall()
conn.close()
return render_template('index.html', projects=projects)
@app.route('/create', methods=['GET', 'POST'])
def create():
if request.method == 'POST':
title = request.form['title']
description = request.form['description']
url = request.form['url']
conn = get_db_connection()
conn.execute('INSERT INTO projects (title, description, url) VALUES (?, ?, ?)', (title, description, url))
conn.commit()
conn.close()
return redirect('/')
return render_template('create.html')
@app.route('/edit/<int:id>', methods=['GET', 'POST'])
def edit(id):
conn = get_db_connection()
project = conn.execute('SELECT * FROM projects WHERE id = ?', (id,)).fetchone()
if request.method == 'POST':
title = request.form['title']
description = request.form['description']
url = request.form['url']
conn.execute('UPDATE projects SET title=?, description=?, url=? WHERE id=?', (title, description, url, id))
conn.commit()
conn.close()
return redirect('/')
conn.close()
return render_template('edit.html', project=project)
@app.route('/delete/<int:id>')
def delete(id):
conn = get_db_connection()
conn.execute('DELETE FROM projects WHERE id=?', (id,))
conn.commit()
conn.close()
return redirect('/')
if __name__ == '__main__':
app.run(debug=True)
Avant de démarrer votre application, exécutez database.py
pour créer la base de données et la table :
python database.py
Pour démarrer votre application, exécutez le fichier Python principal :
python app.py
Vous avez maintenant créé une application de portfolio simple avec Flask. Vous pouvez ajouter, modifier et supprimer des projets. Explorez davantage en ajoutant des sections pour vos compétences, expériences, et même un formulaire de contact !
Dans cette activité, vous allez créer une application de e-commerce qui permettra aux utilisateurs de parcourir des produits, d'ajouter des articles à leur panier et de passer des commandes. Cette application inclura des fonctionnalités de gestion des produits et du panier.
pip install Flask
Créez un dossier pour votre projet, par exemple ecommerce_app
, et à l'intérieur, créez les sous-dossiers suivants :
static
: pour vos fichiers CSS et JavaScript.templates
: pour vos fichiers HTML.Créez un fichier nommé database.py
pour initialiser votre base de données SQLite :
import sqlite3
def init_db():
conn = sqlite3.connect('ecommerce.db')
c = conn.cursor()
c.execute('''CREATE TABLE IF NOT EXISTS products (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT,
description TEXT,
price REAL
)''')
c.execute('''CREATE TABLE IF NOT EXISTS cart (
id INTEGER PRIMARY KEY AUTOINCREMENT,
product_id INTEGER,
quantity INTEGER,
FOREIGN KEY (product_id) REFERENCES products (id)
)''')
conn.commit()
conn.close()
if __name__ == '__main__':
init_db()
Ce code crée des tables products
pour stocker les produits et cart
pour gérer le panier.
Dans le dossier templates
, créez les fichiers suivants :
index.html
: pour afficher la liste des produits.cart.html
: pour afficher le contenu du panier.Voici le contenu de index.html
:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>E-commerce</title>
</head>
<body>
<h1>Produits</h1>
<ul>
{% for product in products %}
<li>{{ product[1] }} - {{ product[3] }} € - <a href="/add_to_cart/{{ product[0] }}">Ajouter au Panier</a></li>
{% endfor %}
</ul>
<a href="/cart">Voir le Panier</a>
</body>
</html>
Voici le contenu de cart.html
:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon Panier</title>
</head>
<body>
<h1>Contenu du Panier</h1>
<ul>
{% for item in cart %}
<li>Produit ID: {{ item[1] }} - Quantité: {{ item[2] }}</li>
{% endfor %}
</ul>
<a href="/">Retour à la Boutique</a>
</body>
</html>
Dans le dossier principal, créez un fichier nommé app.py
et ajoutez le code suivant :
from flask import Flask, render_template, request, redirect
import sqlite3
app = Flask(__name__)
def get_db_connection():
conn = sqlite3.connect('ecommerce.db')
conn.row_factory = sqlite3.Row
return conn
@app.route('/')
def index():
conn = get_db_connection()
products = conn.execute('SELECT * FROM products').fetchall()
conn.close()
return render_template('index.html', products=products)
@app.route('/add_to_cart/<int:product_id>')
def add_to_cart(product_id):
conn = get_db_connection()
conn.execute('INSERT INTO cart (product_id, quantity) VALUES (?, ?)', (product_id, 1))
conn.commit()
conn.close()
return redirect('/')
@app.route('/cart')
def cart():
conn = get_db_connection()
cart = conn.execute('SELECT * FROM cart').fetchall()
conn.close()
return render_template('cart.html', cart=cart)
if __name__ == '__main__':
app.run(debug=True)
Avant de démarrer votre application, exécutez database.py
pour créer la base de données et les tables :
python database.py
Pour démarrer votre application, exécutez le fichier Python principal :
python app.py
Vous avez maintenant créé une application de e-commerce simple avec Flask. Vous pouvez parcourir les produits, ajouter des articles au panier et consulter le contenu du panier. Explorez davantage en ajoutant des fonctionnalités comme le traitement des paiements et la gestion des utilisateurs !
Dans cette activité, vous allez créer une application de chat en temps réel qui permettra aux utilisateurs d'échanger des messages dans des salons de discussion. Nous utiliserons Flask pour le serveur web et Flask-SocketIO pour la communication en temps réel.
pip install Flask flask-socketio
Créez un dossier pour votre projet, par exemple chat_app
, et à l'intérieur, créez les sous-dossiers suivants :
static
: pour vos fichiers CSS et JavaScript.templates
: pour vos fichiers HTML.Dans le dossier templates
, créez un fichier nommé index.html
avec le contenu suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Chat en Temps Réel</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
<script>
var socket = io();
socket.on('message', function(msg) {
$('#messages').append('<p>' + msg + '</p>');
});
function sendMessage() {
var message = $('#message').val();
socket.emit('message', message);
$('#message').val('');
}
</script>
</head>
<body>
<h1>Salon de Chat</h1>
<div id="messages"></div>
<input type="text" id="message" placeholder="Votre message...">
<button onclick="sendMessage()">Envoyer</button>
</body>
</html>
Dans le dossier principal, créez un fichier nommé app.py
et ajoutez le code suivant :
from flask import Flask, render_template
from flask_socketio import SocketIO, emit
app = Flask(__name__)
socketio = SocketIO(app)
@app.route('/')
def index():
return render_template('index.html')
@socketio.on('message')
def handle_message(msg):
emit('message', msg, broadcast=True)
if __name__ == '__main__':
socketio.run(app)
Pour démarrer votre application, exécutez le fichier Python principal :
python app.py
Ouvrez votre navigateur et accédez à http://localhost:5000
. Vous devriez voir votre application de chat. Ouvrez plusieurs onglets ou fenêtres pour tester le chat en temps réel.
Vous avez maintenant créé une application de chat en temps réel avec Flask et Flask-SocketIO. Les utilisateurs peuvent échanger des messages instantanément dans le salon de discussion. Explorez davantage en ajoutant des fonctionnalités comme des salons privés, des notifications ou des emojis !
Abonnez-vous maintenant et recevez notre newsletter hebdomadaire avec des matériaux éducatifs, de nouveaux cours, des articles intéressants, des livres populaires et bien plus encore !