madamasterclass.com

📔 Exemple d'application

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.

1. Application de blog

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.

  •                 1️⃣ Fonctionnalités : Authentification des utilisateurs, création d'articles, commentaires.
  •                 2️⃣ Technologies : Flask, SQLite, HTML/CSS.

2. Application de gestion de tâches

Cette application permet aux utilisateurs de suivre leurs tâches quotidiennes. Les utilisateurs peuvent ajouter, supprimer et marquer les tâches comme complètes.

  •                 1️⃣ Fonctionnalités : Ajout de tâches, mise à jour de l'état des tâches, filtrage par date.
  •                 2️⃣ Technologies : Flask, SQLAlchemy, JavaScript.

3. Application de portfolio

Créez un site de portfolio personnel où les utilisateurs peuvent afficher leurs projets, compétences et expériences professionnelles.

  •                 1️⃣ Fonctionnalités : Pages de projet, sections de compétences, formulaire de contact.
  •                 2️⃣ Technologies : Flask, HTML/CSS, Bootstrap.

4. Application de e-commerce

Développez une application de e-commerce où les utilisateurs peuvent parcourir, ajouter au panier et acheter des produits.

  •                 1️⃣ Fonctionnalités : Navigation des produits, gestion du panier, traitement des paiements.
  •                 2️⃣ Technologies : Flask, SQLAlchemy, Stripe API.

5. Application de chat en temps réel

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.

  •                 1️⃣ Fonctionnalités : Salons de discussion, notifications en temps réel.
  •                 2️⃣ Technologies : Flask, Flask-SocketIO, JavaScript.

Conclusion

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 !


Activité : Création d'une Application de Blog avec Flask

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.

1. Prérequis
  •                 1️⃣ Python installé sur votre machine.
  •                 2️⃣ Flask installé. Si ce n'est pas fait, exécutez la commande suivante :
  • pip install Flask
  • SQLite pour la base de données.
2. Créer la structure du projet

Créez un dossier pour votre projet, par exemple blog_app, et à l'intérieur, créez les sous-dossiers suivants :

  •                 1️⃣ static : pour vos fichiers CSS et JavaScript.
  •                 2️⃣ templates : pour vos fichiers HTML.
3. Créer la base de données

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.

4. Créer les fichiers HTML

Dans le dossier templates, créez les fichiers suivants :

  •                 1️⃣ index.html : pour afficher la liste des articles.
  •                 2️⃣ create.html : pour créer un nouvel article.
  •                 3️⃣ 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>
5. Créer le fichier Python principal

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)
6. Initialiser la base de données

Avant de démarrer votre application, exécutez database.py pour créer la base de données et la table :

python database.py
7. Démarrer le serveur

Pour démarrer votre application, exécutez le fichier Python principal :

python app.py
8. Conclusion

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 !


Activité : Création d'une Application de Gestion de Tâches avec Flask

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.

1. Prérequis
  •                 1️⃣ Python installé sur votre machine.
  •                 2️⃣ Flask installé. Si ce n'est pas fait, exécutez la commande suivante :
  • pip install Flask
  • SQLite pour la base de données.
2. Créer la structure du projet

Créez un dossier pour votre projet, par exemple task_manager, et à l'intérieur, créez les sous-dossiers suivants :

  •                 1️⃣ static : pour vos fichiers CSS et JavaScript.
  •                 2️⃣ templates : pour vos fichiers HTML.
3. Créer la base de données

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.

4. Créer les fichiers HTML

Dans le dossier templates, créez les fichiers suivants :

  •                 1️⃣ index.html : pour afficher la liste des tâches.
  •                 2️⃣ 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>
5. Créer le fichier Python principal

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)
6. Initialiser la base de données

Avant de démarrer votre application, exécutez database.py pour créer la base de données et la table :

python database.py
7. Démarrer le serveur

Pour démarrer votre application, exécutez le fichier Python principal :

python app.py
8. Conclusion

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 !


Activité : Création d'une Application de Portfolio avec Flask

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.

1. Prérequis
  •                 1️⃣ Python installé sur votre machine.
  •                 2️⃣ Flask installé. Si ce n'est pas fait, exécutez la commande suivante :
  • pip install Flask
  • SQLite pour la base de données.
2. Créer la structure du projet

Créez un dossier pour votre projet, par exemple portfolio_app, et à l'intérieur, créez les sous-dossiers suivants :

  •                 1️⃣ static : pour vos fichiers CSS et JavaScript.
  •                 2️⃣ templates : pour vos fichiers HTML.
3. Créer la base de données

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.

4. Créer les fichiers HTML

Dans le dossier templates, créez les fichiers suivants :

  •                 1️⃣ index.html : pour afficher la liste des projets.
  •                 2️⃣ create.html : pour ajouter un nouveau projet.
  •                 3️⃣ 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>
5. Créer le fichier Python principal

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)
6. Initialiser la base de données

Avant de démarrer votre application, exécutez database.py pour créer la base de données et la table :

python database.py
7. Démarrer le serveur

Pour démarrer votre application, exécutez le fichier Python principal :

python app.py
8. Conclusion

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 !


Activité : Création d'une Application de E-commerce avec Flask

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.

1. Prérequis
  • Python installé sur votre machine.
  • Flask installé. Si ce n'est pas fait, exécutez la commande suivante :
  • pip install Flask
  • SQLite pour la base de données.
2. Créer la structure du projet

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.
3. Créer la base de données

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.

4. Créer les fichiers HTML

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>
5. Créer le fichier Python principal

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)
6. Initialiser la base de données

Avant de démarrer votre application, exécutez database.py pour créer la base de données et les tables :

python database.py
7. Démarrer le serveur

Pour démarrer votre application, exécutez le fichier Python principal :

python app.py
8. Conclusion

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 !


Activité : Création d'une Application de Chat en Temps Réel avec Flask

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.

1. Prérequis
  •                 1️⃣ Python installé sur votre machine.
  •                 2️⃣ Flask et Flask-SocketIO installés. Si ce n'est pas fait, exécutez la commande suivante :
  • pip install Flask flask-socketio
2. Créer la structure du projet

Créez un dossier pour votre projet, par exemple chat_app, et à l'intérieur, créez les sous-dossiers suivants :

  •                 1️⃣ static : pour vos fichiers CSS et JavaScript.
  •                 2️⃣ templates : pour vos fichiers HTML.
3. Créer les 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>
4. Créer le fichier Python principal

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)
5. Démarrer le serveur

Pour démarrer votre application, exécutez le fichier Python principal :

python app.py
6. Accéder à l'application

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.

7. Conclusion

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 !

Forum(s) associé(s)

Page: