Exercise 1: Buggy PHP

The following PHP pages each contain one or more bugs. The bugs could be syntax errors or incorrect logic. Look at each page, find the bug(s) and correct the errors.

1. buggy page 1 (source)
2. buggy page 2 (source)
3. buggy page 3 (source)
4. buggy page 4 (source)

Exercise 1: Solutions

1. buggy page 1
2. buggy page 2
3. buggy page 3
4. buggy page 4

Exercise 2: Gallery of Thrones

Given a directory of character pictures (got.zip), write a PHP web service vends these photos. These pictures represents characters in one of three "houses" (or families) in the Game of Thrones serires: House Lannister, House Stark, and House Targaryen (yes, we know there are more, but you can always add more pictures!).

Your webservice should simply print out (in plain text) a list of images, limiting to a specific house (if requested).

Example request: got.php?house=lannister                

images/lannister1.jpg
images/lannister2.jpg
images/lannister3.jpg
images/lannister4.jpg

Exercise 2: Details

If no query parameter is set, then the page should simply list all of the images in the images drectory.

The client can set a house query parameter to choose whether to list only pictures one of the three houses. This query parameter should accept the values of lannister, stark, or targaryen. Each .jpg photo in images.zip starts with the name of the character's house, followed by a number value (e.g., lannister2.jpg).

Print out the list of files including the images/ directory. This is loosely based on the assumption that your php webservice and your HTML/CSS/JS application would be served out of the same directory where images/ sits.

Exercise 2: Solution

Source (PHP)

Running Version (PHP)

Exercise 3: Captions

Write a form, caption.html which asks the user to select a photo to display and two lines of caption. We're not ready to let the user upload a photo, so we can hardcode a dropdown menu that simply lists all the files in images.zip.

Next, write PHP webservice caption.php that will accept the submitted caption and save it for future retrieval.

Finally, write a PHP webservice list.php that lists all the captions and their respective photos. Use this webservice to create a page with HTML and JS that displays all the photos and captions returned by list.php

Exercise 3: Details

Development Steps:

1. In HTML, write a form that has a <select> to choose a photo, a <textarea> for the caption, and a <button> to save
2. In JS, build a Javascript object when the user clicks 'Save', print out the object to the console
3. In PHP, write a stub for caption.php that simply var_dumps the $_POST array
4. In JS, write an Ajax Post to send the data to caption.php
5. Choose some way to store the data in files using PHP (one file per photo/caption pair, one big file of all the data, etc) and finish caption.php
6. In PHP, write list.php that vends the data stored by your caption.php
7. In HTML and JS, write a new page that uses list.php to build a page out of all the images and their captions.

Exercise 3: Details

Note: you can give the parameters different names, or pass a string of JSON instead of individual parameters.

Example POST to caption.php using Promises:

var captioned = { 
    "photoSrc" : "images/koala-curl.jpg", 
    "caption" : "Sooooo cuuuuute"
};
var ajaxPromise = new AjaxPostPromise("caption.php", captioned);

Exercise 3: Details

What should come back from list.php?

This is up to you: the idea is that you want to return something that is usable in JS on the client side.

There is usually a tradeoff in deciding who does more work, the client or the server. What is easier for the server to store is often harder for the Javascript to parse and use.

Exercise 3: Example Output

This example output just shows a sample HTML output. This version of the program lets the user split their caption into two lines, and the server stores each of them separately. You don't need to implement two lines of text for each caption (but you can if you want!).

Exercise 3: Solution

caption.php source

list.php source

Exercise 4: Puppies

Note: this exercise gives you the option of generating HTML content in a PHP page. Though this is a common practice throughout the web development industry, there are lots of reasons why generating HTML on the server side is suboptimal. For this class, this will be the only time that we ask you to write a PHP (or other server-side) program that generates HTML.

Given 5 image files (puppy1.jpg, puppy2.jpg, etc.) write a PHP page that displays all 5 images as seen here. You can get the five images in this zip folder.

output

Exercise 4: Solution

Solution (PHP)