Script para hacer menu recursivo

No hace mucho explicaba como hacer una función recursiva, pero hoy traigo una de las funcionalidades que podemos hacer con este tipo de funciones… hacer un menú recursivo con php.

Supongamos que tenemos una tabla en una base de datos donde vamos a crear las secciones de una web (muy útil para un gestor de contenidos) y queremos hacer un menú de diferentes niveles anidados sin poner limitaciones al número de niveles.

Bien para este supuesto voy a poner un caso real de un proyecto en el que estoy trabajando de forma particular.

La BBDD

Lo primero que tenemos que hacer es considerar nuestra BBDDm para ello aunque pueda haber muchas más tablas dependiendo de nuestro proyecto, necesitaremos una similar a la de la siguiente imagen:

tabla

Esta tabla es el prototipo que estoy usando para crear el proyecto anteriormente mencionado, no obstante nos servirá.

Hay que prestar atención a los campos id, idseccion, url y nombre. El resto son para introducir otro tipo de instrucciones en la aplicación. De estos campos que nos interesan su descripción es:

  • id: es la id de la sección
  • idseccion: es la id de la sección a la que esta subyugada la seccion de la tupla actual
  • url: es la url donde debe de apuntar nuestra sección
  • nombre: el nombre de la sección

El script PHP

Una vez que ya tenemos nuestra BBDD, podemos crear el código para que generar nuestro menú recursivo.

A mi me gusta tener las funciones WEB fuera de los archivos que las necesitan, sobre todo si la función se va a utilizar en diferentes lugares, de ese modo se puede modificar toda la aplicación más facilmente, de modo que vamos a crear dos archivos:

  • salida.php donde se van a encontrar las funciones necesarias para crear el menú
  • index.php donde se encuentra la llamada a las funciones

Llegados a este punto me gustaría recordar que esto es solo la explicación para crear un menú recursivo, pero no voy a introducir ni estilos ni nada parecido, solo la lista. La forma de trabajar la presentación nos desviaría demasiado del problema en cuestión y no es lo que pretendo tocar en esta entrada (tal vez en otra).

Siguiendo con nuestro pequeño proyecto, vamos a crear el archivo index.php:

<?php 
require('salida.php'); 
conexion(); 
menu(); 
?>

Podemos observar que en la línea 2 se añade el archivo salida.php por medio de un require, lo que nos permite usar todas las funciones de dicho archivo. En nuestro caso invocamos a las funciones conexión y menu.

Ahora podemos ver el archivo salida.php donde la función menu() es la que hace la magia.

<?php
function conexion(){
    $conexion = mysql_connect("localhost","root","") or die ('No se ha podido conectar al servidor');
    mysql_select_db('jiang') or die ('No se pudo seleccionar la base de datos');  
}

function menu(){
    $url=""; //este es la url_raiz, ideal cuando tu web esta en otros niveles de carpetas
    function cargarmenu($id)
        {
        $query="select nombre,id,url from ji_secciones where idseccion='$id'";
        $result=mysql_query($query); 

        while($fila=mysql_fetch_array($result)){ 
            $nombre=$fila['nombre']; 
            $url=$fila['url'];
           
            $query2="select id from ji_secciones where idseccion='".$fila['id']."'";
            $result2=mysql_query($query2); 

            if ($fila2=mysql_fetch_array($result2)){ 
                echo "<li><a href='$url'>$nombre</a>
                        <ul>   "; 
                        cargarmenu($fila['id']);
               echo "</ul>
                     </li>";        
            }else{
                echo "<li><a href='$url"'>".$fila['nombre']."</a></li>";
                }          
          }
              
       }
    echo "
<ul> ";
    cargarmenu(0);// Donde 0 es el Idseccion principal
    echo "</ul>";
}  

Lo primero que vemos es la función conexión que nos conecta con la base de datos y que funciona como ya se explicó en el curso de php

Después vemos que aparece la función menu() que es la que nos ocupa.

Al echarle un vistazo nos damos cuenta de que dentro tiene una función llamada cargarmenu() recursiva que es la que nos crea nuestro menú.

Esta segunda función recibe como argumento la id de la sección de la que depende. Por esta razón el primer argumento que se envía es un 0, para indicar que comenzamos desde el primer nivel del menú

Al realizar la consulta se recoge el nombre y la url del elemento del menú que nos van a servir más adelante para crear el enlace y se hace otra consulta donde se se buscan los elementos que dependan (idseccion) del elemento que estamos analizando.

Estos elementos se colocan en el subnivel siguiente al que nos encontremos y llaman a la función cargarmenu, esta vez con su propia id para buscar los elementos que están bajo él y así sucesivamente con todos los elementos de forma secuencial, creando un menú recursivo.

Resultado

Esto puede resultar difícil de entender si no se ve, por lo que voy a mostrar como sería la tabla con datos y como se vería el resultado, usando enlaces a este mismo blog.

Aquí os pongo la imagen de como sería la BBDD

tabla2

Y a continuación el resultado que nos genera el script que hemos creado:

Conclusiones

Considero que esto es una herramienta muy potente para todos aquellos que esten desarrollando gestores de contenidos o aplicaciones webs que necesitan de este tipos de menús. Además no deja de ser un ejercicio de programación muy interesante que toca desde base de datos a funciones, pasando por la recursividad y si empieza a colocarsele estilo, llegamos a CSS e incluso javascript.

He utilizado la conexión básica a las BBDD por simplificar y por que no todos los servidores toleran msqli, pero es muy fácil cambiarlo.

En definitiva creo que es una buena forma de hacer un menú recursivo y espero que os haya servido y resultado interesante este articulo.