Utilisation de Flask pour afficher les données d'une base de données MySQL

Objectifs

À la fin de cette leçon, vous serez capables de : - Configurer un environnement de développement Flask. - Connecter une application Flask à une base de données MySQL. - Récupérer des données depuis MySQL et les afficher sur une page web.

Installation des paquets nécessaires

Commencez par installer Flask et un connecteur MySQL pour Python. Ouvrez votre terminal et exécutez :

pip install flask mysql-connector-python

Configuration de votre application Flask

Créez un nouveau dossier pour votre projet et à l'intérieur, créez un fichier appelé app.py. Ajoutez le code suivant pour configurer votre application :

from flask import Flask, render_template
import mysql.connector

app = Flask(__name__)

# Configuration de la connexion à la base de données
db = mysql.connector.connect(
    host="localhost",
    user="votre_user",
    passwd="votre_mot_de_passe",
    database="nom_de_la_base_de_donnees"
)

@app.route('/')
def index():
    cursor = db.cursor()
    cursor.execute("SELECT * FROM votre_table")
    data = cursor.fetchall()
    cursor.close()
    return render_template('index.html', data=data)

if __name__ == '__main__':
    app.run(debug=True)

Création du template HTML

Dans le même dossier que app.py, créez un dossier templates. À l'intérieur, créez un fichier index.html. Ajoutez le code HTML suivant pour afficher les données :

<!DOCTYPE html>
<html>
<head>
    <title>Page de données</title>
</head>
<body>
    <h1>Données de la Base</h1>
    <ul>
        {% for row in data %}
        <li>{{ row }}</li>
        {% endfor %}
    </ul>
</body>
</html>

Exécution de l'application

Pour exécuter votre application, retournez à votre terminal et lancez :

python app.py

Ouvrez votre navigateur et allez à http://127.0.0.1:5000/. Vous devriez voir les données extraites de votre base de données MySQL affichées sur la page.

Traiter un formulaire HTML avec Flask

1 - Créez un formulaire HTML dans votre fichier `index.html` pour ajouter un citoyen à la base de données :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Formulaire Flask</title>
  </head>
  <body>
    <h1>Veuillez entrer votre prénom</h1>
    <form action="/saluer" method="post">
      <label for="prenom">Prénom :</label>
      <input type="text" id="prenom" name="prenom" />
      <input type="submit" value="Soumettre" />
    </form>
  </body>
</html>

2 - Créer un fichier html pour saluer l'utilisateur

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Salutation</title>
  </head>
  <body>
    <h1>Bonjour, {{ prenom }}!</h1>
  </body>
</html>

3 - Créez une route dans votre fichier `app.py` pour traiter le formulaire :

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/saluer', methods=['POST'])
def greet():
    prenom = request.form['prenom']
    return render_template('saluer.html', prenom=prenom)

if __name__ == '__main__':
    app.run(debug=True)

Routes dynamiques

1 - Créer la page d'accueil

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Liste des articles</title>
  </head>
  <body>
    <h1>Liste des articles</h1>
    <ul>
      {% for id, article in articles.items() %}
      <li>
        <a href="{{ url_for('afficher_article', id=id) }}"
          >{{ article.titre }}</a
        >
      </li>
      {% endfor %}
    </ul>
  </body>
</html>

2 - Créez la page d'affichage d'un article

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>{{ article.titre }}</title>
  </head>
  <body>
    <h1>{{ article.titre }}</h1>
    <p>{{ article.contenu }}</p>
    <a href="/">Retour à l'accueil</a>
  </body>
</html>

3 - Créez une route dynamique pour afficher les détails d'un article :

from flask import Flask, render_template

app = Flask(__name__)

# Données simulées (par exemple, une base de données d'articles)
articles = {
    1: {'titre': 'Article 1', 'contenu': 'Contenu du premier article.'},
    2: {'titre': 'Article 2', 'contenu': 'Contenu du deuxième article.'},
    3: {'titre': 'Article 3', 'contenu': 'Contenu du troisième article.'}
}

@app.route('/')
def index():
    return render_template('index.html', articles=articles)

@app.route('/article/<int:id>')
def afficher_article(id):
    article = articles.get(id)
    if article:
        return render_template('article.html', article=article)
    else:
        return f"Aucun article trouvé avec l'id {id}", 404

if __name__ == '__main__':
    app.run(debug=True)