1- Préparer l'environnement de travail avec Flask

Pour faire fonctionner un site web, il est nécessaire d'utiliser un serveur web.

La majorité des sites web sont installés sur des serveurs PHP et parfois des serveurs python.

Mais les serveurs sont principalement sur des machines distantes.

La visualisation des sites web se fait avec un navigateur qui interprète en local les fichiers html, css et javascript.

struct client serveur js html css php

Or pour mettre au point un site web, il est plus commode d'installer sur son ordinateur un serveur web local.

Flask est un serveur web qui s'utilise facilement pour tester et mettre au point un site en local.

Consulter cette page web pour installer Flask.

Remarque sur l'encodage des caractères UTF-8

Dans Edupython, il faudra veiller à ce que le format des fichiers soit codé en UTF-8 :

Menu Edition -> Format de fichier ->  UTF-8

2- Exercice 1 : utiliser une feuille de style

 L'objectif de ce premier projet est que vous compreniez comment est organisée l'arborescence des fichiers avec un serveur Flask.

En premier lieu, créer le dossier exercice1 à l'intérieur du dossier projets_Flask.

Le site web comprend une page web index.html avec une feuille de style style.css et le fichier python exercice1.py de lancement du site web :

 arboFlaskExercice1

Pourquoi index.html ?

Le fichier index.html correspond au point d'entrée principal pour une application web : lorsque l'adresse principale d'un site est saisie dans le navigateur, c'est ce fichier qui est affiché par défaut.

 

 a- Créer la feuille de style

- Créer les dossiers static et css comme indiqué ci-dessus : veiller à bien respecter l'écriture des dossiers qui est nécessaire pour le fonctionnement avec Flask.

- Dans Edupython, créer un nouveau script et copier/coller le code suivant :

p {
    color : red ;
    text-align : center;
}

-  Sauvegarder sous ce fichier dans le dossier exercice1/static/css/ avec comme nom de fichier style.css - veiller à mettre l'extension .css

 b- Créer la page web

- Créer le dossier templates comme indiqué ci-dessus : veiller à bien respecter l'écriture du dossier qui est nécessaire pour le fonctionnement avec Flask.

- Dans Edupython, créer un nouveau script et copier/coller le code suivant :

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <link rel ="stylesheet" type="text/css"
        href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

- Sauvegarder sous ce fichier dans le dossier exercice1/templates/ avec comme nom de fichier index.html - veiller à mettre l'extension .html

c- Créer le fichier python de lancement du site web

- Dans Edupython, créer un nouveau script et copier/coller le code suivant :

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/")
def exo1():
    return render_template("index.html")
app.run(debug=True)

- Sauvegarder sous ce fichier dans le dossier exercice1/ avec comme nom de fichier exercice1.py - veiller à mettre l'extension .py

 d- Analyser le fonctionnement

Dans Edupython lancer l'exécution du fichier exercice1.py

Dans votre navigateur saisir l'adresse localhost:5000 afin de visualiser la page web avec sa feuille de style.

localhost : correspond à la racine du serveur web local qui pointe sur une adresse IP locale 127.0.0.1 

5000 : correspond au port par défaut du serveur web Flask

Le principe de fonctionnement se décompose en différentes étapes :

1- Dans Edupython, au lancement du fichier exercice1.py, le serveur web est lancé et ce dernier attend une requête pour afficher le page index.html

2- Dans votre navigateur, lorsque l'adresse localhost:5000 est saisie, cela génère une requête vers le serveur.

3- Le serveur Flask va générer le fichier de la page web index.html :

- Si la page web ne contient que du code html, le fichier restera tel quel.

- Si la page web contient du code python, l'environnement python de Flask va interpréter le code python et générer le fichier de la page web qu'avec du code html

En l'occurrence, dans notre exemple, le lien vers la feuille de style est analysé par Flask et va générer un lien en html

À noter que le code python est inclus dans des doubles accolades {{  }}

Voici une illustration de cette 3ème étape :

flaskPythonConvHtml

 Activer l'inspecteur dans votre navigateur afin de vérifier que la page en local est bien en écriture html.

 

4- Le serveur Flask va alors transmettre ce fichier à la machine ayant envoyé la requête. Dans notre cas la machine correspond au navigateur (fonctionnement en serveur local).

5- A la réception du fichier le navigateur analyse le fichier html afin de savoir si des fichiers sont requis (css, javascript, images) : des requêtes sont alors envoyées de nouveau au serveur pour obtenir ces fichiers.

Dans notre cas, le navigateur envoie une requête pour obtenir le fichier style.css.

6- A réception des différents fichiers de l'étape précédente, la page web est affichée à l'utilisateur.

 

Dans Edupython, il est possible d'observer l'activité du serveur :

projet1ActiviteServeur

 

 e- Exercice

Compléter la feuille de style en ajoutant à la balise paragraphe :

- du gras pour la police

- une couleur verte pour l'arrière-plan du texte.