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

Como Crear un CRUD con Node JS (19.4.2) y Bootstrap 5 – Parte 5 (Final)

Demo Github

En la parte anterior llamada Como Crear un CRUD con Node JS (19.4.2) y Bootstrap 5 – Parte 4, creamos las rutas backend para que el sistema crud pueda gestionar los datos en el servidor y la base de datos. También creamos las vistas frontend, estas vitas son para el usuario final. Asimismo creamos la vista princiapal con Bootstrap 5, esta vista tiene una tabla HTML creada con Bootstrap 5 y en ella se listan todos los productos y al lado derecho unos botones para realiar las tareas CRUD correspondientes. En esta última parte continuamos con el tutorial, 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: “Invierte Tu Dinero En Lo Que Te Haga Crecer“¿ Qué Es NoCode Development ?” (Anchor Podcast)

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Como Como Crear un CRUD con Node JS (19.4.2) y Bootstrap 5 – Parte 5 (Final).

Crear (Create)

Esta vista esencialmente muestra un formulario en donde el usuario puede ingresar un nuevo registro otro producto. Abro el archivo index.ejs que se encuentra en crud-nodejs19-bootstrap5  > views > index.ejs


Dentro del archivo index.ejs agrego lo siguiente:


En el código anterior, en la parte final he colocado un botón para guardar los cambios y otro Cancelar que permite volver a la vista principal.

Si voy a la ruta http://localhost:3000/crear, puedo ver el formulario para crear un nuevo producto o registro:

Ahora pasemos a la ruta para leer un registro.

Leer (Read)

En esta vista mostramos todos los datos de un solo producto, es como una vista detalles. Abro el archivo leer.ejs que se encuentra en crud-nodejs19-bootstrap5  > views > leer.ejs


Dentro del archivo leer.ejs agrego lo siguiente:


En el código anterior, en la parte final he colocado un botón que permite volver a la vista principal.

Para llamar a los datos y mostrarlos uno por uno, uso JavaScript, antes de la etiqueta de cierre </body> agrego el siguiente código:


Si voy a la ruta http://localhost:3000/leer?id=2 (paso el id de un producto en la url), puedo ver todos los datos de un producto o registro:

Ahora pasemos a la ruta para actualizar un registro.

Actualizar (Update)

En esta vista mostramos todos los datos de un solo producto en un formulario, en donde podemos editar uno o varios de sus campos. Abro el archivo actualizar.ejs que se encuentra en crud-nodejs19-bootstrap5  > views > actualizar.ejs


Dentro del archivo actualizar.ejs agrego lo siguiente:


En el código anterior, en la parte final he colocado un botón para guardar los nuevos valores y otro Cancelar que permite volver a la vista principal.

Para llamar a los datos y colocarlos dentro del formulario uso JavaScript, antes de la etiqueta de cierre </body> agrego el siguiente código:


Si voy a la ruta http://localhost:3000/actualizar?id=2, (paso el id de un producto en la url), puedo ver el formulario para actualizar un producto o registro:

Ahora pasemos a la vista para eliminar un registro.

Eliminar (Delete)

Para esta vista no necesitaré un HTML aparte, la tarea eliminar la realizaré en la misma vista principal. Abro del archivo index.ejs que se encuentra en crud-nodejs19-bootstrap5  > views > index.ejs


Dentro del archivo index.ejs agrego lo siguiente:


Entonces cuando el usuario presione el botón eliminar, le mostaremos una mensaje preguntándole Estas seguro de Eliminar ?, si el usuario presiona Cancelar, no pasará nada, pero si presiona Aceptar, el producto se eliminará de la base de datos:

Con ello tenemos listas nuestras vistas HTML del sistema CRUD.

Mensajes

Luego que el sistema CRUD realiza una determinada tarea es importante mostrarle un mensaje para confirmarle que la tarea ha sido realizada correctamente. Dentro el archivo index.ejs antes de la tabla para mostrar todos los registros, agrego lo siguiente:


Entonces por ejemplo si el usuario edita un registro, le mostramos el mensaje Producto Actualizado Correctamente ! arriba de la tabla:

Bien, con ello hemos terminado de crear nuestro primer sistema CRUD que realiza las operaciones Crear, Leer, Actualizar y Eliminar.

Conclusión

Saber crear operaciones CRUD es muy importante, es la base para la mayoria de aplicaciones, software, etc. Ya que la mayoría de estas suele realizar operaciones CRUD en casi todas sus tareas o logicas de proceso. Ahora que sabes crear tareas CRUD, puedes aplicar ese conocimiento a otros proyectos.

Nota (s)

 

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

Salir de la versión móvil