Flask Intro Chapter 2

Written By Jason Hwang

Welcome to Chapter 2 of ACA’s Flask Intro! We will expand on the work done in chapter 1 and customize the HTML & parsing logic.

Goal

Customize HTML & parsing logic.

Notes

Please follow each step closely. We’ll define key terms as we go and include extra resources for deeper learning.

1: Launch your Codespace from Chapter 1

Definitions:

  • Codespace: A cloud-hosted development environment by GitHub that lets you write, run, and test code from your browser or in Visual Studio Code.

2: Customize the HTML

Definitions:

  • HTML: Hypertext Markup Language, the standard markup language for documents designed to be displayed in a web browser.

Flask handles the frontend using HTML templates. We’ll customize the HTML to make it more user-friendly.

  1. Open the app/templates/index.html file.

  2. Update the h1 heading to make the page more descriptive:

<h1>Welcome to the Invoice Parser App</h1>
  1. Add a paragraph with instructions for the user:
<p>Upload your invoice file below to extract and analyze the data.</p>
  1. Add a footer to display additional information:
<footer>
    <p>&copy; YOUR NAME HERE. All rights reserved.</p>
</footer>
  1. Add a new text input field for the user to enter the output file name:

Add this code snippet inside the <form> tag, just before the submit button:

<label for="output_file_name">Output File Name:</label>
<input type="text" name="output_file_name" id="output_file_name" placeholder="invoices.csv" required>

3: Edit routes.py to match the HTML changes.

Uncomment line 34 and pass in the name of the text field you just added to the form.get() function.

4: Run python app.py

Same as in Chapter 1, it's now time to test our changes.

Done ✅

HTML & Parsing logic: customized.

Questions?

If you run into any issues, contact us at contact@aspire-coding-academy.com. We are happy to help troubleshoot. Follow us on LinkedIn for updates on new blog posts.

Jason Hwang
Next

Flask Intro Chapter 1