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.
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
usingcsv.writer
orcsv.DictWriter
, and - redirects the user to
/sheet
.
- validates a form’s submission, alerting users with a message via
- Complete the implementation of
get_sheet
in such a way that it- reads past submissions from
survey.csv
usingcsv.reader
orcsv.DictReader
, and - displays those submissions in an HTML table via a new template.
- reads past submissions from
- Style that table using Bootstrap so that it looks nicer than it would with raw HTML alone.