Aution Based Web Client
Aution Based Web Client
Aution Based Web Client
23 Nov 2004 This tutorial shows you how to build a complete Web-based auction client application using the Eclipse Web Tools Platform. The auction client accesses a Cloudscape (Apache Derby) database that houses auction stock, as well as a remote auction Web service.
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 1 of 34
developerWorks
ibm.com/developerWorks
Examine your active auction listings Create new auction listings from warehouse stock items Query the auction site This tutorial is written for professional Java technology developers who want to improve their Web-development skills. Basic knowledge of databases, JSPs, and Web services will help you complete the tasks described. In this tutorial, you will create and populate a Cloudscape database, use example code to create JSPs, and servlets, and learn how to test your application using Apache Tomcat.
Prerequisites
This tutorial covers building an auction client, but not the accompanying Web service. To let you try out the complete application, we will point you to a running Web service we have already built for you. (Alternatively, if you would like to try your hand at building the Web service yourself, read and follow the accompanying tutorial, "Build a Web service using the Eclipse Web Tools Platform.") To complete this tutorial, you need to have the following software installed: Eclipse V3.0 The IBM contribution to the Eclipse Web Tools Platform and all of its prerequisites Apache Tomcat V4.1.30 IBM Cloudscape V10.0 You should also download the attached file, which provides SQL scripts used in this tutorial.
Section 2. Setting it up
Create the local database
Before you can begin developing the Web client, you need to create and populate
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 2 of 34
ibm.com/developerWorks
developerWorks
the local warehouse database. The contents of the database represent the warehouse stock ready to be put up for auction. To create and populate the local database: 1. 2. 3. 4. 5. If you haven't already, download and unpack the attached download, which contains the SQL script required for this section. In a command window, change the directory to <Cloudscape V10.0 install directory>\frameworks\embedded\bin. Run setEmbeddedCP.bat. Run ij.bat. At the ij> prompt, type: connect 'jdbc:derby:c:\path\warehouseDB;create=true'; (where c:\path\ is where you want to create the database). At the ij> prompt, type: run 'c:\path\warehouseDB.sql'; (where c:\path\ is the location of the warehouseDB.sql script). At the ij> prompt type: run 'c:\path\warehouseDB-populate.sql'; (where c:\path\ is the location of the warehouseDB.sql script).
6.
7.
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 3 of 34
developerWorks
ibm.com/developerWorks
7. 8. 9.
Select a 1.4.2 JRE. If a 1.4.2 JRE is not configured, select Installed JREs to configure one. Click Finish. In the Preferences dialog, click OK.
10. Copy derby.jar from <Cloudscape install directory>\Cloudscape_10.0\lib\ to <Tomcat install directory>\common\lib.
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 4 of 34
ibm.com/developerWorks
developerWorks
3. 4. 5. 6. 7.
body {
Name the folder "theme". Right-click AuctionWebClient\WebContent\theme. Select New > File. Name the file style.css. Copy and paste the following into style.css:
font-family: Georgia, "Times New Roman", Times, serif; color: navy; } table {padding:1; spacing:0; width:90%; border-collapse:collapse; } th {font-family:sans-serif; rowspan:2; text-align:left; background:000066; color:white; } td {font-family:sans-serif; border-top:ridge grey thin; border-left:none; border-right:none; padding:3; } .formtd { font-family:sans-serif; border-top:solid black thin; border-left:solid black thin; border-right:solid black thin; border-bottom:solid black thin; padding:3; } .trone{ background: #CCCCFF; } .trtwo{ background: #CCCCCC; }
If you wish, you can change the look and feel of this CSS to your own scheme.
developerWorks
ibm.com/developerWorks
To create the Web client home page: 1. 2. 3. 4. 5. Right-click AuctionWebClient\WebContent. Select New > File. Specify index.html as the file name. Click Finish. Copy and paste the following content into index.html:
<html> <link rel="stylesheet" href="theme/style.css"> <head> <title>Seller's Web Client</title> </head> <body> <p align="center"> <FONT face="Comic Sans MS" color="navy" size="+2"> Auction Management Web Client</FONT><BR><BR><HR> </p> <p align="center"> <A href="queryWarehouse">Manage Warehouse Stock</A><BR><BR> <A href="showAuctions.jsp">Manage Auctions</A><BR><BR> <A href="queryAuctionService.html">Query Auction Site</A> </p> </body> </html>
The above HTML creates a simple page with a heading and three links.
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 6 of 34
ibm.com/developerWorks
developerWorks
2. 3. 4. 3.
Select New > Package. Enter com.ibm.samples.Webclient as the package name. Click Finish.
Create the WarehouseStockItem Java class: 1. 2. 3. 4. Right-click AuctionWebClient\JavaSource\com\ibm\samples\Webclient. Select New > Class. Specify the class name as WarehouseStockItem. Click Finish.
5.
Implement the WarehouseStockItem class: a. Create the following private fields in the class (note that these variables correspond to the columns of the warehouse database):
b.
Generate getters and setters for the above fields: 1. 2. 3. Right-click id in the source code. Select Source > Generate Getters and Setters. Click Select All, then click OK.
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 7 of 34
developerWorks
ibm.com/developerWorks
3. 4. 5. 6.
Specify the Name: QueryWarehouseServlet. Specify the Superclass: javax.servlet.http.HttpServlet. Specify the Interface: javax.servlet.Servlet. Click Finish.
private final static String DRIVER_CLASS \ = "org.apache.derby.jdbc.EmbeddedDriver"; private final static String URL = \ "jdbc:derby:C:\\warehouseDB";
2.
Copy the queryDB() method into QueryWarehouseServlet.java. This method connects to the warehouse database, queries the database, and returns a list of WarehouseStockItem objects created from the query result set. (See Implement QueryWarehouseServlet: Copy the queryDB() method into servlet for the code.) Copy the doGet() method into QueryWarehouseServlet.java. This method is called by the server to allow the servlet to handle a GET request. This method calls the queryDB() method, sets the results as an attribute on the HttpServletRequest object, and forwards the request to showStock.jsp. (See Implement QueryWarehouseServlet: Copy the doGet() method into servlet for the code.) Right-click anywhere in the source code and select Source > Organize Imports to add the relevant import statements.
3.
4.
(To skip over the code for Steps 2 and 3, you can go directly to the Create a JSP to display the warehouse stock section.)
ibm.com/developerWorks
developerWorks
Copy the queryDB() method into QueryWarehouseServlet.java. This method connects to the warehouse database, queries the database, and returns a list of WarehouseStockItem objects created from the query result set.
private List queryDB() { List results = new Vector(); try { Class.forName(DRIVER_CLASS).newInstance(); Connection conn = null; Properties props = new Properties(); conn = DriverManager.getConnection(URL, props); Statement s = conn.createStatement(); String query = "SELECT * FROM \ warehouse.warehouse_item order by id"; ResultSet rs = s.executeQuery(query); while (rs.next()) { WarehouseStockItem ai = \ new WarehouseStockItem(); ai.setId(rs.getInt(1)); ai.setShortName(rs.getString(2)); ai.setItemDescription(rs.getString(3)); results.add(ai); } conn.close(); } catch (Exception e) { e.printStackTrace(); } return results; }
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 9 of 34
developerWorks
ibm.com/developerWorks
1.
Create the showStock.jsp file: 1. 2. 3. 4. Right-click AuctionWebClient\WebContent. Select New > File. Specify showStock.jsp as the file name. Click Finish.
3.
Copy and paste the following (Create a JSP to display the warehouse stock: Code) into showStock.jsp. This JSP retrieves the WarehouseStockItem list associated with attribute "results" and then iterates over the list and displays the ID and short name for each entry in a table.
(To skip over the code for Step 2 for now, you can go directly to the Test the Web client section.)
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 10 of 34
ibm.com/developerWorks
developerWorks
3.
To test the Web client: 1. 2. 3. 4. Right-click index.html. Select Run > Run on Server. Select localhost -> Tomcat v4.1 Server @ localhost. Click Finish.
The index.html file should open in a Web browser. Currently, the only working link is the "Manage Warehouse Stock" link. Click it. The pages should be similar to the images on the following two panels.
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 11 of 34
developerWorks
ibm.com/developerWorks
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 12 of 34
ibm.com/developerWorks
developerWorks
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 13 of 34
developerWorks
ibm.com/developerWorks
with <TD class=trone><A href="showWarehouseStockItem?itemId=<%= item.getId()%>"><%= item.getId()%></A> Now, each item ID in the table is a link to the showWarehouseStockItem. The itemId is passed as a parameter to showWarehouseStockItem.
private final static String DRIVER_CLASS \ = "org.apache.derby.jdbc.EmbeddedDriver"; private final static String URL = \ "jdbc:derby:C:\\warehouseDB";
2.
Copy the doGet() method into GetWarehouseStockItemServlet.java. This method retrieves the value of the itemId parameter, calls the queryDB() method, sets the results as an attribute on the
Trademarks Page 14 of 34
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
ibm.com/developerWorks
developerWorks
HttpServletRequest object, and forwards the request to stockItemDetails.jsp. (For the code, see Implement the servlet: Copy doGet() into servlet.) 3. Copy the queryDB() method into GetWarehouseStockItemServlet.java. This method connects to the warehouse database, queries the database, and returns the WarehouseStockItem with ID, itemId. (For the code, see the Implement the servlet: Copy queryDB() into servlet section.) Organize imports by selecting Source > Organize Imports.
4.
(To skip the code in Steps 2 and 3 for now, you can go directly to the Add GetWarehouseStockItemServlet to the deployment descriptor section.)
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 15 of 34
developerWorks
ibm.com/developerWorks
rs.next(); ai.setId(rs.getInt(1)); ai.setShortName(rs.getString(2)); ai.setItemDescription(rs.getString(3)); conn.close(); } catch (Exception e) { e.printStackTrace(); } return ai; }
3.
Copy and paste the following immediately below the <servlet-mapping> for QueryWarehouseServlet:
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 16 of 34
ibm.com/developerWorks
developerWorks
c. d. 3.
Copy and paste the following into stockItemDetails.jsp. This JSP retrieves the WarehouseStockItem associated with attribute results and then displays the item's ID, short name, and description as read-only fields in a form. The form includes an additional field (Minimum Price) and a button. These will be used to upload the selected stock item to an auction listing. You will implement this later in the exercise. (See Create a page to display the warehouse item: Code for code.) Now is a good point to stop and test the application. Click the "Manage Warehouse" link from index.html. Use the hyperlinks in the Item Id column to select and view individual stock items. Your page should look similar to the Create a page to display the warehouse item: Image section.
4.
(To skip over the code and image for now, you can go directly to the Connecting the Web client to the auction Web service section.)
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 17 of 34
developerWorks
ibm.com/developerWorks
<TD>Item Description:</TD> <TD><TEXTAREA rows="3" cols="40" name="description" readonly> <%=item.getItemDescription() %></TEXTAREA></TD> </TR> <TR> <TD>Minimum Price:</TD> <TD><INPUT type="text" name="minPrice" size="20"></TD> </TR> </TBODY> </TABLE> <INPUT type="submit" name="button_auction" value="Put up for auction"> </form> <p><A href="index.html">Home</A></p> </body> </html>
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 18 of 34
ibm.com/developerWorks
developerWorks
5. 6. 7.
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 19 of 34
developerWorks
ibm.com/developerWorks
AuctionService.java code generated by the Web Service Client Wizard, you will see that the getAuctions() method allows you to retrieve auctions by seller ID and auction status. 1. In index.html, you already created a link to "Manage Auctions," showAuctions.jsp. You can create that file now: 1. 2. 3. 4. 3. Right-click AuctionWebClient\WebContent. Select New > File. Specify a file name of showAuctions.jsp. Click Finish.
Copy and paste the code in the following section into showAuctions.jsp. This JSP queries the auction service for all auctions where the seller ID is "1" and the status is "OPEN." The getAuctions() method returns an array of AuctionListItems. We then iterate over this list and display various attributes of each item in a table. Examine the first column of the table -- <TD class=trone><A href="showAuctionItemDetails.jsp?itemId=<%=item.getAuctionId()%>" item.getAuctionId()%></A>. As with the warehouse stock table, each entry in the ID column is a hyperlink to details of the corresponding item. You will implement the showAuctionItemDetails JSP next.
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 20 of 34
ibm.com/developerWorks
developerWorks
{ AuctionListItem item = items[i]; %> <TR> <TD class=trone><A href="show\ AuctionItemDetails.jsp?itemId=<%= item.getAuctionId()%>"> <%= item.getAuctionId()%></A> <TD class=trtwo><%= item.getShortName()%> <TD class=trone><%= item.getCurrentPrice()%> <TD class=trtwo><%= item.getEndTime().getTime()%> <TD class=trone><%= item.getStatus()%><% }%> </TABLE> <p><A href="index.html">Home</A></p> </body> </html>
Copy and paste the following code (see the Create a page to display the details of a single auction listing: Code section) into showAuctionItemDetails.jsp. First, retrieve the value of itemId passed by showAuctions.jsp, then make a call to the auction service to retrieve an AuctionInfo object with that ID. The various properties of the AuctionInfo are displayed in a read-only form. Take a moment to test the application. From index.html, click "Manage Auctions." Use the hyperlinks in the ID column to select and view individual auction listings. (See the results in the Create a page to display the details of a single auction listing: Manage auctions page section and the Create a page to display the details of a single auction listing: Individual auction listings section.
4.
(To skip the images and code from Steps 2 and 3 for now, you can go directly to the Create a servlet to create new auction listings section.)
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 21 of 34
developerWorks
ibm.com/developerWorks
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 22 of 34
ibm.com/developerWorks
developerWorks
Create a page to display the details of a single auction listing: Manage auctions page
Figure 4. Manage auctions page
Create a page to display the details of a single auction listing: Individual auction listings
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 23 of 34
developerWorks
ibm.com/developerWorks
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 24 of 34
ibm.com/developerWorks
developerWorks
4. 5. 6.
Specify the Superclass: javax.servlet.http.HttpServlet Specify the Interface: javax.servlet.Servlet Click Finish.
Implement CreateAuctionListingServlet
To implement the servlet: 1. Copy and paste the code in the next section into the body of CreateAuctionListingServlet. The doPost() method is the only implemented method: a. Retrieve the values of the parameters passed to the servlet by stockItemDetails.jsp. The AuctionService method createAuction() takes two parameters, a credentials object and an auctionInfo object. Create the credentials object using the hard-coded EMAIL and PASSWORD strings. Create the auctionInfo object from the parameters you retrieved from the request object. Create the auction. Forward the request to showAuctions.jsp so the user can view the updated auction listing table.
b. c. d. e. 2.
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 25 of 34
developerWorks
ibm.com/developerWorks
Credentials credentials = new Credentials(); credentials.setEMail(EMAIL); credentials.setPassword(PASSWORD); AuctionInfo auctionInfo = new AuctionInfo(); auctionInfo.setSellerId(SELLER_ID); auctionInfo.setMinPrice(minPrice); auctionInfo.setShortName(short_name); auctionInfo.setItemDesc(item_description); auctionInfo.setStartTime(startTime); startTime.add(Calendar.DATE, 3); auctionInfo.setEndTime(startTime); AuctionServiceProxy service = new AuctionServiceProxy(); service.createAuction(credentials, auctionInfo); RequestDispatcher dispatcher = getServletContext() .getRequestDispatcher("/showAuctions.jsp"); dispatcher.forward(req, res); }
3.
Copy and paste the following immediately below the <servlet-mapping> entry for CreateAuctionListingServlet:
4.
Once again, take a moment to test the Web site. From index.html, click the "Manage Warehouse" link. Select an item to put up for auction. Enter the minimum price and click "Put up for auction." You should see the new listing in the table of active auctions (see the image in the next section).
ibm.com/developerWorks
developerWorks
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
developerWorks
ibm.com/developerWorks
4. 3.
Click Finish.
Copy and paste the code in the following section into queryAuctionService.html. The page consists of a form with a text field and Submit button. When the button is pushed, the form will submit a request to showAuctionQueryResults.jsp.
Copy and paste the following code (see the Create a page to display the search results: Code section) into showAuctionQueryResults.jsp. The page first retrieves the value of the searchTerm parameter passed from queryAuctions.html. Then, call the AuctionService.searchAuctions() method, passing the
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 28 of 34
ibm.com/developerWorks
developerWorks
searchTerm string. If any AuctionListItems are returned, they are displayed in a table. Otherwise, simply display a string saying zero results were found. 4. Test the application one more time. From index.html, click the "Query Auction Site" link. Enter a search term and click Go. (The Create a page to display the search results: Query page and the Create a page to display the search results: Query results page sections demonstrate this.)
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 29 of 34
developerWorks
ibm.com/developerWorks
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 30 of 34
ibm.com/developerWorks
developerWorks
Section 6. Summary
In this tutorial, you've seen how to use the tools in the Eclipse Web Tools Platform to build a Web-based auction client. We used Cloudscape to build a local database and the Eclipse tools to create JSPs and servlets to build a client that interacts with both the database and remote Web services hosted by the auction server. Even though a significant amount of coding was required, the J2EE, server, and Web Services tools included in IBM's contribution to the Eclipse Web Tools Platform provided wizards, projects, and frameworks to ease the development process. To learn how to create the Web service accessed by this client, read the tutorial "Build a Web service using the Eclipse Web Tools Platform" (see Resources).
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 31 of 34
developerWorks
ibm.com/developerWorks
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 32 of 34
ibm.com/developerWorks
developerWorks
Downloads
Description
Source code Information about download methods
Name
os-wtpclientsqlscript.zip
Size
2.3KB
Download method
HTTP
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 33 of 34
developerWorks
ibm.com/developerWorks
Resources
Learn For more information about the Eclipse Web Tools Platform, visit the Eclipse Web Tools Platform. Read the Getting Started guide for IBM's contribution to the Eclipse Web Tools Platform. The Apache Tomcat Web site is the community and download site for Tomcat. IBM Cloudscape Version 10.0 lists the changes in the latest version and provides links to downloads. The companion developerWorks tutorial, "Build a Web service using the Eclipse Web Tools Platform" shows how to create the auction Web service accessed by the auction client you built here. Visit the developerWorks Open source zone for extensive how-to information, tools, and project updates to help you develop with open source technologies and use them with IBM's products. Get products and technologies Innovate your next open source development project with IBM trial software, available for download or on DVD. Discuss Get involved in the developerWorks community by participating in developerWorks blogs.
Build a Web-based auction client Copyright IBM Corporation 2004. All rights reserved.
Trademarks Page 34 of 34