Traducido de phpkitchen.com
Crear sistemas de navegación, lo que todos conocemos como menús, es una de las partes más importantes de todo proyecto web. Utilizar un menú que está almacenado en base de datos siempre es una buena idea, y con la versión definitiva de las clases de PHPguru’s HTML_TreeMenu, incluído en la librería PEAR, las persperctivas son más accesibles.
Los tres pasos principales que hay que seguir en el desarrollo de un menú basado en base de datos son:
- construir la base de datos
- elegir la librería de clases adecuada
- integrar el códido front-end requerido
Este artículo recoge cada uno de estos tres pasos en mayor detalle.
Construir la base de datos
Hay varias formas para construir la estructura del árbol de navegación, en este artículo se utiliza el más sencillo, el denominado estructura de IDpadre, reciente doblado por el método ‘brain-dead’ de Wolfram Kriesing por su asombrosa simplicidad
Disculpas a los que no son usuarios de MSIE, el código no se muestra adecuadamente en Nescape o superiores. Puedes ver también el archivo .phps asociado
+—-+————+——–+
| id | name | parent |
+—-+————+——–+
| 1 | Europe | 0 |
| 2 | N. America | 0 |
| 3 | Asia | 0 |
| 4 | Spain | 1 |
| 5 | Madrid | 4 |
| 6 | Germany | 1 |
| 7 | Berlin | 6 |
+—-+————+——–+
Todos los elementos con ID padre ó 0 son elementos raíz, así el elemento “Spain” con el ID padre 1 es el hijo del elemento “Europe”, que tiene el ID 1, y así con los demás. Utilizando este formato puedes construir árboles de profundidad ilimitada que pueden se manejados simplemente – parece que algunos clientes quieren un número descabellado de subniveles. También existen herramientas GUI para web que hacen este trabajo por tí, un poco más agradables para el usuario porque introducen directamente en las opciones en la base de datos. PHPkitchen sacará a la luz a finales de este mes un proyecto que tiene esta herramienta.
Elige la librería de clases apropiada
Aquí es donde debes tener cuidado con la elección. Actualmente PEAR tiene al menos tres implementaciones de estruturas de árbol que yo sepa, notablemente Tree, XML_Tree, y HTML_TreeMenu; este artículo se centrará en la última clase. Instalar la librería es tan sencillo como ir a http://pear.php.net/package-info.php?pacid=77 y descargar los últimos fuentes. Instalar el fichero TreeMenu.php con tu instalación actual de PEAR, que está en /HTML/
Mejor utilizar el instalador de PEAR y pulsar el botón ‘install’ 🙂
Integrar el código del front-end
Para que funcione, se requiere alguna pequeña adaptación del fichero ‘example.php’ incluído en el paquete. Una vez que has hecho esto te darás cuenta de que sólo es cuestión de unas pocas líneas de código para incluir esta potente funcionalidad en tus proyectos actuales. Hay que seguir los siguientes pasos fundamentales:
- crear la estrcutra de datos de la navegación
- inicializar las opciones de la clase
- crear el objeto HTML_TreeMenu desde la estructura
- crear un menú DHTML (o una listbox) desde el objeto HTML_TreeMenu
Puedes ver el código de este ejemplo aquí
Paso 1
Para crear una estructura de datos a partir de mi IDpadre, he utilizado la clase PHPguru’s Tree que está disponible aquí. Esta clase no está actualmente en la librería de PEAR, pero comparte similitudes con la clase de Wolfram. Debería mencionarse que Richard Heyes y Harald Radi, los autores de las clase, han hecho HTML_TreeMenu compatible con la Tree class de Wolfram asi como la yo utilizo aquí.
Para crear la estructura del árbol ejecuta una instancia estática de la clase como sigue:
<?php
include ‘./Tree.php’;
$tree = &Tree::createFromMySQL(array(‘host’ => ‘localhost’,
‘user’ => ‘root’,
‘pass’ => ”,
‘database’ => ‘testdata’,
‘query’ => ‘SELECT id, parent AS parent_id, name AS text
FROM cattest
ORDER BY parent_id, id’));
?>
sustityendo los detalles de tu base de datos de forma adecuada. Notar la columna con alias en la sentencia SELECT: con independencia de como denomines a tus columna deben ajustarse a id, parent_id y texto para que la clase funcione correctamente.
Paso 2
Para inicializar las opciones de la clase de forma correcta mira el siguiente ejemplo:
<?php
include ‘./TreeMenu.php’;
$nodeOptions = array(
‘text’ => ”,
‘link’ => ”,
‘icon’ => ‘folder.gif’,
‘expandedIcon’ => ‘openfoldericon.png’,
‘class’ => ”,
‘expanded’ => false,
‘linkTarget’ => ‘_self’,
‘isDynamic’ => ‘true’,
‘ensureVisible’ => ‘false’,
);
$options = array( ‘structure’ => $tree,
‘type’ => ‘heyes’,
‘nodeOptions’ => $nodeOptions);
?>
Las $nodeOptions son un tanto básicas, notar como la estructura $tree del paso 1 se pasa como el primer elemento de la matriz $options.
Paso 3
El objeto HTML_TreeMenu se crea llamando al método createFromStructure()
<?php
$menu = &HTML_TreeMenu::createFromStructure($options);
?>
Step 4
Finally the object can be rendered as a dHTML collapsible menu (a la Windows Explorer) or as a standard combo box, just by switching the method name – isn’t that nice?
<?php
$treeMenu = &new HTML_TreeMenu_DHTML($menu, array( ‘images’ => ‘imagesAlt2’,
‘defaultClass’ => ‘treeMenuDefault’));
?>
Paso 4
Finalmente, el objeto puede ser representado como un DHTML extendible (a la Windows Explorer) o como un como box estándar, simplemente cambiando el nombre del método – ¿no es sencillo?
<?php
$treeMenu = &new HTML_TreeMenu_Listbox($menu, array(‘images’ => ‘imagesAlt2’,
‘defaultClass’ => ‘treeMenuDefault’));
?>
o
Conclusión
Tenéis disponible aquí un archivo zip de todos los archivos utilizados en esta demo, incluyendo un dump para MySQL. El código ha sido testado sobre Windows2k (Windows 2000), PHP 4.3.0 y MySQL 3.23.55-nt. Por favor, revisa la amplia documentación que existe sobre la clase que viene con HTML_TreeMenu, dercárgala para ver más detalles.