2. Quick Start

tech

Table of Content

• Introduction
• Pre-requisite
• Install
• Membuat Component
• Logic Component
• View
• Register Route
• Membuat Template Layout

Introduction

Pertama kita akan membuat implementasi perhitungan (counter).

Pre-requisite

• Laravel 10 atau diatasnya
• PHP 8.1 atau diatasnya

Install

Silahkan ketik perintah dibawah untuk menginstall Livewire :

composer require livewire/livewire

Note : pastikan bahwa alpine js belum terinstall. Jika sudah, silahkan uninstall dan install kembali ketika livewire sudah diinstall!

Membuat Component

Ketik perintah dibawah untuk membuat component

php artisan make:livewire counter

Otomatis akan dibuatkan 2 file :

• app/Livewire/Counter.php
• resources/views/livewire/counter.blade.php

Logic Component

app/Livewire/Counter.php

<?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');
	}
}

Penjelasan :

• deklarasi public property $count
• method increment untuk menambahkan nilai property $count
• method render() untuk keperluan pemanggilan template.

View

Resources/Livewire/counter.blade.php

<div>
	<h1>{{ $count }}</h1>
	<button wire:click="increment">+</button>
	<button wire:click="decrement">-</button>
</div>

Note : Komponen livewire harus memiliki 1 root. Agar Livewire dapat berfungsi, komponen hanya boleh memiliki satu elemen sebagai rootnya. Jika beberapa elemen root terdeteksi, exception akan dilempar. Disarankan untuk menggunakan elemen div seperti pada contoh. Komentar HTML dihitung sebagai elemen terpisah dan harus ditempatkan di dalam elemen root. Saat merender komponen satu halaman penuh, slot bernama untuk file tata letak dapat ditempatkan di luar elemen root. Ini dihapus sebelum komponen dirender.

Register Route

Routes/web.php

use App\Livewire\Counter;
 
Route::get('/counter', Counter::class);

Membuat Template Layout

Untuk membuat layout ketik perintah dibawah :

php artisan livewire:layout

Otomatis akan dibuatkan 1 file :

• resources/views/components/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>{{ $title ?? 'Page Title' }}</title>
</head>
<body>
	{{ $slot }}
</body>
</html>

Component yg sebelum nya kita buat akan otomatis ter-render di $slot. Perhatikan kode diatas. Kita bisa pakai tanpa load css atau js. Itu karena Livewire 3 dan yang lebih baru secara otomatis memasukkan aset frontend apa pun yang diperlukan.

Kita bisa dengan bebas custom hal tersebut. ASAL pakai $slot

Date : 20-02-2024