📍Practica 17: 👨‍💻Spring MVC 4.3.29 con Base de Datos MYSQL Acciones Listar, Insertar, Editar, Eliminar de una Tabla con JdbcTemplate

Bienvenidos al Blog,en esta oportunidad los traigo una actividad desarrollada en SPRING MVC version 4.3.29, Usando Java EE 7 , con conexion a la base de datos MYSQL 8, en el proyecto tambien se implementará el CDN de boostrap 5.

El objetivo del Proyecto es realizar lo siguiente:

Crear una aplicación web, que permita ingresar datos al usuario como: nombre, correo, telefono, estos datos ingresados se deben registrar en una tabla de la BD, el ID de registro debe ser AUTO INCREMENTABLE, la aplicación permitirá al usuario modificar y eliminar los registro de un determinado usuario.

Imagen del Proyecto Terminado.

Pasos:

1. Crear el Proyecto Spring MVC.
2. Crear la clase controlador , clase pojo y la clase de conexion a la DB MYSQL.
3. Implementar el codigo de la Clase de conexion , clase controlador y del pojo.
4. Crear dos Jsp:
1. Para el Formulario del Registro.
2. Para el  Formulario del Editar.
5. Configuración del Proyecto del Disdispatcher-servlet.xml y agregar libreria.

CREACIÓN DEL PROYECTO

Comencemos abriendo el IDE Apache Netbeans 12.5 y creando nuestro proyecto : NEW PROJECT > SELECCIONAR JAVA WEB > WEB APPLICATION, Presionar Next.

Luego procedemos a indicar el nombre del proyecto y la ubicación donde se almacenará el proyecto.

Siguiendo las indicaciones del IDE seleccionamos el servidor web que deseamos que el proyecto utilice para que se ejecute, version de Java EE y el context path, aunque el context path luego tambien lo podemos modificar.

Configuramos el framework que utilizaremos seleccionamos Spring MVC abajo indicamos que utilizaremos la version que es 4.3.29  y seleccionamos que nos agregue la libreria JSTL para manejo de tags y por ultimo presionamos finish.

Terminando los pasos anterior, el IDE nos creará nuestro proyecto con las configuraciones predeterminadas, si ejecutamos el proyecto claro que ejecutará y nos mostrará un texto que spring implementa por defecto en un JSP llamado index.jsp.

Proyecto Ejecutado, por primera vez, sin ninguna modificación.

Creación de la Clase Controlador , Clase Pojo y la clase de conexion a la DB MYSQL

Una vez creado el proyecto ahora nos dirijimos SOURCE PACKAGE,hacemos clic derecho y seleccionamos NEW JAVA CLASS, indicamos el nombre de la clase y tambien el nombre del paquete de lo contendra, por ultimo finish

Tambien creamos una pojo(Clase simple), con sus metodos getter y setter.

Por ultimo creamos la clase de conexion, que se llamará como indica en la imagen.

Implementar el codigo de la Clase de conexion , clase controlador y del pojo

Una vez creado las clase conexion y la clase controladora y la clase pojo, procedemos a implementar las lineas de codigo de las clase, primero implementaremos la clase conexion porque esta trabaja las otras clases, es decir la clase controles necesita de la clase conexion por eso primero procedemos a implementarlo.

Lineas de codigo de la clase Conexion a la Base de Datos MYSQL.

package edu.ibero.model; import org.springframework.jdbc.datasource.DriverManagerDataSource; /** * * @author IBERO */ public class ConexionDB { // Declaramos los datos de conexion a la bd driver private static final String driver = "com.mysql.jdbc.Driver"; //url de la db puerto, db autilizar e indicamos el caracterencoding private static final String url = "jdbc:mysql://localhost:3306/dbibero?characterEncoding=UTF-8"; //credenciales de conexion a la DB private static final String user = "root"; private static final String pass = "12345"; //metodo de tipo DriverManagerSource public DriverManagerDataSource conectar() { //crear un objeto de la clase DriverManagerDataSource DriverManagerDataSource dataSource = new DriverManagerDataSource(); //pasos los datos de conexion al DriverManagerDataSource - DRIVER, URL,USER,PASS dataSource.setDriverClassName(driver); dataSource.setUrl(url); dataSource.setUsername(user); dataSource.setPassword(pass); //Retornamos el DriverManagerDataSource return dataSource; } }

Codigo de la Clase Pojo.

package edu.ibero.model; package edu.ibero.model; /** * * @author IBERO */ public class Persona { private int id; private String nombre; private String correo; private String telefono; public Persona() { } public Persona(String nombre, String correo, String telefono) { this.nombre = nombre; this.correo = correo; this.telefono = telefono; } public Persona(int id, String nombre, String correo, String telefono) { this.id = id; this.nombre = nombre; this.correo = correo; this.telefono = telefono; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getNombre() { return nombre; } public void setNombre(String nombre) { this.nombre = nombre; } public String getCorreo() { return correo; } public void setCorreo(String correo) { this.correo = correo; } public String getTelefono() { return telefono; } public void setTelefono(String telefono) { this.telefono = telefono; } }

Luego implementamos el codigo de la clase Controladora. que lo cambiamos de nombre para saber que es un controlador de Personas lo llamamos PersonaController.

Primero agregamos a la clase la anotación @Controller que indica que esta clase va ser un controlador de vistas.

Creamos un objeto de JDBCTemplate.

En el constructor creamos una instancia de la Clase conexionDB, y lo instanciamos al objeto de JDBCTemplate.

Posterior creamos los metodos:

Metodo de carga de la vista principal, metodo de Tipo ModelAndView, creamos una variable de cadena  donde realizamos la consulta select a la tabla, en una variable de tipo List instanciamos con los datos que lo mandamos del sql, esos datos enviamos con la variable datos, a la vista index.

@RequestMapping("index.htm") trabaja con el HandlerMapping que se ocupa del mapeo de las url de las vistas.

@RequestMapping("index.htm") public ModelAndView showHome() { ModelAndView model = new ModelAndView(); String sql = "select * from usuarios ORDER BY id asc"; //order by id desc --> ordena de mayor a menor List datos = jdbcTemplate.queryForList(sql); model.addObject("datos", datos); model.setViewName("index"); return model; }

   

Luego en la parte superior de los metodos agregamos la anotacion @RequestMapping(value = "add.htm", method = RequestMethod.GET) y @RequestMapping(value = "add.htm", method = RequestMethod.POST), que nos ayudarán a manejar solicitudes HTTP y solicitudes de tipo POST y GET.

Nota:Los métodos GET y POST se utilizan para enviar los datos al servidor, y la principal diferencia entre ellos es que el método GET añade los datos a la URI definida en el atributo de acción del formulario. Por el contrario, el método POST adjunta datos al organismo solicitado.

Clase controladora Completa:

package edu.ibero.controller; import edu.ibero.model.ConexionDB; import edu.ibero.model.Persona; import java.sql.ResultSet; import java.sql.SQLException; import java.util.List; import javax.servlet.http.HttpServletRequest; import org.springframework.dao.DataAccessException; import org.springframework.jdbc.core.JdbcTemplate; import org.springframework.jdbc.core.ResultSetExtractor; import org.springframework.stereotype.Controller; import org.springframework.validation.BindingResult; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.support.SessionStatus; import org.springframework.web.servlet.ModelAndView; @Controller public class PersonaController { private final JdbcTemplate jdbcTemplate; public PersonaController() { ConexionDB con = new ConexionDB(); this.jdbcTemplate = new JdbcTemplate(con.conectar()); } @RequestMapping("index.htm") public ModelAndView showHome() { ModelAndView model = new ModelAndView(); String sql = "select * from usuarios ORDER BY id asc"; //order by id desc --> ordena de mayor a menor List datos = jdbcTemplate.queryForList(sql); model.addObject("datos", datos); model.setViewName("index"); return model; } @RequestMapping(value = "add.htm", method = RequestMethod.GET) public ModelAndView showAdd() { ModelAndView model = new ModelAndView(); model.setViewName("add"); model.addObject("usuarios", new Persona()); return model; } @RequestMapping(value = "add.htm", method = RequestMethod.POST) public ModelAndView showAdd( @ModelAttribute("usuarios") Persona user, BindingResult result, SessionStatus status) { if (result.hasErrors()) { ModelAndView model = new ModelAndView(); model.setViewName("add"); model.addObject("usuarios", new Persona()); return model; } else { this.jdbcTemplate.update( "insert into usuarios(nombre,correo,telefono) value(?,?,?)", user.getNombre(), user.getCorreo(), user.getTelefono()); return new ModelAndView("redirect:/index.htm"); } } @RequestMapping(value = "edit.htm", method = RequestMethod.GET) public ModelAndView showEdit(HttpServletRequest request) { ModelAndView model = new ModelAndView(); int id = Integer.parseInt(request.getParameter("id")); Persona users = this.selectUsuarios(id); model.setViewName("edit"); model.addObject("usuarios", new Persona(id, users.getNombre(), users.getCorreo(), users.getTelefono())); return model; } @RequestMapping(value = "edit.htm", method = RequestMethod.POST) public ModelAndView showEdit(@ModelAttribute("usuarios") Persona user, BindingResult result, SessionStatus status, HttpServletRequest request ) { if (result.hasErrors()) { ModelAndView model = new ModelAndView(); int id = Integer.parseInt(request.getParameter("id")); Persona users = this.selectUsuarios(id); model.setViewName("edit"); model.addObject("usuarios", new Persona(id, users.getNombre(), users.getCorreo(), users.getTelefono())); return model; } else { int id = Integer.parseInt(request.getParameter("id")); jdbcTemplate.update("update usuarios set nombre=?,correo=?,telefono=? where id=?", user.getNombre(), user.getCorreo(), user.getTelefono(), id); return new ModelAndView("redirect:/index.htm"); } } @RequestMapping("del.htm") public ModelAndView showDelete(HttpServletRequest request) { int id = Integer.parseInt(request.getParameter("id")); this.jdbcTemplate.update("delete from usuarios where id=?", id); return new ModelAndView("redirect:/index.htm"); } public Persona selectUsuarios(int id) { final Persona users = new Persona(); String sql = "select * from usuarios where id='" + id + "'"; return (Persona) jdbcTemplate.query(sql, new ResultSetExtractor<Persona>() { @Override public Persona extractData(ResultSet rs) throws SQLException, DataAccessException { if (rs.next()) { users.setNombre(rs.getString("nombre")); users.setCorreo(rs.getString("correo")); users.setTelefono(rs.getString("telefono")); } return users; } }); } }

Creación de las Vistas 

Creamos un JSP llamado form ,  agregamos las siguientes lineas de codigo: Este JSP manejara las solicitudes GET.

Lineas de Codigo del index.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"/> <link rel="icon" href="<c:url value="/img/01.ico"/>" > <title>Index</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> </head> <body> <nav class="navbar navbar-expand-md navbar-light bg-light border-4 border-bottom border-info"> <div class="container-fluid"> <a href="#" class="navbar-brand">Campus El Informático</a> <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menunav"> <span class="navbar-toggler-icon"></span> </button> <div id="menunav" class="collapse navbar-collapse"> <ul class="navbar-nav ms-3"> <li class="nav-item"> <a class="nav-link " href="<c:url value="#"/>">Home </a> </li> <li class="nav-item"> <a class="nav-link " href="<c:url value="#"/>">Index</a> </li> </ul> </div> </div> </nav> <div class="container-fluid"> <br> <div class="container"> <div class="row"> <h1 class="text-info"> Ejercicio JDBC Template</h1> <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="<c:url value="/index.htm"/>">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Listar</li> </ol> </nav> <p> <a href="<c:url value="add.htm"/>" class="btn btn-success"> <ion-icon name="create-sharp"></ion-icon> Agregar</a> </p> <table class="table table-bordered table-hover table-striped"> <thead> <tr> <th>ID</th> <th>Nombre</th> <th>E-mail</th> <th>Teléfono</th> <th>Acciones</th> </tr> </thead> <tbody> <c:forEach items="${datos}" var="dato"> <tr> <td><c:out value="${dato.id}"/></td> <td><c:out value="${dato.nombre}"/></td> <td><c:out value="${dato.correo}"/></td> <td><c:out value="${dato.telefono}"/></td> <td> <a href="<c:url value="del.htm?id=${dato.id}"/>" class="btn btn-danger"> <ion-icon <ion-icon name="trash"></ion-icon></ion-icon></a> <a href="<c:url value="edit.htm?id=${dato.id}"/>" class="btn btn-warning"> <ion-icon name="pencil"></ion-icon></a> </td> </tr> </c:forEach> </tbody> </table> </div> </div> </div> </body> </html>

Luego creamos las vistas para el manejo de Editar y registrar usuarios.

JSP de Editar datos de usuarios:

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Editar Datos</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> </head> <body> <nav class="navbar navbar-expand-md navbar-light bg-light border-4 border-bottom border-info"> <div class="container-fluid"> <a href="#" class="navbar-brand">Campus El Informático</a> <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menunav"> <span class="navbar-toggler-icon"></span> </button> <div id="menunav" class="collapse navbar-collapse"> <ul class="navbar-nav ms-3"> <li class="nav-item"> <a class="nav-link " href="<c:url value="#"/>">Home </a> </li> <li class="nav-item"> <a class="nav-link " href="<c:url value="#"/>">Index</a> </li> </ul> </div> </div> </nav> <div class="container" > <br> <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="<c:url value="/index.htm"/>">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Editar</li> </ol> </nav> <div class=""> <div class="card text-dark mb-3"> <div class="card-header"> Formulario </div> <div class="card-body"> <form:form method="post" commandName="usuarios"> <h3 class="text-info">Editar datos</h3> <form:errors path="*" element="div" class="alert alert-danger" role="alert"></form:errors> <p> <form:label path="nombre">Nombre : </form:label> <form:input path="nombre" cssClass="form-control"></form:input> </p> <p> <form:label path="correo">E-mail : </form:label> <form:input path="correo" cssClass="form-control"></form:input> </p> <p> <form:label path="telefono">Telefono : </form:label> <form:input path="telefono" cssClass="form-control"></form:input> </p> <hr> <input type="submit" value="Enviar" class="btn btn-outline-danger"/> </form:form> </div> </div> </div> </div> </body> </html>

JSP de Registrar usuario:

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Crear nuevo usuario</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> </head> <body> <nav class="navbar navbar-expand-md navbar-light bg-light border-4 border-bottom border-info"> <div class="container-fluid"> <a href="#" class="navbar-brand">Campus El Informático</a> <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menunav"> <span class="navbar-toggler-icon"></span> </button> <div id="menunav" class="collapse navbar-collapse"> <ul class="navbar-nav ms-3"> <li class="nav-item"> <a class="nav-link " href="<c:url value="#"/>">Home </a> </li> <li class="nav-item"> <a class="nav-link " href="<c:url value="#"/>">Index</a> </li> </ul> </div> </div> </nav> <div class="container" > <br> <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="<c:url value="/index.htm"/>">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Agregar</li> </ol> </nav> <div class=""> <div class="card text-dark mb-3"> <div class="card-header"> Formulario </div> <div class="card-body"> <form:form method="post" commandName="usuarios"> <h3 class="text-info">Complete el Formulario</h3> <form:errors path="*" element="div" class="alert alert-danger" role="alert"></form:errors> <p> <form:label path="nombre">Nombre : </form:label> <form:input path="nombre" cssClass="form-control"></form:input> </p> <p> <form:label path="correo">E-mail : </form:label> <form:input path="correo" cssClass="form-control"></form:input> </p> <p> <form:label path="telefono">Telefono : </form:label> <form:input path="telefono" cssClass="form-control"></form:input> </p> <hr> <input type="submit" value="Enviar" class="btn btn-outline-danger"/> </form:form> </div> </div> </div> </div> </body> </html>

Configuración del Proyecto del Disdispatcher-servlet.xml

Ahora nos dirijimos al archivo de configuración del proyecto y agregamos las siguientes lineas dentro del bean.

Tambien agregamos en la parte de abajo las siguientes lineas de codigo:

Con ello nos evitamos de estar creando varias beans por cada vista y por cada clase controladora.

En los proyectos anterios se tenia que implementar estas lineas de codigo de abajo pero ahora que se realizao estas insercciones nos ahorra ese trabajo, son una de las ventas de SPRING.

Antes se tenia que agregar, ahora no.

<!---CLASS="RUTA : PAQUETE DE LA CLASE Y NOMBRE DE LA CLASE"--> <bean name="homeController" class="edu.ibero.controller.HomeController"/>

Ultimo Agregamos en el URLMAPPING el prop key de la vista creada. - Tambien no agregar.

<!---EN URLMAPPING AGRAGAMOS--> <prop key="form.htm">homeController</prop>

Ejecutamos el Proyecto y vemos que se nos levanta el proyecto y nos muestra el index, pero si cambiamos de index.html a form.htm vemos que nos carga la vista del formulario.

VISTA  INDEX - LISTAR USUARIO

VISTA REGISTRAR USUARIOS

VISTA EDITAR USUARIO

Funcion Eliminar: Si probamos la funcionalidad del boton eliminar que esta en la columna de acciones veremos que esos datos se eliminan.

En la proxima publicación tengo pensado IMPLEMENTAR un proyecto mas completo con Spring MVC Multicapas y con base de datos Oracle, no se piendan nada sobre el contenido sigan la pagina El Informatico Ibero↗

📍Practica 16: 👨‍💻Spring MVC 4.3.29, Trabajo con method=RequestMethod.GET y method= RequestMethod.POST, Anotaciones @Controller y @RequestMapping

Bienvenidos en la presente publicación del Blog UN PROYECTO SPRING MVC , se trabajará con spring framework version 4.3.29 MVC, con el IDE apache Netbeans version 12.5.

Objetivo del Proyecto Trabajar con formulario en el JSP, method = RequestMethod.GET y method = RequestMethod.POST, Cargar datos en el JSP Automatico por defecto, PERMITIR ingresar al usuario nombre, correo  y edad, al enviar esos datos deben ser capturados y Mostrardos en JSP.

Pasos:

1. Crear el Proyecto Spring MVC.
2. Crear la clase controlador y clase pojo
3. Implementar el codigo del controlador y del pojo.
4. Crear dos Jsp:
1. Para el Formulario del Get
2. Para el Resultado de Post
5. Configuración del Proyecto del Disdispatcher-servlet.xml

CREACIÓN DEL PROYECTO

Comencemos abriendo el IDE y creando nuestro proyecto : NEW PROJECT > SELECCIONAR JAVA WEB > WEB APPLICATION, Presionar Next.

Luego procedemos a indicar el nombre del proyecto y la ubicación donde se almacenará el proyecto.

Siguiendo las indicaciones del IDE seleccionamos el servidor web que deseamos que el proyecto utilice para que se ejecute, version de Java EE y el context path, aunque el context path luego tambien lo podemos modificar.

Configuramos el framework que utilizaremos seleccionamos Spring MVC abajo indicamos que utilizaremos la version que es 4.3.29  y seleccionamos que nos agregue la libreria JSTL para manejo de tags y por ultimo presionamos finish.

Terminando los pasos anterior, el IDE nos creará nuestro proyecto con las configuraciones predeterminadas, si ejecutamos el proyecto claro que ejecutará y nos mostrará un texto que spring implementa por defecto en un JSP.

Proyecto Ejecutado, por primera vez, sin ninguna modificación.

Creación de la Clase Controlador y Clase Pojo

Una vez creado el proyecto ahora nos dirijimos SOURCE PACKAGE,hacemos clic derecho y seleccionamos NEW JAVA CLASS, indicamos el nombre de la clase y tambien el nombre del paquete de lo contendra, por ultimo finish

Tambien creamos una pojo(Clase simple), con sus metodos getter y setter.

Implementamos el Codigo de la clase controlador y del Pojo.

Creado la clase implementamos el codigo de la clase Pojo y del controlador.

Codigo de la Clase Pojo.

package edu.ibero.model; public class Persona { private int id; private String name; private String correo; private int edad; //constructor vacio public Persona() { } //constructor con parametros public Persona(String name, String correo, int edad) { this.name = name; this.correo = correo; this.edad = edad; } //metodos de acceso public String getName() { return name; } public void setName(String name) { this.name = name; } public String getCorreo() { return correo; } public void setCorreo(String correo) { this.correo = correo; } public int getEdad() { return edad; } public void setEdad(int edad) { this.edad = edad; } public int getId() { return id; } public void setId(int id) { this.id = id; } }

Luego implementamos el codigo de la clase Controladora.

Primero agregamos a la clase la anotación @Controller que indica que esta clase va ser un controlador de vistas.

Posterior creamos dos metodos:

    Un metodo de tipo ModelAndView que solo retorna la vista y el contructor de la clase pojo.

    Un segundo Metodo que realizara la captura de los datos enviados.

Luego en la parte superior de los metodos agregamos la anotacion @@RequestMapping(value = "form.htm", method = RequestMethod.GET) y @RequestMapping(value = "form.htm", method = RequestMethod.POST), que nos ayudarán a manejar solicitudes HTTP y solicitudes de tipo POST y GET.

Nota:Los métodos GET y POST se utilizan para enviar los datos al servidor, y la principal diferencia entre ellos es que el método GET añade los datos a la URI definida en el atributo de acción del formulario. Por el contrario, el método POST adjunta datos al organismo solicitado.

package edu.ibero.controller; import edu.ibero.model.Persona; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.servlet.ModelAndView; /** * * * @author IBERO */ @Controller public class HomeController { //requesmapping solicitudes web a los métodos de Spring Controller //method indicamos que esta vista debe realizar una peticion GET @RequestMapping(value = "form.htm", method = RequestMethod.GET) public ModelAndView showForm() { //indicamos en el return el nombre de la vista //y cargamos lo valores por defecto desde el contructor de la Clase //tambien no podemos decir que no cargue ningun valor new Persona() return new ModelAndView("form", "command", new Persona("Ricardo Mendoza", "test@gmail.com", 26)); } //requesmapping solicitudes web a los métodos de Spring Controller //method indicamos que esta vista debe realizar una peticion POST @RequestMapping(value = "form.htm", method = RequestMethod.POST) public String resultForm(Persona per, ModelMap model) { //enaviamos los datos capturados del get model.addAttribute("name", per.getName()); model.addAttribute("correo", per.getCorreo()); model.addAttribute("edad", per.getEdad()); //indicamos que se cargue en la vista return "resulForm"; } }

Creación de las Vistas 

Creamos un JSP llamado form ,  agregamos las siguientes lineas de codigo: Este JSP manejara las solicitudes GET.

<%@page contentType="text/html" pageEncoding="UTF-8"%> <%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Formulario de Spring</title> </head> <body > <div> <h1>Formulario</h1> <form:form> <p> <form:label path="name"> Nombre del Usuario</form:label> <form:input path="name"/> </p> <p> <form:label path="correo"> E-mail del Usuario</form:label> <form:input path="correo"/> </p> <p> <form:label path="edad"> Edad de Usuario</form:label> <form:input path="edad"/> </p> <hr> <form:button class="btn btn-dark">Procesar</form:button> </form:form> </div> </body> </html>

Luego creamos un JSP para el manero de las solicitud POST, que se encargara recibir los datos.

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Resultado del Formulario</title> </head> <body> <h1>Datos capturados</h1> <ul> <li>Nombre : <c:out value="${name}"/></li> <li>E-mail : <c:out value="${correo}"/></li> <li>Edad : <c:out value="${edad}"/></li> </ul> </body> </html> }

Configuración del Proyecto del Disdispatcher-servlet.xml

Ahora nos dirijimos al archivo de configuración del proyecto y agregamos las siguientes lineas de bean.

agregamos el controllerclassnamehandlermapping que nos ayuda al mapeo de las url de las vistas.

<bean class="org.springframework.web.servlet.mvc.support.ControllerClassNameHandlerMapping"/>

Luego agregamos otro bean donde indicamos la ruta del controlador y indicamos un alias o nombre del bean.

<!---CLASS="RUTA : PAQUETE DE LA CLASE Y NOMBRE DE LA CLASE"--> <bean name="homeController" class="edu.ibero.controller.HomeController"/>

Ultimo Agregamos en el URLMAPPING el prop key de la vista creada.

<!---EN URLMAPPING AGRAGAMOS--> <prop key="form.htm">homeController</prop>

Nota : pueden trabajar con el index por defecto o pueden crear un nuevo JSP, es decisión del programador y su forma de trabajo.

Ejecutamos el Proyecto y vemos que se nos levanta el proyecto y nos muestra el index, pero si cambiamos de index.html a form.htm vemos que nos carga la vista del formulario.

VISTA POR DEFECTO 

VISTA CREADO POR NOSOTROS

Al modificar los valores por defecto, y presionamos el boton procesar se cargara el segundo JSP que muestra los datos enviados, tal como se muestra en la imagen.

En la proxima publicación tengo pensado IMPLEMENTAR un proyecto con conexion a la base de datos MYSQL desde una clase, y trabajar con JDBCTemplate- Realizando CRUD en la Base de Datos desde Java Spring Web↗