Project 2: Starting Fabflix Business

Due: Apr 25, Friday, 11:45 pm. Submit on EEE under drop box / CS122B Project 2.

• Overview
• Installing Apache Tomcat Webserver
• JSP example
• Servlet session examples
• JDBC Connection Pooling
• Step by Step
• How to use remote desktop connection
• Delivelables
• Grading Criteria
• Demonstration
• FAQ

Project 2 Overview

The following are more details about the interfaces.

• The "Login" page asks a customer to provide an email and a password in order to log into the system. Use HTTP POST instead of HTTP GET
  so that the username and password are not displayed on the address bar. Note that the email and password are attributes of the customer table. You should use the customer table for authentication, NOT the database login/password (such as "testuser" and "testpass").
• On the "Main" page, the customer can choose either to "Search" for movies or "Browse" for movies.
• On the "Searching" page, the customer can search for movies by any of the following attributes or their combination (logical "AND" operation):
  • title;
  • year;
  • director;
  • star's first name and/or last name. This means you need to do both: a) first name or last name if only one of the two names is provided; b) first name and last name, if both names are provided.
  Check http://imdb.com/search to see an example of the interface. Of course your interface can have a different style.
• The "Movie list" page shows the results of the search, and the results are formatted as a table with at least the following columns:
  • id;
  • title (hyperlinked);
  • year;
  • director;
  • list of genres;
  • list of stars (each hyperlinked);
  The following requirements should be met.

  Substring matching: The user does not have to provide an exact value for an attribute, and the system should support "partial matching". For example a query asking for "term" for the title attribute should return movies such as "Terminal" and "Terminator." You can use the "LIKE" and "ILIKE" SQL operators for pattern matching in any way you wish.  For example:

  SELECT "column_name"
  FROM "table_name"
  WHERE "column_name" LIKE pattern

  pattern often consists of wildcards. Here are some examples:

  • 'A_Z': All string that starts with 'A', another character, and end with 'Z'. For example, 'ABZ' and 'A2Z' would both satisfy the condition, while 'AKKZ' would not (because there are two characters between A and Z instead of one).
  • 'ABC%': All strings that start with 'ABC'. For example, 'ABCD' and 'ABCABC' would both satisfy the condition.
  • '%XYZ': All strings that end with 'XYZ'. For example, 'WXYZ' and 'ZZXYZ' would both satisfy the condition.
  • '%AN%': All strings that contain the pattern 'AN' anywhere. For example, 'LOS ANGELES' and 'SAN FRANCISCO' would both satisfy the condition.

• Sorting: A user should be able to click on the header of title or year, so that the results will be sorted (ascending or descending) by the corresponding attribute.

  Previous/Next: Since there could be many movies on the list, each page can only display a certain number N of movies, and the interface has "Prev"/"Next" buttons to allow the user to go through all the movies.  Your interface should allow the customer to change the number of listings N per page.
  

• If the user clicks on a movie, the corresponding "Single Movie" page displays all the information about the movie, including its id, title, year, director, a list of genres, poster, a list of stars (hyperlinked), and a link to its preview trailer.
• If the user clicks on a star, the corresponding "Single Star" page displays all the information about this star, including the id, name, date of birth, picture of the star, and a list of (hyperlinked) movies in which the star acted. The user can jump between a page for a movie and a page for a star following hyperlinks.
• Using the "Browsing" page, the user can browse movies by either their genres and or title. The "Browsing by movie genre" page has all the (hyperlinked) genres. The user can click on a genre to see all the movies of this genre. The "Browsing by movie title" page categorizes the movies based on their titles. The page organizes all the titles based on their first letter in the title in an alphabetical order. When the user clicks on a letter, he can see the list of all the movies with this first letter in their title.
• Shopping Cart: For all the pages that display movie information, each movie should have an associated "Add to Shopping Cart" interface. The interface shows the currently number of copies for this item (during this login perioud), and allow the user to add more copies (or delete all copies) of this item by modifying the quantity. If the user clicks the button, the corresponding number of copies of movies should be set in his shopping cart (or delete the item if the quantity becomes 0). The interface should allow the user to see all the items (with their quantities) in his current shopping cart (during this login).

  All pages (after login) should have a "Checkout" button. If the user clicks this button, there is a "Shopping cart" page that displays the movies in the shopping cart. If the user chooses to proceed to check out, the next page "Ask for Customer Information" should ask the user to provide a credit number, expiration date, and first name and last name of the credit card holder.

• Checkout: The transaction succeeds only if the user can provide the first name, a last name, a credit card with an expiration date, which match a record in the creditcards table (not those in the customers table). If succeeded, the transaction should be recorded in the system (in the "sales" table) and a confirmation page should be displayed.   
  


• Performance requirements: you are required to do the following: (1) Caching query results in the web server. You shouldn't talk to the backend DB for each request from the client browser; (2) Connection pooling.

Installing and testing Apache Tomcat on Windows. Running a sample Servlet.

To support dynamic content on web pages and Java servlets (extensions of a server's basic services), we use Tomcat, a freeware package form the Apache Software Foundation. (You will be using its capabilities starting in Phase 2.) To install Tomcat

1. Go to http://jakarta.apache.org/tomcat/; read a bit!

2. Click on Tomcat 5.5 under Download (look on the left-hand side of the page).

3. Select the 5.5.26 core binary distribution, the windows executable. (you can use the latest beta release at your own peril!); save the EXE file to your disk.

4. Launch the EXE file you just downloaded.

5. Click on Next; read the license and agree.

6. On this screen select (check) Tomcat and Start Menu Items at minimum. Leave Documentation checked if you want the documentation on your drive (it is also available at the Tomcat site); check Examples if you want some examples of servlets. There are no files under WebApps. Click Next.

7. Leave the destination folder as is; click Next.

8. Leave the port at 8080--this is crucial. Choose an administrator login name and password: do not forget them! Click Next.

9. Check that the directory listed is indeed where you have the java virtual machine (java.exe and its associated files) stored; if you used the default directories for java when installing it above, it is C:\Program Files\Java\jre1.6.0. Click Install.

10. Wait a few minutes while installation occurs.

11. Click Finish. Tomcat should start; the release notes file should be open in a window.

12. Open your browser and open the page http://localhost:8080/ to see if TomCat is working.

Check over the release notes (and them close them). To be sure Tomcat is running, right click on the feather-like icon in the lower right of the Windows toolbar (if you hover over the correct icon, Apache Tomcat will appear); Start service should be grayed. To stop Tomcat at any time, right-click on the icon and select Stop service. You can also start and stop Tomcat on the General panel of the Configure Tomcat application (Start -> All Programs -> Apache Tomcat 5.5 -> Configure Tomcat).

To test that Tomcat is working and communicating with MySQL properly, we've prepared a servlet that performs basically the same tasks as the JDBC program; it queries the test database and returns some structural and content information. To run this program:

1. Make sure the MySQL database server is running.

2. Download TomcatTest.war

   A WAR file is a "Web Application Archive." It contains a compressed directory of the files needed for a ready-to-run java servlet that Tomcat will launch when you go to the Web page designated in the WAR. A WAR file must a have certain directory structure and contain appropriate files (with the appropriate contents) for Tomcat to launch the applet. If your TOMCAT installation was correct there should be a "webapps" folder under "Tomcat 5.5" directory of your Tomcat root installation (usually C:\Program Files\Apache Software Foundation\Tomcat 5.5\webapps ). You should place this .WAR here inside the webapps folder Check FAQs for questions regarding WAR. The default configuration of Tomcat should automatically "deflate" this .WAR file after a few seconds, so that you see a directory named TomcatTest under webapps. If not, you'll deflate it by following instructions under FAQs.

3. We'll now "deploy" this application. Go to http://localhost:8080; this is your local web page. After installing Tomcat, it was set to the Tomcat welcome page; that page should appear.

4. Click on Tomcat Manager; enter your admin user login and password (given when you installed Tomcat); click OK. If your login and password are correct, the Tomcat Web Application Manger page will appear.

5. Under "Deploy directory or WAR file located on server" you should see a deploy button. You need not specify a path. If you simply click the delpoy button, Tomcat will automatically refresh it's list of applications. TomcatTest should now appear in the Applications list.

6. Go to http://localhost:8080/TomcatTest/servlet/TomcatTest. Tomcat will run the servlet TomcatTest and print its output onto the web page. If the output is database information, all is well. If instead you see a message that an SQLException occurred, check that the MySQL server is running, that the test database with the correct user name, user password and table structure has been created. 

7. Go to the tomcat installation folder and open the "webapps" folder (usually C:\Program Files\Apache Software Foundation\Tomcat 5.5\webapps ). This folder contains all the applications you plugged in so far into Tomcat. Open "TomcatTest" folder. Every file under this folder except for WEB-INF is a file directly accessible from a url such as http://localhost:8080/TomcatTest/MY_FILE_NAME. This folder usually contains all the static HTML content you might need for your web application. In our case we have "index.html". Now open the WEB-INF folder. This folder is not directly exposed on the internet. It actually contains your Java executable classes that provide dynamic content of your web application.
   
   The subfolder "classes" contains your Java classes, while the "lib" folder is used to store the libraries you might use in your Java classes. In the "lib" folder you will find the MySQL JDBC driver. Another very important file in this folder is "web.xml". This file contains description of all your Java servlets that you would use in your application. We have only one servlet in this application. If you open "web.xml" you will see description of servlet "TomcatTest". Without "web.xml" Tomcat would not know how to configure a the classes you have in the "classes" folder. In our case we declare that we have a servlet "TomcatTestServlet" which Java class is TomcatTest. We also specify that we map this servlet to path "servlet/TomcatTest", thus can be accessed at http://localhost:8080/TomcatTest/servlet/TomcatTest.
   
   Now let's look at the "sources" folder. If you make any changes to "TomcatTest.java", and recompile the program, we'd like those changes to be reflected the next time you reload your web application. To recompile the program your -classpath flag must contain paths to both: the MySQL driver and the servlet API jar file. Assuming you are inside the "sources" folder, the following command will recompile the servlet in DOS

JSP example

Servlet Session examples

• http://localhost:8080/Session/servlet/ShowItems?newItem=DVD
  
• http://localhost:8080/Session/servlet/ShowSession?myname=Michael
  

Step by Step

1. Setup the Tomcat Programming Environment;
2. Using the JSP and/or Java Servlet examples above, make a sample Java servlet program and/or jsp program work in your environment. The program should be able to talk to your database server using JDBC;
3. Implement the "Login" Page;
4. Implement the "Search" Page;
5. Implement the "Movie list" page, including the "Sorting" and "Prev/Next" features;
6. Implement the "Single Movie" page;
7. Implement the "Single Star" page;
8. Implement the "Browsing by movie genre" page;
9. Implement the "Browsing by movie title" page;
10. Add a "Add to Shopping Cart" button to each movie on all pages;
11. Add a "Checkout" button to all pages;
12. Implement the page to do checkout.
    

JDBC connection Pooling

1. Go to the section titled " MySQL DBCP Example " on this webpage http://tomcat.apache.org/tomcat-5.5-doc/jndi-datasource-examples-howto.html
2. Follow the instructions under " 1. MySQL configuration ". You can use 'testuser' and 'testpass' instead of 'javauser' and 'javadude' as username and password respectively. Insert the row as indicated.
3. We'll create web application named DBTest. For now just create a folder named DBTest with the necessary directory structure required of web applications as explained in the FAQs on project 1 . If you are unsure of the structure, just download the TomcatTest.war example and deflate it. Then, remove all class files and source files, and rename the folder as "DBTest".
4. Create an empty file named context.xml inside the META-INF folder.
5. For the 2nd step " 2. Context configuration " the document explains different ways in which you can setup the "CONTEXT" for your web application. Follow the link and read a bit about "Contexts" in web applications. We have tested it by adding to the context.xml file inside the META-INF directory of the web application. So create an empty context.xml file inside the META-INF folder
Copy everything from the < Context > tag to < /Context > tag in the example shown on the web site. Paste this into the "context.xml" that you just created in the META-INF folder. Remember to change the 'username' and 'password' under the < Resource > tag
6. Create a web.xml file as shown in the 3rd step " 3. web.xml configuration ". (Overwrite the file if you are using the TomcatTest example as a placeholder).
7. Follow the 4th step " 4. Test Code " as indicated. The jar files they refer to are available here: standard.jar and jstl.jar . Place these jar files inside DBTest/Web-INF/lib folder. Make sure 'servlet-api.jar' and 'mysql-connector-java-5.0.8-bin.jar' are also present in the lib folder
8. Deploy the application (place the DBTest directory under the web-apps folder of Tomcat installation). Deploying web applications was discussed above under Installting Tomcat . Type the url http://localhost:8080/DBTest/test.jsp and you should see the data that you just inserted in your toy database.

Deliverables

• Your submission "war" file should be named "project2_[groupID].war".
• You should have the database name set to "moviedb", DB user name  "testuser" and password  "testpass" in the program and compile again before you submit.
• In the WEB-INF/sources include a README file detailing how to compile your java sources (if any) and how to install the generated class files.

Grading Criteria

• Functionality: How the system is working, whether it fulfills all the project requirements.
• Design and Performance: The system should send only "sufficient" amount of queries to the database server, i.e., it shouldn't send many queries if a single query is enough. For example, for the "Sort/Prev/Next" functionalities, additional queries to the server should be avoided. Therefore, you need to cache the query results, so that later requests to the same query results can be answered by the webserver without talking to the database server.
• Error handling: When an exception occurs, system shouldn't show it to the user. It should give "appropriate" error messages to the user in every unexpectable condition and provide information about what she needs to do next. The system should never terminate. When a system failure such as loss of connectivity occurs, it should recover itself. In that case, it should reconnect and the user shouldn't loose his/her information such as the items in his/her shopping cart.
• User interface: Whether it is user friendly enough and it provides a good interface which does not confuse the users. The UI counts for 10% of the total project grade.

Demonstration

To prepare for the demo, have the WAR file you turned in stored on your demonstration machine, and also have it deployed via Tomcat so that the FabFlix web site is ready to use. Have the MySQL server up and running;  When the demo begins, we will ask you to demonstate the three procedures discussed above, using the customer web site (from the WAR file) and the employee back-end program from Project 1. As before, your task is to convince us, in no more than 20 minutes, that your work is correctly and completely done and the FabFlix project is ready to move on to phase 3.

This project was first drafted by Chen Li and Kirill Petrov in Winter 2005. It was modified by the following contributors: Norman Jacobson and Kirill Petrov (Spring 2005); Norman Jacobson, Chen Li, and Michael Sirivianos (Winter 2006); Chen Li and Michael Sirivianos (Spring 2006); Chen Li and Shengyue Ji (Winter 2007); Chen Li and Chaitanya Desai (Spring 2008).