Mostrar datos SQL en HTML ▶ Lacodigoteca.com

Tabla de contenidos

SQL

Primero lo que tenemos que hacer es preparar nuestra consulta SQL. Además, en el caso de asociar varias tablas,es mejor utilizar alias para todos los campos. Así diferenciamos sin problemas qué campo y tabla queremos mostrar. Voy a mostrar la siguiente consulta de ejemplo:

SELECT idtienda,nombre,direccion,cp,ciudad,provincia,cif,telefono,email,paginaweb 
FROM tiendas

PHP

El siguiente paso es tener los datos de nuestro proveedor de Hosting (o de nuestro servidor local) y los rellenamos en el código (dentro de la función conectar()).

<?php
//Función para conectarnos con la BBDD 
function conectar(){
    // Rellenamos todos los datos para conectarnos a la BBDD
    $x=new mysqli(
        "", // URL
        "", // Usuario
        "", // Clave
        "" // Nombre 
    );
    //En caso de haber un error de conexión a la BBDD...
    if ($x->connect_errno){
        //Salimos de la conexión con el error
        die ("Error: ".$x->mysqli_connect_errno().$x->mysqli_connect_error());
        exit(); 
    }
return $x;
}
?>

Nuestro siguiente paso es pasar los datos de nuestro servidor a un fichero XML, para ello utilizaremos la función header de PHP:

//Indicamos que todos los valores se mostrarán en el navegador en XML
header("Content-type: text/xml");

Ahora vamos a mostrar la consulta SQL en un fichero XML desde PHP. Vamos a utilizar la función switch para poder tener más consultas SQL en un sólo fichero PHP. Si deseamos tener más consultas SQL, sólo tenemos que copiar dentro de SWITCH desde «case» hasta «break» tantas veces como consultas SQL necesitemos.

//Selector de parámetros 
switch ($_GET['parametro']) {
    
     case "GetTiendas": // MOSTRARÁ LOS DATOS DE LAS TIENDAS
        $xml = '<tiendas>';
            $consulta=$c->query("SELECT idtienda,nombre,direccion,cp,ciudad,provincia,cif,telefono,email,paginaweb FROM tiendas");
            while($sql=$consulta->fetch_assoc()){
                $xml .="<tienda>".
                        "<idtienda>".$sql['idtienda']."</idtienda>".
                        "<nombre>".$sql['nombre']."</nombre>".
                        "<direccion>".$sql['direccion']."</direccion>".
                        "<cp>".$sql['cp']."</cp>".
                        "<ciudad>".$sql['ciudad']."</ciudad>".
                        "<provincia>".$sql['provincia']."</provincia>".
                        "<cif>".$sql['cif']."</cif>".
                        "<telefono>".$sql['telefono']."</telefono>".
                        "<email>".$sql['email']."</email>".
                        "<paginaweb>".$sql['paginaweb']."</paginaweb>".
                        "</tienda>";
            }
        $xml .= '</tiendas>';
        echo $xml;
    break;
    
    default:
       echo "Error en selección del parámetro";
}

Así quedaría nuestro fichero php (en mi caso lo llamaré funciones.php)

<?php
//Función para conectarnos con la BBDD 
function conectar(){
    // Rellenamos todos los datos para conectarnos a la BBDD
    $x=new mysqli(
        "", // URL
        "", // Usuario
        "", // Clave
        "" // Nombre 
    );
    //En caso de haber un error de conexión a la BBDD...
    if ($x->connect_errno){
        //Salimos de la conexión con el error
        die ("Error: ".$x->mysqli_connect_errno().$x->mysqli_connect_error());
        exit(); 
    }
return $x;
}


//Nos conectamos a la BBDD.
conectar();

//Indicamos que todos los valores se mostrarán en el navegador en XML
header("Content-type: text/xml");

//Selector de parámetros 
switch ($_GET['parametro']) {
    
     case "GetTiendas": // MOSTRARÁ LOS DATOS DE LAS TIENDAS
        $xml = '<tiendas>';
            $consulta=$c->query("SELECT idtienda,nombre,direccion,cp,ciudad,provincia,cif,telefono,email,paginaweb FROM tiendas");
            while($sql=$consulta->fetch_assoc()){
                $xml .="<tienda>".
                        "<idtienda>".$sql['idtienda']."</idtienda>".
                        "<nombre>".$sql['nombre']."</nombre>".
                        "<direccion>".$sql['direccion']."</direccion>".
                        "<cp>".$sql['cp']."</cp>".
                        "<ciudad>".$sql['ciudad']."</ciudad>".
                        "<provincia>".$sql['provincia']."</provincia>".
                        "<cif>".$sql['cif']."</cif>".
                        "<telefono>".$sql['telefono']."</telefono>".
                        "<email>".$sql['email']."</email>".
                        "<paginaweb>".$sql['paginaweb']."</paginaweb>".
                        "</tienda>";
            }
        $xml .= '</tiendas>';
        echo $xml;
    break;
    
    default:
       echo "Error en selección del parámetro";
}

?>

Subimos el fichero PHP a nuestro servidor. Para poder visualizar el XML pondremos en nuestro navegador:
http://(mi dominio o localhost)/funciones.php?parametro=GetTiendas

JavaScript

Ahora nuestra parte es recoger lo que recibe nuestro fichero PHP (pero si lo descargamos es un XML) mediante una función, AJAX (Asíncrono JavaScript And XML).

Resumiendo, nuestro navegador se comunica de manera asíncrona con el servidor en segundo plano. Además, no permite hacer cambios sobre nuestra página web sin necesidad de refrescar la página, mejora la interactividad, velocidad y usabilidad.

AJAX accede a los datos se realiza mediante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso, no es necesario que el contenido asíncrono esté formateado en XML (pero lo vamos a utilizar para dibujar nuestro DOM y recorrer más fácil los datos).

Vamos a dibujar en una tabla todos los datos que salen en pantalla. La etiqueta <tbody> tendrá un ID que se llamará datos e interactuaremos con ella. Así quedaría:

// Función que utilizaremos para que se ejecute cada vez que cargue el HTML
function init(){
    listaTiendas();
}

function listaTiendas(){
    $('#datos').empty();
    $.ajax({
        url: 'funciones.php?parametro=GetTiendas',
        dataType: 'xml',
        success: function (data) {    
            $(data).find('tienda').each(function(){
                $("#datos").append(
                    '<tr>'+
                        '<td>'+$(this).find('idtienda').text()+'</td>'+
                        '<td>'+$(this).find('nombre').text()+'</td>'+
                        '<td>'+$(this).find('cp').text()+'</td>'+
                        '<td>'+$(this).find('ciudad').text()+'</td>'+
                        '<td>'+$(this).find('provincia').text()+'</td>'+
                        '<td>'+$(this).find('cif').text()+'</td>'+
                        '<td>'+$(this).find('telefono').text()+'</td>'+
                        '<td>'+$(this).find('email').text()+'</td>'+
                        '<td>'+$(this).find('paginaweb').text()+'</td>'+
                    '<tr>');
            });
        }
    });
}

HTML

Ya es la hora de poder mostrar en un fichero HTML datos recogidos en un servidor. Así quedaría:

<html>
    <head>
     <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body onload="init()">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>idtienda</th>
              <th>nombre/th>
              <th>direccion</th>
              <th>cp</th>
              <th>provincia</th>
              <th>provincia</th>
              <th>provincia</th>
              <th>provincia</th>
              <th>provincia</th>
            </tr>
          </thead>
          <tbody id="datos">
          </tbody>
        </table>
       <script type="text/javascript" src="modulos/clientes/clientes.js"></script>        
    </body>
</html>

Aspectos a tener en cuenta

En nuestro fichero HTML, en la etiqueta <body>, tiene una llamada a una función que se llama init(). Nos servirá esta función por si queremos ejecutar varias funciones a la hora de cargar nuestro fichero HTML.
No podemos recoger datos de otro servidor que no sea el nuestro, ya que por seguridad no lo permite (cross domain).
Puse la llamada de mi JavaScript al final de la etiqueta <body> ya que mejoramos en aspectos de rendimiento, y da tiempo a que el navegador cargue todo el DOM y a posteriori, la función de JavaScript.

Todos estos son los pasos que he conseguido recoger datos de SQL y mostrarlos en un fichero HTML. Si hay algún aspecto a mejorar, deja un comentario y lo llevaré a la práctica.