Survey
tl;dr
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
Here’s how to download this problem’s distribution into your own CS50 IDE. Log into CS50 IDE and then, in a terminal window, execute each of the below.
-
Execute
cd
to ensure that you’re in~/
(aka your home folder). -
Execute
mkdir pset7
to make (i.e., create) a directory calledpset7
in your~/
directory, if you haven’t already done so. -
Execute
cd pset7
to change into (i.e., open) that directory. -
Execute
wget https://cdn.cs50.net/2018/fall/psets/7/survey/survey.zip
to download a (compressed) ZIP file with this problem’s distribution. -
Execute
unzip survey.zip
to uncompress that file. -
Execute
rm survey.zip
followed byyes
ory
to delete that ZIP file. -
Execute
ls
. You should see a directory calledsurvey
, which was inside of that ZIP file. -
Execute
cd survey
to change into that directory. -
Execute
ls
. You should see this problem’s distribution inside.
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/form.html
In this file will live your very own form, only the skeleton of which we’ve written for you.
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,
-
one 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
viaerror.html
if they have not provided values for one or more fields, just in case your JavaScript code let something through (or was disabled), -
writes the form’s values to a new row in
survey.csv
usingcsv.writer
orcsv.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
usingcsv.reader
orcsv.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.
Optionally enhance the table with JavaScript, as via DataTables.
-
Provided you meet these specifications, you’re welcome to alter the aesthetics of your app however you’d like, as via Bootstrap or your own CSS and HTML.
Testing
Correctness
Afraid there’s no check50
for this problem; it’s incumbent upon you to write and test your code using the testing and debugging strategies we have discussed throughout the course. As in past problems where you have not had access to check50
, know that your correctness score on this problem will be based on whether you meet the requirements of the specification as outlined above, whether your code is free of bugs, and whether your HTML is well-formed and valid. To ensure that your pages are, you can use the W3Schools HTML Validator service, copying and pasting your HTML directly into the provided text box. Take care to eliminate any warnings or errors suggested by the validator before submitting!
Style
style50 application.py
Afraid style50
does not support HTML files, and so it is incumbent upon you to indent and align your HTML tags cleanly, as the per the examples shown in prior weeks' lectures. Know also that you can create an HTML comment with:
<!-- Comment goes here -->
but commenting your HTML code is not as imperative as it is when commenting code in, say, C, Python, or JavaScript.
Staff’s Solution
It is reasonable to view its HTML and CSS.
How to Submit
Execute the below from within your ~/pset7/survey
directory, logging in with your GitHub username and password when prompted. For security, you’ll see asterisks (*
) instead of the actual characters in your password.
submit50 cs50/problems/2019/x/survey