Como Crear un CRUD con Firebase 7.14.2 y Bootstrap 4 – Parte 6 (Final)

Firebase Tutoriales | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo Github

En la Parte anterior llamada Como Crear un CRUD con Firebase 7.14.2 y Bootstrap 4 – Parte 5, realizamos la creación de la tarea Update (Actualizar), en donde pasábamos en la url el id o key del registro que queríamos actualizar, asimismo al actualizar eliminábamos la imagen anterior, si es que seleccionábamos una nueva imagen, para cargar al registro, en esta Parte 6 y última, vamos a crear la tarea Delete (Eliminar) y también crearemos la vista principal en donde mostraremos todos los registros, los botones de acciones y el mensaje luego de realizar una determinada tarea CRUD.

Partes

Antes de continuar, te invito a leer los siguientes artículos para que estés familiarizado con este tutorial:

Asimismo te invito a escuchar el Podcast: “Herramientas Online Para El Trabajo En Equipo”:

Spotify:Sound Cloud:

Bien ahora continuemos con el Post: Como Crear un CRUD con Firebase 7.14.2 y Bootstrap 4 – Parte 6 (Final)

Para la última tarea Delete (Eliminar), vamos a crear una vista principal con una tabla HTML en donde listaremos todos los registros desde Firebase Realtime Database, arriba de esta tabla tendrá colocaremos un botón Crear, que enviará al formulario para crear un nuevo registro, es decir realiza la tarea Create (Crear).

Dentro de la tabla crearemos una columna llamada Acciones en donde colocaremos los botones, Ver, Editar y Eliminar. Con el botón Ver leemos un registro es decir realiza la tarea Read (Leer), con el botón Editar actualizamos un registro, es decir realiza la tarea Update (Actualizar) y con el último botón Eliminar, borramos un registro, es decir realiza la tarea Delete (Eliminar) y es lo que veremos a continuación.

Para listar los datos usaré una tabla HTML de Bootstrap 4, primero llamaré a la función listar() en el evento onload dentro del elemento <body></body>

Colocamos el botón Crear y debajo un contenedor con nombre de clase datos, en este contendedor colocaré la tabla HTML, esta tabla la crearé dinámicamente con JavaScript más adelante.

Antes de pasar a la tarea Delete (Eliminar) vamos a crear la función JavaScript listar() para cargar los datos en la tabla HTML y saber que registro estamos eliminando.

Primero defino la configuración de Firebase , luego inicio Firebase con la configuración definida o realizada y hago referencia a Firebase Realtime Database. 

Antes de la función listar(), voy a declara un variable key para los ids o keys de los registros.

En la función listar() llamo a los datos de los postres almacenados en Firebase Realtime Database, luego verifico si hay datos y creo la tabla HTML con los encabezados ID, Nombre, Precio, Stock, Imagen y Acciones.

Debajo de los encabezados listo los registros, si bien la imagen esta almacenada en Firebase Storage, recordemos que almacene la URL de la imagen como string en Firebase Realtime Database, asimismo agrego los botones, Ver, Editar y Eliminar, por último envío la tabla con los datos y demás elementos al contenedor con nombre de clase llamado datos, el cual definimos anteriormente.

Entonces si voy al navegador, debería de ver la tabla HTML con los datos y demás elementos respectivos.

Si vez en la columna Acciones, hay un botón Eliminar, con el cual eliminaremos cada registro correspondiente,  entonces ahora pasemos a crear la función para eliminar los registros.

Delete (Eliminar)

Cuando el usuario hace clic en el botón Eliminar, este llama a la función JavaScript eliminar() y le pasamos el id del registro que queremos eliminar.

El botón Eliminar lo creamos dinámicamente con JavaScript en la función listar(), pero el código anterior, es el código tal como se vería en el navegador.

En la función eliminar() antes de proceder a eliminar el registro, le mostramos una alerta al usuario con el mensaje Eliminar este item ? y si hace clic en Aceptar procedemos a eliminar el registro respectivo y redireccionamos a la misma vista principal con un mensaje Eliminado Satisfactoriamente !

Si el usuario presiona el botón Cancelar, no pasa nada, la vista se mantiene tal cual como esta.

Mensajes de Tarea Realizada

Cuando el usuario realiza las tareas Create (Crear), Update (Actualizar) y Delete (Eliminar) siempre hacíamos un redireccionamiento a la vista principal donde se encuentra la tabla y arriba de esta tabla se muestra un mensaje confirmando que una de las tareas se realizó satisfactoriamente.

Este mensaje lo pasamos en la URL del navegador, y lo recibimos con el método GET de PHP, tu puedes hacerlo con otros lenguaje de servidor que desees, no hay problema, yo para este ejemplo usaré PHP, entonces si por ejemplo realizo la tarea Update (Actualizar) de un registro, puedo ver que en la URL paso su mensaje correspondiente y arriba de la tabla HTML muestro ese mensaje.

Este mensaje lo proceso con PHP y lo cargo en un elemento Alert o Alerta de Bootstrap 4 .

Y eso es todo, hemos terminado de crear nuestro sistema CRUD (Create, Read, Update y Delete). Al inicio de esta última parte he colocado un enlace al repositorio GitHub en donde he alojado el código fuente del proyecto, asimismo he colocado una Demo en todas las partes de este tutorial. 

Conclusión

Hemos aprendido a crear las 4 tareas básicas de una operación en un sistema con JavaScript, Firebase Realtime Database, Firebase Storage y Bootstrap 4 (HTML). 

Conociendo como funcionan estas 4 tareas, podrás crear proyectos más avanzados.

Nota (s)

  • Los pasos mencionados a lo largo de este tutorial, pueden cambiar o continuar, esto no depende de mi, si no de Firebase y Bootstrap, que suelen cambiar los pasos de configuración en futuras versiones.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

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

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments