Creating JSP Pages

Okay, raise your hand if you just read the main page and skipped right to this one, because it lets you actually do something? If you did, then you're just like me! Give me something to do first, and I'll read why it works the way it does later. :-)

This topic is going to take you through the process of writing your first JSP pages. Before you can do this, though, you will need to set up the Tomcat web server on your machine, unless you already have that or another web server installed and running. This site assumes that you are using the Tomcat web server. If you are using a different server, you will need to modify the instructions to compensate.

First off, let me break something to you...You're not going to do a “hello world!” example. I know it breaks a long tradition, but “hello world!” is just not going to show you any of the cool stuff that JSP can do for online help. So, instead, you will set up two pages that let you conditionalize some content for your users.

The reason I have chosen to show you how to set up these page is that it is very similar to the first JSP page that I ever wrote. I had a set of steps that was 27 steps long, because it had all of the “if you're an administrator, do this step” kind of stuff in there. It was trying to be everything to everybody. And, it was one of the core pages for the product...it had to do with scheduling an appointment in a patient scheduling system. So, you see, if we started users out with a 27-step procedure, we would have had mass rioting in the streets.

We won't work on a 27-step procedure for this example, but the steps we will work on differ for different types of users. We will be customizing a procedure that takes users through Building a Better Triscuit. (For those of you who don't know what a Triscuit is, click here. This link takes you away from this site.)

This section of the web site has four sections, each of which builds on the previous section. If, at some point, you get an error when displaying the pages you are working on in your web browser, or the page doesn't act how it is supposed to, retrace your steps through the procedures. If you are unable to find the source of the problem, email me. Attach a zipped up copy of the files you have created so far (do not send them unzipped; my mail provider will not allow .jsp file attachments), and let me know at what step things stopped working as they should.

To create your first JSP page:

1. First, download statichtmlpages.zip. I have created the pages in this zip file for you to get started quickly. Create the directory <Tomcat installation directory>\webapps\triscuit, and unzip the content of statichtmlpages.zip into that directory.

   The file JSP.css is a cascading style sheet that makes the page look a little nicer.

2. Open triscuit.jsp and _triscuit.jsp in a text editor and view the HTML code. Note that they are pretty simple, straight-forward HTML pages.

3. If your web server is running, restart it. If it is not running, start it.

4. Point a web browser window to the following URL: http://localhost:8080/triscuit/triscuit.jsp.

5. The page should load in your web browser window. If it does not, review Setup the JSP Environment to make sure that you performed all of the required steps.

6. Click the Submit button on the page.

7. The page _triscuit.jsp displays. All of the possible steps for building a better Triscuit are included. In this tutorial, you will be customizing this page so that only the items that match the selections made on the previous page (triscuit.jsp) are displayed.

   Next, you will start working with the _triscuit.jsp topic. This is the page that displays the customized content after the user selects options on the first page (triscuit.jsp), and is the only page that will have JSP code in it. In fact, you can rename the first topic triscuit.html, if you want to, because it has no JSP functionality in it at all.

8. Open the file _triscuit.jsp in your HTML authoring environment, and set it to show raw HTML code.

9. Look for the following code:

   <li><p>Philadelphia Whipped Cream Cheese (this is sold in tubs, not blocks)</p></li>

10. To make it so that this bulleted item only displays when the Cream cheese radio button is selected, add the following code (without adding any hard returns):

    <% if (request.getParameter("softcheese") != null) { %><% if (request.getParameter("softcheese").equals("creamcheese")) { %><li><p>Philadelphia Whipped Cream Cheese (this is sold in tubs, not blocks)</p></li><% } %><% } %>

    The first portion you added:

    <% if (request.getParameter("softcheese") != null) { %>

    checks to see if the page that called this page (in this case, triscuit.jsp) has a form element named “softcheese.” You must always make sure that a form element exists before you check to see what its value is. If you do not check for its existence first, then if the page is loaded directly (someone types in http://www.yourdomainname.com/_triscuit.jsp), the page will display an error.

    With that portion added, if someone gets to this page without going through the triscuit.jsp page first, then everything between that segment and the matching closing closing brace (the last bit of code you added) will be skipped.

    The second portion you added:

<% if (request.getParameter("softcheese").equals("creamcheese")) { %>

checks to see if the value of the element is “creamcheese.” If it is, then the content between it and its matching closing brace (the next to the last bit of code you entered) will be displayed. If it is not, then it will not be displayed.

11. Save the changes you made to the file.

12. Reload your web browser.

    You will be prompted with the following message:



13. Click Retry.

    Note that this time, the first bullet in the list does not display (unless you had selected the Cream Cheese radio button when you first loaded the page triscuit.jsp, earlier in these steps).

14. Go through the items in the bulleted list, and add the same code that you added to this HTML, but substituting the values “softcheese” and “creamcheese” with the following values (make sure to match the capitalization):

    List Item	HTML Element Name	Value
    Neufchatel cheese	softcheese	neufchatel
    Cheddar cheese	yellowcheese	cheddar
    Colby cheese	yellowcheese	colby
    American cheese	yellowcheese	american
    Mozzarella cheese	whitecheese	mozzarella
    Monterey Jack cheese	whitecheese	montereyJack
    Provolone cheese	whitecheese	provolone

    For example, to replace the values in the code you entered earlier with the values for American cheese, you would end up with this snippet of code:

    <% if (request.getParameter("yellowcheese") != null) { %><% if (request.getParameter("yellowcheese").equals("american")) { %><li><p>Your preferred American cheese</p></li><% } %><% } %>

    Or, you can download a file with all of that code already added.

15. Save your changes.

16. Reload your browser.

    You will find that only those elements that you selected on the previous page show up on this page.

17. Feel free to go back to the previous page, select some cheeses, and click Submit, to test the functionality of the page.

    Next, you will add code to conditionalize the other elements in the bulleted list.