,

Lab :

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.

Basic lab instructions

• You may want to bring your textbook to labs to look up syntax and examples.
• Have a question? Ask a TA for help, or look at the book or lecture slides.
• We encourage you to talk to your classmates; it's okay to share code and ideas during lab.
• You don't have to finish all of the exercises. Just do as much as you can in the allotted time. You don't need to finish the rest after you leave the lab; there is no homework from lab.

Today's lab exercises

This week, we'll write code to create a set of online flashcards.

Exercise : Creating a web service (~10 min)

Let's create a PHP service that outputs flashcard data

• Create a file called flashcards.php. Upload it to Webster and point your web browser to it on Webster.
• Write the PHP file, making it display the contents of a random file in the http://webster.cs.washington.edu/cse154/services/flashcards/pokemon directory.
  • You may want to review glob and scandir
  • You may find the array_rand function useful. It selects a random index of a passed in array.
• Test your service by refreshing the page several times and making sure you are getting random seeming questions and answers.

Exercise : Adding a parameter (~10 min)

Exercise : Output XML(~10 min)

Now alter your web service to output the question and answer in the XML format displayed below:

    <card>
        <question>
            What unusual thing did Catherine the Great store on her roof?
        </question>
        <answer>
            Cows
        </answer>
    </card>

All card files have two lines. The first is always the question and the second always the answer.

Exercise : Outputing JSON (~10 min)

Update flashcards.php to output JSON data in the format below when sent the parameter ?mode=categories

    { categories = [{math : 20}, {computerScience : 13}, {history, 12}] }
  

The catagories are the names of the folders inside the flashcards directory. The numbers are the counts of files in each of the folders.

Exercise : Ajax (~25 min)

Write a page called flashcards.js that makes requests to flashcards.php when its buttons are pressed.

The HTML page flashcards.html has a next button that should make a request to flashcards.php every other time it is clicked. The flashcards.php will send back data for a flashcard. Show only the question. When the next button is pressed again, display the answer. The view all button should request when pressed and then display a list of all the categories of flashcards available in the categories ul. When a category is clicked it should make all further times next is clicked only select cards from the selected category.

Download the HTML and CSS files below (right-click, Save Target As...) to get started:

• flashcards.html
• flashcards.css

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!