UCLA Fall 04 CS143 Project 2
Database and the Web
Due: 1:00pm, December 7th
Project Description
In this project, you learn how to design web pages that interact with a database.
In your project, you will accomplish that by using DB2, JDBC and Java Servlet
Server Apache Tomcat. Therefore,
you will extend the queries and JDBC applications that you have mastered in
Project 1, to work with Java Servlets. Although many approaches are being used
to support Web-based applications, servlets provide one of the most popular
and effective environments for the task. In addition, you will have to design
several HTML files, with links, menus, and input windows. (You will also have
an opportunity to flavor XML--the heir apparent of HTML). You will have to design
and support the following HTML pages:
Main Pages and Web flow:
- Page P1: This let users search for albums with a given title. Thus, there
will be an input textbox specifying the (full or partial) name of a album,
and a 'submit' button to start the actual search (sample
P1).
Page P2: This is the dynamically generated output page that contains the names
of the albums returned by the previous search. The albums are displayed as a table
with columns showing the attribute values from the album table. (sample P2). Each album name is clickable;
the clicking of an album opens a new page (P3).
Page P3: This page displays the average rating of that album, and all the current
reviews for the album (sample P3). There
is also a link "Rank the album and add comments" which opens the next
page P4.
- Page P4: this page contains a dropbox listing five different scores the user
can assign to the album (from one star to five stars). There is also a textbox
where the user can enter comments about the album, and the usual 'Submit' button
(sample P4).
- Page P5: After the comment is successfully submitted, page P5 appears displaying
the submitted comment and rating, and asking that the user to confirm (sample
P5). If the user clicks `No', then we return to P4; if the user clicks
`Yes' we return to P1.
You can excercise much freedom in designing your web pages; the usability and
appeal of your pages will be considered in scoring your project. However you
must demonstrate the following:
- One or more input boxes, where the value typed by the user becomes a parameter
to an SQL query
issued to DB2 (with results displayed in the Web page as usual).
- One or more drop-down menus, where the value selected by the user becomes
a parameter to an SQL query issued to DB2. If you wish, you may use both input
boxes and menus to gather parameters for a single query.
- The ability to modify the database in some parameterized fashion through
the Web interface
(inserts, deletes, or updates with input from the user).
- Link-based browsing, whereby the result page presented by your program contains
hyperlinks on certain attribute values (typically join attributes). Clicking
on a hyperlink should issue another SQL query related to the item being clicked
on, and generate another result page in HTML as usual. (For example, clicking
an album will return all the comments for that album)
- Your pages must be viewable with both the current versions of Microsoft
I.E. and Netscape.
Extra Credit (10%)
For page P1, add a checkbox "Display as XML". If that checkbox is checked,
a page of XML document (instead of HTML) is displayed ( through Microsoft I.E.
only). A sample XML document is here. The
document you generated must satisfy a DTD (you need
to define your own DTD) and will be validated using the following XML
Validator.
Tasks
PART I: Warm-Up
0. Read Java Servlet at SEAS.
1. Setup Tomcat
Please follow the instructions on Setting Up Tomcat Server.
After you get Tomcat ready, you can startup Tomcat on one terminal by running
"startup.sh", and open another window for coding. To kill tomcat, type
"CTRL-C".
Please make sure you do it before you log out.
2. Test Java Servlet
We provide two two sample files to demonstrate the basic functionality of Servlets,
located at /w/class.01/cs/cs143v/cs143vta/project/ directory.
Copy the files Copycat.html and Copycat.java to the appropriate directories
in your own account. The Copycat.html file should be placed at ${HOME}/tomcat/webapps/ROOT
directory from step 1, and the Copycat.java should be placed at ${HOME}/tomcat/webapps/ROOT/WEB-INF/classes/
directory.
You must compile your Java file first. Please make sure you have sourced
all.env in step 1, otherwise your Java Servlet library file will not be
included in the CLASSPATH.
3. After that, you are ready to run your sample Servlet:
Please open the following URL with a Web Browser (i.e., IE):
http://<machinename>:<port>/<filename>.html
e.g., http://landfair.seas.ucla.edu:11256/Copycat.html
After you type something and submit, it will be sent to the Servlet Copycat.
The Servlet address is:
http://<machinename>:<port>/servlet/<javaClassName>
e.g., http://landfair.seas.ucla.edu:11256/servlet/Copycat
4. Understand the sample code, and read documentation from sun:
Now modify Copycat.html and Copycat.java to add new textbox and handle it in your
Servlet.
You don't need to submit Part I.
Part II: the Project
Reuse the database in Project 1, and modify tables or add new tables if needed.
Follow the samples in Part I, write your own web pages and Java Servlets for Project
2.
It's very open-ended and you have your own freedom to write your codes in different
ways and display it in different ways.
Submission(Deadline: 1:00pm Tuesday, December 7th)
What to Submit
The SQL script file that you use to create and load data into the database: db.sql
It needs to load at least five rating records, with insert statement.
The HTML file(s) and Java file(s) for each page in the project description (P1-P5),
and the displayed web pages by your Servlets. Please capture the web pages generated
from your Servlets by "view source" from your web browser menu, and copy and paste
each one as an HTML file.
For Extra credit problem, your Page 2 will need extra codes to generate
an XML document. Besides, you need to submit a sample generated XML page,
and a DTD for that XML document.
Late Submission Policy
Late submissions will be penalized by 50 percent for each additional day (by midnight),
so if you submit 2 days late, you will have no credit at all.
Late submissions should be emailed to the TA as submit command won't work after the deadline.
Electronic Submission of Projects
The submit program under SEAS account allows the students to
electronically turn in any type of file to the instructor.
Please put the following content in a file readme.txt:
(Include your passwd as well)
Class Name: CS143, LEC.1
Name(Last, First):
Student SID:
Project login account: passwd:
Database you use(STUDBL, STUDBW, or STUDBN):
Servlet PORT numbers: Connector Port:____ Server Port:____
and submitted as follows (you can define your own file names):
submit cs143 db.sql p1file p2file ... p5file ... p2displayed.html ... p5displayed.html readme.txt
Academic Honesty
Each of you is expected to submit your own original work. On many occasions it
is useful to ask others (the instructor, the TA's, or other students) for hints
or debugging help, or to talk generally about programming strategies. Such activity
is both acceptable and encouraged, but you must indicate any assistance (human
or otherwise) that you received. Any assistance received that is not given proper
citation will be considered plagiarism. In any event, you are responsible for
coding, understanding, and being able to explain on your own all project work
that you submit.
We will pursue aggressively all suspected cases of plagiarism, and they will be
handled through official University channels.
If you have any questions about this policy or about the degree to which we will
pursue Honor Code violations, please discuss your concerns with the course staff
immediately.