PHP Menu Dinámico Multinivel

Necesitas en tu aplicación PHP un menu dinamico multinivel, de fácil configuración, con pocas líneas de código y todo a partir de una string JSON o desde una tabla de base de datos? Si desarrollas sistemas PHP, seguramente que sí, entonces continúa leyendo.

Por qué menús dinámicos?

El problema de tener menús estáticos es principalmente la manutención del sistema. Más aún si el sistema es multi-usuario con diferentes niveles de acceso. Eventualmente los niveles de acceso cambian, se añaden roles al sistema, y modificar cada archivo Html/PHP que contenga alguna estructura de menú, no puede ser la solución frente a la dinámica propia de los sistemas.

Cuáles serían las soluciones?

Existe la solución de crear un esquema en la base de datos, donde se almacene en una tabla los ítems de cada menú (cada ítem en un registro). Esta forma es una de las más populares porque atiende perfectamente al requisito de fácil manutención. Sin embargo, aún se puede optimizar más.

Una estructura de menú es un conjunto de ítems que pueden estar anidados creando submenús. Esta estructura puede estar representada en un esquema JSON. Al estar toda la estructura en una string JSON, ahorramos espacio de almacenamiento, pues no será necesario que cada ítem sea almacenado en registros separados (como fue mencionado en el párrafo anterior).

De esta forma, la solución para crear un menu dinamico multinivel presentada en este artículo, consiste en ambos métodos: crear el menú a partir de una string JSON, como también a partir de una tabla que contenga los ítems del menú (cada ítem en un registro).

Quick Menu Class (Libreria PHP para generar un menu dinamico multinivel)

QuickMenu es una librería PHP de código abierto bajo licencia GPL 3.0, creada con estos 3 propósitos:

  1. Que genere un menu Html (Unordered list).
  2. De fácil configuración (para estilizar en Front-end)
  3. De rápida renderización.

Código disponible en Github en este repositorio: https://github.com/davicotico/PHP-Quick-Menu

Veamos cómo funciona

Para este ejemplo nuestro objetivo será el siguiente:

Crear desde PHP un menu Html al estilo del framework Bootstrap 3.x, a partir de una string JSON e insertar 2 items al menu a partir de arrays asociativos. Conforme la imagen a continuación:

menu dinamico multinivel php

Siendo que el front-end está basado en Bootstrap, tenemos que tomar en cuenta que los menus Bootstrap no permiten más de 2 niveles de submenus. Si quisieramos un menu con mas subniveles, tendriamos que usar otro front-end. La clase QuickMenu, permite generar un menu dinamico multinivel utilizando listas y sublistas Html de forma correcta sin restricción de niveles, sin embargo también se debe de tomar en cuenta las características del framework CSS/Javascript que se utilizará.

1. Instalar

Bajamos la librería desde el repositorio. Click Aquí

Para este primer ejemplo básico, vamos a crear un directorio que contenga la librería, y un archivo llamado ejemplo1.php

2. Instanciar la clase con parámetros

Nuestro ejemplo estará en ejemplo1.php. Abrimos el archivo y comenzamos:

Lo primero que hacemos es incluir la librería e instanciar la clase. En este caso utilizaremos el parámetro del constructor, y como parámetro colocamos una string que contenga la estructura JSON.

3. Personalizar el menú (Para este ejemplo será con Bootstrap)

Al ser un menú multinivel, vamos a colocar el ícono que corresponde cuando un ítem es submenú. En el framework Bootstrap, un submenú necesita tener definido algunos atributos en cada Tag.

En este fragmento de código utilizamos el método set() para definir algunas variables de configuración. Esas variables son:

dropdownIcon: (String) Una string con las tags html para el icono de los items que tengan submenu. Al tratarse de un menu dinamico multinivel, “dropdownIcon” estará presente Item, que tenga un submenu.

ul-root: (Array) Array asociativo con todos los atributos html para la tag <ul> raíz. Siendo que se trata de la <ul> inicial, es recomendable usar el atributo id.

ul: (Array) Array asociativo con todos los atributos para las tags <ul> que no sean raiz (osea, los submenus).

li-parent: (Array) Array asociativo con todos los atributos para las tags <li> que tengan un submenu.

a-parent: (Array) Array asociativo con todos los atributos para las tags <a> que tengan un submenu.

4. Podemos insertar más ítems al menú

Aunque el menú será generado a partir de la string JSON, podemos insertar más ítems sobre la misma estructura:

El método insert($item, $before_at = ”, $parent = ”), permite insertar un item al menu, a partir de un array asociativo que contenga los atributos de un item. El parámetro $before_at, será para indicar la posición a ser insertada y deberá escribirse el texto de un item ya existente en el menu, para que sea tomado como referencia. El parámetro $parent, es en caso que el item a ser insertado se encuentre en un submenu (indicar el texto del submenu). IMPORTANTE: Este método aun está en fase de prueba, por lo que posiblemente se haga algún cambio mas adelante.

5. La función html()

Finalmente el resultado lo asignamos a una variable, y es esta variable la que contiene el menú en formato HTML.

4. Colocar el menú en la página HTML

Al ser este un ejemplo básico, directamente y sobre el mismo archivo colocamos el código HTML de la página, y en el área del menú (navbar), hacemos un echo de la variable $menu.

El código completo lo pueden ver Aqui.

Resultado Final

Tenemos como resultado un navbar de Bootstrap 3.x:

php menu dinamico multinivel

Y el código Html generado es:

menu dinamico multinivel codigo html

Como podemos ver, el código fue generado conforme al objetivo. Tenemos la estructura del menú Html, con todas las reglas CSS y atributos de un menú para Bootstrap.

Conclusión

Este artículo es la introducción a una serie de artículos en formato tutorial, de la librería QuickMenu, donde se irán presentando cada una de sus características. Como vimos en el ejemplo, crear un menu dinamico multinivel a partir de una string JSON, resultó de lo más fácil, fue simplemente pasar un parámetro. La personalización de los atributos HTML (para adecuarse al framework Bootstrap  en nuestro ejemplo), llega a ser bastante flexible, permitiendo de forma fácil, adaptarse a otros estilos.

Esta es la versión “0.5”, a medida que vaya realizando mas tutoriales con las funcionalidades que actualmente tiene, se harán las respectivas mejoras para lanzar la primera versión. Te invito a visitar y calificar el repositorio en Github, eso me ayuda mucho a continuar mejorando el proyecto. Si tienes alguna duda, sugerencia o quisieras comentar algo sobre este tutorial, escribeme en los comentarios, voy a estar atento a todos los mensajes.

5 Comentarios

Escribir un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *