Servlets: Servlet / Web Browser Communication I Ethan Cerami New York University 8/27/2019 Servlet / Web Browser Communication I

Servlet / Web Browser Communication I Road Map Overview of Browser/Servlet Communication Reading Form Data from Servlets Example 1: Reading three parameters Example 2: Reading all parameters Case Study: Resume Posting Service 8/27/2019 Servlet / Web Browser Communication I

Overview of Browser/Servlet Communication 8/27/2019 Servlet / Web Browser Communication I

Servlet / Web Browser Communication I Overview This lecture is the first in two lectures that discuss the interaction between web browsers and servlets. Web Browser Request Web Server Response 8/27/2019 Servlet / Web Browser Communication I

Servlet / Web Browser Communication I Client Request Data When a user submits a browser request to a web server, it sends two categories of data: Form Data: Data that the user explicitly typed into an HTML form. For example: registration information. HTTP Request Header Data: Data that is automatically appended to the HTTP Request from the client. For example: cookies, browser type, browser IP address. This lecture examines Form Data; the next lecture examines HTTP Data. 8/27/2019 Servlet / Web Browser Communication I

Servlet / Web Browser Communication I Form Data 8/27/2019 Servlet / Web Browser Communication I

Servlet / Web Browser Communication I Form Data Based on our understanding of HTML, we now know how to create user forms. We also know how to gather user data via all the form controls: text, password, select, checkbox, radio buttons, etc. Now, the question is: if I submit form data to a servlet, how do I extract this form data? Figuring this out forms the basis of creating interactive web applications that respond to user requests. 8/27/2019 Servlet / Web Browser Communication I

Reading Form Data from Servlets The HttpServletRequest object contains three main methods for extracting form data: getParameter(): used to retrieve a single form parameter. getParameterValues(): used to retrieve a list of form values, e.g. a list of selected checkboxes. getParameterNames(): used to retrieve a full list of all parameter names submitted by the user. We will examine each of these and then explore several examples. 8/27/2019 Servlet / Web Browser Communication I

Servlet / Web Browser Communication I Reading Form Data All these methods work the same way regardless of whether the browser uses HTTP GET or HTTP POST. Remember that form elements are case sensitive. Therefore, “userName” is not the same as “username.” 8/27/2019 Servlet / Web Browser Communication I

getParameter() Method Used to retrieve a single form parameter. Possible return values: String: corresponds to the form parameter. Empty String: parameter exists, but has no value. null: parameter does not exist. 8/27/2019 Servlet / Web Browser Communication I

getParameterValues() Method Used to retrieve multiple form parameters with the same name. For example, a series of checkboxes all have the same name, and you want to determine which ones have been selected. Returns an Array of Strings. An array with a single empty string indicates that the form parameter exists, but has no values. null: indicates that the parameter does not exist. 8/27/2019 Servlet / Web Browser Communication I

getParameterNames() method Returns an Enumeration object. By cycling through the enumeration object, you can obtain the names of all parameters submitted to the servlet. Note that the Servlet API does not specify the order in which parameter names appear. 8/27/2019 Servlet / Web Browser Communication I

Example 1: Reading three explicit parameters 8/27/2019 Servlet / Web Browser Communication I

Servlet / Web Browser Communication I Example 1 Our first example consists of one HTML page, and one servlet. The HTML page contains three form parameters: param1, param2, and param3. The Servlet extracts these specific parameters and echoes them back to the browser. Before we examine the code, let’s try it out: http://ecerami.com/applied_fall_2000/examples/servlets/ThreeParamsForm.html 8/27/2019 Servlet / Web Browser Communication I

Servlet / Web Browser Communication I <HTML> <HEAD> <TITLE>Collecting Three Parameters</TITLE> </HEAD> <BODY BGCOLOR="#FDF5E6"> <H1 ALIGN="CENTER">Collecting Three Parameters</H1> <FORM ACTION="/servlet/coreservlets.ThreeParams"> First Parameter: <INPUT TYPE="TEXT" NAME="param1"><BR> Second Parameter: <INPUT TYPE="TEXT" NAME="param2"><BR> Third Parameter: <INPUT TYPE="TEXT" NAME="param3"><BR> <CENTER> <INPUT TYPE="SUBMIT"> </CENTER> </FORM> </BODY> </HTML> 8/27/2019 Servlet / Web Browser Communication I

Servlet / Web Browser Communication I package coreservlets; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; /** Simple servlet that reads three parameters from the * form data. */ public class ThreeParams extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); String title = "Reading Three Request Parameters"; Continued…. 8/27/2019 Servlet / Web Browser Communication I

Servlet / Web Browser Communication I out.println(ServletUtilities.headWithTitle(title) + "<BODY BGCOLOR=\"#FDF5E6\">\n" + "<H1 ALIGN=CENTER>" + title + "</H1>\n" + "<UL>\n" + " <LI><B>param1</B>: " + request.getParameter("param1") + "\n" + " <LI><B>param2</B>: " + request.getParameter("param2") + "\n" + " <LI><B>param3</B>: " + request.getParameter("param3") + "\n" + "</UL>\n" + "</BODY></HTML>"); } 8/27/2019 Servlet / Web Browser Communication I

Example 2: Reading all Parameters 8/27/2019 Servlet / Web Browser Communication I

Servlet / Web Browser Communication I Example 2 Example 1 will only read explicit parameters. Now, let’s look at a Servlet that echoes back all the form parameters you send it. You will probably remember this servlet from our discussions of HTML forms. 8/27/2019 Servlet / Web Browser Communication I

Servlet / Web Browser Communication I Example 2 The Example works by first calling getParameterNames(). By cycling through the returned Enumeration, the servlet can access all form names. For each form name, we call getParameterValues() to extract the form values. By cycling through the returned array of strings, we then print out all the associated values. 8/27/2019 Servlet / Web Browser Communication I

Output a simple HTML table for displaying the form parameters. package coreservlets; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; import java.util.*; public class ShowParameters extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); String title = "Reading All Request Parameters"; out.println(ServletUtilities.headWithTitle(title) + "<BODY BGCOLOR=\"#FDF5E6\">\n" + "<H1 ALIGN=CENTER>" + title + "</H1>\n" + "<TABLE BORDER=1 ALIGN=CENTER>\n" + "<TR BGCOLOR=\"#FFAD00\">\n" + "<TH>Parameter Name<TH>Parameter Value(s)"); Output a simple HTML table for displaying the form parameters. Continued….

Then, iterate through each element within the Enumeration. Enumeration paramNames = request.getParameterNames(); while(paramNames.hasMoreElements()) { String paramName = (String)paramNames.nextElement(); out.print("<TR><TD>" + paramName + "\n<TD>"); String[] paramValues = request.getParameterValues(paramName); if (paramValues.length == 1) { String paramValue = paramValues[0]; if (paramValue.length() == 0) out.println("<I>No Value</I>"); else out.println(paramValue); } else { out.println("<UL>"); for(int i=0; i<paramValues.length; i++) { out.println("<LI>" + paramValues[i]); } out.println("</UL>"); First, use getParameterNames() to retrieve an Enumeration of all form parameters. Then, iterate through each element within the Enumeration. Continued….

Servlet / Web Browser Communication I out.println("</TABLE>\n</BODY></HTML>"); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); doPost calls doGet(). Therefore the servlet will work just as well for HTTP POSTs or GETs. 8/27/2019 Servlet / Web Browser Communication I

Case Study: Resume Posting Service 8/27/2019 Servlet / Web Browser Communication I

Resume Posting Service Our next servlet receives a series of parameters: Name, title, email address, programming languages. Font, font size, etc. Based on these parameters, the user is able to post his/her resume online. Let’s first try it out… 8/27/2019 Servlet / Web Browser Communication I

Cascading Style Sheets The Resume servlet utilizes Cascading Style Sheets (CSS). We never covered CSS when covering HTML. But, we will cover the very basics right now. Let’s begin with a brief description of CSS. 8/27/2019 Servlet / Web Browser Communication I

Servlet / Web Browser Communication I CSS Defined CSS: a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Two Step process for using CSS: Step 1: Create your “styles” Step 2: Apply your styles to your HTML document. Let’s look at an example… 8/27/2019 Servlet / Web Browser Communication I

First, you create your styles Within a <STYLE> tag. <HTML> <BODY> <STYLE TYPE="text/css"> <!-- .HEADING1 { color: blue; font-size: 64px; } .HEADING2 { color: gray; font-size: 22px; --> </STYLE> <SPAN CLASS="HEADING1">Resume Posting Service</SPAN> <P> <SPAN CLASS="HEADING2">Provided by hotcomputerjobs.com</SPAN> </BODY> </HTML> First, you create your styles Within a <STYLE> tag. Then, you apply your styles By using the SPAN tag.

Servlet / Web Browser Communication I Defining Styles Each Style has a name, and a set of properties. For example, the heading1 tag is set to blue, 64 pixels big: .HEADING1 { color: blue; font-size: 64px; } Lots of properties exist: color, font-size, text-align, font-family, etc. 8/27/2019 Servlet / Web Browser Communication I

Servlet / Web Browser Communication I Applying Styles Once you have created your styles, you apply a style to your text via the SPAN tag. For example, to apply the heading1 style: <SPAN CLASS="HEADING1">Resume Posting Service</SPAN> 8/27/2019 Servlet / Web Browser Communication I

Servlet / Web Browser Communication I Stylo-Matic Unfortunately, different browsers interpret CSS slightly differently. And, it therefore turns out to be problematic when developing cross-browser web pages. Let’s try a great little tool that exhibits some of the power of CSS: Stylo-Matic: http://www.builder.com/Authoring/CSS/ss12.html 8/27/2019 Servlet / Web Browser Communication I

Servlet / Web Browser Communication I SubmitResume.java Three major sections to SubmitResume.java Retrieve all the form parameters. Make the style sheet Output the HTML for the resume. We will examine each piece. For the full code, see today’s handout. 8/27/2019 Servlet / Web Browser Communication I

1.Retrieving Form Parameters First, the showPreview() method retrieves the form parameters. If a parameter is missing, we supply a default: String fgColor = request.getParameter("fgColor"); fgColor = replaceIfMissing(fgColor, "BLACK"); String bgColor = request.getParameter("bgColor"); bgColor = replaceIfMissing(bgColor, "WHITE"); 8/27/2019 Servlet / Web Browser Communication I

Servlet / Web Browser Communication I 2. Make the Style Sheet Based on the form parameters, we create an appropriate stylesheet via the makeStyleSheet() method: String styleSheet = "<STYLE TYPE=\"text/css\">\n" + "<!--\n" + ".HEADING1 { font-size: " + heading1Size + "px;\n" + " font-weight: bold;\n" + " font-family: " + headingFont + "Arial, Helvetica, sans-serif;\n" + "}\n" + …. 8/27/2019 Servlet / Web Browser Communication I

Servlet / Web Browser Communication I 3. Output the HTML The showPreview() method outputs SPAN tags plus resume data: … "<CENTER>\n"+ "<SPAN CLASS=\"HEADING1\">" + name + "</SPAN><BR>\n" + "<SPAN CLASS=\"HEADING2\">" + title + "<BR>\n" + "<A HREF=\"mailto:" + email + "\">" + email + "</A></SPAN>\n" + "</CENTER><BR><BR>\n" + 8/27/2019 Servlet / Web Browser Communication I