Goals

To prepare you for Lab 3, at the completion of this in-class work, you should be able to

• Install and run Tomcat
• Set up Tomcat for use within Eclipse
• Know the basics of using Eclipse to develop web applications
• Create basic servlets, deploy them in Tomcat, and access them from a web browswer.

Objective: Set Up

• Make a directory in your home directory (not your public_html directory) named cs335

Objective: Installing Tomcat

For this objective, we will install a Web application server, specifically Tomcat.

1. Copy /csdept/local/courses/cs335/handouts/apache-tomcat-8.0.33.tar.gz OR go to the Apache Tomcat homepage, click on the link for Tomcat 8 under the Download sidebar.
   Scroll down to 8.0.33, get the Binary Distribution for Core with the extension tar.gz. Put it into your cs335 directory.
2. Move the tar.gz file into your cs335 directory, if you didn't in the last step.
3. Extract the downloaded file using the command
   tar xfz apache-tomcat-8.0.33.tar.gz
   If you list the contents of your directory, you will see a directory named apache-tomcat-8.0.33
4. Delete apache-tomcat-8.0.33.tar.gz after it was extracted.

Objective: Running Tomcat

1. Go into your cs335/apache-tomcat-8.0.33 directory.
2. To start the web server (by default listening to port 8080), run the command
   bin/startup.sh
3. Open another browser tab or window and enter the URL http://localhost:8080/.

   You should see an Apache Tomcat welcome page. This page is named index.jsp and is located in apache-tomcat-8.0.33/webapps/ROOT/

4. To shutdown the web server, run the command
   bin/shutdown.sh
5. If you reload the URL http://localhost:8080/, you should get an "Unable to Connect" error or a blank page.

Objective: Setting Up Tomcat for Use in Eclipse

Eclipse has special development tools for web applications.

Start Eclipse and create a new workspace (perhaps in your cs335 directory, in a new directory called workspace).

Create a new Server to run your projects on.

1. Under File → New → Other. Then, select Server, then Server.
   Click Next.

   In the wizard, you should now see a list of different types of servers.

2. Select Apache → Tomcat v8.0 Server, then click "Next".
3. Browse for the Tomcat installation directory (which should be /home/students/yourusername/cs335/apache-tomcat-8.0.33).
4. Click "Finish".

Objective: Setting Up a New Dynamic Web Project

1. Under File → New → Dynamic Web Project.
2. Name the project: FirstServlets
3. Make sure the Target Runtime is "Apache Tomcat v8.0"; click the checkbox for "generate web.xml" when appropriate.
4. Click "Finish".

The content of the project is:

• JAX-WS Web Services - for use with XML Web Services
• Deployment Descriptor - describes the deployment of our web application
• Java Resources - contains the source directory for your Java code.
• JavaScript Resources - the source directory for your JavaScript code.
• build - where the class files are generated
• WebContent - contains our web application's HTML and CSS files and information about our web application in the META-INF and WEB-INF directories.

Objective: Create an HTML File in Eclipse

Create an index.html file for this web application.

1. Right click on "FirstServlets" and select New → HTML File.
2. This file should be in the FirstServlets/WebContent directory.
3. Name the file "index.html".
4. Select "Finish".

index.html should have opened in the editting window. index.html should also be in your WebContent directory in the Project Explorer.

Spiffy up the index.html file

1. Modify the title to be "My First Servlets"
2. Add the heading "My First Servlets" into the body of the page.
   Notice the auto-complete of the closing tag. This will be a little annoying at first until you get used to it, and then you'll be thankful that you don't need to remember to close tags.

Objective: Run Application on Tomcat

1. Right-click on "FirstServlets" and select "Run As" then "Run on Server".
2. Select the "Tomcat v8.0" from list.
3. Click Next.
4. Make sure FirstServlets is on the right side, meaning that the server is configured to use it.
5. Click "Finish".

You'll see things happening in the background and a new tab will pop up in Eclipse and maybe in Firefox. The tab should be your newly created index.html page (although the word index.html may not show up in the URL.)

Eclipse's web browser is fairly simple. You can also look at the web page within Chrome or Firefox by looking at the URL:
http://localhost:8080/FirstServlets

Now, go back and modify your index.html page to include a stylesheet.

1. Select New → Other → Web → CSS.
2. Name the style sheet first.css, put it in FirstServlets/WebContent and select "Finish".
3. Add the style:
   

   body {
         font-family: sans-serif;
         font-size: 10pt;
         color: fuchsia;
   }

4. Save the stylesheet.
5. Modify your index.html page to use the stylesheet:
   <link rel="stylesheet" type="text/css" href="first.css"/>
   inside the <head> tag
6. Reload your web page in your browser. Hopefully, your style changes will be reflected in the browser (a pinky-purple sans-serif font). If not, wait until you've added more content to the page.

Objective: Creating a Form

1. Create a new HTML page named form.html, with the same format as before.
2. Fill in a title and heading for the form.
3. Add the following form to your page.
   

       <form action="SimpleServlet" method="get">
         <p>This submits a simple GET request to the server: 
         <input type="submit" value="Submit" />
         </p>
       </form>
   

4. Add a link to this form from your index.html page

     <h2>Forms</h2>
   
     <ul>
       <li><a href="form.html">First Form</a></li>
     </ul>
   

Objective: Creating Your First Servlet

First, create the servlet file.

1. Right click on FirstServlets, and select New → Servlet.
2. The folder should should be "/FirstServlets/src"
3. The Java package should be "servlets"
4. The Class name should be "SimpleServlet"
5. The Superclass name should already be filled in as "javax.servlet.http.HttpServlet"
6. Select "Next" a few times to see what some of your options are for in the future and finally select "Finish".

Next, fill in the code for doGet method of the servlet from this file.

You may need to fix some compiler errors, such as importing the java.io.* classes. Follow Eclipse's recommendations.

1. Reload your FirstServlets index page in your browser. You should now see the updated text.
2. Click on the "Form" link
3. Click on the button in your form.
4. You should now see the response from your first servlet!

Note: At this point, we're not worrying too much about how the response displays. We can add style sheets later.

Objective: Creating a Post Form

You just generated a GET request using a form. Now, generate a POST request with a form.

1. In form.html, copy the form above, but modify the second form to use a POST method.
2. Update other text to reflect that this form generates a POST request
3. Bring up your index.html page in your browser.
4. Click on the form link.
5. Press the post button on the form.

What happened? You don't have anything filled in to the doPost method yet so nothing is generated and returned to the user.

Add the following code to your servlet's doPost method:

response.sendError(HttpServletResponse.SC_NOT_IMPLEMENTED, "Sorry, silly!");

What kind of response page do you get back?

You can send back different error messages by using fields defined in the HttpServletResponse interface.

---

PAUSE FOR LECTURE

---

Objective: Creating a Survey Servlet

The purpose of this servlet is to keep track of survey results in a file and display the results to a user after they've taken the survey. This servlet's behavior changes depending on the user's input.

1. Create a new servlet named SurveyServlet in the servlets package.
2. Then, replace the servlet's code with the code from this servlet.
3. Examine the code to make sure you understand how it works.
4. Copy this html document into your WebContent directory.
5. Add a link to the pet.html document from your index.html page.
6. Test the SurveyServlet using the pet.html form.
If you get a 404 error message, you may need to restart your server.

Click on the Server tab, click on the server, then press the play button to restart.

7. Now, modify SurveyServlet so that the table has column headings for Animal Name, % of Responses, and Number of Responses

Objective: Creating a Servlet that Displays Request Parameters

Next, you're going to create a servlet that prints out the data that it receives.

1. Copy this file in your FirstServlets/WebContent directory.
2. Create a link to for_params.html on your index.html page.
3. Next, create a new servlet in the servlets package with the name ParametersServlet.
4. Start filling in the doGet method with some of the code, as appropriate, from the SimpleServlet to generate an HTML document
5. Add code to print out the data passed in, in the format:
   parametername: values

   For example, the output might look something like

   entree: crabcakes
   genre: action romance
   comments:
   member: yes

   Use appropriate methods from the HttpServletRequest class.

6. Test your servlet using the for_params.html form. Test it multiple times, ensuring that the output is what you expect. View the HTML source too, to see if it's what you thought.

   For example, what happens when you don't select any films? What happens if you select a bunch?

   Demonstrate that your servlet is working to me before moving on.

To make the servlet behave the same way to both post and get requests, modify the doPost method to call the doGet method with the appropriate arguments.

Then, modify for_params.html to perform a POST request instead of a GET request. Test that the servlet's behavior is the same.

You are now ready to begin Lab 3!