Cómo integrar Bootstrap con JSP y crear un proyecto Web en Java 8
Hola que tal, bienvenido a este nuevo artículo, en donde aprenderás: Cómo integrar Bootstrap con JSP y crear un proyecto Web en Java 8.
En un artículo anterior habíamos visto CÓMO CREAR UN CRUD EN JAVA WEB CON JSP Y SERVLET que mostraba paso a paso como crear un CRUD básico en Java, el artículo es algo sencillo en cuanto a la presentación (Vistas), puesto que la idea era mostrar como se hace la funcionalidad, también conocida como backend o programación del lado del servidor. A diferencia, en este artículo te voy a mostrar como integrar Bootstrap con JSP, vamos a crear paso a paso un Proyecto Web en Java, aunque no interactuamos directamente con una base de datos, lo haremos a través de una lista de contenido estático de manera que podamos simular los métodos CRUD, adicionalmente y lo más interesante que haremos, es usar el API de Java 8 para mostrar, crear, actualizar, buscar y eliminar registros, de momento te dejo una vista previa de como quedará al final la aplicación.
Si deseas conocer un poco más acerca del API Java 8 puedes visitar los siguientes enlaces: TUTORIAL DE EXPRESIONES LAMBDA EN JAVA 8 PASO A PASO, y EJEMPLOS PRÁCTICOS DE EXPRESIONES LAMBDA EN JAVA 8.
Que necesitas?
Tener instalado Java 8, descargar Eclipse Neon y configurado con Apache Tomcat, si no tienes instalado nada de lo anterior, puedes hacerlo revisando estos tutoriales: Instalar Java 8, Consola VS IDE, Integrar Apache en Eclipse.
Hoja de ruta de lo que vamos hacer
Crear el proyecto Web.
Convertir el proyecto Web a Maven y configurar el archivo pom.xml.
Crear el paquete model y dentro la clase Estudiante.
Crear el paquete service y dentro una lista estática.
Crear el paquete DAO y dentro la clase DAO (métodos CRUD).
Crear el paquete controller y dentro el servlet.
Crear las Vistas.
Estructura completa del Proyecto
A continuación te dejo la estructura de la aplicación completa para que la puedas comparar al final del ejercicio y evitar algún problema.
Crear el Web Dynamic Project
Para crear el proyecto debes ir a: File->New->Dynamic Web Project.
La siguiente imagen muestra en parte como crear el proyecto Web y darle su nombre.
Es importante que en el proyecto, la versión de Servlet sea la 3.1 y que esté atado al contenedor de Servlet Apache Tomcat.
Convertir el Proyecto a Maven
Usando Eclipse procedemos a convertir el proyecto a Maven, dando click derecho sobre el proyecto y luego como se muestra en la imagen.
Te va pedir algunos datos con respeto al proyecto Maven.
Finalmente se añade las dependencias al archivo pom.xml que para el ejemplo, solo usaremos jstl, a continuación un fragmento.
|
1 2 3 4 5 6 7 |
<dependencies> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> </dependencies> |
Es importante que para este ejercicio, previamente hayas realizado el ejemplo del artículo CÓMO CREAR UN CRUD EN JAVA WEB CON JSP Y SERVLET puesto que ahí explico de manera más detallada por que y la configuración completa del archivo pom.xml.
Crear la clase Estudiante para el modelo
Esta clase contiene los atributos para simular los métodos CRUD y debe estar dentro del paquete com.ecodeup.estudiante.model. A continuación dejo un fragmento de esta clase.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
package com.ecodeup.estudiante.model; /* * @autor: Elivar Largo * @ web: www.ecodeup.com */ public class Estudiante { private long id; private String nombre; private String apellido; private String fechaNacimiento; private String carrera; private String semestre; private String email; private static final AtomicLong contador = new AtomicLong(100); public Estudiante(long id, String nombre, String apellido, String fechaNacimiento, String carrera, String semestre, String email) { this.id = id; this.nombre = nombre; this.apellido = apellido; this.fechaNacimiento = fechaNacimiento; this.carrera = carrera; this.semestre = semestre; this.email = email; } public Estudiante(String nombre, String apellido, String fechaNacimiento, String carrera, String semestre, String email) { this.id = contador.incrementAndGet(); this.nombre = nombre; this.apellido = apellido; this.fechaNacimiento = fechaNacimiento; this.carrera = carrera; this.semestre = semestre; this.email = email; } } |
Crear la clase lo métodos CRUD para la tabla artículos
Esta clase contiene todos los métodos CRUD. Lo más importante es que se usa funciones lambda para algunos métodos CRUD, esta clase debe estar dentro del paquete com.ecodeup.estudiante.dao.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
package com.ecodeup.estudiante.dao; import java.util.Comparator; import java.util.List; import java.util.Optional; import java.util.function.Predicate; import java.util.stream.Collectors; import com.ecodeup.estudiante.model.Estudiante; import com.ecodeup.estudiante.service.ListaEstudiante; /* * @autor: Elivar Largo * @web: www.ecodeup.com */ public class EstudianteDAO { List<Estudiante> listaEstudiantes = ListaEstudiante.getListaEstudiante(); public List<Estudiante> obtenerEstudiantes() { return listaEstudiantes; } public List<Estudiante> buscarPorNombre(String nombre) { Comparator<Estudiante> groupByComparator = Comparator.comparing(Estudiante::getNombre) .thenComparing(Estudiante::getApellido); List<Estudiante> result = listaEstudiantes.stream() .filter(e -> e.getNombre().equalsIgnoreCase(nombre) || e.getApellido().equalsIgnoreCase(nombre)) .sorted(groupByComparator).collect(Collectors.toList()); return result; } public Estudiante obtenerEmpleado(long id) throws Exception { Optional<Estudiante> match = listaEstudiantes.stream().filter(e -> e.getId() == id).findFirst(); if (match.isPresent()) { return match.get(); } else { throw new Exception("El estudiante con ID: " + id + " no fue econtrado"); } } public long guardarEstudiante(Estudiante estudiante) { listaEstudiantes.add(estudiante); return estudiante.getId(); } public boolean actualizarEstudiante(Estudiante estudiante) { int idActualizar = 0; Optional<Estudiante> estudianteEncontrado = listaEstudiantes.stream().filter(c -> c.getId() == estudiante.getId()).findFirst(); if (estudianteEncontrado.isPresent()) { idActualizar = listaEstudiantes.indexOf(estudianteEncontrado.get()); listaEstudiantes.set(idActualizar, estudiante); return true; } else { return false; } } public boolean eliminarEstudiante(long id) { Predicate<Estudiante> estudiante = e -> e.getId() == id; if (listaEstudiantes.removeIf(estudiante)) { return true; } else { return false; } } } |
Crear el Servlet que sirve de controlador
El Servlet se llama EstudianteServlet, pero está mapeado a través de anotaciones como: /estudiante, y se encuentra dentro del paquete com.ecodeup.estudiante.controller.
En el Servlet manejamos todas las peticiones realizadas desde la vista, tanto por el método get, como por el método post.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 |
package com.ecodeup.estudiante.controller; import java.io.IOException; import java.util.List; import java.util.logging.Level; import java.util.logging.Logger; import javax.servlet.RequestDispatcher; 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.ecodeup.estudiante.dao.EstudianteDAO; import com.ecodeup.estudiante.model.*; /** * Servlet implementation class EstudianteServlet */ @WebServlet(name = "EstudianteServlet", urlPatterns = { "/estudiante" }) public class EstudianteServlet extends HttpServlet { private static final long serialVersionUID = 1L; EstudianteDAO estudianteDAO = new EstudianteDAO(); /** * @see HttpServlet#HttpServlet() */ public EstudianteServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse * response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub String action = request.getParameter("buscarAction"); System.out.println(action); if (action != null) { switch (action) { case "buscarPorId": buscarPorId(request, response); break; case "buscarPorNombre": buscarPorNombre(request, response); break; case "nuevo": nuevoEstudiante(request, response); break; } } else { List<Estudiante> result = estudianteDAO.obtenerEstudiantes(); mostrarListaEstudiantes(request, response, result); } } private void buscarPorId(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { long idEstudiante = Integer.valueOf(req.getParameter("idEstudiante")); Estudiante estudiante = null; try { estudiante = estudianteDAO.obtenerEmpleado(idEstudiante); } catch (Exception ex) { Logger.getLogger(EstudianteServlet.class.getName()).log(Level.SEVERE, null, ex); } req.setAttribute("estudiante", estudiante); req.setAttribute("action", "actualizar"); String paginaJSP = "/vista/nuevo-estudiante.jsp"; RequestDispatcher dispatcher = getServletContext().getRequestDispatcher(paginaJSP); dispatcher.forward(req, resp); } private void nuevoEstudiante(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setAttribute("action", ""); String paginaJSP = "/vista/nuevo-estudiante.jsp"; RequestDispatcher dispatcher = getServletContext().getRequestDispatcher(paginaJSP); dispatcher.forward(req, resp); } private void buscarPorNombre(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String nombreEstudiante = req.getParameter("nombreEstudiante"); List<Estudiante> result = estudianteDAO.buscarPorNombre(nombreEstudiante); mostrarListaEstudiantes(req, resp, result); } private void mostrarListaEstudiantes(HttpServletRequest req, HttpServletResponse resp, List listaEstudiantes) throws ServletException, IOException { String paginaJsp = "/vista/lista-estudiantes.jsp"; RequestDispatcher dispatcher = getServletContext().getRequestDispatcher(paginaJsp); req.setAttribute("listaEstudiantes", listaEstudiantes); dispatcher.forward(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String action = req.getParameter("action"); System.out.println("Do Post"); System.out.println(action); switch (action) { case "guardar": guardarEstudiante(req, resp); break; case "actualizar": actualizarEstudiante(req, resp); break; case "eliminar": eliminarEstudiante(req, resp); break; } } private void guardarEstudiante(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String nombre = req.getParameter("nombre"); String apellido = req.getParameter("apellido"); String fnacimiento = req.getParameter("fnacimiento"); String carrera = req.getParameter("carrera"); String semestre = req.getParameter("semestre"); String email = req.getParameter("email"); Estudiante estudiante = new Estudiante(nombre, apellido, fnacimiento, carrera, semestre, email); long idEstudiante = estudianteDAO.guardarEstudiante(estudiante); List<Estudiante> listaEstudiantes = estudianteDAO.obtenerEstudiantes(); req.setAttribute("idEstudiante", idEstudiante); String message = "Resgistro creado satisfactoriamente."; req.setAttribute("message", message); mostrarListaEstudiantes(req, resp, listaEstudiantes); } private void actualizarEstudiante(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String nombre = req.getParameter("nombre"); String apellido = req.getParameter("apellido"); String fnacimiento = req.getParameter("fnacimiento"); String carrera = req.getParameter("carrera"); String semestre = req.getParameter("semestre"); String email = req.getParameter("email"); long idEstudiante = Integer.valueOf(req.getParameter("idEstudiante")); Estudiante estudiante = new Estudiante(nombre, apellido, fnacimiento, carrera, semestre, email); estudiante.setId(idEstudiante); boolean success = estudianteDAO.actualizarEstudiante(estudiante); String message = null; if (success) { message = "Registro actualizado satisfactoriamente."; } List<Estudiante> listaEstudiantes = estudianteDAO.obtenerEstudiantes(); req.setAttribute("idEstudiante", idEstudiante); req.setAttribute("message", message); mostrarListaEstudiantes(req, resp, listaEstudiantes); } private void eliminarEstudiante(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { long idEstudiante = Integer.valueOf(req.getParameter("idEstudiante")); boolean confirmar = estudianteDAO.eliminarEstudiante(idEstudiante); if (confirmar){ String message = "Registro eliminado satisfactoriamente."; req.setAttribute("message", message); } List<Estudiante> listaEstudiantes = estudianteDAO.obtenerEstudiantes(); mostrarListaEstudiantes(req, resp, listaEstudiantes); } } |
Crear las vistas para el ejemplo
La primera página que se crea es la página index.jsp (dentro de la carpeta WebContent) en esta página no se va poner ningún contenido adicional a lo que trae la página por defecto, sólo se añadirá el siguiente fragmento de código:
|
1 |
<jsp:forward page="/estudiante" /> |
de manera que al iniciar la aplicación sea redireccionada al servlet.
Dado que las vistas las vamos a crear usando el framework Bootstrap, deberemos descargar sus fuentes desde el siguiente enlace: Descargar Bootstrap (la primera opción).
Lo siguiente que haremos descomprimir y copiar las carpetas css, fonts y js dentro de la carpeta WebContent del proyecto.
Así mismo crearemos un carpeta llamada vista que va alojar las vistas del proyecto (dentro de la misma carpeta WebContent).
Las vistas son simples archivos con extensión .jsp, en las cuales usamos JSTL (Java Server Pages Tag Library) que no son más que etiquetas y que nos permiten manipular o embeber código java dentro de una pagína JSP.
Para poder hacer uso de estas etiquetas, se debe incluir una declaración en el inicio de la página JSP donde vayamos a usarlas (línea 1), en este caso pongo como ejemplo la página nuevo-estudiante.jsp.
Finalmente en la página oficial de Bootstrap puedes encontrar mayor información de como usar este framework.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <html> <head> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="container"> <form action="estudiante" method="post" role="form" data-toggle="validator" > <c:if test ="${empty action}"> <c:set var="action" value="guardar"/> </c:if> <input type="hidden" id="action" name="action" value="${action}"> <input type="hidden" id="idEstudiante" name="idEstudiante" value="${estudiante.id}"> <h2>Estudiante</h2> <div class="form-group"> <label for="nombre" class="control-label col-xs-4">Nombre:</label> <input type="text" name="nombre" id="nombre" class="form-control" value="${estudiante.nombre}" required="true" /> <label for="apellido" class="control-label col-xs-4">Apellido:</label> <input type="text" name="apellido" id="apellido" class="form-control" value="${estudiante.apellido}" required="true"/> <label for="fnacimiento" class="control-label col-xs-4">Fecha de Nacimiento</label> <input type="text" pattern="^\d{2}-\d{2}-\d{4}$" name="fnacimiento" id="fnacimiento" class="form-control" value="${estudiante.fechaNacimiento}" maxlength="10" placeholder="dd-MM-yyy" required="true"/> <label for="carrera" class="control-label col-xs-4">Carrera:</label> <input type="text" name="carrera" id="carrera" class="form-control" value="${estudiante.carrera}" required="true"/> <label for="semestre" class="control-label col-xs-4">Semestre:</label> <input type="text" name="semestre" id="semestre" class="form-control" value="${estudiante.semestre}" required="true"/> <label for="email" class="control-label col-xs-4">E-mail:</label> <input type="text" name="email" id="email" class="form-control" value="${estudiante.email}" placeholder="Escriba su email" required="true"/> <br></br> <button type="submit" class="btn btn-primary">Guardar</button> </div> </form> </div> </body> </html> |
El proyecto completo lo puedes descargar desde el siguiente enlace: Descargar Proyecto Completo.
Espero haya sido de ayuda, si tienes alguna pregunta, la puedes hacer en la parte de comentarios, nos vemos en la próxima entrada.
Si te interesa seguir el tema de programación Web con Java, puedes revisar mi Curso de Programación Java Web, con JSP, Servlet y JPA donde aprenderás este y otros temas:
- Curso de Programación Java Web, con JSP, Servlet y JPA,
- CÓMO CREAR UN CRUD EN JAVA WEB CON JSP Y SERVLET,
- Integrar Bootstrap en un proyecto Java Web usando Java 8.
Tus datos estarán protegidos y 100% libre de Spam
Elivar Largo
Full Stack Developer, JavaScript, PHP, Java, Spring, Laravel, Vuejs, Blogger, aprendiendo y compartiendo conocimientos. Cursos de Programación Web en: https://programacionfullstack.com/
Excelente tutorial. gracias por compartir
Excelente Tutorial