¬ŅC√≥mo crear un Dashboard con gr√°ficas en PHP y MySQL?

Inicio‚Äļphp mysql‚Äļ¬ŅC√≥mo crear un Dashboard en PHP y MySQL?
¬ŅC√≥mo crear un Dashboard con gr√°ficas en PHP y MySQL?

by Juan Carlos García

22-Jul-2023

(10)

Suscribirme al canal:

Dashboard en PHP

Bienvenido viajero web, ya estamos casi en la parte final de la primera parte de nuestro curso básico de PHP con MySQL, en este vídeo aprenderemos a crear un Dashboard utilizando solicitudes AJAX para consumir un servicio básico en PHP, además, aprenderás a crear una aplicación web en PHP y ya sabes si te gusta conviértete en un viajero web y suscríbete al canal y comparte.

¬°No te puedes perder las nuevas clases ūüßź!

PHP - MySQL

PHP - MySQL

Curso gratuito de PHP y MySQL para principiantes

Conectar PHP con MySQL

Conectar PHP con MySQL

¬ŅC√≥mo realizar la conexi√≥n de PHP con MySQL utilizando PDO y MySQLi?

Crear Base de Datos MySQL

Crear Base de Datos MySQL

¬ŅC√≥mo crear una base de datos MySQL con PHP?

Insertar datos en MySQL desde PHP

Insertar datos en MySQL desde PHP

¬ŅC√≥mo insertar datos en MySQL desde PHP? Y ¬Ņ C√≥mo obtener el ultimo ID insertado de una tabla?

Sentencias Preparadas MySQL PHP

Sentencias Preparadas MySQL PHP

¬ŅC√≥mo crear y ejecutar sentencias preparadas (Prepared Statement) en MySQL con PHP?

Select, Update, Delete MySQL PHP

Select, Update, Delete MySQL PHP

¬ŅC√≥mo hacer y ejecutar querys SELECT, UPDATE y DELETE en MySQL desde PHP?

¬ŅC√≥mo crear un Dashboard en PHP y MySQL?

¬ŅC√≥mo crear un Dashboard en PHP y MySQL?

¬ŅC√≥mo crear un Dashboard con gr√°ficas en PHP y MySQL?

Procedimientos Almacenados MySQL PHP

Procedimientos Almacenados MySQL PHP

CREATE PROCEDURE en MySQL: ¬ŅC√≥mo crear procedimientos almacenados en MySQL?

Login en PHP

Login en PHP

LOGIN PHP: ¬ŅC√≥mo crear un login en PHP y MySQL en menos de una hora?

ūüßź Autoevaluaci√≥n: ¬ŅC√≥mo crear un Dashboard en PHP y MySQL?

¬ŅCu√°l es la forma correcta de establecer una conexi√≥n PDO a una base de datos MySQL en PHP?

Para ejecutar una consulta SELECT en MySQL usando PDO en PHP, ¬Ņcu√°l de las siguientes opciones es correcta?

¬ŅCu√°l es la funci√≥n adecuada para obtener la suma de un campo num√©rico en MySQL usando PDO en PHP?

Adquiere tu libro de PHP y MySQL

Con estos libros complementar√°s tu aprendizaje en PHP y MySQL

¬Ņ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.

ūüßź Autoevaluaci√≥n: ¬ŅC√≥mo crear un Dashboard en PHP y MySQL?

¬ŅCu√°l es la forma correcta de establecer una conexi√≥n PDO a una base de datos MySQL en PHP?

Para ejecutar una consulta SELECT en MySQL usando PDO en PHP, ¬Ņcu√°l de las siguientes opciones es correcta?

¬ŅCu√°l es la funci√≥n adecuada para obtener la suma de un campo num√©rico en MySQL usando PDO en PHP?

Juan Carlos

Juan Carlos García

Desarrollador de software / SEO

Durante a√Īos he desarrollado plataformas dedicadas al rastreo satelital y varios sitios web que se encuentran en la primera p√°gina de Google, y hoy quiero compartir contigo lo que se en tecnolog√≠as como: Node JS, PHP, C# y Bases de datos.

Si quieres apoyarme sígueme en mis redes sociales y suscríbete a mi canal de YouTube.

EWebik

Dise√Īo de p√°ginas web y aplicaciones moviles.

© 2023 EWebik