Programming Assignment 1
A Movie Web Application

Due on Thursday February 16 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 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. 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.

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. To run JavaScript expressions, such as print the value of a variable, activate Firebug and on its Console menu select "Show Command Editor", then type an expression such as 1+2 and hit Run.

Setting up your project

Download the project1 files project1.zip and unarchive them 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, 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. Note: if you have downloaded project1.zip before 2/10/2017, you need to edit the proxy.php file to replace "https" with "http". Your project is to edit movies.html and movies.js as described in the description of the web application.

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/project1/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.

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

After you make sure that your programs runs correctly, zip your project1 directory. Use the form below to submit your project1.zipfile. 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 look the submitted files.

Submit Project #1:

Last modified: 02/07/2017 by Leonidas Fegaras