Home / MAD1 / Week 3

Week 3 · Views: Jinja2 templates, Bootstrap and forms

The one-minute story

By the end of this week you can:

• write a string with variables using f-strings and string.Template, and say how Jinja2 differs;
• predict the output of a Jinja2 template with variables, filters, loops, conditions and set;
• build a base layout with extends, block, super(), include and a macro;
• render a template from Flask with render_template and link CSS with url_for('static', ...);
• read form data with request.form and request.args and validate it on the server;
• explain why Jinja2 escapes HTML and what |safe does.

Words you need

Idea 1: Strings with blanks, the stepping stone

Before templates, Python itself can fill blanks. Compare three ways:

name, price = "Ria", 49.5

print(f"{name:>6}|{price:.2f}")             # f-string
print("{} owes {:.1f}".format(name, price)) # str.format
print("%s owes %d" % (name, 3))             # old % style

from string import Template
t = Template("The $color car is in $place.")
print(t.substitute(color="red", place="Goa"))
print(t.safe_substitute(color="red"))
try:
    t.substitute(color="red")
except KeyError as e:
    print("KeyError", e)

Output:

   Ria|49.50
Ria owes 49.5
Ria owes 3
The red car is in Goa.
The red car is in $place.
KeyError 'place'

• f-string: f"..." with {expression} and a format spec after a colon: .2f two decimals, >6 right-align in width 6, , thousands separator.
• string.Template: placeholders are written $name. substitute raises KeyError if a value is missing; safe_substitute leaves the placeholder as it is.
• The Template from string and the Template from jinja2 are different tools with different syntax. string.Template only substitutes simple $names: no loops, no conditions, no filters.

from string import Template as T1
from jinja2 import Template as T2

temp = "A student needs to complete $c1 level to get to the {{c2}} level."
out = T1(temp).substitute({'c1': 'foundation', 'c2': 'diploma'})
print(out)
print(T2(out).render({'c2': 'diploma'}))

PyHTML is a third way: build HTML with Python calls, for example html(head(title("Quiz 2")), body(h2("Heading"), p("Text"))) and .render() gives the nested HTML in the same order as the calls. Jinja2 is the one used in this course for real pages.

Idea 2: Jinja2 basics: variables, expressions, filters

Jinja2 works without Flask too, which is a good way to test a template:

from jinja2 import Template

t = Template("Hi {{ name }}, 2 x 3 = {{ 2 * 3 }}, you have {{ items|length }} items. {{ missing }}|")
print(t.render(name="Ria", items=[1, 2, 3]))

Output: Hi Ria, 2 x 3 = 6, you have 3 items. |

The missing variable printed nothing.

Passing data. render(name="Ria") and render({'name': 'Ria'}) are the same. Values may be strings, numbers, lists, dictionaries or objects. Inside the template, d.k and d['k'] both read a dictionary key, l[0] reads a list item, and methods can be called: if loan1.get_loan_details() returns (101, 45900, 5) then {{ l1.get_loan_details() }} prints (101, 45900, 5).

Expressions work like Python: {{ 7 // 2 }} is 3, {{ 7 / 2 }} is 3.5, {{ 'a' ~ 1 }} is a1 (~ joins text), {{ 'ab' * 2 }} is abab, {{ 'yes' if n > 1 else 'no' }}.

Filters go after a pipe and can be chained:

• {{ name|upper }} gives RIA, {{ 'ria dev'|title }} gives Ria Dev
• {{ name|default('guest') }} gives guest when name is not defined
• {{ items|length }} is the size (the paper's right answer; len(items) and items|len are wrong)
• {{ items|join(' / ') }}, {{ items|first }}, {{ items|last }}, {{ items|sort }}
• {{ price|round(1) }}: 3.14159 becomes 3.1
• {{ items|sum }}, {{ items|max }}, {{ s|trim }}, {{ s|replace('a','z') }}

Chain: {{ ['b','a']|sort|reverse|list }} gives ['b', 'a'].

Autoescaping and |safe

If a user types <script> as their name, printing it raw would run their script on every visitor's page (an attack called XSS). So Flask turns autoescape on for .html templates: < becomes <, the browser shows the characters instead of treating them as a tag.

from flask import render_template_string
render_template_string("{{ s }} | {{ s|safe }}", s="<b>hi</b>")

Result: &lt;b&gt;hi&lt;/b&gt; | <b>hi</b>. The first shows the literal text <b>hi</b> in the browser; the second makes real bold text.

from jinja2 import Template

template = '''
Welcome to {{Degree}} DEGREE
First level to clear is {{level}}
'''
print(Template(template).render(Degree="IITM BS"))

(blank line)
Welcome to IITM BS DEGREE
First level to clear is

Idea 3: Control flow: for, if, set, whitespace

{% for c in courses %}
  <li>{{ loop.index }}. {{ c }}{% if loop.last %} (last){% endif %}</li>
{% else %}
  <li>No courses</li>
{% endfor %}

With courses = ["MAD1", "MAD2", "DBMS"] the items are 1. MAD1, 2. MAD2, 3. DBMS (last). The else of a for runs only when the list is empty.

Loop over a dictionary with {% for k, v in d.items() %}{{ k }}={{ v }};{% endfor %}, which prints a=1;b=2; for d = {"a": 1, "b": 2}. Use range: {% for i in range(3) %} runs for 0, 1, 2.

Conditions: {% if n > 10 %}big{% elif n > 5 %}mid{% else %}small{% endif %}; with n = 7 this prints mid. You can use and, or, not, in, and tests such as is defined, is even.

{% set %} and its scope. set makes a variable. A set inside a for loop is local to that loop and is gone afterwards.

from jinja2 import Template
t = Template("""
{% for i in range(3) %}
  {% set x = i %}
{% endfor %}
[{{ x }}]
""")
print(t.render())

The output contains []: the x outside the loop is undefined, so it prints nothing (not 0, not 2). A past paper asked exactly this twice, once with range(3) and once with [1, 2, 3] in a Flask template (answer: "Output is:" and nothing after it). To add up values across a loop, use namespace:

{% set ns = namespace(t=0) %}{% for i in [1,2,3] %}{% set ns.t = ns.t + i %}{% endfor %}{{ ns.t }}

This prints 6. A set outside any loop works normally: {% set x = 5 %}[{{ x }}] prints [5].

Whitespace. Jinja2 keeps the newlines around your tags. A minus sign next to the tag brackets trims the whitespace on that side:

A = "<ul>\n{% for x in c %}\n<li>{{ x }}</li>\n{% endfor %}\n</ul>"
B = "<ul>\n{% for x in c -%}\n<li>{{ x }}</li>\n{%- endfor %}\n</ul>"
# c = ["a", "b"]
# A renders to '<ul>\n\n<li>a</li>\n\n<li>b</li>\n\n</ul>'
# B renders to '<ul>\n<li>a</li><li>b</li>\n</ul>'

The extra blank lines in A are harmless in HTML (the browser ignores them), so you will rarely need -. A past paper question puts groupby in a template:

temp = """
{% for vid, members in interfaces|groupby(attribute='lan') %}
 Interfaces in lan {{ vid }}: {{ members|map(attribute='name') | join(', ') }}
{% endfor %}
"""

With interfaces Ethernet1 (50), Ethernet2 (40), Ethernet3 (50), Ethernet4 (60) the output is three lines: lan 40: Ethernet2, lan 50: Ethernet1, Ethernet3, lan 60: Ethernet4. groupby sorts by the key and groups equal keys together; map(attribute='name') takes each item's name.

Idea 4: Templates in Flask

myapp/
  app.py
  templates/
    base.html
    index.html
    form.html
  static/
    style.css

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html", courses=["MAD1", "MAD2"], user="Ria")

• render_template looks in a folder named templates next to app.py, and extra arguments become variables. If you create the app with Flask(__name__, template_folder='my_templates') Flask looks only in my_templates, so a file in templates/ fails with TemplateNotFound. (This was the 5-mark question in a recent paper: routes using paths inside my_templates work, those asking for index.html or page.html that live elsewhere raise TemplateNotFound.) Subfolders are named in the call: render_template('public/home.html').
• Static files (CSS, images, JS) go in static/. Link them with url_for:

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<img src="{{ url_for('static', filename='logo.png') }}" alt="logo">

which renders as /static/style.css.

url_for(function_name, **values) builds a URL from the name of the view function, so changing the route later does not break your links:

@app.route("/home")
def index(): ...

@app.route("/student/<student_name>/<int:student_id>")
def profile(student_name, student_id): ...

with app.test_request_context():
    print(url_for("index"))                                       # /home
    print(url_for("profile", student_name="John", student_id=101))# /student/John/101
    print(url_for("index", page=2))                               # /home?page=2

Values that are part of the route fill the path; extra values become the query string. The argument is the function name profile, not the path. redirect(url_for("index")) sends the browser a 302 and a Location header, and the browser then makes a new GET (as in the 2022 paper's index2 route).

Idea 5: Reuse: inheritance, include, macros

Inheritance. Put the common page frame in one base file and fill the gaps in each page.

<!-- templates/base.html -->
<!doctype html>
<html>
<head>
  <title>{% block title %}Study Hub{% endblock %}</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
  {% block content %}{% endblock %}
  {% block foot %}(c) Hub{% endblock %}
</body>
</html>

<!-- templates/page.html -->
{% extends "base.html" %}
{% block title %}Home - {{ super() }}{% endblock %}
{% block content %}<h1>Hello</h1>{% endblock %}

Rendering page.html: the title becomes Home - Study Hub (super() pulls in the parent's block text), the content is <h1>Hello</h1>, and foot is not overridden so the parent's (c) Hub appears. I rendered a small version of this.

Include inserts another file at that spot, as is: {% include "navbar.html" %}. It sees the same variables. Use it for small repeated pieces (navbar, footer).

Macros are functions in a template:

{% macro box(text, kind='info') %}
  <div class="alert alert-{{ kind }}">{{ text }}</div>
{% endmacro %}

{{ box('Saved') }}
{{ box('Failed', 'danger') }}

Output: <div class="alert alert-info">Saved</div> and <div class="alert alert-danger">Failed</div> (default argument used for the first). In the 2022 paper a macro with a for loop printed the courses as page text, one after another, App1 App2 python Data science Database machine learning, not as a Python list with brackets and quotes. A macro must be called ({{ display(list) }}) or nothing shows.

Idea 6: Forms: GET and POST into Flask

Template form.html:

{% extends "base.html" %}
{% block content %}
<form action="{{ url_for('signup') }}" method="post">
  <input type="text" name="uname" required>
  <input type="number" name="age" min="5">
  <button type="submit">Send</button>
</form>
{% if error %}<p class="text-danger">{{ error }}</p>{% endif %}
{% endblock %}

Route:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/signup", methods=["GET", "POST"])
def signup():
    if request.method == "POST":
        name = request.form.get("uname", "").strip()
        age = request.form.get("age", "")
        if not name:
            return render_template("form.html", error="Name is required"), 400
        if not age.isdigit():
            return render_template("form.html", error="Age must be a number"), 400
        return f"Welcome {name}, age {int(age)}"
    return render_template("form.html")

Test results (I posted these with Flask's test client): uname=Ria, age=20 returns Welcome Ria, age 20; an empty name returns the form again with the error and status 400; age=x returns the second error. A plain GET to /signup shows the form.

• A route accepts only GET unless you list others in methods=[...]. Forgetting "POST" makes the form submit fail with 405.
• request.form["k"] raises 400 Bad Request if the key is missing; request.form.get("k") returns None.
• A form with method="get" puts the fields in the query string, so you read them with request.args. Reading request.form for a GET form gives nothing.
• request.args.getlist("tag") returns all values for a repeated key: ?tag=a&tag=b gives ['a', 'b'].
• Good practice: after a successful POST, do return redirect(url_for(...)) so a page refresh does not submit the form again.

Client-side versus server-side validation

• Client-side: HTML5 attributes (required, type="email", min, pattern) in the browser. Fast and friendly, but anyone can bypass it (edit the HTML, use curl).
• Server-side: your Python checks. Required for security and correctness. The form above has both: the browser blocks an empty name, and signup re-checks.

Flask-WTF (with WTForms) is an extension that defines forms as Python classes and adds validators and CSRF protection; know its name and purpose, but plain request.form is what the course shows first.

Idea 7: Bootstrap inside templates

Put the CDN link once in base.html, and every page that extends it gets the styles. A loop turns data into a styled table:

<table class="table table-striped">
  <thead><tr><th>#</th><th>Course</th></tr></thead>
  <tbody>
  {% for c in courses %}
    <tr><td>{{ loop.index }}</td><td>{{ c }}</td></tr>
  {% endfor %}
  </tbody>
</table>

With two courses this produces two tr rows, numbered 1 and 2, inside a Bootstrap-striped table. Other useful pieces: a form field is <input class="form-control" ...> in a <div class="mb-3">, a submit button is class="btn btn-primary", messages are alert alert-danger, and a top bar is a navbar (put it in its own file and include it).

Server-side rendering (what you do this week) sends finished HTML: fast first load and easy for search engines. In client-side rendering (MAD2) the server sends JSON and JavaScript builds the page. Neither removes the need for requests after the page loads.

@app.route("/hello/<name>")
def hello(name):
    return render_template("hello.html", n=name, tags=["a", "b"])

<p>Hi {{ n|upper }}!</p>
<ul>{% for t in tags %}<li>{{ t }}</li>{% endfor %}</ul>

Exam radar

Quick quiz

Viva: say it out loud

Recap

Practise with real exam questions

These come straight from past papers (with the real figures and the official answer key). Open 60 real questions on this week   All Quiz 1 papers