Crear menú de navegación con un Helper de CodeIgniter

Ultimamente he estado trabajando mucho con CodeIgniter, un Framework PHP bastante ligero y muy completo que me ha ayudado muchisimo en la creación de aplicaciones PHP.

A diferencia de otros Framework, CodeIgniter permite mucha libertad en la forma de escribir las aplicaciones, y da muchas facilidades para extender el framework y sus componentes, como las Librerías, y los Helpers. Por otro lado la curva de aprendizaje es muy baja, puedes leer nuestra introducción a CodeIgniter.

CodeIgniter cuenta con numerosos Helpers, para diversas funciones, pero en varios proyectos necesitaba una forma fácil de agregar un menu de navegación que permitiera tener la sección actual marcada, para poder aplicar el CSS correspondiente. Es por eso que he escrito este pequeño Helper para generar los menus.

Código del Helper

Creamos un archivo PHP, colocamos el siguiente código y lo guardamos en "/system/helpers/" con el nombre "navigation_helper.php".

Código :

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');

/**
 * menu_ul()
 * Genera una lista desordenada con la clase current en el elemento seleccionado.
 */
if ( ! function_exists('menu_ul'))
{
    function menu_ul($sel = 'home')
   {
        $CI =& get_instance();
        $items = $CI->config->item('navigation');
        
        $menu = '<ul class="main_nav">'."\n";
        foreach($items as $item)
        {
            $current = (in_array($sel, $item)) ? ' class="current"' : '';
            $id = (!empty($item['id'])) ? ' id="'.$item['id'].'"' : '';
            $menu .= '<li'.$current.'><a href="'.$item['link'].'"'.$id.'>'.$item['title'].'</a></li>'."\n";
        }
        $menu .= '</ul>'."\n";
        return $menu;
    }
}

// ------------------------------------------------------------------------

/**
 * menu_p
 * Genera un parrafo con la clase current en el elemento seleccionado
 */
if ( ! function_exists('menu_p'))
{
    function menu_p($sel = 'home', $separator = '')
   {
        $CI =& get_instance();
        $items = $CI->config->item('navigation');

        $count = count($items);
        $i = 0;
        $menu = "\n".'<p class="bottom_nav">';
        foreach($items as $item)
        {
            $current = (in_array($sel, $item)) ? ' class="current"' : '';
            $id = (!empty($item['id'])) ? ' id="'.$item['id'].'"' : '';
            $menu .= '<a'.$current.' href="'.$item['link'].'"'.$id.'>'.$item['title'].'</a>';
            $i++;
            if($count != $i)
            {
                $menu .= ' '.$separator.' ';
            }
        }
        $menu .= '</p>'."\n";
        return $menu;
    }
}


/* End of file navigation_helper.php */
/* Location: ./system/helpers/navigation_helper.php */

Preparación

Para utilizar este helper, es necesario crear un archivo de configuracion que llamaremos "navigation.php" y lo debemos guardar en "application/config/". El archivo debe tener la siguiente estructura:

Código :

<?php

$config['navigation'] = array(
            'home' => array(
                'id'     => 'home',
                'title'  => 'Home',
                'link'   => ''
            ),
            'about' => array(
                'id'     => 'about',
                'title'  => 'About Us',
                'link'   => 'about'
            ),
            'services' => array(
                'id'     => 'services',
                'title'  => 'Our Services',
                'link'   => 'services'
            ),
            'contact' => array(
                'title'  => 'Contact Us',
                'link'   => 'contact'
            )
        );

/* End of file navigation.php */
/* Location: ./application/config/navigation.php */

Luego debemos cargar el archivo con el array y el helper en "application/config/autoload.php" (ya que deben estar disponibles para toda la aplicación):

Código :

$autoload['helper'] = array(navigation');

$autoload['config'] = array('navigation');

Utilización en el controlador:

Si queremos pasar el menu como una variable desde el controlador a nuestra vista, lo usamos de la siguiente manera:

Código :

$data['menu'] = menu_ul('home');
$this->load->view('mi_vista', $data);

Y en la vista debemos tener la variable:

Código :

<?php echo $menu; ?>

Utilización en la vista:

Para utilizarlo directamente en la vista solo llamamos la función que queremos:

Código :

<?php echo menu_ul('home'); ?>

Lo cual en ambos casos nos generara el siguiente HTML:

Código :

<ul class="main_nav">
<li class="current"><a href="" id="home">Home</a></li>
<li><a href="about" id="about">About Us</a></li>
<li><a href="services" id="services">Our Services</a></li>
<li><a href="contact">Contact Us</a></li>
</ul>

Referencia

menu_ul('section');

Genera una lista desordenada con la clase "main_nav" en el <ul> y la clase "current" en el <li> correspondiente. Acepta un parámetro (opcional) que debe coincidir con alguno de los elementos del array del menu. Si no se le pasa ningun parámetro, el helper buscara un elemento "home" en el array, si no lo encuentra no seleccionara ningún elemento.

menu_p('section', 'separador');

Genera un párrafo con la clase "bottom_nav" y la clase "current" en el elemento seleccionado. Acepta dos parámetros , ambos opcionales (si solo se quiere usar el separador, el primer parametro debe pasarse vacio). El primer parametro es el elemento que se desea seleccionar y funciona igual que en menu_ul();. El segundo parámetro es el separador deseado para colocar entre los elementos. Por ejemplo:

Código :

<?php echo menu_p('about', '|'); ?>
//Genera:
<p class="bottom_nav"><a class="current" href="" id="home">Home</a> | <a href="about" id="about">About Us</a> | <a href="services" id="services">Our Services</a> | <a href="contact">Contact Us</a></p>

Espero les sirva!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.