🎯 `Tujuan`

Memberikan panduan langkah demi langkah dalam mengimplementasikan Laravel Livewire 3.
Mempermudah pembuatan komponen dinamis dalam aplikasi.
Meningkatkan efisiensi pengembangan aplikasi dengan fitur real-time tanpa kompleksitas JavaScript.

⏰ `Konteks`

Panduan ini untuk pengembang yang menggunakan Laravel dan ingin membangun aplikasi web interaktif dengan pendekatan full-stack. Livewire 3 memungkinkan pembuatan antarmuka yang dinamis di Laravel, memadukan kenyamanan backend dengan frontend yang interaktif.

🪵 `Hal yang Diperlukan`

Laravel (versi terbaru).
Composer.
Node.js.

📹 `Video Tutorial`

📋 `Langkah-Langkah`

STEP 1: Instalasi Laravel dan Livewire
- Install Laravel Baru
  
  Di terminal, buat proyek Laravel baru dengan perintah berikut:
```
bash
Copy code
composer create-project laravel/laravel nama-project
```
- Masuk ke Projek Laravel dan Install Livewire
  
  Masuk ke direktori proyek Anda dan tambahkan Livewire ke proyek:
```
bash
Copy code
cd nama-project
composer require livewire/livewire
```
- Tambahkan Livewire ke Template Layout
  
  Edit template Blade untuk menyertakan @livewireStyles dan @livewireScripts. Tambahkan di file layout utama Anda, misalnya resources/views/layouts/app.blade.php:
```
html
Copy code
<!DOCTYPE html>
<html>
<head>
    <title>{{ config('app.name') }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
</head>
<body>
    {{ $slot }}

    @livewireScripts
</body>
</html>
```
STEP 2: Membuat Komponen Dasar
- Buat Komponen Livewire
  
  Jalankan perintah berikut untuk membuat komponen Livewire dasar:
```
bash
Copy code
php artisan make:livewire Counter
```
- Edit Logika Komponen
  
  Buka file app/Livewire/Counter.php dan tambahkan logika dasar untuk komponen Counter yang bisa menambah dan mengurangi nilai:
```
php
Copy code
<?php

namespace App\\Livewire;

use Livewire\\Component;

class Counter extends Component
{
    public $count = 1;

    public function increment()
    {
        $this->count++;
    }

    public function decrement()
    {
        $this->count--;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}
```
- Buat Template Komponen di Blade View
  
  Tambahkan template HTML untuk komponen di resources/views/livewire/counter.blade.php:
```
html
Copy code
<div>
    <h1>{{ $count }}</h1>

    <button wire:click="increment">+</button>

    <button wire:click="decrement">-</button>
</div>
```
- Tambahkan Route untuk Mengakses Komponen
  
  Untuk mengakses komponen Counter, tambahkan route di web.php:
```
php
Copy code
use App\\Livewire\\Counter;

Route::get('/counter', Counter::class)->name('counter');
```
- Publish Config Livewire
  
  Untuk mengkonfigurasi Livewire sesuai kebutuhan proyek, jalankan perintah berikut untuk mempublikasikan konfigurasi:
```
bash
Copy code
php artisan livewire:publish --config
```
- Edit Konfigurasi Layout Livewire
  
  Pada config/livewire.php, sesuaikan layout default menjadi layout utama Anda:
```
php
Copy code
'layout' => 'layouts.app',
```
- Buat Layout dengan Artisan
  
  Laravel Livewire menyediakan cara cepat untuk mengatur layout menggunakan Artisan:
```
bash
Copy code
php artisan livewire:layout
```

Final Checkpoint

Pastikan langkah-langkah berikut telah berhasil dijalankan:

Instalasi Laravel: Laravel terpasang dengan benar.
Integrasi Livewire: Livewire telah terinstal dan dikonfigurasi dengan benar dalam proyek.

🎯 Tujuan

⏰ Konteks

🪵 Hal yang Diperlukan