Tutorial CRUD Laravel Livewire SPA #5 : Membuat Component Livewire - Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara membuat component di Laravel Livewire.
Laravel Livewire menggunakan konsep component, konsep ini akan mempermudah para developer/programmer dalam mengembangkan suatu aplikasi, sepeti halnya framework JavaScript seperti Vue Js, React Js mereka juga menerapkan konsep component.
Pada tutorial kali ini kita akan membuat beberapa component sekaligus, dimana component ini nanti kita akan gunakan sebagai praktek di aplikasi kita.
Langkah 1 - Membuat Component
Untuk membuat component di Laravel Livewire, silahkan teman-teman jalankan perintah dibawah ini :
php artisan make:livewire post.index
Jika berhasil, maka kita akan mendapatkan 2 file, yaitu Component & View, yang mana akan secara otomatis dibuatkan di dalam folder app/Http/Livewire/Post/Index.php & resources/views/livewire/post/index.php
Component di atas nanti akan kita gunakan untuk menampilkan data dari database, selanjutnya kita akan buat component lagi untuk proses insert & update data.
Silahkan teman-teman jalankan perintah dibawah ini :
php artisan make:livewire post.create
php artisan make:livewire post.edit
Maka sekarang jika teman-teman lihat kurang lebih struktur foldernya seperti berikut ini :
app
|── Http
|── Livewire
|── Post
|── Create.php
|── Edit.php
|── Index.php
resources
|── views
|── layouts
|── livewire
|── post
|── create.php
|── edit.php
|── index.php
|── welcome.blade.php
Langkah 2 - Menambahkan Route
Setelah kita berhasil membuat component di Laravel Livewire, selanjutnya kita akan menambahkan sebuah route di aplikasi kita.
Silahkan teman-teman buka file routes/web.php silahkan ganti semua kodenya menjadi seperti berikut ini :
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::livewire('/', 'post.index')->name('post.index');
Route::livewire('/create', 'post.create')->name('post.create');
Route::livewire('/edit/{id}', 'post.edit')->name('post.edit');
Oke, sekarang jika teman-teman jalankan aplikasinya, maka teman-teman akan menemukan tampilan blank karena di dalam template component kita belum memberikan apapun.
Di artikel selanjutnya kita semua akan belajar bagaimana cara menampilkan data dari database menggunakan Laravel Livewire menggunakan component.
SOURCE CODE
Untuk teman-teman yang ingin mengunduh source codenya : https://github.com/maulayyacyber/CRUD-Laravel-Livewire-SPA
KESIMPULAN
Pada tutorial kali ini kita semua telah belajar bagaimana cara membuat component baru di Laravel Livewire & kita juga belajar menambahkan route baru untuk aplikasi kita.
Jika teman-teman ada pertanyaan atau kendala saat mencoba, silahkan teman-teman bisa bertanya melalui kolom komentar dibawah artikel ini.
Terima Kasih