Programming Assignment 3
A Music Web Application

Due on Thursday October 10 before midnight
Worth 5% of your final grade

Description

This project must be done individually. No copying is permitted. The goal of this project is to learn client-side web programming using JavaScript and AJAX. More specifically, you will create a Web application that displays information about music artists.

Platform

You will develop this project on the Omega web server. Look at the directions at omega.uta.edu student web page. Please call UTA OIT if you have problems with your omega account. You will test the project on your PC/laptop using the Mozilla Firefox web browser. You can use the firebug plugin for debugging your JavaScript code.

Setting up your project on Omega

If you are not familiar with Unix, read User Guides - Unix. Login on omega using SSH. After you login, at the SSH terminal session, look at your path using the unix command pwd. For example, if your username is xyz1234, you will see:

/home/x/xy/xyz1234
In the following, replace the path /home/x/xy/xyz1234 with your own path. Then, you do the following:
cd public_html
wget http://lambda.uta.edu/cse4392/project3.tgz
tar xfz project3.tgz
cd project3
ls -al
Then edit the file .htaccess (note: it starts with a dot) inside the project3 directory using your favorite editor (vi, pico, emacs, etc), and change the line
AuthUserFile /home/f/fe/fegaras/public_html/project3/.htpasswd
to point to your own path. Then do:
htpasswd .htpasswd xyz1234
(use your username instead of xyz1234). It will ask you for a password twice. This is the password you use when you run your web application on a browser. It already contains a password for the GTA; so the GTA can run the script of any student but you can only run your own script.

The project3 directory contains 3 files: proxy.php, music.html, and music.js. You should not change proxy.php (this is a proxy php script used to avoid the cross-domain restriction when using Ajax). All the web service requests to Last.fm should go through this proxy. See the example in music.js. Your project is to edit music.html and music.js as described in the description of the web application.

Getting an access key from Last.fm

You are going to use the Web Service REST API of the music application Last.fm. You first need to get an API access key from Get an API Account at Last.fm. The access key will allow you to send web service requests to Last.fm (maximum 1 request per second).

After you get the API key, you put it in music.js and you test your setup on your web browser by using the URL address:

http://omega.uta.edu/~xyz1234/project3/music.html
(use your username instead of xyz1234). and by typing the name of your favorite singer. This will display information about the singer in JSON form.

Documentation

The following web pages contain various tutorials. Use them as a reference only. The class slides contain enough information on JavaScript and AJAX.

Description of the Web Application

Your project is to develop a web application to get information about music artists, their albums, their concerts, etc. This application should be developed using plain JavaScript and Ajax. You should not use any JavaScript library, such as JQuery. The Ajax requests should return JSON, not XML. Note that everything should be done asynchronously and your web page should never be redrawn/refreshed completely. This means that the buttons or any other input element in your HTML forms must have JavaScript actions, and should not be regular HTTP requests.

Your application should have a text window where one can type the artist name (eg, The Beatles). It should display information about the artist (including a biography), their picture, a list of their top albums (including their pictures), and a list of their upcoming events. You need to use the following Last.fm methods:

You may assume that the person who uses this application will type the correct complete name of the artist. So you don't have to check for errors. For example, if someone types "Beatles" instead of "The Beatles", it will be an error, but you don't need to check for such errors.

Note that there is a lot of information returned by these web services. You don't need to use them all. Just use some of them.

What to Submit

Important: In the commet on top of your music.html file, put the URL address to run your web application, such as http://omega.uta.edu/~xyz1234/project3/music.html. Use the form below to submit your music.html and music.js files. We do not accept email or hardcopy submissions. You may submit your files as many times as you like, but only the most recently submitted files will be retained and evaluated (newly submitted files replace the old files under the same file name). After you submit the files, please double-check that your submitted files are correct by clicking on the Status link.

Submit Project #3:

Last modified: 10/01/13 by Leonidas Fegaras