Project Description
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 framework in Python.
In this article, we’ll create a simple website app to query real estate stats from a CSV on the server that looks like this:
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.
Step 1: Set Up 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.
Click here for instructions on setting up and activating a virtual environment.
Step 2: Install Libraries
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.
Step 3: Set up the Folder Structure
We want to have the following folder structure.
Then set up the app.py file that is responsible for most of the Flask action and create a basic template file from which all of the HTML files served by your app will inherit.
Follow our in-depth guide on how to set this up here:
🌍 Tutorial: Learn more about how to accomplish this step.
Step 4: Routes and Dynamic Content
First, add routes to your web project, so people can navigate to different parts of your website. You can do this by replacing the app.py file with the following code:
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")Second, you create blank HTML files that inherit from the base template and that should be returned after calling each of those URLs 'https://yourwebsite.com/', 'https://yourwebsite.com/reports', and 'https://yourwebsite.com/contact'.
Third, add Jinja to the base template file so that you can add some dynamically created content to your website—it shouldn’t return the same content for all users after all!
🌍 Tutorial: Learn more about how to accomplish this step.
Step 5: Styling, Navigation, and Running the App Locally
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.
Add Bootstrap to your project and create a navigation bar using the provided styling options.
Next, you can run your app with a simple command in your shell and view it in your browser:
🌍 Tutorial: Learn more about how to accomplish this step.
Step 6: Forms for User Input and Output
Add a Form with elements to an HTML page. Then add Jinja to the Reports page and update the code in app.py to get the HTML Form working.
Your project will look like this at this point:
Congratulations, users can now input numbers into the front-end and your Python code will process them on the back-end!
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).
🌍 Tutorial: Learn more about how to accomplish this step.
Step 7: Data Processing at the Back-End
Next, read in the Real Estate CSV file to a DataFrame and allow users to query the results based on the entered Zip code and display the results on the Reports page.
It’ll look like so:
🌍 Tutorial: Learn more about how to accomplish this step.
Step 8: Data Cleaning
In this step, you write some Python code to validate the Zip Code to make sure the user input is correct. You’ll clean up the data and reformat the sales price of the real estate objects for clarity of presentation.
🌍 Tutorial: Learn more about how to accomplish this step.
Step 9: Stylesheets
Next, we’ll add a stylesheet, and add some specific styles to the navigation bar and the remaining HTML pages. Styling should come after the core functionality is implemented—which at this point is done! 🙂
After this step, the website will look much cleaner and prettier:
🌍 Tutorial: Learn more about how to accomplish this step.
Step 10: Contact Us and Email Automation
The last step makes sure that users can contact you via the contact page. We’ll style it too using CSS and stylesheets and email the form values to you using the Flask functionality.
🌍 Tutorial: Learn more about how to accomplish this step.
Summary
This post has summarized the steps necessary to create a simple real estate related website with Flask. If you have followed the outlined steps and read the tutorials linked after each step, you should now have a running prototype website on your local computer.
You should also know the basics of how to create a dynamic and interactive website in Python, a skill that is sought-after by many companies today as a freelance or employed full-stack web developer!
Tutorials You Should Check Out Next
- Web Developer – Income and Opportunity
- Flask Developer – Income and Opportunity
- Python Developer – Income and Opportunity
Nerd Humor
