¿Cómo crear un Dashboard con gráficas en PHP y MySQL?

Pasos para crear un Dashboard en PHP con MySQL

Lo primero que debo decir es que para hacer un Dashboard en PHP que lea los datos desde una Base de Datos MySQL se puede hacer de muchas maneras, aquí trataremos un caso en especifico que estoy seguro te será de gran utilizad y podrás aplicar en tus proyectos, así que como siempre te dejo los paso que vamos a seguir para crear este bonito Dashboard que tiene:

• Indicadores para mostrar un resumen muy puntual de los datos
• Una gráfica para que muestra los datos en forma de barras
• Y finalmente una tabla con los datos de la gráfica para poder interpretar mejor la información

Y para poder hacer todo lo que acabo de mencionar seguiremos los siguientes pasos que realmente será lo que aprenderás en este vídeo.

• Aprenderás a estructurar un proyecto web en PHP
• Maquetar una página web con estructura tipo Dashboard en HTML5 y Bootstrap
• Crearemos una nueva clase de nombre MySQL que recupere los datos de la Base de Datos MySQL con sentencias preparadas en PHP
• Vamos a crear un servicio básico en PHP que atienda solicitudes AJAX tipo post y según cada solicitud llame un método de la clase MySQL para recuperar ciertos datos
• Agregaremos JQUERY a nuestro proyecto para utilizar AJAX y realizar request POST a un servicio PHP y mostrar los datos recuperados en nuestro Dashboard
• Vamos agregar la librería Chart js que nos permite crear gráficas muy vistosas y de una manera muy fácil
• Crearemos una tabla desde JavaScript y mostrarla en nuestro Dashboard

¿Qué necesito para crear un Dashboard en PHP?

Como siempre enumeraré las herramientas que debes tener para este vídeo, aunque seguramente ya los tienes

• Tener instalado XAMPP (¿Cómo instalar XAMPP?)
• Usar un editor de código como Visual Studio Code
• Te recomiendo ver los 5 vídeos anteriores para comprender mejor
• Te dejo el repositorio para que tengas acceso al código

Y sin mas espero te guste todo el vídeo y lo compartas si crees que te ha sido útil, a continuación describiré las partes mas importantes del vídeo y las funciones nuevas que utilizamos en esta clase.

Consultado los datos para el Dashboard desde PHP a MySQL

En el vídeo se explica todo paso a paso, sin embargo, el curso trata de PHP y MySQL así que en esta clase escrita nos centraremos en estos das partes, comencemos explicando la clase MySQL que creamos en este proyecto.

Creando la conexión a Base de Datos

Recuerda que durante el curso aprendimos las 3 sintaxis que podemos utilizar en PHP con MySQL, y en este Dashboard nos centramos únicamente en la sintaxis PDO ya que tiene muchas ventajas y hoy en día es muy recomendable, así que lo primeros que debemos hacer para conectarnos a la Base de Datos es lo siguiente

try {
            $this->oConBD = new PDO("mysql:host=" . $this->ipBD . ";dbname=" . $this->nombreBD, $this->usuarioBD, $this->passBD);
            return true;
} catch (PDOException $e) {
  echo "Error al conectar a la base de datos: " . $e->getMessage() . "
";
  return false;
}

Ahora para obtener los 3 indicadores de nuestro Dashboard realizaremos un SELECT utilizando la función SUM:

• SUM, nos permite sumar todos los valores de una columna

Utilizando SUM en PHP con MySQL

Aquí tienes los 3 métodos que recuperan cada uno de los indicadores de nuestro Dashboard.

public function getVendidos()
    {
        $vendidos = 0;
        try {
            $strQuery = "SELECT SUM(cantidad_vendidos) as vendidos FROM resumen_productos";
            if ($this->conBDPDO()) {
                $pQuery = $this->oConBD->prepare($strQuery);
                $pQuery->execute();
                $vendidos = $pQuery->fetchColumn();
            }
        } catch (PDOException $e) {
            echo "MySQL.getVendidos: " . $e->getMessage() . "
";
            return -1;
        }
        return $vendidos;

    }

public function getAlmacen()
    {
        $almacen = 0;
        try {
            $strQuery = "SELECT SUM(en_almacen) as enAlmacen FROM resumen_productos";
            if ($this->conBDPDO()) {
                $pQuery = $this->oConBD->prepare($strQuery);
                $pQuery->execute();
                $almacen = $pQuery->fetchColumn();
            }
        } catch (PDOException $e) {
            echo "MySQL.getAlmacen: " . $e->getMessage() . "
";
            return -1;
        }
        return $almacen;
    }

public function getIngresos()
    {
        $ingreso = 0;
        try {
            $strQuery = "SELECT (SUM(precio) * SUM(cantidad_vendidos))/100000 as ingresos FROM resumen_productos";
            if ($this->conBDPDO()) {
                $pQuery = $this->oConBD->prepare($strQuery);
                $pQuery->execute();
                $ingreso = $pQuery->fetchColumn();
            }
        } catch (PDOException $e) {
            echo "MySQL.getIngresos: " . $e->getMessage() . "
";
            return -1;
        }
        return $ingreso;
    }

Como puedes ver los tres métodos son muy similares, pero en el de ingresos agregamos.

(SUM(precio) * SUM(cantidad_vendidos))/100000

Ya que los ingresos multiplicamos el precio por la cantidad de vendidos, el 100000 es un factor de ajuste para que los datos no se vean tan disparados ya que la fuente de datos no es real y tiene inconsistencias.

Obteniendo los datos para la Gráfica

Ahora vemos el método para obtener los datos de la gráfica, necesitamos retornar un resumen por día, tanto de ventas como precios.

public function getDatosGrafica()
    {
        $jDatos = '';
        $rawdata = array();
        $i = 0;
        try {
            $strQuery = "SELECT sum(precio) as tPrecio, SUM(cantidad_vendidos) as tVendidos
            ,DATE_FORMAT(fecha_alta, '%Y-%m-%d') as fecha FROM resumen_productos GROUP BY DATE_FORMAT(fecha_alta, '%Y-%m-%d')";
            
            if ($this->conBDPDO()) {
                $pQuery = $this->oConBD->prepare($strQuery);
                $pQuery->execute();
                $pQuery->setFetchMode(PDO::FETCH_ASSOC);
                while($producto = $pQuery->fetch()) {
                    $oGrafica = new Grafica();
                    $oGrafica->totalPrecio = $producto['tPrecio'];
                    $oGrafica->totalVendidos = $producto['tVendidos'];
                    $oGrafica->fechaVenta = $producto['fecha'];
                    $rawdata[$i] = $oGrafica;
                    $i++;
                }
                $jDatos = json_encode( $rawdata);
            }
        } catch (PDOException $e) {
            echo "MySQL.getDatosGrafica: " . $e->getMessage() . "
";
            return -1;
        }
        return $jDatos;
    }

Listo esta completa nuestra clase de MySQL, recuerda que tenemos todo el código en el repositorio del proyecto.

Creando el servicio PHP para atender solicitudes AJAX

Por último, el archivo servidor.php lo utilizamos como un servicio PHP que atiende solicitudes POST desde el Front end o del lado del cliente.

<?php
include './mysql.php';
$oMysql = new MySQL();

$response = "";
$rq = $_POST['rq'];

if ($rq == 1) {
    $response = $oMysql->getVendidos();
} else if ($rq == 2) {
    $response = $oMysql->getAlmacen();
} else if ($rq == 3) {
    $response = $oMysql->getIngresos();
} else if ($rq == 4) {
    $response = $oMysql->getDatosGrafica();
}

echo $response;

Como ves, en nuestro servicio creamos un objeto de la clase MySQL para acceder a los métodos, pero lo mas importante de explicar es la línea donde utilizamos $_POST['rq'] ya que en PHP es un arreglo asociativo de variables que son pasadas al script actual a través del método POST de HTTP y esto ocurre cunado utilizamos application/x-www-form-urlencoded o multipart/form-data como Content-Type de HTTP en el request, el cual puede desde una página web o aplicación móvil.

Excelente creo que esto es ha sido lo mas importante de este vídeo, si no te ha quedado del todo claro te recomiendo que mires el vídeo, me escribas o me dejes comentarios en el vídeo en YouTube y por favor, ayúdame a compartir para motivarme y seguir creando mas vídeos.