Laravel

Laravel Collective : Form Components – Maybe You Should Give It A Try

 

If the forms in your application are quite simple, identical, and  do not require many customizable fields, then using LaravelCollective for forms creation can be fairly beneficial, as it reduces code writing and allows us to reuse the form template instead of hard coding one every time.

The form builder provided by Laravel Collective actually makes building forms easier and more manageable.

However, in essence, it’s just a wrapper on top of the HTML, if you have tried the package but have not seen any substantial benefits and convenience yet, then just stop using it and write pure HTML instead.

Here are the steps that I followed in one of my side projects,  maybe it can serve as a reference if you want to try implementing the package.

 

Steps

'providers' => [
    // ...
    Collective\Html\HtmlServiceProvider::class,
    // ...
  ],
  • Finally, add two class aliases to the aliases array of config/app.php:
 'aliases' => [
    // ...
      'Form' => Collective\Html\FormFacade::class,
      'Html' => Collective\Html\HtmlFacade::class,
    // ...
  ],
  • Make a Service Provider
$ php artisan make:provider FormServiceProvider
  • Register this FormServiceProvider in config/app.php
 App\Providers\FormServiceProvider::class,
  • Open FormServiceProvider.php
use Form;
 public function boot()
    {
         //Register the form components
         Form::component('bsText', 'components.form.text', ['name', 'value' => null, 'attributes' => []]);
         Form::component('bsTextArea', 'components.form.textarea', ['name', 'value' => null, 'attributes' => []]);
         Form::component('bsSubmit', 'components.form.submit', ['value' => 'Submit', 'attributes' => []]);
         Form::component('hidden', 'components.form.hidden', ['name', 'value' => null, 'attributes' => []]);

    }
  • Create templates
  • Create Resources/views/components/form
  • Under Form folder create:
      • hidden.blade.php
    {{ Form::hidden($name, $value, $attributes) }}
      • submit.blade.php
        {{ Form::submit($value, $attributes) }}
      • text.blade.php
        {{ Form::label($name, null, ['class' => 'control-label']) }}
    {{ Form::text($name, $value, array_merge(['class' => 'form-control'], $attributes)) }}
      • textarea.blade.php
        {{ Form::label($name, null, ['class' => 'control-label']) }}
    {{ Form::textarea($name, $value, array_merge(['class' => 'form-control'], $attributes)) }}
    • Therefore, in our create.blade.php we can simply write
    
                {{-- form starts --}}
                {!! Form::open(['action' => 'ListingController@store', 'method' => 'POST']) !!}
                {{ Form::bsText('name', '', ['placeholder' => 'Company Name']) }}
                {{ Form::bsText('website', '', ['placeholder' => 'Company Website']) }}
                {{ Form::bsText('email', '', ['placeholder' => 'Contact Email']) }}
                {{ Form::bsText('phone', '', ['placeholder' => 'Contact Phone']) }}
                {{ Form::bsText('address', '', ['placeholder' => 'Business Address']) }}
                {{ Form::bsTextArea('bio', '', ['placeholder' => 'About This Business' ]) }}
                {{ Form::bsSubmit('submit', ['class' => 'btn btn-primary']) }}
                {!! Form::close() !!}
                {{-- form ends --}}
    • In edit.blade.php
      {{-- form starts --}}
    {!! Form::open(['action' => ['ListingController@update', $listing->id], 'method' => 'POST']) !!}
    {{ Form::bsText('name', $listing->name , ['placeholder' => 'Company Name']) }}
    {{ Form::bsText('website', $listing->website, ['placeholder' => 'Company Website']) }}
    {{ Form::bsText('email', $listing->email, ['placeholder' => 'Contact Email']) }}
    {{ Form::bsText('phone', $listing->phone, ['placeholder' => 'Contact Phone']) }}
    {{ Form::bsText('address', $listing->address, ['placeholder' => 'Business Address']) }}
    {{ Form::bsTextArea('bio', $listing->bio, ['placeholder' => 'About This Business' ]) }}
    {{ Form::bsSubmit('submit', ['class' => 'btn btn-primary']) }}
    {{ Form::hidden('_method', 'PUT') }}
    {!! Form::close() !!}
  {{-- form ends --}}
    • Delete button
    {!! Form::open(['action' => ['ListingController@destroy', $listing->id], 'method' => 'POST', 'onsubmit' => 'return confirm("Are You Sure?")']) !!}
    {{ Form::hidden('_method', 'DELETE')}}
    {{ Form::bsSubmit('Delete', ['class' => 'btn btn-danger']) }}
{!! Form::close() !!}

 

The code is cleaner and more organized than raw HTML right?

Standard

Leave a comment