Classe inversée

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.

Mise en place

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

Installation des bibliothèques

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

Lancement du serveur

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`.

Développement

Afficher des templates

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) :

Rendering Templates

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

Hipjea / sonate_pendu