Cargando



Generar listados dinámicos con Jquery, pHp Y MySQL

Tutorial explicando cómo generar listas dinámicas a través de JQuery, pHp y MySQL.



nov 25 2014 13:44
Profesional
dic 01 2014 17:48
Muchas veces al programar páginas con pHp y realizar consultas a una base de datos debemos refrescar la página web para que se procese php en el servidor, consulte la base de datos y luego nos devuelva el resultado.

Este redireccionamiento de la web, suele tardar algunos segundos en algunos casos mostrando al usuario una página en blanco mientras se procesan y muestran los datos. Para conseguir una interfaz más transparente al usuario al momento de realizar peticiones al servidor, podemos utilizar AJAX que es la tecnología que nos permitirá realizar consultas en una página web que necesiten respuesta del servidor sin recargarla. Comenzaremos un ejemplo con un listado web para gestionar una Agencia de Vehiculos.

Primero crearemos la base de datos en Mysql para ello utilizarnos Phpmyadmin. A continuación el código SQL.

1) Creamos la base de datos
CREATE DATABASE agencia_autos;

2) Luego crearemos las tablas
  • a ) Estructura de tabla para la tabla vehiculos
CREATE TABLE IF NOT EXISTS `vehiculos` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`tipo_vehiculo` int(255) DEFAULT NULL,
`caracteristicas` text,
`marca` varchar(255) DEFAULT NULL,
`modelo` varchar(255) DEFAULT NULL,
`precio_normal` decimal(10,2) DEFAULT NULL,
`descripcion` varchar(255) DEFAULT NULL,
`foto1` varchar(255) DEFAULT NULL,
`foto2` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
  • b ) Estructura de tabla para la tabla marcas
CREATE TABLE IF NOT EXISTS `marcas` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`tipo_vehiculo` int(10) DEFAULT NULL,
`marca` varchar(200) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
  • c ) Insertamos las Marcas
INSERT INTO `marcas` (`id`, `tipo_vehiculo`, `marca`) VALUES
(1, 1, 'HONDA'),
(3, 1, 'AUDI'),
(4, 1, 'BMW'),
  • d ) Estructura de tabla para la tabla modelos
CREATE TABLE IF NOT EXISTS `modelos` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`tipo_vehiculo` int(200) DEFAULT NULL,
`idmarca` int(200) DEFAULT NULL,
`modelo` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
  • e ) Insertamos algunos datos en la tabla modelos
INSERT INTO `modelos` (`id`, `tipo_vehiculo`, `idmarca`, `modelo`) VALUES
(1, 1, 1, 'ACCORD'),
(2, 1, 1, 'JAZZ'),
(3, 1, 1, 'CIVIC');
  • f ) Estructura de tabla para la tabla tipo_vehiculo
CREATE TABLE IF NOT EXISTS `tipo_vehiculo` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`tipo_vehiculo` varchar(200) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
  • g ) Insertamos algunos datos en la tabla tipo_vehiculo
INSERT INTO `tipo_vehiculo` (`id`, `tipo_vehiculo`) VALUES
(1, 'Autos'), (2, 'Motos')

Hasta aquí creamos toda la base de datos.

listados-dinamicos-jquery.jpg


Estructura de la Página Web


Comenzamos la estructura de la pagina web con php, el ejemplo se desarrollara en php plano pero puede adaptarse a cualquier framework.

1) Conectar a la base de datos Mysql creando el archivo config.php
<?
// Conectar a la base de datos
$link = mysql_connect('localhost', 'usuario', 'clave');
if (!$link) {
die('Error de conexion: ' . mysql_error());
}
//Seleccionar la tabla a utilizar
if (! mysql_select_db('agencia_autos') ) {
die ('No se puede conectar: ' . mysql_error());
}
?>

Crearemos una página web que se denominará index.php donde tendremos el código para mostrar listado de vehiculos y luego filtrar con jquery el listado. El diseño que usamos para el tutorial es bastante sencillo.

listados-dinamicos-jquery2.jpg


El código dentro de index.php para mostrar el diseño es el siguiente:
<? //incluimos la conexión a la base de datos
include('config.php'); ?>


Luego creamos el panel superior:
<!-- Panel para filtro Jquery -->
<table width="615" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="137"><strong>Vehiculos</strong></td>
<td width="147"><strong>Marcas</strong></td>
<td width="331"><strong>Modelos</strong></td>
</tr>
<tr>
<td>
	 <select name="vehiculo">
	 <option>Seleccionar</option>
	 </select>
</td>
<td>
	 <select name="marca">
	 <option>Seleccionar</option>
	 </select>
</td>
<td>
	 <select name="modelo">
	 <option>Seleccionar</option>
	 </select>
</td>
</tr>
</table>

Luego vendra el codigo del listado con las consultas sql, el div servira luego para mostrar el listado filtrado:
<div id=”listado”>
<table width="615" border=1 cellpadding="3" cellspacing="0" >
<tr><td width="90"><b>Vehiculo</b></td>
<td width="71"><b>Marca</b></td>
<td width="159"><b>Modelo</b></td>
<td width="150"><b>Foto</b></td>
<td colspan="2">
<div align="center">
<b>Acciones</b>
</div></td>
</tr>

<? $sql="SELECT *
FROM vehiculos, tipo_vehiculo, marcas, modelos
WHERE vehiculos.idtipo_vehiculo = tipo_vehiculo.id
AND vehiculos.idmarca = marcas.id
AND vehiculos.idmodelo = modelos.id";
$consulta = mysql_query($sql); ?>

<? while($fila = mysql_fetch_array($consulta)){
foreach($fila AS $key => $value) { $fila[$key] = stripslashes($value); } ?>

<tr>
<td><? echo $fila['tipo'] ?></td>
<td><? echo $fila['marca'] ?></td>
<td><? echo $fila['modelo'] ?></td>
<td><img src="imagenes/<? echo $fila['foto1'] ?>" width="150" height="75" /></td>
<td width="103"><div align="center"><a href=edit.php?id=<? echo $fila['id'] ?>>Modificar</a></div></td>
</tr>
<? } ?>
</table>
</div>
<br />
<label>
<input type="submit" name="nuevo" id=”nuevo” value="Nuevo Vehiculo" />
</label>


Ahora que tenemos el listado funcionando deberemos crear el filtro con Jquery y programar la funcionalidad relacionando los select. El primer select de Vehiculo añadimos una consulta y modificamos el select de la siguiente manera:

<? $sqltipo="SELECT * FROM tipo_vehiculo";
$consultatipo = mysql_query($sqltipo); ?>

<select name="vehiculo">
	 <option>Seleccionar</option>
<? while($filatipo = mysql_fetch_array($consultatipo)){ ?>
					 	 <option value="<? echo $filatipo['id'] ?>"><? echo $filatipo['tipo'] ?></option>
	 <? } ?>
</select>

Al ejecutar quedará el select cargado con los vehÍculos:

listados-dinamicos-jquery3.jpg


Ahora viene Jquery para ello añadiremos a index.php en la línea superior antes del include, la librería Jquery descargada desde http://jquery.com/download/ o enlazar el siguiente script y utilizarlo desde una ruta externa.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Crearemos un archivo llamado funciones.js para almacenar el codigo Jquery y lo añadimos a la pagina debajo del script anterior de la siguiente manera:
<script src="funciones.js"></script>

El primer script sera el que al seleccionar un tipo de vehiculo me active el select con las marcas
<!-- select relacionado Vehiculo y Marcas //-->
$(function(){
$("#vehiculo").change(function(){ // se activa el script cuando selecciono el select vehiculo
	 vehiculo=$(this).val() // Tomo el valor seleccionado

	 //envio a una pagina que hara la consulta sql y me devolvera los datos para poner en el select

	 $.get("http://localhost/proyectos/agenciaautos/marcas.php?idvehiculo="+vehiculo,
		 function(data){
			 $("#marca").html(data); // Tomo el resultado e inserto los datos en el select marca								
		 });															
});
});		


Creamos el archivo marcas.php que sera quien realizara la consulta que luego sera cargada en el select de Marcas:
<? include('config.php');
//Recibo id de vehiculo
$id = $_GET['idvehiculo'];
//Consulto la tabla marcas por id de vehiculo
$sqltipo="SELECT * FROM marcas where tipo_vehiculo=".$id;
$consultatipo = mysql_query($sqltipo);
//devuelvo el resultado
while($filatipo = mysql_fetch_array($consultatipo)){ ?>
			 <option value="<? echo $filatipo['id'] ?>"><? echo $filatipo['marca'] ?></option>
<? } ?>


Asi al selecionar un tipo de vehiculo se activa el select marcas correspondiente al tipo de vehiculo.

listados-dinamicos-jquery4.jpg


Ahora activaremos desde Marcas el select modelos para ello anadiremos a funciones.jps el siguiente código:
<!-- select relacionado Marcas y Modelos //-->
$(function(){
$("#marca").change(function(){
	 marca=$(this).val() // Valor seleccionado
	 $.get("http://localhost/proyectos/agenciaautos/modelo.php?idmarca="+marca,
		 function(data){
			 $("#modelo").html(data); //Tomo el resultado de pagina e inserto los datos en el select
		 });															
});
});		


Creamos el archivo modelos.php para realizar la consulta:

<? include('config.php');
//Recibo id de marca
$id = $_GET['idmarca'];
//Consulto la tabla modelos por id de marca
$sqlmodelo="SELECT * FROM modelos where idmarca=".$id;
$consultamodelo = mysql_query($sqlmodelo);
//devuelvo el resultado
while($filamodelo = mysql_fetch_array($consultamodelo)){ ?>
			 <option value="<? echo $filamodelo['id'] ?>"><? echo $filamodelo['modelo'] ?></option>
<? } ?>



Finalmente al seleccionar el modelo añadiremos en el mismo script que nos muestre el listado pero filtrado según las opciones seleccionadas y el resultado lo asignaremos al div id=”listado”
El script juqery que activa el listaod desde el select modelo será
<!-- select Modelos muestro listado//-->
$(function(){
$("#modelo").change(function(){
	 modelo=$(this).val() // Valor seleccionado
	 $.get("http://localhost/proyectos/agenciaautos/listado.php?idmodelo="+modelo,
		 function(data){
			 $("#listado").html(data); //Tomo el resultado de pagina e inserto los datos en el div listado
		 });			
			 });
});		


El archivo listado.php que realizará la consulta de filtro:
<? include('config.php');

//Recibo id de marca

$id = $_GET['idmodelo'];

$sql="SELECT *

FROM vehiculos, tipo_vehiculo, marcas, modelos

WHERE vehiculos.idtipo_vehiculo = tipo_vehiculo.id

AND vehiculos.idmarca = marcas.id

AND vehiculos.idmodelo = modelos.id

AND vehiculos.idmodelo = ".$id;

$consulta = mysql_query($sql); ?>


<table width="615" border=1 cellpadding="3" cellspacing="0" >
<tr><td width="90"><b>Vehiculo</b></td>
<td width="71"><b>Marca</b></td>
<td width="159"><b>Modelo</b></td>
<td width="150"><b>Foto</b></td>
<td colspan="2">
<div align="center">
<b>Acciones</b>
</div></td>
</tr>


<? while($fila = mysql_fetch_array($consulta)){
foreach($fila AS $key => $value) { $fila[$key] = stripslashes($value); } ?>

<tr>
<td><? echo $fila['tipo'] ?></td>
<td><? echo $fila['marca'] ?></td>
<td><? echo $fila['modelo'] ?></td>
<td><img src="imagenes/<? echo $fila['foto1'] ?>" width="150" height="75" /></td>
<td width="103"><div align="center"><a href=edit.php?id=<? echo $fila['id'] ?>>Modificar</a></div></td>
</tr>
<? } ?>
</table>


Finalmente como queda el ejemplo con los filtros funcionando, faltaría uno para restaurar el listado al original y dar de alta vehículo que lo veremos en otro tutorial.

listados-dinamicos-jquery5.jpg



Atención
Continuación y más información sobre este tutorial entra aquí

¿Te ayudó este Tutorial?


6 Comentarios


Miguel Guerrero
nov 26 2014 15:20
Me ha encantado la forma de detallarlo Sergio, ha sido muy útil para los programadores de pHp JQuery que quieran generar listados de forma muy práctica.
Muy interesante, espero que lo sigas aumentando en otros a futuro, lo veo util. Te puse 5* saludos

Hola!

Muy interesante pero la verdad perdido no funciona, debo estar colocando algo mal ....nunca hubo respuesta a la consulta y no entiendo como te funciona hice lo mismo y nada como puedo conseguir el codigo para verificar donde esta el error .... gracias

Hola! esta muy bueno ese proyecto pero tendrás algún link donde se pueda descargar el proyecto completo?.. gracias de antemano..


Charly Hernandez
may 15 2017 21:44

Hola! esta muy bueno ese proyecto pero tendrás algún link donde se pueda descargar el proyecto completo?.. gracias de antemano..

Hola!! , me preguntaba como podria hacerlo con mysqli ya que las funciones que usas para los query y la conexion a la bd son de una version de php algo atrasada jeje, se agradeceria la ayuda...

 

saludos.. 

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X