TP - Starting with Flask!

Implementing a view, interacting with user and inserting data in the database.

I- Displaying employees

We are going to implement a view that displays the employees that are already in the test.db file. Use the following code:

@app.route("/")
def index():
    from database import Employee
    employees = Employee.query.all()
    return flask.render_template("home.html.jinja2", employees=employees)

And create a template templates/home.html.jinja2 with the following content:

<ul>
{% for employee in employees %}
    <li>{{ employee.firstname }} {{ employee.lastname }} {{ employee.division }}</li>
{% endfor %}
</ul>

Now, run the webapp.py script and access the URL of the web application http://127.0.0.1:5000. It should look like in the following screenshot:

II- Adding employees using a form

In this Section we are going to implement a form that enables to add new employees.

First, create a new template templates/employee_form.html.jinja2 wit the following content:

<form method="post">
    <input name="firstname" type="text" placeholder="firstname">
    <input name="lastname" type="text" placeholder="lastname">
    <input name="division" type="text" placeholder="division">

    <input type=submit>
</form>

And create the corresponding method: @app.route("/new_employee") def generate_for_new_employee(): return flask.render_template("employee_form.html.jinja2")

You can browse to http://127.0.0.1:5000/new_employee to visualize the new form. The form is not ready yet as we need to create a function that will process its data!

The following function can be used to process the data sent via the previous form:

@app.route("/process_employee_form", methods=["POST"])
def process_employee_form_function():
    print(flask.request.form)
    firstname = flask.request.form["firstname"]
    lastname = flask.request.form["lastname"]
    division = flask.request.form["division"]

    print("I have to process a new employee whose name is %s"
          " and %s who is working in %s" % (firstname, lastname, division))

    return flask.redirect(flask.url_for("index"))

To use it we need to modify the template of the form to send its data to this new process_employee_form_function function:

<form action="{{ url_for("process_employee_form_function") }}" method="post">

You can enter data in http://127.0.0.1:5000/new_employee to visualize the new form:

Submitting a form with some data should display the following message in the output of the application:

ImmutableMultiDict([('firstname', 'Jonathan'), ('lastname', 'Pastor'), ('division', 'coder')])
I have to process a new employee whose name is Jonathan and Pastor who is working in coder

The first line says that the flask.request.form expression resolves as dictionnary containing the data of the form. The second line is just a formatted string with the parameters of the form.

Now that we have a method that can process the data sent by the form, we are now going to insert this data in the database! Modify the process_employee_form_function function to include the following code:

from database import db, Employee
    new_employee = Employee()
    new_employee.firstname = firstname
    new_employee.lastname = lastname
    new_employee.division = division

    db.session.add(new_employee)
    db.session.commit()

Let's add a link to the form on the homepage:

<a href="{{ url_for("generate_for_new_employee") }}">Add a new employee</a>

III- Updating a user

A- Loading default parameters in a form

In this Section we are going to reuse the previous code in order to be able to modify existing employees.

First, modify the template of the form, in order to:

Load default parameters value if they exists
contain an hidden parameter containing the ID of the employee that is going to be modified

Here is the code of the form with such modifications:

<form action="{{ url_for("process_employee_form_function") }}" method="post">
    {% if employee_id is defined %}
        <input name="id" type="hidden" value="{{ employee_id }}">
    {% endif %}

    <input name="firstname" type="text" placeholder="firstname" value="{{ firstname }}">
    <input name="lastname" type="text" placeholder="lastname"  value="{{ lastname }}">
    <input name="division" type="text" placeholder="division" value="{{ division }}">

    <input type=submit>
</form>

We can write a function that will be used to demonstrate the loading of default parameters in the form:

@app.route("/testing_form")
def testing_parameters_in_form():
    return flask.render_template("employee_form.html.jinja2",
                                 firstname="Donald",
                                 lastname="Duck",
                                 division="coder",
                                 employee_id=1)

B- Modifying an employee

Let's add a function update_employee that take the id of an employee as a parameter:

@app.route("/update_employee/<employee_id>")
def update_employee(employee_id):
    from database import Employee

    employee = Employee.query.filter_by(id=employee_id).first()

    if employee is None:
        return flask.redirect(flask.url_for("index", 404))

    return flask.render_template("employee_form.html.jinja2",
                                 firstname=employee.firstname,
                                 lastname=employee.lastname,
                                 division=employee.division,
                                 employee_id=employee.id)

If we browse to http://127.0.0.1:5000/update_employee/2, we can see the form with preloaded information of employee with id=2.

We need to modify the code of the process_employee_form_function function in order to handle update of existing employees!

To handle the update of existing employees, we need to implement the following behaviour:

(1) Check if an ID of an employee is provided by the form
(2) Retrieve the employee from the database
(3) Modify the existing employee record

The following code is a modification of the process_employee_form_function function that implements such a behaviour:

@app.route("/process_employee_form", methods=["POST"])
def process_employee_form_function():
    print(flask.request.form)
    firstname = flask.request.form["firstname"]
    lastname = flask.request.form["lastname"]
    division = flask.request.form["division"]

    print("I have to process a new employee whose name is %s"
          " and %s who is working in %s" % (firstname, lastname, division))

    from database import db, Employee

    if "id" in flask.request.form: # Behaviour (1)
        employee = Employee.query.filter_by(id=flask.request.form["id"]).first() # Behaviour (2)
    else:
        employee = Employee()

    if employee is None:
        flask.redirect(flask.url_for("index"), 404)

    employee.firstname = firstname
    employee.lastname = lastname
    employee.division = division

    db.session.add(employee) # Behaviour (3)
    db.session.commit()

    return flask.redirect(flask.url_for("index"))

Let's now add a link to ease the modification of an employee. To do so, we are going to modify the home.html.jinja2 template as follow:

<a href="{{ url_for("generate_for_new_employee") }}">Add a new employee</a>
<ul>
{% for employee in employees %}
    <li>{{ employee.firstname }} {{ employee.lastname }} {{ employee.division }}
        <a href="{{ url_for("update_employee", employee_id=employee.id) }}">Modify</a></li>
{% endfor %}
</ul>

IV- Toward a prettier website

A- Implementing a common layout between pages

We would like to have a kind of navigation bar at the top of each web page. This toolbar will implement:

A link to the home page
A link to create a new employee

We could add manually this bar on each of the page, however this would be a redundant approach.

Instead, we are going to play with the notion of layout. First, create a new templates/layout.html template with the following code:

<html>
    <head>
        {% block header %}
        {% endblock %}
    </head>
    <body>
        <div>
        <a href="{{ url_for("index") }}">Home</a>
        <a href="{{ url_for("generate_for_new_employee") }}">Add a new employee</a>
        <hr>
        {% block body %}
        {% endblock %}
        </div>
        <hr>
        Footer
    </body>
</html>

To benefit from this toolbar on the existing page, we have to modify their code:

Extends the parent layout templates/layout.html.jinja2
Embed the content in a body block

Here is the updated code of the home.html.jinja2 template:

{% extends "layout.html.jinja2" %}

{% block body %}
<ul>
{% for employee in employees %}
    <li>{{ employee.firstname }} {{ employee.lastname }} {{ employee.division }}
        <a href="{{ url_for("update_employee", employee_id=employee.id) }}">Modify</a></li>
{% endfor %}
</ul>
{% endblock %}

And here is the new code of employee_form.html.jinja2 template:

{% extends "layout.html.jinja2" %}

{% block body %}
<form action="{{ url_for("process_employee_form_function") }}" method="post">
    <input name="id" type="hidden" value="{{ employee_id }}">

    <input name="firstname" type="text" placeholder="firstname" value="{{ firstname }}">
    <input name="lastname" type="text" placeholder="lastname"  value="{{ lastname }}">
    <input name="division" type="text" placeholder="division" value="{{ division }}">

    <input type=submit>
</form>
{% endblock %}

B- Using Bootstrap

Bootstrap is a CSS framework that enables to quickly prototype a web application. It provides a set of CSS classes that can be used to build beautiful web pages.

Here are few useful links:

Let's get started with Bootstrap : let's leverage the starter example and modify the templates/layout.html.jinja2 file with the following content:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Web page title</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    {% block header %}
    {% endblock %}

    <style>
        body {
            padding-top: 5em;
        }
    </style>
</head>

<body>

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Planificator 5000</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
            aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="{{ url_for("index") }}">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">Employees</a>
                <div class="dropdown-menu" aria-labelledby="dropdown01">
                    <a class="dropdown-item" href="{{ url_for("generate_for_new_employee") }}">Add employee</a>
                </div>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

<main role="main" class="container">
    <div class="container">
        {% block body %}
        {% endblock %}
    </div>

</main><!-- /.container -->

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="http://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js"></script>
<script src="http://getbootstrap.com/docs/4.1/dist/js/bootstrap.min.js"></script>
</body>
</html>

It will result in the following design:

V- Playing with databases

A- Basic queries

1) Query objects

from database import Employee
all_employees = Employee.query.all()
maria_hendricks = Employee.query.filter(Employee.firstname == "Maria")\
                                .filter_by(lastname="Hendricks")\
                                .first()
business_employees = Employee.query.filter_by(division="business").all()

2) Adding objects

from database import Employee, db
new_employee = Employee()
new_employee.firstname = "Bob"
new_employee.lastname = "Douglas"
new_employee.division = "coder"
db.session.add(new_employee)
db.session.commit()  # Send the data to the database

3) Removing objects

from database import Employee, db
bob_douglas = Employee.query.filter_by(firstname="Bob")\
                            .filter_by(lastname="Douglas")\
                            .filter_by(division="coder")\
                            .first()

if bob_douglas is not None:
    db.session.delete(bob_douglas)
    db.session.commit()  # Send the data to the database

B- Manipulating relationships

You can add an employee to a project via the following code:

project.employees.remove(employee)
db.session.add(project)
db.session.commit()

In a similar way, you can unsubscribe with the following code:

project.employees.append(employee)
db.session.add(project)
db.session.commit()

VI- 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"/>