Publicidad
Listas dinamicas enlazadas
JavaScript, PHP, MySQL, HTML
Tutorial por Jorge Oyhenard (elQuique)
En este tutorial veremos como lograr una lista enlazada dinámica, utilizando HTML, JavaScript, PHP y base de datos MySQL.
Pues, con HTML unicamente no se puede ya que HTML es un lenguaje estatico.
Podrias usar PHP que es dinamic, pero bueno tampoco podras hacerlo con PHP ya que se ejecuta en el servidor y tu requieres de una accion en el navegador para cargar la segunda lista.
Y bien, si hablamos de lenguajes para interactuar con el usuario eso es JavaScript, pero claro bueno no funciona tampoco ya que JavaScript no puede ir a tu base de datos.
Entonces ??
En ese caso lo mejor es usar la licuadora :P y mezclar estos lenguajes, y asi logras algo como esto:
http://www.tallerwebmaster.com/CursoWebBienesRaices/listas.php
Otra forma es usar AJAX o acrónimo de Asynchronous JavaScript And XML (JavaScript y XML asíncronos, donde XML es un acrónimo de eXtensible Markup Language)
http://es.wikipedia.org/wiki/AJAX
que no es un lenguaje es mas bien la nueva forma de llamarle a la mexcla de esos lenguajes como XML, JavaScript, HTML, etc pero lo haremos sin el nombrete raro.
La base de datos que use esta explicada en mi curso de web de bienes raíces:
http://www.tallerwebmaster.com/Tutorial-Web-de-Bienes-Raices-o-Inmobiliarias-Base-de-Datos-c-68.html
Y ahora paso a explicar la solución a lo que preguntas :)
Como elementos HTML importantes vamos a tener 3 elementos importantes, estos son:
frmDatos que es el formulario que contiene las listas
selCiudades que es la lista donde seleccionas las ciudades
selPropiedades que es la lista donde seleccionas las propiedades
El formulario, es bien simple y se ve como el link que puse arriba. El codigo HTML del mismo seria asi:
<label>Ciudades:
<select name="selCiudades" size="6" id="selCiudades">
</select>
</label>
<label>Propiedades:
<select name="selPropiedades" size="6" id="selPropiedades">
</select>
</label>
</form>
Tu lo puedes escribir o generar con DreamWeaver, lo importante es el nombre de las 2 listas y el formulario (selCiudades, selPropiedades, frmDatos).
Simple no ?? :P
Bien, el siguiente tema es que según dices debes cargar la información desde una base de datos, yo en mi ejemplo cargare las ciudades desde la base de datos y la tabla ciudades (explicada en el tutorial de bienes raíces).
La lista de Propiedades no se carga en este momento ya que es producto del resultado de seleccionar una Ciudad, por tanto lo primero y unico que cargaremos ahora son las ciudades.
Para cargar las ciudades debemos agregar codigo PHP que permita leer esas ciudades desde la tabla ciudades de la base de datos :), o sea que al HTML lo modificamos para que quede asi:
<select name="selCiudades" size="6" id="selCiudades">
<?php
$tablaCiudades = mysql_query('SELECT * FROM ciudades ORDER BY nombre ASC');
while ($registroCiudad = mysql_fetch_array($tablaCiudades)) {
?>
<option value="<?php echo $registroCiudad['id']; ?>"><?php echo $registroCiudad['nombre']; ?></option>
<?php
}
mysql_free_result($tablaCiudades);
?>
</select>
</label>
Explico ....
en esa línea, se seleccionan todos los registros de la tabla ciudades ordenados por nombre, que usaremos para cargar la lista.
en esta linea indicamos que se repetira el fragmento de codigo que este entre { } (llaves) tantas veces como registros (o ciudades) existan.
y esa es la linea que se repite, o sea una option (opción) de la lista por cada ciudad, donde se guardara en la lista el id (numero de ciudad) y el nombre de la ciudad :)
finaliza y cierra la tabla para liberar la memoria.
Con este código logramos gran parte del trabajo, que es presentar el formulario, con todas las ciudades en la lista de ciudades, tal como se ve acá:
http://www.tallerwebmaster.com/CursoWebBienesRaices/listas.php
Luego de cargada las ciudades, debemos continuar con esto, y el siguiente paso es que cuando un usuario ve una lista de ciudades, va a elegir una de ellas y se deberían mostrar las propiedades de esa ciudad :), bueno acá para interactuar con el usuario, necesitamos JavaScript, y lo vamos a usar para generar un Evento OnChange, este evento se ejecuta cada vez que alguien cambia la selección de la lista en este caso, cuando alguien selecciona por primera vez una ciudad o selecciona otra.
Esta linea es sencilla, ya que donde hoy tenemos así:
le agregamos el evento onchange correspondiente para llamar a la función javascript de carga de propiedades, esta linea queda así:
Esa linea llama a la función ComponerLista y le envía como parámetro el número de ciudad seleccionada (selectedIndex) en la lista ciudades (selCiudades) que esta en el formulario de datos (frmDatos) en la pagina actual (document).
Fácil no ?
Lista esta parte, ahora debemos escribir el código JavaScript de la función ComponerLista :)
Esta funcion es bastante simple, y su codigo es asi:
document.forms.frmDatos.selCiudades.disabled = true;
document.forms.frmDatos.selPropiedades.length = 0;
CargarPropiedades(xPro);
document.forms.frmDatos.selCiudades.disabled = false;
}
Primero desactiva la lista de ciudades,
de forma que nadie pueda dar click mientras se carga, luego deja vacía la lista de propiedades (por si había algo seleccionado),
luego Carga las Propiedades que están en esa ciudad, por medio de otra función que veremos mas adelante,
a la cual le envía como parámetro el id de la ciudad.
Luego de cargadas las propiedades vuelve a permitir que demos click en a lista de ciudades (por si queremos cambiar) activándola de nuevo,
Bien, así es de simple esta función :)
La función de CargarPropiedades también usara JavaScript, para generar el HTML de la lista de Propiedades según esa ciudad, pero también usara PHP para leer de la base de datos la información :), el código resultante es el siguiente:
var o
document.forms.frmDatos.selPropiedades.disabled=true;
<?php
$tablaPropiedades = mysql_query('SELECT * FROM propiedades ORDER BY idciudad ASC');
while ($registroPropiedad = mysql_fetch_array($tablaPropiedades)) {
?>
if (xCiu == <?php echo $registroPropiedad["idciudad"]; ?>) {
o = document.createElement("OPTION");
o.text = '<?php echo $registroPropiedad["titulo"]; ?>';
o.value = <?php echo $registroPropiedad["id"]; ?>;
document.forms.frmDatos.selPropiedades.options.add (o);
}
<?php
}
mysql_free_result($tablaPropiedades);
?>
document.forms.frmDatos.selPropiedades.disabled=false;
}
Primero creamos una variable para guardar el objeto OPTION que contenga cada Propiedad que se genera dinámicamente y se agregara a la lista Propiedades,
luego desactivamos la lista de propiedades para que nadie pueda dar click hasta que no termine la carga automatica,
el siguiente codigo es PHP (se indica con <?php ?>) y es igual al que usamos hace un rato para cargar las ciudades, solo que este selecciona las propiedades y repite tantas veces como propiedades existan,
lo que va a repetir, es un código JavaScript que comienza con un IF que controlara si esa propiedad es de una ciudad igual a la elegida (xCiu) en la lista de ciudades,
si es una propiedad de la ciudad elegida, genera un objeto tipo OPTION (que son los que forman la lista), en la variable "o" que habíamos creado
luego a ese elemento de la lista le asigna en la propiedad TEXT el titulo (o nombre) de esa propiedad,
la propiedad TEXT es el texto que vemos en cada elemento de la lista, luego le asigna a la propiedad VALUE (Valor) el id de esa propiedad o sea su numero de identificación,
luego de que el elemento OPTION de esa propiedad esta listo, lo agrega en la lista de propiedades HTML mediante la siguiente linea de codigo JavaScript,
por ultimo se cierran la llaves del while } y la del if }, y liberamos de la memoria la tabla Propiedades,
y volvemos a activar la lista para que puedan elegir elementos de ella :)
y listo, esto es todo :) asi de sencillo se logran dos listas enlazadas usando HTML, JavaScript, PHP y MySQL.
Les dejo el código completo con la conexión a la base de datos y el HTML completo.
$conexion = mysql_connect('localhost', 'taller', 'secreto');
mysql_select_db('inmobiliaria');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Listas Dinamicas</title>
<script language="javascript">
function ComponerLista(xPro) {
document.forms.frmDatos.selCiudades.disabled = true;
document.forms.frmDatos.selPropiedades.length = 0;
CargarPropiedades(xPro);
document.forms.frmDatos.selCiudades.disabled = false;
}
function CargarPropiedades(xCiu) {
var o
document.forms.frmDatos.selPropiedades.disabled=true;
<?php
$tablaPropiedades = mysql_query('SELECT * FROM propiedades ORDER BY idciudad ASC');
while ($registroPropiedad = mysql_fetch_array($tablaPropiedades)) {
?>
if (xCiu == <?php echo $registroPropiedad["idciudad"]; ?>) {
o = document.createElement("OPTION");
o.text = '<?php echo $registroPropiedad["titulo"]; ?>';
o.value = <?php echo $registroPropiedad["id"]; ?>;
document.forms.frmDatos.selPropiedades.options.add (o);
}
<?php
}
mysql_free_result($tablaPropiedades);
?>
document.forms.frmDatos.selPropiedades.disabled=false;
}
</script>
</head>
<body>
<form id="frmDatos" name="frmDatos" method="post" action="">
<label>Ciudades:
<select name="selCiudades" size="6" id="selCiudades" onchange="ComponerLista(document.forms.frmDatos.selCiudades[selectedIndex].value);">
<?php
$tablaCiudades = mysql_query('SELECT * FROM ciudades ORDER BY nombre ASC');
while ($registroCiudad = mysql_fetch_array($tablaCiudades)) {
?>
<option value="<?php echo $registroCiudad['id']; ?>"><?php echo $registroCiudad['nombre']; ?></option>
<?php
}
mysql_free_result($tablaCiudades);
?>
</select>
</label>
<label>Propiedades:
<select name="selPropiedades" size="6" id="selPropiedades">
</select>
</label>
</form>
</body>
</html>
<?php
mysql_close($conexion);
?>
Tambien lo pueden descargar para coleccionar :P
Les recuerdo el link para verlo funcionando on line ;)
http://www.tallerwebmaster.com/CursoWebBienesRaices/listas.php
Comentarios de Listas dinamicas enlazadas
↑ Tutorial