Survey

Implement a web app that enables a user to:

  • fill out a form, a la Google Forms, the results of which are saved to a comma-separated-value (CSV) file on the server, and
  • view a table of all of the submissions received, a la Google Sheets,

a la the below.

Form page

Sheet page

Getting Started

Log into code.cs50.io, click on your terminal window, and execute cd by itself. You should find that your terminal window’s prompt resembles the below:

$

Next execute

wget https://cdn.cs50.net/hbs/2023/spring/labs/7/survey.zip

in order to download a ZIP called survey.zip into your codespace.

Then execute

unzip survey.zip

to create a folder called survey. You no longer need the ZIP file, so you can execute

rm survey.zip

and respond with “y” followed by Enter at the prompt to remove the ZIP file you downloaded.

Now type

cd survey

followed by Enter to move yourself into (i.e., open) that directory. Your prompt should now resemble the below.

survey/ $

Execute ls by itself, and you should see a few files:

static/  templates/  application.py  survey.csv

If you run into any trouble, follow these same steps again and see if you can determine where you went wrong!

Understanding

application.py

This file represents your web app’s “controller,” all of the logic that implements its functionality. Atop the file are a few imports of libraries followed by some configuration of Flask, per the comments therein. Below that are declarations of four routes, two of which are for you to do!

templates/layout.html

This file represents your web app’s layout, an HTML structure that all of your views will share.

templates/error.html

In this file is a template for any messages you might like to display to the user in the event of some error.

static/styles.css

In this file will be any of your own CSS properties for any or all of your app’s views.

Specification

  • Complete the implementation of templates/form.html in such a way that the form therein contains not only a button but also:
    • one or more text fields of any type,
    • ne or more checkboxes or two or more radio buttons,
    • one or more select menus, each with two or more options, and
    • zero or more other inputs of any type.
  • Style that form using Bootstrap so that it looks nicer than it would with raw HTML alone.
  • Complete the implementation of post_form in such a way that it
    • validates a form’s submission, alerting users with a message via error.html if they have not provided values for one or more fields,
    • writes the form’s values to a new row in survey.csv using csv.writer or csv.DictWriter, and
    • redirects the user to /sheet.
  • Complete the implementation of get_sheet in such a way that it
    • reads past submissions from survey.csv using csv.reader or csv.DictReader, and
    • displays those submissions in an HTML table via a new template.
  • Style that table using Bootstrap so that it looks nicer than it would with raw HTML alone.