Mostrar datos SQL en HTML

Facebook
Twitter
LinkedIn
WhatsApp

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.

Facebook
Twitter
LinkedIn

4 comentarios en “Mostrar datos SQL en HTML”

  1. eduardo

    que tal, soy nuevo en cuestion de html,js,php no he podido replicar tu ejemplo.
    si fuera posible me pasarias el codigo completo para ver si asi lo puedo apreciar mejor. te lo agradeceria

    Responder
    1. Alfredo

      Hola Eduardo! Antes de nada, muchas gracias por visitar mi blog.

      Al final del POST, están cada código para realizar pruebas, pero es posible a que te falte la parte de base de datos. Tienes que crearte una tabla (tiendas) con los siguientes campos: idtienda (numérico),nombre (todos los campos en adelante son varchar),direccion,cp,ciudad,provincia,cif,telefono,email y paginaweb.

      Si ves que te sigue fallando, puede ser debido a que no estés bien conectado a la base de datos.

      Un saludo!

      Responder

Deja un comentario

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

Scroll al inicio