tuto:flask

Écrire un serveur web dynamique en python avec Flask

Plusieurs documents pour vous initier à ce que l'on appelle le modèle client/serveur:

  • Une vidéo sur youtube expliquant rapidement ce qu'est le modèle client/serveur.
  • Par le même auteur, une vidéo plus spécifiquement sur les serveurs web.
  • Le cours sur le modèle client/serveur fait par un professeur de NSI, sur l'excellent site pixee.fr.

Écrire un serveur web dynamique en python peut être relativement simple, à condition d'utiliser une librairie dédiée à cela. Une des plus utilisée est flask.

Pour installer flask sur votre linux virtuel, rien de plus simple. Depuis un terminal, tapez la commande:

>>> yay -S python-flask

… et c'est tout !

  • Le cours dédié à flask sur pixee.fr est très bien fait et progressif.
  • Je vous ai préparé des petits scripts d'essais qui suivent de plus ou moins près ce cours dans le tp n° 17 (qui est en cours de construction).

Il faut commencer par télécharger le fichier zip contenant le TP depuis votre navigateur firefox lancé depuis le linux virtuel, pas votre firefox habituel sous windows/mac os.

Ouvrez ensuite un terminal, et saisissez les commandes suivantes. On va commencer par installer la commande unzip qui vous permettra de décompresser l'archive:

>>> yay -S unzip

Puis on déplace l'archive téléchargé dans notre racine:

>>> cd
>>> mv Téléchargements/tp17_serveur_flask.zip .

On la décompresse:

>>> unzip tp17_serveur_flask.zip

Et on lance le serveur flask du tout premier exemple:

>>> cd tp17_serveur_flask/01-test-flask
>>> python test.py

Le serveur flask devrait normalement se lancer. Pour voir si tout fonctionne, ouvrez votre navigateur firefox et saisissez l'url localhost:5000.

Vous devriez voir quelque chose ressemblant à ceci:

Pour l'instant, il ne vous reste plus qu'à tester (et surtout, à comprendre) les exemples suivants, tout en suivant le cours sur pixee.fr pour les explications.

Très important: Lorsque vous testez successivement plusieurs serveurs dynamiques, il est possible que votre navigateur firefox ne se rende pas compte des changements. Cela est du au mécanisme de mémoire tampon (caching en anglais). Pour faire simple: firefox (et tous les navigateurs modernes) gardent sur votre disque dur une copie des pages récemment consultées, et réutilise ces copies plutôt que d'encombrer internet lorsque vous rechargez une page. Ce n'est pas gênant pour une utilisation normale du web, mais peut poser problème à des développeurs.

Un moyen simple pour s'en sortir: cliquez sur le bouton de rechargement de la page (dans firefox), tout en maintenant la touche shift enfoncée. Cela forcera firefox à ne pas tenir compte de la version de la page stockée sur votre disque.

01-test-flask

Un premier serveur juste pour voir si flask fonctionne. Le script python lance le serveur, et envoie dynamiquement une page index.html à votre navigateur.

02-html-et-css

La même chose, mais on rajoute un fichier css généré dynamiquement par le script python.

03-html-css-js

Vous l'aurez compris: on rajoute un fichier javascript. Avec flask, on peut envoyer n'importe quel type de fichier au nagivateur.

04-pages-statiques

La possibilité d'envoyer directement du html/css/javascript à partir de chaînes de caractères python est très puissant, mais il faut reconnaître que ce n'est pas très pratique pour modifier ces fichiers (et il y a plein d'autres inconvénients).

Heureusement, flask peut aussi chercher de vrais fichiers sur le disque dur et les envoyer au navigateur: c'est après tout le rôle principal d'un serveur web.

05-templates

Le but n'est pas d'utiliser un serveur pour envoyer des pages statiques: après tout, c'est exactement ce que nous avions déjà fait pour le premier projet html/css/javascript, on ne va pas recommencer.

Nous cherchons plutôt à créer dynamiquement des pages html, c'est-à-dire que l'on cherche à envoyer au navigateur des pages html qui se modifient en fonction des interactions avec l'utilisateur (notamment par l'intermédiaire de formulaires, comme nous allons le voir un peu plus loin).

Le mécanisme des templates (que l'on pourrait traduire par modèle)) permet de créer très simplement des modèles de pages html, avec la possibilité supplémentaire de remplacer certains champs par le contenu des variables python fournies. Ce mécanisme est extrêmement puissant !

06-formulaire-méthode-GET

Il existe deux méthodes pour envoyer les données d'un formulaire html à un serveur: la méthode GET et la méthode POST. Nous examinons les différences principales entre ces deux méthodes avec les deux exemples qui suivent.

Attention: De nombreuses questions dans les QCM au baccalauréat portent sur ces différences, il faut les connaître.

Un premier exemple de formulaire html et la réaction dynamique du serveur. On utilise ici la méthode GET qui passera les paramètres directement dans l'url (regardez la barre d'url de votre navigateur, vous verrez le nom et le prénom que vous aurez saisi).

07-formulaire-méthode-POST

La même chose, mais avec la méthode POST. Cette fois, les données sont transmises de manière cachée entre le navigateur et le serveur, l'utilisateur ne les voit pas. Attention: ce mécanisme ne doit pas être utilisé pour obtenir des transmissions sécurisées: les données sont transmises sans aucun cryptage, il n'y a absolument aucune sécurité ici.

  • tuto/flask.txt
  • Dernière modification: 2020/04/09 16:52
  • par pascalgrosse