Node.js / CRUD

Bienvenidos sean a este post, hoy continuaremos con la aplicacion de notas.

Hasta ahora tenemos una aplicacion funcional en lo basico, es decir tenemos la pagina de inicio, una opcion para agregar notas (no funcional) y un listado de notas, pero esto cambiara ahora porque en este post implementaremos el CRUD (Create, Update, Read, Delete) para nuestras notas, y para ello usaremos el codigo que trabajamos hasta el post anterior sino lo tienen les dejo un link para descargarlo:

Descarguen el archivo y extraigan todos los archivos en el equipo a trabajar, con esto realizado nuestro siguiente paso sera tomar la primera accion en nuestra aplicacion.

Create – agregar nota

En el post anterior probamos la opcion de agregar nota pero esta nos devolvio el mitico error 404, comencemos a trabajar con esta opcion y para ello debemos ir al archivo app.mjs y donde esta la linea en la cual definimos al objeto indexRouter le agregaremos la siguiente linea a continuacion:

import { router as notasRouter } from './routes/notas.mjs';

Esta se encargara de crear nuestro objeto ruteador para las notas, nuestro siguiente paso sera aplicarlo al objeto app y para ello busquen donde usamos a indexRouter para el inicio de la pagina y agreguen la siguiente linea:

app.use('/notas', notasRouter);

Ahora ya tenemos el redireccionamiento a nuestra aplicacion y terminamos con app.mjs, nuestro siguiente paso sera ir al directorio routes y crearemos un nuevo archivo con el nombre de notas.mjs y le agregaremos el siguiente codigo:

routes/notas.mjs

import { default as express } from 'express';
import { NotasMem as notas } from '../app.mjs';
export const router = express.Router();

router.get('/add', (req, res, next) => {
        res.render('editarnota', {
                title: "Agregar una nota",
                creador: true,
                clavenota: '',
                nota: undefined
        });
});

Primero importaremos a express y luego el objeto notas de app.mjs para luego permitir el acceso al objeto router, tal como hicimos en app.mjs, despues agregaremos la primera opcion que sera la de add para agregar nuevas notas, en este caso renderizaremos el layout editarnota, que aun no existe, y en ella le pasaremos varios parametros simplemente para el layout, con esto ya tenemos el enrutador o router para las notas, pasemos al siguiente tema como es el layout y para ello deben ir al directorio views y crearemos un nuevo archivo con el nombre editarnota.hbs y le agregaremos el siguiente codigo:

views/editarnota.hbs

<form method='POST' action='/notas/save'>
<input type='hidden' name='creador'
        value='{{#if creador }}crear{{else}}cambiar{{/if}}'>
<p>Clave:
{{#if creador }}
        <input type='text' name='clavenota' value=''/>
{{else}}
        {{#if nota }}{{clavenota}}{{/if}}
        <input type='hidden' name='clavenota'
                value='{{#if nota }}{{clavenota}}{{/if}}' />
{{/if}}
</p>
<p>Titulo: <input type='text' name='titulo'
        value='{{#if nota }}{{nota.titulo}}{{/if}}' /></p>
<br/><textarea rows=5 cols=40 name='cuerpo'>
        {{#if nota }}{{nota.cuerpo}}{{/if}}</textarea>
<br/><input type='submit' value='Subir' />
</form>

Esta pagina la usaremos para dos acciones: Agregar nota y editar nota; como base sera un formulario donde utilizaremos a POST para enviar los datos y otra pagina sera la encargada de procesar los datos, primero tendremos un dato tipo hidden llamado creador donde en base al valor de creador que pasemos con el enrutador le asignara el valor de crear si es true y cambiar en caso contrario, este lo usaremos para diferenciar entre agregar o modificar notas, despues tendremos un condicional donde verifica nuevamente a creador, si es true mostrara un campo para que podamos ingresar una clave de identificacion, en caso contrario mostraremos el valor de la clave pero lo almacenaremos en un campo de tipo hidden, despues tenemos dos campos que seran para el titulo y el texto de la nota, en ambos casos usaremos un condicional para campo donde en caso de existir lo asignara de lo contrario lo dejara en blanco, esto dependera de si editamos o agregamos una nota, y por ultimo tenemos el boton para enviar los datos, nuestro ultimo paso sera la accion encargada de guardar la nota pero para ello debemos volver al archivo notas.mjs en el directorio routes y agregar el siguiente segmento de codigo:

router.post('/save', async (req, res, next) => {
        try {
          let nota;
          if (req.body.creador === "crear") {
                nota = await notas.create(req.body.clavenota,
                        req.body.titulo, req.body.cuerpo);
          } else {
                nota = await notas.update(req.body.clavenota,
                        req.body.titulo, req.body.cuerpo);
          }
          res.redirect('/notas/ver?clave=' + req.body.clavenota);
        } catch(err) { next(err); }
});

Este se encargara de tomar el submit que usamos en el formulario, observen que usamos un try/catch para cuando ocurra algun error usemos a next, si pasamos al bloque try en este declaramos una variable luego usamos un condicional donde verifica si el valor de creador es crear y en caso de ser verdadero procede a guardar en la variable anterior el resultado devuelto por la funcion create en caso contrario hacemos lo mismo pero usamos la funcion update, en ambos casos les pasamos los tres valores de la nota que estan en el formulario, nos redireccionamos a la pagina para ver la nota pero este todavia no existe por lo tanto debe fallar, veamos como trabaja mediante el siguiente video

Como pueden ver ahora nuestra pagina carga la nota pero al momento de intentar mostrarlo nos devuelve un error pero si vamos al inicio de la pagina vemos nuestra nota cargada, pasemos a nuestro siguiente tema.

Read – ver la nota

Con la posibilidad de poder crear notas nuestro siguiente paso como comentamos es visualizarlas y para ello debemos ir al archivo notas.mjs en el directorio routes y agregaremos el siguiente bloque de codigo:

router.get('/ver', async(req, res, next) => {
        try {
          let nota = await notas.read(req.query.clave);
          res.render('vistanota', {
                title: nota ? nota.titulo : "",
                clavenota: req.query.clave,
                nota: nota
          });
        } catch(err) { next(err); }
});

En este caso agregamos la opcion de ver, para este caso volvemos a usar el try/catch para el tema de next en caso de falla, y en bloque de try usaremos un objeto para que recepcione todos los valores que nos devuelve la funcion read, para mostrar la pagina y para ello le pasaramos todos los datos a ese layout, nuestro siguiente paso sera crear el layout y para ello debemos crear un archivo con el nombre de vistanota.hbs en el directorio views y le agregaremos el siguiente codigo:

views/vistanota.hbs

{{#if nota }}<h3>{{ nota.titulo }}</h3>{{/if}}
{{#if nota }}<p>{{ nota.cuerpo }}</p>{{/if}}
<p>Clave: {{ clavenota }}</p>
{{#if clavenota }}
        <hr/>
        <p><a href="/notas/borrar?clave={{clavenota}}">Borrar</a>
        | <a href="/notas/editar?clave={{clavenota}}">Editar</a></p>
{{/if}}

Primero tendremos dos condicionales donde mostraremos el titulo y el texto de la nota, siempre en caso de que exista la nota, por ultimo la clave de la nota, y el siguiente condicional sera para el caso de existir la clave tendremos dos opciones para borrar y editar la nota, con esto ya tenemos la posibilidad de ver nuestras notas y pueden verificarlo pero en esta opcion agregamos dos opciones mas y vamos a continuar para poder agregarlas.

Update – Editar una nota

Pasemos a la primera opcion nueva, para ello debemos volver al archivo notas.mjs en el directorio routes y agregaremos el siguiente bloque de codigo:

router.get('/editar', async(req, res, next) => {
        try {
          const nota = await notas.read(req.query.clave);
          res.render('editarnota', {
                title: nota ? ("Editando " + nota.titulo) : "Agregar nota",
                creador: false,
                clavenota: req.query.clave,
                nota: nota
          });
        } catch(err) { next(err); }
});

Recuerdan que en el primer caso donde agregamos la nota tambien la hicimos para editarla por lo tanto ya tenemos la mitad del trabajo hecho y solamente necesitamos como rutearlo a este, seguimos con el mismo concepto de try/catch y aqui primero leeremos los datos de la nota, despues renderizamos al layout editarnota, y volvemos a usar la propiedades que usamos para agregar notas, en el caso del titulo si tenemos una nota usaremos el titulo e indicaremos que lo estamos editando y en caso contrario usamos un titulo generico, aqui le pasamos el valor de false a creador, para indicar que no agregamos una nota sino la editamos, despues pasamos el resto de los valores, y ya con esto podemos editar nuestra nota y pueden probarlo si asi lo desean pero continuemos con la ultima opcion para hacer la prueba definitiva.

Nota:
En caso de que no tome los ruteos nuevos solamente reinicien el servidor para que tome los cambios.

Delete – Eliminar una nota

Con esta tenemos la ultima opcion del CRUD, y para ello debemos ir nuevamente al archivo notas.mjs en el directorio routes y agregaremos el siguiente bloque de codigo:

router.get('/borrar', async(req, res, next) => {
        try {
          let nota = await notas.read(req.query.clave);
          res.render('borrarnota', {
                title: nota ? nota.titulo : "",
                clavenota: req.query.clave,
                nota: nota
          });
        } catch(err) { next(err); }
});

Este es igual a todos los que vimos anteriormente donde tenemos el try/catch para utilizar el next y en el bloque renderizamos el layout que se encargara de mostrarnos la posibilidad de dar la ultima confirmacion antes de eliminarlo o no, en este caso tomamos los datos y los pasamos para el layout, nuestro siguiente paso sera crear el layout y para ello debemos ir al directorio views y crearemos un nuevo archivo con el nombre de borrarnota.hbs y le agregaremos el siguiente codigo:

views/borrarnota.hbs

<form method='POST' action='/notas/borrar/confirmar'>
<input type='hidden' name='clavenota'
        value='{{#if nota}}{{clavenota}}{{/if}}'>
<p>¿ Borrar {{nota.titulo}} ?</p>
<br/><input type='submit' value='BORRAR' />
<a href="/notas/ver?clave={{#if nota}}{{clavenota}}{{/if}}">Cancelar</a>
</form>

Este va a ser un form simple donde enviaremos a otro destino para que procese la informacion, pero de esto hablaremos en un rato, despues tenemos un campo oculto para guardar la clave de la nota y despues mostraremos un mensaje para indicar cual vamos a robar y por ultimo tenemos un boton para proceder a eliminarlo y sino un link para cancelar esto y volver a la nota, solo nos resta una tarea mas que es la encargada ejecutar la accion, para ello debemos volver al archivo notas.mjs en routes y le agregaremos el siguiente bloque de codigo:

router.post('/borrar/confirmar', async(req, res, next) => {
        try {
          await notas.delete(req.body.clavenota);
          res.redirect('/');
        } catch(err) { next(err); }
});

Volvemos a usar al evento post y en este caso llamaremos a la funcion delete y observen que usamos a await para el tema de la asincronicidad y una vez finalizado nos redireccionamos al inicio, con todo esto ya tenemos el CRUD completo, vamos a probar como funciona mediante el siguiente video

En el video pudimos observar como ahora si todas nuestras opciones estan funcionando correctamente, antes de finalizar les dejo un link donde estara un archivo con todos los codigos de la aplicacion y los trabajados en este post:

En resumen, hoy hemos visto como implementar CRUD en nuestra aplicacion, hemos hecho cada una de las opciones que disponemos, hemos descripto cada una de ellas y por ultimo hemos visto como trabaja ahora, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.