Chapter 4 - Templates and assets files (CSS and Javascript)

Creating Web templates, adding assets to the application, and prettify the application using Bootstrap.

I- Templates

A- Quick introduction to Jinja templates

A template is a file that can be used as a basis to generate files such as configuration files or source code files.

Flask uses Jinja2 as a template engine. The following code illustrates how to generate an HTML file (similar to what we did in chapter2) thanks to Jinja2:

<html>
    <head>
        <title>Todolist</title>
    </head>
    <body>
        <form action="{{ url_for('form_handler') }}" method="post">
            <input name="task_text" type="text" placeholder="enter what you want to do"/>
            <input type="submit"/>
        </form>

        <ul>
        {% for task in tasks %}
            <li>{{ task }}</li>
        {% endfor %}
        </ul>
    </body>
</html>

Jinja2 proposes two mechanisms to help developers to generate documents:

Expressions abc{{ "def" }}ghij {{ task }} {{ user.name }}
Statements
- If
  {% if user.connected %} User is connected {% endif %}
- For
  {% for user in users %} a user {% endfor %}

B- Using templates

Create a templates folder: it will contain all the templates of the application. Copy the template from Section I-A in templates.

Let's now generate a view that will use this template. To do so, replace the generate_form function (from chapter 2) by the following code:

from flask import request, url_for, redirect, session, render_template

@app.route("/")
def generate_form():
    tasks = []
    if "tasks" in session:
        tasks = session["tasks"].split(":")
    return render_template("form.html", tasks=tasks)

II- Adding assets to the application

Assets files are files that are used by the browser in addition to the HTML code that is interpreted by a web browser. They can be images, CSS stylesheets or Javascript files.

In Flask, they are stored in the static folder. Create a static folder in your project, and then add three folders in the static folder:

We will add a first asset to the web application: create a theme.css file in the static and fill it with the following code:

body {
    padding: 15px;
    background-color: #EEEEEE;
}

.main-div {
    margin: auto;
}

.delete-link {
    floating: right;
}

Warning! If you want to learn more about CSS, you can take a look at this tutorial: learnlayout.com

Then, in the templates/form.html template, add the line in the HTML header:

<link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}" type="text/css"/>

III- Using the Bootstrap CSS framework

Bootstrap is a convenient CSS framework that proposes some CSS styling, which enables an easier development of nice a web site.

To use Bootstrap, you have to add a css file and js file to the existing project.

Now modify the HTML template to make it look like this:

<!DOCTYPE html>
<html>
<head>
    <title>Todolist</title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}" type="text/css"/>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>    
    <script src="https://getbootstrap.com/assets/js/vendor/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

</head>
<body>
<div id="container">
    <div class="row">
        <div class="col-md-6 main-div">
            <div class="card">
                <div class="card-header text-center">
                    <h1>Todos</h1>
                    <form action="{{ url_for('form_handler') }}" method="post">
                        <div class="form-group">
                            <input class="form-control" name="task_text" type="text" placeholder="Add todo"/>
                        </div>
                        <div class="form-group">
                            <input class="btn btn-success float-right" type="submit"/>
                      </div>
                    </form>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        {% for task in tasks %}
                        <li class="list-group-item">{{ task }} <a class="float-right" href="#">delete</a></li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

The application should be close to what is depicted in the following screenshot: