In this assignment, you'll build a simple web page for an e-commerce website, which sells Wellesley products. Here's a screenshot from the order page you'll build:Here is a screencast of the finished product.
- write functions
- write event-handlers
- test your code for many situations
- dynamically update the HTML
- submit a form using Ajax
- create a gallery of images
We are requiring pair programming for this assignment, which will work exactly like it did last week. We have added another worksheet to the same Google Doc for the purpose of creating teams. We strongly encourage you to find a different partner from last week. People have different strengths and weaknesses, and working with different partners will help you become more well-rounded.
How to Partner?
Use this shared Google Doc to record who your pair partner is for this assignment or find a partner who has similar scheduling constraints. Please use the hw9 tab, leaving the hw8 and hw7 tabs alone, to record those choices. It is not required to pair with your project partner, you can pair with anyone in any section, as long as you are able to find time to work together.
You must enter the names of team members in this spreadsheet (or if you got permission, your name alone), since the graders will use this document for grading purposes.
You'll use all your skills in this assignment:
- HTML to set up the page layout
- CSS to format it
The HTML/CSS code
Start by downloading the images you'll need from the Downloads folder.
assign9.html file, to match the screenshot
shown above. The requirements of the HTML file are:
- The page should contain two main sections; the shopping gallery, and the shopping order.
- The shopping gallery contains three items for sale. For each item, we display a thumbnail image representing it, an option field to choose the quantity to be bought, and a button to add the ordered items to the shopping list. Clicking on that button updates the shopping list shown in the shopping order form.
- The shopping order section contains an email form, with the customer name, email, and a summary of the order. At the bottom of the form, there is a button to place the order. Clicking on that button sends an email with the order summary to your email account (to help you test it).
- The form data should be sent to an email account of yours, using the custom PHP script that you created in class or in lab using this creator form. It has a form for you to fill out with your email address and your desired default values, and then gives you a PHP script in your Downloads folder (or wherever your browser puts it). (You did this in class and lab, but we've given you the link to the form in case you need to re-do it.)
- Note that the buttons on your form should
type=submit. We're using Ajax to submit the form, not the normal submit process.
- Create the order form as shown above.
- Edit it to specify your PHP script in the action attribute,
replacing the bogus value in the original. Note that your PHP
script needs to be in an accessible directory,
so not in your
protected/hw9/folder but in
public_html/mail-formfolder that we suggested you create to put your PHP script in.
- Test it by filling out the form and sending yourself an email message (non-Ajax, just normal form submission).
- The CSS for this page is fairly simple. Just make it look nice! Define a set of appropriate CSS rules to match the layout of the page displayed above.
- Make sure you include your HTML and CSS validation icons.
- Also, don't forget to include a link to the jQuery library.
Write your code in
assign9.js and link to that from the
Task 1: formatOrder function
Define a function named
formatOrderthat takes no
arguments, and formats the order summary as shown here:
The order summary includes the following information:
- The customer's name and email.
- The date and time the order was updated.
- The quantities of the items ordered.
The sharp-eyed readers may have noticed that the three items
are on separate lines. How did we do that? It turns out that
you can use a
\n in your strings to produce
newline character (ASCII code 10, if you're curious).
You can test whether you completed this task by filling out the form and then invoking the function in the JS console and looking at the result in the browser. Don't attach this function as an event handler to anything yet. (Or, you can look ahead to task 4 and see where this might be attached.)
Task 2: placeOrder function
Define a function named
placeOrderthat takes no
arguments, and submits the formatted shopping order using Ajax.
Remember that our automatically generated php code expects an object with the following literals:
You won't be able to test this function until you do task 3,
orderResponse function will be an argument
Task 3: orderResponse function
Define a function named
orderResponse, which the
response handler for the $.post invocation performed in the
previous task. It should dynamically change the HTML of the
response container, below the form, to indicate the status of
the order. The response might look like this:
Note that the custom PHP script that you are using returns a JS
object that only contains a
status property, with
possible values of
doesn't have a
text property like some of our other
status property is the only important
one, so your response handler can determine what text to provide
based on the
You can now test tasks 2 and 3 by filling
out the form and then invoking the
placeOrder function in the JS
console and then checking your email. There should also be a response
in the browser, thanks to task 3.
Task 4: event handling
Each button click performs a certain action. For example, the "Add to order" button updates the order summary, and the "Place order" button sends out an email. Handle the click event of each button appropriately.
Note that only the
Add to order buttons update the order
summary, so the order summary won't be updated when you choose a
quantity from the drop-down menus or when you fill in the
customer's name and email address. (Hint: use the function you
defined in task 1.) You can just click one of the
Add to order buttons to update that, if you want.
Once you get this task working, you'll have a working shopping cart!
hw9 folder to the server, into
protected folder. (Your PHP script will continue to
be outside this protected folder, in
Make sure your uploaded code works by visiting this URL
and interacting with your shopping cart/send an email to be sure it works correctly from the server.
NOTE: It is only necessary for one member of a pair programming team to submit to Gradescope. Don't forget to add your partner's name as a Group Member when making a submission.
- Open the Google Doc we shared with you titled:
CS110 Submission to Gradescope, and follow the instructions (make a copy of the file, edit the URL in the copy to correspond to your own assignment, and then create your own .pdf version of the copy).
- In your browser, go to gradescope.com and log in.
Your Courses, select
- You will see all of your current assignments. Click on the assignment you are turning in.
- In the dialog box that opens:
- Click Select PDF
- locate the correct file on your computer
- Click Upload PDF
- It may be necessary to reload the page to verify your submission was uploaded.
All the usual coding rules apply. See the style rules. Especially important is to not forget including comments in all your files to describe your choices and decisions.
Assignments are due at midnight on the due date (check the schedule). Assignments may be turned in up to 24 hours late, for a 10% penalty. Furthermore, remember that this policy means that you should not modify work after the due time has passed, or it will be time-stamped late, and will incur the late penalty.
Homework assignments must be your own work. You may not look at solutions from other students, either from the current offering of CS110 or from past offerings.
These are the criteria we use to grade the homework:
- Homework was submitted on the server by the due date. Late penalties apply.
- Folders and files have the required names and are uploaded to the proper location.
- Your HTML page shows at least three items for the customer to order from.
- The order summary is formatted correctly
Tutors can look at our solution if they need to.
Our tutors in the help room can help you with concrete problems and questions you have about the assignment, thus, go to the room prepared. If you find that you don't know how to start the assignment, you should visit the instructors during their office hours.