Questions? Feel free to head to CS50 on Reddit, CS50 on StackExchange, the #cs50ap channel on CS50x Slack (after signing up), or the CS50 Facebook group.

Objectives

  • Further your understanding of HTML and CSS.

  • Gain comfort with PHP in a web development context.

  • Work with files using PHP.

Academic Honesty

This course’s philosophy on academic honesty is best stated as "be reasonable." The course recognizes that interactions with classmates and others can facilitate mastery of the course’s material. However, there remains a line between enlisting the help of another and submitting the work of another. This policy characterizes both sides of that line.

The essence of all work that you submit to this course must be your own. Collaboration on problems is not permitted (unless explicitly stated otherwise) except to the extent that you may ask classmates and others for help so long as that help does not reduce to another doing your work for you. Generally speaking, when asking for help, you may show your code or writing to others, but you may not view theirs, so long as you and they respect this policy’s other constraints. Collaboration on quizzes and tests is not permitted at all. Collaboration on the final project is permitted to the extent prescribed by its specification.

Below are rules of thumb that (inexhaustively) characterize acts that the course considers reasonable and not reasonable. If in doubt as to whether some act is reasonable, do not commit it until you solicit and receive approval in writing from your instructor. If a violation of this policy is suspected and confirmed, your instructor reserves the right to impose local sanctions on top of any disciplinary outcome that may include an unsatisfactory or failing grade for work submitted or for the course itself.

Reasonable

  • Communicating with classmates about problems in English (or some other spoken language).

  • Discussing the course’s material with others in order to understand it better.

  • Helping a classmate identify a bug in his or her code, such as by viewing, compiling, or running his or her code, even on your own computer.

  • Incorporating snippets of code that you find online or elsewhere into your own code, provided that those snippets are not themselves solutions to assigned problems and that you cite the snippets' origins.

  • Reviewing past years' quizzes, tests, and solutions thereto.

  • Sending or showing code that you’ve written to someone, possibly a classmate, so that he or she might help you identify and fix a bug.

  • Sharing snippets of your own solutions to problems online so that others might help you identify and fix a bug or other issue.

  • Turning to the web or elsewhere for instruction beyond the course’s own, for references, and for solutions to technical difficulties, but not for outright solutions to problems or your own final project.

  • Whiteboarding solutions to problems with others using diagrams or pseudocode but not actual code.

  • Working with (and even paying) a tutor to help you with the course, provided the tutor does not do your work for you.

Not Reasonable

  • Accessing a solution to some problem prior to (re-)submitting your own.

  • Asking a classmate to see his or her solution to a problem before (re-)submitting your own.

  • Decompiling, deobfuscating, or disassembling the staff’s solutions to problems.

  • Failing to cite (as with comments) the origins of code, writing, or techniques that you discover outside of the course’s own lessons and integrate into your own work, even while respecting this policy’s other constraints.

  • Giving or showing to a classmate a solution to a problem when it is he or she, and not you, who is struggling to solve it.

  • Looking at another individual’s work during a quiz or test.

  • Paying or offering to pay an individual for work that you may submit as (part of) your own.

  • Providing or making available solutions to problems to individuals who might take this course in the future.

  • Searching for, soliciting, or viewing a quiz’s questions or answers prior to taking the quiz.

  • Searching for or soliciting outright solutions to problems online or elsewhere.

  • Splitting a problem’s workload with another individual and combining your work (unless explicitly authorized by the problem itself).

  • Submitting (after possibly modifying) the work of another individual beyond allowed snippets.

  • Submitting the same or similar work to this course that you have submitted or will submit to another.

  • Using resources during a quiz beyond those explicitly allowed in the quiz’s instructions.

  • Viewing another’s solution to a problem and basing your own solution on it.

Assessment

Your work on this writing problem will be evaluated along four axes primarily.

Scope

To what extent does your submission align with the requirements of the specification?

Correctness

To what extent is your submission correct and free of factual errors?

Design

To what extent is your code written well (i.e., clearly, efficiently, elegantly, and/or logically)?

Style

To what extent is your submission readable (i.e., thoughtfully organized, coherent, words properly spelled)?

To obtain a passing grade in this course, all students must ordinarily submit all assigned problems unless granted an exception in writing by the instructor.

Getting Ready

Make sure you’ve taken a good look at the CS50 materials on HTML and PHP.

Here’s Doug with a discussion of PHP in a web development context.

And Daven with a few words on HTML!

For good measure, take a look at Doug’s video on PHP as well, if needing a refresher on the syntax beyond just that used for web development!

Once comfortable, its time to dive in!

Getting started

Open up your IDE and make sure you have an updated IDE before executing (from within the directory where you are working on problems in Unit 8):

wget http://cdn.cs50.net/ap/1516/problems/8/1/address.zip

Unzip and open up the directory. You should see five files when you list your directory’s contents:

contacts.csv  index.html  styles.css submit.php  whoops.html

One Birthday Every Year?

It’s the CS50 Muppet’s birthday again! As one would expect, he has quite a few friends and, magnanimous muppet that he is, wants to invite them all to his birthday party!

Unfortunately, our friendly neighborhood Muppet has suffered an organizational disaster since his last birthday, losing almost all of his contact list. He has a few cobbled together from his phone[1], others in his email[2], and a select few he only has on business cards[3]. Instead of sending out lots of individual invitations, our Muppet wants to email all his friends at once (sound familiar?). But to do that, he needs to have all his friends' contact information in the same place, and ideally have a way to add new contacts for safe(r) keeping.

Contact Me

The good news is, we’ve volunteered you to help CS50 Muppet out! The task at hand is to create a form in HTML to compile all of the necessary contact information, and make it so that when the form is submitted, the action that form takes is to execute a PHP file that opens up CS50 Muppet’s contacts list (stored in a CSV file—do you remember what that is?), add a new line to it in that same format, and then close the file. You’ll use some of your previous experience working with PHP purely for scripting, as well as drawing upon your newfound knowledge of passing information from a form to a PHP file using $_GET or $_POST.

How do we do this and what shall you do? Allow us to briefly touch on the five files you’ve been given and make some suggestions on how to proceed:

contacts.csv

Remember that a CSV, or comma separated values file, is quite literally just a list of values separated by commas. Values are grouped together by the line that they are on in the file, thus a newline character separates each row of values. Our file, contacts.csv, contains the contact information of CS50 Muppet’s friends—or at least it will once you complete this problem!

Our file is structured like this: first name, last name, street address, city, state, zip code, cake preference. Notice that these are indeed the column headers that we included in the first line of the file!

As such, CS50’s own Milo Banana’s contact line would look like this:
Milo,Banana,50 CS Way,Cambridge,MA,02138,vanilla

But how will you fill this file, and ensure that it remains properly organized?

index.html

index.html will be the portion of the site that the end-user (CS50 Muppet or his friends) will most frequently interact with. It needn’t be terribly fancy—though this is a great opportunity to get more practice with CSS—but should simply be a form that collects all of the following information:

  • first name

  • last name

  • street address

  • city

  • state

  • zip code

  • cake preference

Note again that these are the first few values we’ve included in contacts.csv. As they are the first row, these values aren’t actually values, but the column headers! Thus, in every row, we can, and indeed should, expect the value to correspond to that column’s header. For example, everything in the first column should have been entered in the "first name" area in the form.

The last question should be a choice between chocolate and vanilla, but not both. Nor should users be able to enter any other flavors. Unfortunately, CS50 Muppet’s favorite bakery is not very flexible with their cake choices.

styles.css

This file is simply a basic CSS stylesheet to make our form a little bit easier on CS50 Muppet’s eyes. Feel free to play around with it to create your own unique look!

submit.php

But how will you get the form results into the CSV file? Well, that’s where submit.php comes in. Your form in index.html should, via POST, pass the form information to submit.php when the submit button is pressed (naturally). Inside submit.php, you should write two things:

  1. A PHP script that will enter the data from $_POST into contacts.csv, one row per submission

  2. A web page with a button that, when clicked, redirects the user back to index.html to submit another form

Recall that it is perfectly okay to mix PHP and HTML together, so long as the overall file extension is .php, so these two goals can indeed be accomplished in the same file! You’ll see that we’ve provided a very small skeleton to get you started.

Remember also that when you open a file (in C or in PHP) you have to specify the mode in which you are opening it. Be careful not to inadvertently choose the wrong mode! Read up on them a little bit, perhaps checking out the manual page for fopen.

One more thing: depending on the way you go about implementing submit.php, you may notice that there’s a pesky "Submit" in the CSV file at the end of each line. That column doesn’t have a header, and is generated by a submit button that you probably used when creating the form. If you see it in the CSV file, find a way to remove it before writing the output! We believe in you.

You will likely find the PHP functions array_pop, header and fputcsv quite helpful. Check out their online manual pages on php.net!

whoops.html

But wait, just like an annoying infomercial, there’s more. Sometimes, CS50 Muppet types so fast that he misses one of the entry fields for the form. This leads to missing contact information and then missing guests, which no one wants. Add a few lines to submit.php to ensure that if any field is empty, the user is instead redirected to whoops.html, where there is a button to return to the page and a message that the entry failed. Just like in your earlier version of submit.php, you will likely find the PHP function header quite useful. Of course, also don’t add the incomplete contact to the CSV!

Party Time

When finished your locally hosted site should be able to:

  • Take contact information from CS50 Muppet, entered via a web form

  • Ensure that the contact information is complete, redirecting the user to try again if not

  • If the contact information is complete, write it to contacts.csv

This was Problem 8-1.

1. Yes, Muppets use phones.
2. Yes, Muppets use email.
3. Yes, Muppets have business cards.