Tutorial 30 –

(1)

Tutorial 30 – Bookstore Application:

Client Tier

Introducing HTML

Outline

30.1 Analyzing the Bookstore Application 30.2 Creating JavaServer Pages

30.3 Creating the books.jsp Page

30.4 Creating the bookInformation.jsp Page 30.5 Wrap-Up

(2)

• In this tutorial, you will learn to:

– Create a JSP Web Application.

– Create and design JSP pages.

– Use HTML form controls and other HTML elements.

– Use these technologies to implement the client tier of a three-tier web-based application.

(3)

30.1 Analyzing the Bookstore Application

When the books.jsp page is requested

Retrieve the book titles from the database Display the book titles in an HTML menu

If the user selects a book title from the menu and clicks the View Information (submit) button Request the bookInformation.jsp page for the selected title

When the bookInformation.jsp page is requested from books.jsp

Retrieve the selected book’s information from a database for the selected title Format the retrieved information in the bookInformation.jsp page

Return the result to the client browser

If the user clicks the Book List link on the bookInformation.jsp page Request the books.jsp page

(4)

Action Component/Class/Object Event/Method

books.jsp page is requested books.jsp JSP requested by client

Web browser

connect to the database Connection getConnection

create statement Connection createStatement

retrieve the book titles from the database

Statement executeQuery

display them in the select

element ResultSet,

select HTML element, option HTML element

get methods

request the

bookInformation.jsp page input HTML element with type submit

Click the bookInformation.jsp page

is requested bookInformation.jsp JSP requested by client

Web browser

connect to the database Connection getConnection

Figure 30.1 ACE table for the Web-based Bookstore application (Part 1 of 2).

(5)

(Cont.)

Action Component/Class/Object Event/Method

create statement Connection createStatement

retrieve the selected book’s information from the

database

Statement executeQuery

format the retrieved information in the bookInformation.jsp

ResultSet,

p (paragraph) HTML elements, img HTML element

get methods

User clicks the Book List link on the bookInformation.jsp page to request the books.jsp page

a (anchor) HTML element User clicks the hyperlink

Figure 30.1 ACE table for the Web-based Bookstore application (Part 2 of 2).

(6)

• JavaServer pages look like HTML

– Include HTML markup and JSP code

(7)

30.3 Creating the books.jsp Page

• HTML comment

– 

• HTML markup

– Elements – Start tag – End tag

– title element

– head element

(8)

Figure 30.2 Adding the title to the JSP.

Setting the JSP’s title

(9)

30.3 Creating the books.jsp Page (Cont.)

Figure 30.3 Adding a heading to the JSP.

Adding an h1

header element

• body element

• header elements

— h1

(10)

Figure 30.4 Creating a form in the JSP.

Creating an HTML form

• form element

(11)

Figure 30.5 Creating a paragraph text in the JSP.

Creating a paragraph of text

• paragraph tags (<p> and </p>)

• p element

(12)

Figure 30.6 Creating an empty select statement in the JSP.

Creating an HTML menu control

• select element (HTML menu control)

— name attribute

(13)

Figure 30.7 Adding the "submit" button to the JSP.

• input element

— type attribute

— "submit" button

— value attribute

Adding a

"submit" button

(14)

Figure 30.8 Updated JSP with an HTML form.

Header (h1) element Paragraph (p) element HTML menu control

(select element)

"submit" button (^input element of type "submit")

(15)

Page

Figure 30.9 Adding a title to bookInformation.jsp.

(16)

Figure 30.10 Adding the header that will specify the book title.

Adding an h1

header element

(17)

Page (Cont.)

Figure 30.11 Adding the img element that will specify the book’s cover.

• img element

— src attribute

— alt attribute

Adding an image to the JSP

(18)

Figure 30.12 Adding the authors paragraph.

Adding the authors paragraph

(19)

Page (Cont.)

Figure 30.13 Adding the price paragraph.

Adding the price paragraph

(20)

Figure 30.14 Adding the ISBN paragraph.

Adding the ISBN paragraph

(21)

Page (Cont.)

Figure 30.15 Adding the edition paragraph.

Adding the edition paragraph

(22)

Figure 30.16 Adding the copyright year paragraph.

Adding the copyright year paragraph

(23)

Page (Cont.)

Figure 30.17 Adding the description paragraph.

Adding the description paragraph

(24)

Figure 30.18 Adding the Book List hyperlink.

Adding a hyperlink

• Hyperlink

– a (anchor) element

– href (hyperlink reference) attribute

– relative URL

(25)

Page

Figure 30.19 Displaying the bookInformation.jsp and linking to books.jsp.

Result of img

element at line 21

Result of hyperlink at line 42

(26)

 2004 Prentice Hall, Inc.

7 

8 <head>

9

10 

11 <title>Book List</title>

12 </head>

13

14 

15 <body>

16 <h1>Available Books</h1>

17

Adding an h1

header element

(27)

books.jsp (2 of 2)

20 21 <p>Select a book from the list and click the button to 22 view the selected book's information</p>

23

24 

25 <select name = "bookTitle">

26 27 </select>

28 29 

30 <p><input type = "submit" value = "View Information"></p>

31 32 </form>

33 </body>

34 </html>

Adding an HTML form that contains a paragraph, a drop- down list and a

"submit" button

(28)

7 

8 <head>

9

10 

11 <title>Book Information</title>

12 </head>

13

14 

15 <body>

16

17 

18 <h1></h1>

19

20 

21 <img src = "" alt = "">

22

23 

24 <p>Authors: </p>

25

Adding an h1

header element

Adding authors paragraph

Adding an image

(29)

bookInformation.jsp (2 of 2)

28

29 

30 <p>ISBN: </p>

31

32 

33 <p>Edition: </p>

34

35 

36 <p>Copyright Year: </p>

37

38 

39 <p>Description: </p>

40

41 

42 <p><a href = "books.jsp">Book List</a></p>

43

44 </body>

45 </html>

Adding price paragraph Adding ISBN paragraph

Adding edition paragraph

Adding copyright year paragraph Adding description paragraph

Adding a hyperlink to books.jsp