CS 122B: Projects in Databases and Web Applications Project 2

2024-08-03 Admin 写评论

Hello, if you have any need, please feel free to consult us, this is my wechat: wx91due

Project 2: Starting Fabflix Business

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 name. You need to return the stars whose name contains the name user types in. For example, the name "Peter Anteater" should appear when searching "Peter" or "Anteater".

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);
    • rating;

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 "substring 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. You should put this in a text file (plain text or markdown) in your Github repository, for example, "like-predicate.txt", or "like-predicate.md"

  • 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 rating, 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), a list of stars (hyperlinked), and rating.
  • If the user clicks on a star, the corresponding "Single Star" page displays all the information about this star, including the name, year of birth, 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.

Step by Step

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

  1. Go through all the examples we provided.
  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 "Single Movie" page;
  6. Implement the "Single Star" page;
  7. Implement the "Browsing by movie genre" page;
  8. Implement the "Browsing by movie title" page;
  9. Add a "Add to Shopping Cart" button to each movie on all pages;
  10. Add a "Checkout" button to all pages;
  11. Implement the page to do checkout.

Frontend-Backend Separation And DataSource (Optional)

An "old" way to develop Web sites is to use Java Servlet or JSP to generate HTML pages. This approach is gradually becoming out of date and no longer considered a good practice. In project 2, we suggest you separate the frontend and backend. The frontend fetches the data by sending HTTP requests to the backend and then displays the returned data. The Java Servlet backend only provides API in a JSON format to the frontend. The frontend needs to be written in HTML, CSS, and JS files. This approach is not required.

This approach involves lots of JavaScript and jQuery programming, so we highly recommend you to go through this very nice online tutorial: http://jqfundamentals.com/

GET api example

Here's an example project2-api-example that uses this approach to show a list of stars, similar to the project1-star-example we provided in project 1. Note starting with this example we use DataSource managed by Tomcat, thus we don't have to set database information in each servlet. To config a DataSource, following tutorial here https://tomcat.apache.org/tomcat-8.0-doc/jndi-datasource-examples-howto.html Follow the instruction on README.md to deploy and test the examples on tomcat.

POST api example

Here's an example project2-login-example to show you how to implement the login feature using the new frontend-backend-separation design. Follow the instruction on README.md to deploy and test the examples on tomcat.

Form example

The HTML <form> element defines a form that is used to collect user input.

Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

Here's an example project2-form-example to show you how to implement a HTML <form> to send user search query to the backend, and display the search result within a HTML <table>.

Follow the instruction on README.md to deploy the example on tomcat. Click the link http://localhost:8080/project2-form-example , then enter the search entry 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.

Note: In the project2-form-example, we used @WebServlet annotation to declare the configuration of a Servlet FormServlet right on top of class Form definition. This is a relatively new feature supported since Servlet 3.0. In order to scan web.xml properly with Servlet 3.0 or newer, you will need to modify the web.xml as followed: 

<web-app 
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
    version="3.0">

For more information:

Servlet session examples

Session provides a way to identify a user across more than one page request or visit to a Web site and to store information about that user.

The servlet container uses this interface to create a session between an HTTP client and an HTTP server. The session persists for a specified time period, across more than one connection or page request from the user. A session usually corresponds to one user, who may visit a site many times. The server can maintain a session in many ways such as using cookies or rewriting URLs.

Here's an example project2-session-example to show you two session usages.

Follow the instruction on README.md to deploy the example on tomcat. And then click the following two urls:

JSP example (Optional)

An alternative technology to use is JSP (Java Servlet Pages). JSP is an old technology, but it's still very handy to use. Normal Java Servlet lets you write HTML string in the print statements in Java, which is clumsy. JSP enables you to conveniently write Java code inside HTML.

Here's an example project2-jsp-example that generates the html page with JSP, similar to the project1-star-example.

Follow the instruction on README.md to deploy the example on tomcat. Then click:

http://localhost:8080/project2-jsp-example/index.jsp

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

To learn more about JSP using examples, check:

Deployment On AWS and Submissions

Use Github for your project 2 code and deploy on AWS, similar to what you have done in project 1.

a) Your submittion is based on commits that pushed to github master branch. Make sure the file on github master branch is what you want to submit. We are NOT looking at local git commits. We are NOT looking at commits on other branches

b) Make sure that if you git clone your project to a new environment, it will run correctly, especially on AWS, because you will clone a version to AWS instance and demo with it.

c) The submission usually should be IDE free. So only commit your .html, .js, .css, .java, README.md, .gitignore, etc. Do not commit IDE setting files for example .eclipse folder, .idea folder. These should be included in the .gitignore file.

d) We will run a script to get the LAST commit on github master branch within 24 hours after the due time (grace period). If you want to use the grace period (with 10 points marked), you can keep pushing commits to github with in 24 hours. If you do not want to use grace period, DO NOT push any commits to github until the grace period is passed. You can keep editing and commit locally if you want though.

e) Any commits pushed to github after grace period will be ignored.

f) After the grace period, we will post a google sheet containning the last commit that we find on github. Please check and confirm it because you will need to demo with this commit.

g) Signup for demo slots. Demo signup sheet will be posted separately after due.

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.

You could refer to this checklist for detailed criteria.

Follow these steps when showing the demo to the TA

a) Prior to the demo, make sure your AWS instance is up and running, everything is working fine, data is populated, etc... Don't deploy the project 2 app on AWS Tomcat yet.

b) Generate the WAR file from your github repository and deploy it to your AWS Tomcat. You can do it locally on your machine or remotely on AWS. You can use the maven "mvn package" or generate the WAR file from Eclipse. Show us your git repository folder is in the commit ID we recorded: Do " git checkout master " first, then do " git checkout your_commit_id " using the commit ID we provided. Do " git status " to show us that your git repository is clean.

c) Walk though your website and cover all the items in the checklist. Prepare ahead the sequence of operations that you need to do. Show functionality and error handling of your website.

d) The TA will ask you to briefly explain your codebase or explain how certain functionalities are implemented. You need to show that you understand what's going on with you project. Failing to answer the questions will lead to deductions on your grade.

Important: there are lots of functionalities to show during the demo and the time is very limited. Unable to finish the demo under 15 minutes may cause deductions on your grade. Be prepared when coming to the demo.

If you chose a different domain

You may design your own flow of interfaces that is suitable for your application. However, your application must cover the functionalities mentioned above, including login, conditional search, browsing, selection, 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 workflow (similar to the Fabflix diagram above) and present it during the demo session. 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 come to office hours to discuss.

发表评论

电子邮件地址不会被公开。 必填项已用*标注