Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Tutorial Lengkap Membuat Component di Laravel Livewire

1 min read

Tutorial Lengkap Cara Membuat Component di Laravel Livewire

Jika website kita ingin lebih powerfull, maka mempelajari component di Laravel Livewire adalah salah satu hal yang wajib.

Kenapa wajib?

Bayangkan … kamu ingin membangun rumah tetapi tidak memiliki pasir, batako, semen dan alat bangunan lainnya.

Tentu sudah dipastikan rumah tersebut tidak akan pernah selesai dibangun.

Begitu juga di Laravel Livewire.

Component di Laravel Livewire saya ibaratkan seperti puing-puing atau alat bantu dalam membuat website berbasis Laravel.

Oleh karena itu kita perlu tahu component aja saja yang ada di dalam Laravel Livewire.

Mari kita mulai …

Cara Membuat Component Baru di Laravel Livewire

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 
Tahap pertama dalam membuat component di Laravel Livewire

… 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:

Tahap kedua dalam membuat component di Laravel Livewire

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:

Tahap ketiga dalam membuat component di Laravel Livewire

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:

<?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:

<div>
    {{ $kalimat }}
</div>

Step 6: Jalankan Laravel

Ketik perintah php artisan serve untuk menjalankan file project laravel kita.

Hasilnya:

Selamat datang di Laravel Liveware 

Akhir Kata

Demikianlah tutorial lengkap cara membuat component di Laravel Livewire.

… tapi jangan puas dulu.

Sebab ditutorial berikutnya kita akan belajar merender component.

Jika ada pertanyaan seputar materi ini, silahkan tanyakan di kolom komentar.

Semoga bermanfaat dan selamat belajar …

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

5 Replies to “Tutorial Lengkap Membuat Component di Laravel Livewire”

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.