PHP MySQLi : Como generar un reporte grafico de una Tabla de base de datos.

REPORTE ESTADISTICO PHP

Como están amigos, bueno continuando con esta serie de posts de PHP y Mysql en esta ocasión les traemos el post : “PHP MySQLi : Reporte grafico de una Tabla de base de datos”.

Obviamente nuestro objetivo es mejorar la calidad de nuestros reportes ya que como sabemos una imagen vale mas que mil palabras.

Bueno veamos como llevamos a cabo este laboratorio.

Pasos para la implementación de un reporte grafico con PHP y Mysql.

Bueno como siempre deberemos iniciar creando nuestra propia base de datos nuestra tabla y nuestros registros. Los pasos entonces serian estos:

  1. Crear una base de datos llamada “pruebas ” y una tabla llamada “productos” para almacenar nuestros registros.
  2. Insertar registros en la tabla productos de la base de datos que ha sido creada.
  3. Crear un archivo de conexión PHP para autorizar el acceso de conexión a las demás paginas.
  4. Diseñar una pagina administrador con un botón que muestre la tabla completa de los registros dentro de un IFRAME y un botón que llamara al reporte GRAFICO.
  5. Crear la pagina que muestra la tabla completa de los registros.
  6. Finalmente crear la pagina que mostrara el reporte grafico.

1. Crear la base de datos pruebas.

Para crear la base de datos:

CREATE DATABASE dbpruebas;

Ingresar a la base de datos creada;

USE dbpruebas;

Crear la tabla “productos”

CREATE TABLE IF NOT EXISTS productos ( id int(11) NOT NULL, 
producto varchar(25) NOT NULL, 
serie varchar(20) NOT NULL, 
fechaing date NOT NULL, 
PRIMARY KEY (id) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Ingresar registros a la tabla.

Estando dentro de nuestra base de datos ejecutamos el siguiente comando :

INSERT INTO productos
(id,producto,serie,fechaing)
VALUES
('1544','IPHONE4','IPH4167','2021-01-05'),
('1232','IPHONE4','IPH4367','2021-01-06'),
('1231','IPHONE4','IPH4577','2021-01-07'),
('1443','IPHONE5','IPH4557','2021-01-08'),
('1655','IPHONE5','IPH4527','2021-01-09'),
('1665','IPHONE6','IPF4564','2021-03-11'),
('1321','IPHONE6','IPH4167','2021-01-05'),
('1563','IPHONE6S','IPH4367','2021-01-06'),
('1453','IPHONE6S','IPH4577','2021-01-07'),
('1874','IPHONE6S','IPH4557','2021-01-08'),
('1345','IPHONE5','IPH4527','2021-01-09'),
('1341','IPHONE7','IPF4564','2021-03-11'),
('1765','IPHONE7PLUS','IPH4167','2021-01-05'),
('1543','IPHONE8','IPH4367','2021-01-06'),
('1463','IPHONE8','IPH4577','2021-01-07'),
('1562','IPHONE8PLUS','IPH4557','2021-01-08'),
('1673','IPHONEXR','IPH4527','2021-01-09'),
('1084','IPHONEXS','IPF4564','2021-03-11');

3. Crear un archivo de conexión.

Muy bien, ahora vamos a crear un archivo de conexión PHP para que nos otorgue los permisos de conexión a todos los módulos de nuestro sistema.

Este archivo se llamara “conectar.php”.

Recuerda que este archivo debe llevar las credenciales de tu base de datos.

<?php
   define('DB_SERVER', "localhost");
   define('DB_USERNAME', "Tu_usuario");
   define('DB_PASSWORD', 'Tu_Clave');
   define('DB_DATABASE', 'dbpruebas');
   $conn = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>

Vamos ahora por el paso 4.

4. Diseñar la pagina administrador.

Vamos a diseñar una pagina sencilla con 2 botones y un iframe, la llamaremos admin_reporte.php

El botón 1 llamara a una pagina con la tabla completa de los registros y el botón 2 llamara al reporte grafico. Ambos resultados se mostraran dentro de un IFRAME.

El código de nuestra pagina administrador sera el siguiente:

<!DOCTYPE html>
<html>
  
<head>
      
<!--======================================= ESTILO DE LA TABLA PLOMO ==============================-->      
	<title>PRUEBAS</title>
  	<meta charset="UTF-8">
	<link rel="icon" 		type="image/png" 	href="total/images/icons/favicon.ico"/>
	<link rel="stylesheet"  type="text/css" 	href="total/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet"  type="text/css" 	href="total/css_table/main.css">

      
<!--======================== ESTE ES EL ESTILO PARA LOS BOTONES Y EL CAJON DE BUSQUEDA=============-->	      
    <style>
		body {
		font-family: Arial;
			 }

		* {
  		box-sizing: border-box;
		}
		form.example input[type=text] {
  		padding: 10px;
  		font-size: 17px;
  		border: 1px solid grey;
  		float: left;
  		width: 80%;
  		background: #f1f1f1;
		}
		form.example button {
  		float: left;
  		width: 20%;
  		padding: 10px;
  		background: #2196F3;
  		color: white;
  		font-size: 17px;
  		border: 1px solid grey;
  		border-left: none;
  		cursor: pointer;
		}
		form.example button:hover {
  		background: #0b7dda;
		}
        form.example::after {
  		content: "";
  		clear: both;
  		display: table;
		}
  		h1 {text-align: center;}
  		h2 {text-align: center;}
  		p {text-align: center;}
        iframe{
        width: 100%;
        border: 2px solid #ccc;
    	}
   
  
    </style>
    
	</head>
<!--======================== ESTE ES EL ESTILO PARA LOS BOTONES Y EL CAJON DE BUSQUEDA=============-->      
	<body> 
  
 		<div class="limiter">
		<div class="container-table100">
		<div class="wrap-table100"> 
 		<h1>BASE DE DATOS DE PRUEBAS: TECNOCIENCIA PERU</h1>
        <br>

         <div id="wrap">
		 <div id="header">
		 <p align="center">
   

         <form class="example" target="iframe_box"  method="post"  action="" style= " margin-left: auto; margin-right: auto; width: 430px;">  

         <button style= " margin: 5px; width: 200px; background-color: #4CAF50 " type="submit" onclick="javascript: form.action='ver_tabla_pruebas.php';">Ver tabla completa</button>
         <button style= " margin: 5px; width: 200px; background-color: #4CAF50 " type="submit" onclick="javascript: form.action='ver_reporte_grafico.php';">Ver reporte Grafico</button>
         
         </form>               
        
        </div>
		</div>
                   
        
        <div align="center"> <iframe name="iframe_box" id="iframe_box" class="iframe" scrolling="no" frameborder="0" ></iframe> </div>
        

        <script> 
        var div = document.getElementById("iframe_box"); 
        div.onload = function() 
        { 
          
         div.style.height = div.contentWindow.document.body.scrollHeight + 'px'; 

         div.style.width =  div.contentWindow.document.body.scrollWidth+'px';
        
        } 
    	</script> 
          
                
	   	</div>
  		</div>
		</div>
</body>
</html>

El resultado visual de esta pagina seria el siguiente:

5. Crear la pagina que muestra la tabla completa.

Esta pagina la llamaremos “ver_tabla_pruebas.php” y mostrara en una tabla todos los registros ingresados a nuestra base de datos.

el código para la creación de esta pagina sera el siguiente :

<html>
   
	<head>
    
	<link rel="stylesheet" type="text/css" href="total/css_table/main.css">
    <style>
	.content {
  	max-width: auto;
  	margin: auto; }

	</style>
           
	</head>   
<center>
		<body style = "margin-top:0; background-color:powderblue">
        <div class="content"> 
		<div class="container">
        <div class='wrap-table100'>  
        <div class='table100 ver1 m-b-110'>    
        <table data-vertable='ver1'>
          					<br>
              				<h2 >TABLA DE PRODUCTOS</h2>
          					<br>
                        	<thead>
							<tr class='row100 head'>
							<th align="center" style='width:50px'>ID</th> 
							<th class='column100 column2' data-column='column2'><center>PRODUCTO</center></th>
							<th class='column100 column3' data-column='column3'><center>SERIE</center></th>
							<th class='column100 column4' data-column='column4'><center>FECHA INGRESO</center></th>
                            
           					</tr>
							</thead>   
              <tbody>
				

<?php
require('conectar.php');
?>
						                      

<?php

$sql = "SELECT * from productos order by fechaing DESC";
$result = mysqli_query($conn, $sql);
while($crow = mysqli_fetch_assoc($result))
            			{	
?>
<tr class='row100'>
<td style='width:10px'><center> <?php echo $crow['id'];?> </center></td>
<td> <center><?php echo $crow['producto']; ?>  </center> </td>
<td> <center><?php echo $crow['serie']; ?></center></td>
<td> <center><?php echo $crow['fechaing']; ?></center></td>
</tr>
<?php
  	    	}		
?>

          	</tbody>
	    	</table>             
        	    
	</div>
	</div>
	<div>
	</div>
	</div>
	</div>
 
  </body>
  	</center>
	</html>

El resultado visual de esta pagina sera el siguiente:

Reporte grafico de una Tabla de base de datos

Finalmente llegamos al ultimo paso:

6. Crear la pagina que muestra el reporte grafico.

Para la creación de nuestro reporte grafico utilizaremos un api de google, el cual facilita en gran medida el trabajo de programación de los desarrolladores.

Nosotros lo hemos modificado un poquito para que ademas nos muestre el total de ingresos dentro del mismo reporte.

Sin mas el código de esta pagina es el siguiente:

<?php  
 include("conectar.php"); 
 $query = "SELECT producto, count(*) as number FROM productos GROUP BY producto order by number DESC";  
 $result = mysqli_query($con, $query);

 ?>  
 <!DOCTYPE html>  
 <html>  

<head>  
<style>
.tcentrado{
    height:90PX;
    width:90PX;
    text-align:center;
    border:1px solid silver;
    display: table-cell;
    vertical-align:middle;
}

#contenedor {
width: 900px;
margin: 0 auto;
}
  
</style>
           <title>REPORTE GRAFICO SERTEC GRUPO TECNOLOGIES</title>  
           <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>  
           <script type="text/javascript">  
           google.charts.load('current', {'packages':['corechart']});  
           google.charts.setOnLoadCallback(drawChart);  
           function drawChart()  
           {  
                var data = google.visualization.arrayToDataTable([  
                          ['Modelo', 'Number'],  
                          <?php  
                          while($row = mysqli_fetch_array($result))  
                          {  
                               echo "['".$row["producto"]."', ".$row["number"]."],";  
                          }  
                          ?>  
                     ]);  
                var options = {  
                      title: 'PORCENTAJE DE INGRESOS POR MODELO :',  
                      //is3D:true,  
                      pieHole: 0.4  
                     };  
                var chart = new google.visualization.PieChart(document.getElementById('piechart'));  
                chart.draw(data, options);  
           }  
</script>  
        
</head>  
<body>  
     
<div> <?php echo "$count"; ?>  </div> 
<div id="contenedor" > 
<div  class="tcentrado" style="width:900px;">   

<h3 align="center">
<?php
$sql='SELECT * FROM productos';
if ($result=mysqli_query($con,$sql))
  {
  $rowcount=mysqli_num_rows($result);
  echo "<table border = '1' align= center> \n"; 
  echo "<td center> <center>REPORTE GRAFICO - TOTAL DE INGRESOS: $rowcount</center></td> \n";
  echo "</table> \n"; 
  }
?>
</h3> 
     <div class="tcentrado" id="piechart" style="width: 900px; height: 500px;"></div> 
     </div>  
     </div> 
</body> 
 
</html>

y este seria el resultado visual de nuestro reporte:

Reporte grafico de una Tabla de base de datos

como puedes ver, en este caso el reporte nos muestra la cantidad de ingresos por modelo de producto.

El reporte es muy flexible ya que podemos escoger otros valores representativos solo editando el código :



<?php  
 include("conectar.php"); 
 $query = "SELECT producto, count(*) as number FROM productos GROUP BY producto order by number DESC";  
 $result = mysqli_query($con, $query);

 ?>  

Eso ha sido todo amigos en este post “PHP MySQLi : Como generar un reporte grafico de una Tabla de base de datos” esperamos que nuestro pequeño aporte en algún momento te sea de utilidad.

Recuerda que una manera de ayudarnos o agradecer nuestro trabajo es visitando los anuncios que aparecen a lo largo del post. Gracias!
Recuerda también que puedes visitar todo el contenido de nuestro blog de informática en :

TODOS LOS POSTS DE INFORMATICA.

Tambien puedes visitar nuestro canal de youtube en :

CANAL DE YOUTUBE TECNOCIENCIA

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *