wiki:cs122b-2019-winter-project1

CS122B: Project 1

Due: Week 3 Monday, 01/21, 11:45pm. Due on Github.

Tasks

  1. Setup Apache Tomcat (on your development machine)
  2. Setup an Amazon AWS instance
  3. Join Github Organization and create a repo for your team
  4. Create a MySQL database with provided movie info
  5. Implement the Movie List page of the Fablix Application
  6. Implement the "Single Movie" page
  7. Implement the "Single Star" page

Setup Environments:

Task Development Machine Production (AWS) Machine
Setup Machine Setup AWS Instance
Install Java@8 We require Java 8.
Verify installation and version:
local> javac -version
You should see:
java version "1.8.X"
Setup Java
Install MySQL Setup MySQL Setup MySQL on AWS
Install Maven Setup Maven Setup Maven on AWS
Setup Eclipse (or other IDEs) Setup Eclipse EE Not needed
Setup Tomcat Setup Tomcat Setup Tomcat on AWS

Task 1: Setup Apache Tomcat

We assume you already have Java installed on your machine.The required version is Java 8.

Download and install the latest Apache Tomcat from https://tomcat.apache.org/download-80.cgi on your development machine. Go to "8.5.37" -> "Binary Distributions" -> "Core", for Mac and Linux, download the "zip" file, for Windows, download the "32-bit or 64-bit Windows zip".Unzip the downloaded file.

Follow this Install and Configure Tomcat 8 tutorial to set up Tomcat. For the "Change Servlet Compiler to use Java 8" section, the "conf/web.xml" doesn't have the lines as the tutorial said. You can add these lines to the place suggested by the tutorial.

  • For Mac and Linux users, you may need to give permission to the "sh" files by going to the "bin" folder and then running: sudo chmod +x *.sh
  • Be sure to change your Tomcat password to something else than "admin". Otherwise your website will be very vulnerable.

You should see the following interfaces if you setup Tomcat successfully: Screenshot 1, Screenshot 2

Apache Tomcat Eclipse Integration

Apache Tomcat makes hosting your applications easy. The Eclipse IDE makes development easy. We recommend you to use the latest version of Eclipse EE (EE stands for Enterprise Edition and has built-in support for application and web servers including Tomcat)

Eclipse Downloads:

The following tutorial is a quick start guide and will help you set up your development environment in eclipse. Use the latest Tomcat version instead of the shown version in the tutorial. Note: If you opt for Eclipse EE edition, you can skip the installation of Eclipse Web Tools Platform when following the quick start guide.

These tutorials can also be helpful:

For reference only, if you find more comfortable using other powerful code editors and IDEs :

Setup Maven

Maven is a tool to manage project dependencies and automate the build process.

Maven is built in with Eclipse. But to run it on command line you also need to install maven on your development machine.

To install Maven:

  • Windows: follow this tutorial
  • Mac: Run "brew install maven"
  • Ubuntu: Run "sudo apt-get install maven"

Task 2: Setup an AWS Instance

You need to launch an Amazon AWS EC2 instance to repeat the tasks above. Make sure to use the free-tier 64-bit Ubuntu instances so that we can make our future instructions consistent. You are welcome to participate in the ​AWS Educate program, which can provide $100 AWS credits per student. (UCI is a member institution.)

Generally, similar to many other tasks in this quarter, we expect you to figure out how to do many tasks by reading online materials. This link is a good place to start from.

Launch a free AWS EC2 instance

  1. Go to AWS Console to sign up. You will need to enter a valid credit card. Don't worry; as long as you choose a free-tier instance and remove it after the end of the quarter, you will not be charged.
  2. When you are done, login to the AWS console.
  3. Launch a new Ubuntu 16.04 free-tier t2.micro EC2 instance. Notice that you need to generate and download a key to ssh to the machine, and it may take a few minutes for the instance to be initialized.
  4. After the instance is running, you will see a public IP address assigned to it. Keep this IP: you are required to give us this IP to demo project 1.
  5. When viewing the list of instances, you can click on the "connect" button, on the top to get instructions on how to use SSH to connect to the instance. By default, only the SSH port, 22, is open. In order to get other services (e.g., HTTP, HTTPS, and Tomcat) to be available to other machines, you will need to open the corresponding ports. To do so, when the instance is checked, select the security group, go to the "inbound" tab, and add more rules.

The name of the instance you will be launching is:

Ubuntu Server 16.04 LTS (HVM), SSD Volume Type

Setup MySQL and Apache Tomcat on the AWS instance

This part assumes you have SSH access to the Ubuntu 16.04 AWS instance.

  1. Install MySQL.
  2. Install Java on ubuntu, run
    • sudo apt-get update
    • sudo apt-get install openjdk-8-jdk
  3. Install Tomcat on AWS. Setup its application app manager page and test it using the URL http://YOUR_PUBLIC_IP:8080/manager/html. Open port 8080. This part is a little tricky, so read the instructions carefully.
  4. Install Maven: "sudo apt-get install maven"

Here are two cheat sheets of Linux/Ubuntu commands:

Task 3: Join Github Organization and create a repo for your team.

This course uses Github for version control. The students are expected to use Github as explained below.

  • Create an account on Github if you don't have one. Then provide us your username in the Google Spreadsheet Github Usernames.
  • Wait for the invitation from our staff to join the UCI-Chenli-teaching organization. The invitation might take a few days to be sent out based on our schedule.
  • One member from each team needs to create a private repository. The repository name should be of the form 'cs122b-winter19-team-x' where 'x' is your assigned team number, e.g., "cs122b-winter19-team-1". Other members can then be added to the repository as collaborators (by following steps given here).
  • You must wait for the invitation from us and create a private repository within the organization UCI-Chenli-teaching. Don't create a private repository on your own. 1) Go to UCI-Chenli-teaching organization. 2) click the New button to create a repository. 3) Type in the name and choose private.

Create repo under the organization

Type the repo name properly and choose "private"

  • You can then begin with your project using Github. Put the code of your project in your team's Github repository.

We have a wiki to get you started with Github for this course. Go through one of these online tutorials to get familiar with Git and Github if you are not familiar with them.

Task 4: Create a MySQL Database

Table Name
Attributes
Notes
movies
id:varchar(10) (primary key)
title:varchar(100)
year:integer
director:varchar(100)
required
required
required
required
stars
id:varchar(10) (primary key)
name:varchar(100)
birthYear:integer
required
required
not required
stars_in_movies
starId:varchar(10), referencing stars.id
movieId:varchar(10), referencing movies.id
all attributes required
genres
id:integer (primary key)
name:varchar(32)
all attributes required; "id" should be
"AUTO_INCREMENT"
genres_in_movies
genreId:integer, referencing genres.id
movieId:varchar(10]), referencing movies.id
all attributes required
customers
id:integer (primary key)
firstName:varchar(50)
lastName:varchar(50)
ccId:varchar(20), referencing creditcards.id
address:varchar(200)
email:varchar(50)
password:varchar(20)
all attributes required; "id" should be
"AUTO_INCREMENT"
sales
id:integer (primary key)
customerId:integer, referencing customers.id
movieId:varchar(10), referencing movies.id
saleDate:date
all attributes required; "id" should be
"AUTO_INCREMENT"
creditcards
id:varchar(20), (primary key)
firstName:varchar(50)
lastName:varchar(50)
expiration:date
all attributes required
ratings
movieId:varchar(10), referencing movies.id
rating:float
numVotes:integer
all attributes required

The table-creation SQL statements should be written in a createtable.sql file. All varchar() fields for which there is no data (i.e., the fields contents are missing or unknown) are the empty string (''); other non-required fields which have no data are null. Required fields have the constraint that they are not null.

Task 5: Implement the Movie List page of the Fablix Application

You only need to implement the Movie List, Single Movie and Single Star page of the Fablix Application. You'll implement other parts in project 2. You do NOT need to implement the sorting and prev/next features. You must not:

  • Realize any functionality in the web app using frameworks or scaffolding tools, such as DataTables.
  • Store data directly in the frontend instead of the database.

You must code from the ground up.

In project 1, the "Movie list" page shows the top 20 rated movies, sorted by the rating. You don't need to show all the movies. Each movie needs to contain the following information:

  • title
  • year;
  • director;
  • list of genres;
  • list of stars
  • rating

Tasks 6 & 7: Implement "Single Movie" and "Single Star" pages

  • 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, 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.

Create Your project in Eclipse

To create project 1 in eclipse, you need to create a dynamic web project.

Follow Create New Project in Eclipse to properly setup your project 1 in Eclipse.

Make sure that the project1 Eclipse project is created within your git repository folder.

If you meet any problems, this guide can also be helpful.

Setup gitignore file

When put your project code in the Git repository, a good practice of using Git is to only put the source code files in the Git repository, and ignore all the compiled files (such as .class files, executables) and other irrelevant files (such as files generated by Eclipse). The purpose of ".gitignore" file is to tell git to ignore certain files according to some patterns. You can learn more about gitignore here.

We provide a sample gitignore file that you can directly use in your project. Download the file and put the file into your project git folder. Then rename the file from "gitignore" to ".gitignore" (notice we add a dot "." in the beginning). For Mac and Linux users, the file then become hidden, don't worry, this is the correct behavior. Go to the terminal and type "git status" and you can see the ".gitignore" file. For Windows users, see this stackoverflow question to create the ".gitignore" file. Git will then automatically read the ".gitignore" file and ignore the unnecessary files.

Enable MySQL and Tomcat logging

It is better for you to monitor the changes while you work on your project. Here is a tutorial to enale MySQL logging on linux and Tomcat in eclipse. After you had enabled the logging, you can see the logs for changes in your application.

Examples and Resources

When implementing the movie list features

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. 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, but if you choose to implement this way, you will get 3% extra credit on project 1, and 5% on project 2.

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/

Here's an example ​project1-api-example that uses this approach to show the API example using frontend-backend separation, which is similar to the project1-star-example we provided. 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.

JDBC

Your Java Servlet need to talk to MySQL using JDBC. Download a MySQL JDBC driver file from ​https://dev.mysql.com/downloads/connector/j

Here are some sample JDBC programs. The Setup Scripts will give you the instructions on how to create the required database/tables and how to execute the sample code.

Tomcat Servlet Example

You are recommend to implement project 1 using the Java servlet techniques covered in the class with frontend-backend separation.

We've prepared this project1-star-example that help you get started. This project contains a Java Servlet that talks to MySQL to get star information and return an HTML to display a table of stars. We also have project1-api-example for frontend-backend separation implementation.

Follow Import Project to Eclipse to import this example project to Eclipse and export the WAR file.

You can run the project directly from Eclipse if you finished the Eclipse Tomcat Integration steps. To directly deploy the WAR file to tomcat, you can either deploy it through the tomcat manager webpage, or deploy it through the command line.

To deploy the WAR file using Tomcat manager webpage:

  1. Start the Tomcat server. Go to http://localhost:8080; this is your local web page. The tomcat welcome page should appear.
  2. Click "Tomcat Manager", enter your tomcat admin username and password.
  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.
  4. the new project should appear in the list. Click on the name of the project, and it should take you to the index.html page
  5. To see the star servlet, go to "localhost:8080/project1-star-example/stars", you should see a table containing star information.

To deploy the WAR file in command line:

  1. generate the WAR file using "mvn clean package". The war file is in the "target" folder.
  2. copy the WAR file to "tomcat_directory/webapps". For example "cp target/project1-star-example.war tomcat_directory/webapps/"

Other Online Resources

Here are some relevant tutorials. You can start the project after learning the basics. Don't spend too much time on learning the advanced content. You won't use them until Project 2.

Project Submission

We'll take your Github code as submissions. You need to include all the code in your Github repository, including Java, SQL, HTML, CSS, etc... You don't have to submit anything on EEE.

On the night of the end of the grace period, we will run a script that gets the latest commit ID in your repository. We'll use the time of the latest commit to determine if you use the Grace Period or not. So if you don't plan to use the Grace Period, don't push anything to Github during the 24-hour Grace Period. After the 24-hour grace period, you can continue using your repository normally for the next project.

  • Do not use the upload file feature in Github to submit your codebase.
  • Remember that we will only be checking the code in the master branch of your repository.
  • Do not try to cheat, e.g., by modifying the timestamp of a commit to an earlier date. We'll use the time that you push your commits to Github. So be sure to push your changes to Github before the deadline! Such cheating cases will be subject to very bad consequences.
  • To avoid any surprises, we will be publishing the final commit number that we have recorded for every team. It's your responsibility to check the commit number published by us. If you think we have made a mistake on the commit ID, you need to tell us ASAP.

Grading Checklist

Please refer to the grading checklist before submitting your project. This checklist includes the items we are looking for to grade your projects. Notice that we reserve the right to make reasonable changes of this checklist. Thus, you should implement all the required features, and only use this checklist to make sure you don't miss anything.

Demonstration

You are required to demonstrate this project. Your task is to show us (in 15 minutes) that your work is correctly and completely carried out and the course project is ready to move to phase 2. Your demo will include the following steps:

a) Make sure you AWS instance has everything properly installed (Java, MySQL, Tomcat, git). Make sure that the Tomcat server is running and the Tomcat admin page is accessible.

b) On the AWS instance, clone your project repository before the demo. During the demo, show us that you checkout to the commit ID that we recorded. You can use these commands:

git checkout master // checkout to the master branch
git status // show us nothing is changed in your repository
git log // the first commit ID that shows up should match the commit ID we have

If "git status" shows that some files are changed, we can use "git stash" to temporarily revert the changed files. You can use "git stash pop" to get those files back later.

c) On the AWS instance, you should drop the moviedb before the demo. Your repository should contain the "create_table.sql" file that you write. Use your "create_table.sql" to show us that you can create the moviedb and all the tables. Download the movie-data.sql file using wget https://grape.ics.uci.edu/wiki/public/raw-attachment/wiki/cs122b-2019-winter-project1/movie-data.sql, then populate the tables using the data sql file.

d) On your local development machine, you should already have your git repository. During the demo, do "get checkout master" first, then checkout to the commit ID that we recorded.

e) If you use Eclipse, then you should already have your project in Eclipse. Show us that the project in Eclipse is in your git repository. Export the WAR file using Eclipse (right click -> export -> WAR file). If you are not using Eclipse, you should figure out how to compile the project properly and generate the WAR file on your own.

f) Open your AWS instance's Tomcat admin console on your browser, deploy the WAR file you just exported. Go to your webpage and demonstrate the correctness, completeness, and performance of all the required features.

We can ask questions during the demo. Each of the team members needs to show that you understand what's going on with you project. Failing to answer the questions will lead to deductions.

Before the demo, you SHOULD test the whole process on you own. It is completely up to you to plan your demo so that all the required features are displayed and the grader can see the quality of your work in the given time frame. If the demonstration fails to finish in 15 minutes, it will be aborted, rescheduled with 10% penalty in the current project.

Demonstration schedule will be posted later.

Last modified 18 months ago Last modified on Jan 15, 2019 7:44:10 PM

Attachments (11)