Création d'un jeu du pendu dans une interface web.
Cette documentation est rédigée dans un fichier standard README.md au format Markdown.
- Créez un fork du dépôt avec le bouton
fork
:
-
Copiez l'URL de votre dépôt GitHub après le fork
-
Clonez le dépôt sur votre ordinateur :
git clone https://github.com/[[ votre nom utilisateur ]]/sonate_pendu
- Placez vous dans le dossier du dépôt Git cloné :
cd sonate_pendu
On peut employer un fichier (par convention requirements.txt) pour référencer les bibliothèques et leurs versions nécessaires au projet.
On utilise le gestionnaire de bibliothèques Pip pour les installer dans notre virtual env :
pip install -r requirements.txt
Si l'étape s'est bien déroulée, le terminal affiche un message comme quoi les bibliothèques suivantes sont bien installées :
Successfully installed Flask-3.0.0 Jinja2-3.1.2 Werkzeug-3.0.1 blinker-1.7.0 click-8.1.7
Le fichier server.py contient le strict minimum pour lancer un serveur web local avec Flask.
Le code est issu de la documentation Quickstart.
from flask import Flask
app = Flask(__name__)
@app.route("/")
def home():
return "<p>Hello, World!</p>"
Notre fichier Python s'appelant server.py
, on peut lancer l'application avec la commande suivante :
flask --app server run
Le terminal doit afficher un message attestant que le serveur local à bien démarré :
* Serving Flask app 'server'
* Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
* Running on http://127.0.0.1:5000
Press CTRL+C to quit
Les informations peuvent être décrites comme suit :
Log | Description |
---|---|
Serving Flask app 'server' |
Flask à démarré l'application nommée server en référence au fichier server.py |
Debug mode: off |
Le mode de debugging n'est pas actif (voir Debug Mode). |
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. |
Indication que le serveur démarré est lancé par une commande destinée à un travail de développement. On utilise d'autres utilitaires comme Gunicorn pour faire fonctionner un serveur en production. Pour nos besoins, c'est suffisant. |
Running on http://127.0.0.1:5000 |
Le serveur est actif et répond à l'URL http://127.0.0.1:5000 (5000 étant le port configuré par défaut). Vous pouvez cliquer sur le lien et ouvrir la page dans un navigateur web. |
Press CTRL+C to quit |
On peut mettre fin au processus en utilisant CTRL + C . |
Dans le fichier d'exemple server.py, c'est une sortie en HTML brut qui est réalisée :
return "<p>Hello, World!</p>"
C'est fonctionnel mais pour réaliser des mises en forme plus complexes, on se retrouve très vite limité.
En effet, on a besoin d'une structure HTML de base égale pour toutes les pages : on parle de layout
dans le domaine du développement web.
Un layout (en français disposition) est une page HTML structurée pour recevoir du contenu variable (corps de page). Le contenu de la page change en fonction d'où on se situe sur un site web, mais la structure (le layout) ne varie pas.
Par exemple, une entête avec un menu, un pied de page, sont des éléments qu'on peut intégrer dans un layout car ils restent souvent les mêmes, quelle que soit la page du site.
La première étape est de modifier le fichier server.py pour qu'il affiche des templates HTML (on parle de rendering en anglais) :
Le guide nous indique de faire 2 choses :
- Modifier notre valeur retour de la sorte :
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
return render_template("hello.html")
- Créer un fichier
templates/hello.html
:
<!doctype html>
<title>Hello from Flask</title>
<h1>Hello, World!</h1>
Par la suite, on redémmare le serveur :
flask --app server run