About

Menu ==== Nous allons créer un menu pour notre site web. Ce menu sera composé de deux éléments : un lien vers la page principale de notre site web et un lien vers une page "About" (A propos) qui sera dans le cadre de ce TP une simple page avec du texte. Tout d'abord, il faut créér le menu. Pour cela, nous allons modifier notre fichier `airport.html`. Retournez dans le fichier et ajoutez le code suivant après la balise `` : .. container:: highlight-html+jinja notranslate :name: id0 .. container:: code-block-caption ``mobility/templates/airport.html`` .. code-block:: html+jinja ... ... Les balises `

` et `

` est utilisée pour créer les éléments du menu. La balise `` est utilisée pour créer des liens hypertextes. Le lien hypertexte est défini par l'attribut `href` qui contient l'URL de la page vers laquelle le lien pointe. Dans notre cas, le lien pointe vers la page d'accueil appelée "Main page" et la page "About" de notre site web. Quand vous cliquez sur le lien "Main page" vous restez sur la même page, car vous êtes déjà sur la page d'accueil. Cependant, si vous cliquez sur le lien "About", vous aurez une erreur 404 car la page "About" n'existe pas encore. Nous allons la créer dans la section suivante. .. rubric:: Page About :name: about Pour créer la page "About", nous allons créer un fichier HTML appelé `about.html` dans le dossier `templates` de notre application. Dans ce fichier, nous allons ajouter le code suivant : .. container:: highlight-html+jinja notranslate :name: id1 .. container:: code-block-caption ``mobility/templates/about.html`` .. code-block:: html+jinja About
- Main page
- About
About

{{ helloWorld }}
Comme pour le fichier airport.html, nous avons ajouté une balise `
` pour garder le menu sur la page "About". Nous avons également ajouté une balise `
` pour le titre de la page et une balise `
` pour le texte de la page. Le texte de la page est défini par la variable `helloWorld` qui est passée à la page "About" à partir de la fonction `about` que nous créérons dans la section suivante. Ensuite nous allons créer la fonction `about` dans le fichier `__init__.py` pour renvoyer la page "About" à partir du fichier `about.html`. .. rubric:: Fonction about :name: about_fnt Retournez dans le fichier `__init__.py` et ajoutez le code nécessaire pour renvoyer la page ``about.html`` depuis la route ``/about`` : Vous devrez probablement importer **render_template** dans votre fichier **__init__.py** : .. code-block:: python from flask import Flask, render_template .. container:: highlight-python notranslate :name: id2 ``mobility/__init__.py`` .. raw:: html

Solution (Essayez d'abord par vous-même)
.. code-block:: python ... @app.route('/about') def about(): return render_template('about.html', helloWorld='Hello World') ... La fonction `about` est une fonction qui renvoie la page "About". La fonction `render_template` est utilisée pour renvoyer la page "About" à partir du fichier `about.html`. Nous avons également passé la variable `helloWorld` à la page "About" avec la valeur "Hello World". Cette variable est utilisée pour afficher le texte de la page "About". .. raw:: html
Sans changement au fichier CSS, vous devriez avoir un rendu similaire à celui-ci : .. image:: ../_images/mobility_final.png :class: screenshot align-center Nous avons maintenant un site web complet et fonctionnel. Néanmoins, vous pouvez remarquer qu'il y a pas mal de copier-coller entre les templates ce qui n'est pas très propre et rend le code difficile à maintenir. Par exemple si votre site évolue et que le nombre de pages augmente, vous devrez modifier en permanence la barre de navigation dans tous les templates. Pas très pratique.. Heureusement pour vous, les templates Flask sont équipés d'un système d'héritage similaire à la programmation orientée objet que vous avez vu lors du premier quadrimestre. Nous allons définir un fichier base.html qui va regrouper le code partagé entre les templates. .. container:: highlight-html+jinja notranslate :name: id0 .. container:: code-block-caption ``mobility/templates/base.html`` .. code-block:: html+jinja My App
Main page

About
Mobility
{% block content %} {% endblock %}
Noter le bloc ``{% block content %}``. Il s'agit de l'endroit où le contenu des autres pages sera injecté. .. container:: highlight-html+jinja notranslate :name: id0 .. container:: code-block-caption ``mobility/templates/about.html`` .. code-block:: html+jinja {% extends "base.html" %} {% block content %} That's my page ! {% endblock %} Comme vous pouvez le voir, pour étendre une page, on utilise le block ``{% extends .. %}``. Le contenu du block ``{% block content %}`` sera injecté dans ``base.html``. Faites de même pour le fichier ``airport.html`` .. container:: highlight-html+jinja notranslate :name: id0 .. container:: code-block-caption ``mobility/templates/airport.html`` .. raw:: html

Solution (Essayez d'abord par vous-même)
.. code-block:: html+jinja {% extends "base.html" %} {% block content %}
Airports list
{% for airport in airports %} {% endfor %}

IATA code Name
{{ airport['iata'] }} {{ airport['name'] }}
{% endblock %} Même fonctionnement que pour l'exemple précédent. .. raw:: html
Félicitation, vous pouvez aller au document `suivant `__.