Sample Spring MVC Project - Spring MVC - Spring Boot

Create Maven web project as "SpringMVCProject".

Project Structure.

Edit pom.xml for get required dependencies. - 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>com.spring.mvc</groupId>
<artifactId>SpringMVCProject</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>SpringMVCProject Maven Webapp</name>
<url>http://maven.apache.org</url>
<properties>
<java.version>1.8</java.version>
<spring.version>4.3.10.RELEASE</spring.version>
<cglib.version>2.2.2</cglib.version>
<org.aspectj-version>1.7.4</org.aspectj-version>
<org.slf4j-version>1.7.5</org.slf4j-version>
<servlet.api.version>3.1.0</servlet.api.version>
<jsp.api.version>2.2</jsp.api.version>
<jstl.version>1.2</jstl.version>
<log4j.version>1.2.15</log4j.version>
<tiles-jsp.version>3.0.7</tiles-jsp.version>
<validation-api.version>1.0.0.GA</validation-api.version>
<aspectjrt.version>1.6.11</aspectjrt.version>
<hibernate-validator.version>4.0.2.GA</hibernate-validator.version>
<mysql-connector-java.version>5.1.6</mysql-connector-java.version>
</properties>
<dependencies>
<!-- validation-api -->
<dependency>
<groupId>javax.validation</groupId>
<artifactId>validation-api</artifactId>
<version>${validation-api.version}</version>
</dependency>
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-jsp</artifactId>
<version>${tiles-jsp.version}</version>
</dependency>
<!-- log4j -->
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.17</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aop</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-web</artifactId>
<version>4.2.3.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-config</artifactId>
<version>3.2.0.RELEASE</version>
</dependency>
<dependency>
<groupId>org.aspectj</groupId>
<artifactId>aspectjrt</artifactId>
<version>${aspectjrt.version}</version>
</dependency>
<dependency>
<groupId>org.aspectj</groupId>
<artifactId>aspectjweaver</artifactId>
<version>${aspectjrt.version}</version>
</dependency>

<!-- hibernate-validator -->
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>${hibernate-validator.version}</version>
</dependency>
<!-- Spring core & mvc -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>4.3.10.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-orm</artifactId>
<version>${spring.version}</version>
<type>jar</type>
<scope>compile</scope>
</dependency>
<!-- CGLib for @Configuration -->
<dependency>
<groupId>cglib</groupId>
<artifactId>cglib-nodep</artifactId>
<version>${cglib.version}</version>
<scope>runtime</scope>
</dependency>
<!-- Servlet Spec -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>${servlet.api.version}</version>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>${jsp.api.version}</version>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>${jstl.version}</version>
</dependency>
<!-- mysql-connector-java -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql-connector-java.version}</version>
</dependency>
<!-- Logging -->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>${org.slf4j-version}</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>jcl-over-slf4j</artifactId>
<version>${org.slf4j-version}</version>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>${org.slf4j-version}</version>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>${log4j.version}</version>
<exclusions>
<exclusion>
<groupId>javax.mail</groupId>
<artifactId>mail</artifactId>
</exclusion>
<exclusion>
<groupId>javax.jms</groupId>
<artifactId>jms</artifactId>
</exclusion>
<exclusion>
<groupId>com.sun.jdmk</groupId>
<artifactId>jmxtools</artifactId>
</exclusion>
<exclusion>
<groupId>com.sun.jmx</groupId>
<artifactId>jmxri</artifactId>
</exclusion>
</exclusions>
<scope>runtime</scope>
</dependency>
</dependencies>
<build>
<finalName>SpringMVCProject</finalName>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>${java.version}</source>
<target>${java.version}</target>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
</configuration>
</plugin>
</plugins>
</build>

</project>

Create Database

CREATE TABLE UserContact (Id int NOT NULL AUTO_INCREMENT PRIMARY KEY,Name varchar(30) NOT NULL,Email varchar(30) NOT NULL,Address varchar(150),Telephone varchar(20));

Spring Configuration - MvcConfiguration.java

package com.spring.mvc.application.config;
import javax.sql.DataSource;
import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.ComponentScan;import org.springframework.context.annotation.Configuration;import org.springframework.context.annotation.EnableAspectJAutoProxy;import org.springframework.context.support.ReloadableResourceBundleMessageSource;import org.springframework.jdbc.core.JdbcTemplate;import org.springframework.jdbc.datasource.DriverManagerDataSource;import org.springframework.web.servlet.ViewResolver;import org.springframework.web.servlet.config.annotation.EnableWebMvc;import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;import org.springframework.web.servlet.view.InternalResourceViewResolver;
/** * SpringMVCProject, copyright (c) 2017. * @author Devendra Borge * */@Configuration@ComponentScan(basePackages="com.spring.mvc")@EnableWebMvc@EnableAspectJAutoProxypublic class MvcConfiguration extends WebMvcConfigurerAdapter{
@Bean public ViewResolver getViewResolver(){ InternalResourceViewResolver resolver = new InternalResourceViewResolver(); resolver.setPrefix("/WEB-INF/forms/"); resolver.setSuffix(".jsp"); return resolver; } @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/resources/**").addResourceLocations("/resources/"); }
@Bean public DataSource getDataSource() { DriverManagerDataSource dataSource = new DriverManagerDataSource(); dataSource.setDriverClassName("com.mysql.jdbc.Driver"); dataSource.setUrl("jdbc:mysql://localhost:3306/contactdb"); dataSource.setUsername("root"); dataSource.setPassword("adminuser"); return dataSource; } @Bean public JdbcTemplate getJdbcTemplate(){ return new JdbcTemplate(getDataSource()); } @Bean public ReloadableResourceBundleMessageSource getMessageResource(){ ReloadableResourceBundleMessageSource messageSource = new ReloadableResourceBundleMessageSource(); messageSource.setBasename("message"); messageSource.setDefaultEncoding("UTF-8"); return messageSource; } }

Note - Change database configuration.

Create Controller - UserContactController.java

package com.spring.mvc.admin.controller;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import javax.validation.Valid;

import com.spring.mvc.admin.dao.UserContactDAO;
import com.spring.mvc.admin.model.UserContact;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;


/**
* SpringMVCProject, copyright (c) 2017.
* @author Devendra Borge
*
*/
@Controller
public class UserContactController {


@Autowired

private UserContactDAO userContactDAO;

@RequestMapping(value="/viewUserContact")

public ModelAndView listUserContact(ModelAndView model) {

try{

List<UserContact> listUserContact = userContactDAO.list();

model.addObject("listUserContact", listUserContact);

model.setViewName("SearchUserContactPage");

} catch (Exception e) {

model.setViewName("SystemError");

e.printStackTrace();

}

return model;

}

@RequestMapping(value = "/addUserContact", method = RequestMethod.GET)

public ModelAndView addUserContact(ModelAndView model) {

try{

UserContact userContact = new UserContact();

model.addObject("userContact", userContact);

model.setViewName("AddUserContactPage");

} catch (Exception e) {

model.setViewName("SystemError");

e.printStackTrace();

}

return model;

}

@RequestMapping(value = "/saveUserContact", method = RequestMethod.POST)

public String saveUserContact(@Valid UserContact userContact, BindingResult bindingResult, Model model) {

try{

if (bindingResult.hasErrors()) {

return "AddUserContactPage";

}

userContactDAO.save(userContact);

List<UserContact> listUserContact = userContactDAO.list();

model.addAttribute("listUserContact", listUserContact);

return "SearchUserContactPage";

} catch (Exception e) {

e.printStackTrace();

return "SystemError";

}

}

@RequestMapping(value = "/updateUserContact", method = RequestMethod.POST)

public String updateUserContact(@Valid UserContact userContact, BindingResult bindingResult, Model model) {

try{

if (bindingResult.hasErrors()) {

return "EditUserContactPage";

}

userContactDAO.update(userContact);

List<UserContact> listUserContact = userContactDAO.list();

model.addAttribute("listUserContact", listUserContact);

return "SearchUserContactPage"; } catch (Exception e) {

e.printStackTrace();

return "SystemError";

}

}

@RequestMapping(value = "/deleteUserContact", method = RequestMethod.GET)

public ModelAndView deleteUserContact(HttpServletRequest request) {

ModelAndView model = null; try{

userContactDAO.delete(request.getParameter("id"));

model = new ModelAndView("redirect:/viewUserContact");

} catch (Exception e) {

model.setViewName("SystemError");

e.printStackTrace();

}
return model;
}

@RequestMapping(value = "/editUserContact", method = RequestMethod.GET)

public ModelAndView editUserContact(HttpServletRequest request) {

ModelAndView model = null; try{

UserContact userContact = userContactDAO.get(request.getParameter("id"));

model = new ModelAndView("EditUserContactPage");

model.addObject("userContact", userContact);

} catch (Exception e) {

model = new ModelAndView("SystemError");

e.printStackTrace();

}
return model;
} 

}
Create Pojo - UserContact.java


package com.spring.mvc.admin.model;

import org.springframework.stereotype.Component;

/**
* SpringMVCProject, copyright (c) 2017.
* @author Devendra Borge
*
*/
@Component

public class UserContact {

private String id;

private String name;

private String email;

private String address;

private String telephone;

public UserContact() {

}

public UserContact(String id, String name, String email, String address, String telephone) {
this.id = id;
this.name = name;
this.email = email;
this.address = address;
this.telephone = telephone;
}

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 String getEmail() {
return email;
}

public void setEmail(String email) {
this.email = email;
}

public String getAddress() {
return address;
}

public void setAddress(String address) {
this.address = address;
}

public String getTelephone() {
return telephone;
}

public void setTelephone(String telephone) {
this.telephone = telephone;
}
}
Create DAO interface and implement classes

Interface - UserContactDAO.java

package com.spring.mvc.admin.dao;

import java.util.List;

import com.spring.mvc.admin.model.UserContact;

/**
* SpringMVCProject, copyright (c) 2017.
* @author Devendra Borge
*
*/
public interface UserContactDAO {

public void save(UserContact userContact);

public void update(UserContact userContact);
public void delete(String id);
public UserContact get(String id);
public List<UserContact> list();
}

Implement - UserContactDAOImpl.java

package com.spring.mvc.admin.dao;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;

import com.spring.mvc.admin.model.UserContact;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.JdbcTemplate;

import org.springframework.jdbc.core.ResultSetExtractor;
import org.springframework.jdbc.core.RowMapper;
import org.springframework.stereotype.Repository;
import org.springframework.beans.factory.annotation.Autowired;

/**
* SpringMVCProject, copyright (c) 2017.
* @author Devendra Borge
*
*/

@Repository
public class UserContactDAOImpl implements UserContactDAO {

@Autowired

private JdbcTemplate jdbcTemplate;
public UserContactDAOImpl() {


}

@Override
public void save(UserContact userContact) {

String sql = "INSERT INTO UserContact (Name, Email, Address, Telephone) VALUES (?, ?, ?, ?)";

jdbcTemplate.update(sql, userContact.getName(), userContact.getEmail(), userContact.getAddress(), userContact.getTelephone());
}

@Override
public void update(UserContact userContact) {

String sql = "Update UserContact SET Name=?, Email=?, Address=?, Telephone=? WHERE Id=?";

jdbcTemplate.update(sql, userContact.getName(), userContact.getEmail(), userContact.getAddress(), userContact.getTelephone(),userContact.getId());

}

@Override
public void delete(String id) {

String sql = "DELETE FROM UserContact WHERE Id=?";

jdbcTemplate.update(sql, id);

}

@Override
public UserContact get(String id) {

String sql = "SELECT * FROM UserContact WHERE Id= "+id;

return jdbcTemplate.query(sql, new ResultSetExtractor<UserContact>() {

@Override
public UserContact extractData(ResultSet rs) throws SQLException, DataAccessException {

if (rs.next()) {

UserContact userContact = new UserContact();

userContact.setId(rs.getString("Id"));

userContact.setName(rs.getString("Name"));

userContact.setEmail(rs.getString("Email"));

userContact.setAddress(rs.getString("Address"));

userContact.setTelephone(rs.getString("Telephone"));

return userContact;

}

return null;
}
});
}

@Override
public List<UserContact> list() {

String sql = "SELECT * FROM UserContact";

List<UserContact> listUserContact = jdbcTemplate.query(sql, new RowMapper<UserContact>() {

@Override
public UserContact mapRow(ResultSet rs, int rowNum) throws SQLException {

UserContact userContact = new UserContact();

userContact.setId(rs.getString("Id"));

userContact.setName(rs.getString("Name"));

userContact.setEmail(rs.getString("Email"));

userContact.setAddress(rs.getString("Address"));

userContact.setTelephone(rs.getString("Telephone"));

return userContact;
}
});
return listUserContact;
}
}
Create JSP pages

Add page - AddUserContactPage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form"
prefix="springForm"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="images/favicon.png">
<title>Add UserContact</title>
<!-- Bootstrap core CSS -->
<link href="<%=request.getContextPath() %>/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet"><!--Date Picker CSS-->
<link href="<%=request.getContextPath() %>/resources/css/bootstrap-datepicker.css" rel="stylesheet" /><!-- Font Awesome CSS -->
<link href="<%=request.getContextPath() %>/resources/font-awesome/css/font-awesome.min.css" rel="stylesheet"><!-- Animate CSS -->
<link href="<%=request.getContextPath() %>/resources/css/animate.css" rel="stylesheet">
<!-- Custom styles -->
<link href="<%=request.getContextPath() %>/resources/css/Style.css" rel="stylesheet">
</head><body class="drawer drawer--left">
<div class="">
<div class="animated fadeIn content"> <div class="portlet-header"> <div class="content-header col-md-12">
<h2 class="content-header-title">Add UserContact</h2>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="./home">Home</a></li>
<li class="breadcrumb-item"><a href="./viewUserContact">Search UserContact</a></li>
<li class="breadcrumb-item active">Add UserContact</li>
</ol>
</div>
<!-- /.content-header -->
</div>
<!-- /.portlet-header --> <springForm:form action="./saveUserContact" method="post"
modelAttribute="userContact">

<div class="portlet-content">
<div class="row">
<springForm:hidden path="id" /><div class="col-xs-12 col-md-3"><div class="form-group"><label>Name</label><springForm:input path="name" type="text" class="form-control" placeholder="Please enter name" autocomplete="off" /><springForm:errors path="name" cssClass="error" /></div></div><div class="col-xs-12 col-md-3"><div class="form-group"><label>Email</label><springForm:input path="email" type="text" class="form-control" placeholder="Please enter email" autocomplete="off" /><springForm:errors path="email" cssClass="error" /></div></div><div class="col-xs-12 col-md-3"><div class="form-group"><label>Address</label><springForm:input path="address" type="text" class="form-control" placeholder="Please enter address" autocomplete="off" /><springForm:errors path="address" cssClass="error" /></div></div><div class="col-xs-12 col-md-3"><div class="form-group"><label>Telephone</label><springForm:input path="telephone" type="text" class="form-control" placeholder="Please enter telephone" autocomplete="off" /><springForm:errors path="telephone" cssClass="error" /></div></div>
<div class="col-xs-12 col-md-12">
<button type="submit" value="" class="btn btn-outline-success">Submit</button>
</a><button value="" onclick="this.form.reset();" class="btn btn-outline-danger">Clear</button>
</div>
</div>
</div>
</springForm:form>
</div>
</div>
<!-- End footer -->
<!-- Custom Scripts -->
<script src="<%=request.getContextPath() %>/resources/js/jquery.1.11.1.min.js"></script>
<!-- Bootstrap Script -->
<script src="<%=request.getContextPath() %>/resources/bootstrap/js/bootstrap.min.js"></script>
<!--Date Picker JS-->
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/bootstrap-datepicker.min.js"></script> <!--Date Picker Script-->
<script>
            $(document).ready(function () {
                var date_input = $('input[name="date"]'); //our date input has the name "date"
                var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
                date_input.datepicker({
                    format: 'mm/dd/yyyy',
                    container: container,
                    todayHighlight: true,
                    autoclose: true,
                })
            })
            function goBack() {
    window.history.back();
}
        </script> <script>
            $(document).ready(function () {
                $("#mytable #checkall").click(function () {
                    if ($("#mytable #checkall").is(':checked')) {
                        $("#mytable input[type=checkbox]").each(function () {
                            $(this).prop("checked", true);
                        });                    } else {
                        $("#mytable input[type=checkbox]").each(function () {
                            $(this).prop("checked", false);
                        });
                    }
                });                $("[data-toggle=tooltip]").tooltip();
            });
        </script>
        
</body>

</html>

Update Page - EditUserContactPage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form"
prefix="springForm"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="images/favicon.png">
<title>Update UserContact</title>
<!-- Bootstrap core CSS -->
<link href="<%=request.getContextPath() %>/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet"><!--Date Picker CSS-->
<link href="<%=request.getContextPath() %>/resources/css/bootstrap-datepicker.css" rel="stylesheet" /><!-- Font Awesome CSS -->
<link href="<%=request.getContextPath() %>/resources/font-awesome/css/font-awesome.min.css" rel="stylesheet"><!-- Animate CSS -->
<link href="<%=request.getContextPath() %>/resources/css/animate.css" rel="stylesheet">
<!-- Custom styles -->
<link href="<%=request.getContextPath() %>/resources/css/Style.css" rel="stylesheet">
</head><body class="drawer drawer--left">
<div class="">
<div class="animated fadeIn content"> <div class="portlet-header"> <div class="content-header col-md-12">
<h2 class="content-header-title">Update UserContact</h2>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="./home">Home</a></li>
<li class="breadcrumb-item"><a href="./viewUserContact">Search UserContact</a></li>
<li class="breadcrumb-item active">Update UserContact</li>
</ol>
</div>
<!-- /.content-header -->
</div>
<!-- /.portlet-header --> <springForm:form action="./updateUserContact" method="post"
modelAttribute="userContact">

<div class="portlet-content">
<div class="row">
<springForm:hidden path="id" /><div class="col-xs-12 col-md-3"><div class="form-group"><label>Name</label><springForm:input path="name" type="text" class="form-control" placeholder="Please enter name" autocomplete="off" /><springForm:errors path="name" cssClass="error" /></div></div><div class="col-xs-12 col-md-3"><div class="form-group"><label>Email</label><springForm:input path="email" type="text" class="form-control" placeholder="Please enter email" autocomplete="off" /><springForm:errors path="email" cssClass="error" /></div></div><div class="col-xs-12 col-md-3"><div class="form-group"><label>Address</label><springForm:input path="address" type="text" class="form-control" placeholder="Please enter address" autocomplete="off" /><springForm:errors path="address" cssClass="error" /></div></div><div class="col-xs-12 col-md-3"><div class="form-group"><label>Telephone</label><springForm:input path="telephone" type="text" class="form-control" placeholder="Please enter telephone" autocomplete="off" /><springForm:errors path="telephone" cssClass="error" /></div></div>
<div class="col-xs-12 col-md-12">
<button type="submit" value="" class="btn btn-outline-success">Submit</button>
</a><button value="" onclick="this.form.reset();" class="btn btn-outline-danger">Clear</button>
</div>
</div>
</div>
</springForm:form>
</div>
</div>
<!-- End footer -->
<!-- Custom Scripts -->
<script src="<%=request.getContextPath() %>/resources/js/jquery.1.11.1.min.js"></script>
<!-- Bootstrap Script -->
<script src="<%=request.getContextPath() %>/resources/bootstrap/js/bootstrap.min.js"></script>
<!--Date Picker JS-->
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/bootstrap-datepicker.min.js"></script> <!--Date Picker Script-->
<script>
            $(document).ready(function () {
                var date_input = $('input[name="date"]'); //our date input has the name "date"
                var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
                date_input.datepicker({
                    format: 'mm/dd/yyyy',
                    container: container,
                    todayHighlight: true,
                    autoclose: true,
                })
            })
            function goBack() {
    window.history.back();
}
        </script> <script>
            $(document).ready(function () {
                $("#mytable #checkall").click(function () {
                    if ($("#mytable #checkall").is(':checked')) {
                        $("#mytable input[type=checkbox]").each(function () {
                            $(this).prop("checked", true);
                        });                    } else {
                        $("#mytable input[type=checkbox]").each(function () {
                            $(this).prop("checked", false);
                        });
                    }
                });                $("[data-toggle=tooltip]").tooltip();
            });
        </script>
        
</body>

</html>

Search Page - SearchUserContactPage.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">

<meta name="author" content="">

<link rel="icon" href="images/favicon.png">

<title>Search UserContact</title>

<!-- Bootstrap core CSS -->

<link

href="<%=request.getContextPath()%>/resources/bootstrap/css/bootstrap.min.css"

rel="stylesheet">

<!--Date Picker CSS-->

<link

href="<%=request.getContextPath()%>/resources/css/bootstrap-datepicker.css"

rel="stylesheet" />

<!-- Font Awesome CSS -->

<link

href="<%=request.getContextPath()%>/resources/font-awesome/css/font-awesome.min.css"

rel="stylesheet">

<!-- Animate CSS -->

<link href="<%=request.getContextPath()%>/resources/css/animate.css"

rel="stylesheet">

<!-- Custom styles -->

<link href="<%=request.getContextPath()%>/resources/css/Style.css"

rel="stylesheet">

<!-- Datatable styles -->

<link

href="<%=request.getContextPath()%>/resources/Plugins/css/jquery.dataTables.min.css"

rel="stylesheet">

</head>

<body class="drawer drawer--left">

<div class="">

<div class="animated fadeIn">

<div class="portlet-header">

<div class="content-header col-md-12">

<h2 class="content-header-title">Search UserContact</h2>

<ol class="breadcrumb">

<li class="breadcrumb-item"><a href="./home">Home</a></li>

<li class="breadcrumb-item active">Search UserContact</li>

<a href="./addUserContact"><button class="btn btn-success pull-right"

style="padding: 2px;">

<i class='fa fa-plus' aria-hidden='true'></i>&nbsp;Add

</button></a>

</ol>

</div>

<!-- /.content-header -->

</div>

<!-- /.portlet-header -->

<div class="portlet-content">

<div class="row">

<div class="col-md-12">

<div class="table-responsive">

<table id="example" class="display" cellspacing="0" width="100%">

<thead>

<tr><th>Name</th>

<th>Address</th>

<th>Telephone</th>

<th>Action</th>

</tr>

</thead>

<tbody>

<c:forEach var="userContact" items="${listUserContact}"

varStatus="status">

<tr>

<td>${userContact.name}</td>

<td>${userContact.address}</td>

<td>${userContact.telephone}</td>

<td><a href="./editUserContact?id=${userContact.id}"><i class="fa fa-pencil"

style="color: #364760; font-size: 21px;" aria-hidden="true"></i></a>

&nbsp;&nbsp;&nbsp;&nbsp; <a href="./deleteUserContact?id=${userContact.id}"><i

class="fa fa-trash" style="color: red; font-size: 21px;"

aria-hidden="true"></i></a></td>

</tr>

</c:forEach>

</tbody>

</table>

</div>

</div>

</div>

<!-- /.portlet-content -->

</div>

</div>

</div>

<!-- End footer -->

<!-- Custom Scripts -->

<script

src="<%=request.getContextPath()%>/resources/js/jquery.1.11.1.min.js"></script>

<!-- Bootstrap Script -->

<script

src="<%=request.getContextPath()%>/resources/bootstrap/js/bootstrap.min.js"></script>

<!--Date Picker JS-->

<script type="text/javascript"

src="<%=request.getContextPath()%>/resources/js/bootstrap-datepicker.min.js"></script>

<!--Datetable JS-->

<script type="text/javascript"

src="<%=request.getContextPath()%>/resources/Plugins/js/jquery.dataTables.min.js"></script>

<!--Date Picker Script-->

<script>

$(document).ready(

function() {

$('#example').dataTable(

{

"bPaginate" : true,

"bLengthChange" : true,

"bFilter" : true,

"bInfo" : true,

"bAutoWidth" : false,

//"pageLength": 5,

"lengthMenu" : [ [ 5, 10, 25, 50, -1 ],

[ 5, 10, 25, 50, "All" ] ]

});

});

</script>

<script>

$(document).ready(

function() {

var date_input = $('input[name="date"]'); //our date input has the name "date"

var container = $('.bootstrap-iso form').length > 0 ? $(

'.bootstrap-iso form').parent() : "body";

date_input.datepicker({

format : 'mm/dd/yyyy',

container : container,

todayHighlight : true,

autoclose : true,

})

})

</script>

<script>

$(document).ready(function() {

$("#mytable #checkall").click(function() {

if ($("#mytable #checkall").is(':checked')) {

$("#mytable input[type=checkbox]").each(function() {

$(this).prop("checked", true);

});

} else {

$("#mytable input[type=checkbox]").each(function() {

$(this).prop("checked", false);

});

}

});

$("[data-toggle=tooltip]").tooltip();});</script></body></html> 

Note - We use bootstrap design so you need to import it otherwise you can download sample project using below given link.

Sample Project - Click Here To Download