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 4

Demo

En la anterior parte de este tutorial, realizamos la conexión a la base de datos para que nuestro sistema CRUD pueda llevar acabo las operaciones Crear, Leer, Actualizar y Eliminar. Asimismo creamos ciertos elementos necesarios para que nuestro proyecto funcione correctamente como el controlador, el modelo y realizamos ciertos cambios en el archivo principal de nuestro proyecto, me refiero al archivo app.js, en este cuarta parte vamos a continuar con el tutorial Como Crear un CRUD con Node JS (19.4.2) y Bootstrap 5, 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: “Porque Todo Desarrollador Debes Ser Autodidacta“¿ Porqué Es Importante Saber Programar en la Ciberseguridad ?” (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 4.

Rutas (Backend)

Las rutas backend son esenciales para que el sistema CRUD sepa con que controlador, modelo, campos, tabla, etc. debe de trabajar. Creo un directorio con el nombre routes y dentro de el creo un archivo con el nombre productos.js:


Abro el archivo productos.js y dentro de el agrego lo siguiente (He colocado comentarios para explicar que hace ciertas partes del código): 


En el código anterior puedes ver que cada tarea CRUD (Create, Read, Update, y Delete) tiene una ruta independiente. Cada una de estas rutas las usaremos dentro de la vista HTML que crearemos con Bootstrap 5, por ejemplo al formulario para crear un nuevo producto, le asignaremos la ruta router.post(‘/’, upload.single(‘img’), productoController.create);

Vistas HTML (Bootstrap 5)

Dentro del archivo app.js llamo a path y lo coloco dentro de una variable llamada path. También instancio el directorio CSS y JS de Bootstrap 5 para poder acceder a sus hojas de estilos CSS y a sus archivos JavaScript. (Solo usaré bootstrap.min.css y bootstrap.min.js, pero si se requiere usar otro de sus archivos, ya lo dejamos configurado).

Rutas (Frontend)

También defino todas las rutas para las vistas HTML del sistema CRUD: 


El código completo del archivo app.js se veria asi: 


Ahora creo un directorio con el nombre views y dentro de el creo 4 archivos con la extensión ejs, esta extension es del motor de plantillas EJS que instale en la primera parte de este tutorial y alli explico porque uso EJS en ves de un archivo HTML normal. Los archivos que creo son: actualizar.ejscrear.ejsindex.ejs y leer.ejs

Nota: Para la tarea Eliminar, usaré la vista principal, no necesito crear una vista aparte para ello. Al menos para este proyecto eliminaremos los registros desde la vista principal por medio de un botón. Si tu proyecto requiere crear una vista para eliminar, puedes crearla, no hay problema.

Ahora pasaré a crear las vistas HTML.

Vista Principal (Listar todos los Registros)

Dentro de esta vista mostraré una tabla HTML con clases de Bootstrap 5 y en ella listo todos los productos. Abro el archivo index.ejs y le agrego lo siguiente:


Puedes ver en el código anterior que he colocado una botón al inicio, este botón es para la tarea crear y cuando es presionado, envia al usuario a la vista crear.ejs en donde hay un formulario para crear un nuevo producto.

Para llamar a todos los registros desde la base de datos, coloco el siguiente código JavaScript antes de la etiqueta de cierre </body>:


Si voy a la ruta http://localhost:3000, puedo ver la vista HTML con la tabla creada con Bootstrap 5 que muestra todos los registros de la tabla productos: 

Bien hasta aquí hemos creado las rutas para nuestro CRUD, también hemos creado la primera vista HTML en donde listamos todos los registros de la tabla productos y agregamos ciertas configuraciones al archivo app.js

Ten Paciencia, lo que quiero es que conozcas bien como se crea este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

 

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

Salir de la versión móvil