Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como crear un CRUD con Spring Framework 5.2.13 y Bootstrap 4.6 – Parte 5 (Final)

Demo Github

Ha sido un viaje largo e interminable, después de más de un año que retomo este tutorial, te pido disculpas por la demora, hubo retos y contratiempos que hicieron posible el no terminar este tutorial. Pero al final valdrá la pena la espera y es que en esta última parte veremos el proyecto en acción y te compartiré el código fuente del proyecto. Spring Framework cuenta con una nueva versión, pero ya estoy trabajando en ello, prueba de ello es la creación del tutorial: Como Crear un Proyecto con Spring Boot en donde hago uso de la versión 6 de Spring Framework, mediante Spring Boot, si te parece confuso lo que dije, te recomiend leer el post: Cual es la diferencia entre Spring (Framework) y Spring Boot. Asimismo se vienen nuevos tutoriales con la nueva versión de Spring Framework. En esta 5ta y última parte terminaremos el tutorial Como crear un CRUD con Spring Framework, vamos con ello.

Partes

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Consejos Para Tener Más Tiempo Para Programar” y “ChatGPT ¿ Dejará sin empleo a los Desarrolladores ?” (Anchor Podcast): 

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Como crear un CRUD con Spring Framework 5.2.13 y Bootstrap 4.6 – Parte 5 (Final).

Vistas

Para las vistas usaré el framework Bootstrap y el motor de plantillas Thymeleaf, de esta manera solo me enfoco en la logica del proyecto del lado Backend. Para las vistas crearé 4 archivos HTML, estos son: actualizar.html, crear.html, index.html y leer.html. Estos archivos los creo en un directorio llamado /templates, si no tienes este directorio, crealo manualmente. El directorio /templates se ubica en sistemacrud > src > main > resources > templates


A cada uno de los archivos HTML les instancio el archivo CSS y JavaScript de Bootstrap 4.6, primero el CSS lo instancio entre las etiquetas <head></head>:


Y el archivo JavaScript lo instancio antes de la etiqueta de cierre </body>:


Ahora pasemos a crear las vistas para cada tarea del sistema CRUD.

Vista Principal

Esta vista tendrá una tabla HTML en donde se listarán todos los registros o datos que serán llamados desde la base de datos. Cada registro tendrá 3 botones al lado derecho para realizar las tareas Leer, Editar y Eliminar. Arriba de la tabla colocaré un botón para crear un nuevo registro, este botón será Crear.

Para esta vista usaré el archivo index.html, lo abro y dentro de el, agrego lo siguiente:


En el código anterior, dentro del cuerpo de la tabla HTML estoy haciendo uso de th:each de Thymeleaf que es un tipo de for para recorrer y mostrar todos los datos en la tabla.

Thymeleaf es un moderno motor de plantillas Java del lado del servidor para entornos web y es muy usado en Spring Framework. Más adelante te compartiré mi archivo pom.xml con todas las dependencias que he instalado para este proyecto, también lo podrás encontrar en el repositorio GitHub de este proyecto.

Si voy al navegador, debería de ver la vista principal con la tabla y los demás elementos, sin problemas:

Ahora pasemos a crear la vista para leer un registro.

Leer (Read)

Para esta vista usaré el archivo leer.html, lo abro y le agrego lo siguiente:


En el código anterior estoy imprimiendo los datos de un solo registro por su id, este lo obtenemos desde el controlador (Controlador.java) de nuestro proyecto. Si vamos al navegador podemos ver la vista con los datos de un registro único:

Ahora pasemos a la vista para actualizar un registro.

Actualizar (Update)

Para esta vista usaré el archivo actualizar.html, lo abro y le agrego lo siguiente:


En el código anterior he colocado un formulario HTML y en cada campo coloco los datos de un registro que se podrán editar. Si voy al navegador, puedo ver la vista para actualizar un registro con un formulario determinado:

Ahora pasemos a la vista eliminar, que no va ser exactamente una vista, sino que la manejaremos de forma práctica.

Eliminar (Delete)

Esta no será exactamente una vista, si tu deseas la puedes crear, no hay problema. En la vista principal pudiste ver que teniamos una tabla con todos los registros y al lado derecho cada uno tiene 3 botones, uno de ellos es Eliminar, cuando el usuario presiona ese botón le aparecerá una ventana de alerta para confirmar o no la eliminación del registro. El botón Eliminar llama al método confirmarEliminar() al ser presionado:


El siguiente es el método JavaScript, el cual lo he colocado antes de cerrar la etiqueta </body>:


Entonces si vamos al navegador y presionamos el botón Eliminar de un registro, aparecerá la ventan de alerta:

Esas seria todas las vistas de nuestro sistema CRUD.

Dependencias

En mi archivo pom.xml he usado diferentes dependencias y librerías, te dejo a continuación todo el código del archivo, (También lo podrás encontrar en el repositorio de GitHub de este proyecto):


Bien, hasta aquí llegamos con este tutorial, al inicio te he dejado un enlace con el código del proyecto alojado en GitHub y una Demo para que veas el proyecto en acción.

Conclusión

En este tutorial has aprendido a Como crear un CRUD con Spring Framework 5.2.13 y Bootstrap 4.6, aprender a realizar tareas CRUD, es muy importante, ya que todas las aplicaciones y el software en general, utiliza tareas CRUD, Aprender a como crear un CRUD, te servirá de mucho para crear aplicaciones más avanzadas en Spring Framework.

Nota(s)

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil