University of Washington, CSE 190 M

Lab 3: PHP

Except where otherwise noted, the contents of this document are Copyright 2010 Marty Stepp and Jessica Miller.

original lab idea and code by Brian Le; revised by Marty Stepp

Basic lab instructions

• You may want to bring your textbook to labs to look up syntax and examples.
• We encourage you to talk to your classmates; it's okay to share code and ideas during lab.
• You don't need to finish all of the exercises. Do as much as you can in the allotted time.
• Before you leave, check in with a TA to get credit.
• Resources: Firebug (make sure it's installed!), lecture slides

Today's lab exercises

Brian has written a page named music.html to display his MP3s. He has already written the basic HTML and CSS code. But the HTML is redundant, and he must manually edit it every time he adds songs to his collection.

In this lab, you will turn this page into a dynamic PHP page in a file named music.php that removes redundancy and dynamically lists the MP3s on the computer. Download the HTML file below to get started:

• music.html

Exercise : Basic Hello World (~5 min)

(See example screenshot on next slide.)

Let's turn music.html into a PHP page and make sure you can see PHP output on Webster.

• Download music.html and rename it to music.php.
• Upload it to Webster and point your web browser to music.php on Webster.
• Add a "Hello, world!" print statement to the page as PHP (not HTML!) code.
• Re-upload the page and refresh your browser. Make sure you see the hello world.

Exercise , output

The start of your page should look like this when you are done:

Exercise : Link Redundancy (~10 min)

(See example screenshot on next slide.)

• The five Yahoo music links at the top of the page are redundant.
• Express the repeated text at the top of the page using a for loop.
  • You should be able to change your loop bound to get more/fewer page links. Try that.
• Each link goes to a page of 20 videos. Page 1 has videos 1-20. Page 2 has 21-40, and so on. Add code so that each link lists its videos, such as "Page 1 (videos 1-20)".

See book Chapter 5 or the lecture slides/examples if you can't remember PHP syntax.

Exercise , output

The start of your page should look like this when you are done:

Exercise : List MP3 Files (~15 min)

(See example screenshot on next slide.)

Currently the page hard-codes the list of MP3 file names. Let's change it to read the file names dynamically from the server's hard drive.

• Download and unzip songs.zip , and upload the songs/ folder to Webster.
• Comment out the existing list of MP3/playlist file names on the page.
• Write PHP code that looks for the names of all .mp3 files in the songs/ folder using the glob function. (Pass a folder/file path to glob, NOT a URL. For debugging, you may want to print_r the array.)
• Write PHP code to print each file name as an li list item. (Don't worry about any links or images or formatting; just print each as a bullet in the list.)

Exercise , output

Your MP3 list should look like this when you are done:

Exercise : MP3 Formatting (~10 min)

(See example screenshot on next slide.)

Now let's format the MP3 links to look like the original hard-coded ones.

• Give each bullet an MP3 icon image by giving each li a class of mp3item.
• Make each item display just the song file name, without the songs/ folder.
  • You can use the basename function to extract the file name from a larger path string. e.g. basename("a/b/c.txt") returns "c.txt".
• Make each item be a link to download that song. (Add an a tag whose href target is the same as the song file's path.)

Exercise , output

Your MP3 list should look like this when you are done:

Exercise : Playlist Contents (~15 min)

(See example screenshot on next slide.)

Add code to display the contents of .m3u playlists. A playlist is just a text file containing a list of song file names, one per line. It can also have comment lines that begin with # . Example:

#EXTM3U
#EXTINF:177,Paul Dateh & Oren Yoel - Be More
be-more.mp3
#EXTINF:291,Christopher Toy - Just Because
just-because.mp3

• Write code that searches for all playlist .m3u files in the songs/ directory, and for each one, displays a list of the songs in that playlist.
  • Skip over any comment lines within the playlist.

Use the strpos function to search a line for a substring.

Exercise , example

Your page should look like this when you are done (scroll to the bottom):

Exercise : Song Size Info (5-10 min)

(See example screenshot on next slide.)

Display each MP3's size in appropriate units. Use the filesize function.

• If the song is 0 to 1023 bytes in size, display it as bytes.
• If it is 1024 to 1048575 bytes, display it as kilobytes (multiples of 1024 bytes).
• If it is 1048576 or more, display it as megabytes (multiples of 1048576 bytes).

If displaying kb or mb, show the value as a whole number.

Exercise , example

The songs should look like this on the page when you are done:

Exercise : (h4x0rz only): Ordering/Sorting

• Shuffle: Display the songs in a random order each time the page loads.
• Reverse order: Display the songs in reverse ABC order. You may want to look at PHP's array functions related to sorting.

• Sort by Size (hard!): Display the songs sorted from largest to smallest size rather than in their default sorted order. The largest songs (such as drift-away.mp3) would go first and smallest songs (such as cse-190M-rap.mp3) last.

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!