,

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.

Valid HTML5 Valid CSS

Basic lab instructions

Today's lab exercises

Brian has written a page named music.php 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 that removes redundancy and dynamically lists the MP3s on the computer. Download the file below to get started (right-click and Save As, or View Source):

Exercise : Variable for Song Count

Brian has 1234 songs (123 hours of music). Turn this into a PHP variable you can change.

expected output

Exercise : Loop for Links

expected output

Exercise : Array of Favorite Artists

expected output

Exercise : File of Favorite Artists

expected output

Exercise : List MP3 Files

(See example screenshot on next slide.)

The page hard-codes the list of MP3 file names. Change it to read file names from the server.

Exercise , output

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

expected output

Exercise : MP3 Formatting

(See example screenshot on next slide.)

Now let's format the MP3 links to look better.

Exercise , output

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

expected output

Exercise : Playlists

(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 # . (You can ignore/skip comment lines.) Example:

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

Exercise , example

Your page should look like this when you are done:

expected output

Exercise : (h4x0rz only): Ordering/Sorting

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!