Tarjetas Informativas con Bootstrap

Introducción

Las tarjetas informativas son pequeños documentos visuales que proporcionan información concisa y relevante sobre un tema específico. Suelen tener un formato visual atractivo y se utilizan para presentar datos clave de manera clara y fácil de entender. Estas tarjetas pueden contener texto, gráficos, imágenes o cualquier combinación de estos elementos para transmitir la información de manera efectiva. Se utilizan comúnmente en presentaciones, sitios web, redes sociales y otros medios para comunicar información de manera rápida y efectiva.

Como se hace una o varias tarjetas informativas

Para crear las tarjetas informativas vamos utilizar HTML junto con las clases de bootstrap

Aqui esta el codigo del ejemplo de la imagen anterior

          <div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-2">
                <a href="#" class="small-box" style="position: relative; display: block; min-height: 200px;">
                    <div class="small-box bg-warning" style="min-height: 200px;">
                        <div class="inner">
                            <h3 id="tjUsuario"></h3>
                            <p>Usuarios</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person-add"></i>
                        </div>
                        <div class="small-box-footer mb-2" style="position: absolute; bottom: 0; left: 0; right: 0;">
                            More info <i class="fas fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </a>
            </div>


            <div class="col-2">
                <div class="small-box">
                    <div class="small-box bg-primary" style="min-height: 200px;">
                        <div class="inner">
                            <h3 id="tjProductos"></h3>
                            <p>Productos</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person-add"></i>
                        </div>
                        <div class="small-box-footer mb-2" style="position: absolute; bottom: 0; left: 0; right: 0;">
                            More info <i class="fas fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2">
                <div class="small-box">
                    <div class="small-box bg-info" style="min-height: 200px;">
                        <div class="inner">
                            <h3 id="tjClientes"></h3>
                            <p>Clientes</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person-add"></i>
                        </div>
                        <div class="small-box-footer mb-2" style="position: absolute; bottom: 0; left: 0; right: 0;">
                            More info <i class="fas fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2">
                <div class="small-box">
                    <div class="small-box bg-success" style="min-height: 200px;">
                        <div class="inner">
                            <h3 id="tjProveedores"></h3>
                            <p>Proveedores</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person-add"></i>
                        </div>
                        <div class="small-box-footer mb-2" style="position: absolute; bottom: 0; left: 0; right: 0;">
                            More info <i class="fas fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2">
                <div class="small-box">
                    <div class="small-box bg-secondary" style="min-height: 200px;">
                        <div class="inner">
                            <h3 id="tjTotalCompras"></h3>
                            <p>TotalCompras</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person-add"></i>
                        </div>
                        <div class="small-box-footer mb-2" style="position: absolute; bottom: 0; left: 0; right: 0;">
                            More info <i class="fas fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2">
                <div class="small-box">
                    <div class="small-box bg-danger" style="min-height: 200px;">
                        <div class="inner">
                            <h3 id="tjtotalVentas"></h3>
                            <p>Total Ventas</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person-add"></i>
                        </div>
                        <div class="small-box-footer mb-2" style="position: absolute; bottom: 0; left: 0; right: 0;">
                            More info <i class="fas fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-2">
                <div class="small-box">
                    <div class="small-box bg-warning" style="min-height: 200px;">
                        <div class="inner">
                            <h3 id="tjganancias"></h3>
                            <p>Ganancias</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person-add"></i>
                        </div>
                        <div class="small-box-footer mb-2" style="position: absolute; bottom: 0; left: 0; right: 0;">
                            More info <i class="fas fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2">
                <div class="small-box">
                    <div class="small-box bg-primary" style="min-height: 200px;">
                        <div class="inner">
                            <h3 id="tjPocoStock"></h3>
                            <p>Productos Min Stock</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person-add"></i>
                        </div>
                        <div class="small-box-footer mb-2" style="position: absolute; bottom: 0; left: 0; right: 0;">
                            More info <i class="fas fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2">
                <div class="small-box">
                    <div class="small-box bg-info" style="min-height: 200px;">
                        <div class="inner">
                            <h3></h3>
                            <p>Clientes Divida</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person-add"></i>
                        </div>
                        <div class="small-box-footer mb-2" style="position: absolute; bottom: 0; left: 0; right: 0;">
                            More info <i class="fas fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2">
                <div class="small-box">
                    <div class="small-box bg-success" style="min-height: 200px;">
                        <div class="inner">
                            <h3></h3>
                            <p>Proveedores Divida</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person-add"></i>
                        </div>
                        <div class="small-box-footer mb-2" style="position: absolute; bottom: 0; left: 0; right: 0;">
                            More info <i class="fas fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2">
                <div class="small-box ">
                    <div class="small-box bg-secondary" style="min-height: 200px;">
                        <div class="inner">
                            <h3 id="tjventasHoy"></h3>
                            <p>Ventas de Hoy</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person-add"></i>
                        </div>
                        <div class="small-box-footer mb-2" style="position: absolute; bottom: 0; left: 0; right: 0;">
                            More info <i class="fas fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2">
                <div class="small-box">
                    <div class="small-box bg-danger" style="min-height: 200px;">
                        <div class="inner">
                            <h3></h3>
                            <p>Total Ventas en el mes</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person-add"></i>
                        </div>
                        <div class="small-box-footer mb-2" style="position: absolute; bottom: 0; left: 0; right: 0;">
                            More info <i class="fas fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- /.container-fluid -->
  </div>
          

Procedimiento almacenado

Despues de tenermos las tarjetas informativas para recibir informacion que vendra de la base de datos, tendremos que preparar entonces un procemiento almacenado para que eso ocurra.

Un procedimiento almacenado (stored procedure en inglés) es un conjunto de instrucciones SQL precompiladas y almacenadas en una base de datos. Estas instrucciones pueden incluir operaciones SQL, lógica condicional, bucles y otras funciones, y se almacenan en el sistema de gestión de base de datos (DBMS). Los procedimientos almacenados se utilizan para realizar tareas específicas o manipulaciones de datos dentro de una base de datos.

Algunas ventajas de los procedimientos almacenados incluyen:

• Reutilización de código: Puedes escribir el código una vez y utilizar el procedimiento almacenado en múltiples lugares de tu aplicación.
• Mejora del rendimiento: Al ser precompilados y almacenados en la base de datos, los procedimientos almacenados pueden ejecutarse más rápido que las consultas SQL ad hoc enviadas desde una aplicación.
• Seguridad: Pueden proporcionar un nivel adicional de seguridad al permitir el acceso controlado a los datos a través de la ejecución de procedimientos almacenados, en lugar de dar acceso directo a las tablas.
• Mantenimiento simplificado: Los cambios en la lógica de la base de datos se pueden realizar en un solo lugar (el procedimiento almacenado) sin afectar directamente al código de la aplicación.

...

Un ejemplo simple de un procedimiento almacenado en SQL Server podría ser algo como esto:

        
            CREATE PROCEDURE ObtenerClientes
            AS
            BEGIN
                SELECT * FROM Clientes;
            END;
        
    

En nuestro ejemplo es codigo es el seguinte:

          BEGIN
    DECLARE totalProductos INT;
    DECLARE totalCompras DECIMAL(10, 2);
    DECLARE totalVentas FLOAT;
    DECLARE ganancias DECIMAL(10, 2);
    DECLARE productosPocoStock INT;
    DECLARE ventasHoy FLOAT;

    SELECT COUNT(*) INTO totalProductos FROM productos p;
    SELECT IFNULL(ROUND(SUM(p.precioCompra * p.stock), 2), 0) INTO totalCompras FROM productos p;
    SELECT IFNULL(ROUND(SUM(vc.totalVenta), 2), 0) INTO totalVentas FROM venta_cabecera vc;
    SELECT IFNULL(ROUND(SUM(vd.totalVenta) - SUM(p.precioCompra * vd.cantidad), 2), 0) INTO ganancias
    FROM venta_detalle vd
             INNER JOIN productos p ON vd.codigo_producto = p.codigoBarras;
    SELECT COUNT(1) INTO productosPocoStock FROM productos p WHERE p.stock <= p.minimoStock;
    SELECT IFNULL(ROUND(SUM(vc.totalVenta), 2), 0) INTO ventasHoy FROM venta_cabecera vc WHERE vc.fechaVenta = CURDATE();

    SELECT
        IFNULL(totalProductos, 0) AS totalProductos,
        IFNULL(totalCompras, 0) AS totalCompras,
        IFNULL(totalVentas, 0) AS totalVentas,
        IFNULL(ganancias, 0) AS ganancias,
        IFNULL(productosPocoStock, 0) AS productosPocoStock,
        IFNULL(ventasHoy, 0) AS ventasHoy;

END
          

Script de Ajax

¿Qué es jQuery?

jQuery es una biblioteca de JavaScript rápida, pequeña y rica en funciones. Facilita la manipulación del DOM (Document Object Model), la manipulación de eventos, la animación, y simplifica la realización de solicitudes AJAX en comparación con el uso de JavaScript puro. jQuery abstrae muchas de las complejidades de JavaScript, haciendo que el desarrollo web sea más rápido y más accesible.

¿Cómo funciona jQuery?

jQuery simplifica el desarrollo web al proporcionar funciones y métodos predefinidos que abstraen tareas comunes. Los desarrolladores pueden utilizar estas funciones para realizar acciones sin tener que escribir grandes cantidades de código JavaScript.

La biblioteca está diseñada para ser compatible con múltiples navegadores, ocultando las diferencias de implementación entre ellos, lo que facilita la creación de aplicaciones web consistentes y funcionales en diversos entornos.

Estructura básica de jQuery:

La estructura básica de jQuery implica la selección de elementos HTML y la aplicación de acciones a esos elementos. Aquí hay un ejemplo sencillo:

        
          $.ajax({
            type: "method",
            url: "url",
            data: "data",
            dataType: "dataType",
            success: function (data) {
                
            }
          });
        
    

En nuestro ejemplo no enviamos nada porque no hace falta solo nos reencaminamos a un servidor, que es el encargado de hacer la consulta a nuestra base de datos

el codigo de nuestro jquery es el seguinte:

          <script>
$(document).ready(function() {
    $.ajax({
        type: "POST",
        url: "ajax/dashboard.php",
        dataType: "json",
        success: function(response) {
            // Puedes realizar acciones con la respuesta aquí
            console.log(response);

            // Ejemplo: Actualizar un elemento en la página con los datos recibidos
            $("#tjProductos").html(response.totalProductos);
            $('#tjTotalCompras').html(response.totalCompras);
            $('#tjtotalVentas').html(response.totalVentas);
            $('#tjganancias').html(response.ganancias);
            $('#tjPocoStock').html(response.productosPocoStock);
            $('#tjventasHoy').html(response.ventasHoy);
        }
    });
});
</script>
          

Explicacion del codigo:

Este código es un fragmento de JavaScript utilizando jQuery para realizar una solicitud AJAX (Asynchronous JavaScript and XML) a un servidor. La función $(document).ready asegura que el código se ejecute después de que el DOM (Document Object Model) esté completamente cargado.

Aquí hay una explicación línea por línea:

       $(document).ready(function() { // Esto asegura que el código dentro de la función anónima se ejecutará cuando el documento HTML esté completamente cargado.

    $.ajax({ // Inicia una solicitud AJAX utilizando jQuery.

        type: "POST", // Especifica que la solicitud será un método POST.

        url: "ajax/dashboard.php", // Especifica la URL del archivo PHP al que se enviará la solicitud.

        dataType: "json", // Indica que se espera recibir datos en formato JSON como respuesta.

        success: function(response) { // Define una función que se ejecutará si la solicitud AJAX tiene éxito. La respuesta del servidor se pasará como el parámetro response.

            console.log(response); // Muestra la respuesta del servidor en la consola del navegador. Esto es útil para depurar y verificar lo que se está recibiendo.

            $("#tjProductos").html(response.totalProductos); // Actualiza el contenido del elemento con el ID tjProductos en la página HTML con el valor de response.totalProductos.

            // Similarmente, se actualizan otros elementos en la página con los datos recibidos del servidor.

        }

    });
});
    

En resumen, este código realiza una solicitud al servidor utilizando AJAX, espera una respuesta en formato JSON y actualiza varios elementos en la página HTML con la información recibida del servidor. Este enfoque es comúnmente utilizado para actualizar dinámicamente partes de una página web sin recargar toda la página.

El Servidor o PHP

Servidor:

• En un contexto web, un servidor generalmente se refiere a un programa o máquina que proporciona servicios o recursos a otras máquinas llamadas clientes.
• En este caso, el servidor es donde reside el archivo PHP y procesa las solicitudes que llegan desde el cliente (en este caso, el navegador que ejecuta el código JavaScript).
• El servidor puede ser un servidor web como Apache, Nginx, o similar, que maneja las solicitudes HTTP y ejecuta el código del lado del servidor, como PHP.

PHP (Hypertext Preprocessor):

• PHP es un lenguaje de programación del lado del servidor diseñado especialmente para el desarrollo web.
• El archivo PHP ("dashboard.php" en este caso) contiene código que se ejecuta en el servidor cuando se realiza la solicitud desde el cliente.
• Su función principal es procesar la solicitud, realizar operaciones en el servidor (como acceder a bases de datos, realizar cálculos, etc.), y devolver una respuesta al cliente. En este caso, se espera una respuesta en formato JSON.

En resumen, el servidor (ejecutando un software como Apache o Nginx) recibe la solicitud AJAX enviada desde el código JavaScript en el navegador. Luego, el servidor utiliza el archivo PHP ("dashboard.php") para procesar la solicitud, realizar cualquier operación necesaria en el servidor, y enviar una respuesta al cliente, que es manejada por la función success en tu código JavaScript. Este flujo permite la comunicación entre el cliente y el servidor de manera asíncrona, sin necesidad de recargar la página completa.

Aqui dejo el codigo php de nuestro ejemplo

          <?php
include_once('../../conexion.php');

$sql = "CALL Prc_TarjetasDashboard";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$tarjetas = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($tarjetas[0]);
?>
          

Explicacion del codigo

<?php: Inicio de la etiqueta PHP.

include_once('../../conexion.php');: Incluye el archivo de conexión a la base de datos. Esto asume que el archivo conexion.php está ubicado dos niveles arriba del directorio actual.

$sql = "CALL Prc_TarjetasDashboard";: Define una cadena de texto que contiene una sentencia SQL. En este caso, parece estar llamando a un procedimiento almacenado llamado Prc_TarjetasDashboard.

$stmt = $pdo->prepare($sql);: Prepara la sentencia SQL para su ejecución utilizando PDO (PHP Data Objects), una interfaz de acceso a bases de datos en PHP.

$stmt->execute();: Ejecuta la sentencia SQL preparada.

$tarjetas = $stmt->fetchAll(PDO::FETCH_ASSOC);: Recupera todas las filas del conjunto de resultados como un array asociativo. En este caso, parece que se espera obtener información sobre tarjetas.

echo json_encode($tarjetas[0]);: Convierte el array asociativo de tarjetas en formato JSON y lo imprime. Aquí se asume que solo se espera una fila de datos, por eso se accede a $tarjetas[0].

?>: Fin de la etiqueta PHP.

En resumen, este script PHP se conecta a la base de datos, ejecuta un procedimiento almacenado llamado Prc_TarjetasDashboard, recupera la información relacionada con tarjetas, la convierte a formato JSON y la imprime como respuesta. Este tipo de script es comúnmente utilizado para proporcionar datos al frontend (por ejemplo, a través de una solicitud AJAX desde JavaScript) en aplicaciones web.

---

Ir al indice

---