Create Maven Project
On the Eclipse, create a Maven project
Click Next button to select Workspace Location for project
Click Next button to select Archetype for project
Click Next button and enter Project Information:
- Group Id: LearnJSPServletWithRealApps
- Artifact Id: LearnJSPServletWithRealApps
- Package: com.demo
Click Finish button to finish create Maven project
Configure pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>LearnJSPServletWithRealApps</groupId>
<artifactId>LearnJSPServletWithRealApps</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>Learn JSP-Servlet with Real Apps</name>
<url>http://maven.apache.org</url>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp.jstl</groupId>
<artifactId>javax.servlet.jsp.jstl-api</artifactId>
<version>1.2.1</version>
</dependency>
<dependency>
<groupId>taglibs</groupId>
<artifactId>standard</artifactId>
<version>1.1.2</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.5</version>
</dependency>
</dependencies>
<build>
<finalName>LearnJSPServletWithRealApps</finalName>
</build>
</project>
Configure web.xml
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
Redirect Page
Create new JSP file named index.jsp in src\main\webapp folder.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" isELIgnored="false"%>
<jsp:forward page="demo"></jsp:forward>
Create Entities
Create new package named com.demo.entities. In this package, create new java class named Product.java as below:
package com.demo.entities;
import java.io.Serializable;
public class Product implements Serializable {
private static final long serialVersionUID = 1L;
private String id;
private String name;
private double price;
public Product() {
}
public Product(String id, String name, double price) {
this.id = id;
this.name = name;
this.price = price;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
}
Create Models
Create new package named com.demo.models. In this package, create new java class named ProductModel.java as below:
package com.demo.models;
import java.util.ArrayList;
import java.util.List;
import com.demo.entities.Product;
public class ProductModel {
private List<String> products;
public ProductModel() {
products = new ArrayList<String>();
products.add(new Product("p01", "computer 1", 20));
products.add(new Product("p02", "computer 2", 21));
products.add(new Product("p03", "laptop 1", 22));
products.add(new Product("p04", "laptop 2", 3));
products.add(new Product("p05", "laptop 3", 7));
}
public List<String> search(String keyword) {
List<String> names = new ArrayList<String>();
for (Product product : products) {
if (product.getName().toLowerCase().contains(keyword.toLowerCase())) {
names.add(product.getName());
}
}
return names;
}
}
Create Servlets
Create new package named com.demo.servlets. In this package, create new Servlets as below:
Demo Servlet
In com.demo.servlets package, create new Servlet named DemoServlet as below:
package com.demo.servlets;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/demo")
public class DemoServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public DemoServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.getRequestDispatcher("demo/index.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
}
Ajax Servlet
In com.demo.servlets package, create new Servlet named AjaxServlet as below:
package com.demo.servlets;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.demo.models.ProductModel;
import com.google.gson.Gson;
@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public AjaxServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Gson gson = new Gson();
String term = request.getParameter("term");
ProductModel productModel = new ProductModel();
PrintWriter out = response.getWriter();
out.print(gson.toJson(productModel.search(term)));
out.flush();
out.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
}
Create JSP Pages
Create new folder named demo in src\main\webapp folder. In this folder, create new JSP files as below:
Index Page
In src\main\webapp\demo folder, create new JSP file named index.jsp as below:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" isELIgnored="false"%>
<html>
<head>
<title>AutoComplete</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#search').autocomplete({
source: '${pageContext.request.contextPath}/ajax'
});
});
</script>
</head>
<body>
<h3>AutoComplete</h3>
<form>
<input type="text" id="search">
</form>
</body>
</html>
Structure of Maven Project
Run Application
Select project, right click and select Run As/Run on Server menu
Access DemoServlet with following urls as below:
- http://localhost:8081/LearnJSPServletWithRealApps
- http://localhost:8081/LearnJSPServletWithRealApps/demo
Output
Search with la keyword
Output
Search with p keyword
Output