CS 220 Spring, 2008 Lab Exercise 7: Javaserver Pages

CS 220 Spring, 2008 Lab Exercise 7: Javaserver Pages

CS 220 Spring, 2008 Lab Exercise 7: JavaServer Pages

Note: The web-based user interface created as the end result of Lab Exercise 7 is meant to be the beginning of a realistic user interface for the CasClothes Online Store.

Note: JSPs are simpler than servlets. Also, you do not need to compile a JSP file, in contrast to a servlet. When you “run” a JSP page, it is automatically transformed into a servlet, compiled for you, and stored in a web container on the server for execution.

Note: Use the TableEx1.jsp as a simple example of how to write the code to generate the table of Items in the exercise.

Note: When running a web app, for statements that write to the standard output stream, such as System.out.println, the output is written to the NetBeans pane entitled Bundled Tomcat (…).

1.Obtain files from course web page. The files are:

a.JSP pages: index.jsp and ItemsJSP.jsp.

b.Package-folder dbInterface: CatalogExer.java

c.Package-folder eModels: Category.java, Item.java, SpecifiedItemSizeColor.java,

ItemList.java

2.Create a new project in NetBeans.

a.In the New Project dialog, in the Categories pane, select Web, and in the Projects pane,

select Web Application. Click the Next button.

b.Enter a Project Name such as Lab7or CasClothesProj.

c.For Project Location, navigate to and select the folder that you want to hold the new

project.

d.Click the Finish button.

PART 1. Create a simple demonstration JSP page

3.Add a new JSP page to your project.

a.Right-click on the Web Pages node and, from the pop-up menu, select New>JSP.

b.In the New JSP File dialog: enter a JSP File Name such as DemoDaysOfWeekJSP.

c.The Location should be Web Pages.

d.Click the Next button.

e.In the next dialog, click the Finish button.

4.Edit the JSP page code.

a.Display the code for the new JSP page in the edit window.

b.After the line that begins with <%-- <jsp:getProperty, add the following lines:

<h2>Days of the Week JSP</h2>
<hr>
<h3> Current date and time: <%= new java.util.Date() %> </h3>
<hr>
<% String day[] = {"Sunday", "Monday", "Tuesday", "Wednesday",

"Thursday", "Friday", "Saturday"}; %>

<ul> <% for ( int i = 0; i < day.length; i++ ) {

out.println( "<li>Day number " + i + " is " + day[i] + "</li>") ;

}
%>
</ul>

c.Select menu File>Save All to save your work.

5.Run the JSP and view in browser.

a.In the left-side Project tab pane, right-click on the JSP page node, and select Run File.

This will bring up your web browser, and display the JSP page, which is automatically

transformed into a servlet, compiled, and runs on the server.

b.The window capture is shown below.

6.View the servlet code for the JSP page.

a.When you run and debug your program, you may need to look at the servlet code for a

JSP page to track down an error.

b.To view the servlet code for the above JSP page, in the Project pane right-click on the

JSP page node and select View Servlet. The servlet code will be displayed in the right-

side edit pane.

PART 2. Develop the initial version of the CasClothes application.

8.Create CasClothes JSP pages using the files provided by instructor.

a.Open the instructor-provided file named index.jsp in WordPad and copy the contents of

the file.

b.In NetBeans, paste this code into the existing JSP page named index.jsp, replacing the

existing code.

c.Add another JSP page, named ItemsJSP, to your NetBeans project.

d.Open the instructor-provided file named ItemsJSP.java in WordPad and copy the

contents of the file.

e.In NetBeans, paste this code into your new JSP page in place of the existing code.

f.Select menu File>Save All to save your work.

9. Copy the other files from instructor and add to project.

a.Using Windows Explorer, copy each of the instructor-provided folders containing Java

files into the src folder of your project. These folders are: dbInterface and eModels.

b.Compile each of these Java files.

10. Run the index.jsp page and view in browser.

a.In the left-side Project tab pane, right-click on the index.jsp node, and select Run File.

This will bring up the web browser, and display the JSP page, as shown below.

b.Click on the button, Show Clothing Items. This should display the ItemsJSP page

containing a table for display of the clothing items from the database.

c.The display table in the ItemsJSP page is not populated in the version provided to you to

start this exercise. Your job is to populate this table with all the CasClothes product items

as specified in the instructions below.

11. Extend the CatalogExer class.

a.You can rename this class to just Catalog. If you do this, you need to change all

references to the class in the other files as well.

b.Be sure that you are using the newer version of the CasClothes database containing the

categories: Shirts, Pants, Foot Wear, Head Gear, Coats and Jackets, Accessories.

i.The SQL script for creating this database is provided with this exercise.

c.Update the existing getConnection method in the CatalogExer class, if necessary.

d.Write the getItems method in the CatalogExer class.

i.This method must invoke the existing getConnection method in the CatalogExer class to connect to the CasClothes database.

ii.The getItems method must return an ArrayList containing a list of Item objects, one for each of the records in the Item table in the CasClothes database.

iii. Note that the Item.java file has been provided to you in the eModels folder.

12. Check the ItemList class.

  1. Check the code in the ItemList class and make sure that it uses the correct catalog class (uses correct name).
  1. Modify the ItemsJSP page. Add code to populate the table of clothing items that are available for purchase by customers:
  2. Remove the code that generates the one row of data in the table.
  3. Uncomment the two statements that create a CatalogExer instance and invoke the

getItems method.

  1. Add a loop that generates a row in the table for each item in the Item list returned by the getItems method in your CatalogExer class.
  2. For each row of the table,
  3. In the first column, display the ItemId, Name, and Description for the Item, as shown in the window capture below.
  4. In the second column, display the sizes for the particular Item. Get the unique list of sizes for each item using the getSizeList method in the Item class.
  5. In the third column, display the colors for the particular Item.
  6. In the fourth column, display the price of the Item.
  7. In the last (fifth) column, display a checkbox. The intent is for the user to check

this box if they want to add the item to their shopping cart.

  1. Execute and debug the modified JSP pages and files.
  2. Make a window capture of your ItemsJSP page in your web browser.

TO RECEIVE CREDIT FOR YOUR LAB EXERCISE:

Send in:

a.Your entire NetBeans project folder with all its subfolders and files(this only includes the

latest changes not the earlier code).

b.Your Microsoft Word document file, as described above, named Lab.7.doc. The Word

document file must be in the top level folder.

Email your complete lab files as one zipped file to

with the subject heading: “CS220 Lab. 7” by 3/17/08

DISPLAY OF FINAL WORKING JSP PAGES:

Top View