Except where otherwise noted, the contents of this document are Copyright © 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.
thanks to former TAs Victoria Kirst, Jeff Prouty, Morgan Doocy, Brian Le for their work on these labs.
We'll use a PHP web service and Scriptaculous to save a page's state to put accessories on a Mr. Potato Head.
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.
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.
(Continued on next slide.)
potato.php
to know which accessories to check.
potato.php
PHP service, but in this exercise you will write one.
eyes glasses moustache
. Upload this to your Webster space in the same folder as your potato.html
. Don't forget to set your content type to text/plain
.
potato.html
page it should not display Ajax errors, and now the eyes, glasses, and moustache should show up when it first loads. But if you refresh the page, it won't remember which accessories you checked.
(Continued on next slide.)
potato.php
, telling it what accessories are selected.
accessories
, a string containing the names of the selected accessories separated by spaces.
Param | Value |
---|---|
accessories |
current accessories as a string, e.g. "eyes glasses moustache" |
accessories
into a file potato.txt
.
(See the next slide if you have "permission denied" errors when saving the file.)
potato.txt
and send them as output. If there is no potato.txt
, send an empty string.
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 lab10b
folder itself; and also give the lab10b
folder the "Execute" permission.
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.
potato2.html
instead of potato.html
. (potato2.html
links to your own JS file, rather than the solution's JS file.)
potato.js
in your editor.
potato2.html
,
potato.js
(skeleton)
(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>
potato.php
using Ajax. The response text that comes back is a string such as "eyes glasses moustache"
. When the Ajax response arrives, break apart the string and check the boxes and show the appropriate accessories. (The starter JS code contains some functions to help you.) For example, if the response contains "hat"
, check the "hat"
box and show the "hat_image"
image.
checked
property.
h2
heading to list what the potato is wearing. It has an id
of status
:
<h2 id="status">He is wearing: </h2>
Now add the code to make the checkboxes work.
toggleAccessory
event handler so that when a box is checked/unchecked, the appropriate image is shown or hidden on the page.
grow
or appear
) and disappears (such as fade
or shrink
).
id
of every image is the same as the id
of the corresponding checkbox, but with "_image"
appended at the end.
When the user checks/unchecks a checkbox, save the current state of accessories to the server.
toggleAccessory
event handler for checkboxes to do this. We have provided a function getAccessoriesString
that returns a string representing which boxes are checked. For example, if checkboxes for eyes
, glasses
, and moustache
are checked, it returns "eyes glasses moustache"
.
accessories
.
Draggable
using Scriptaculous.
eyes 123 98 glasses 74 84 moustache 56 251
Draggable
object such as onStart
, onDrag
, and onEnd
.
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!