CSE 154

Section 6: Introduction to PHP

Overview

In today's section, we will get more practice with PHP and use it to write own own trivia web service. We will also practice making calls as a client to our web service using JS and AJAX.

Exercise 1: Starting the PHP

First, we'll create a PHP service that outputs trivia facts. To get started:

  1. Create a file called trivia.php in Cloud9.
  2. Download this trivia.zip folder of subdirectories containing trivia information for different topic categories.
  3. Write the PHP file, making it display the contents in of a random file in the trivia folder (you may find glob and scandir helpful for accessing files in directories). You may also find array_rand useful, as it selects a random index of a passed-in array and file_get_contents helpful for getting the contents of a file.
  4. Test your service by refreshing the page several times and making sure you are getting random questions and answers.

Exercise 2: Adding Parameters

Modify your trivia.php page to take a parameter called mode. When the user passes in a mode value of categories, your service should output a list of all of the subdirectory names in the unzipped trivia/ folder. Otherwise, if passed mode as category, your web service should behave as before. Otherwise, print out a 400 error message, "Error: Please provide a mode of categories or category". 

astronomy
biology
computerscience
internet
...
pokemon

example output (mode=categories)

Exercise 3 Part I: Output JSON for Question Data

In this part of the section, you will practice outputting your data in a more useful JSON format. Recall that JSON is much easier for clients to process than plain text.

Alter your web service to output the question and answer in the JSON format displayed below:

{
  "question" : "What Pokemon comes first in the Pokedex?",
  "answer" : "Bulbasaur"
}

output (JSON)

Exercise 3 Part II: Output JSON for Categories Data

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

{
  "categories" : [
    { "biology" : 12},
    { "computerScience" : 10},
    { "internet" : 10},
    { "pokemon" : 12}
  ]
}

example output (JSON)

The categories are the names of the folders in trivia directory. The numbers are the counts of files in each folder.

Exercise 4: Using Your Web Service as a Client (AJAX)

Write a file called trivia.js that makes requests to trivia.php when its buttons are pressed (detailed specification below).

Trivia-It webpage

Exercise 4: Specification

The provided HTML page trivia.html (styled with trivia.css) has two main sections: div#category-view and div#question-view. When the page is initally loaded, only #category-view is visible (hidden elements have a class .hidden).

When the "List Categories" button is first clicked, a request should be made to trivia.php to fetch the JSON of all categories available (mode=categories). Upon success, display a list of all the categories of trivia available in the categories ul and remove the .hidden class from this list and the div#question-view section (intially only the "Next Question" button should be visible).

When a user clicks the "Next Question" button, your JavaScript should make a request to trivia.php every other time it is clicked. Your trivia.php should send back data for a trivia tidbit. Show only the question, and update the text of the button to be "Show Answer". When this button is pressed again, display the answer of the current question and change the button's text back to "Next Question". When a category is clicked it should make all further times next is clicked only select cards from the selected category.

Challenge Exercises (Practice at Home)

Add other styles and features to your page

Add more trivia tidbits to your trivia folder

Add more PHP query parameters and error handling

Implement a point system, where a user can guess the answer and get a point if correct.