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

1

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

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up