Tutorial CRUD Laravel Livewire SPA #8 : Edit & Update Data ke Database - halo teman-teman semuanya, pada artikel kali ini kita semua akan belajar bagaimana cara membuat proses edit & update data ke dalam database di Laravel Livewire.
Disini kita juga akan menggunakan component yang sebelumnya sudah kita buat, dan kita juga akan membuat function update di dalam component tersebut. langsung saja kita mulai.
Langkah 1 - Component Post Edit
Silahkan teman-teman buka file app/Http/Livewire/Post/Edit.php dan silahkan teman-teman ubah kodenya menjadu seperti berikut ini :
<?php
namespace App\Http\Livewire\Post;
use App\Post;
use Illuminate\Http\Request;
use Livewire\Component;
class Edit extends Component
{
/**
* define public variable
*/
public $postId;
public $title;
public $content;
/**
* mount or construct function
*/
public function mount($id)
{
$post = Post::find($id);
if($post) {
$this->postId = $post->id;
$this->title = $post->title;
$this->content = $post->content;
}
}
/**
* update function
*/
public function update()
{
$this->validate([
'title' => 'required',
'content' => 'required',
]);
if($this->postId) {
$post = Post::find($this->postId);
if($post) {
$post->update([
'title' => $this->title,
'content' => $this->content
]);
}
}
//flash message
session()->flash('message', 'Data Berhasil Diupdate.');
//redirect
return redirect()->route('post.index');
}
public function render()
{
return view('livewire.post.edit');
}
}
Jika teman-teman perhatikan, diatas kita menambahkan beberapa blok kode, diantaranya kita membuat 3 public varable, kemudian membuat function mount & function update.
/**
* define public variable
*/
public $postId;
public $title;
public $content;
Diatas kita deklarasikan 3 public variable, dimana variable-variable ini nanti akan kita isi dengan data yang kita dapatkan dari database lewat function mount.
/**
* mount or construct function
*/
public function mount($id)
{
$post = Post::find($id);
if($post) {
$this->postId = $post->id;
$this->title = $post->title;
$this->content = $post->content;
}
}
Untuk function mount diatas, jika teman-teman sebelumnya pernah belajar Vue Js, ini adalahbisa disebut function yang sama dengan yang di Vue Js.
Function mount ini akan otomatis dijalankan ketika component tersebut di panggil, atau kalau di OOP biasanya adalah function constructor.
Di dalam function mount ini kita melakukan sebuah Eloquent kedalam table posts dengan id yang kita dapatkan dari parameter URL aplikasi kita.
Kemudian kita juga membuat function update, function ini kita gunakan untuk mengupdate data sesuai dengan inputan yang kita masukkan di dalam form.
Langkah 2 - Membuat From Edit Post di View
Selanjutnya kita akan membuat form dimana form ini akan menampilkan data yang akan kita edit, data ini kita dapatkan dari function mount dan kita render ke dalam view.
Silahkan teman-teman buka file resources/views/livewire/post/edit.php dan ubahlah kodenya menjadi seperti berikut ini :
<div>
<div class="card">
<div class="card-body">
<form wire:submit.prevent="update">
<input type="hidden" wire:model="postId">
<div class="form-group">
<label>TITLE</label>
<input type="text" wire:model="title" class="form-control @error('title') is-invalid @enderror" placeholder="Masukkan Title">
@error('title')
<span class="invalid-feedback">
{{ $message }}
</span>
@enderror
</div>
<div class="form-group">
<label>KONTEN</label>
<textarea wire:model="content" class="form-control @error('content') is-invalid @enderror" rows="4" placeholder="Masukkan Konten"></textarea>
@error('content')
<span class="invalid-feedback">
{{ $message }}
</span>
@enderror
</div>
<button type="submit" class="btn btn-primary">UPDATE</button>
</form>
</div>
</div>
</div>
Diatas, kita tidak hanya menampilkan data di form saja, disini kita juga memasang validation disetiap inputannya.
Langkah 3 - Uji Coba Aplikasi
Sekarang teman-teman bisa mencoba meng-edit beberapa data, maka teman-teman otomatis akan menggunakan Single Page Application, jadi kita tidak perlu reload page untuk meng-edit data tesebut.
Kurang lebih seperti berikut ini tampilannya :
Jika post berhasil terupdate, kurang lebih seperti berikut ini :
SOURCE CODE
Untuk teman-teman yang ingin mengunduh source codenya : https://github.com/maulayyacyber/CRUD-Laravel-Livewire-SPA
KESIMPULAN
Pada tutorial kali ini kita semua telah belajar bagaimana membuat function edit & update data ke dalam database di Laravel Livewire.
Jika teman-teman ada pertanyaan atau kendala saat mencoba, silahkan teman-teman bisa bertanya melalui kolom komentar dibawah artikel ini.
Terima Kasih