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.
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.
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:
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.
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.