Chapter 11 ■ the World Wide Web

195

Listing 11-3. The base.html Page Jinja2 Template

{{ self.title() }}

{% block body %}{% endblock %}

The Jinja2 template language is what decides, for example, that a double-brace syntax, as in {{ username }},
is how you ask for a value to be substituted into a template and that brace-percent maneuvers like {% for %} can be
used to loop and repeatedly produce the same HTML pattern. See its documentation at http://jinja.pocoo.org/
for more about its syntax and features.
The login page shown in Listing 11-4 consists of nothing but a title and the form itself. You can see for the first
time a pattern that you will see again: a form element that provides an initial value="..." that should already appear
in the editable element when it first appears on the screen.

Listing 11-4. The login.html Jinja2 Template

{% extends "base.html" %}
{% block title %}Please log in{% endblock %}
{% block body %}

User:
Password:
Log in

{% endblock %}

By using this {{ username }} substitution into the value="...", this form will help the user avoid having to
retype their username if they mistype the password and get the same form over again.
The index page that will live at / has much more going on in its template, as you can see from Listing 11-5. Any
flash messages, if present, go right below the title. Then comes an unordered list (

) of list items (
• ) that each
  describes a single payment made to or from the account of the logged-in user, which has the title “Your Payments”
  displayed above it. Finally, there are links to the new-payment page and the logout link.
  
  

  Listing 11-5. The index.html Jinja2 Template

  
  

  {% extends "base.html" %}
  {% block title %}Welcome, {{ username }}{% endblock %}
  {% block body %}
  {% for message in flash_messages %}

  
  
  {{ message }}×
  
  {% endfor %}
  

  Your Payments