- Langkah 1 - Membuat Page Component Livewire untuk Edit Data
- Langkah 2 - Menambahkan Route Edit Data
- Langkah 3 - Uji Coba Edit dan Update Data Post
- Kesimpulan
Halo teman-teman semuanya. Pada artikel sebelumnya, kita telah berhasil menambahkan (insert) data ke dalam database menggunakan Laravel Livewire 4, lengkap dengan validasi, upload file, dan flash message.
Pada artikel kali ini, kita akan melanjutkan ke tahap berikutnya, yaitu edit dan update data ke dalam database menggunakan Livewire 4. Di sini kita akan belajar bagaimana cara menampilkan data lama ke dalam form, melakukan perubahan data, serta menyimpan hasil perubahannya ke database.
Langkah 1 - Membuat Page Component Livewire untuk Edit Data
Silahkan teman-teman jalankan perintah berikut di terminal/CMD dan pastikan berada di dalam root project Laravel:
php artisan make:livewire pages::posts.edit
Perintah di atas akan menghasilkan file resources/views/pages/posts/⚡edit.blade.php.
Setelah itu, silahkan buka file tersebut dan ubah semua kode-nya menjadi seperti berikut:
resources/views/pages/posts/⚡edit.blade.php
<?php
use App\Models\Post;
use Livewire\Component;
use Livewire\WithFileUploads;
use Livewire\Attributes\Validate;
new class extends Component
{
use WithFileUploads;
public Post $post;
#[Validate('nullable|image|max:2048')]
public $image;
#[Validate('required')]
public $title;
#[Validate('required')]
public $content;
public function mount($id)
{
$this->post = Post::findOrFail($id);
// set default value from database
$this->title = $this->post->title;
$this->content = $this->post->content;
}
public function update()
{
$this->validate();
// if upload new image, replace image
if ($this->image) {
// delete old image
Storage::disk('public')->delete('posts/'.$this->post->image);
// store image
$this->image->storeAs('posts', $this->image->hashName(), 'public');
// get image name
$imageName = $this->image->hashName();
} else {
$imageName = $this->post->image;
}
// update to database
$this->post->update([
'image' => $imageName,
'title' => $this->title,
'content' => $this->content,
]);
session()->flash('message', 'Data Post Berhasil Diupdate.');
return redirect()->route('posts.index');
}
public function render()
{
return $this->view()
->layout('layouts::app')
->title('Edit Post');
}
};
?>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-12">
<div class="card border-0 rounded shadow-sm">
<div class="card-body">
<form wire:submit.prevent="update" enctype="multipart/form-data">
<div class="mb-3 text-center">
<label class="form-label">Image</label><br>
<img src="{{ asset('/storage/posts/'.$post->image) }}" class="rounded mb-2" width="150">
<input type="file" class="form-control" wire:model="image">
@error('image')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="mb-3">
<label class="form-label">Title</label>
<input type="text" class="form-control" wire:model="title">
@error('title')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="mb-3">
<label class="form-label">Content</label>
<textarea class="form-control" wire:model="content" rows="5"></textarea>
@error('content')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
<button type="submit" class="btn btn-md btn-primary">UPDATE</button>
<a href="/" wire:navigate class="btn btn-md btn-secondary">BACK</a>
</form>
</div>
</div>
</div>
</div>
</div>
Dari penambahan kode di atas, pertama kita import model Post.
use App\Models\Post;
Selanjutnya, kita juga menggunakan trait WithFileUploads dari Livewire.
use Livewire\WithFileUploads;
Trait ini digunakan agar Livewire dapat menangani proses upload file, baik saat insert maupun update data.
Pada Livewire 4, proses validasi sudah menggunakan pendekatan PHP Attribute. Perhatikan bagian berikut.
#[Validate('nullable|image|max:2048')]
public $image;
#[Validate('required')]
public $title;
#[Validate('required')]
public $content;
Perbedaan utama dengan proses insert data adalah pada field image. Di sini kita menggunakan aturan nullable, karena saat proses edit data user tidak wajib mengganti gambar.
Sekarang kita fokus ke method mount(). Method ini akan dijalankan saat halaman edit pertama kali dibuka.
public function mount($id)
{
$this->post = Post::findOrFail($id);
// set default value from database
$this->title = $this->post->title;
$this->content = $this->post->content;
}
Di dalam method ini, kita mengambil data post berdasarkan ID menggunakan findOrFail(). Setelah itu, kita set nilai default untuk $title dan $content dari data yang ada di database. Dengan cara ini, saat halaman edit dibuka, data lama akan langsung tampil di dalam form.
Selanjutnya kita masuk ke method update(). Method ini akan dipanggil saat form edit di-submit.
public function update()
{
// ...
}
Di dalam method ini, pertama kita menjalankan validasi menggunakan method berikut.
$this->validate();
Kemudian, kita melakukan pengecekan apakah user mengupload gambar baru atau tidak.
if ($this->image) {
// delete old image
Storage::disk('public')->delete('posts/'.$this->post->image);
// store image
$this->image->storeAs('posts', $this->image->hashName(), 'public');
// get image name
$imageName = $this->image->hashName();
} else {
$imageName = $this->post->image;
}
Jika user mengupload gambar baru, maka kita hapus terlebih dahulu gambar lama yang ada di folder storage/app/public/posts, kemudian kita simpan gambar baru dan ambil nama filenya menggunakan hashName().
Jika user tidak mengupload gambar baru, maka kita tetap gunakan nama gambar lama dari database.
Setelah itu, kita lakukan proses update ke database menggunakan method update() dari data post yang sudah kita ambil sebelumnya.
$this->post->update([
'image' => $imageName,
'title' => $this->title,
'content' => $this->content,
]);
Terakhir, kita tampilkan flash message dan arahkan kembali ke halaman index.
session()->flash('message', 'Data Post Berhasil Diupdate.');
return redirect()->route('posts.index');
Pada method render(), kita langsung menentukan layout dan title halaman menggunakan pendekatan page component Livewire 4.
return $this->view()
->layout('layouts::app')
->title('Edit Post');
Sekarang kita akan membahas bagian view dari page component Edit Post yang berada tepat di bawah kode PHP.
Pertama, kita membungkus seluruh tampilan menggunakan container Bootstrap.
<div class="container mt-5 mb-5">
Kemudian kita membuat card Bootstrap sebagai wadah form edit data.
<div class="card border-0 rounded shadow-sm">
<div class="card-body">
...
</div>
</div>
Selanjutnya, pada bagian form, kita arahkan proses submit ke method update yang ada di page component Livewire, serta menambahkan atribut enctype="multipart/form-data" karena kita juga menyediakan fitur upload file.
<form wire:submit.prevent="update" enctype="multipart/form-data">
Dengan menggunakan wire:submit.prevent, maka saat form disubmit, Livewire akan memanggil method update() tanpa melakukan reload halaman.
Pada bagian image, kita menampilkan gambar lama terlebih dahulu agar user bisa melihat gambar yang sedang digunakan oleh data tersebut.
<img src="{{ asset('/storage/posts/'.$post->image) }}" class="rounded mb-2" width="150">
Kemudian kita sediakan input file untuk upload gambar baru.
<input type="file" class="form-control" wire:model="image">
Selanjutnya, untuk field title dan content, kita tetap menggunakan wire:model agar input terhubung langsung dengan property Livewire.
<input type="text" class="form-control" wire:model="title">
<textarea class="form-control" wire:model="content" rows="5"></textarea>
Karena $title dan $content sudah kita set dari database di dalam method mount(), maka saat halaman edit dibuka, nilai lama akan otomatis tampil di form.
Untuk menampilkan pesan error hasil validasi, kita menggunakan directive Blade @error seperti pada proses insert data.
Contohnya pada field title berikut.
@error('title')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
Hal yang sama juga kita terapkan untuk field image dan content, sehingga jika validasi gagal, pesan error akan langsung muncul tanpa reload halaman.
Pada bagian akhir form, kita menyediakan dua buah tombol aksi.
<button type="submit" class="btn btn-md btn-primary">UPDATE</button>
<a href="/" wire:navigate class="btn btn-md btn-secondary">BACK</a>
Tombol UPDATE digunakan untuk menyimpan perubahan data, sedangkan tombol BACK digunakan untuk kembali ke halaman index posts tanpa reload halaman.
Langkah 2 - Menambahkan Route Edit Data
Agar halaman edit data dapat diakses melalui browser, sekarang kita perlu menambahkan route.
Silahkan buka file routes/web.php, lalu ubah kodenya menjadi seperti berikut.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
// posts index
Route::livewire('/', 'pages::posts.index')->name('posts.index');
// posts create
Route::livewire('/create', 'pages::posts.create')->name('posts.create');
// posts edit
Route::livewire('/edit/{id}', 'pages::posts.edit')->name('posts.edit');
Dengan route di atas, tombol EDIT pada halaman index posts sekarang sudah bisa digunakan untuk menuju ke halaman edit berdasarkan ID data.
Langkah 3 - Uji Coba Edit dan Update Data Post
Silahkan teman-teman klik button EDIT di salah satu data yang dimiliki, jika berhasil maka akan menampilkan form edit seperti berikut ini.
Setelah itu, silahkan ubah isinya sesuai kebutuhan dan klik button UPDATE, jika berhasil maka akan menampilkan hasil seperti berikut ini.
Kesimpulan
Pada artikel ini, kita telah belajar bagaimana cara edit dan update data ke dalam database menggunakan Laravel Livewire 4, mulai dari mengambil data berdasarkan ID, menampilkan data lama ke dalam form, menerapkan validasi menggunakan Attribute, mengganti gambar dengan menghapus gambar lama, hingga menyimpan perubahan data ke database tanpa menggunakan controller dan JavaScript tambahan.
Pada artikel selanjutnya, kita akan melanjutkan ke tahap terakhir CRUD, yaitu delete data menggunakan Livewire 4.
Terima Kasih
SAWERIA
Memuat komentar...