Chapter 2 Tutorials

Simple

1. Use the project that was created in the Chapter 1 Tutorials.
2. The public files belong in src/main/webapp. If you are using an IDE, it may have an alias for the folder. For instance, in Netbeans, the folder has the name Web Pages.
   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 by adding an action attribute with the value Confirm.jsp.
      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. Java source files belong in the src/main/java folder. An IDE might create an alias for the folder. Netbeans uses the alias Source Packages.
   1. Create a new folder named ch2/servletController in the java folder.
   2. Add a java source file to the folder named Controller.java.
   3. Create a public class and modify it as follows to make it a servlet.
      1. Add an appropriate package statement.
      2. Import the following packages:

         import java.io.IOException;
         import javax.servlet.RequestDispatcher;
         import javax.servlet.ServletException;
         import javax.servlet.http.HttpServlet;
         import javax.servlet.http.HttpServletRequest;
         import javax.servlet.http.HttpServletResponse;
         import javax.servlet.annotation.WebServlet;

      3. Extend the class from HttpServlet.
      4. Add the WebServlet class annotation to the class setting the URL for the controller as "/ch2/servletController/Controller".
      5. Add a doGet method.
         1. Add the parameters for method.
         2. Throw the required exceptions.
      6. 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. Create a new folder named servletController in the src/main/webapp/ch2 folder. This will be the location of the JSPs for the controller.
   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 WebServlet annotation: /ch2/servletController/Controller
      2. The path to the controller is /ch2/servletController, which is the same as the path to the JSPs.
      3. Use a relative reference for the controller, since it has the same path as the path to the JSPs.
         1. Change the action in the form to "Controller".
         2. Do not include an extension. The name agrees with the URL pattern in the annotation.
         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 WebServlet annotation.
      4. Relative references are used as much as possible.
         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.
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 controller.
      1. Use the value from the URL pattern in the WebServlet annotation, 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.
4. Stop the application if it is running.
5. Use the maven commands to delete the old application files and package them again. This will include compiling the servlet:

   mvn clean package

6. Then start the application again.

   mvn tomcat7:run

   1. The index.jsp page will appear in the browser.
   2. Follow the same steps as for the jspController tutorial.