Comparte en Facebook Twitter Google+

En la actualidad es común encontrarnos con páginas web que poseen una barra de navegación la cual especifica dentro de cuáles secciones estamos ubicados, esto es conocido como Breadcrumbs y en este tutorial vamos a utilizar el paquete davejamesmiller/laravel-breadcrumbs  en un mini-proyecto para conocer su funcionamiento.

Mini-Proyecto

Vamos a comenzar nuestro mini-proyecto instalando Laravel, para hacerlo ejecutamos el siguiente comando en nuestra terminal:

Seguidamente, procedemos a configurar nuestro archivo .env para enlazar este proyecto a una base de datos, agregando las credenciales, como aprendimos en el Curso de Laravel 5.5 desde cero.

Para este proyecto vamos a definir 2 nuevos modelos llamados Genre y Movie, además del modelo User ya existente por defecto, ejecutamos los siguientes comandos en nuestra terminal:

Con la opción -mfc estamos indicando que queremos, además de crear un modelo, crear la migración, controlador y model factory.

Seguidamente vamos a editar las migraciones que hemos creado, para ello comenzamos con la migración create_genres_table:

Continuamos con la migración para las películas create_movies_table:

Model Factories & Seeder

Ahora vamos modificar los Models Factories de los modelos creados anteriormente. Comenzamos editando el que tiene por nombre GenreFactory.php:

Continuamos ahora editando el archivo MovieFactory.php:

Si no conoces cómo funcionan los Model Factories te invitamos a ver la lección Generar registros usando Model Factories en Laravel del Curso de Laravel desde cero

Con los Models Factories definidos vamos a crear datos de prueba, editando el archivo DatabaseSeeder.php ubicado en database/seeds:

Para finalizar con las migraciones y los seeders debemos ejecutar el siguiente comando en nuestra terminal:

Con esto ya tenemos nuestra base de datos con las tablas necesarias y con algunos registros de prueba gracias a los models factories y los seeders.

Si deseas aprender más sobre los Seeders puedes visitar la lección Inserción de datos con los seeders de Laravel del Curso de Laravel desde cero.

Instalación & Configuración del paquete

Necesitamos decirle a Composer que requerimos el nuevo paquete encargado de ayudarnos a generar los breadcrumbs, vamos a ejecutar la siguiente instrucción en la terminal:

Después de finalizar la instalación del paquete es necesario crear un nuevo archivo llamado breadcrumbs.php dentro de la carpeta routes con el cual estaremos trabajando más adelante.

Por defecto, este paquete al generarse en nuestra vista posee los estilos de Bootstrap 4, si deseas cambiarlo debemos ejecutar un comando para generar un archivo de configuración llamado breadcrumbs.php que se ubicara en la carpeta config.

Después de ejecutar el comando podemos abrir el archivo config/breadcrumbs.php y buscaremos en el arreglo la llave view la cual estará de esta forma por defecto:

El paquete por defecto tiene soporte para algunos frameworks CSS:

Por ejemplo, si estamos trabajando con Materialize deberíamos reemplazar el valor de llave view por:

Si no estás trabajando con alguno de estos frameworks y deseas personalizar lo que se genere puedes hacerlo indicando la dirección de una vista de la siguiente forma:

Esto es, el contenido de la vista está enresources/views/partials/breadcrumbs.blade.php :

Rutas de nuestro proyecto

Para este mini-proyecto debemos definir algunas rutas, para hacer esto vamos a dirigirnos al archivo routes/web.php y vamos a dejarlo de la siguiente forma:

En total tenemos 4 rutas que apuntan a los controladores que ya hemos creado anteriormente pero que aún no tienen definidos los métodos que estamos llamando.

Controladores

Comenzaremos editando el controlador GenreController y lo dejaremos de la siguiente forma:

Procedemos ahora con el controlador MovieController:

Vistas

Para este proyecto he creado un archivo llamado template.blade.php el cual nos servirá como plantilla para el resto de nuestros vistas, su contenido es el siguiente:

En nuestros controladores apuntamos hacía algunas vistas y ahora vamos a crearlas comenzando por la vista home.blade.php ubicándola en la carpeta resources/views

Como puedes notar estamos utilizando el Facade Breadcrumbs perteneciente al paquete, además se llama a la función render y le pasamos el valor 'home', este valor es el nombre de la sección del breadcrumbs que aun no hemos definido, esto lo vamos hacer más adelante en el archivo routes/breadcrumbs.php.

Continuamos con la siguiente vista y para esto vamos a crear una carpeta llamada genres y dentro colocamos una vista llamada index.blade.php y la dejamos de esta forma:

Podemos notar como ahora hemos colocado un valor diferente en la función render ya que se trata de otra sección.

Vamos a continuar creando una vista llamada show.blade.php en la misma carpeta:

Por último, vamos a crear una nueva carpeta llamada movies en resources/views, dentro de ella creamos una nueva vista llamada show.blade.php y le colocaremos lo siguiente:

Secciones del breadcrumbs

Ahora, en el archivo routes/breadcrumbs.php vamos a definir todas esas secciones que ya hacemos referencia desde nuestras vistas con el Facade Breadcrumbs y el método render.

En este archivo estamos haciendo el llamado nuevamente del Facade Breadcrumbs pero esta vez usamos el método for para crear las secciones, el primer parámetro que recibe es el nombre de la sección y como segundo parámetro le pasamos una función anónima o callback.

El callback obtiene como primer parámetro la variable con el nombre $trail la cual es una instancia de la clase DaveJamesMiller\Breadcrumbs\BreadcrumbsGenerator, como segundo parámetro pasamos un valor opcional, útil cuando manejamos secciones dinámicas como el nombre de un post, categoría, usuario, etc.

Entre los métodos que tenemos disponibles está push, encargado de colocar el nombre en la vista. En nuestro ejemplo vemos como en ocasiones le colocamos un nombre estático como Inicio pero también puede ser dinámico como lo hacemos con el nombre del género y el de la película, este método también recibe una ruta como segundo parámetro.

Por otro lado, podemos observar que usamos el método parent, con este método definimos cual es el padre de la sección. En el caso de la primera sección llamada home veamos como no se define ya que no tiene padre porque es la sección principal. Este método recibe un primer argumento obligatorio que es el nombre de la sección padre y un segundo argumento opcional que es el valor que está esperando la sección padre como por  ejemplo:

En este caso, debemos enviar el género de la película ya que la sección genre lo está esperando en su callback.

Podemos dirigirnos a nuestro navegador y observar como el Breadcrumbs o barra de navegación es dinámica mientras ingresamos a los enlaces, al ingresar a una película deberíamos tener una vista como esta:

Resultado final de nuestro ejemplo

Finalmente hemos terminado el código del ejemplo, puedes obtenerlo en este repositorio. Te invito a que compartas este artículo en tus redes sociales y no olvides comentar las dudas que tengas o el resultado obtenido después de seguir este artículo.

Espero que te haya gustado este material. No olvides seguirnos en Twitter y suscribirte a nuestro boletín:

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Aprende desarrollo web con Laravel, Vue.js y mucho más a partir de 9 USD al mes: ver planes.