Sebelum membuat component, sebaiknya kita install Laravel Livewire terlebih dahulu.
Jika sudah, sekarang kita bisa membuat component baru dengan 3 cara yang akan saya jelaskan di bawah ini.
Cara Pertama dalam Membuat Component
php artisan make:livewire post-index

… dengan perintah di atas kita akan mendapatkan 2 buah file, yaitu:
app/Http/Livewire/PostIndex.php resources/views/livewire/post-index.blade.php
Kedua file tersebut dapat kita gunakan sebagai controller maupun viewnya.
Pada file PostIndex.php
ini adalah tempat kita mengatur proses, database dan yang berhubungan dengan proses.
… di dalamnya terdapat function render() yang sudah tersedia untuk mengirimkan data ke post-index.blade.php
atau kita juga bisa membuat function lainnya.
Cara Kedua dalam Membuat Component
Kadang-kadang kita butuh merapikan file agar lebih tertata.
… untuk itu, kita bisa menyusun file berdasarkan folder saat membuat component.
Caranya dengan menambahkan titik (.).
Perhatikan contoh berikut:
php artisan make:livewire post.create
Perhatikan gambar berikut:

Kita bisa lihat terdapat 2 buat file yang berada di dalam folder post.
… ini sangat berguna agar susunan folder lebih tertata rapi dan memudahkan dalam pengembangan.
Cara Ketiga dalam Membuat Component
Cara terakhir dapat digunakan apabila kita hanya ingin menginstall bagian prosesnya saja tanpa .blade.php
.
Ini disebut sebagai inline component.
Caranya cukup ketik perintah berikut ini melalui terminal:
php artisan make:livewire post-detail --inline
Hasilnya:

Contoh Program Sederhana dengan Component di Laravel Livewire
Sekarang kita masuk ke bagian terpenting pada tutorial kali ini, yaitu membuat contoh program.
Step 1 : Install Laravel Livewire
Silahkan install Laravel Livewire terlebih dahulu melalui tutorial yang sudah saya tulis sebelumnya.
Step 2 : Buat Component Baru
Sebagai contoh, silahkan buat component baru dengan perintah berikut ini:
php artisan make:livewire example

Step 3 : Buat Route Baru
Tambahkan route di bawah ini pada file routes/web.php
:
Route::livewire('/example', 'example');
Step 4 : Modifikasi Component Example
Buka file app/Http/Liveware/Example.php
dan cobalah untuk memodifikasinya menjadi seperti berikut ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?php namespace App\Http\Livewire; use Livewire\Component; class Example extends Component { public function render() { $kalimat = "Selamat datang di Laravel Liveware" ; return view( 'livewire.example' , compact( 'kalimat' )); } } |
Step 5 : Modifikasi File View
Sekarang buka file resources/views/livewire/example.blade.php
dan kita modifikasi menjadi seperti ini:
1 2 3 | <div> {{ $kalimat }} </div> |
Step 6: Jalankan Laravel
Ketik perintah php artisan serve
untuk menjalankan file project laravel kita.
Hasilnya:
Selamat datang di Laravel Liveware
Komentar
Posting Komentar