Jinja est un moteur de template. Il permet d’écrire du code Python dans un template (en plus du HTML)
Pour indiquer à Jinja qu’on utilise des objets Python, il faut utiliser les syntaxes {{ }} , {% %} ou {{# #}} selon le code écrit
Pour insérer des objets Python dans un template, il faut les passer en paramètres de la fonction render_template au niveau de la vue
Jinja permet d’étendre des templates grâce à l’héritage : Pour éviter de dupliquer du code, vous pouvez importer des templates HTML au sein d’un autre template
{{ variable }}
{{ MyDictionnary.key }}
Les résultats des requêtes SQL sont le plus souvent un dictionnaire (une seule colonne) ou une liste de dictionnaires (une liste de colonnes)
2 structures de contrôles
{% for ... in ... %} ... {% endfor %}
{% if ... %} ... {% else %} ... {% endif %}{# commentaires #}Pour éviter des répétitions entre templates, il est possible de recourir à un mécanisme d’héritage. Pour hériter de la structure d’un template base.html, il faut indiquer à la première ligne du template hérité:
{% extends 'base.html' %}Lors de l’héritage, certains blocs de codes peuvent être surchargés. Ces blocs sont définis via le tag
{% block mon_block %} ... {% endblock %} {{ super() }}touch templates/tp1/layout.html templates/tp1/_nav.html templates/page1.htmlajouter au fichier tp1/layout.html le contenu ci-dessous :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% block title %}
<title>layout</title>
{% endblock %}
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" >
{% block stylesheets %}
<link rel="stylesheet" href="{{ url_for('static', filename='mes_styles.css') }}" >
{% endblock %}
</head>
<body>
{% include('tp1/_nav.html') %}
{% block body %}
<h2 style="color:blue">layout.html.twig</h2>
{% endblock %}
</body>
</html>ajouter au fichier tp1/_nav.html le contenu ci-dessous :
<div class="menu">
<a href="/page1" class="lien">Lien vers page1 </a>
<a href="/page2" class="lien">Lien vers page2 </a>
<a href="{{ url_for('show_page3') }}" class="lien">Lien vers page3 </a>
</div>ajouter au fichier tp1/page1.html le contenu ci-dessous :
{% extends 'tp1/layout.html' %}
{% block title %}
<title>page 1</title>
{% endblock %}
{% block body %}
<p>
<a href="/page2">
<img src="{{ url_for('static', filename='tp1/linux.jpg') }}"
alt="mon image devrait apparaitre" title="sympa linux!" width="250" height="200" />
</a>
</p>
<hr />
<p>
<a href="/page3">Lien vers page3 </a>
<br />
<a href="http://cours-info.iut-bm.univ-fcomte.fr" title="lien sur les cours TDs TPs du département informatique">Cours - TD - TP </a>
</p>
{% endblock %}ajouter au fichier app_tp1.py le contenu ci-dessous :
from flask import Flask, request, render_template, redirect, url_for, abort
app = Flask(__name__)
@app.route('/')
@app.route('/page1')
def show_page1():
return render_template('tp1/page1.html')
@app.route('/page2')
def show_page2():
return render_template('tp1/tp1_page2.html')
@app.route('/page3')
def show_page3():
return render_template('tp1/tp1_page3.html')
if __name__ == '__main__':
app.run(debug=True, port=5000)