DEV Community

Cover image for Flask Delicious Tutorial : Building a Library Management System Part 5 - A Dip Into Templates Logic
Abdur-Rahmaan Janhangeer
Abdur-Rahmaan Janhangeer

Posted on

Flask Delicious Tutorial : Building a Library Management System Part 5 - A Dip Into Templates Logic

#flask #tutorial #python #templating

Previous: Part 4 - Focus On Responses

In this chapter we are going to explore the basics of templates in Flask.

I have configured everything in this repo:

DeliciousFlask-5.1

Download it, make sure you have Flask installed and run app.py

Curly braces

To differenciate between html and whatever you want to render, you use curly braces. In templates/curly_braces.html you'll see

<body class="container">
    {{1 + 2}}
</body>
Enter fullscreen mode Exit fullscreen mode

if you go to http://127.0.0.1:5000/render-curly-braces you'll see:

Alt Text

That's because enclosing 1+2 in {{}} causes flask to render the expression.

Rendering a Python variable

Let's say we have a variable called message. We want to render it in the template. In the html part we do:

<body>
    {{message}}
</body>
Enter fullscreen mode Exit fullscreen mode

and in app.py we pass it as a keyword argument in our return function.

@app.route('/render-variable')
def render_variable():
    return render_template('render_variable.html', message='I am a rendered variable!')
Enter fullscreen mode Exit fullscreen mode

message is the templates variable name and 'I am a rendered variable!' is the value.

Going to http://127.0.0.1:5000/render-variable gives:

Alt Text

Rendering a loop

The syntax for a loop is as follows, python side we just render the file:

<body class="container">
    {% for i in range(5): %}
        <div>{{ i }}</div>
    {% endfor %}
</body>
Enter fullscreen mode Exit fullscreen mode

Going to http://127.0.0.1:5000/render-loop gives:

Alt Text

Just don't forget to put rendering values in {{}}

Rendering lists

Let's say python side we have a list of fruits:

@app.route('/render-list')
def render_list():
    return render_template('render_list.html', fruits=['apple', 'orange', 'pear'])
Enter fullscreen mode Exit fullscreen mode

now we have a variable called fruits available in the template. We iterate over it just like a normal list:

<body class="container">
    {% for fruit in fruits: %}
        <div>{{ fruit }}</div>
    {% endfor %}
</body>
Enter fullscreen mode Exit fullscreen mode

Going to http://127.0.0.1:5000/render-list gives:

Alt Text

Setting a variable in the template itself.

To set a variable in the template itself you do:

{% set x = 5%}

You can then use it:

<body class="container">
    {% set x = 5%}

    <div>x is equal to {{x}}</div>
</body>
Enter fullscreen mode Exit fullscreen mode

Going to http://127.0.0.1:5000/render-template-var gives:

Alt Text

Render ifs

It's totally possible and useful to have ifs in templates:

<body class="container">
    {% set x = 5%}

    {% if x == 5: %}
        <h2>X is equal to 5</h2>
    {% else %}
        <h2>X is not equal to 5</h2>
    {% endif %}
</body>
Enter fullscreen mode Exit fullscreen mode

Going to http://127.0.0.1:5000/render-if gives:

Alt Text

as x is equal to 5

Where are the templates docs?

Flask actually use a sister project for templating called jinja. The whole docs can be found here: jinja.palletsprojects.com/en/2.11.x

Jinja2 is actually a very advanced and comprehensive templating library.

Throughout the chapters we'll cover the most common ones we'll use.

Top comments (0)