Este componente, desarrollado por Duilio, es una extensión del paquete de HTML de Laravel Collective, el cual incluye una serie de funciones y métodos para generar código HTML en nuestros proyectos de Laravel con el motor de plantillas Blade, hasta el momento en su primera versión, podemos generar elementos como:
- Menús
- Mensajes de alerta
- Campos de formulario
- Colecciones de radios y checkbox
Instalación
Este nuevo componente está disponible vía Composer por lo cual puedes instalarlo desde la consola con el siguiente comando
composer require styde/html ~1.0
Otra opción es agregar en la sección «required» del archivo composer.json de tu aplicación la siguiente linea
"styde/html": "~1.0"
Y posteriormente ejecutar desde la consola:
composer update
Una vez instalado debes agregar el service provider a la lista de providers dentro del archivo config/app.php
Styde\Html\HtmlServiceProvider::class,
Como paso adicional debes agregar un middleware al archivo app/kernel.php y es muy importante que se incluya antes del middleware EncryptCookies . Este middleware permite persistir los mensajes de alerta después de cada petición.
protected $middleware = [
//...
\Styde\Html\Alert\Middleware::class,
\App\Http\Middleware\EncryptCookies::class,
//...
];
Configuración
Este paquete ha sido desarrollado pensando en la configuración, de tal modo que puedas adaptarlo a cada uno de tus proyectos, ofreciendo así una solución mas versátil que otros paquetes similares. Antes de cambiar la configuración es necesario ejecutar el siguiente comando desde la consola
php artisan vendor:publish --provider='Styde\Html\HtmlServiceProvider'
Luego de ejecutar este comando podrás ver varios cambios en el directorio de tu aplicación. Dentro del directorio config se ha creado un nuevo documento llamado html.php, dentro de el puedes configurar diferentes opciones como el tema a utilizar, activar o desactivar la validación HTML de los formularios, entre otros.
<?php
return [
'theme' => 'bootstrap',
'control_access' => true,
'translate_texts' => true,
'novalidate' => false,
'abbreviations' => [
'ph' => 'placeholder',
'max' => 'maxlength',
'tpl' => 'template'
],
'themes' => [
'bootstrap' => [
'field_templates' => [
// type => template
'checkbox' => 'checkbox',
'checkboxes' => 'collections',
'radios' => 'collections'
],
'field_classes' => [
// type => class or classes
'default' => 'form-control',
'checkbox' => '',
'error' => 'input-with-feedback'
],
]
]
];
Temas y plantillas
Dentro de config/html.php encontrarás un array llamado «themes» el cual tiene la configuración para el tema Bootstrap por defecto, si ingresas al directorio resources/views/themes/bootstrap podrás encontrar las plantillas HTML para los campos y los formularios usados por el componente, en caso de ser necesario puedes editarlos para que se adapten un poco mejor al diseño de tu aplicación.
Por ahora no necesitas cambiar ninguna de estas configuraciones. En la próxima lección hablaremos un poco sobre el uso básico del componente y cómo crear nuestro primer formulario.
Puedes ver el componente en acción clonando el repositorio de pruebas, donde encontraras pruebas de integración y una gran variedad de rutas disponibles para que te des una idea de su funcionamiento.
Este proyecto está disponible en GitHub así como toda su documentación y pruebas unitarias.
Te espero en la proxima lección, recuerda dejar tus dudas en la sección de comentarios y no olvides compartir en redes sociales.
Material recomendado
- Qué son los Service Providers de Laravel y cómo usarlos
- Integrar Bootstrap en Laravel 5.1
- Integrando los componentes Html y Form a Laravel
- Composer, el gestor de dependencias de PHP
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Paginación en Laravel 5.1 con blade-pagination Lección siguiente Creando formularios con el paquete Styde/Html