Membuat Form Cepat dan Mudah pada Project Laravel dengan Laravel Collective

7 min readFeb 8, 2021

Assalamualaikum wr.wb
Halo semuanya, Pada kesempatan kali ini saya akan share mengenai laravel lagi, cukup lama saya hiatus menulis laravel. Ilmu yang saya bagi pada kesempatan kali ini mengenai membuat form dengan cepat dan mudah pada project laravel, biasanya kita membuat form dengan menulis html, namun jika kita menggunakan laravel collective akan otomatis dibuatkan.

Pertama-tama kita buka website laravel collective, dan buka dokumentasi resminya.

Kemudian pilih html, karena kita akan menggunakan laravel collective untuk memanipulasi html

Nah, kemudian kita persiapkan project laravel terlebih dahulu. dengan perintah

composer create-project --prefer-dist laravel/laravel html

Setelah membuat projects laravel, kemudian kita install laravel collective dengan perintah berikut :

composer require laravelcollective/html

Maka akan memproses seperti gambar dibawah ini

Selanjutnya, buka config/app.php dan tambahkan provider dan aliases seperti berikut :

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

Setelah itu kita sudah bisa menggunakan library laravel collective ini, kita akan buat CRUD menggunakan laravel collective. Kita buka project laravel dengan perintah

php artisan serve

Maka akan tampilan akan seperti ini

Oke, sekarang kita buat databasenya terlebih dahulu, kalian boleh membuat database lewat phpmyadmin, namun pada kesempatan kali ini saya akan membuat database lewat cmd atau command line. Nama database yang saya pakai adalah collective, temen temen boleh memberi nama lain. Perintah dapat dilihat pada gambar dibawah ini.

Jangan lupa kita ganti file .env, nama database seperti dibawah ini

Lalu kita akan buat model dan migration, untuk model dan migration kita akan menggunakan model user dari laravel. Jadi kita tinggal melakukan migrate dengan perintah dibawah ini

php artisan migrate

Maka hasilnya seperti gambar dibawah ini

Selanjutnya kita membuat controller dengan nama UserController dengan perintah

php artisan make:controller UserController --resource

Sekarang kita buka routes/web.php, untuk membuat route terlebih dahulu, karena kita akan membuat CRUD maka kita dapat menuliskan code seperti dibawah ini

use App\Http\Controllers\UserController;
Route::resource('/user', UserController::class);

Sekarang kita buka UserController dan tambahkan code seperti dibawah ini pada method index

$user = User::all();return view('user.index', ['user' => $user]);

Jangan lupa menambahkan model user agar dapat berjalan

use App\Models\User;

Sekarang kita akan membuat app.blade.php untuk membuat template viewnya. Kita akan menggunakan bootstrap 5 untuk tampilannya, tulis code seperti dibawah ini

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Collective</title>
</head>
<body>
@yield('content')
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>-->
</body>
</html>

Dan kita buat, view index.blade.php didalam folder user, tulis code seperti dibawah ini untuk menampilkan data.

@extends('app')
@section('content')
<div class="container">
<div class="row">
<div class="col">
<h1>Data User</h1>
<a href={{ url('user/create')}} class="btn btn-primary"> Tambah Data </a>
<table class="table">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Nama</th>
<th scope="col">Email</th>
<th scope="col">Aksi</th>
</tr>
</thead>
<tbody>
@forelse ($user as $item)
<tr>
<th scope="row">{{ $loop->iteration }}</th>
<td>{{ $item->name }}</td>
<td>{{ $item->email }}</td>
<td>
<div class="d-flex justify-content-between">
<a href="{{ url('user/'.$item->id.'/edit') }}" class="btn btn-success">Edit</a>
<a href="{{ url('user/'.$item->id) }}" class="btn btn-info">Detail</a>
{!! Form::open(['url' => 'user/'.$item->id, 'method' => 'delete'])!!}
<button type="submit" class="btn btn-danger">Hapus</button>
{!! Form::close() !!}
</div>
</td>
</tr>
@empty
<h1 class="text-danger">Data kosong</h1>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
@endsection

Selanjutnya kita akan mengisi data menggunakan fitur artisan tinker laravel, buat yang belum familiar boleh mengisi lewat phpmyadmin atau ikuti tutorial ini saja. Ketikan perintah seperti dibawah ini

php artisan tinkerApp\Models\User::create()->count(3)->create()

Hasilnya akan seperti gambar dibawah ini

Dan kita buka project kita di browser maka akan tampil seperti ini

Selanjutnya kita akan membuat halaman create, nah disini kita akan menggunakan laravel collective. Terlebih dahulu kita kembali ke UserController dan menambahkan code seperti dibawah ini pada method create

return view('user.create');

Sekarang kita akan membuat view untuk create dengan nama create.blade.php didalam folder view/user, tulis code seperti dibawah ini

@extends('app')
@section('content')
<div class="container pt-5">
<div class="row">
<div class="col">
<h1>Input Data</h1>
</div>
</div>
<div class="row">
<div class="col">
{!! Form::open(['url' => 'user','method' => 'post']) !!}
<div class="form-group">
{{ Form::label('name', null, ['class' => 'control-label']) }}
{{ Form::text('name', null, array_merge(['class' => 'form-control', 'placeholder' => 'Name'])) }}
</div>
@error('name')
<div class="alert alert-danger">{{ $message }}</div>
@enderror
<div class="form-group">
{{ Form::label('email', null, ['class' => 'control-label']) }}
{{ Form::email('email', null, array_merge(['class' => 'form-control', 'placeholder' => 'Email'])) }}
</div>
@error('email')
<div class="alert alert-danger">{{ $message }}</div>
@enderror
<div class="form-group">
{{ Form::label('password', null, ['class' => 'control-label']) }}
{{ Form::text('password', null, array_merge(['class' => 'form-control', 'placeholder' => 'Password'])) }}
</div>
@error('password')
<div class="alert alert-danger">{{ $message }}</div>
@enderror
<button type="submit" class="btn btn-primary mt-5">Submit</button>{!! Form::close() !!}
</div>
</div>
</div>
@endsection

Sekarang kita akan membuat method store untuk memasukkan data di ke database, code seperti dibawah ini

$validate = $request->validate([
'name' => 'required',
'email' => 'required|unique:users,email',
'password' => 'required'
]);
$validate['password'] = Hash::make($request->password);
User::create($validate);
return redirect('user');

Jangan lupa menambahkan use Hash agar dapat menggunakan fungsi Hash

use Hash;

kita akan coba isi data dengan data seperti dibawah ini

ketika kita sumbit maka, akan kembali ke halaman http://127.0.0.1:8000/user/ dan data yang sudah kita submit tadi

Sekarang kita kan buat form untuk edit, kembali ke UserController dan cari method edit dan tambahkan code seperti dibawah ini :

$user = User::findOrFail($id);return view('user.edit', ['user' => $user]);

Dan kita buat view pada folder user dan buat file edit.blade.php, dengan code seperti dibawah ini

@extends('app')
@section('content')
<div class="container pt-5">
<div class="row">
<div class="col">
<h1>Edit Data</h1>
</div>
</div>
<div class="row">
<div class="col">
{!! Form::model($user, ['url' => 'user'.$user->id,'method' => 'put']) !!}
<div class="form-group">
{{ Form::label('name', null, ['class' => 'control-label']) }}
{{ Form::text('name', null, array_merge(['class' => 'form-control', 'placeholder' => 'Name'])) }}
</div>
@error('name')
<div class="alert alert-danger">{{ $message }}</div>
@enderror
<div class="form-group">
{{ Form::label('email', null, ['class' => 'control-label']) }}
{{ Form::email('email', null, array_merge(['class' => 'form-control', 'placeholder' => 'Email'])) }}
</div>
@error('email')
<div class="alert alert-danger">{{ $message }}</div>
@enderror
<div class="form-group">
{{ Form::label('password', null, ['class' => 'control-label']) }}
{{ Form::text('password', null, array_merge(['class' => 'form-control', 'placeholder' => 'Password'])) }}
</div>
@error('password')
<div class="alert alert-danger">{{ $message }}</div>
@enderror
<button type="submit" class="btn btn-primary mt-5">Submit</button>
{!! Form::close() !!}
</div>
</div>
</div>
@endsection

Maka tampilannya akan seperti

Sekarang kita kembali ke UserController lagi dan cari method update, kemudian tambahkan code seperti dibawah ini

$user = User::findOrFail($id);
$validate = $request->validate([
'name' => 'required',
'email' => 'required',
'password' => 'required'
]);
$validate['password'] = Hash::make($request->password);
$user->update($validate);
return redirect('user');

Dan kita coba update data maka data akan terupdate dan kembali ke halaman awal.

Sekarang kita buat halaman detail, kembali ke UserController dan cari method show dan tambahkan code

$user = User::findOrFail($id);
return view('user.show', ['user' => $user]);

Dan kita buat file show.blade.php di dalam folder user. code seperti dibawah ini

@extends('app')
@section('content')
<div class="container pt-5">
<div class="row">
<div class="col">
<h1>Detail {{ $user->name }}</h1>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
Name : {{ $user->name }} <br>
Email : {{ $user->email }}
</div>
</div>
</div>
</div>
</div>
@endsection

Maka tampilannya akan seperti dibawah ini

Sekarang kita akan membuat delete, sekarang kembali ke UserController dan cari method destroy dan tuliskan code

$user = User::findOrFail($id);
$user->delete();
return redirect('user');

Dan sekarang CRUD menggunakan Laravel Collective sudah selesai

Mungkin segitu dulu saja, dan terimakasih :)

Membuat Form Cepat dan Mudah pada Project Laravel dengan Laravel Collective

Written by AlfaRiza

No responses yet