wiki:cs122b-2019-winter-project2

Project 2: Starting Fabflix Business

Due: Week 5 Monday, Feb. 4 11:45 pm. Submit project on Github.

Project Description


Project 2 Overview

In this project, you will build functionalities such as browsing movies by category, searching movies by condition, adding movies to the shopping cart, etc. The image below shows the workflow you should follow to create your website.

Basic project requirements:

  • Login: To log into the system, customers need to enter correct email and password. You are required to use HTTP POST instead of HTTP GET so that the username and password will not be displayed on the address bar. When authenticating user input information, columns: email and password in customers table can be used for reference.
  • Main page: Customers can browse and search movies on the main page.
  • Searching: Customers can search for movies by single or multiple conditions:
    • title
    • year
    • director
    • star's name

When customers search for movies by multiple conditions, you should use AND logic to combine conditions.

  • Movie list page: Customers can find search results on this page. Search results should be formatted as a table with at least the following columns:
    • id
    • title (hyperlinked to the corresponding single movie page implemented in Project 1)
    • year
    • director
    • list of genres (each hyperlinked to a page that shows all the movies of this genre)
    • list of stars (each hyperlinked to the corresponding single star page implemented in Project 1)
    • rating

The following details of functionalities should also be met.

  • Substring matching: The search functionality of the website should support "substring matching" so that customers do not have to provide an exact value for an attribute. For example, when customers search for movies by title keyword: "term", the website 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: Your Github repository should include a text file that explains how and where you use the LIKE predicate in your codebase. The file name can be "like-predicate.txt" or "like-predicate.md".

  • Here are some examples:
    • 'A_Z': All strings that start with 'A', then follow by a single character, and end with 'Z'. E.g. 'ABZ' and 'A2Z'. However, 'AKKZ' does not satisfy the condition.
    • 'ABC%': All strings that start with 'ABC'. E.g. 'ABCD' and 'ABCABC'.
    • '%XYZ': All strings that end with 'XYZ'. E.g. 'WXYZ' and 'ZZXYZ'.
    • '%AN%': All strings that contain the pattern 'AN' anywhere. E.g. 'LOS ANGELES' and 'SAN FRANCISCO'.
  • Sorting: Customers can sort search results by either "title" or "rating" in either ascending or descending order.
  • Previous/Next: As there could be many movies that need to be shown on the movie page, each page should only display a certain number (N) of movies. And the page should have "Prev"/"Next" buttons which allow customers to view all the movies. Your website should allow customers to change the number of movies ("N") shown per page. Customers can click on a drop-down menu to choose "N" from a list of predefined values such as 10, 25, 50, 100, etc.
  • Jump Functionality: Customers can jump among movie list page, single movie page, and single star page using buttons or links instead of browser history. In specific, movie list <-> single movie, movie list <-> single star, and single movie <-> single star.
  • Using the "Browsing" page, customers can browse movies by either genres or titles. The "Browsing by movie genre" page should include all the (hyperlinked) genres. Customers can click on a genre link to see all the movies of this genre. The "Browsing by movie title" page categorizes movies based on the first character in movie title in alphabetical order. (Note that the first character could be a digit such as '2" in the movie: "2012".) When customers click on a character link, the website should show all the movies each with the title starting with that character.
  • Shopping Cart: For all pages that display movie information, each movie should have an "Add to Shopping Cart" button. The shopping cart page should show the quantity of each movie in the cart (within the current login session) and allow customers to modify the quantity of each movie. A movie should be removed from the shopping cart when its quantity is set to 0.

All pages except the login page should have a "Checkout" button. When customers click the button, the website should direct them to the shopping cart page. In the shopping cart page, if customers proceed to check out, the next page (payment) should ask customers to provide payment information including first name and last name of cardholder, card number, and expiration date.

  • Checkout: The transaction succeeds only if customers can provide correct payment information which matches a record in the credit cards table (not those in the customers table). If the transaction succeeds, it should be recorded in the system (in the "sales" table) and a confirmation page should be displayed.
  • Performance requirement: You can decide whether you want to do caching on the Web server for earlier query results.

You must NOT:

  • Use JSP to generate HTML pages in Project 2. We only allow the architecture in which Java Servlet generates everything and the micro-services architecture ("backend-frontend separation").
  • Implement any functionality (sorting, pagination, etc.) by using framework or scaffolding tools like DataTables.
  • Implement any functionality in the web app by hard coding. e.g. Hard code all genres names in HTML instead of retrieving from databases
  • Store data directly in the frontend instead of the database.

We are not specifying all the details of the interfaces. You are encouraged to use your imagination to enhance the functionalities. You can use any appropriate client-side technologies to enhance the user interface and the user experience of your website (e.g., Javascript, CSS, HTML, etc.).


Example

project2-login-cart-example This example shows how to implement a login form and use a session to implement a simple shopping cart.


Step by Step

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

  1. Go through the project2-login-cart-example provided above.
  2. Implement the "Login" Page;
  3. Implement the "Search" Page;
  4. Implement the "Movie list" page, including the "Sorting" and "Prev/Next" features;
  5. Implement the "Browsing by movie genre" page;
  6. Implement the "Browsing by movie title" page;
  7. Add a "Add to Shopping Cart" button to each movie on all pages;
  8. Add a "Checkout" button to all pages;
  9. Implement the page to do checkout.

Deployment On AWS & Submission

Use Github to manage your project 2 code and deploy on AWS (similar to what you have done in project 1).

Check Project1 Submission before you submit Project 2 on Github.


Demonstration & Grading Criteria

Refer to Project2 Grading Rubric for detailed grading criteria.


If you chose a different domain

You may design your own workflow that is suitable for your application. However, your application must cover the functionalities mentioned above, including login, conditional searching, browsing, sorting, navigation between pages, and error handling. If your domain doesn't require a shopping cart and checkout, come up with two features that are comparable. You are required to draw your application's workflow (similar to the Fabflix diagram above) and present it during the demo. It is your responsibility to make sure that your design and implementation meet all the requirements. If you are not sure about it, make sure to post it on Piazza or go to office hours to discuss.

Last modified 18 months ago Last modified on Jan 30, 2019 12:56:55 PM

Attachments (1)

Download all attachments as: .zip