Chapitre 3 Flask Et MySQL

Chapitre 3 : Introduction à Flask et MySQL
I / Introduction
Pour que le framework Flask communique
avcec MySQL, il faut un pilote flask-
mysql nommé flask-mysqldb
Donc dans chaque projet Flask qui communique avec

MySQL , nous donnerons les commandes suivantes via le
Terminal :
pip install flask
puis
pip install flask-mysqldb
II/ Connexion à une base de données MySQL
Dans le fichier app.py , donnez les instructions suivantes
from flask import Flask, render_template, request, redirect,

url_for, flash
from flask_mysqldb import MySQL
app = Flask(__name__)
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = 'nom_base_donnes'
mysql = MySQL(app)
# différentes routes et leurs fonctions associées
if __name__ == "__main__":
app.run()
III/ Opérations CRUD

CRUD ( Create Read Update Delete) regroupe les différentes
opérations que l’on peut faire avec une base de données.
Chacune des séquences d’instructions suivantes devra être
incluse dans une fonction et associée à une route dans le
fichier app.py
On suppose qu’on dispose d’une base de donnée ong_db et
d’une table employes dans cette base avec les champs
suivants :
- Id int not null auto_increment
- nom varchar(25}
- prenom varchar(50}
- salbase int qui représente le salaire de base de
l’employé
A/ Lister tous les employés
cur=mysql.connection.cursor()
cur.execute("SELECT * FROM employes")
employes = cur.fetchall()
cur.close()
B/ Rechercher un employé d’id donné
cur = mysql.connection.cursor()
cur.execute("SELECT * FROM employes where id =
%s",(id,))
employe = cur.fetchone()
C/ insertion d’un nouvel employé
cur.execute("INSERT INTO employes (nom,
prenom,salbase) VALUES (%s, %s, %s)", (nom, prenom,
salbase))
mysql.connection.commit()
D/ Modifier les données d’un employé d’id donné

cur.execute("update employes set
nom=%s,prenom=%s,salbase=%s where id=%s ", (nom,
prenom, salbase,id))
E/ Suppression d’un employé d’id donné
cur.execute("DELETE FROM employes WHERE id=%s",
(id,))
III/ TP à réaliser
Créer une application Web Flask qui permet d’effectuer les
opérations CRUD (create read update delete} sur la table
employés
Créér la base de données ong_db ainsi que la table
employes.
La table employes comporte les champs :
- id de type int autoincréménté
- nom varchar(25)
- prenom varchar(50)
- salbase de type int qui représente le salaire de base de
l’employé
L’application comporte :
- le contrôleur app.py qui gère la connexion à la base
données ainsi que les requêtes depuis les pages web
- les vues index.html, ajout.html et modif.html qui
permettent respectivement de lister les employés,
ajouter un employé et modifier un employé. Utiliser
bootstrap dans les vues
3 – 1 la vue index.html (page d’accueil)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Liste des employés</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/c
ss/bootstrap.min.css" rel="stylesheet" integrity="sha384-
rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DG
LwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<h1>Liste des employés</h1>
<div>
<a href="/ajout" class="btn btn-success btn-xs">Ajouter
un employé</a>
</div>
<div>
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Nom</th>
<th>Prénom</th>
<th>Salaire</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{% for employe in employes %}
<tr>
<td>{{employe[0]}}</td>
<td><a class="btn btn-primary btn-xs"
href="modif/{{employe[0]}}">Modifier</a></td>
<td><a class="btn btn-danger btn-xs"
href="sup/{{employe[0]}}">Supprimer</a></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</body>
</html>
3-2 La vue ajout.html

<!DOCTYPE html>
<html>
<head>
<link
</head>
<body>
<h1>Enregistrer un employé</h1>
<form action="/ajout" method="post">
<div class="form-group row">

<label class="col-sm-2 col-form-label">Nom</label>
<div class="col-sm-6">
<input type="text" class="form-control"
name="nom" required = "true" >
</div>
</div>

<label class="col-sm-2 col-form-label">Prénom</label>
name="prenom" required = "true" >
</div>
</div>

<label class="col-sm-2 col-form-label">Salaire</label>
name="salbase" required = "true" >
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-success"
name="creer" value="Enregistrer">
</div>
</form>
</body>
</html>
3-3 la vue modif.html
<!DOCTYPE html>
<html>
<head>
<link
</head>
<body>
<h1>Modifier un employé</h1>
<form action="/modif" method="post">

<div class="col-xs-4">
ID:{{employe[0]}}
</div>

<label class="col-sm-2 col-form-label">Nom</label>
Nom: <input type="text" class="form-control"
name="nom" value="{{employe[1]}}" required = "true" >
</div>
</div>

<label class="col-sm-2 col-form-label">Prénom</label>
name="prenom" value="{{employe[2]}}" required = "true"
>
</div>
</div>

<label class="col-sm-2 col-form-label">Salaire</label>
name="salbase" value="{{employe[3]}}" required = "true" >
</div>
</div>
<input type="hidden" class="form-control" name="id"
value="{{employe[0]}}" >
<div class="form-group">
<input type="submit" class="btn btn-success"
name="modifier" value="Modifier">
</div>
</form>
</body>
</html>
3 – 4 le contrôleur de l’application Flask : app.py
from flask import Flask, render_template, request, redirect,
url_for, flash
from flask_mysqldb import MySQL
app = Flask(__name__)
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = 'ong_db'
mysql = MySQL(app)
@app.route('/')
def index():
cur=mysql.connection.cursor()
cur.execute("SELECT * FROM employes")
employes = cur.fetchall()
cur.close()
return render_template('index.html', employes =
employes )
@app.route('/ajout', methods = ['GET'])

def ajouter():
return render_template('ajout.html')
@app.route('/ajout', methods = ['POST'])

def creer():
nom = request.form['nom']
prenom = request.form['prenom']
salbase = request.form['salbase']
cur.execute("INSERT INTO employes (nom,
prenom,salbase) VALUES (%s, %s, %s)", (nom, prenom,
salbase))
return redirect(url_for('index'))
@app.route('/modif/<int:id>',methods = ['GET'])
def vsualiser(id):
cur.execute("SELECT * FROM employes where id =
%s",(id,))
employe = cur.fetchone()
return render_template('modif.html', employe=employe)
@app.route('/modif', methods = ['POST'])

def modifier():
nom = request.form['nom']
prenom = request.form['prenom']
salbase = request.form['salbase']
id = request.form['id']
cur.execute("update employes set
nom=%s,prenom=%s,salbase=%s where id=%s ", (nom,
prenom, salbase,id))
@app.route('/sup/<int:id>',methods = ['GET'])
def supprimer(id):
cur.execute("DELETE FROM employes WHERE id=%s",
(id,))
if __name__ == "__main__":
app.run()

Chapitre 3 Flask Et MySQL

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chapitre 3 Flask Et MySQL

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre 3 : Introduction à Flask et MySQL

Donc dans chaque projet Flask qui communique avec

from flask import Flask, render_template, request, redirect,

III/ Opérations CRUD

D/ Modifier les données d’un employé d’id donné

3-2 La vue ajout.html

<form action="/ajout" method="post">

<div class="form-group row">

<div class="form-group row">

<div class="form-group row">

<form action="/modif" method="post">

<div class="form-group row">

<div class="form-group row">

<div class="form-group row">

@app.route('/ajout', methods = ['GET'])

@app.route('/ajout', methods = ['POST'])

@app.route('/modif', methods = ['POST'])

Vous aimerez peut-être aussi