,

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

• Make sure to click the Attendance Check-In link on the Labs page to get your participation points.
• 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

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):

• music.php

Exercise : Variable for Song Count

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

• Download music.php and open it in your text editor.
• Add a variable for the number of songs, and use it in the HTML/PHP code.
  Change its value to something other than 1234, such as 5678.
• Express the number of hours of music in terms of your variable.
  Assume that 10 songs can be played per hour.
• Upload it to Webster and point your browser to music.php online to see the change.

Exercise : Loop for Links

• The five Google music result links at the top of the page are redundant, so express them using a for loop.
• You should be able to change your loop bound to get more/fewer page links. Try that. Also, the links should still work when you click on them.

Exercise : Array of Favorite Artists

• The page lists Brian's favorite artists as a bulleted list.
• Create an array containing the favorite artists' names and use the array to generate the bullets in the list.
• Test that it's working by adding at least one more favorite artist (e.g. Lady Gaga).

Exercise : File of Favorite Artists

• Instead of writing your own array of favorite artists, read them from a file, favorite.txt.
• Download this file to your machine and upload it to Webster with your PHP page. Read the artists from it, one per line.
• For added challenge, make each artist's name a link.
  • The links have names similar to the artist's name but in lowercase with dashes Hint: Check out PHP's String functions here.
  • Example: Justin Bieber links to https://www.vevo.com/artist/justin-bieber

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.

• We have placed several MP3 files on Webster for you in folder /www/html/cse154/songs/.
• 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 /www/html/cse154/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.)
• Print each file name as an li list item with the class of mp3item.

Exercise , output

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

Exercise : MP3 Formatting

(See example screenshot on next slide.)

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

• Make each item display just the song file name, without the .../songs/ folder.
  • 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 full URL.)
• For added challenge, display the size of each song file in kilobytes. You can get the size of a file in bytes using the filesize(filename) function. 1 kb is 1024 bytes.
• Use round() to round decimal numbers to whole numbers.

Exercise , output

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

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

• Write code that searches for all playlist .m3u files in the /www/html/cse154/songs/ directory, and for each one, displays a list of the playlist's songs as a nested list. (Use a separate foreach loop and glob call after the one for the MP3 files.)
• Use the strpos function to search a line for the index of a given substring.

Exercise , example

Your page should look like this when you are done:

Exercise : (h4x0rz only): Ordering/Sorting

• audio tag: HTML5 includes a new audio tag for playing sounds.
• Modify the page to insert an audio tag for each song so that it can be played in the page.
• 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-154-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!