CS 143

Project 2

Partners

Please remember the ongoing rule about partnerships: If a student turns in any part of the project as part of a team, every later part of the project must be submitted individually or as part of the same team. Details of partnership rules can be found in the Project page.

Part A

In this portion of the project you will familiarize yourself with the Java Servlet technology and build a small Web interface that uses the Servlet, which replies back what you have typed in an HTML page.

You will use Java Servlets to implement the Web interface.

• Step 0: Read the document Java Servlet at SEASnet.
• Step 1: Set up your account/directories to be configured for the Apache Tomcat servlet container.

Detailed instructions for setting up the Apache Tomcat servlet container can be found in the Java Servlet at SEASnet page under the section "Setting up the Java Servlet server."

• Step 2: Copy sample code.

We are providing two sample files to demonstrate the basic functionality of Servlets, located at the /u/cs/class/cs143v/cs143vta/proj1/code/ directory.

Copy the files Copycat.html and Copycat.java to the appropriate directories in your own account. The Copycat.html file should be placed in the /usr/share/tomcat5/webapps/${USERNAME} directory from Step 1, and the Copycat.java should be placed in the /usr/share/tomcat5/webapps/${USERNAME}/WEB-INF/classes directory.

First you must compile your .java file. To compile the Copycat.java source code, you can run the following command:

javac -classpath "/usr/share/tomcat5/webapps/cs143ta/servlet.jar" Copycat.java

This command will compile Copycat.java (Java source code) into Copycat.class (Java "class" or "object" code).

Don't forget to modify your web.xml to reflect the presence of the new Copycat.class servlet. Mimic the example provided by Hello.class servlet

Once you had compiled Copycat, and modified web.xml you can test your servlet by going to:
http://lnxsrv03.seas.ucla.edu:8143/${USERNAME}/Copycat.html

• Step 3: Understand the sample code.

Read the Copycat.html and Copycat.java files that are provided. Make sure you understand how they work. For detailed documentation you may want to refer to the Java Servlet Technology from Sun.

• Step 4: Write your own code to display an input and an output.

In this step, you will write a Web interface that allows the user to select an input and submit a form, which results in an output page (served by your servlet) that displays the selected input. Your Web interface should contain a drop down box allowing the user to select one of 5 options (namely Option 1, Option 2, Option 3, Option 4, and Option 5 – Option 1 selected by default), and the servlet will then generate the appropriate .html page with the user input as part of the output. Copycat.java and Copycat.html should give you a good starting point. In order to finish the project, you will only add around five lines of code to Copycat.java and change about 5-10 lines in Copycat.html. Please document your own additional code to improve legibility.

Name the html file P2A.html where the user will select an option, and the java file P2A.java that will generate the appropriate .html page.

• Step 5: Capturing the output from your servlet. Once your servlet runs properly, capture a screenshot of your resultant HTML page from your servlet. Select any option from the drop down box and capture the page returned by your servlet.

Part B: JDBC

In this portion of the project, you will connect the Web interface you have build in P2A and the MySQL Database using JDBC (Java Database Connectivity) API (application programming interface). JDBC allows an application or an applet to establish a connection with a database or access any tabular data source, send SQL statements, and process the results. Dataset and the tables from project 1 are used here.

• Step 0: Read the document JDBC at SEASnet, available through the course website main project page.
• Step 1: Copy the sample code. Various sample files are available for download in the document JDBC at SEASnet. Take a look at them and you can download these files into your own directory for your reference. Take a look at the JDBC.java in the "/usr/share/tomcat5/webapps/cs143ta/" directory.
  
  Note: Before compiling make sure to modify parts of the code that ask for your USERNAME and PASSWORD. Furthermore when you make modifications to JDBC.java and recompile it, TOMCAT does not always load the new class, and because you do not have permissions to start/stop tomcat, you have to execute the following silly command "touch web.xml". In other words, you have to let tomcat know that you have updated some of your classes by making web.xml appear as a new file.
• Step 2: Understand the sample code. Read the JDBC.java file and learn the aspects of JDBC setup and how to make calls to the database. Connecting to MySQL requires specifying the appropriate MySQL driver, then establishing a connection with the getConnection method. The method executeQuery is responsible for executing a query. This method can be called as follows:

queryResults = stmt.executeQuery(String query);

where stmt is of type statement which is used to send your SQL statements to the DBMS. The queryResults variable is of type ResultSet, and can be manipulated in the while loop of the doGet method. Executing any valid SQL query is simply a matter of passing a different query string to the executeQuery method. Read more sample files available in JDBC at SEASnet to learn more aspects of JDBC.

• Step 3: Write your own code. In this step you will modify the JDBC.java file to create a Movie.java file, which simply lists the movies in the movie table created in Project 1. This requires that the Movie.java file connects to the database using JDBC API, fetches the list of movies in the table, and displays them in readable html format. For now, we will assume that user directly goes to this Movie servlet, by typing the URL. You will compile Movie.java under the classes directory and access the servlet as
  http://lnxsrv03.seas.ucla.edu:8143/${USERNAME}/servlet/Movie

Part C

In this project you are to create a fully functioning Movie Database system accessed by users exclusively through a Web interface. You may use your Web-database code for Project2-PartB as a starting point for this project, or you may start from scratch. The functionality of your Movie Database system is quite flexible, although we expect all students to implement some baseline capabilities:

For input pages:

• Page I1: A page that lets users add actor and/or director information.
• Page I2: A page that lets users add reviews to movies.
• Page I3: A page that lets users add movie information.

Note that when your servlet program gets an input from the user, your program has to lookup either the MaxPersonID or the MaxMovieID table, assign a unique ID to the new actor/movie, and increase the MaxPersonID or MaxMovieID.

For browsing pages:

• Page B1: A page that shows actor information.
• Show summary for the actor, i.e. how many movies has the actor acted in grouped by year.
• Show links to the movies that the actor was in.
• Page B2: A page that shows movie information.
• Show links to the actors/actresses that were in this movie.
• Show average “rank” of the movie based on user reviews.
• Show all user comments.
• Contain “Add Review’ button which links to Page I2 where users can add reviews.

For search pages:

• Page S1: A page that lets users search for an actor/actress/movie through a keyword search interface.

As a result, you would have created 3 input pages, 2 browsing pages and one search page.

Notes:

• Don't forget to put some effort in the design of your Web interface. Though specifics on the ease of use of your web site are up to you, the user should be able to navigate through your web site without difficulty.
• Some of the pages described above may be combined. For example, a search box may appear in browsing pages B1 and B2, in effect combining page S1 with browsing pages B1, B2.

Your Web interface front-end and connection to MySQL should include at least the following features:

• One or more input boxes, where the value typed by the user becomes a parameter to a SQL query issued to MySQL (with results displayed in the Web page as usual).
• One or more drop-down menus, where again the value selected by the user becomes a parameter to a SQL query issued to MySQL. If you wish you may use both input boxes and menus to gather parameters for a single query.
• The ability to modify the database in some parameterized fashion through the Web interface. (At the minimum, the user should be able to insert a new tuple to the Actors or Actresses table. Deletion or Update of existing tuples are optional.)
• Link-based browsing, where a result page presented by your program contains hyperlinks on certain attribute values (typically join attributes). Clicking on a hyperlink should issue another SQL query related to the item being clicked on, and generate another result page in HTML as usual. For example, if you query on a specific actor (i.e., Tom Hanks), the servlet may return the names of the movies that the actor was in. Then you may make each of the movies be displayed as a hyperlink, where clicking on one of these links issues a query to find all the actors that were in that movie.

As you start modifying data in a database, you will undoubtedly want the ability to get a "fresh start" easily from your original data.

We recommend that you establish a routine of saving all data in MySQL load files, and perhaps reloading the database each time you start working with it. Remember to delete the contents of each table (or destroy and recreate the tables) before reloading. Otherwise, unless you take APPEND out of your control file (or there is a declared key), MySQL will happily append the new data to your old table, causing your table size to double, triple, quadruple, etc. To get rid of a table called T, issue the following command to MySQL:

DROP TABLE T;

If you want to get rid of all tuples in T without deleting the table itself, issue the command:

DELETE FROM T;

Hints:

There are many ways to design good web interface programs. Feel free to skip these hints if you want to make your own design. These hints are provided only as additional help for those who need them, but you are under no obligation to follow them.

Hints on general design:

In this project, you will have multiple operations with different SQL commands. You can probably do so by writing one servlet per operation, and designing web forms to call the appropriate servlet for each operation. However, it is easier (and more expandable) to write only one servlet to take care of all operations. The servlet should expect a parameter operationID that dictates which operation to carry out. For example,

OperationID	operation
1	display table Movies
2	display table Actors with name = 'X'
3	insert one tuple into table Actors

Your servlet will read the parameter operationID and decide which functions to call, and what other parameters to read (if any).

The parameter operationID can be conveniently passed from a web form to the servlet through the use of "hidden" input:
<INPUT TYPE="hidden" NAME="operationID" VALUE="1">

In addition, you might want to set up a "main menu" page with links to web pages that handle different operations. This can be done with HTML and no programming.

Hints on link-based browsing:

Note that your servlet can be called directly through a URL in the following way:
http://lnxsrv03.seas.ucla.edu:8143/servlet/myServlet?param1=value1&param2=value2&param3=value3
where myServlet is the name of your servlet, and the string after the question mark contains parameters passed to the servlet just like in a "GET" method. So you can implement link-based browsing by generating result pages containing hyperlinks of the above format, with appropriate parameters that instruct your servlet to execute the right query.

In adding user reviews to a movie, you may need to obtain the current timestamp.

While the functionality of your Movie Database system is quite open-ended, the interface itself is extremely open-ended. This class is not a user interface class and you can certainly get full credit for a solid system with simple input boxes, menus, and/or radio buttons, and simple HTML output tables. However, we welcome much snazzier interfaces, with the something resembling IMDb.com itself, or perhaps even something better!

What to submit (due Monday, November 16th, 4pm)

You need to submit electronic copies by noon and the paper copies in class at 4pm.

Note: Don't forget to login to ugrad.seas.ucla.edu using your CS143 LOGIN and issuing a submit command as you have done for Project 1

• Part A: You will need to submit (only electronically)
• Submit a captured screenshot of your resultant HTML page from your servlet.
• Submit the sourcecode of your HTML and servlet.

• Part B: You will need to submit (only electronically)
• Movie.java: This file contains the servlet which returns the list of movies in the database in html format.
• Screen.jpg: A screenshot of the Movie servlet showing the list of movies (no need to print the whole list).

• Part C: You will need to submit

Please submit paper and electronic copies of the following:

1. The source code for ALL html and java pages you modified or created.
2. The screen shot of the initial html page where the user can select a parameter from the drop down boxes, and enter a value in the text boxes.
3. The screen shot of the result page after when you issue a query to the initial html page. (For example, a result page when you issue a query corresponding to the movie "Die Another Day".) This page should contain at least one clickable link on it.
4. The screen shot of a page that you get when you click on (one of) the link(s) in the previous page. (For example, the page after you click on the actor "Cleese, John" from the "Die Another Day" page.)
5. The screen shot of the page that allows you to insert a new tuple to the database
6. The screen shot of the page that shows the new tuple that you inserted to the database. In your paper copy, please mark the new tuple you inserted.

• For all parts, the source code and other supplementary files submitted need to be compiled and run by the TA . Remember to use relative URLs in your machine/port references. You may be deducted points for code with faulty URL links that doesn't work from the TA's account.

• A README file that includes you and your partner's name, sid, email, and any other information you think is useful.

Follow the following order for submitting the paper copies: 1) README, source code of the html files, then java files, then screen shots.

Paper copies are due in class. Use the submit command as you did in project 1 for electronic submission. Filenames are not fixed in Project 2, since each team may have different set of files. Please give reasonable names to your files.