Build Website with Flask – Part 1

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.

Overview

Before moving forward, we recommend you set up a Virtual Environment.

Why use a Virtual Environment?

All your projects share the same globally installed libraries. But some of them may require different versions or incompatible libraries. This is where virtual environments come into play. A virtual environment serves as a “sandbox” for your Python program. You can install any external library or version there without having any global impact. The virtual environments are isolated, independent, and separate.

Finxter

💡 Note: Click here for instructions on setting up and activating a Virtual Environment.

Preparation

Before our code executes successfully, two (2) new libraries will require installation.

  • The Pandas library enables access to/from a DataFrame.
  • The Flask library allows us to create and render our website.

To install these libraries, navigate to an IDE terminal. At the command prompt ($), execute the code below. For the terminal used in this example, the command prompt is a dollar sign ($). Your terminal prompt may be different.

$ pip install pandas

Hit the <Enter> key on the keyboard to start the installation process.

$ pip install flask

Hit the <Enter> key on the keyboard to start the installation process.

If the installations were successful, a message displays in the terminal indicating the same.

Feel free to view the PyCharm installation guides for the required libraries.

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

Setup the Folder Structure

To keep our code organized, we will house it inside folders. To set up the folder structure, perform the following steps:

  • Navigate to the current working directory.
  • Create the realtors folder. Inside this folder, create:
    • a templates folder, and a
    • static folder.
  • Inside static, create a css folder.
  • Inside static, create an images folder.
  • Inside realtors, create app.py.

Output (Folder Structure)

💡 Note: For this article, we use Realtors CSV. Click here to download. Move this file to the realtors folder created above.

The Main App File

The first line of code we add to the app.py file creates an instance of Flask.

The name (app) allows us to reference resources, such as templates, files, and folders throughout our code. This file must reside in the root folder of realtors.

app = Flask(__name__)

Create a Basic Template File

In this section, we will create a Base Template. The Base Template defines the layout of the website. This layout may contain any number of columns and sections.

Other HTML files, such as Home, About, Contact, etc., are children of the Base Template. They fill in the empty blocks with content.

Create a Base Template file by performing the following steps:

  • Navigate to the templates folder.
  • Create base.html.
  • Paste the HTML code below into this file.
  • Save the file.

💡 Note: The base.html file could be named differently. For simplicity, we will keep this as is.

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

  <body>
  </body>
</html>

You will notice from the above code that this is a basic HTML file. In our next article, we will build out this file and add additional files.

Summary

In this article, you learned how to:

  • Create and Activate a Virtual Environment.
  • Install the Required Plugins.
  • Set up the Folder Structure.
  • Create app.py and add code.

What’s Next

In Part 2 of this series, we will:

  • Use Bootstrap to build out our website.
  • Add additional coding to the base.html file.
  • Create HTML files.
  • View the website in your Browser.