Laravel Collective adalah salah satu component dari framework laravel, sayangnya component tersebut tidak bertahan lama. Sejak laravel 5 muncul, component laravel collective tidak lagi menjadi bagian dari component inti laravel. Tapi, bagi pengguna laravel 4 yang hijrah ke laravel 5 dan masih belum move on dan terpukau terhadap keajaiban laravel collective atau pengguna laravel 5 ke atas yang mau mencicipi laravel collective. Tenang aja, kalian masih bisa menggunakan laravel collecive secara terpisah alias kalian harus memasang package laravel collective dan bisa melihat documentasinnya di laravelcollective.com.
Let's get to the bussiness, gubrak .... hehehe !!! Pertama-tama kalian siapkan dulu project laravel versi terbaru, versi yang digunakan pada saat penulis publish artikel ini masih laravel 5.2.
Persiapan
Pertama
Edit composer.json dan tambahkan laravelcollective/html di bagian require.
"require": {
"laravelcollective/html": "5.2.*"
}
Berikutnya update composer dari terminal.<your_path>:~/<your_project_folder>$ composer updateBerikutnya tambahkan provider baru ke array
providers di config/app.php.'providers' => [
// ...
'Collective\Html\HtmlServiceProvider::class',
// ...
],
Dan yang terakhir tambahkan class-class baru ke array classes di file yang sama.'aliases' => [
// ...
'Form' => 'Collective\Html\FormFacade::class',
'Html' => 'Collective\Html\HtmlFacade::class',
// ...
],
KeduaBuat controller baru dengan nama terserah kalian ... Hahahaha ...
<your_path>:~/<your_project_folder>$ php artisan make:controller CollectiveControllerBuka file controller yang barusan kalian buat dan tambahkan baris kode seperti dibawah ini.
public function index()
{
return view('collective');
}
Kemudian edit routing di app/Http/routes.php dan tambahkan routing seperti baris kode dibawah ini.Route::get('collective', [
'uses' => 'CollectiveController@index',
]);
KetigaBuatlah file baru di dalam
resource/views/ dengan nama terserah kalian (lagi???) ... hahaha ..., tapi karena dicontroller kita memanggil file dengan nama collective jadi untuk sementara nama file yang saya buat seperti yang ada di controller. Kemuadian isikan dengan baris kode seperti dibawah ini.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Laravel Collective</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
</div>
</div>
</div>
</body>
</html>
Laravel Collective FormUntuk membuat sebuah form dengan laravel collective harus dimulai dengan pembukaan sebuah form.
{!! Form::open(array('url' => 'foo/bar')) !!}
//
{!! Form::close() !!}
Seperti halnya tag form html biasa, laravel collective juga bisa kita taruh seperti method, class dan lain-lainnya.Secara default method yang digunakan laravel collective adalah method POST. Lihat contoh penggunaannya seperti baris kode dibawah ini.
{!! Form::open(array('url' => 'foo/bar', 'method' => 'put')) !!}
Contoh lengkap penggunaan laravel collective dan letakkan baris kode dibawah ini kedalam file view yang sudah kalian buat tadi.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Laravel Collective</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
.form-horizontal {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-2">
{!! Form::open(array('class' => 'form-horizontal', 'role' => 'form')) !!}
<div class="form-group">
{!! Form::label('name', 'Name', ['class' => 'control-label col-md-3']) !!}
<div class="col-md-9">
{!! Form::text('name', null, ['class' => 'form-control', 'placeholder' => 'write your name']) !!}
</div>
</div>
<div class="form-group">
{!! Form::label('email', 'Email', ['class' => 'control-label col-md-3']) !!}
<div class="col-md-9">
{!! Form::email('email', null, ['class' => 'form-control', 'placeholder' => 'example@email.com']) !!}
</div>
</div>
<div class="form-group">
{!! Form::label('password', 'Password', ['class' => 'control-label col-md-3']) !!}
<div class="col-md-9">
{!! Form::password('password', ['class' => 'form-control', 'placeholder' => 'write your password']) !!}
</div>
</div>
<div class="form-group">
{!! Form::label('date', 'Date', ['class' => 'control-label col-md-3']) !!}
<div class="col-md-9">
{!!Form::date('name', \Carbon\Carbon::now(), ['class' => 'form-control'])!!}
</div>
</div>
<div class="form-group">
{!! Form::label('gender', 'Gender', ['class' => 'control-label col-md-3']) !!}
<div class="col-md-9">
<div class="radio">
<label>{!! Form::radio('gender', 'Male', true) !!} Male</label>
</div>
<div class="radio">
<label>{!! Form::radio('gender', 'Female') !!} Female</label>
</div>
</div>
</div>
<div class="form-group">
{!! Form::label('hobby', 'Hobby', ['class' => 'control-label col-md-3']) !!}
<div class="col-md-9">
<div class="checkbox">
<label>{!! Form::checkbox('hobby') !!} This is my hobby</label>
</div>
<div class="checkbox">
<label>{!! Form::checkbox('hobby') !!} The other hobby</label>
</div>
<div class="checkbox">
<label>{!! Form::checkbox('hobby') !!} The other hobby</label>
</div>
<div class="checkbox">
<label>{!! Form::checkbox('hobby') !!} The other hobby</label>
</div>
</div>
</div>
<div class="form-group">
{!! Form::label('size','Size' , ['class' => 'control-label col-md-3']) !!}
<div class="col-md-9">
{!! Form::select('size', array('L' => 'Large', 'S' => 'Small'), null, ['class' => 'form-control','placeholder' => 'Pick a size...']) !!}
</div>
</div>
<div class="form-group">
{!! Form::label('file','File' , ['class' => 'control-label col-md-3']) !!}
<div class="col-md-9">
{!! Form::file('image', ['class' => 'form-control']) !!}
</div>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
{!! Form::submit('Click Me!', ['class' => 'btn btn-primary']) !!}
</div>
</div>
{!! Form::close() !!}
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>