Survey

For this lab, you’ll 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

sheet

Getting Started

Here’s how to download this problem’s distribution code. Log into CS50 Sandbox or CS50 IDE and then, in a terminal window, execute each of the below.

  1. Execute cd to ensure that you’re in your home directory.
  2. Execute wget http://cdn.cs50.net/hbs/2020/spring/labs/6/survey.zip to download a (compressed) ZIP file with this problem’s distribution.
  3. Execute unzip survey.zip to uncompress that file.
  4. Execute rm survey.zip followed by yes or y to delete that ZIP file.
  5. Execute ls. You should see a directory called survey, which was inside of that ZIP file.
  6. Execute cd survey to change into that directory.
  7. 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

  1. 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,
    • checkboxes or radio buttons, or
    • select menus. Style that form using Bootstrap so that it looks nicer than it would with raw HTML alone.
  2. Change the implementation of post_form, a function in application.py, in such a way that it
    • no longer renders error.html (which was just a placeholder so that you would see something when submitting your newly made form),
    • 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.
  3. Complete the implementation of get_sheet, another function in application.py, 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.

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.

References

Staff’s Solution

survey.cs50.net

It is reasonable to view its HTML and CSS.

How to Submit

Click Share toward your IDE’s top-right corner, then share your IDE with all three of these GitHub usernames:

  1. arturojreal
  2. dmalan
  3. elhumphrey