En el post de hoy, vamos a compartir código fuente que nos permite llevar a cabo consultas SQL sobre un gestor de bases de datos relacional desde una página web. Es decir, elaborar una pasarela de información con dos herramientas: MySQL para la gestión de datos y PHP para visualizar en páginas web dinámicas, los valores almacenados en el Sistema de Gestión de Base de Datos.

De lo que se trata es de implementar cualquier consulta que queramos desarrollarár mediante código SQL en una página web dinámica elaborada con PHP, lenguaje compatible con HTML. Ya sea mediante la implementación de vistas o con cualquier consulta en lenguaje SQL, se perfilará el contenido que deseamos visualizar en la página web.

Como podéis ver en el código ofrecido a continuación, existen cuatro partes en el ejercicio:

1) La primera con CSS (Cascading Style Sheets) que en este caso está incluido en el mismo fichero, pero que podéis incluir en un fichero aparte para no extenderos en el código.

2) Segunda, mediante el comando mysqli que permite conectarse al Sistema Gestor de Bases de Datos relacional MySql. Y que en muchos tutoriales encontraréis igualmente con un fichero al margen que se invoca cada vez que se realiza un ejercicio similar.

3) Tercera con la consulta que nos permite comunicar al Query la información que deseamos implementar en el sitio web. Decimos consulta por el ejemplo, pero podría ordenarse la creación de una tabla o cualquier otra instrucción que podamos insertar en la linea de comandos del Query de MySQL o Workbench.

4) Finalmente, con una sintaxis HTML definimos la estructura que queremos dar a la visualización de los datos que hemos realizado al Query de MySql.

Cada vez que se refresque la página se realizará la consulta a tiempo real. Podéis incluir todo el código HTML y CSS que consideréis para editar el formato, añadir o cambiar elementos, insertar imagenes y demás.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
	background: #aab7b8;
	border: 5px;
	}	

/* th es el interior de las celdillas de las filas*/

td {
    border: 0.5px solid black;
    background: #aeb6bf;
    font-family: Arial;
    font-size:large;
}
table {
    border: 0.5px solid black;
    font-family: Arial;
    margin: 0 auto;
    font-size:large;
    align-content: center;
    background-color:gray;
    opacity: 0.7;
     }

/* th es el interior de las celdillas de la cabecera*/

th {
    border: 1px solid black;
    padding:10px;
    background:#aab7b8;
    font-family: Arial;
    font-size:large;
    column-width: 30px;
}


h1 {color:#283747;
	text-align:center;
	border: white;

}
</style>
</head>
<body>
<h1>Clasificacion histórica de la Liga</h1>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "database";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT id_equipo, nombre, temporadas_en_primera, puntos, pj, pg, pp, gf, gc FROM v_clasificacion_historica";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    echo "<table><tr><th>ID</th><th>Club</th><th>Temporadas en Primera División</th><th>Puntos</th><th>PJ</th><th>PG</th><th>PP</th><th>GF</th><th>GC</th></tr>";
    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo "<tr><td align=center>" . $row["id_equipo"]. 
             "</td><td>" . $row["nombre"]. 
             "</td><td align=center bg-color=blue>" . $row["temporadas_en_primera"]. 
             "</td><td align=center>" . $row["puntos"]. 
             "</td><td align=center>" . $row["pj"]. 
             "</td><td align=center>" . $row["pg"]. 
             "</td><td align=center>" . $row["pp"].
             "</td><td align=center>" . $row["gf"].
             "</td><td align=center>" . $row["gc"].
             "</td></tr>";
    }
    echo "</table>";
} else {
    echo "0 results";
}

$conn->close();
?>

</body>
</html>

$Servername: Es el nombre del servidor.

$Username: Es el nombre del usuario dado de alta en el SGBD.

$Passworth: Es la contraseña del usuario.

$dbname: Es el nombre de la base de datos sobre la que queremos lazar la consulta.

$sql: Comunica la consulta que se debe realizar al SGBD.

$Row: Idenitifca entre corchetes el nombre de los campos que se deseean extraer.

Esta pasarela de información es una herramienta eficaz y gratuita, que te permitirá elaborar páginas web dinámicas con muy poco código. Eso sí, hemos incluido en la web: SQL, PHP, HTML y CSS para la creación de la pasarela de información. La visualización del ejercicio en un navegador como Firefox es la que sigue:

Visualización de los datos consultados, puede ser usado como herramienta de consulta o repositorio de contenidos, podéis incluir links, imágines o cualquier otro elemento que os interese.

Sin duda, un fantástico recurso por ejemplo para monitorizar las salidas de los próximos vuelos en una terminal terrestre o compartir informaciones dinámicas para las rutinas de clientes o empleados de una empresa u organización.

Autor: ignacio

Profesor de Sistemas de Gestión de Información

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *