© Copyright 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

© Copyright 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.

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

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

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

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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Creating the books.jsp Page (Cont.) Figure 30.4 Creating a form in the JSP. Creating an HTML form form element

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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 " )

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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Creating the bookInformation.jsp Page (Cont.) Figure Adding the img element that will specify the book’s cover. img element —src attribute —alt attribute Adding an image to the JSP

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Creating the bookInformation.jsp Page (Cont.) Figure Adding the authors paragraph. Adding the authors paragraph

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

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

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

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

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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Creating the bookInformation.jsp Page Figure Displaying the bookInformation.jsp and linking to books.jsp. Result of img element at line 21 Result of hyperlink at line 42

 2004 Prentice Hall, Inc. All rights reserved. Outline 26 books.jsp (1 of 2) Book List Available Books 17 Setting the JSP’s titleAdding an h1 header element

 2004 Prentice Hall, Inc. All rights reserved. Outline 27 books.jsp (2 of 2) Select a book from the list and click the button to 22 view the selected book's information Adding an HTML form that contains a paragraph, a drop- down list and a " submit " button

 2004 Prentice Hall, Inc. All rights reserved. Outline 28 bookInformation.jsp (1 of 2) Book Information Authors: 25 Setting the JSP’s titleAdding an h1 header element Adding authors paragraph Adding an image

 2004 Prentice Hall, Inc. All rights reserved. Outline 29 bookInformation.jsp (2 of 2) Price: ISBN: Edition: Copyright Year: Description: Book List Adding price paragraph Adding ISBN paragraph Adding edition paragraph Adding copyright year paragraph Adding description paragraph Adding a hyperlink to books.jsp