Asrofil Vault

3. Components

4 min read

tech

Table of Content

Introduction

Komponen bisa dikatakan sebuah blok dimana berfungsi untuk menggabungkan state dan behavior. Hal tersebut membuat bagian UI yg dapat digunakan kembali(Reuseable).

Membuat Component

Cukup mudah bisa gunakan perintah berikut :

php artisan make:livewire CreatePost

otomatis akan membuat 2 file :

  • App/Livewire/CreatePost.php
  • Resources/views/livewire/create-post.blade.php

Setting Properties

Untuk menambahkan properti ke component Livewire, deklarasikan properti publik di kelas komponen Anda. Misalnya, mari kita buat properti $title di komponen CreatePost:

App/Livewire/CreatePost.php

<?php
namespace App\Livewire;
 
use Livewire\Component;
 
class CreatePost extends Component{
	public $title = 'Post title...';
 
	public function render()
	{
		return view('livewire.create-post');
	}
}

Akses property ke view seperti berikut :

resources/views/livewire/create-post.blade.php

<div>
	<h1>Title: "{{ $title }}"</h1>
</div>

Note : ketika kita deklarasi properti otomatis terbaca di view tanpa harus panggil variable ke dalam view.

Sharing Data ke View

Untuk meneruskan data ke tampilan dalam metode render(), Anda dapat menggunakan metode with() pada instance tampilan. Misalnya, Anda ingin meneruskan nama penulis postingan ke tampilan. Dalam hal ini, penulis postingan adalah pengguna yang saat ini diautentikasi:

<?php
 
namespace App\Livewire;
 
use Illuminate\Support\Facades\Auth;
use Livewire\Component;
 
class CreatePost extends Component
{
    public $title;
 
    public function render()
    {
        return view('livewire.create-post')->with([
            'author' => Auth::user()->name,
        ]);
    }
}

Tambahkan wire:key ketika Looping

Saat melakukan looping data dalam templat Livewire menggunakan @foreach, kita harus menambahkan atribut wire:key.

Tanpa atribut wire:key yang ada dalam loop Blade, Livewire tidak akan dapat mencocokkan elemen lama dengan posisi barunya dengan benar saat loop berubah. Hal ini dapat menyebabkan banyak masalah yang sulit didiagnosis pada aplikasi Anda.

Misalnya, jika Anda melakukan perulangan melalui serangkaian postingan, Anda dapat menyetel atribut wire:key ke ID postingan:

resources/views/livewire/create-post.blade.php

<div>
    <h1>{{ $title }}</h1>
    @foreach($posts as $post)
    <ul wire:key="{{ $post->id }}">
        <li>{{ $post->title }}</li>
        <li>{{ $post->slug }}</li>
    </ul>
    @endforeach
</div>

Menangkap Value ke Properties

Salah satu fitur Livewire yang paling canggih adalah “binding data”: kemampuan untuk secara otomatis menjaga properti tetap sinkron dengan form di halaman.

Mari kita ikat properti $title dari komponen CreatePost ke input teks menggunakan direktif wire:model:

<form>
	<label for="title">Title:</label>
	<input type="text" id="title" wire:model="title">
</form>

Setiap perubahan yang dilakukan pada input teks akan secara otomatis disinkronkan dengan properti $title di komponen Livewire Anda.

Calling Action

<?php
 
namespace App\Livewire;
 
use App\Models\Post;
use Livewire\Component;
 
class CreatePost extends Component
{
    public $title;
    public $content;
 
    public function save()
    {
        $post = Post::create([
            'title' => $this->title,
            'content' => $this->content,
            'slug' => 'ABC'
        ]);
 
        return redirect()->to('/post/create')
             ->with('status', 'Post created!');
    }
 
    public function render()
    {
        return view('livewire.create-post');
    }
}
<div>
    <form wire:submit="save">
        <label for="title">Title:</label>
        <input type="text" class="form-control" id="title" wire:model="title">
 
        <label for="content">Content:</label>
        <textarea id="content" class="form-control mt-3" wire:model="content"></textarea>
        <button type="submit" class="btn btn-primary mt-3">Save</button>
    </form>
</div>

Jadi component sudah termasuk view dan backend nya (lebih rapih).

Render Component

Ada dua cara untuk merender komponen Livewire:

  • Sertakan itu dalam tampilan Blade yang ada
  • Tetapkan langsung ke rute sebagai komponen satu halaman penuh (Sebelumnya sudah dicoba)

Passing Data Into Component

Untuk meneruskan data luar ke komponen Livewire, kita dapat menggunakan atribut pada tag komponen. Ini berguna ketika Anda ingin menginisialisasi komponen dengan data tertentu.

<livewire:create-post title="Initial Title" />
// atau
<livewire:create-post :title="$initialTitle" />

Data yang diteruskan ke komponen diterima melalui mount() sebagai parameter metode. Dalam hal ini, untuk menetapkan parameter $title ke properti, Anda akan menulis metode mount() seperti berikut:

<?php
namespace App\Livewire;
 
use Livewire\Component;
 
class CreatePost extends Component{
	public $title;
 
	public function mount($title = null)
	{
		$this->title = $title;
	}
}

Using Javascript

Ada banyak contoh di mana utilitas Livewire dan Alpine bawaan tidak cukup untuk mencapai tujuan Anda di dalam komponen Livewire Anda. Livewire menyediakan @script dan @asset

@script
<script>
	setInterval(() => {
		$wire.$refresh()
	}, 2000)
</script>
@endscript

Contoh Loading Asset

<div>
	<input type="text" data-picker>
</div>
 
@assets
<script src="<https://cdn.jsdelivr.net/npm/pikaday/pikaday.js>" defer></script>
<link rel="stylesheet" type="text/css" href="<https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css>">
@endassets
 
@script
<script>
	new Pikaday({
		field: $wire.$el.querySelector('[data-picker]')
	});
</script>
@endscript

Date : 20-02-2024

Graph View

Recent notes