Instruction
Overview
The goal of the third project is to create a Web application with database integration. In order to achieve that, we will use Python, Flask, PyMongo, HTML, CSS, and JS.
Preliminaries
1.Create a new project in the PyCharm IDE
a.Name the project as Project3
b.Select new environment as virtualenv
c.Select Python version 3.8
2.Install and import packages Flask, Flask-WTF, wtforms, dnspython and Flask-PyMongo
The project will have the follow hierarchy:
> Project3 (DIRECTORY)
>> app.py
>> static (DIRECTORY)
>>> css (DIRECTORY)
>>> images (DIRECTORY)
>>> js (DIRECTORY)
>> templates (DIRECTORY)
>>> addExpenses.html
>>> expensesAdded.html
>>> index.html
>>> template.html
In this WebApp, the user needs to log some expenses based on the following fields:
Description (for example, café con leche)
Category (for example, restaurants)
Cost (for example, 3.50)
Date (for example, 11/02/2020)
The main page should contain 4 sections:
1.Header
2.Add an expense
3.Track your expanses
a.Total (including all categories)
b.By category
4.Footer
When the user clicks the Add an Expense, a new page will be rendered including a form. When the user fills out all the fields of this form and clicks the Submit button, a new page will be rendered including a successful message and a Back to Homepage button.
The following video shows an example of the features and mechanisms of this WebApp:
(VIDEO)
In the backend, every time a user adds an expanse, a new document should be added to the collection in a database at MongoDB Atlas Cloud:
(IMAGE)
You must show the instructor an example of adding an expense both in the front end and also show the database being updated in the backend.
The following link contains a zip file with the templates for Project 3: