1. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 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. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 2 Objective 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. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 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. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 4 30.1 Analyzing the Bookstore Application (Cont.)

5. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 5 30.1 Analyzing the Bookstore Application (Cont.)

6. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 6 30.2 Creating JavaServer Pages JavaServer pages look like HTML –Include HTML markup and JSP code

7. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 7 30.3 Creating the books.jsp Page HTML comment – HTML markup –Elements –Start tag –End tag –title element –head element

8. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 8 30.3 Creating the books.jsp Page (Cont.) Figure 30.2 Adding the title to the JSP. Setting the JSP’s title

9. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 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. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 10 30.3 Creating the books.jsp Page (Cont.) Figure 30.4 Creating a form in the JSP. Creating an HTML form form element

11. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 11 30.3 Creating the books.jsp Page (Cont.) Figure 30.5 Creating a paragraph text in the JSP. Creating a paragraph of text paragraph tags ( and ) p element

12. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 12 30.3 Creating the books.jsp Page (Cont.) Figure 30.6 Creating an empty select statement in the JSP. Creating an HTML menu control select element (HTML menu control) —name attribute

13. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 13 30.3 Creating the books.jsp Page (Cont.) Figure 30.7 Adding the "submit" button to the JSP. input element —type attribute —"submit" button —value attribute Adding a " submit " button

14. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 14 30.3 Creating the books.jsp Page (Cont.) Figure 30.8 Updated JSP with an HTML form. Header ( h1 ) elementParagraph ( p ) elementHTML menu control ( select element) " submit " button ( input element of type " submit " )

15. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 15 30.4 Creating the bookInformation.jsp Page Figure 30.9 Adding a title to bookInformation.jsp. Setting the JSP’s title

16. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 16 30.4 Creating the bookInformation.jsp Page (Cont.) Figure 30.10 Adding the header that will specify the book title. Adding an h1 header element

17. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 17 30.4 Creating the bookInformation.jsp 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. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 18 30.4 Creating the bookInformation.jsp Page (Cont.) Figure 30.12 Adding the authors paragraph. Adding the authors paragraph

19. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 19 30.4 Creating the bookInformation.jsp Page (Cont.) Figure 30.13 Adding the price paragraph. Adding the price paragraph

20. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 20 30.4 Creating the bookInformation.jsp Page (Cont.) Figure 30.14 Adding the ISBN paragraph. Adding the ISBN paragraph

21. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 21 30.4 Creating the bookInformation.jsp Page (Cont.) Figure 30.15 Adding the edition paragraph. Adding the edition paragraph

22. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 22 30.4 Creating the bookInformation.jsp Page (Cont.) Figure 30.16 Adding the copyright year paragraph. Adding the copyright year paragraph

23. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 23 30.4 Creating the bookInformation.jsp Page (Cont.) Figure 30.17 Adding the description paragraph. Adding the description paragraph

24. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 24 30.4 Creating the bookInformation.jsp Page (Cont.) Figure 30.18 Adding the Book List hyperlink. Adding a hyperlink Hyperlink –a (anchor) element –href (hyperlink reference) attribute –relative URL

25. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 25 30.4 Creating the bookInformation.jsp 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. All rights reserved. Outline 26 books.jsp (1 of 2) 1 2 3 4 5 6 7 8 9 10 11 Book List 12 13 14 15 16 Available Books 17 Setting the JSP’s titleAdding an h1 header element

27.  2004 Prentice Hall, Inc. All rights reserved. Outline 27 books.jsp (2 of 2) 18 19 20 21 Select a book from the list and click the button to 22 view the selected book's information 23 24 25 26 27 28 29 30 31 32 33 34 Adding an HTML form that contains a paragraph, a drop- down list and a " submit " button

28.  2004 Prentice Hall, Inc. All rights reserved. Outline 28 bookInformation.jsp (1 of 2) 1 2 3 4 5 6 7 8 9 10 11 Book Information 12 13 14 15 16 17 18 19 20 21 22 23 24 Authors: 25 Setting the JSP’s titleAdding an h1 header element Adding authors paragraph Adding an image

29.  2004 Prentice Hall, Inc. All rights reserved. Outline 29 bookInformation.jsp (2 of 2) 26 27 Price: 28 29 30 ISBN: 31 32 33 Edition: 34 35 36 Copyright Year: 37 38 39 Description: 40 41 42 Book List 43 44 45 Adding price paragraph Adding ISBN paragraph Adding edition paragraph Adding copyright year paragraph Adding description paragraph Adding a hyperlink to books.jsp