Build Website with Flask – Part 2

by

This is part of our Flask series:

Story: Assume you work in the IT Department of Right-On Realtors. Your boss asks you to create a simple website the Realtors can query to view current Home Sales.

He would like this website created using the Flask plugin.

What is Flask?

Flask is a web app framework created with ease of use in mind. Without much training, you can easily create a simple web application. Flask works with Bootstrap, HTML, CSS, and Jinja (to name a few) to create a website.

Preparation

This article assumes you have completed the following from Part 1:

  • Created and Activated a Virtual Environment.
  • Installed all of the required plugins.
  • Created the appropriate folder structure.
  • Created and saved an app.py file that resides in the realtors folder.

Add the following code to the top of each code snippet. This snippet will allow the code in this article to run error-free.

import pandas as pd
from flask import Flask, render_template, request

Add Routes

Upon initial review, we decide that our website will contain three (3) pages:

  • Home page (index.html)
  • Reports page (reports.html)
  • Contact page (contact.html)

Let’s write code to connect these pages (using routes) in the app.py file.

app = Flask(__name__)

@app.route('/')             # home
def index():
    return render_template("index.html")

@app.route('/reports')      # reports
def reports():
    return render_template("reports.html")

@app.route('/contact')      # contact
def contact():
    return render_template("contact.html")
  • Line [1] creates an instance of the Flask object and returns this to app.
  • Line [2] sets the route to index.html. By default, the templates folder.
  • Line [3] defines the function index().
    • Line [4] uses render_template from the Flask library to allow the index.html file to display correctly in a Browser.

The remaining lines repeat for the reports and contact sections, replacing the details as appropriate.

💡 Note: Comments (#) identify the code sections and do not execute.

Create the HTML Files

Our next step is to create the three (3) empty HTML files in the templates folder (index.html, reports.html, and contact.html).

Navigate to the IDE and create these files.

Your folder structure should now appear as follows:

Output

Add Jinja to the Base Template

Let’s open the base template (base.html) file and add additional code to this file.

This file defines the base structure for all the HTML pages and allows each HTML page to contain different content inside the <body></body> tags. This is done by adding in some Jinja code.

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

  <body>
    <br/>
    {% block content %}
    {% endblock %}
  </body>

</html>
  • Line [1] adds a new line break tag in the HTML code.
  • Line [2] starts with a Jinja block denoted by the opening and closing % characters. This block could be named something else. For this example, it is named content.
  • Line [3] defines the end of the start block denoted by the open and closing % characters and the endblock command.

💡 Note: We recommend spending time learning Jinja and all it has to offer.

Summary

In this article, you learned how to:

  • Add Routes.
  • Create blank HTML files.
  • Add Jinja to the Base Template File.

What’s Next

In Part 3 of this series, we will:

  • Add a Navbar to the Base Template.
  • Add HTML & Jinja code to the three (3) blank HTML files.
  • View HTML files in a Browser.