IO Lab HW4 Part 2: Flask To-Do List

Assignment Description

For this combo assignment/lab you will build a functioning to-do list using Python and Flask.

We expect that you will modify your existing to-do list from previous assignments, but if you prefer to start fresh you can build on to the basic to-do list located here: Sample to-do list

Helpful Links

• Jinja2 Template Docs
• Flask Docs
• Flaskr Sample App
• Flask API Example
• Python sqlite3 docs

Step 1: Plan the App

Right now, the to-do list items only exist client-side. Decide what routes your Flask app will need to store to-dos in a database and retrieve them again... at a minimum your app should support the following functionality:

• Add a new to-do.
• Remove a specific to-do
• View all to-dos

Step 2: Install Dependencies

Before you get started you will need to install Flask: Instruction.
Note: These instructions assume you have installed pip (Python package manager) prior to lab. If you have not yet, see the instructions on Piazza.

Step 3: Convert your to-do list into a Flask App

Perform the following steps to change your existing app into the format expected by Flask:

1. Create a file called app.py in the root directory of your project. Replace its contents with the contents with one of the following files in this repository:
   • If you are new to Python and SQL, copy app-easier.py
   • If you are already familiar with SQL and Python, copy the code from app-harder.py
2. Copy the file schema.sql from this repository to the root directory of your project.
3. Create a folder called templates in the root directory. Copy the html file from your to-do project into this directory (if it isn't named "index.html", rename it)
4. Create a folder called static in the root directory. Copy your css and javascript files into this folder. Don't forget to also change the references in your html files (e.g. instead of 'style.css' the link would be 'static/style.css'

Step 4: Update Schema

A basic to-do has a title and a flag to indicate whether the todo is complete. If todo items in your app have additional attributes, you will need to add additional properties to the schema.sql file.

Step 5: Run App

From the command line, CD into the project directory, then type python app.py. If the app starts successfully you will get a message saying that the app is running at http://0.0.0.0:5000. Go to a web browser and open http://localhost:5000. You should see your todo list page.

Step 6: Create Route Functions

In app.py, create a function for each of the routes you identified in step 1.

1. Matching routes
   For each function, specify what route should go there with the @app.route annotation, as in @app.route('/todos'). Don't forget to specify the method (eg POST, DELETE) for routes that are not GET requests.
2. Request data
   For some routes you will want to access data about the incoming request. See the Flask documentation for the Request object.
3. Database interaction
   If you copied the contents of app-easier.py, the file has a set of helper functions to use to access the database. Otherwise, you will need to use Python's sqlite3 module syntax - see link above.
4. Response data
   Each function should also return something to the client; depending on the structure of your app that could be a rendered HTML template, a JSON message, a string, etc. See the Flask docs for Response.
5. For functions that return HTML pages, you should create a template for the page, and the last line of the function will be something like return render_template("templatename.html", variable1=myvar1, variable2=myvar2...)

Step 7: Modify index.html and JS files

You will need to modify the JavaScript and index.html files as well so they communicate with the server-side code. For example, when the user submits the new item form you could post that data to the server with AJAX.