Flask Delicious Tutorial : Building a Library Management System Part 5 - A Dip Into Templates Logic
Tags: flask, tutorial, python, templating
Published: 2020-04-08 16:56:30

---
title: Flask Delicious Tutorial : Building a Library Management System Part 5 - A Dip Into Templates Logic
published: true
description: Getting used to Flask templates syntax
tags: flask, tutorial, python, templating
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/y8f2xqeh8od69bb5qdj2.png
---

Previous: [Part 4 - Focus On Responses](https://dev.to/abdurrahmaanj/flask-delicious-tutorial-building-a-library-management-system-part-4-focus-on-responses-4j18)

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

I have configured everything in this repo:

[DeliciousFlask-5.1](https://github.com/DeliciousFlask/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

```html
<body class="container">
    {{1 + 2}}
</body>
```

if you go to _http://127.0.0.1:5000/render-curly-braces_ you'll see:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/medm4v7zc2ophhkeux2w.png)

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:

```html
<body>
    {{message}}
</body>
```

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

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

`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](https://dev-to-uploads.s3.amazonaws.com/i/sq6gwve63ukwp75jlak7.png)

## Rendering a loop

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

```html
<body class="container">
    {% for i in range(5): %}
        <div>{{ i }}</div>
    {% endfor %}
</body>
```

Going to _http://127.0.0.1:5000/render-loop_ gives:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xb5si3ezjwilx5jiqf8n.png)

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

## Rendering lists

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

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

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

```html
<body class="container">
    {% for fruit in fruits: %}
        <div>{{ fruit }}</div>
    {% endfor %}
</body>
```
Going to _http://127.0.0.1:5000/render-list_ gives:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d780j9iuce2g2r4i0p7y.png)

## 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:

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

    <div>x is equal to {{x}}</div>
</body>
```

Going to _http://127.0.0.1:5000/render-template-var_ gives:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qfwsb5w8c3slubm5yg8o.png)

## Render ifs

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

```html
<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>
```

Going to _http://127.0.0.1:5000/render-if_ gives:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l2wi15pxqzxnwvybotjf.png)

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](https://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.