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

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.

Juan Carlos García
by Juan Carlos García24-Ag-202210

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;
    }

Suscribirme

Gracias por tu calificación:

10

Categorías


  • EWebik
  • React JS
  • SQL
  • Base de datos
  • PHP - MySQL
  • P√°gina Web
  • Servidores
  • Flexbox
  • NodeJS
  • WordPress
  • POO

ūü•á Creaci√≥n de p√°ginas web

‚ö°ÔłŹ Quiero mi p√°gina web ūüí™ūüŹľ

 

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.

Suscribirme

Gracias por tu calificación:

10

Categorías


  • EWebik
  • React JS
  • SQL
  • Base de datos
  • PHP - MySQL
  • P√°gina Web
  • Servidores
  • Flexbox
  • NodeJS
  • WordPress
  • POO

ūü•á Creaci√≥n de p√°ginas web

‚ö°ÔłŹ Quiero mi p√°gina web ūüí™ūüŹľ
Juan Carlos García

Juan Carlos García

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.

Desarrollador de software

© 2022 EWebik

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