Como Crear un CRUD con Firebase 7.14.2 y Bootstrap 4 – Parte 4

Nube Colectiva

hace 4 años

En esta página:

Demo

En la parte anterior llamada Como Crear un CRUD con Firebase 7.14.2 y Bootstrap 4 – Parte 3, comenzamos con la creación de las operaciones CRUD, la primera operación que realizamos fue Create (Crear), diseñamos su vista HTML con Bootstrap 4 y creamos el código JavaScript que realiza la conexión a Firebase Realtime Database y Firebase Storage para almacenar las imágenes, en esta parte vamos a continuar con la siguiente operación llamada Read (Leer), vamos con ello.

Partes

Parte 1
Parte 2
Parte 3
Parte 4
Parte 5
Parte 6 (Final – Código Fuente en GitHub)

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: “Que Hacer Cuando Estamos En Casa”:

Spotify:	Sound Cloud:

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

Empezaré creando la vista HTML con Bootstrap 4 y luego crearé el código JavaScript para leer y mostrar.

Read (Leer)

La vista para leer un dato independientemente es sencilla, primero colocaré un botón para volver a la vista principal del sistema CRUD, el nombre del postre lo colocaré en un encabezado h3 al cual le doy el nombre de clase nombre, luego


<!-- Botón para volver a la vista principal --> 
<a type="button" href="index.php" class="btn btn-success mb-2">Volver</a> 

<!-- Detalles del Postre --> 
<div class="datos">
    <h3 class="nombre text-center"></h3>
    <p><strong>ID:</strong> <span class="id"></span></p>
    <p><strong>Precio:</strong> <span class="precio"></span></p>
    <p><strong>Stock:</strong> <span class="stock"></span></p>
    <p class="img">
        <strong>Imagen:</strong>
        <br />
        <img class="img-fluid img mt-2" width="50%" />
    </p>
</div>

<a type="button" href="index.php" class="btn btn-success mb-2">Volver</a>

ID:

Precio:

Stock:

Imagen:

</div>

Si voy al navegador y abro por ejemplo el dato Gelatina de Fresa, debe mostrarse de la siguiente manera.

La idea es que el usuario desde una vista principal (La crearemos al final), presione un botón que diga Ver y le muestra los detalles del registro en la vista HTML Leer (Read) que acabamos de crear.

En el elemento HTML body estoy llamando a una función JavaScript llamada leer(); mediante el evento onload, la función leer(); la crearemos más adelante.


<body onload="leer();">
    <!-- Acá van los elementos de la vista HTML -->
</body>

</body>

Ahora pasemos a crear el código JavaScript para la operación o tarea Read (Leer).

Debajo antes de la etiqueta de cierre </body> colocaré el código JavaScript que realiza la operación CRUD Read (Leer).

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


// Configuración de Firebase
var firebaseConfig = {
    apiKey: "Tu apiKey",
    authDomain: "Tu authDomain",
    databaseURL: "Tu databaseURL",
    projectId: "Tu projectId",
    storageBucket: "Tu storageBucket",
    messagingSenderId: "Tu messagingSenderId",
    appId: "Tu appId",
    measurementId: "Tu measurementId",
};

// Inicializo Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

// Hacemos referencia a Firebase Realtime Database
var database = firebase.database();

// Configuración de Firebase

var firebaseConfig = {

apiKey: "Tu apiKey",

authDomain: "Tu authDomain",

databaseURL: "Tu databaseURL",

projectId: "Tu projectId",

storageBucket: "Tu storageBucket",

messagingSenderId: "Tu messagingSenderId",

appId: "Tu appId",

measurementId: "Tu measurementId",

};

// Inicializo Firebase

firebase.initializeApp(firebaseConfig);

firebase.analytics();

// Hacemos referencia a Firebase Realtime Database

var database = firebase.database();

Luego creo una variable llamada key que usaré para cada dato del registro, también creo una variable llamada datosurl en donde obtengo el id que he pasado por la URL desde la vista principal a la vista Read (Leer).


var key;

// Obtengo el id de la URL 
var datosurl = new URLSearchParams(window.location.search);

var key;

// Obtengo el id de la URL

var datosurl = new URLSearchParams(window.location.search);

Ahora crearé la función leer() la cual llama a los datos de un registro independientemente por su id al cargar la vista Read (Leer), en el código, (He colocado comentarios para explicar que hace cada parte del código).


function leer() {
    // Selecciono los datos desde postres
    var database = firebase.database().ref().child("postres");
    database
        .once("value")

        .then(function (snapshot) {
            snapshot.forEach(function (data) {
                // Verifico si los 'ids' coinciden
                const id = datosurl.get("id");
                const key = data.key;

                // Verifico si los 'ids' o 'keys' coinciden y muestro solos los datos de ese 'id' o key
                if (id == key) {
                    var nombre = data.val().nombre;
                    var precio = data.val().precio;
                    var stock = data.val().stock;
                    var img = data.val().img;

                    // Envío los datos a la vista HTML
                    $(".id").html(id);
                    $(".nombre").html(nombre);
                    $(".precio").html(precio);
                    $(".stock").html(stock);
                    $(".img").attr("src", img);
                }
            });
        });
}

function leer() {

// Selecciono los datos desde postres

var database = firebase.database().ref().child("postres");

database

.once("value")

.then(function (snapshot) {

snapshot.forEach(function (data) {

// Verifico si los 'ids' coinciden

const id = datosurl.get("id");

const key = data.key;

// Verifico si los 'ids' o 'keys' coinciden y muestro solos los datos de ese 'id' o key

if (id == key) {

var nombre = data.val().nombre;

var precio = data.val().precio;

var stock = data.val().stock;

var img = data.val().img;

// Envío los datos a la vista HTML

$(".id").html(id);

$(".nombre").html(nombre);

$(".precio").html(precio);

$(".stock").html(stock);

$(".img").attr("src", img);

}

});

}

Quiero destacar algo importante que me parece debes conocer y es que para obtener los datos de un solo registro por su id, lo que hago es verificar si la id de la URL es igual al id del registro almacenado en Firebase Realtime Database.


// Verifico si los 'ids' coinciden
const id = datosurl.get('id'); 
const key = data.key; 

// Verifico si los 'ids' o 'keys' coinciden y muestro solos los datos de ese 'id' o key 
if (id == key) {
    // Mostramos solo los datos de ese registro 
}

// Verifico si los 'ids' coinciden

const id = datosurl.get('id');

const key = data.key;

// Verifico si los 'ids' o 'keys' coinciden y muestro solos los datos de ese 'id' o key

if (id == key) {

// Mostramos solo los datos de ese registro

}

Bueno hasta aquí terminamos la Parte 4 de este tutorial, hemos creado la vista HTML Read (Leer) con Bootstrap 4 y también creamos el código JavaScript para seleccionar y mostrar solo los datos de un solo registro por su id.

Ten Paciencia, lo que quiero es que entiendas todo el proceso para Crear este Proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.

Nota (s)

En la siguiente Parte de este tutorial crearemos la siguiente operación o tarea del sistema CRUD.
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.