Une implémentation du TP pizzeria

En partant du TP Pizzeria, l’objectif est de créer une interface web pour créer et essayer des requêtes SQL.

Spécifications

L’utilisateur se connecte au serveur, qui lui retourne la page d’accueil et les fichiers ressources. Il peut soit créer sa propre requête SQL soit tester des requêtes proposées. La base de données est accessible en lecture seulement. Un bouton « Exécuter » permet d’envoyer la requête au serveur pour qu’il l’exécute et retourne le résultat au format JSON.

Le navigateur choisit alors la manière de l’afficher : sous la forme d’un menu de restaurant, sinon sous forme de tableau.

Outils

Mise en place

Configuration de NGINX

Après avoir installé NGINX ( sudo apt install nginx-light ), nous avons un serveur HTTP accessible à sur le port 80 de la machine (http://localhost). NGINX agissant comme serveur de fichiers statiques, il faut lui indiquer de se comporter comme un serveur mandataire pour les requêtes faisant référence à des fichiers HTML. Pour la période de développement, ajouter le bloc suivant suffit :

Puis créer un répertoire de travail, ici /home/pizzeria/.

Base de données

Les commandes qui suivent supposent une installation de MariaDB où l’utilisateur root n’est accessible que par l’authentification Unix.

Connexion à la base de données : sudo mysql

Nous avons une base de données pizzeria, et un utilisateur pizzeria qui ne peut accéder à la base de données qu’en lecture.

Passons au remplissage de la base de données en important le fichier SQL du TP :

Serveur Flask

Le serveur Flask sert d’intermédiaire entre l’utilisateur et la base de données. C’est ici qu’ont lieu les interactions avec la base de données, avec des échanges au format JSON.

/home/pizzeria/app.py

Template HTML

Un modèle sans style peut être utilisé pour tester le programme. Ici, la page de test contient un champ texte, un bouton pour exécuter la requête et un conteneur div pour afficher le retour. La requête se fait de manière asynchrone en utilisant l’APIAPI En informatique, une interface de programmation applicative ou API (Application Programming Interface) est un ensemble normalisé de classes, de méthodes ou de fonctions qui sert de façade par laquelle un logiciel offre des services à d'autres logiciels. fetch, puis le retour est affiché sous forme de tableau s’il n’y a pas d’erreur, sinon le <div id="result"></div>  contient le message retourné par le serveur.

/home/pizzeria/public/index.html

La forme

Cette partie concerne essentiellement le côté visible de l’application par l’utilisateur. Création d’un répertoire de travail :

Vite est un outil qui permet de servir le code en développement et de l’empaqueter en production. Ce système a notamment pour avantage de réunir les divers fichiers JavaScript en un unique (appelé bundle) et ainsi éviter une cascade de requêtes HTTP. Nous installons aussi CodeMirror qui permet la coloration syntaxique directement dans le navigateur. @types/codemirror  contient les définitions des types de cette librairie, ce qui permet à l’EDI de proposer l’autocomplétion.

Voici à quoi ressemble le début du fichier /home/pizzeria/main.js :

Cette manière d’inclure le CSS permet de créer un autre bundle, cette fois pour le style. Les fichiers importés peuvent faire référence à des fichiers locaux ou à des modules téléchargés, comme ici pour CodeMirror.

Une fois le code écrit, Vite peut lancer un serveur de développement :

Ou assembler le tout :

Optimisations

Notre site contient désormais de multiples images, des polices de caractères… Un premier test des performances du site peut se faire avec le site web.dev qui mesure notamment le délai avant que la page soit chargé. Un premier essai indique que les images sont volumineuses. Il est proposé de compresser les images au format WebP :

Nous pouvons aussi modifier les paramètres NGINX, pour notamment compresser css et javascript (le bundler les a déjà minimifiés) :

Dans le fichier /etc/nginx/nginx.conf :

Dans le fichier /etc/nginx/sites-available/default :

Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

code