University of Washington, CSE 190M

Lab 9: Mr. Potato Head (Web Services and Scriptaculous)

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

original lab idea and code by Victoria Kirst and Jeff Prouty; revised by Brian Le and Marty Stepp

Valid HTML5 Valid CSS

Basic lab instructions

Today's lab

We'll use a PHP web service and Scriptaculous to save a page's state to put accessories on a Mr. Potato Head.

expected output

When an accessory is added or removed, this is sent to a PHP web service on the server, which saves/restores the state of options checked.

Exercise : Download Starter Files, Put on Webster (~5 min)

First, download (right-click) the starter file below and upload it to your Webster space. Then direct your browser to the Webster server to see it.

The starter page has all of the JavaScript and Ajax code already written, but is missing its PHP code. The page will show up and you'll be able to check/uncheck the boxes, but it will show Ajax error popup messages about "404 not found, potato.php". This is expected for now; next we will fix that.

Exercise : PHP Web Service v1 (~5 min)

(Continued on next slide.)

page Ajax GET request

Exercise , continued

Exercise : PHP Web Service v2 (Complete) (~15 min)

(Continued on next slide.)

page Ajax POST request

Exercise , continued

ParamValue
accessories current accessories as a string, e.g. "eyes glasses moustache"

Recall: file permissions

If you see an error about "Permission denied", right-click the potato.txt file in FileZilla and choose File Permissions.... In the box that appears, check the permission boxes for "Write" permission. Do the same for your lab9 folder itself; and also give the lab9 folder the "Execute" permission.

permissions 1 permissions 2

Exercise : Switch Starter Files (~5 min)

Now that your PHP web service works, you'll write some of the JavaScript code for the page. In the previous exercises, all of the JavaScript was already written, but we'll throw that out and rewrite it ourselves.

Exercise : JavaScript v1 (Initial Accessories) (~15 min)

(Continued on next slide.)

Now make the page fetch and display the initial accessories saved by the PHP web service.

Each checkbox in the page has an id to match a body part, such as ears, and should show/hide an image with a related id such as ears_image. Initially all images are hidden.

<fieldset id="controls">
	<legend>Parts</legend>
	<label><input id="arms" type="checkbox" /> Arms</label>
	<label><input id="ears" type="checkbox" /> Ears</label>
	...
</fieldset>

<div id="potato">
	<img id="arms_image" src="arms.png" alt="arms" />
	<img id="ears_image" src="ears.png" alt="ears" />
	...
</div>

Exercise , continued

Exercise : JavaScript v2 (Checkbox Toggling) (~15 min)

Now add the code to make the checkboxes work.

Exercise : JavaScript v3 (Save State to Server) (~10 min)

When the user checks/unchecks a checkbox, save the current state of accessories to the server.

page Ajax POST request

Exercise (advanced): More Scriptaculous Effects

If you finish them all...

If you finish all the exercises, you can add any other content or code you like to your page.

If the lab is over or almost over, check with a TA and you may be able to be dismissed.

Great work!