En este artículo vamos a crear un mecanismo para mostrar las tablas de una base de datos en MySQL dinámicamente, el objetivo es que el usuario disponga de una herramienta con la que elegir la tabla que quiere visualizar, este mecanismo puede ser muy util para obtener los resultados de una familía de articulos, los registros de una sección, los resultados de una consulta personalizada o cualquier otro uso que podamos necesitar.
Para llevar a cabo este proceso vamos a necesitar tres archivos PHP y crear una base de datos con las tablas y los registros que posteriormente mostraremos dinámicamente en la página, el mecanismo es muy sencillo comenzamos con la página principal, esta será la encargada de llamar por AJAX al contenido de la tabla elegida y de mostrar los resultados.
En una página Html5 sin olvidarnos de incluir un CDN para jQuery, creamos un contenedor principal con su atributo id=”main”, dentro de este insertaremos un contenedor con id=”aside” dentro del cual insertamos código PHP y otro contenedor con id=”section”, este será el encargado de mostrar los resultados de las consultas dentro de un contenedor con id=”contenido”:
El código sería es el siguiente:
<div id="main">
<div id="aside">
<?php include 'listado_tablas.php';?>
</div>
<div id="section">
<div id="contenido"></div>
</div>
</div>Guardamos el archivo como index.php
En el elemento con identificador “aside” hemos insertado código PHP en el que hemos creado un “include” para separar el código, el archivo ‘listado_tablas.php’ es el que contiene el formulario que el usuario utilizará para moverse entre las tablas de la base de datos, el mecanismo que he creado en el formulario para llevar a cabo este proceso ha sido crear un bucle que muestre todas la tablas que existen en una base de datos especifica, cada una dentro de un botón, este archivo es más sencillo de lo que puede parecer a primera vista, vamos a verlo paso a paso.
listado_tablas.php
Creamos 3 variables para identificar host, usuario y nombre de la base de datos, a continuación establecemos la conexión con la base de datos, creamos un listado de las tablas y lo mostramos con un bucle “while”.
<?php
$dbhost = "localhost";
$dbuser = "root";
$dbname = "prueba_ajax";
mysql_connect($dbhost,$dbuser);
$gtablas = mysql_list_tables($dbname);
while (list($bases) = mysql_fetch_row($gtablas)) {
...
}
?>Ahora crearemos el código que se ejecutará en el bucle “while”, por cada tabla que exista crearemos un mini-formulario con dos botones, un <input> de tipo “text” que no se mostrará y obtendrá el valor de la tabla que está mostrando para usarlo posteriormente para traer el contenido por AJAX, y otro de tipo “submit” para enviar la consulta, el valor de este <input> será el mismo que el nombre de la tabla al igual que el primero.
<?php
echo '
<form class="f1" action="traertablas.php" class="asidenav">
<input type="text" name="bases" value="'.$bases.'" style="display:none;"><br>
<input class="btn_fam" type="submit" name="bases" value="'.$bases.'"><br>
</form>
';
?>Ahora deberian mostrarse las tablas pero todavía no las hemos creado asi que no hay contenido que mostrar, vamos a crear una base de datos con el nombre que habiamos elegido en la sentencia ‘$dbname = “prueba_ajax”;’, entonces la base de datos se llamará “prueba_ajax”, una vez creada ejecutamos la siguiente consulta SQL:
CREATE TABLE IF NOT EXISTS `primeratabla` (
`articulo` int(26) NOT NULL,
`nombre` tinytext CHARACTER SET utf8 NOT NULL,
`descripcion` tinytext CHARACTER SET utf8 NOT NULL,
`precio` int(11) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;
INSERT INTO `primeratabla` (`articulo`, `nombre`, `descripcion`, `precio`) VALUES
(0, 'primerarticulo', 'Descripcion 1', 23);
CREATE TABLE IF NOT EXISTS `segundatabla` (
`articulo` int(26) NOT NULL,
`nombre` tinytext CHARACTER SET utf8 NOT NULL,
`descripcion` tinytext CHARACTER SET utf8 NOT NULL,
`precio` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `segundatabla` (`articulo`, `nombre`, `descripcion`, `precio`) VALUES
(0, 'primerarticulo', 'Descripcion 2', 18),
(1, 'segundoarticulo', 'Descripcion 3', 45);Con la consulta anterior hemos generado dos tablas (“primeratabla” y “segundatabla”), cada una de las 4 columnas de la tabla contiene los campos “articulo”, “nombre”, “descripcion” y “precio”.
Ya se muestran las tablas en el contenedor, ahora debemos crear un mecanismo para obtener el resultado al pulsar un botón en la lista de las tablas, para empezar volvemos al archivo “index.php” e incluiremos un “script”, su función será obtener el valor de un archivo cuando el usuario pulse en un botón.
<script>
$(document).ready(function(){
$(".enlaceajax").on("click", function(e){
e.preventDefault();
$("#contenido").load("traertablas.php");
});
});
$(".f1").on("submit", function(e){
e.preventDefault();
$.post("traertablas.php", $(this).serialize(), function(respuesta){
$("#contenido").html(respuesta);
});
});
</script>traertablas.php
Por último nos queda crear el archivo “traertablas.php”, lo primero que hacemos es crear 3 variables para identificar host, usuario y nombre de la base de datos.
A continuación creamos una variable “$bases” que recogerá el valor del campo del formulario con name=”bases” que como vimos anteriormente, obtenia el valor de la tabla y mostraba su nombre.
Seguidamente establecemos la conexión con la base de datos y la seleccionamos, creamos un listado de las tablas de la base de datos, seguidamente creamos un encabezado que mostrará el nombre de la tabla obteniendo su valor al igual que la variable “$bases”, seleccionamos todos los registros de todas las tablas y creamos el bucle “while”.
Por último cerramos el bucle “while” , liberamos los registros de la tabla y cerramos la conexion con la base de datos.
<?php
$dbhost = "localhost";
$dbuser = "root";
$dbname = "prueba_ajax";
$bases = $_POST["bases"];
$conexion = mysql_connect($dbhost,$dbuser);
mysql_select_db($dbname, $conexion);
$tablas = mysql_list_tables($dbname);
echo "<h2>"."<br>".$_POST["bases"]."<br></h2>";
$tabla = mysql_query("SELECT * FROM $bases");
while ($registro = mysql_fetch_array($tabla)) {
...
}
mysql_free_result($tablas);
mysql_close($conexion);
?>El bucle while
Lo último que nos queda para terminar es crear el contenido del bucle “while”, por cada registro a listar, crearemos un contenedor con varios elementos en los que se mostrarán los valores de los campos.
<?php
echo '<div>';
echo '<span>Numero de articulo: ' . $registro['articulo'] . '<br></span>';
echo '<h3>Nombre: ' . $registro['nombre'] . '<br></h3>';
echo '<p>Descripcion: ' . $registro['descripcion'] . '<br></p>';
echo '<p>Precio: ' . $registro['precio'] . '€'.'<br></p>';
echo '</div>';
?>El código completo con todos los archivos y la consulta SQL para crear las tablas en la base de datos está disponible en mi cuenta de Github para su descarga desde el siguiente enlace:
Enrique Davis 30 agosto, 2023
Gracias por tu aporte.
Pedro A. 22 julio, 2018
Excelente tutorial, me ha sido de gran ayuda