Build Website with Flask – Part 3

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 and Part 2:

  • 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.
  • Added Routes to the app.py file.
  • Added Jinja to the base template.
  • Created and saved HTML files to the realtors/templates folder.

In Part 3, you will learn:

  • What is Bootstrap?
  • How to link to Bootstrap.
  • How to add a Bootstrap Navbar.
  • How to add Jinja to HTML pages.
  • How to run Flask.
  • How to view the website in a Browser.

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

Link to Bootstrap

Bootstrap is a popular framework that contains numerous HTML, API, and JS code snippets. These snippets assist web designers/developers everywhere create a responsive website. Great news! Let’s use Bootstrap!

To use these snippets, we need to paste the code below inside the <head></head> tags of the base template (base.html) file to establish a link to Bootstrap.

To establish this link, perform the following steps:

  • Click here to navigate to the Bootstrap Introduction page.
  • Click the Copy button to copy the <link> snippet to the System clipboard.
  • Navigate to the IDE, and open the base template (base.html) file.
  • Click at the end of the <meta> tag line.
  • Hit the <Enter> key to add a new line.
  • Paste the contents of the System clipboard (CTRL+V).
  • Save the base template (base.html) file.

Output

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title></title>
  </head>

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

</html>

💡 Note: The Bootstrap Introduction page defines a few ways to link. Research to find which one best meets your needs. For this example, we selected CSS.

Add a Navbar

Since our base template (base.html) contains the website layout, let’s add a Navbar using Bootstrap that will be accessible throughout the site.

To add a Navbar, perform the following steps:

  • Click here to navigate to the Bootstrap Navbar page.
  • Scroll down the page until you see the snippet shown below.
  • Click the Copy button to copy the code snippet to the System clipboard.
  • Navigate to the IDE, and open the base template (base.html) file.
  • Click at the end of the <body> tag.
  • Hit the <Enter> key to add a new line.
  • Paste the contents of the System clipboard (CTRL+V).
  • Save the base template (base.html) file.

Output

The contents of the base template (base.html) file should now contain the following code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title></title>
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled">Disabled</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

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

Configure the Navbar

Looking at the image above, you will notice that the Navbar items need updating to meet our requirements. Update the code in the base template (base.html) file with the highlighted lines and remove the last menu item (Disabled).

In the code below, we switched out the href="#" code for the for_url() function, and passed the appropriate route as an argument.

It is best practice to use for_url() instead of hard-coding the URLs for the following reasons:

  • First, you can easily modify URLs instead of manually changing the hard-coded URLs.
  • The paths are absolute. Unexpected behavior of browser paths does not occur.
  • If the web application resides outside the URLs root, this function resolves the issue.
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="{{ url_for('index') }}">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{{ url_for('reports') }}">Reports</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{{ url_for('contact') }}">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

💡 Note: The argument inside url_for() corresponds to the name of the route in the app.py file.

Adding Content to the HTML Files

Below we add some code to the three (3) HTML files created in Part 2.

Update index.html

  • Navigate to and open the index.html file for editing.
  • Paste the code below into the file.
  • Save the file.
{% extends 'base.html' %}

{% block content %}     
    <div class="container">
       <h2>Right-On Home Page</h2>
    </div>
{% endblock %}
  • Line [1] tells HTML to use the base template (base.html) file.
  • Line [2] starts the block content for the index.html page. The original block is defined in the base template (base.html) file.
    • Lines [3-5] define <h2></h2> tags containing a heading for the page. This heading is placed inside <div></div> tags.
  • Line [6] ends the code block.

Update reports.html

Repeat the steps above (modifying <h2></h2> tags) to update reports.html.

{% extends 'base.html' %}

{% block content %}     
    <div class="container">
       <h2>Reports</h2>
    </div>
{% endblock %}

Update contact.html

Repeat the steps above (modifying <h2></h2> tags) to update contact.html.

{% extends 'base.html' %}

{% block content %}     
    <div class="container">
       <h2>Contact Us</h2>
    </div>
{% endblock %}

View in Browser

Thanks for staying with us. We are finally here! Let’s view the website in a Browser.

Navigate to the IDE. Paste the following code into the terminal.

$ flask run

Hit the <Enter> key to execute the command.

If successful, the following output will display:

Hover over the IP address, hold down the CTRL key and left-mouse click to be forwarded to a Browser.

Output

Just what we expected. The index.html file was the first page to appear. Click the other links to make sure everything works.

💡 Note: To view any changes, Flask needs to be re-started. To perform this task, navigate to the command prompt and enter CTRL+C (stop), then flask run (re-start).

Summary

In this article, you learned how to:

  • What is Bootstrap?
  • How to link to Bootstrap.
  • How to add a Bootstrap Navbar.
  • How to add Jinja to HTML pages.
  • How to run Flask.
  • How to view the website in a Browser.

What’s Next

In Part 4 of this series, we will:

  • Add a Form with elements to an HTML page.
  • Add Jinja code to the Reports page.
  • Add code to app.py to get the Form working.