wiki:cs122b-2017-winter-project2
Last modified 8 months ago Last modified on 01/29/17 23:24:00

Project 2: Starting Fabflix Business

Due: Feb 6, 2017, Monday 11:45 pm. Submit on EEE under dropbox / Proj 2.

Project Description

Resources


Project 2 Overview

In this project, you will start the Fabflix business! In particular, you will provide Web-based interfaces to allow customers to browse/search for movie information, add interesting movies to their shopping cart, and check out. The following figure shows the flow of the interfaces you need to implement.

The following are 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://www.imdb.com/search/title 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.
Note: You are required to write an explanation of how/where you use the LIKE predicate in your codebase. This should be accessible via a link in the format of http://YOUT_PUBLIC_ID:8080/fabflix/reports/like-predicate .

  • 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. You can implement a drop-down menu to choose "N" from a list of predefined values such as 10, 25, 50, 100, etc.
  • 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 (hyperlinked), 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 character in the title in an alphabetical order. (Notice that the first character could be a digit such as "2" in "2012".) 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 period), 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 can decide whether you want to do caching on the Web server for earlier query results.

We are not specifying all the details of the interfaces. You are encouraged to use your imagination to enhance the functionalities. We highly recommend you implement the above using JSP and/or Java servlets at the server side. You can use any type of client-side technologies to enhance the functionality of your website (e.g., Javascript, style sheets, etc). Regardless of the client-side technology, you will most likely make extensive use of HTML.


TomcatTest example

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 8.5.9" directory of your Tomcat root installation. It is usually C:\Program Files\Apache Software Foundation\Tomcat8.5.9\webapps on Windows and /var/lib/Tomcat8.5.9/webapps/ on Ubuntu. You should place this .WAR here inside the webapps folder.

  1. 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.
  2. 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.
  3. 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 deploy button, Tomcat will automatically refresh its list of applications. TomcatTest should now appear in the "Applications" list. Go to http://localhost:8080/TomcatTest to check if you can access a simple HTML page.
  4. 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.
  5. Go to the tomcat installation folder and open the "webapps" folder. 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 " whose Java class is TomcatTest . We also specify that we map this servlet to path "servlet/TomcatTest ", thus can be accessed athttp://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

(Windows) javac -classpath "../lib/servlet-api.jar;../lib/mysql-connector-java-5.14.0-bin.jar" TomcatTest .java

Be sure to place a copy of the TomcatTest.class file inside the WEB-INF\classes folder (i.e., you want to overwrite the old .class file with the one that you just created). You can go to the "Tomcat Manager" page and click on "reload" next to "TomcatTest". When you run the servlet now, you should see the desired changes in the functionality. More information on the servlet API is available at hhttp://docs.oracle.com/javaee/6/tutorial/doc/bnafd.html.


Form example

Download and deploy this TomcatForm.war file to get familiar with HTML forms. Click the link http://localhost:8080/TomcatForm and click the "Submit Order" button. It will take the value in the "Last Name" box to query a backend credit card table to retrieve records with that last name.


Servlet session examples

Install the Session.war and test the following requests:

Here are the two java programs: ShowSession.java and ShowItems.java.


Step by Step

Here are the recommended steps you can follow to accomplish for this project:

  1. Setup the Tomcat Programming Environment;
  2. Using the Java Servlet examples above, make a sample Java servlet 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.

Deployment On AWS

After you make the application work on your development machine, deploy it on the AWS instance you have launched in project 1.

---

Creating WAR Archives

The following instructions demonstrate how to create a WAR file. Let's say that you have a directory structure as follows:

C:\MyProject

index.jsp
WEB-INF
web.xml
classes\org\mypackage
MyClass .class

Use the following commands to create the WAR archive (under a DOS prompt).

1) DOS:> cd MyProject
2) DOS:> jar cvf ..\mywebapp.war *.*

This will generate the WAR file (mywebapp.war) of MyProject in the top level of the WAR file. Note that the WAR file is created outside the MyProject directory.


JSP example (Optional)

Download and install the jspTest.war file in a similar fashion to how you installed TomcatTest.war. Checkout its directory structure. Read the index.jsp file and note where the mysql-connector-java-5.14.0-bin.jar file is stored.

Then use your browser to open the link:

http://localhost:8080/jspTest/index.jsp

which will activate the JSP page. It will talk to your local MySQL database.

To learn more about JSP using examples, check:


Deliverables

Please submit all the required files (*.class, *.jar, *.jsp, *.html etc) to run your program as WAR. In addition, include any source files (*.java) under WEB-INF/sources. Read the following page to get information about how to create a WAR file.

  • Your submission "war" file should be named "project2_[groupID].war". For example, the name of this war file should be project2_09.war for group 9.
  • The database name, db username, and the password (i.e., used in the JDBC parts of your code) should be whatever works in your AWS instance environment.
  • Prepare a README file detailing how to compile your java sources (if any) and how to install the generated class files. Following your instructions, we should be able to compile your Java Servlets (and other Java resources, if any) and use the generated class files in reloading your fabflix webapp. These instructions should be accessible using the link http://PUBLIC_IP:8080/fabflix/reports/readme. If your project does not compile/run, it will get a very low score.

Demonstration and Grading Criteria

You are required to demonstrate this project. Create a running system from your ZIP file–quickly. Show the correctness, completeness, functionality and performance of your database during your demonstration by using the employee interface developed here. Your task is to convince us (in 15 minutes) that your work is correctly and completely carried out and the course project is ready to move to phase 3. During the demo, we will grade your project based on the following criteria:

  • Functionality: How the system is working, whether it fulfills all the project requirements.
  • Design and Performance: You should be considerate in designing the server to make it efficient. For instance, you are welcome to implement the cache functionality to reduce the access to the database server (optional). Moreover, you should not send a query to the server to retrieve results not relevant to the current query or future queries. Your Web server is allowed to use a "LIMIT OFFSET" clause to talk to the database server to retrieve related records for each query.
  • Error handling: When an exception occurs, the 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.

Attachments