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 IDEIntegrar 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.

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.

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.

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.

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:

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.

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 quieres seguir el tema de programación Web con Java puedes revisar los siguientes enlaces:

Opt In Image
Te gusta la Programación Web?
Suscríbete ahora y recibe los mejores contenidos sobre Programación Web con Java y PHP en tu correo.

Tus datos estarán protegidos y 100% libre de Spam

Compartir en:Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Desarrollador Web con Java y PHP, Blogger, aprendiendo y compartiendo conocimientos.

One thought on “Cómo integrar Bootstrap con JSP y crear un proyecto Web en Java 8

  1. Rodrigo

    Excelente tutorial. gracias por compartir

Deja un Comentario