Programming Assignment 1
A Music Web Application

Due on Tuesday February 16 before midnight
Worth 6% 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.

This project must be done individually. No copying is permitted. Note: We will use a system for detecting software plagiarism, called Moss, which is an automatic system for determining the similarity of programs. That is, your program will be compared with the programs of the other students in class as well as with the programs submitted in previous years. This program will find similarities even if you rename variables, move code, change code structure, etc.

Note that, if you use a Search Engine to find similar programs on the web, we will find these programs too. So don't do it because you will get caught and you will get an F in the course (this is cheating). Don't look for code to use for your project on the web or from other students (current or past). Just do your project alone using the help given in this project description and from your instructor and GTA only.

Platform

You will do this project on your own PC/laptop. You need to install the XAMPP web server, which includes the Apache http web server, PHP, MySQL (MariaDB), and PHPMyAdmin (these are the only components you need). It's about 125MBs (775MBs after installation) and can be installed on Windows, Linux, and OS X. The installation directory is \xampp for Windows, /opt/lampp for Linux, and /Applications/XAMPP for OS X. To start the server on Windows, you run \xampp\xampp-control.exe and you start the Apache web server. You may have to change the Security properties of this executable to Full Control for Users. If you get an error "Apache shutdown unexpectedly", read this.

You will test the project on your PC/laptop using either the Chrome or Firefox browser. The project grading will be done on a Firefox browser. If you do not have Firefox installed, you can install it from http://www.mozilla.org/en-US/. Firefox comes with Web Developer Tools for debugging HTML and JavaScript.

Setting up your project

Download the project1 zip file project1.zip. Unzip it inside your web server document root directory (ie, inside the htdocs sub-directory in the XAMPP instalation directory). On Linux, you may have to do this as the root user.

The project1 directory contains 3 files: proxy.php, music.html, and music.js. The proxy script proxy.php is 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://localhost/project1/music.html
and by typing the name of your favorite singer/band. 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, 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 the artist name, a link to the Last.fm web page of the artist, information about the artist (including a long biography), their picture (large), a list of their top albums (titles & pictures), and a list of names of similar artists. 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

Zip your project1 directory and use the form below to submit your project1.zip file. We do not accept email or hardcopy submissions. You may submit multiple files, if you like, as long as they have different names. These files are automatically uploaded directly into your personal class account for this particular project, so you don't have to include your name or student ID or project number in the file name. 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 and by playing your game on your browser. If you cannot login or have a problem submitting the project using this form, ask the GTA for help.

Submit Project #1:

Last modified: 02/03/2016 by Leonidas Fegaras