Tanggal :4 Agustus 2020
Menambahkan Data Tanpa Reload Halaman Dengan Livewire

Belajar Laravel Livewire : Menambahkan Data Tanpa Reload Halaman

Artikel ini bagian ke 5 dari 8 seri dalam artikel berseri "Belajar Laravel Livewire"

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.

Tampilan setelah ditambahkan komponen student-create.

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.

Error Mass Assignable Laravel
Error mass assginable.

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?

Error data tidak terkirim dengan Livewire
Error data null.

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.

Berhasil menambahkan data dengan Livewire
Sukses menambahkan data.

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.

Hasil Program

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

Wassalamualaikum Warohmatulloh Wabarokatuh.

Hi Saya Amirul, Saya mengajarkan koding melalui screencast di Kawan Koding, saya juga menulis Artikel di Kawan Koding.

24 Comments

  1. Riyan permadi Reply

    Mas mw tnyak pembeda wire.form.preevent dengan wire.click untuk function add student apa ? Karena setiap saya menggunakan wire form prevent itu Ndak jalan atau Ndak ad reposn mungkin bisa d terangkan ? Terimakasih

  2. Ade Usman Reply

    kalo setelah input data, tapi data nya ga nampil itu gimana ya mas?
    saya udah tambahin fitur live search pake livewire, pas data yang baru diinput saya cari pake live search ternyata udah ada, dan baru muncul setelah di cari atau reload page.

  3. Dita Reply

    Hallo Mas, Mau Tanya

    Kalau penerapannya pda sebuah crud transaksi dimana terdapat detail dari sebuah transaksi dengan menggunakan teknik ini bagaimana ya ?

    semoga ada tutorialnya 🙂

  4. ibra Reply

    mas scriptnya sudah saya coba kembangkan lagi
    saya coba insert data lewat modal bootstrap dlu, tpi kok gk bisa di insert y mas ?

  5. Ferdian Reply

    ini error ketika saya menjalankan lewat localhost “laravel/public”
    Uncaught ReferenceError: Livewire is not defined

    Tetapi jika menggunakan php artisan serve tidak ada masalah.. dan Create berjalan dengan normal.. ada solusinya kah mas

    Terima Kasih

        1. Muhammad Amirul Ihsan Post author Reply

          iya maksudnya pakai serve aja :), karena kalau pakai public itu akan mengubah path yang diakses proyek laravel. dan waktu di hosting / server cara itu ga digunakan :). kalau emang mau tiap jalanin proyek ga perlu php artisan serve, coba pelajari vhost atau pakai laravel valet.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *