Pizzeria
L’objectif de l’activité est de créer une petite application Web s’appuyant sur une base de données concernant des pizzas, du point de vue d’un gérant de pizzeria : recettes, prix, ventes, notation, …
Il est conseillé d’avoir auparavant fait l’activité « Pizzeria » avec SQLite
Préparation
Après accord du professeur et attribution d’un Raspberry PI (de raspberrypinsi1 à raspberrypinsi4) et d’un utilisateur (de nsi1 à nsi4), accéder en SSH à l’un des Raspberry PI.
Voir l’article Raspberry Pi du lycée
Schéma relationnel de la base de données
Pizzas (id, nom, prix_vente)
Produits (id, nom, prix_kg, allergene)
Ingredients (id_produit, id_pizza, quantite_kg)
Ventes (id, date, id_pizza, note_consommateur)
On appelle « ingrédients » d’une « pizza » l’ensemble des « produits » qu’elle contient, ainsi que leurs quantités.
Analyse du schéma
Les clés primaires et les contraintes de clé étrangères ont été déterminés dans l’activité avec SQLite.
Avec le SGBD MySQL, les domaines possibles sont beaucoup plus variés : VARCHAR, TEXT, INT, FLOAT, BOOL, DATE, …
Création des tables
Depuis l’application (sur le Raspberry Pi) phpMyAdmin (voir Raspberry Pi du lycée pour savoir comment y accéder) :
nsi1_pizzeria à nsi4_pizzeria selon les cas). ATTENTION ! le préfixe nsi1_ à nsi4_ est obligatoire !
Appeler le professeur
Remplissage des tables
Pour remplir une table, il faut utiliser la requête SQL INSERT INTO ... .
Le code SQL ci-dessous contient les 4 requêtes permettant de remplir chacune des 4 tables.
Appeler le professeur
Établissement des requêtes
La base de donnée étant remplie, il faut préparer les requêtes qui peuvent être nécessaires au gérant de la pizzeria.
Réalisation du site WEB
Le gérant de la pizzeria souhaite utiliser cette base de données pour réaliser quelques tâches de manière automatique :
- création et mise à jour des menus,
- évolution des ventes,
- évolution des bénéfices réalisés,
- notation des recettes par les consommateurs,
- …
Pour cela, on se propose de réaliser une application WEB, dotée d’un formulaire simple (quelques boutons et listes déroulantes), et affichant les résultats de requêtes préalablement définies.
Interrogation de la base de données
Pour interroger une base de données MySQL avec python, il faut utiliser une bibliothèque, comme mysql-connector par exemple (déjà installée sur les Raspberry Pi du lycée).
Voici un article sur l’utilisation de
mysql-connector.
Le programme Python qui interroge la base de données se situe sur le Raspberry Pi ; la base de donnée se trouve également sur le Raspberry Pi.
connect de mysql.connector.
SELECT.
UPDATE, INSERT INTO).
Structure de l’application Web
- créer un dossier nommé
pizzeria, ainsi que les sous-dossierslogs,staticettemplates(voir détails sur Construire_le_dossier_du_site). - créer le fichier
pizzeria.wsgi(voir détails sur Construire_le_dossier_du_site).
Test de la connexion Apache-WSGI-Flask
pizzeria.py avec le contenu suivant :from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "Pizzeria !"
if __name__ == "__main__":
app.run(debug = True)
htp://raspberrypinsi1:81 (ou :82, :83, :84 selon le nom d’utilisateur nsi1, nsi2, nsi3, nsi4).Le résultat devrait ressembler à ça :

Après modification d’un des fichiers de l’application Web, il faut impérativement modifier également le fichier pizzeria.wsgi (ajout/suppression d’une ligne vide par exemple).
Sans cela, les fichiers Python ne sont pas recompilés et par conséquent les modifications ne sont pas prises en compte !!!
Structure des pages
Flask permet de construire des pages dynamiquement : elles sont construites coté serveur, à l’aide du langage Python et Flask (voir : Python Flask).
Voici une structure envisageable :
Le fichier base.html
Un fichier base.html sert de base à toutes les pages du site.
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8" />
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% include "header.html" %}
<div class="interieur">
{% block content %}{%- endblock %}
</div>
{% include "footer.html" %}
</body>
</html>
Ce fichier comporte :
- au format HTML, l’entête HTML et les balises
<head>et<body>. - dans le corps de la page (
<body>) on inclue l’entête et le pied de page, enregistrés dans deux fichiersheader.htmletfooter.html, en utilisant dans le code HTML les instructions Flask (qui utilise le moteur de template Jinja){% include "header.html" %}et{% include "footer.html" %}
- le titre de la page et son contenu sont inclus grâce aux instructions
{% block title %}{% endblock %}et{% block content %}{% endblock %}
Entête et pied de page
Ils sont définis dans deux fichiers header.html et footer.html
Ces fichiers peuvent comporter :
- Des menus de navigation
- Des informations légales
- …
Les pages du site
Chaque page (xxx.html) aura la forme :
{% extends "base.html" %}
{% block title %}Titre de la page{% endblock %}
{% block content %}
... code HTML ...
{% endblock %}
Le fichier principal Python
Ce fichier (appelé ici pizzeria.py) est exécuté par le serveur (via wsgi) à chaque requête HTTP GET. Il définit l’application Flask (objet qui doit gérer les réponses HTTP), et les routes du sites (les URL qui doivent renvoyer des ressources).
pizzeria.py en lui donnant la structure suivante :# Le Framework (générateur de pages HTML)
from flask import Flask, render_template
# Application Flask
app = Flask(__name__)
# Pages HTML
pageACCUEIL = "accueil.html"
############################################################################################
@app.route("/")
def index():
return render_template(pageACCUEIL)
# Script de débuggage
if __name__ == "__main__":
app.run(host='0.0.0.0', debug = True)
Structure du dossier du site
Au final, le dossier du site aura cette forme :
- pizzeria
- logs
- templates
- base.html
- header.html
- footer.html
- accueil.html
- static
- images …
- css …
- pizzeria.wsgi
- pizzeria.py
header.html et footer.html, un fichier accueil.html et tester l’affichage correct de la page dans un navigateur.
table.html , en utilisant les structures Jinja {% for ... %}...{% endfor %} , écrire le code permettant de construire un tableau HTML (balise <table> ).Pour utiliser ce bout de code HTML dans un modèle (template), il suffit d’y insérer :
{% with t = ma_table %}
{% include "table.html" %}
{% endwith %}
page_pizzas.html, basée sur base.html, et incluant table.html, de sorte d’afficher, comme sur un menu, la liste des pizzas, leurs ingrédients (avec une astérisque à côté de chaque ingrédient allergène), leurs prix, et la note moyenne des consommateurs (sous forme d’étoiles ⭐⭐⭐⭐⭐).header.html) comportant un lien vers page_pizzas.html (utiliser url_for, voir documentation de Flask).


