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

CS122B: Project 1

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

---

Task 1: Setup Apache Tomcat

We assume you already have Java installed on your machine. We recommend at least Java 8.

Download and install the latest Apache Tomcat from https://tomcat.apache.org/download-80.cgi#8.5.29 on your development machine. Go to "8.5.29" -> "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:

• Eclipse EE Edition (recommended)
• Eclipse Standard Edition

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.

• Apache Tomcat Eclipse Integration Quickstart Guide

These tutorials can also be helpful

• Install and Configure Tomcat Server in Eclipse
• Run Tomcat from Eclipse

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.

Setup MySQL and Apache/Tomcat on the AWS instance

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

1. Install MySQL.
2. Install Apache Web server. Open port 80.
3. Install Java
   
4. 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.
5. Install Maven: "sudo apt-get install maven"

Here are two cheat sheets of Linux/Ubuntu commands:

• http://cli.learncodethehardway.org/bash_cheat_sheet.pdf
• http://www.cheat-sheets.org/saved-copy/ubunturef.pdf

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-spring18-team-x' where 'x' is your assigned team number, e.g., "cs122b-spring18-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.

• https://try.github.io
• https://product.hubspot.com/blog/git-and-github-tutorial-for-beginners

Task 4: Create a MySQL Database

• Download a MySQL database for your development machine from http://dev.mysql.com/downloads/mysql/;
• Create a database called "moviedb" with the following tables:
  

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.

• Use the provided movie-data.sql file to populate the tables.

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

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

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

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.

Examples and Resources

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.

• Setup Scripts
• JDBC1.java - obtaining metadata and table contents
• JDBC2.java - deleting a record

Tomcat Servlet Example

You are recommend to implement project 1 using the Java servlet techniques covered in the class.

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.

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.

• HTML and CSS tutorial: http://htmldog.com/guides/html/beginner/
• An interactive HTML tutorial (Seems the tutorial is broken as of 1/7/2018, it may get fixed): https://www.codecademy.com/ar/tracks/htmlcss
• A good Java Servlet Tutorial: http://tutorials.jenkov.com/java-servlets/index.html
• Another good Java Servlet Tutorial: http://o7planning.org/en/10169/java-servlet-tutorial

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.

• 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-2018-spring-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. You will have no more than 15 minutes to demonstrate. 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 a group's demonstration appears to be unstructured, the demo could be aborted and rescheduled for another time with a substantial grade penalty.

Demonstration schedule will be posted later.