CS 374 HW5: Basic Web App
James Madison University, Spring 2022

Electronic submission due Mar 27th at 11:59 PM.
Each student submits two source files via Canvas.

Resources

• Flask docs
• Jinja docs
• Psycopg docs

Overview

For this assignment, you will create a basic web application that manages listings of used cars for sale. The following database schema is provided:

CREATE TABLE car (
    vin text PRIMARY KEY,
    make text NOT NULL,
    model text NOT NULL,
    miles integer NOT NULL,
    price real NOT NULL
);

Your application must be able to SELECT, INSERT, and DELETE rows in this table. If you need to update a row, simply delete it and insert a new version using the same VIN. (By the way, VIN stands for Vehicle Identification Number.) Your user interface should look like this:

Notice that the database aspect of this homework is intentionally straightforward. The point of this homework is for each of you to learn how to develop a web application on your own before the next phase of the group project.

For this homework assignment, you must use Python / Flask. Your solution must consist of two source files: cars.py for the application, and cars.html for the user interface. (You may use a different language / framework for the group project, but it must approved by the instructor.)

Instructions

1. Create a HW5 folder on your computer. Set up a virtual environment and install flask. Create a "hello world" application named cars.py that renders cars.html. Make sure everything is working before moving on.


2. Write your name in a comment on the first line of each file. Leave the second line of each file blank (so it's easier to read your name separate from the rest of the code).


3. Using pgAdmin, connect to the secN database and execute the CREATE TABLE statement above. Insert a rows for testing (by writing INSERT statements by hand).


4. Define the following routes in your application:
• "/"   Selects all cars from the database, and renders cars.html
• "/ins"   Inserts a new car into the database, and redirects to "/"
• "/del/<vin>"   Deletes a car from the database, and redirects to "/"


5. Implement the following details in your template:
• The <title> of the application should be Cars!
• The "Insert" button should post the form to "/ins"
• The "Delete" link should include the VIN at the end


6. Use flash() and get_flashed_messages() to notify the user after inserting and deleting a car. Include the VIN in your message (e.g, "Sucessfully inserted 1HGCM82633A004352").


7. For this assignment, you may assume that all input will be correct. Don't worry about validating input, displaying error messages, etc.

Honor Code Statement

This assignment must be completed individually. Your submission must conform to the JMU Honor Code. Authorized help is limited to general discussion on Discord, asking questions during class, and meeting with the instructor. Copying work from another student or the Internet is an honor code violation and will be grounds for a reduced or failing grade in the course.