Que es Laravel Collective y como implementarlo en Laravel

3 minuto(s)

En esta página:

Laravel cuenta con muchas herramientas de desarrollo ágil que facilita a la vida a los desarrolladores con este Framework, uno de estos es Laravel Collective, que se hizo muy popular por su capacidad de ayudar mucho a manejar elementos HTML de manera limpia y sin reescribir mucho código, en este artículo vamos a enseñarte sobre esta herramienta y como usarlo en Laravel.

Primero vamos a explicare que es Laravel Collective, luego como usarlo y lo que puedes hacer con esta herramienta.

Qué es Laravel Collective ?

Es un conjunto de elementos para Formularios HTML tales como Labels, Botones, Listas de Formulario, Radio Buttons, Checkboxs, etc. Por otro lado cuenta con Anotaciones, Remote SSH, Iron Queue y Command Bus para otro tipo de tareas.

A pesar que Laravel Collective cuenta con otros servicios, esta herramienta se hizo popular más por el uso de los elementos para formularios mencionados.

Como usar Laravel Collective ?

Para esto tienes que tener instalado y desplegado correctamente Laravel Framework, luego ingresa a la carpeta de tu proyecto y estando dentro abre tu consola de comandos y ejecuta el siguiente comando para instalar Laravel Collective, presiona Enter y deja que termine de instalar


composer require "laravelcollective/html":"^5.6.0"

composer require "laravelcollective/html":"^5.6.0"

Nota: Como usamos la versión de Laravel 5.6, puedes ver que al final colocamos ^5.6.0

Ahora ve a la carpeta config y dentro de ella abre el archivo llamado app.php


/config 
  ├── app.php // Abre esté archivo 
/database

/config

├── app.php // Abre esté archivo

/database

Dirígete a la parte de Providers y agrega la siguiente línea


'providers' => [
    // ...
    Collective\Html\HtmlServiceProvider::class,
    // ...
],

'providers' => [

// ...

Collective\Html\HtmlServiceProvider::class,

// ...

Luego en el mismo archivo app.php ve a la parte de Aliases y agrega estas 2 líneas


'aliases' => [
    // ...
      'Form' => Collective\Html\FormFacade::class,
      'Html' => Collective\Html\HtmlFacade::class,
    // ...
],

'aliases' => [

// ...

'Form' => Collective\Html\FormFacade::class,

'Html' => Collective\Html\HtmlFacade::class,

// ...

Con esto ya tenemos instalado y desplegado Laravel Collective listo para usarse.

Uso de Laravel Collective

Como mencionamos más arriba, con Laravel Collective podemos crear elementos para formularios HTML, para esto vamos en primer lugar a iniciar un formulario


{!! Form::open(['route'=>'postres.store', 'method'=>'STORE', 'files' => true, 'role' => 'form']) !!}
    // Acá coloca los elementos del Formulario
{!! Form::close() !!}

{!! Form::open(['route'=>'postres.store', 'method'=>'STORE', 'files' => true, 'role' => 'form']) !!}

// Acá coloca los elementos del Formulario

{!! Form::close() !!}

Ahora vamos agregar 4 elementos a nuestro formulario, estos elementos son:

2 Caja de Texto
1 Selector de Archivo
1 Cuando de Texto

Esto sería de la siguiente manera


// 2 Cajas de Texto
{!! Form::label('nombre', 'Nombre:', array('class' => 'negrita')) !!}
{!! Form::text('nombre',null,['class'=>'form-control', 'placeholder'=>'Torta de Chocolate', 'required' => 'required']) !!}

{!! Form::label('precio', 'Precio:', array('class' => 'subrayado')) !!} 
{!! Form::text('precio',null,['class'=>'form-control', 'placeholder'=>'4.50', 'required' => 'required']) !!}

// 1 Selector de Archivo
{!! Form::label('path', 'Selecciona una imagen:', array('class' => 'negrita')) !!}                          
{!! Form::file('imagen',null, array('required' => 'true')) !!}

// Cuadro de Texto
{!! Form::label('descripcion', 'Descripción:', array('class' => 'negrita')) !!}
{{ Form::textarea('descripcion', null, ['placeholder'=>'Ingresa una descripción acá...', 'required' => 'required']) }}

// 2 Cajas de Texto

{!! Form::label('nombre', 'Nombre:', array('class' => 'negrita')) !!}

{!! Form::text('nombre',null,['class'=>'form-control', 'placeholder'=>'Torta de Chocolate', 'required' => 'required']) !!}

{!! Form::label('precio', 'Precio:', array('class' => 'subrayado')) !!}

{!! Form::text('precio',null,['class'=>'form-control', 'placeholder'=>'4.50', 'required' => 'required']) !!}

// 1 Selector de Archivo

{!! Form::label('path', 'Selecciona una imagen:', array('class' => 'negrita')) !!}

{!! Form::file('imagen',null, array('required' => 'true')) !!}

// Cuadro de Texto

{!! Form::label('descripcion', 'Descripción:', array('class' => 'negrita')) !!}

{{ Form::textarea('descripcion', null, ['placeholder'=>'Ingresa una descripción acá...', 'required' => 'required']) }}

Y si los metemos dentro de nuestro formulario creado previamente, agregamos separación con la etiqueta <br> quedaría así


{!! Form::open(['route'=>'postres.store', 'method'=>'STORE', 'files' => true, 'role' => 'form']) !!}
    // 2 Cajas de Texto
    {!! Form::label('nombre', 'Nombre:', array('class' => 'negrita')) !!}
    {!! Form::text('nombre',null,['class'=>'form-control', 'placeholder'=>'Torta de Chocolate', 'required' => 'required']) !!}

    {!! Form::label('precio', 'Precio:', array('class' => 'subrayado')) !!} 
    {!! Form::text('precio',null,['class'=>'form-control', 'placeholder'=>'4.50', 'required' => 'required']) !!}

    <br>
    {!! Form::label('path', 'Selecciona una imagen:', array('class' => 'negrita')) !!}                          
    {!! Form::file('imagen',null, array('required' => 'true')) !!}
    <br>
    {!! Form::label('descripcion', 'Descripción:', array('class' => 'negrita')) !!}
    <br>
    {{ Form::textarea('descripcion', null, ['placeholder'=>'Ingresa una descripción acá...', 'required' => 'required']) }}
{!! Form::close() !!}

{!! Form::open(['route'=>'postres.store', 'method'=>'STORE', 'files' => true, 'role' => 'form']) !!}

// 2 Cajas de Texto

{!! Form::label('nombre', 'Nombre:', array('class' => 'negrita')) !!}

{!! Form::text('nombre',null,['class'=>'form-control', 'placeholder'=>'Torta de Chocolate', 'required' => 'required']) !!}

{!! Form::label('precio', 'Precio:', array('class' => 'subrayado')) !!}

{!! Form::text('precio',null,['class'=>'form-control', 'placeholder'=>'4.50', 'required' => 'required']) !!}

<br>

{!! Form::label('path', 'Selecciona una imagen:', array('class' => 'negrita')) !!}

{!! Form::file('imagen',null, array('required' => 'true')) !!}

<br>

{!! Form::label('descripcion', 'Descripción:', array('class' => 'negrita')) !!}

<br>

{{ Form::textarea('descripcion', null, ['placeholder'=>'Ingresa una descripción acá...', 'required' => 'required']) }}

{!! Form::close() !!}

El motor de Laravel Collective renderizará el contenido convirtiéndolo a etiquetas de Formulario HTML

Si deseas saber más o usar otros elementos, puedes ingresar a la página oficial de Laravel Collective.

Notas

Algunas versiones de Laravel Collective con Compatible con las nuevas versiones de Laravel Framework.
La herramienta Laravel Collective puede dejar de existir o no, eso no depende de nosotros si no de sus creadores.

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.