This is part of our Flask series:
- Build Website with Flask β Part 1
- Build Website with Flask β Part 2
- Build Website with Flask – Part 3
- Build Website with Flask – Part 4
- Build Website with Flask – Part 5
- Build Website with Flask – Part 6
- Build Website with Flask – Part 7
- Build Website with Flask – Part 8
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, Part 2, Part 3, and Part 4:
- Created and Activated a Virtual Environment.
- Installed all of the required plugins.
- Created the appropriate folder structure.
- Created and saved an app.py file to 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. - Linked to Bootstrap.
- Added a Bootstrap Navbar to the
base template
file (base.html
). - Added Jinja to the HTML pages.
- Viewed the website in a Browser.
- Added a Form with elements to an HTML page.
- Added Jinja to the Reports page.
- Added code to
app.py
to get the HTML Form working.
In Part 5, you will learn how to:
- Read in the Real Estate CSV file to a DataFrame.
- Then, query the results based on the entered Zip Code.
- Finally, display the results on the Reports page.
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
Read CSV & Query DataFrame
Part 4 retrieved the Zip Code
entered on the Home
page and displayed it back to us on the Reports
page. Let’s expand on this.
The next step is to query the DataFrame
based on this Zip Code
and pass the results to render_template()
. Doing this will allow us to display all Home Sales from the selected Zip Code
on the Reports
page.
app = Flask(__name__) @app.route('/') # home def index(): return render_template('index.html') @app.route('/reports', methods=['POST']) # reports def reports(): cols = ['street', 'city', 'zip', 'beds', 'baths', 'sq__ft', 'price'] zip_code = request.form.get('zip_code', type=int) myData = (pd.read_csv('real-estate.csv', usecols=cols)[lambda x: x['zip'] == zip_code]) return render_template('reports.html', zip_code=zip_code, myData=myData) @app.route('/contact') # contact def contact(): return render_template('contact.html')
- Line [2] contains a list of DataFrame columns to use. This list is an argument on Line [4].
- Line [3] retrieves the
Zip Code
entered on theHome
page (index.html
) and converts it to an integer. - Line [4] does the following:
- it reads in the stated CSV file.
- It trims the DataFrame columns to the
cols
list on Line [2]. - Applies a
lambda
to include rows wherezip
equals theZip Code
on Line [3]. - It saves the output to
myData
.
- Line [5] does the following:
- Passes the HTML page name (
reports.html
). - Passes the
zip_code
variable (zip_code=zip_code
). - Passes the
myData
DataFrame (myData=myData
). - Returns and renders the template.
- Passes the HTML page name (
Display Results
In this section, the Reports page (reports.html
) code is updated to accommodate the display of the DataFrame records.
{% extends 'base.html' %} {% block content %} <div class='container'> <h2>Real Estate Transactions</h2> <h3>{{ zip_code }}</h3> <br/><br/> <table width="600"> <thead> <tr> {% for column in myData.columns %} <th>{{column}}</th> {% endfor %} </tr> </thead> <tbody> {% for key,value in myData.iterrows() %} <tr id="row-{{key}}"> {% for v in value.values %} <td>{{ v }}</td> {% endfor %} </tr> {% endfor %} </tbody> </table> </div> {% endblock %}
- Line [1] displays the Page Heading.
- Line [2] displays the
Zip Code
retrieved from render_template(). - Lines [3-5] does the following:
- defines an opening HTML table tag (<table>) with a width.
- defines an opening HTML heading tag (<thead>).
- defines an opening HTML row tag (<tr>).
- Lines [6-8] does the following:
- defines the opening for loop tag using Jinja.
- Uses Jinja to loop through myData and display the headings on a single row. One name per <th></th> tag.
- closes the for loop using Jinja.
- defines the opening for loop tag using Jinja.
- Lines [9-10] does the following:
- defines a closing HTML row tag (</tr>).
- defines a closing HTML header tag (</thead>).
- Lines [11] defines an opening HTML tbody tag (<tbody>).
- Lines [12-19] do the following:
- Lines [20-21] does the following:
- defines a closing
</tbody>
tag. - defines a closing
</table>
tag.
- defines a closing
Save and run!
If the Zip Code
exists in the DataFrame, the output will display as follows.
Output (snippet)

π‘ 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:
- Read in the Real Estate CSV file.
- Query the results based on a Zip Code.
- Display the results on the Reports page.
What’s Next
In Part 6 of this series, we will:
- Validate the Zip Code.
- Clean-Up the Data.
- Correct the Sales Prices.
- Format the Sales Prices.
- Update the Navbar.