THE HONG KONG POLYTECHNIC UNIVERSITY
DEPARTMENT OF ELECTRONIC AND INFORMATION ENGINEERING
Object-Oriented Design and Programming (EIE3375)
Lab: Bookstore
(Deadline: Please check the course information)
Important Note: This is a group project. Two person form a group. If you insist to do it on your own,
one person per group is also fine.
Expected Outcomes







Understand the principles of object oriented design.
Apply Java in object oriented software development.
Apply UML in object oriented software modelling.
Apply object oriented approach to developing computer software.
Learn independently and be able to search for the information required in solving problems.
Present ideas and finding effectively.
Work in a team and collaborate effectively with others.
Assessment Criteria
Your report should contain (but not limited to) the following:
1.
2.
3.
4.
5.
Source code of your solutions (include the parts that you have use MVC techniques).
Explanation of how MVC was used in your implementation to simply the program structure.
The format of report should include the followings,
3.1 Introduction: A detailed description of the objectives and requirements of the program, and a
brief description of the methodology.
3.2 Methodology: The methodology when implementing the program. It contains,
 How your team divides the work among the team members?
 The schedule of implementing the program
 The MVC structure of the program developed, including
o The specifications of the classes defined, and the public/private member
functions/variables included
o The flow of execution such as class diagram or flow chart.
3.3 Program Testing
 The validations of your program and confirmed that it is running correctly.
o Include the execution results of your program captured from the screen.
3.4 Conclusion
 Summarize the experience gained in the program
3.5 Future Development
 Indicate how your program can be extended.
Basic features are COMPULSORY that included all features described in Project Description.
Additional features are OPTIONAL, it contains,
5.1 Image Retrieval: You may provide an image for each record and the image can be displayed in
BookInfo.jsp.
5.2 Database Management: The user may add or remove record(s) in the database “books”.
5.3 Input Validation: Additional validations for input data.
5.4 Any other creative and significant features.
Page 1
Note that additional features will NOT contribute to the final marks. You may implement these features if
you want to learn more.
6.
Mark distribution,
Basic Features: 60%
Coding style and correctness: 10%
Report: 30%
General Descriptions
1. After finished the program, each team should compress (into zip format) and upload your source
code and report to Blackboard and the screen captures should contain your name, student number,
and data and time at which you run your program.
2. DO NOT include Tomcat server, SQL server, SDK development kit and other NOT related programs,
otherwise; your mark WILL BE DEDUCTED.
3. Each team member (student) must submit his/her own copy to Blackboard. It is expected that, if
two students form a team, the team will submit two set of programs and reports to Blackboard. If a
student doesn’t submit his/her copy, they will score no marks.
4. Each team member should declare his/her responsibility in the report. Each member will be
individually assessed based on the declared responsibility and the result obtained.
5. The report should be in PDF format. It is NOT required to include the complete source code in the
report.
6. It is compulsory to use a word processing tool to write your report. The font size must not be
bigger than 12 or smaller than 10. Use 1.5 lines spacing on both sides of a page. (Including all
diagrams/tables, the length of the report should not be shorter than 15 pages)
Introduction
In this project, you are required to develop an online bookstore by using HTML, JavaScript, Java Servlet
and JSP. The bookstore is a web application through which a user can (1) view a list of books written by an
author and (2) purchase book(s) from the bookstore. Through this project, you will come across the design,
implementation, and testing phases of a typical web application. The following shows the overview of
program structure.
Page 2
Project Description
In this exercise, you need to create EIGHT files for the web app. Users shall follow the paths shown in
Figure 1(f) when using the web app.
1. SearchBook.html: This HTML file should provide two text boxes for a user to input an ISBN, an
author name or both to search for book(s) that meet the criteria. A button shall be provided for the
user to submit the form (see Figure 1(a)). Note that you are required to check whether the input is
empty or not. If both text boxes are empty, you should display an error message asking the user to
input again. If the input is valid, the web page will send a request to QueryServlet after pressing the
button.
Replaced by the time
and date at which your
program is run.
(Google “HTML date
and time”)
Figure 1(a) Output of SearchBook.html
2. QueryServlet.java: This servlet shall receive requests from SearchBook.html and search a book
database to retrieve the books that meet the search criteria specified by the user. It shall save the
book information in an ArrayList object and associate the object with a session-based attribute.
Then, the servlet shall forward its control to the BookInfo.jsp (see below). A database is provided for
the online bookstore and you may download the file “BookStore from
http://www.eie.polyu.edu.hk/~enhylin/Servlet.html
You should follow the instructions in the appendix to startup a SQL server. The following actions can
be used to validate whatever the SQL server has been started and the database has been properly
installed.
a. Use WordPad to read Books.sql.
b. Type “show databases;” in a MySQL client shell to show the content of the database (see
Figure 2).
c. Type “use books;” and then “show tables;” in the MySQL client shell to show the
content of the database (see Figure 3).
d. Type “select * from bookinfo;” to show all book information in the database
“books” (see Figure 4).
e. Type “select * from bookinfo where isbn='0132404168';” to show the book
information of ISBN 0132404168.
Page 3
You are required to design a class called Book that contains the information of a book and a class
called ShoppingCart that contains an array of Book objects. In case this task is too complicated
for you, you may refer to QueryServlet.java Book.java, and ShoppingCart.java from “BookStore”
file that downloaded from http://www.eie.polyu.edu.hk/~enhylin/Servlet.html. This page also
contains the skeletons and hints of other files. You may read the hints to complete this project. All
servlets in this web application should be under the package “bookstore”, i.e., when you create
the servlet, remember to put “bookstore” in the package field as shown below.
3. BookInfo.jsp: This JSP shall display the books that meet the search criteria as shown in Figure 1(b).
This can be achieved by retrieving the ArrayList object created in QueryServlet.java. A hyperlink
“Add to Cart” should also be displayed. The link shall allow users to send a request to
OrderSerlvet.java (see below). A hyperlink “Home” that allows the user can go back to
SearchBook.html shall also be implemented in this JSP.
Figure 1(b) Output of BookInfo.jsp
Hints: Your JSP may contain the following scriptnet.
<%@page import="java.util.ArrayList" %>
<%@page import="java.util.Date" %>
<%@page import="bookstore.*" %>
<%
ArrayList<Book> books = (ArrayList<Book>)session.getAttribute("foundBooks");
int numBooks = books.size();
%>
<center>The time now is: <%= new Date() %></center>
Page 4
4. OrderSerlvet.java and show-order.jsp: This servlet and JSP work together to display the order
information. The servlet shall receive requests from BookInfo.jsp and add the book(s) that the user
has selected to his/her shopping cart. The JSP shall display the following information in the form of a
table:
a)
b)
c)
d)
The number of items in the user’s shopping cart;
The title of each book in the user’s shopping cart;
The price of each book in the user’s shopping cart; and
The total price of all books in the user’s shopping cart.
Finally, THREE buttons should be added at the bottom of the table:
a) A “Back” button allowing the user to go back to the previous web page, i.e., BookInfo.jsp;
b) A “Check Out” button forwarding the control to check-out.jsp (see below) so that the user
can buy all books in his/her shopping cart; and
c) A “Remove All” button allowing the user to remove all books in his/her shopping cart. To
simplify the implementation, the user is not allowed to remove individual books; however,
he/she can remove all of the books in the shopping cart in one operation. A snapshot of the
output of show-order.jsp is shown in Figure 1(c).
Figure 1(c) Output of show-order.jsp
Here is a code fragment in OrderServlet.java. It obtains the user’s session and creates a
ShoppingCart object if none exists.
public class OrderServlet extends HttpServlet {
public void doGet (HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException)
String url = "/show-order.jsp";
HttpSession session = request.getSession(false);
if (session == null) {
System.out.println("Forward to SearchBook.html");
RequestDispatcher dispatcher =
getServletContext().getRequestDispatcher("/SearchBook.html");
dispatcher.forward(request, response);
return; // Need to return doGet() to prevent the following codes to run
}
ShoppingCart cart = (ShoppingCart)session.getAttribute("bookstore.cart");
if(cart == null){
cart = new ShoppingCart();
session.setAttribute("bookstore.cart", cart);
}
ArrayList<Book> books = (ArrayList<Book>)session.getAttribute("foundBooks");
int i = Integer.parseInt(request.getParameter("selectedBook"));
cart.addBook(books.get(i));
session.setAttribute("bookstore.cart", cart);
Page 5
ServletContext context = getServletContext();
RequestDispatcher dispatcher = context.getRequestDispatcher(url);
dispatcher.forward(request, response);
}
}
5. remove-all.jsp: This JSP is invoked when the user presses the Remove All button in show-order.jsp
(see Figure 1(c)). It should remove all selected books in the shopping cart. Hints: You may need to
use the removeAll() method of ArrayList class.
6. check-out.jsp: This JSP should provide two text boxes for the user to input his/her name and his/her
credit card number. Moreover, it should provide two buttons:
a) Submit information: for submitting the information in the text boxes to the servlet
ReceiptServlet.java. An error message should be displayed when any of the text boxes is
empty.
b) Cancel: for forwarding the control back to show-order.jsp.
Fig. 1(d) shows the output of check-out.jsp.
Replaced by your
name and student
number
Figure 1(d) Output of check-out.jsp
7. ReceiptServlet.java: This servlet should display an acknowledgement for the purchase order created
in check-out.jsp. The servlet shall automatically forward to SearchBook.html after FIVE seconds.
You may search the internet using the keyword “HTML refresh code” to find some example
implementation. Figure 1(d) shows the output of this servlet.
Replaced by your
name and student
number
Figure 1(e) Output of ReceiptServlet.java
Page 6
Figure 1(f) shows the interactions of the EIGHTS HTML/servlets/JSP files mentioned above.
Figure: 1(f)
Figure 2: Databases in MySQL server
Figure 3: The content of the database “books”
Figure 4: The contents of “bookinfo” in the database “books”
Page 7
Appendix
The procedures have been tested under Windows 7. Tomcat and Eclipse will also work on Mac OS and
Linux, but you have to download the programs by yourself.
Downloading and Installing Software
1. Create a folder named “C:\Temp\EIE3375”
Create a folder named “H:\Temp\EIE3375\Workspace” under your home folder in CF105/CF503
Create a folder named “C:\Temp\EIE3375\MySQL”
Visit http://www.eie.polyu.edu.hk/~enhylin/Servlet.html and you should see several files there.
2. Download Java Development Kit from (Skip this step if you have already installed Java JDK)
http://www.eie.polyu.edu.hk/~enhylin/Servlet.html and unzip the file to C:\Temp\EIE3375.
3. Download Apache Tomcat 7 from https://tomcat.apache.org/download-70.cgi and unzip the file to
C:\Temp\EIE3375.
4. Download Eclipse Helios IDE for Java EE Developer from (Skip this step if you work in CF105)
http://www.eclipse.org/downloads/packages/release/helios/sr and unzip the file to C:\Temp\EIE3375.
5. Download MySQL from http://www.eie.polyu.edu.hk/~enhylin/Servlet.html and unzip the file to
C:\Temp\EIE3375\MySQL.
6. Download MySQL Connector/J from http://www.eie.polyu.edu.hk/~enhylin/Servlet.html and unzip the
file to C:\Temp\EIE3375\MySQL.
7. Download a SQL script from http://www.eie.polyu.edu.hk/~enhylin/Servlet.html (included in Servlet
"BookStore" Files).
8. Add
the
MySQL
JDBC
driver
to
Tomcat
by
copying
C:\Temp\EIE3375\MySQL\mysql-connector-java-5.1.14\mysql-connector-java-5.1.14-bin.jar
to
C:\Temp\EIE3375\apache-tomcat-7.0.23\lib. This .jar file contains classes that allow Java programs to
manipulate MySQL databases. A JAR file (Java Archive File) is a compressed file that contains a
number of .class files in a package.
Setting up MySQL Accounts
9. Open a Command Window (StartRuncmd) and execute the following command.
cd C:\Temp\EIE3375\MySQL\mysql-5.5.8-win32\bin
Then, execute the following command in the Command Window to start the MySQL server:
mysqld
--verbose
Page 8
Make sure that “mysqld.exe” is running by opening up the Windows Task Manager
(StartRuntaskmgr). If not, it is likely that your computer is running a MySQL service on Port 3306.
If you have admin right, stop the service. If you do not have admin right, change your MySQL server to
use another unused port, e.g., 3307. For details, see
http://www.eie.polyu.edu.hk/~enhylin/Files/mysqld_changeport.docx
10. Open another Command Window. Change directory to MySQL and start the MySQL monitor.
cd C:\Temp\EIE3375\MySQL\mysql-5.5.8-win32\bin
C:
mysql
-h localhost
-u root
“root” is the default user account that is created during installation. The –h option is used to specify the
host that runs mysqld.exe.
11. At the mysql> prompt, type
USE
mysql;
Note that mysql is a built-in database.
12. Add the user “guest” to the mysql build-in database. You may copy-and-paste the following command to
your Command Windows running mysql.exe.
create user 'guest'@'localhost' identified by 'guest';
grant select, insert, update, delete, create, drop, references, execute
on *.* to 'guest'@'localhost';
exit;
13. Shutdown mysqld.
mysqladmin
-h
localhost
-u
root
shutdown
You will notice that mysqld.exe running in another command window is terminated.
Creating a Book Database
14. cd to C:\Temp\EIE3375\MySQL\mysql-5.5.8-win32\bin and restart the MySQL server
mysqld
--verbose
Then, start the MySQL monitor (client) by typing
mysql
-h
localhost
-u
guest
-p
When prompt for entering password, type guest.
15. Use WordPad to read C:\Temp\EIE3375\MySQL\Books.sql. Create the Book database by typing
source ../../Books.sql;
Note that the semicolon is very important. This command will create a database called “books” in
C:\Temp\EIE3375\MySQL\mysql-5.5.8-win32\data\books. Note also the use of forward slash ‘/’ for
separating directories and filenames in a path.
Page 9
16. Make sure that the database has been successfully created by typing
select *
exit;
from bookinfo;
Setting up Eclipse
17. Start Eclipse by clicking eclipse.exe in C:\Temp\EIE3375\eclipse or desktop shortcut. If it is the first
time you start eclipse, it will prompt you to select a workspace. You may select
C:\Temp\EIE3375\Workspace as the workspace. When you see Eclipse’s welcome page, click
“Workbench” in the top-right corner. You may also like to go through the tutorials (if you have time).
18. You need to tell Eclipse which version of JRE Eclipse will be using. Select Window  Preferences.
On the left panel of the Preferences Window, expand Java and select “Installed JRE”. Press the “Add”
button, select Standard VM, press “Next”, press “Directory” and browse to
C:\Temp\EIE3375\jdk1.6.0_xx, press “OK” and then “Finish”. Then, in the “Installed JREs”
Window select jdk1.6.0_xx in the checkboxes. Finally, press “OK”.
Page 10
19. Setup Web Application Server. Select Window  Preferences. In the left panel, expand “Server” then
select “Run Time Environment”. Press “Add” and follow the instruction to select
Apache Tomcat 7.0. Select C:\Temp\EIE3375\apache-tomcat-7.0.23 as the installation directory of
Tomcat.
Create Web Project in Eclipse
20. Create a new Dynamic Web project called “EIE3375WebApp” using File  New  Dynamic Web
Project. Select “3.0” for the Dynamic web module version.
Press the “Next” button to use the default settings. Then, press “Finish”.
Page 11
21. Create a HTML file called “SearchBook.html”. Right click the project title “EIE3375WebApp” in the
Project Explorer on the left and select New  HTML File  Save the file. This HTML file will send the
user request to QueryServlet.class that runs on the server. When the server sends back a response, the
BookInfo.jsp file retrieves the object. For detailed interactions of the HTML/servlets/JSP files, please
refer to figure 1(f).
22. Execute “SearchBook.html” by right clicking the file in the Project Explorer (You may see the file
by expanding “EIE3375WebApp” and then “WebContent”) and select Run As  Run on Server.
Follow the on screen instruction to start Tomcat automatically. You should see the following screen
snapshots.
Create Servlets in Eclipse
23. Create a new servlet called “QueryServlet”. Right click the project  New  Servlet. Use “eie3375”
as package name. If Eclipse cannot recognize servlet-related classes (e.g., HttpServlet), you may have
done something wrong in earlier steps. In such case, you need to tell Eclipse where to find the file
“servlet-api.jar”. To do that, right-click the project EIE3375WebApp, select Build Path, then Configure
Build Path. In the Library tap, press the button “Add External JAR”, and then browse to
“servlet-api.jar”. It should be in the folder <Tomcat Folder>/lib.
Doris Lin
March 2017
Page 12