Asrofil Vault

10. Nyobain VOLT

3 min read

tech

Table of Content

Introduction

Dari laman resmi nya kita diberitahu bahwa Kita harus benar-benar paham livewire dulu. “Sebelum menggunakan Volt, kami sarankan untuk memahami penggunaan Livewire standar berbasis kelas. Ini akan memungkinkan Anda dengan cepat mentransfer pengetahuan Anda tentang Livewire ke dalam komponen penulisan menggunakan API fungsional Volt.”

Volt adalah functional API yang dibuat untuk Livewire yang mendukung single file component (logika dan tampilan dijadikan satu).

Installation

Ketik perintah ini untuk install :

composer require livewire/volt

Selanjutnya ketik perintah :

php artisan volt:install

Create Component Based

Buat komponen class

php artisan make:volt counter --class

Note : jangan lupa gunakan --class

Hasilnya akan seperti ini :

<?php
 
use Livewire\Volt\Component;
 
new class extends Component {
    //
}; ?>
 
<div>
    //
</div>

Class-based Volt components

Kita bisa menggunakan class ketika ingin menggunakan single-file component Volt. Untuk memulai, tentukan class anonim yang extends ke Livewire\\\\Volt\\\\Component.

Di dalam kelas, Anda dapat memanfaatkan semua fitur Livewire menggunakan sintaksis Livewire tradisional:

<?php
 
use Livewire\Volt\Component;
 
new class extends Component {
	public $count = 0;
 
	public function increment(){
		$this->count++;
	}
}
?>
 
<div>
	<h1>{{ $count }}</h1>
	<button wire:click="increment">+</button>
</div>

Class Attributes

Sama seperti komponen Livewire pada umumnya, komponen Volt mendukung atribut class. Saat menggunakan kelas PHP anonim, atribut kelas harus ditentukan setelah new:

<?php
 
use Livewire\Attributes\{Layout, Title};
use Livewire\Volt\Component;
 
new
#[Layout('layouts.guest')]
#[Title('Login')]
class extends Component{
// ...
}
 
?>

Providing additional view data

Saat menggunakan component class based, tampilan yang dirender adalah templat yang ada dalam file yang sama. Jika perlu meneruskan data tambahan ke tampilan setiap kali dirender, kita dapat menggunakan metode with. Data ini akan diteruskan ke tampilan selain properti publik komponen:

Contoh studi kasus nya :

<?php
 
use Livewire\Volt\Component;
use Livewire\Attributes\{Layout, Title};
use Livewire\WithPagination;
use App\Models\Portfolio;
 
new
#[Layout('components.layouts.app')]
#[Title('Portfolio')]
class extends Component{
    use WithPagination;
 
    public $search;
 
    public function with()
    {
        $portfolios = Portfolio::orderByDesc('created_at')->paginate(5);
        $result = Portfolio::where('title', 'like','%'.$this->search.'%')->orderByDesc('created_at')->paginate(5);
        return [
            'portfolios' => $this->search ? $result : $portfolios
        ];
    }
}
 
?>

Kode diatas contoh kita show data dan searching + paginate.

Full-page components

Kita bisa menggunakan full component dan mendefinisikan di route/web.php :

use Livewire\Volt\Volt;
Volt::route('/users', 'user-index');

API Style

Dengan memanfaatkan API fungsionalitas, kita bisa mendefinisikan logika komponen livewire melalui use function Livewire\Volt. Contohnya :

<?php
 
use function Livewire\Volt\{state, layout};
 
layout('layouts.latihan');
 
state(['count' => 0]);
 
$increment = fn() => $this->count++;
 
?>
 
<div class="container mt-5">
	<div class="row">
		<div class="col-4 mx-auto">
			<p>
			{{ $count }}
			</p>
			<button class="btn btn-primary" wire:click="increment">Add Score</button>
		</div>
	</div>
</div>

Properties

Properti Volt, seperti properti Livewire, dapat diakses dengan mudah di blade. Kita dapat mendefinisikan properti menggunakan fungsi state:

<?php
 
use function Livewire\Volt\{state};
 
state(['count' => 0]);
 
?>
 
<div>
	{{ $count }}
</div>

Mount

Kita bisa menggunakan function mount() Note : jangan lupa load use function Livewire\Volt\{mount}

<?php
 
use function Livewire\Volt\{state, layout, mount};
 
layout('layouts.latihan');
 
state('nama');
 
mount(function(){
	$this->nama = 'Andaru';
});
 
?>

Computed Property

Livewire juga memungkinkan kita menentukan properti computed(), yang dapat berguna untuk fetch data dengan lazy load.

$count = computed(function () {
	return User::count();
});
  • List
    • Action
    • Validation
    • File Uploads
    • URL Query Parameters (searching)
    • Pagination

Date : 12-03-2024

Graph View

Recent notes