Comparte en Facebook Twitter Google+

En lecciones anteriores hablábamos sobre algunas de las funcionalidades de este nuevo componente “Styde\Html” creado por el fundador de Styde.Net, Duilio Palacios; pero todavía nos queda mucho camino por recorrer para explicar todas las ventajas que nos brinda este paquete.

En este tutorial hablaremos sobre otra de sus funciones: se trata de la capacidad de crear mensajes de alerta y notificaciones.

Por lo general para realizar este tipo de mensajes tenemos que lidiar con mucho código, manejo de vistas, evaluar tipos de respuestas, etc. Pero desde ahora eso está a punto de cambiar, veamos de que se trata, pero antes de continuar te recomendamos visitar los tutoriales anteriores sobre este componente:

Creando mensajes de alerta

Para crear nuevos mensajes, podemos hacer uso del facade Alert pasando como parámetros el texto que deseamos mostrar y el tipo de mensaje  (alert, success, danger, info)

Los tipos de mensajes deben coincidir con los nombres de las clases utilizados por el framework de diseño CSS que tu proyecto implemente, por defecto, este componente utiliza como tema el framework Bootstrap.

Cuando usas este facade, los mensajes se almacenan en la sesión y persisten hasta el momento de ser mostrados al usuario con

Veamos un ejemplo:

Si creamos un nuevo controlador llamado AlertController

$ php artisan make:controller AlertController --plain

y dentro de éste, la función para mostrar un mensaje:

Ahora configuramos la ruta para que apunte a este controlador:

Finalmente dentro del directorio resources/views, creamos una nueva vista llamada test.blade.php

Esta vista extiende de layout.blade.php

Como puedes ver, en lugar de descargar los archivos de Bootstrap, estamos usando el CDN directamente para incluir las hojas de estilo y los archivos de javascript del framework.

Perfecto, ahora si ingresamos a la ruta /test veremos algo como esto:

alert

Tipos de alertas

Como te mencionaba anteriormente puedes pasar como parámetro el tipo de alerta que deseas mostrar (info, success, danger, warning), si editamos un poco nuestro controlador podremos ver esto en detalle.

Y no te preocupes por cambiar nada en la vista, no es necesario, con este pequeño cambio obtendrás el siguiente resultado:

alert-type

Pero además si esto te parece demasiado código lo puedes simplificar usando en lugar el método “message” el nombre del tipo de alerta que quieres incluir y tendrás el mismo resultado en la vista:

Métodos encadenados

El componente te permite usar otros métodos adicionales para agregar parámetros e información que desas mostrar en cada notificación.

details()

Esto te permite agregar información adicional o secundaria a cada mensaje usando

alert-detail

 

button()

Puedes incluir botones de acción en los mensajes, en lo personal me parece un método de mucha utilidad para generar mayor interacción por parte de los usuarios.

Este método recibe como parámetros el texto del botón, la URL y por ultimo el tipo (al igual que los tipos de los mensajes, esto coincide con la clase de Bootstrap para cada botón).

Con esto obtendrás un nuevo botón dentro de la notificación.

alert-cta

html()

En ciertas ocasiones tal vez quieras incluir tu propio código HTML sin editar directamente la vista, lo puedes hacer con:

El código HTML sera incluido de la siguiente manera en la vista:

alert-html

Ten cuidado en escapar las partes de éste HTML que sean necesarias, antes de llamar al método html()

view()

Si requieres pasar mucho más código HTML puedes incluir una vista completa usando view() y pasando como parámetro el nombre de la vista, puede ser por ejemplo un menú llamado menu.blade.php

Editamos el controlador para agregar el método

Ahora veamos el resultado

alert-view

items()

Puedes pasar un array de elementos que deseas sean mostrados en una lista dentro de la notificación

items

Custom template

Por último, si deseas utilizar un template personalizado para tus notificaciones, en lugar del tema por defecto de Bootstrap, puedes crear tu vista y pasarla como argumento en el método render.

¿No te parece genial este componente? Estoy seguro que sí. Entonces no esperes más antes de usarlo, puedes descargarlo desde el repositorio del proyecto en GitHub, y si te gusta nuestro trabajo, por favor dale una estrella en GitHub.

Recuerda dejar todas tus dudas y en la sección de comentarios y por supuesto no olvides compartir este contenido en redes sociales.

Crea tus propios componentes

Si quieres aprender a crear paquetes tan geniales como éste, no te pierdas nuestro Curso de creación de componentes para PHP y Laravel, regístrate ahora mismo y Forma parte de nuestra comunidad para que tengas acceso inmediato a todo el contenido exclusivo de las Series y Cursos que @StydeNet tiene para ti.

Aprende PHP, Laravel y más por sólo 999 al mes: ver planes.

Lección anterior Radios y Checkboxes con el componente Styde Html Lección siguiente Implementar un foro en Laravel 5.1 con Socieboy Forum