Asrofil Vault

6. Forms

3 min read

tech

Table of Content

Introduction

Karena forms backbone nya aplikasi web, Livewire menyediakan utilitas untuk hal tersebut.

Submit Form

Mari kita mulai dengan melihat form yang sangat sederhana di CreatePost. Formulir ini akan memiliki dua input teks sederhana dan tombol kirim, serta beberapa kode di backend untuk mengelola status dan pengiriman formulir:

class CreatePost extends Component{
	public $title = '';
	public $content = '';
 
	public function save()
	{
		Post::create(
			$this->only(['title', 'content'])
		);
 
		return $this->redirect('/posts')->with('status', 'Post successfully created.');
	}
}

Untuk views

<form wire:submit="save">
	<input type="text" wire:model="title">
	<input type="text" wire:model="content">
	<button type="submit">Save</button>
</form>

$this->only() membuat code lebih sederhana dan mudah dibaca.

Validation

Untuk menghindari nilai yg tidak diinginkan masuk. Baiknya gunakan Validation.

Livewire membuat validasi form dengan cara #[Validate] di atas properti yang ingin kita validasi. Setelah properti memiliki atribut #[Validate] yang melekat padanya, aturan validasi akan diterapkan ke nilai properti setiap kali properti tersebut diperbarui di sisi server.

<?php
 
namespace App\Livewire;
 
use App\Models\Post;
use Livewire\Component;
use Livewire\Attributes\Validate;
 
class CreatePost extends Component
{
    #[Validate('required')]
    public $title;
 
    #[Validate('required')]
    public $content;
 
    public function save()
    {
        $this->validate();
 
        Post::create(
            $this->only(['title','content'])
        );
 
        return redirect()->to('/posts');
    }
}

Jangan lupa load class Validate use Livewire\\\\Attributes\\\\Validate;. Uniknya cara menggunakan validasi itu dengan koding seperti #[Validate('required')] Ini membuat kodingan kita lebih clean atau sederhana.

Untuk views :

<div>
    <form wire:submit="save">
        <label for="title">Title:</label>
        <input type="text" class="form-control" id="title" wire:model="title">
        @error('title')<p class="text-danger">{{ $message }}</p>@enderror
        <label for="content">Content:</label>
        <textarea id="content" class="form-control mt-3" wire:model="content"></textarea>
        @error('content')<p class="text-danger">{{ $message }}</p>@enderror
        <button type="submit" class="btn btn-primary mt-3">Save</button>
    </form>
</div>

Resetting Form

Jika kamu menggunakan objek form,mungkin ingin mengatur ulang formulir setelah dikirimkan. Hal ini dapat dilakukan dengan memanggil metode reset() : Tambahkan kode $this->reset(); sebagai pengganti return redirect().

Real Time Validation

Terkadang, kita mungkin ingin menampilkan form validation saat pengguna mengisi formulir. Dengan cara ini, mereka diberitahu sejak dini bahwa ada sesuatu yang salah daripada harus menunggu sampai seluruh formulir diisi.

Livewire menangani hal semacam ini secara otomatis. Dengan menggunakan .live atau .blur pada wire:model. Cukup gunakan kode berikut :

<input type="text" class="form-control" id="title" wire:model.blur="title">
@error('title')<p class="text-danger">{{ $message }}</p>@enderror

Live Update Form

Kita akan mencoba buat update data mulai dari route

Route::get('/posts/update/{id}', UpdatePost::class);

Component nya :

<?php
 
namespace App\Livewire;
 
use App\Models\Post;
use Livewire\Component;
use Livewire\Attributes\Validate;
 
class UpdatePost extends Component
{
    public $post;
    #[Validate('required')]
    public $title;
    #[Validate('required')]
    public $content;
 
    public function mount($id)
    {
        $this->post = Post::find($id);
        $this->title = $this->post->title;
        $this->content = $this->post->content;
    }
 
    public function update()
    {
        $this->post->title = $this->title;
        $this->post->content = $this->content;
        $this->post->save();
 
        return redirect()->with('success','Berhasil memperbarui data!');
 
    }
 
    public function render()
    {
        return view('livewire.update-post');
    }
}

Untuk viewsnya :

<div>
    @if(session('success'))
    <p>{{ session('success') }}</p>
    @endif
    <form wire:submit="update">
        <label for="title">Title:</label>
        <input type="text" class="form-control" id="title" wire:model.live="title">
        @error('title')<p class="text-danger">{{ $message }}</p>@enderror
        <label for="content">Content:</label>
        <textarea id="content" class="form-control mt-3" wire:model.live="content"></textarea>
        @error('content')<p class="text-danger">{{ $message }}</p>@enderror
        <button type="submit" class="btn btn-success mt-3">Update</button>
    </form>
</div>

Live update intinya kita menggunakan wire:model.live="title"

Date : 21-02-2024

Graph View

Recent notes