Chapter 2 Tutorials

Simple

1. Use the NetBeans project that was created in the Chapter 1 Tutorials.
2. In the Project tab, open the Web Pages folder.
   1. Create a new folder named ch2.
   2. Create a subfolder of ch2 named TwoPages.
   3. Create a subfolder of TwoPages named Simple.
      1. Create a new JSP named Edit.jsp.
         1. Copy the contents of First.jsp into this file.
         2. Modify the form so that it sends its data to the confirm page.
      2. Create a new JSP named Confirm.jsp.
         1. Add the standard HTML tags: html, head, title, body.
         2. Add the tags for validating the page: DOCTYPE, meta for content-type.
         3. Display the value of the data that was sent to this page.
   4. Modify the index.jsp file already exists in the Web Pages folder.
      1. This is the welcome page for the application.
      2. Modify the page by adding a hypertext link to the Edit.jsp file.
3. Run the project.
   1. The index.jsp page will appear in the browser.
   2. Click the link for the edit page.
   3. Enter some text in the text element.
   4. Click the submit button.
   5. Notice that the text that was entered has been sent to the confirm page.
   6. Notice that the form data is in the query string.
4. Validate the the Edit.jsp and Confirm.jsp files contain valid HTML.

Two Directions

1. In the TwoPages folder, create a page named Edit.jsp.
   1. Copy the contents of the Edit.jsp from the Simple tutorial.
   2. Be sure that the text element is initialized with the corresponding data from the query string.
2. In the TwoPages folder, create a page named Confirm.jsp.
   1. Copy the contents of the Confirm.jsp from the Simple tutorial.
   2. Add a form with a hidden field and a submit button.
   3. The form should send its data to the edit page.
   4. Initilialize the hidden field with the data from the text element in the query string.
   5. Be sure that the name of the hidden field is the same as the name of the text element in the edit page.
3. Modify the index.jsp file already exists in the Web Pages folder.
   1. This is the welcome page for the application.
   2. Modify the page by adding a hypertext link to the new Edit.jsp file.
4. Run the project.
   1. The index.jsp page will appear in the browser.
   2. Click the link for the new edit page.
      1. Enter some text in the text element.
      2. Click the submit button.
   3. The data will appear in the confirm page.
      1. Notice that the form data is in the query string.
      2. Notice that the data from the text element is not visible.
      3. Click the edit button.
   4. The edit page will appear.
      1. Notice that the form data is in the query string.
      2. Notice that the data from the query string has been used to initialize the text element.

Three Pages

1. Create a new folder named ThreePages in the ch2 folder.
   1. Create a new JSP named Process.jsp.
      1. Copy the contents of the confirm page from the Simple tutorial.
      2. This page only echoes the data from the query string, there is no form in it.
   2. Copy the edit page from the Two Directions tutorial.
   3. Copy the confirm page from the Two Directions tutorial.
      1. Add a new form to the page.
         1. The form should send its data to the process page.
         2. Add a hidden field for the data from the text element.
         3. Add a submit button named Process.
      2. There are now two forms in this page.
         1. Each form send data to a different page.
         2. Each form has a hidden field for the data.
2. Modify the index.jsp file already exists in the Web Pages folder.
   1. This is the welcome page for the application.
   2. Modify the page by adding a hypertext link to the new Edit.jsp file.
3. Run the project.
   1. The index.jsp page will appear in the browser.
   2. Click the link for the new edit page.
      1. Enter some text in the text element.
      2. Click the submit button.
   3. The data will appear in the confirm page.
      1. Notice that the form data is in the query string.
      2. Notice that the data from the text element is not visible.
      3. Click the edit button.
   4. The edit page will appear.
      1. Notice that the form data is in the query string.
      2. Notice that the data from the query string has been used to initialize the text element.
      3. Click the confirm button.
   5. The data will appear in the confirm page.
      1. Notice that the form data is in the query string.
      2. Notice that the data from the text element is not visible.
      3. Click the process button.
   6. The process page will appear.
      1. Notice that the form data is in the query string.
      2. The data from the query string has been displayed in the page.

JSP Controller

1. Create a new folder named jspController in the ch2 folder.
   1. Copy the edit, confirm and process pages from the Three Pages tutorial.
   2. Create a new JSP named Controller.jsp.
      1. Do not add any HTML tags to his page.
      2. Add a block of Java code, inside the special JSP tags for Java code.
         1. Add a nested if-else block that translates button names into JSP addresses.
            1. If the confrim button is in the query string, then the address should be for the confirm page.
            2. If the process button is in the query string, then the address should be for the process page.
            3. The default address should be for the edit page, since this is the first page that should appear when the application is accessed first.
            4. The name of the buttons must agree with the name of the buttons that are in the pages; button names are case sensitive.
            5. The name in the address must agree with the name of the pages; addresses are case sensitive.
         2. Add the statements that will forward the request and response to the correct address.
   3. Modify the edit page.
      1. Modify the form so that it sends its data to the controller.
   4. Modify the confirm page.
      1. Remove the second form from the page; there should only be one form in this page.
      2. The form will send its data to the controller.
      3. The form will have one hidden field for the data in the query string.
      4. The form will have two buttons with different names.
         1. One button will have the name Edit.
         2. One button will have the name Process.
2. Modify the index.jsp file already exists in the Web Pages folder.
   1. This is the welcome page for the application.
   2. Modify the page by adding a hypertext link to the Controller.jsp file.
   3. Do not link to the edit page; all accesses should be to the controller.
3. Run the project.
   1. The index.jsp page will appear in the browser.
   2. Click the link for the controller page.
      1. The edit page will appear, but the URL still shows the controller.
      2. Enter some text in the text element.
      3. Click the submit button.
   3. The data will appear in the confirm page.
      1. The confirm page will appear, but the URL still shows the controller.
      2. Notice that the form data is in the query string.
      3. Notice that the data from the text element is not visible.
      4. Click the edit button.
   4. The edit page will appear.
      1. The edit page will appear, but the URL still shows the controller.
      2. Notice that the form data is in the query string.
      3. Notice that the data from the query string has been used to initialize the text element.
      4. Click the confirm button.
   5. The data will appear in the confirm page.
      1. The confirm page will appear, but the URL still shows the controller.
      2. Notice that the form data is in the query string.
      3. Notice that the data from the text element is not visible.
      4. Click the process button.
   6. The process page will appear.
      1. The process page will appear, but the URL still shows the controller.
      2. Notice that the form data is in the query string.
      3. The data from the query string has been displayed in the page.

Servlet Controller

1. Open the Source Packages folder in the NetBeans project.
   1. Create a new package named ch2.servletController.
      1. Right-click the folder.
      2. Select New.
      3. Select Java Pacakge.
      4. Enter the name ch2.servletController.
   2. Add a class to the package.
      1. Right-click the package.
      2. Select New.
      3. Select Java Class.
      4. Enter the name Controller. Do not add an extension.
   3. Modify the class to make it a servlet.
      1. Extend the class from HttpServlet.
         1. A yellow light bulb will appear at the left of the class definition line.
         2. It is warning you that Java cannot find HttpServlet.
         3. Click the light bulb and select the Add import option.
      2. Add a doGet method.
         1. Add the parameters for method; add imports as needed.
         2. Throw the required exceptions; add imports as needed.
         3. If you added the method correctly, then a yellow light bulb will appear.
            1. It is warning you that you have created a method that hides a similar method in the base class; this was the intention.
            2. Click the light bulb and add the override annotation.
      3. Copy the contents of the controller page from the jspController tutorial into the body of the doGet method. (Better yet, WRITE the code!)
         1. Do not copy the opening and closing JSP tags.
         2. No other changes need to be made to the code.
2. Open the Configuration Files folder.
   1. If you do not see a web.xml, then you must add one.
      1. Click the File menu
      2. Click the New File menu
      3. Click the Web category in the left pane
      4. Scroll to the bottom of the right pane and select
         Standard Deployment Descriptor (web.xml)
   2. Right-click the web.xml file.
   3. Select Edit.
   4. Add a servlet definition for the controller.
      1. The fully qualified name is a combination of the package and the name of the class.
      2. The fully qualified name is
         ch2.servletController.Controller.
   5. Add a servlet mapping for the controller.
      1. Use the same name as was used in the servlet definition.
      2. Use the URL pattern
         /ch2/servletController/Controller.
      3. The leading / in the pattern refers to the root of the web application, not the root of the server.
         1. The complete path from the root of the server would have to include the name of the web application.
         2. Do not include the name of the web application in the URL pattern.
3. Create a new folder named servletController in the ch2 folder of Web Pages.
   1. Copy the edit, confirm and process pages from the jspController tutorial.
   2. Modify the form in the edit page so that it send its data to the controller.
      1. The controller is located at the URL that was defined in the web.xml file: /ch2/servletController/Controller
      2. The path to the controller is /ch2/servletController, which is the same as the current path.
      3. Use a relative reference for the controller.
         1. Change the action in the form to "Controller".
         2. Do not include an extension.
         3. This indicates that the full path to the controller is the current path followed by Controller.
         4. The current path is /ch2/servletController, so the actual path to the controller is /ch2/servletController/Controller, which agrees with the URL pattern in the web.xml file.
      4. Relative references are used as much as possilbe.
         1. The key to the use of relative references is that the controller can be found at the location /ch2/servletController/Controller.
         2. The JSPs were placed in the folder /ch2/servletController/ because that is the path that was used in the URL pattern for the controller.
         3. It is the URL pattern in the web.xml that determines where the JSPs are located.
4. Modify the index.jsp file already exists in the Web Pages folder.
   1. This is the welcome page for the application.
   2. Modify the page by adding a hypertext link to the controller.
      1. Use the value from the URL pattern in the web.xml file, but remove the leading /.
      2. The leading / can be removed, since the index.jsp file is in the root of the web application and the leading slash in the URL pattern refers to the root of the web application.
   3. Do not link to the edit page; all accesses should be to the controller.
5. Run the project.
   1. The index.jsp page will appear in the browser.
   2. Follow the same steps as for the jspController tutorial.