Your First Web Application Using a Servlet

In Chapter 1, you installed the Eclipse Kepler IDE. You will develop your first web application in Eclipse in this section. Specifically, you will use Tomcat 7 both as the HTTP server and as the servlet container. You can install Tomcat 7 by downloading the source distribution of Tomcat as a ZIP file from http://tomcat.apache.org/download-70.cgi.

Start Eclipse and select the Window Preferences menu option to display the Preferences dialog, as illustrated in Figure 2-3.

In the left pane of this dialog, drill down to Java Installed JREs and verify that your previously installed version of JRE8/JDK 8 shows up. If it doesn’t, click the Add button to add a reference to your JDK. Create a Dynamic Web Project by selecting File New Dynamic Web Project, as shown in Figure 2-4. Name the project helloworld, as shown in Figure 2-5.

Click Next, and check “Generate web.xml deployment descriptor,” as shown in Figure 2-6. Later we will see how it is possible to configure the web module without web.xml.

Click Finish, and create a new Java class, as shown in Figure 2-7.

Modify the generated HelloWorld class with the code in Listing 2-1.

Listing 2-1. HelloWorld Servlet

1.package apress.helloworld;
2.
3.import java.io.IOException;
4.import java.io.PrintWriter;
5.
6.import javax.servlet.http.HttpServlet;
7.import javax.servlet.http.HttpServletRequest;
8.import javax.servlet.http.HttpServletResponse;
9.
10.public class HelloWorld extends HttpServlet{
11.
12.protected void doGet(HttpServletRequest request,
13.HttpServletResponse response)
14.{
15.try
16.{
17.response.setContentType("text/html");
18.PrintWriter printWriter = response.getWriter();
19.printWriter.println("<h2>");
20.printWriter.println("Hello World");
21.printWriter.println("</h2>");
22.}
23.catch (IOException ioException)
24.{
25.ioException.printStackTrace();
26.}
27.}
28.
29.}

Modify the web.xml file with the code in Listing 2-2.

Listing 2-2. Web.xml: Deployment Descriptor

1.<?xml version="1.0" encoding="UTF-8"?>
2.<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
3.xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
4.xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
5.id="WebApp_ID" version="3.0">
6.<display-name>helloworld</display-name>
7.<servlet>
8.<servlet-name>HelloWorld</servlet-name>
9.<servlet-class>apress.helloworld.HelloWorld</servlet-class>
10.</servlet>
11.<servlet-mapping>
12.<servlet-name>HelloWorld</servlet-name>
13.<url-pattern>/hello</url-pattern>
14.</servlet-mapping>
15.<welcome-file-list>
16.<welcome-file>index.html</welcome-file>
17.<welcome-file>index.htm</welcome-file>
18.<welcome-file>index.jsp</welcome-file>
19.<welcome-file>default.html</welcome-file>
20.<welcome-file>default.htm</welcome-file>
21.<welcome-file>default.jsp</welcome-file>
22.</welcome-file-list>
23.</web-app>

Now we need to configure HelloWorld servlet as a web module in Tomcat. SelectWindow Show View Servers in the menu bar of Eclipse, as illustrated in Figure 2-8.

On the Servers tab, right-click and add Tomcat 7 as the new server, as shown in Figure 2-9.

Next you will have to define a new server, as illustrated in Figure 2-10.

Now configure the helloworld project by moving the resources to the right in the configured section, as shown in Figure 2-11.

Click Add, and the resource will be configured on the server. Then click Finish. Start the server and access the application using the URL shown in Figure 2-12.

You can now access your first web application through the URL http://localhost:8080/helloworld/hello, as illustrated in Figure 2-13.

In the following section, you will learn how the request flows through the application and how the container finds the servlet in the helloworld application you developed. Then you will use the HelloWorld servlet to understand the life-cycle methods of the servlet.

1.GET /helloworld/hello HTTP/1.1
2.Host: localhost:8080
3.User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.31 (KHTML, like Gecko)
Chrome/26.0.1410.43 Safari/537.31

1.<?xml version="1.0" encoding="UTF-8"?>
2.<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
3.<servlet>
4.<servlet-name>HelloWorld </servlet-name>
5.<servlet-class>
6.apress.helloworld.HelloWorld
7.</servlet-class>
8.</servlet>
9.<servlet-mapping>
10.<servlet-name>HelloWorld</servlet-name>
11.<url-pattern>/hello </url-pattern>
12.</servlet-mapping>
13.</web-app>

ServletContext and ServletConfig

After the init() method is called, the servlet gets one ServletConfig object per servlet and one ServletContext per web application. In a distributed environment, you will have one ServletContext per JVM. A ServletContext is a means by which a servlet can connect with both the container and the other parts of the web application. In the servlet, the only time you have to go through the ServletConfig to get the ServletContext is if your servlet is not an HttpServlet or a GenericServlet.

The ServletConfig object can be used to do the following:

• Pass deploy-time information to the servlet (such as a database or enterprise bean lookup name) that you do not want to hard-code into the servlet. This deploy-time information is called the servlet init parameters. The servlet init parameters will be discussed in the next section.
• Access the ServletContext.

The ServletContext object can be used to do the following:

• Access the web application parameters
• Set attributes that all components of the application can access
• Get server information, including the name and version of the container and the version of the API that is supported

A servlet can have three types of parameters:

• Request parameters
• Initialization (init) parameters
• Context-initialization (context-init) parameters

<servlet>
<init-param>
<param-name>email </param-name>
<param-value>[email protected]</param-value>
</init-param>
</servlet>

<context-param>
<param-name>email </param-name>
<param-value>[email protected]</param-value>
</context-param>

out.println(getServletContext().getInitParameter("email");

RequestDispatcher

In a web application, there are two ways to alter the request flow.

• Redirecting the request: The request is redirected to a completely different URL. The redirect can be done by calling sendRedirect() on the response object. The redirect is done by the browser.
• Dispatching the request: The request is dispatched to another component in the web app, typically a JSP page. A request dispatch is different from a redirect in that it does the work on the server side. A RequestDispatcher is called on the request, and a redirect is called on the response.

Figure 2-17 shows the methods in the RequestDispatcher interface.

You can get a RequestDispatcher in two ways.

• Getting a RequestDispatcher from a ServletRequest
• Getting a RequestDispatcher from a ServletContext

RequestDispatcher view = request.getRequestDispatcher("bookDetails.jsp");

RequestDispatcher view = getServletContext().getRequestDispatcher("/bookDetails.jsp");

RequestDispatcher view = request.getRequestDispatcher("bookDetails.jsp");
view.forward(request, response);

Filters

A filter is a reusable Java component that can transform the content of HTTP requests, responses, and header information. Filters are used for the following:

• Accessing static or dynamic content or modifying the request headers before invoking a request
• Intercepting the invocation of a web component after the call is invoked
• Providing actions on web components by using a chain of filters in a specific order
• Modifying the response headers and response data before they are rendered

A filter is created by implementing the javax.servlet.Filter interface and providing a no-arg constructor. A filter is configured in a web application either in the deployment descriptor using the <filter> element or in the @WebFilterannotation (introduced in the section that follows). In the <filter> element, you must declare the following:

• <filter-name>: Used to map the filter to a servlet or URL
• <filter-class>: Used by the container to identify the filter type

Listing 2-9 illustrates the filter declaration.

Listing 2-9. Declaring the Filter

<filter>
<filter-name>ResponseFilter</filter-name>
<filter-class>com.apress.ResponseServlet</filter-class>
</filter>

Filters can be associated with a servlet using the <servlet-name> element. Listing 2-10 maps the Response Filter filter to the ResponseServlet servlet.

Listing 2-10. Mapping the Filter to the Servlet

<filter-mapping>
<filter-name>Response Filter</filter-name>
<servlet-name>ResponseServlet</servlet-name>
</filter-mapping>

Filters can be associated with groups of servlets using <urlpattern>, as illustrated in Listing 2-11.

Listing 2-11. Associating a Filter with a Group of Servlets

<filter-mapping>
<filter-name>Response Filter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

In Listing 2-11 the response filter is applied to all the servlets in the web application.

A web application typically comprises the following filtering components:

• Authentication filters
• Caching filters
• Data compression filters
• Encryption filters
• Image conversion filters
• Logging and auditing filters

Configuring Servlet via Annotations

From Servlet 3.0 onward, servlets can be configured either via web.xml or using annotations or both. Table 2-2 describes the annotations supported by a Servlet 3.0–compliant web container.

In the section that follows, you will develop a helloworld project in which you will configure the servlet via annotations. Right-click the project helloworld, create a new servlet class, and give the class name as HelloWorld, as shown in Figure 2-18. Click Next.

On the next screen, you can fill in the information pertaining to the deployment descriptor such as the initialization parameters and URL mappings, as illustrated in Figure 2-19. For the HelloWorld application, you do not have to fill in the values for initialization parameters. The default value of the URL mapping, in this case /HelloWorld, is just fine. This value in the “URL mappings” field is the servlet path of the URL, as explained in the previous section. Click Next.

On the next screen, specify the modifiers, interfaces to implement, and method stubs to generate, as illustrated in Figure 2-20. Check doGet and doPost if they are not already checked. Then click Finish.

The IDE generates the HelloWorld servlet illustrated in Listing 2-12.

Listing 2-12. HelloWorld Servlet Using Annotations

1.package apress.helloworld;
2.
3.import java.io.IOException;
4.import javax.servlet.ServletException;
5.import javax.servlet.annotation.WebServlet;
6.import javax.servlet.http.HttpServlet;
7.import javax.servlet.http.HttpServletRequest;
8.import javax.servlet.http.HttpServletResponse;
9.
10./**
11. * Servlet implementation class HelloWorld
12. */
13.@WebServlet(urlPatterns = { "/HelloWorld" }, description = "A hello world servlet")
14.public class HelloWorld extends HttpServlet {
15.private static final long serialVersionUID = 1L;
16.
17.    /**
18.     * @see HttpServlet#HttpServlet()
19.     */
20.    public HelloWorld() {
21.        super();
22.        // TODO Auto-generated constructor stub
23.    }
24.
25./**
26. * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
27. */
28.protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
29.// TODO Auto-generated method stub
30.}
31.
32./**
33. * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
34. */
35.protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
36.// TODO Auto-generated method stub
37.}
38.
39.}

• Line 13: This line shows the usage of the @WebServlet annotation. The HelloWorld servlet is decorated with the @WebServlet annotation to specify the name, URL pattern, initialization parameters, and other configuration items usually specified in the web.xml deployment descriptor.
• Line 14: This line shows that the HelloWorld servlet extends the HTTPServlet.
• Lines 28 to 37: These lines show the doGet and doPost methods generated by the IDE.

Add the code in Listing 2-13 to the doGet method of the HelloWorld servlet.

Listing 2-13. Printing “Hello World”

PrintWriter out = response.getWriter();
out.println("<h2>Hello World !</h2>");

You will have to import java.io.Printwriter. You can do this in Eclipse by selecting Source Add Import or by pressing Ctrl+Shift+M; now you can run the application on the server. Right-click HelloWorld.java in the helloworld project in Eclipse and then select Run As Run on Server. The server you are using in this case is Tomcat 7.0. Then use the following URL to access the application:

http://localhost:8080/helloworld/HelloWorld

Figure 2-21 shows the output.

For more information on the Java Servlet technology, refer to the Java Servlet 3.1 specification² and the Java Servlet web site.³

Your First Web Application Using JSP

Now you will create a “Hello World” application using JSP. Since you created a project with this name earlier, make sure to delete or rename the old project first. Then right-click in the project explorer and select Dynamic Web Project, as shown in Figure 2-22. Name the project helloworld.

Right-click the project helloworld, create a new JSP file, and give the name as helloworld.jsp. Click Next. Click Finish on the next screen.

Modify the code of helloworld.jsp as illustrated in Listing 2-14.

Listing 2-14. helloworld.jsp

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hello World</title>
</head>
<body>
Hello World!
</body>
</html>

Deploy the application on the server, as shown in Figure 2-24.

Launch the application using http://localhost:8080/HelloWorld/hello.jsp.

Figure 2-25 shows the output.

JSP Basics

This section will cover the fundamental JSP constructs. A sound understanding of the classic approach is essential for understanding its limitations and to appreciate the power of more advanced techniques such as Expression Language, which is a subject of the next chapter. Before Expression Language was added to the JSP specification, a billion JSP pages were written using the classic approach, and you may still have to maintain them or refactor them. This need for backward compatibility is one reason why the JSP specification still covers the classic components. But when you have to write new JSPs in your application, you should not write backward-compatible code; instead, you should use the best-practice approach, which will be explained in the next chapter. When JSP 1.0 was added to the JSP specification in 1999, it was meant to produce dynamic, web-based content by embedding business-logic code in the template data. To that end, the following JSP elements were provided to be used within a JSP page to manipulate Java objects and perform operations upon them, thereby enabling the generation of dynamic content:

• Directives
• Declarations
• Expressions
• Scriptlets
• Implicit objects
• Standard actions

<%@ directive {attribute="value"}* %>

<%@ page attribute="value" %>

<%@ include file="relative url" >

1.<%@ include file="header.jsp" %>
2.
3.<p>content</p>
4.
5.<%@ include file="footer.jsp" %>

1.<html>
2.<head></head>
3.<body>
4.<%out.print("header"); %>

1.<%out.print("footer"); %>
2.</body>
3.</html>

<%@ taglib uri="uri" prefix="tagPrefix" >

1.<%@ taglib uri="/ helloTagLib" prefix="helloTag" %>
2.<html>
3.<body>
4.<helloTag:hello/>
5.</body>
6.</html>

<%= expression %>

1.<%!
2.public String hello() {
3.String msg = "Hello World";
4.return msg;
5.}
6.%>
7.Message from <b>Scriptlet</b>: <%hello();%><br/>
8.Message from <b>Expression</b>: <%=hello() %>

1.getServletContext().setAttribute("book", book);
2.request.setAttribute("book", book);
3.request.getSession().setAttribute("book", book);
4.application.setAttribute("book" book);
5.request.setAttribute("book" book);
6.session.setAttribute("book" book);
7.pageContext.setAttribute("book" book);

<jsp:include page="relativeURL" flush="true"/>

1.<html>
2.<head>
3.</head>
4.<body>
5.<%out.print("Inside main.jsp"); %><br/>
6.<jsp:include page="sub.jsp"/>
7.</body>
8.</html>

1.<html>
2.<head>
3.</head>
4.<body>
5.<%out.print("Inside sub.jsp"); %><br/>
6.</body>
7.</html>

<jsp:forward page="relativeURL" />

1.<html>
2.<head>
3.</head>
4.<body>
5.<%out.print("Inside main.jsp"); %><br/>
6.<jsp:forward page="sub.jsp"/>
7.</body>
8.</html>

1.<html>
2.<head>
3.</head>
4.<body>
5.<%out.print("Inside sub.jsp"); %><br/>
6.</body>
7.</html>

<jsp:useBean id="someId" class="SomeClass" />

<jsp:setProperty name="someId" property="someProperty" .../>

<jsp:getProperty name="someId" property="someProperty" .../>

1.package com.apress.jspactions;
2.
3.public class User {
4.
5.private String name;
6.
7.public String getName() {
8.return name;
9.}
10.
11.public void setName(String name) {
12.this.name = name;
13.}
14.
15.}

1.<html>
2.<head>
3.</head>
4.<body>
5.<jsp:useBean id="user" class="com.apress.jspactions.User" />
6.<jsp:setProperty name="user" property="name" value="vishal" />
7.Hello&nbsp;<jsp:getProperty name="user" property="name" />
8.</body>
9.</html>

Home Page

Figure 2-35 shows the home page of the application. On entering the URL (http://localhost:8080/bookWeb/books), the home page displays the menu, which consists of the categories of the books available in the bookstore database.

Figure 2-36 shows the MVC architecture of the bookstore application. For the sake of brevity and understanding how the categories are displayed on the home page, only the components related to the home page and categories are shown in the figure.

In the MVC architecture shown in Figure 2-36, M stands for Category, V stands for home.jsp, and C stands for BookController. The application flow comprises six steps, as discussed in the following sections.

1.<?xml version="1.0" encoding="UTF-8"?>
2.<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
3.xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
4.xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
5.id="WebApp_ID" version="3.0">
6.<display-name>bookWeb</display-name>
7.<servlet>
8.<servlet-name>BookServlet</servlet-name>
9.<servlet-class>com.apress.bookweb.controller.BookController</servlet-class>
10.<init-param>
11.<param-name>base</param-name>
12.<param-value>/bookWeb/books</param-value>
13.</init-param>
14.<init-param>
15.<param-name>imageURL</param-name>
16.<param-value>/bookWeb/images</param-value>
17.</init-param>
18.<load-on-startup>1</load-on-startup>
19.</servlet>
20.<context-param>
21.<param-name>param1</param-name>
22.<param-value>/bookWeb/books</param-value>
23.</context-param>
24.<context-param>
25.<param-name>imageURL</param-name>
26.<param-value>/bookWeb/images</param-value>
27.</context-param>
28.<servlet-mapping>
29.<servlet-name>BookServlet</servlet-name>
30.<url-pattern>/books </url-pattern>
31.</servlet-mapping>
32.<welcome-file-list>
33.<welcome-file>index.html</welcome-file>
34.<welcome-file>index.htm</welcome-file>
35.<welcome-file>index.jsp</welcome-file>
36.<welcome-file>default.html</welcome-file>
37.<welcome-file>default.htm</welcome-file>
38.<welcome-file>default.jsp</welcome-file>
39.</welcome-file-list>
40.</web-app>

1.public void init(ServletConfig config) throws ServletException {
2.super.init(config);
3.BookDAO bookDao = new BookDAOImpl();
4.// calling DAO method to retrieve bookList from Database
5.List<Category> categoryList = bookDao.findAllCategories();
6.ServletContext context = config.getServletContext();
7.context.setAttribute("categoryList", categoryList);
8.}

1.protected void doGet(HttpServletRequest request,
2.HttpServletResponse response) throws ServletException, IOException {
3.doPost(request, response);
4.}
5.
6.protected void doPost(HttpServletRequest request,
7.HttpServletResponse response) throws ServletException, IOException {
8.String base = "/jsp/";
9.String url = base + "home.jsp";
10.String action = request.getParameter("action");
11.String category = request.getParameter("category");
12.String keyWord = request.getParameter("keyWord");
13.if (action != null) {
14.switch (action) {
15.case "allBooks":
16.findAllBooks(request, response);
17.url = base + "listOfBooks.jsp";
18.break;
19.case "category":
20.findAllBooks(request, response);
21.url = base + "category.jsp?category=" + category;
22.break;
23.case "search":
24.searchBooks(request, response, keyWord);
25.url = base + "searchResult.jsp";
26.break;
27.
28.}
29.}
30.RequestDispatcher requestDispatcher = getServletContext()
31..getRequestDispatcher(url);
32.requestDispatcher.forward(request, response);
33.}

1.<body>
2.<div id="centered">
3.
4.<jsp:include page="header.jsp" flush="true" />
5.<br />
6.<jsp:include page="leftColumn.jsp" flush="true" />
7.<span class="label">Featured Books</span>
8...........
9.</div>
10.</body>

1.<li><div><span class="label" style="margin-left: 15px;">Categories</span></div>
2.<ul>
3.<%
4.List<Category> categoryList1 = (List<Category>) application.getAttribute("categoryList");
5.Iterator<Category> iterator1 = categoryList1.iterator();
6.while (iterator1.hasNext()) {
7.Category category1 = (Category) iterator1.next();%>
8.<li><a class="label"href="<%=param1%>?action=category&categoryId=<%=category1.getId()%>&category=<%=category1.getCategoryDescription()%>"><spanclass="label" style="margin-left: 30px;"><%=category1.getCategoryDescription()%></span></a>
9.</li>
10.<%}%>
11.</ul></li>

Listing All the Books

When the user clicks All Books on the menu, the list of all books is displayed, as illustrated in Figure 2-37.

The All Books link is in the leftColumn.jsp file. Listing 2-32 illustrates the code fragment for the All Books link on the menu.

Listing 2-32. All Books Link in leftColumn.jsp

1.<li><div>
2.<a class="link1" href="<%=param1%>?action=allBooks"><span
3.style="margin-left: 15px;" class="label">All Books</span></a>
4.</div></li>

• Line 2: This line is the All Books link displayed in the menu. When this link is clicked, the value of action-allBooks is added to the URL as the parameter, as shown in the URL:

  http:localhost:8080/bookWeb/books?action=allBooks

Step 2, which is locating the servlet from the request, is executed, but this time the action is not null and has a value allBooks. So, the code block in the doPost() method in the BookController, shown in Listing 2-33, is executed.

Listing 2-33. All Books in the doPost( ) in BookController

1.protected void doPost(HttpServletRequest request,
2.HttpServletResponse response) throws ServletException, IOException {
3.String base = "/jsp/";
4.String url = base + "home.jsp";
5.String action = request.getParameter("action");
6.String category = request.getParameter("category");
7.String keyWord = request.getParameter("keyWord");
8.if (action != null) {
9.switch (action) {
10.case "allBooks":
11.findAllBooks(request, response);
12.url = base + "listOfBooks.jsp";
13.break;
14.case "category":
15.findAllBooks(request, response);
16.url = base + "category.jsp?category=" + category;
17.break;
18.case "search":
19.searchBooks(request, response, keyWord);
20.url = base + "searchResult.jsp";
21.break;
22.
23.}
24.}
25.RequestDispatcher requestDispatcher = getServletContext()
26..getRequestDispatcher(url);
27.requestDispatcher.forward(request, response);
28.}

• Line 8: The action is not null, and the value of the action is allBooks.
• Lines 10 to 12: The helper method findAllBooks(request, response) is invoked, the URL is reconstructed to point to listOfBooks.jsp, and RequestDispatcher forwards to the view provided to the RequestDispatcher in the form of a URL.

Listing 2-34 shows the helper method findAllBooks(request, response) in the BookController.

Listing 2-34. findAllBooks( ) in BookController

1.private void findAllBooks(HttpServletRequest request,
2.HttpServletResponse response) throws ServletException, IOException {
3.try {
4.BookDAO bookDao = new BookDAOImpl();
5.List<Book> bookList = bookDao.findAllBooks();
6.request.setAttribute("bookList", bookList);
7.
8.} catch (Exception e) {
9.System.out.println(e);
10.}
11.}

• Lines 5 to 6: This list of all books is obtained from the database using the findAllBooks() method on the DAO and is set as an attribute in the request.

Searching the Books by Category

When the user clicks a specific category on the menu, the list of books in that category is displayed, as illustrated in Figure 2-38.

We saw in the previous section that the categories are in leftColumn.jsp. Listing 2-35 illustrates the code fragment for the category.

Listing 2-35. Categories Link on the Menu (leftColumn.jsp)

1.<li>
2.<a class="label" href="<%=param1%>?action=category&categoryId=<%=category1.getId()%>&category=<%=category1.getCategoryDescription()%>"><span class="label" style="margin-left: 30px;"><%=category1.getCategoryDescription()%></span></a>
3.</li>

• Line 2: This is the link of the category displayed in the menu. When this link is clicked, the ID of the category and description and the name of the action category is added to the URL as the parameter, as shown in the following URL:

  http:localhost:8080/bookWeb/books?action=category&categoryId=1&category=clojure

Again, step 2, which is locating the servlet from the request, is executed, and this time the action is not null and has a value category. So, the code block in the doPost() method in the BookController, shown in Listing 2-36, is executed.

Listing 2-36. doPost( ) in BookController

1.protected void doPost(HttpServletRequest request,
2.HttpServletResponse response) throws ServletException, IOException {
3.String base = "/jsp/";
4.String url = base + "home.jsp";
5.String action = request.getParameter("action");
6.String category = request.getParameter("category");
7.String keyWord = request.getParameter("keyWord");
8.if (action != null) {
9.switch (action) {
10.case "allBooks":
11.findAllBooks(request, response);
12.url = base + "listOfBooks.jsp";
13.break;
14.case "category":
15.findAllBooks(request, response);
16.url = base + "category.jsp?category=" + category;
17.break;
18.case "search":
19.searchBooks(request, response, keyWord);
20.url = base + "searchResult.jsp";
21.break;
22.
23.}
24.}
25.RequestDispatcher requestDispatcher = getServletContext()
26..getRequestDispatcher(url);
27.requestDispatcher.forward(request, response);
28.}

• Line 8: The action is not null, and the value of the action is category.
• Lines 15 to16: The helper method findAllBooks(request, response) is invoked, the URL is reconstructed to point to listOfBooks.jsp, and RequestDispatcher forwards to the view provided to the RequestDispatcher in the form of a URL.

Listing 2-37 shows the helper method findAllBooks(request, response) in the BookController.

Listing 2-37. findAllBooks( ) in BookController

1.private void findAllBooks(HttpServletRequest request,
2.HttpServletResponse response) throws ServletException, IOException {
3.try {
4.BookDAO bookDao = new BookDAOImpl();
5.List<Book> bookList = bookDao.findAllBooks();
6.request.setAttribute("bookList", bookList);
7.
8.} catch (Exception e) {
9.System.out.println(e);
10.}
11.}

• Lines 5 to 6: A list of all books is obtained from the database using the findAllBooks() method on the DAO and is set as an attribute in the request.

Searching the Books by Keyword

You can search the books by the author’s name or a keyword in the book’s title, as illustrated in Figure 2-39.

Before we talk about how the search by keyword works, let’s first take a look at one usability aspect of search. There is a question mark next to the search field, which serves to help the user. In other words, on mouse-hover, a tooltip is shown that indicates search parameters to be used, as illustrated in Figure 2-40.

To understand how the tooltip works, take a look at the markup of the search field, which is in leftColumn.jsp, as illustrated in Listing 2-38.

Listing 2-38. Search Field Markup

1.<form class="search">
2.<input type="hidden" name="action" value="search" />
3.<input id="text"type="text" name="keyWord" size="12" />
4.<spanclass="tooltip_message">?</span>
5.<p />
6.<input id="submit" type="submit" value="Search" />
7.</form>

• Line 4: This has a class tooltip_message. The tooltip works using jQuery and CSS on this class.

Listing 2-39 illustrates the jQuery code.

Listing 2-39. jQuery for the Tooltip

1.$(document).ready(function () {
2.$("span.tooltip_message").hover(function () {
3.$(this).append('<div class="message"><p>Search by Keyword in:<ul><li>Author First Name </li><li>Author Last Name <li>Title of the book </li></ul></p></div>'),
4.},function () {
5.$("div.message").remove();
6.});
7.});

• Line 2: The class tooltip_message and the <span> tag are used as a selector on which the hover function is called.
• Line 3: The message to be displayed in the tooltip is appended to the object returned by the selector in line 2.

In the similar manner, a tooltip can be added to the images on the home screen, as illustrated in Figure 2-41. Listing 2-40 illustrates the jQuery function used.

Listing 2-40. jQuery Function for the Image Tooltip

$("span.tooltip_img1").hover(function(){$(this).append('<div class="message"><ul><li>Title - Beginning Groovy, Grails and Griffon</li><li>Author: Vishal Layka</li><li>Publisher: Apress</li></ul></div>'),
}, function(){$("div.message").remove();});

Listing 2-41 illustrates the CSS code for the tooltip.

Listing 2-41. CSS for Tooltip

1.span.tooltip_message,span.tooltip_img1 {
2.cursor: pointer;
3.display: inline-block;
4.background-color: #F20B26;
5.width: 16px;
6.height: 18px;
7.color: #ffffff;
8.font-size: 12px;
9.font-weight: bold;
10.text-align: center;
11.position: relative;
12.}
13.
14.span.tooltip_message:hover {
15.background-color: #04FF97;
16.}
17.
18.div.message {
19.background-color: #04FF97;
20.color: #000000;
21.position: absolute;
22.left: 18px;
23.top: -18px;
24.z-index: 1000000;
25.text-align: left;
26.width: 280px;
27.}
 
This CSS and jQuery code in Listing 2-40 and Listing 2-41 are included in leftColumn.jsp, as illustrated in Listing 2-42.

Listing 2-42. Accessing CSS and jQuery Files in leftColumn.jsp

1.<link rel="stylesheet" href="css/bookstore.css" type="text/css" />
2.<script src="js/bookstore.js" type="text/javascript"></script>
3.<script type="text/javascript" src="js/jquery-1.9.1.js"></script>

• Line 1: This is the externalized CSS file for the rules illustrated in Listing 2-41
• Line 2: This is the externalized JavaScript file for the jQuery function in Listing 2-40
• Line 3: Line 3 specifies the jQuery library we are using.

Now we will begin with the search-by-keyword functionality in our web application. Listing 2-43 illustrates the search field markup.

Listing 2-43. Search Field Markup

1.<form class="search">
2.<input type="hidden" name="action" value="search" /><input id="text"
3.type="text" name="keyWord" size="12" /><span
4.class="tooltip_message">?</span>
5.<p />
6.<input id="submit" type="submit" value="Search" />
7.</form>

• Line 2: This line specifies the action value search.
• Line 6: This line submits the request.

When the user submits the search request (again, locating the servlet from the request), step 2is executed, and this time the action has a value search. So, the search case in the doPost() method in the BookController, shown in Listing 2-44, is executed.

Listing 2-44. doPost( ) in the BookController

1.protected void doPost(HttpServletRequest request,
2.HttpServletResponse response) throws ServletException, IOException {
3.String base = "/jsp/";
4.String url = base + "home.jsp";
5.String action = request.getParameter("action");
6.String category = request.getParameter("category");
7.String keyWord = request.getParameter("keyWord");
8.if (action != null) {
9.switch (action) {
10.case "allBooks":
11.findAllBooks(request, response);
12.url = base + "listOfBooks.jsp";
13.break;
14.case "category":
15.findAllBooks(request, response);
16.url = base + "category.jsp?category=" + category;
17.break;
18.case "search":
19.searchBooks(request, response, keyWord);
20.url = base + "searchResult.jsp";
21.break;
22.
23.}
24.}
25.RequestDispatcher requestDispatcher = getServletContext()
26..getRequestDispatcher(url);
27.requestDispatcher.forward(request, response);
28.}

• Line 18: The case search is executed, and the value of the action is search
• Line 19: The searchBooks() method is called. The searchBooks( ) is illustrated in Listing 2-45.
• Line 20: Line 20 constructs the URL for the view.
• Line 26: The URL for the view is provided to the RequestDispatcher.

Listing 2-45 illustrates the searchBooks() helper method used by the controller to invoke the call on the DAO.

Listing 2-45. searchBooks( ) in the BookController

1.private void searchBooks(HttpServletRequest request,
2.HttpServletResponse response, String keyWord)
3.throws ServletException, IOException {
4.try {
5.BookDAO bookDao = new BookDAOImpl();
6.List<Book> bookList = bookDao.searchBooksByKeyword(keyWord);
7.
8.request.setAttribute("bookList", bookList);
9.
10.} catch (Exception e) {
11.System.out.println(e);
12.}
13.}
14.

• Line 6: This obtains the bookList based on the search keyword by invoking the searchBooksByKeyword() method defined in BookDAO. We used this method in Chapter 1 when we built the data-access layer for our web application.