Cours Complet sur Flask et MongoDB en
Python
Introduction à Flask et MongoDB
Qu'est-ce que Flask ?
Flask est un framework web léger pour Python, conçu pour être simple et facile à utiliser. Il
facilite la création d'applications web rapidement et efficacement. Flask suit le principe
"micro", offrant les composants de base nécessaires pour construire une application web tout
en laissant la flexibilité de choisir les outils et bibliothèques complémentaires.
Qu'est-ce que MongoDB ?
MongoDB est une base de données NoSQL orientée documents, qui stocke les données au
format BSON (Binary JSON). Contrairement aux bases de données relationnelles, MongoDB
n'utilise pas de tables et de schémas fixes, ce qui permet une grande flexibilité dans la
structuration des données.
Installation
Flask
Pour installer Flask, utilisez la commande suivante :
pip install Flask
MongoDB
Suivez les instructions d'installation spécifiques à votre système d'exploitation sur le site
officiel de MongoDB.
Premiers pas avec Flask
Hello World avec Flask
Créez un fichier "app.py" avec le code suivant :
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
return 'Hello, World!'
if __name__ == '__main__':
app.run(debug=True)
Exécutez l'application avec python app.py et accédez à http://localhost:5000 dans votre
navigateur.
Les Routes dans Flask
Les routes définissent les URLs de votre application et les fonctions associées à ces URLs.
Par exemple :
@app.route('/about')
def about():
return 'À propos de nous'
Flask et les Templates
Les Templates Jinja2
Flask utilise Jinja2 comme moteur de templates. Les templates permettent d'injecter des
données dynamiques dans vos pages HTML.
from flask import render_template
@app.route('/profile/<username>')
def profile(username):
return render_template('profile.html', username=username)
Dans le fichier "templates/profile.html" :
<!DOCTYPE html>
<html>
<head>
<title>Profil de {{ username }}</title>
</head>
<body>
<h1>Bienvenue, {{ username }}!</h1>
</body>
</html>
Flask et MongoDB
Intégration de MongoDB avec Flask
Installez le client MongoDB pour Python :
pip install pymongo
Connexion à MongoDB
from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client['ma_base_de_donnees']
collection = db['ma_collection']
CRUD avec Flask et MongoDB
Création d'un Document
nouveau_document = {'cle': 'valeur'}
collection.insert_one(nouveau_document)
Lecture de Documents
resultats = collection.find({'cle': 'valeur'})
for document in resultats:
print(document)
Mise à Jour de Documents
collection.update_one({'cle': 'valeur'}, {'$set': {'nouvelle_cle':
'nouvelle_valeur'}})
Suppression de Documents
collection.delete_one({'cle': 'valeur'})
Exemple Complet : Création d'une Application de Blog avec Flask et MongoDB
Étape 1 : Structure du Projet
Créez un dossier pour votre projet, par exemple "blog_flask_mongo". À l'intérieur, créez les
dossiers suivants :
• templates : Pour stocker les fichiers HTML.
• static : Pour stocker les fichiers statiques (CSS, JS, images).
Étape 2 : Explications Détaillées
1. Importation des Modules :
from flask import Flask, render_template, request, redirect, url_for
from pymongo import MongoClient
from bson import ObjectId
• Flask : Framework web pour construire l'application.
• render_template : Fonction pour rendre les templates HTML.
• request : Objet contenant les données de la requête client.
• redirect : Fonction pour rediriger l'utilisateur vers une autre route.
• url_for : Fonction pour générer des URLs pour les fonctions de vue.
• MongoClient : Classe pour la connexion à MongoDB.
• ObjectId : Classe pour représenter l'identifiant unique d'un document MongoDB.
2. Création de l'Application Flask et Configuration :
app = Flask(__name__)
• Flask(__name__) : Crée une instance de l'application Flask.
3. Connexion à MongoDB :
client = MongoClient('localhost', 27017)
db = client['blog']
articles_collection = db['articles']
• MongoClient : Établissement de la connexion à la base de données MongoDB.
• db : Sélection de la base de données "blog".
• articles_collection : Sélection de la collection "articles" dans la base de données.
4. Page d'Accueil (/) :
@app.route('/')
def index():
articles = articles_collection.find()
return render_template('index.html', articles=articles)
• La route / affiche tous les articles existants.
• articles_collection.find() récupère tous les documents (articles) dans la
collection.
• Ces articles sont ensuite passés au template index.html pour l'affichage.
5. Ajout d'un Article (/ajouter) :
@app.route('/ajouter', methods=['GET', 'POST'])
def ajouter():
if request.method == 'POST':
titre = request.form['titre']
contenu = request.form['contenu']
nouvel_article = {'titre': titre, 'contenu': contenu}
articles_collection.insert_one(nouvel_article)
return redirect(url_for('index'))
return render_template('ajouter.html')
• La route /ajouter utilise la méthode GET pour afficher le formulaire et POST pour
traiter la soumission.
• Lorsque le formulaire est soumis (méthode POST), les données sont extraites
directement du formulaire et un nouvel article est ajouté à la base de données.
• Si la méthode est GET, le formulaire est simplement réaffiché.
6. Modification d'un Article (/modifier/<article_id>) :
@app.route('/modifier/<article_id>', methods=['GET', 'POST'])
def modifier(article_id):
article = articles_collection.find_one({'_id': ObjectId(article_id)})
if request.method == 'POST':
titre = request.form['titre']
contenu = request.form['contenu']
articles_collection.update_one({'_id': ObjectId(article_id)},
{'$set': {'titre': titre, 'contenu': contenu}})
return redirect(url_for('index'))
return render_template('modifier.html', article=article)
• La route /modifier/<article_id> récupère l'article spécifié par son identifiant.
• Lorsque le formulaire est soumis (méthode POST), les données sont extraites
directement du formulaire et l'article correspondant dans la base de données est mis à
jour.
• Si la méthode est GET, le formulaire pré-rempli est simplement réaffiché.
7. Recherche d'Articles (/rechercher) :
@app.route("/rechercher", methods=['GET', 'POST'])
def rechercher():
if request.method == 'POST':
search_term = request.form['search_term']
articles = articles_collection.find({'titre': {'$regex':
search_term, '$options': 'i'}})
return render_template('rechercher.html', articles=articles)
return render_template('rechercher.html')
8. index.html (Liste des articles) :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liste des Articles</title>
</head>
<body>
<h1>Liste des Articles</h1>
<ul>
{% for article in articles %}
<li>{{ article.titre }} - {{ article.contenu }}
<a href="{{ url_for('modifier', article_id=article._id)
}}">Modifier</a>
<a href="{{ url_for('supprimer', article_id=article._id)
}}">Supprimer</a>
</li>
{% endfor %}
</ul>
<a href="{{ url_for('ajouter') }}">Ajouter un article</a>
</body>
</html>
• La balise ul est utilisée pour créer une liste non ordonnée.
• La boucle {% for article in articles %} parcourt la liste des articles.
• Les liens "Modifier" et "Supprimer" pointent vers les routes correspondantes pour
chaque article.
• Le lien "Ajouter un article" redirige vers la page d'ajout d'article.
9. ajouter.html (Formulaire d'ajout) :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajouter un Article</title>
</head>
<body>
<h1>Ajouter un Article</h1>
<form action="{{ url_for('ajouter') }}" method="POST">
<label for="titre">Titre: </label>
<input type="text" name="titre" id="titre" required> <br>
<label for="contenu">Contenu: </label>
<textarea name="contenu" id="contenu" rows="4" required></textarea>
<br>
<button type="submit">Ajouter</button>
</form>
<a href="{{ url_for('index') }}">Retour à la liste des articles</a>
</body>
</html>
• La balise form définit un formulaire avec l'attribut action pointant vers la route
d'ajout et la méthode POST.
• Les champs de saisie "Titre" et "Contenu" sont inclus dans le formulaire.
• Le bouton "Ajouter" soumet le formulaire à la route d'ajout.
• Le lien "Retour à la liste des articles" redirige vers la page principale.
10. modifier.html (Formulaire de modification) :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier un Article</title>
</head>
<body>
<h1>Modifier un Article</h1>
<form action="{{ url_for('modifier', article_id=article._id) }}"
method="POST">
<label for="titre">Titre: </label>
<input type="text" name="titre" id="titre" value="{{ article.titre
}}" required> <br>
<label for="contenu">Contenu: </label>
<textarea name="contenu" id="contenu" rows="4" required>{{
article.contenu }}</textarea> <br>
<button type="submit">Modifier</button>
</form>
<a href="{{ url_for('index') }}">Retour à la liste des articles</a>
</body>
</html>
• Le formulaire pointe vers la route de modification spécifique pour l'article en cours.
• Les champs "Titre" et "Contenu" sont pré-remplis avec les valeurs actuelles de
l'article.
• Le bouton "Modifier" soumet le formulaire à la route de modification.
• Le lien "Retour à la liste des articles" redirige vers la page principale.
