{"componentChunkName":"component---gatsby-theme-teklog-src-templates-post-tsx","path":"/is-it-beneficial-to-add-laravel-collective-html-package-into-your-laravel-project","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://blog.tekmi.nl","author":{"name":"Teklog","avatar":"/img/tekmi-icon.svg"}}},"blogPost":{"frontmatter":{"title":"Is it beneficial to add Laravel Collective HTML package into your Laravel project?","slug":"is-it-beneficial-to-add-laravel-collective-html-package-into-your-laravel-project","series":null,"date":"2017-07-10","datePretty":"10 July, 2017","coverImage":{"childImageSharp":{"fixed":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAUBAwQG/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAHbKqvLoRIJ/8QAGRAAAwEBAQAAAAAAAAAAAAAAAAECAyER/9oACAEBAAEFAq3iSdoo6cQ59E2l/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFREBAQAAAAAAAAAAAAAAAAAAABL/2gAIAQIBAT8Bpb//xAAZEAEAAgMAAAAAAAAAAAAAAAAAETEBEFH/2gAIAQEABj8C6uF6yh//xAAeEAACAgAHAAAAAAAAAAAAAAAAAREhMUFRYYGx8f/aAAgBAQABPyGFxlpkNK5CfQaYujYJFVHSP//aAAwDAQACAAMAAAAQ2y//xAAXEQEAAwAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EKhj/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oACAECAQE/EI4f/8QAHRABAAICAgMAAAAAAAAAAAAAAQARITFBcVFhkf/aAAgBAQABPxAytLzTMAi86rR91PInoSiAQT1xAs0Ri3jqGj0BnE//2Q==","width":1000,"height":750,"src":"/static/dee0051b0ac0981d7cbd508c841e999c/a7715/oldShedInField.jpg","srcSet":"/static/dee0051b0ac0981d7cbd508c841e999c/a7715/oldShedInField.jpg 1x"}}},"author":null,"authorAvatar":null},"timeToRead":12,"excerpt":"Introduction Laravel Collective is a set of components that have been removed from Laravel's core framework and are no longer maintained by Taylor…","html":"

Introduction

\n

Laravel Collective is a set of components that have been removed from Laravel's core framework and are no longer maintained by Taylor Otwell. Instead there is group of volunteers who decided to maintain following once famous packages:

\n\n

In this tutorial, we are going to examine laravelcollective/html, trying to verify its usefulness in your future projects. Let's start then!

\n

Assumptions

\n\n

Solution

\n

Create Laravel project from scratch

\n
laravel new testing-laravel-collective
\n

As you probably know, Laravel base project comes with three packages

\n
\"require\": {\n    \"php\": \">=5.6.4\",\n    \"laravel/framework\": \"5.4.*\",\n    \"laravel/tinker\": \"~1.0\"\n}
\n

In order to add Laravel Collective Html package, update composer dependency as shown below

\n
composer require \"laravelcollective/html\":\"^5.4.0\"
\n

Please note that Laravel Collective Html is not standalone package, it requires five other illuminate packages such as

\n
\"require\": {\n  \"php\": \">=5.6.4\",\n  \"illuminate/http\": \"5.4.*\",\n  \"illuminate/routing\": \"5.4.*\",\n  \"illuminate/session\": \"5.4.*\",\n  \"illuminate/support\": \"5.4.*\",\n  \"illuminate/view\": \"5.4.*\"\n}
\n

Typically, when you create new Laravel project, you are actually pulling laravel/framework package which replaces all illuminate packages required by Laravel Collective Html.

\n
\"replace\": {\n  \"illuminate/http\": \"self.version\",\n  \"illuminate/routing\": \"self.version\",\n  \"illuminate/session\": \"self.version\",\n  \"illuminate/support\": \"self.version\",\n  \"illuminate/view\": \"self.version\"\n}
\n

As a result, you only see laravelcollective/html package being added to your composer.json.

\n

If this part is clear, let's move on to adding Laravel Collective Html provider to the providers array of config/app.php

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

If you enjoy Laravel Facades, don't forget to add two class aliases to the aliases array of config/app.php

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

Installation part is over, so let's try to explore a few features from Laravel Collective Html package.

\n

Features

\n

General Form creation

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Laravel Collective HtmlLaravel
{!! Form::open(['url' => '/']) !!}
{!! Form::close() !!}		<form method="post" action="{{ url('/') }}" accept-charset="utf-8">
</form>
\n

If you care about HTML naming conventions, please keep in mind that Laravel Collective Html produces form with uppercased method and accept-charset as shown below.

\n
<form method=\"POST\" action=\"http://blogging.app\" accept-charset=\"UTF-8\">\n  <input name=\"_token\" type=\"hidden\" value=\"XnZwoGRTD4GszGv1kgTuFO9U8rlmMCX4HH7evCdM\">\n</form>
\n

Sophisticated Form creation

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Laravel Collective HtmlLaravel
{!! Form::open(['route' => 'home', 'method' => 'put', 'files' => 'yes']) !!}
{!! Form::close() !!}		<form method="post" action="{{ route('home') }}" accept-charset="utf-8" enctype="multipart/form-data">
{{ method_field('PUT') }}
{{ csrf_field() }}
</form>
\n

Form Model Bindings

\n

Having following user

\n
{\n  \"id\":1,\n  \"name\":\"Miss Dianna Funk\",\n  \"email\":\"isadore.farrell@example.com\",\n  \"active\":0,\n  \"created_at\":\"2017-07-08 16:30:36\",\n  \"updated_at\":\"2017-07-08 16:30:36\"\n}
\n

passed to the Blade template, you can easily bind it to the form, using Form::model method, instead of Form::open.

\n
{!! Form::model($user, ['action' => 'HomeController@user']) !!}\n\n{!! Form::label('email', 'E-mail Address') !!}\n{!! Form::email('email') !!}\n\n{!! Form::label('active', 'Is Active?') !!}\n{!! Form::checkbox('active', 'Yes') !!}\n\n{!! Form::label('updatedAt', 'Updated At') !!}\n{!! Form::date('updatedAt') !!}\n\n{!! Form::label('created_at', '<strong>Created At</strong>', ['class' => 'btn btn-success', 'id' => 'created_at_id'], false) !!}\n{!! Form::datetime('created_at', null, ['class' => 'btn']) !!}\n\n{!! Form::submit('Edit') !!}\n\n{!! Form::close() !!}
\n

However there are some caveats.

\n\n

If you wanted to achieve the same with plain Laravel, here is the snippet

\n
<form action=\"{{ action('HomeController@user') }}\" method=\"post\" accept-charset=\"utf-8\">\n  {{ csrf_field() }}\n\n  <label for=\"email\">Email</label>\n  <input type=\"email\" id=\"email\" name=\"email\" value=\"{{ old('email', request('email') ?? $user->email ?? null) }}\" />\n\n  <label for=\"active\">Is Active?</label>\n  <input type=\"checkbox\" id=\"active\" name=\"active\" value=\"Yes\" @if(old('active', request('active') ?? $user->active ?? null)) checked @endif />\n\n  <label for=\"updatedAt\">Updated At</label>\n  <input name=\"updatedAt\" type=\"date\" value=\"{{ old('updatedAt', request('updatedAt') ?? $user->updated_at ?? null) }}\" id=\"updatedAt\">\n\n  <label for=\"created_at\" class=\"btn btn-success\" id=\"created_at_id\"><strong>Created At</strong></label>\n  <input class=\"btn\" name=\"created_at\" type=\"datetime\" value=\"{{ old('createdAt', request('createdAt') ?? $user->created_at ?? null) }}\" id=\"created_at\">\n\n  <input type=\"submit\" value=\"Edit\" />\n</form>
\n

Macros and Components

\n

In order to create a Macro or Component, head over to your AppServiceProvider and inside boot method place the following

\n
FormBuilder::macro('tekmi', function () {\n  return '<input type=\"text\" value=\"tekmi\">';\n});\n\nFormBuilder::component(\n  'bsTekmi', \n  'components.form.text', \n  ['name', 'value' => null, 'attributes' => []]\n);
\n

Additionally, Components use Blade templates, so don't forget to create one in resources/views/components/form/text.blade.php with following snippet

\n
<div class=\"form-group\">\n  {{ Form::label($name, null, ['class' => 'control-label tekmi-label']) }}\n  {{ Form::text($name, $value, array_merge(['class' => 'form-control tekmi-text'], $attributes)) }}\n</div>
\n

Having Macro and Component ready, here is how this can be invoked inside your Blade templates

\n
{!! Form::tekmi() !!}\n{!! Form::bsTekmi('first_name') !!}\n{!! Form::bsTekmi('last_name', 'tekmi', ['class' => 'form-control tekmi-text']) !!}
\n

If you wanted to achieve something similar in pure Laravel, it should be pretty straightforward. Just create a custom class which:

\n\n

Other FormBuilder and HtmlBuilder conveniences

\n

I went carefully through all the public methods from Collective\\Html\\FormBuilder and Collective\\Html\\HtmlBuilder classes, using the most complicated combination of parameters possible, as presented below.

\n
{{ Form::token() }}\n\n{!! Form::textarea('description', 'Text', ['size' => '20x5', 'id' => 'description', 'name' => 'description', 'class' => 'text text-long']) !!}\n{!! Form::hidden('hidden', 'Hidden', ['id' => 'hidden', 'name' => 'hidden', 'class' => 'text text-hidden']) !!}\n{!! Form::password('password', ['id' => 'password', 'name' => 'password', 'class' => 'text text-center']) !!}\n\n{!! Form::search('search', 'Search', ['id' => 'search', 'name' => 'search', 'class' => 'text text-left']) !!}\n{!! Form::tel('tel', '031647555333', ['id' => 'tel', 'name' => 'tel', 'class' => 'text text-left']) !!}\n{!! Form::number('number', '0.05', ['min' => 0, 'step' => 0.01, 'id' => 'number', 'name' => 'number', 'class' => 'text text-left']) !!}\n\n{!! Form::datetimeLocal('localDateTime', '2017-10-10T21:10:10', ['id' => 'localDateTime', 'name' => 'localDateTime', 'class' => 'text text-left']) !!}\n{!! Form::time('time', '10:30:55', ['id' => 'time', 'name' => 'time', 'class' => 'text text-left']) !!}\n{!! Form::url('url', 'http://tekmi.nl', ['id' => 'url', 'name' => 'url', 'class' => 'text text-left']) !!}\n\n{!! Form::select('size', ['L' => 'Large', 'S' => 'Small'], null, ['placeholder' => 'Pick a size...', 'id' => 'size', 'class' => 'select select-big'], ['L' => ['class' => 'option option-red']]) !!}\n{!! Form::select('animal',['Cats' => ['leopard' => 'Leopard'], 'Dogs' => ['spaniel' => 'Spaniel']], 'spaniel', ['class' => 'select-with-optgroup']) !!}\n{!! Form::selectRange('range', 10, 30, 20, ['id' => 'range', 'class' => 'range range-20']) !!}\n\n{!! Form::reset('resetButton', ['name' => 'reset', 'class' => 'reset-now']) !!}\n{!! Form::selectMonth('month', 5, ['id' => 'month', 'class' => 'month month-1'], '%h') !!}\n{!! Form::selectYear('birthdayDay', 2020, 2000, 2001, ['id' => 'year']) !!}\n\n{!! Form::file('file', ['id' => 'file', 'name' => 'file', 'class' => 'file']) !!}\n{!! Form::radio('radio', 'Switch On', null, ['id' => 'radio-1', 'name' => 'radio', 'class' => 'radio tune-in']) !!}\n{!! Form::radio('radio', 'Switch Off', true, ['id' => 'radio-2', 'name' => 'radio', 'class' => 'radio tune-in']) !!}\n\n{!! Form::image('images/image.jpg', 'Image Button', ['class' => 'reset-now']) !!}\n{!! Form::color('color', '#ff0000', ['id' => 'color', 'class' => 'text-color']) !!}\n{!! Form::button('button', ['id' => 'button', 'class' => 'btn btn-success']) !!}
\n
{!! Html::script('app.js', ['type' => 'text/javascript'], true) !!}\n{!! Html::style('app.css', ['media' => 'screen'], true) !!}\n{!! Html::image('images/image.jpg', 'Image Alt', ['class' => 'image'], true) !!}\n{!! Html::favicon('favicon.ico', ['type' => 'image/x-icon'], true) !!}\n\n{!! Html::link('users/1/edit', '<i>Title</i>', ['class' => 'link'], true, false) !!}\n{!! Html::linkAsset('img/image.jpg', 'Image', ['class' => 'img'], true) !!}\n{!! Html::linkRoute('home', 'Home', ['param' => 'value'], ['class' => 'btn']) !!}\n{!! Html::linkAction('HomeController@index', 'Home', ['param' => 'value'], ['class' => 'btn']) !!}\n\n{!! Html::nbsp(5) !!}\n\n{!! Html::mailto('ala@ala.nl', '<i>Mail me</i>', ['class' => 'mail'], false) !!}\n\n{!! Html::ol(['a', 'b', 'c' => ['d', 'e']], ['class' => 'ol-list']) !!}\n{!! Html::ul(['a', 'b', 'c' => ['d', 'e']], ['class' => 'ul-list']) !!}\n{!! Html::dl(['a' => 'a character', 'b', 'c multiple' => ['d' => 'd is here', 'e' => 'e is there']], ['class' => 'dl-list']) !!}\n\n{!! Html::meta('viewport', 'width=device-width, initial-scale=1') !!}\n{!! Html::meta(null, null, ['charset' => 'utf-8']) !!}\n{!! Html::meta(null, 'IE=edge', ['http-equiv' => 'X-UA-Compatible']) !!}\n\n{!! Html::tag('input', '', ['type' => 'week', 'value' => '2017-W05']) !!}
\n

Creating pure Laravel counterparts should be straightforward. If you are struggling though, please check an example github repository I've created.

\n

URL generation with global helpers

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Laravel Collective HtmlLaravel
{{ link_to('/') }}
{{ link_to('/', 'Title') }}
{{ link_to('/', 'Title', ['class' => 'btn']) }}
{{ link_to('/', 'Title', ['class' => 'btn'], true) }}
{{ link_to('/', '<strong>Title</strong>', ['class' => 'btn'], true, false) }}		<a href="{{ url('/') }}">{{ url('/') }}</a>
<a href="{{ url('/') }}">Title</a>
<a class="btn" href="{{ url('/') }}">Title</a>
<a class="btn" href="{{ url('/', [], true) }}">Title</a>
<a class="btn" href="{{ url('/', [], true) }}"><strong>Title</strong></a>
{{ link_to_asset('img/image.jpg') }}
{{ link_to_asset('img/image.jpg', 'Image') }}
{{ link_to_asset('img/image.jpg', 'Image', ['class' => 'img']) }}
{{ link_to_asset('img/image.jpg', 'Image', ['class' => 'img'], true) }}		<a href="{{ asset('img/image.jpg') }}">{{ asset('img/image.jpg') }}</a>
<a href="{{ asset('img/image.jpg') }}">Image</a>
<a class="img" href="{{ asset('img/image.jpg') }}">Image</a>
<a class="img" href="{{ asset('img/image.jpg', true) }}">Image</a>
{{ link_to_route('home') }}
{{ link_to_route('home', 'Home') }}
{{ link_to_route('home', 'Home', ['param' => 'value']) }}
{{ link_to_route('home', 'Home', ['param' => 'value'], ['class' => 'btn']) }}		<a href="{{ route('home') }}">{{ route('home') }}</a>
<a href="{{ route('home') }}">Home</a>
<a href="{{ route('home', ['param' => 'value']) }}">Home</a>
<a class="btn" href="{{ route('home', ['param' => 'value']) }}">Home</a>
{{ link_to_action('HomeController@index') }}
{{ link_to_action('HomeController@index', 'Home') }}
{{ link_to_action('HomeController@index', 'Home', ['param' => 'value']) }}
{{ link_to_action('HomeController@index', 'Home', ['param' => 'value'], ['class' => 'btn']) }}		<a href="{{ action('HomeController@index') }}">{{ action('HomeController@index') }}</a>
<a href="{{ action('HomeController@index') }}">Home</a>
<a href="{{ action('HomeController@index', ['param' => 'value']) }}">Home</a>
<a class="btn" href="{{ action('HomeController@index', ['param' => 'value']) }}">Home</a>
\n

It's worth to know that Laravel's route and action methods provide third parameter called absolute, which is not covered by the Laravel Collective counterparts. If you set it to false, you will get the URI without the domain (e.g: /?param=value or /home?param=value).

\n
<a class=\"btn\" href=\"{{ route('home', ['param' => 'value'], false) }}\">Home</a>\n<a class=\"btn\" href=\"{{ action('HomeController@index', ['param' => 'value'], false) }}\">Home</a>
\n

Summary

\n

We have gone through long journey together, trying to discover hidden gems of laravelcollective/html package. Along the way we experienced some issues and shortcomings of it, so let's try to enumerate them now

\n\n

If I missed anything relevant, please write your findings on Twitter.

\n

Sample Code

\n

https://github.com/tekmi/blogging-laravelcollectivehtml

"}},"pageContext":{"postId":"4be567ad-0aa5-562c-b3d4-908ceee3da9b","slug":"is-it-beneficial-to-add-laravel-collective-html-package-into-your-laravel-project"}}}