Spring MVC + Hibernate + Bootstrap 4 + MySQL: CRUD example
In the tutorial, I introduce how to build an “Spring web mvc, Bootstrap 4 Jquery , CRUD MySQL Example” project with the help of Hibernate Template
IDE Spring STS 3.9 and Java JDK8
Mysql database and Hibernate
Views with JSP and Bootstrap 4-JQuery 3.6
Apache Tomcat 9 as servlet container
Data Access Object (DAO) and MVC model as design pattern
- Maven projetc, maven-archetype-webapp
1-Configure pom.xml,web.xml,spring-servlet.xml. Setting project
Add dependencies in the pom.xml Configure maven project<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.demo</groupId> <artifactId>CrudEmpleado</artifactId> <packaging>war</packaging> <version>0.0.1-SNAPSHOT</version> <name>CrudEmpleado Maven Webapp</name> <url>http://maven.apache.org</url> <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>3.8.1</version> <scope>test</scope> </dependency> <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.3.3</version> </dependency> <!-- https://mvnrepository.com/artifact/org.springframework/spring-orm --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-orm</artifactId> <version>5.3.3</version> </dependency> <!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-core --> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-core</artifactId> <version>5.4.2.Final</version> </dependency> <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.6</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>javax.servlet.jsp-api</artifactId> <version>2.3.1</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <!-- https://mvnrepository.com/artifact/org.projectlombok/lombok --> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.16</version> <scope>provided</scope> </dependency> <!-- https://mvnrepository.com/artifact/com.google.code.gson/gson --> <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</artifactId> <version>2.8.5</version> </dependency> </dependencies> <build> <finalName>CrudEmpleado</finalName> </build> </project><beans xmlns="http://www.springframework.org/schema/beans" xmlns:context="http://www.springframework.org/schema/context" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd "> <context:component-scan base-package="com.demo" /> <tx:annotation-driven /> <mvc:annotation-driven></mvc:annotation-driven> <mvc:resources location="/WEB-INF/resources/" mapping="/resources/**" /> <mvc:annotation-driven></mvc:annotation-driven> <!-- View Resolver --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/views/" /> <property name="suffix" value=".jsp" /> </bean> <!-- data source --> <bean class="org.springframework.jdbc.datasource.DriverManagerDataSource"name="ds"> <property name="driverClassName" value="com.mysql.jdbc.Driver" /> <property name="url" value="jdbc:mysql://localhost:3306/crud_empleado" /> <property name="username" value="root" /> <property name="password" value="" /> </bean> <bean class="org.springframework.orm.hibernate5.LocalSessionFactoryBean"name="factory"> <!-- data source --> <property name="dataSource" ref="ds"></property> <!-- hibernate properties --> <property name="hibernateProperties"> <props> <prop key="hibernate.dialect">org.hibernate.dialect.MySQL5Dialect</prop> <prop key="hibernate.show_sql">true</prop> <prop key="hibernate.hbm2ddl.auto">update</prop> </props> </property> <!-- annotated classes --> <property name="annotatedClasses"> <list> <value>com.demo.model.Empleado</value> </list> </property> </bean> <bean class="org.springframework.orm.hibernate5.HibernateTemplate" name="hibernateTemplate"> <property name="sessionFactory" ref="factory"></property> </bean> <bean class="org.springframework.orm.hibernate5.HibernateTransactionManager" name="transactionManager"> <property name="sessionFactory" ref="factory"></property> </bean> </beans>
Set and settings
Create home.jsp and InicioController.java, aspage welcome
Delete index.jsp and configure welcome page from controller
2- Define database and Create model Entity Model
Solo crear DB sin tabla, de eso se encarga Hibernate al correr con Tomcat el proyecto
CREATE SCHEMA IF NOT EXISTS `crud_empleado` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci ;
Propiedades de spring-xml que generan automaticamente la tabla empleado en la bd, junto con las anotacoines de hibernate en la entidad
package com.demo.model;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import lombok.Data;
import lombok.ToString;
@Data
@ToString
@Entity
public class Empleado {Ini
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String nombre;
private String email;
private String telefono;
private String departamento;
private String puesto;
private Double salario;
private String observacion;
}
3-Create InicioController and inicio.jsp , the run project con Tomcat
InicioController.java
package com.demo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class InicioController {
@RequestMapping("/")
public String viewHome() {
return"inicio";
}
}
inicio.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<%@include file="./base.jsp"%>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a class="navbar-brand" href="#"> <img
src="resources/assets/logo_cw.png" alt="logo" style="width: 80px;">
</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
</ul>
</nav>
<div class="container-fluid">
<h3>C.R.U.D con Spring MVC</h3>
<p>Sistema de registro de empleados con Mysql Databases, hibernate
template.</p>
<p>Patron de diseño DAO, y la vista realizado con JSP y Bootstrap
4</p>
<hr>
<a href="ListadoEmpleado">VER LISTADO DE EMPLEADOS<br>
<button type="button" class="btn btn-primary btn-sm">Ver
Listado</button></a>
<hr>
<a href="addEmpleado">INGRESO POR PRIMERA VEZ PARA CARGAR
EMPLEADOS<br>
<button type="button" class="btn btn-dark btn-sm">Cargar
Primera Vez</button>
</a>
</div>
</body>
</html>
Now run the project con apache tomcat localhost:8090/CrudEmpleado
4- Create class EmpleadoDao,EmpleadoService and EmpleadoController
package com.demo.dao;
import java.util.List;
import javax.transaction.Transactional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.orm.hibernate5.HibernateTemplate;
import org.springframework.stereotype.Component;
import com.demo.model.Empleado;
@Component
public class EmpleadoDao {
@Autowired
HibernateTemplate hiberneteTemplate;
//agrega empleado
@Transactional
public void addEmployee(Empleado empleado){
hiberneteTemplate.save(empleado);
}
//obtener todos los empleados
public List<Empleado> getAllEmp(){
return hiberneteTemplate.loadAll(Empleado.class);
}
//obtener empleado por id
@Transactional
public Empleado getEmpById(Long id){
Empleado empleado= hiberneteTemplate.get(Empleado.class, id);
return empleado;
}
//update employee
@Transactional
public void updateEmp(Empleado empleado){
hiberneteTemplate.update(empleado);
}
//delete employee
@Transactional
public void deleteEmp(Long id)
{
hiberneteTemplate.delete(hiberneteTemplate.load(Empleado.class, id));
}
}
EmpleadoService.java
package com.demo.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Service;
import com.demo.dao.EmpleadoDao;
import com.demo.model.Empleado;
@Component
@Service
public class EmpleadoServices {
@Autowired
EmpleadoDao empleadoDao;
//agrega empleado
public void addEmpleado(Empleado emp){
empleadoDao.addEmployee(emp);
}
//get all employee
public List<Empleado> getAllEmpleados(){
return empleadoDao.getAllEmp();
}
//obtener emp por id
public Empleado getById(Long id){
return empleadoDao.getEmpById(id);
}
// update empleado
public void updateEmpleado(Empleado emp)
{
empleadoDao.updateEmp(emp);
}
//delete empleado
public void deleteEmpleado(Long id)
{
empleadoDao.deleteEmp(id);
}
}
EmpleadoController.java
package com.demo.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import com.demo.model.Empleado;
import com.demo.service.EmpleadoServices;
@Controller
@RequestMapping
public class EmpleadoController {
@Autowired
EmpleadoServices empleadoServices;
//muestra la pagina AddEmpleado.jsp
@GetMapping("addEmpleado")
public String agregaEmpleado(){
return "AddEmpleado";
}
//save employee form
@PostMapping("/insertEmpleado")
public String insertaEmpleado(@ModelAttribute("insertEmployee") Empleado emp){
empleadoServices.addEmpleado(emp);
return "redirect:/ListadoEmpleado";
}
@GetMapping("ListadoEmpleado")
public String listaEmpleado(Model m){
m.addAttribute("empleadolist", empleadoServices.getAllEmpleados());
m.addAttribute("title", "Employee Report");
return "ListadoEmpleado";
}
//lode edit form
@GetMapping("/editEmpleado/{id}")
public String cargaEmpleado(@PathVariable(value="id") Long id, Model m){
Empleado emp=empleadoServices.getById(id);
System.out.println(emp);
m.addAttribute("empleadolist", emp);
m.addAttribute("title", "Edit Employee");
return "EditaEmpleado";
}
@PostMapping("/editEmpleado/updateEmployee")
public String actualizaEmpleado(@ModelAttribute("updateEmployee") Empleado emp){
empleadoServices.updateEmpleado(emp);
return "redirect:/ListadoEmpleado";
}
@GetMapping("/deleteEmpleado/{id}")
public String eliminaEmpleado(@PathVariable Long id)
{
empleadoServices.deleteEmpleado(id);
return "redirect:/ListadoEmpleado";
}
}
5-Create views , AddEmpleado.jsp, EditaEmpleado.jsp and ListaEmpleado.jsp
AddEmpleado.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<%@include file="./base.jsp"%>
</head>
<body>
<div class="container mt-3">
<h1>Agregar empleado</h1>
<form action="insertEmpleado" method="post">
<!-- ++++++++++++++++++++++++++++++++++++++ -->
<div class="row">
<div class="col">
<div class="form-group">
<label for="nombre">Nombre Completo</label> <input type="text"
class="form-control" id="nombre" name="nombre"
placeholder="Entre su nombre completo">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="email">Email</label> <input type="text"
class="form-control" id="email" name="email"
placeholder="Entre su email">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="telefono">Telefono</label> <input type="text"
class="form-control" id="telefono" name="telefono"
placeholder="Entre su numero telefonico">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="departamento">Departamento</label> <input type="text"
class="form-control" id="departamento" name="departamento"
placeholder="Departamento al que pertenece">
</div>
</div>
</div>
<!-- ++++++++++++++++++++++++++++++++++++++ -->
<div class="row">
<div class="col">
<div class="form-group">
<label for="puesto">Puesto</label> <input
type="text" class="form-control" id="puesto"
name="puesto" placeholder="Coloque su puesto laboral">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="salario">Salario Estimado $Us</label> <input type="number"
class="form-control" id="salario" name="salario"
placeholder="Salario Estimado $Us">
</div>
</div>
</div>
<!-- +++++++++++++++++++++++++++++++++++++++++++ -->
<!-- +++++++++++++++++++++++++++++++++++++++++++++ -->
<div class="row">
<div class="col">
<div class="form-group">
<label for="observacion">Observacion</label>
<textarea class="form-control" id="observacion" name="observacion"
rows="5" placeholder="Enter Address"> </textarea>
</div>
</div>
</div>
<a href="${pageContext.request.contextPath }/"
class="btn btn-warning"> INICIO </a>
<button type="submit" class="btn btn-primary">REGISTRAR</button>
</form>
</div>
</body>
</html>
ListadoEmpleado.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<%@include file="./base.jsp"%>
</head>
<body>
<div class="container mt-3">
<h3> <img src="resources/assets/logo_cw.png" alt="logo" style="width:120px;">Agregar Empleado</h3>
<a href="addEmpleado" class="btn btn-info btn-sm"> AGREGAR </a>
<div class="row">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Nombre</th>
<th scope="col">Email</th>
<th scope="col">Telefono</th>
<th scope="col">Departamento</th>
<th scope="col">Puesto</th>
<th scope="col">Salario</th>
<th scope="col">Observacion</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<c:forEach var="emp" items="${empleadolist}">
<tr>
<td class="table-plus">${emp.id}</td>
<td>${emp.nombre}</td>
<td>${emp.email}</td>
<td>${emp.telefono}</td>
<td>${emp.departamento}</td>
<td>${emp.puesto}</td>
<td>${emp.salario}</td>
<td>${emp.observacion}</td>
<td><a href="editEmpleado/${emp.id}" class="btn btn-success btn-sm">
EDITAR </a></td>
<td><a href="deleteEmpleado/${emp.id}"
class="btn btn-danger btn-sm"> ELIMINAR </a></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</body>
</html>
EditaEmpleado.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<%@include file="./base.jsp"%>
</head>
<body>
<div class="container mt-3">
<h1>Editar Empleado</h1>
<form action="updateEmployee" method="post">
<!-- +++++++++++++++++++++++++++++++ -->
<div class="row">
<div class="col">
<div class="form-group">
<label for="id">Id</label> <input type="text"
value="${empleadolist.id}" class="form-control" id="id" name="id"
readonly="readonly">
</div>
</div>
</div>
<!-- +++++++++++++++++++++++++++++++ -->
<div class="row">
<div class="col">
<div class="form-group">
<label for="nombre">Nombre Completo</label> <input type="text"
value="${empleadolist.nombre}" class="form-control" id="nombre"
name="nombre" placeholder="Enter Nombre">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="email">Email</label> <input type="text"
value="${empleadolist.email}" class="form-control"
id="email" name="email"
placeholder="Enter email">
</div>
</div>
</div>
<!-- +++++++++++++++++++++++++++++++++++++++++++++++ -->
<!-- +++++++++++++++++++++++++++++++ -->
<div class="row">
<div class="col">
<div class="form-group">
<label for="telefono">Telefono</label> <input type="text"
value="${empleadolist.telefono}" class="form-control" id="telefono"
name="telefono" placeholder="Enter telefono">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="departamento">Departamento</label> <input type="text"
value="${empleadolist.email}" class="form-control"
id="departamento" name="departamento"
placeholder="Enter Departamento">
</div>
</div>
</div>
<!-- +++++++++++++++++++++++++++++++++++++++++++++++ -->
<div class="row">
<div class="col">
<div class="form-group">
<label for="puesto">Puesto</label> <input
type="text" class="form-control" id="puesto"
value="${empleadolist.puesto }" name="puesto"
placeholder="Enter puesto">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="salario">Salario</label> <input type="number"
value="${empleadolist.salario }" class="form-control" id="salario"
name="salario" placeholder="Enter Salary">
</div>
</div>
</div>
<!-- +++++++++++++++++++++++++++++++++++++++++++++++ -->
<div class="row">
<div class="col">
<div class="form-group">
<label for="observacion">Observacion</label>
<textarea class="form-control" id="observacion" name="observacion"
rows="5" placeholder="Enter observacion"> ${empleadolist.observacion } </textarea>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">GUARDAR</button>
</form>
</div>
</body>
</html>
6-FINISH!! NOW RUN THE PROJECT
Gracias por visitar mi blog. Diego Vargas Analista Programador