Belajar Laravel Livewire : Menambahkan Data Tanpa Reload Halaman

Assalamualaikum Warohmatulloh Wabarokatuh, setelah menampilkan data dengan Laravel Livewire. Sejauh ini belum kita temukan bagian istimewa dari Laravel Livewire. Sekarang kita lanjutkan ke proses menambahkan data tanpa reload dan disini salah satu istimewanya Livewire.

Membuat Komponen StudentCreate

Oke, pertama mari kita buat komponen baru dengan nama StudentCreate.

php artisan livewire:make StudentCreate

Setelah komponen berhasil dibuat, mari kita buat kode tampilan form untuk menambahkan nama siswa di file resources/views/livewire/student-create.blade.php.

<div class="mb-4">
    <form action="">
        <div class="form-group">
            <label for="name">Student Name</label>
            <input type="text" name="name" class="form-control">
        </div>

        <button type="submit" class="btn btn-primary">Add</button>
    </form>
</div>

Setelah itu, kita tampilkan komponen student-create ke dalam viewstudent.blade.php.

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Student</div>

                <div class="card-body">
                    <livewire:student-create>
                    <livewire:student-index>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Atau jika kawan kawan menggunakan versi dibawah versi 7, gunakan kode ini.

@livewire('student-create')

Maka akan tampil seperti gambar di bawah ini saat kita buka halamannya.

Sekarang pada class StudentCreate tambahkan properti name dengan visibility public. Dan tambahkan sebuah method dengan nama addStudent() diikuti fungsi untuk menambahkan data.

<?php

namespace App\Http\Livewire;

use App\Student;
use Livewire\Component;

class StudentCreate extends Component
{
    public $name;

    public function addStudent()
    {
        Student::create(['name' => $this->name]);
    }

    public function render()
    {
        return view('livewire.student-create');
    }
}

Ketika kita coba untuk menambahkan data pada form, tidak akan terjadi apapun hanya url yang menampilkan query string ?name=namamu. Hal ini karena kita belum menentukan aksi pada form kita. Kita bisa hapus atribut action="" pada form kita dan tambahkan wire:submit.prevent="addStudent" pada file resources/views/livewire/student-create.blade.php atau bisa dilihat kode di bawah ini.

<form wire:submit.prevent="addStudent">

Error Mass Assignable

Kemudian refresh halamannya dan coba tambahkan data lagi, DORR!!! ketemu error ya :p. Ini yang kawan kawan sering kelupaan biasanya, termasuk saya juga sih haha.

Yaap, error mass assignable ini sering kita temui gara gara lupa menambahkan properti $fillable pada model. Sekarang tambahkan kode ini di model Student.

protected   $fillable = ['name'];

atau

protected   $guarded = [];

Kawan kawan bebas gunakan yang mana saja, untuk $fillable adalah kita definisikan field apa saja yang boleh diisi secara masal. Dalam kasus ini menggunakan method create(). Sedangkan untuk $guarded adalah kita mendefinisikan field mana saja yang tidak boleh diisi secara masal. Jika nilainya kita kosongkan maka semua field bisa diisi secara masal.

Error Data yang Dikirim Tidak Masuk

Kemudian coba refresh halaman lagi dan tambahkan data kembali, UPPSS! masih error kawan. Error ini karena data tidak boleh kosong. Lho kok bisa kosong? kan semuanya sudah lengkap & benar?

Nah disini bedanya Livewire untuk mengirim data dari form kita harus menambahkan wire:model="nama-field" pada input. Mungkin yang familiar dengan VueJs kenal dengan v-model. Langsung saja kita tambahkan pada input yang kita miliki.

<input type="text" name="name" wire:model="name" class="form-control">

Setelah itu refresh dan coba tambahkan data, YESS!!! sudah tidak ada error, tapi kita bisa lihat jika pada kolom input masih ada nama yang baru kita tambahkan. Selain itu, data yang kita tambahkan tidak muncul di bawah, kita harus refresh lagi dan akan muncul.

Menambahkan Data Tanpa Reload Halaman

Oke, ini adalah bagian penting dari proses panjang ini haha. Ya, kita bisa menambahkan data tanpa reload halaman dengan Livewire.

Pertama tambahkan kode $this->name=""; pada method addStudent() untuk mengosongkan nilai pada input. Kemudian tampung proses create data ke dalam sebuah variabel, misal $student. Dan yang terakhir setelah proses create tambahkan kode di bawah ini.

$this->emit('studentAdded'); 

Jadi kode pada method addStudent() pada komponen StudentCreate seperti ini.

public function addStudent()
{
    $student = Student::create(['name' => $this->name]);

    $this->emit('studentAdded');

    $this->name = '';
}

Fungsi dari method emit() adalah untuk mentrigger event, parameter yang dikirim adalah nama method / listener yang akan dijalankan. Dalam kasus ini kita akan listen di komponen StudentIndex. Agar pada komponen StudentIndex listen pada event, kita harus menambahkan properti $listeners dan method sesuai nama yang kita trigger.

<?php

namespace App\Http\Livewire;

use App\Student;
use Livewire\Component;

class StudentIndex extends Component
{
    protected $listeners = [
        'studentAdded',
    ];

    public function studentAdded()
    {
        # code...
    }

    public function render()
    {
        return view('livewire.student-index',  [
            'students' => Student::latest()->get(),
        ]);
    }
}

Ketika kita menambahkan data dan menjalankan emit('studentAdded') kemudian pada komponen StudentIndex kita listen pada method tersebut, maka Livewire akan merender ulang komponen StudentIndex.

Dan ketika kita coba tambahkan data, VOILAAA!!! Nggak pake reload halaman cuy :p. kita kode semua dengan PHP loh ini, jadi enak banget kan buat kita yang programmer Laravel dan pengen bikin UI yang interaktif.

Sekian untuk pembuatan proses menambahkan data tanpa reload menggunakan Livewire, selanjutnya kita akan membuat validasi form dengan Livewire.

Wassalamualaikum Warohmatulloh Wabarokatuh.