Programming Assignment 3
A Movie Web Application

Due on Sunday October 25 before midnight
Worth 5% of your final grade

Description

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 movies.

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. Finally, you should not post your code nor deploy your project on a public web site.

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, and MySQL, 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 Apache. 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 the Mozilla Firefox web browser.

Setting up your project

Download the project3 zip file project3.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 project3 directory contains 3 files: proxy.php, movies.html, and movies.js. The proxy script proxy.php is used to avoid the cross-domain restriction when using Ajax. All the web service requests to TMDb should go through this proxy. See the example in movies.js. Your project is to edit movies.html and movies.js as described in the description of the web application.
Note 10/21/2015: On Windows, you need to change the host URL in proxy.php to use http instead of https. This is because of security restrictions on curl on Windows.

Getting an access key from TMDb

You are going to use the Web Service REST API of the movie DB TMDb. You first need to get an API access key from Sign up a TMDb account. The access key will allow you to send web service requests to TMDb (maximum 3 requests per second).

After you get the API key, you put it in proxy.php and you test your setup on your web browser by using the URL address:
http://localhost/project3/movies.html
and by typing the title of your favorite movie. This will display a list of movies that match this title 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 movies, their cast, their posters, etc. This application should be developed using plain JavaScript and Ajax. You should not use any JavaScript library, such as JQuery. 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 section where one can type a movie title (eg, The Matrix), one "Display Info" button to search, one section to display the search results, and one section to display information about a movie. The search results is an itemized clickable list of movie titles along with their years they were released. When you click on one of these movie titles, you display information about the movie: the poster of the movie as an image, the movie title, its genres (separated by comma), the movie overview (summary), and the names of the top five cast members (ie, actors who play in the movie).

You need to use the following TMDb HTTP methods listed in The Movie Database API: You need to call the TMDb web service through the proxy.php. For example, to get information about the movie "The Matrix" (which has id 603), you use the HTTP call proxy.php?method=/3/movie/603 (it doesn't need the API key -- it's already in the proxy). To search for the movie "matrix", you call proxy.php?method=/3/search/movie&query=matrix. To display the movie poster, you append the jpg image file from poster_path to http://image.tmdb.org/t/p/w500.

Note that there is a lot of information returned by these web services. You need to use very few parts of this information only.

What to Submit

Use the form below to submit your movies.html and movies.js files. We do not accept email or hardcopy submissions. You may submit multiple files, if you like, as long as they have different names. After you submit the files, please double-check that your submitted files are correct by clicking on the Status link and look the submitted files.

Submit Project #3:

Last modified: 10/05/2015 by Leonidas Fegaras