- Langkah 1 - Membuat Page Component Livewire untuk Insert Data
- Langkah 2 - Menambahkan Route Insert Data
- Langkah 3 - Uji Coba Insert Data Post
- Kesimpulan
Halo teman-teman semuanya. Pada artikel sebelumnya, kita telah berhasil menampilkan data dari database menggunakan Laravel Livewire 4, lengkap dengan pagination dan routing tanpa menggunakan controller tradisional.
Pada artikel kali ini, kita akan melanjutkan ke tahap berikutnya, yaitu insert data ke dalam database menggunakan Livewire 4. Di sini kita akan belajar bagaimana cara membuat form, melakukan validasi, menyimpan data ke database, serta menampilkan flash message setelah data berhasil disimpan.
Langkah 1 - Membuat Page Component Livewire untuk Insert Data
Silahkan teman-teman jalankan perintah berikut di terminal/CMD dan pastikan berada di dalam root project Laravel:
php artisan make:livewire pages::posts.create
Perintah di atas akan menghasilkan file resources/views/pages/posts/⚡create.blade.php.
Setelah itu, silahkan buka file tersebut dan ubah semua kode-nya menjadi seperti berikut:
resources/views/pages/posts/⚡create.blade.php
<?php
use App\Models\Post;
use Livewire\Component;
use Livewire\WithFileUploads;
use Livewire\Attributes\Validate;
new class extends Component
{
use WithFileUploads;
#[Validate('required|image|max:2048')]
public $image;
#[Validate('required')]
public $title;
#[Validate('required')]
public $content;
public function store()
{
$this->validate();
// store image
$this->image->storeAs('posts', $this->image->hashName(), 'public');
// get image name
$imageName = $this->image->hashName();
// insert data
Post::create([
'image' => $imageName,
'title' => $this->title,
'content' => $this->content,
]);
// flash message
session()->flash('message', 'Data Post Berhasil Disimpan.');
// redirect to index
return redirect()->route('posts.index');
}
public function render()
{
return $this->view()
->layout('layouts::app')
->title('Create 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="store" enctype="multipart/form-data">
<div class="mb-3">
<label class="form-label">Image</label>
<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">SAVE</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, dalam hal ini adalah gambar (image) yang akan kita simpan ke dalam database dan storage.
Pada Livewire 4, proses validasi sudah tidak lagi menggunakan property $rules seperti pada versi sebelumnya. Sebagai gantinya, Livewire 4 menyediakan pendekatan baru menggunakan PHP Attribute.
Perhatikan bagian berikut.
#[Validate('required|image|max:2048')]
public $image;
#[Validate('required')]
public $title;
#[Validate('required')]
public $content;
Dengan pendekatan ini, aturan validasi didefinisikan langsung di atas property yang akan divalidasi. Cara ini membuat kode menjadi lebih ringkas, mudah dibaca, dan lebih terstruktur, karena setiap property memiliki aturan validasinya masing-masing.
Sekarang kita fokus ke method store(). Method ini akan dipanggil saat form di-submit.
public function store()
{
// ...
}
Di dalam method ini, pertama kita menjalankan validasi menggunakan method berikut.
$this->validate();
Kemudian, file gambar yang di-upload kita simpan ke dalam folder storage/app/public/posts menggunakan method storeAs().
$this->image->storeAs('posts', $this->image->hashName(), 'public');
Selanjutnya, kita ambil nama file gambar menggunakan method hashName().
$imageName = $this->image->hashName();
Setelah itu, kita menyimpan data ke dalam database menggunakan model Post dan method create().
Post::create([
'image' => $imageName,
'title' => $this->title,
'content' => $this->content,
]);
Terakhir, kita menampilkan flash message sebagai penanda bahwa data berhasil disimpan, lalu kita arahkan kembali ke halaman index posts.
session()->flash('message', 'Data Post Berhasil Disimpan.');
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('Create Post');
Sekarang kita akan membahas bagian view dari page component Create Post yang berada tepat di bawah kode PHP.
Pertama, kita membungkus seluruh tampilan menggunakan container Bootstrap agar tampilan terlihat rapi dan berada di tengah halaman.
<div class="container mt-5 mb-5">
Kemudian kita membuat card Bootstrap yang akan digunakan sebagai wadah form input 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 store yang ada di page component Livewire, serta menambahkan atribut enctype="multipart/form-data" karena kita akan melakukan upload file.
<form wire:submit.prevent="store" enctype="multipart/form-data">
//...
>/form>
Dengan menggunakan wire:submit.prevent, maka saat form di-submit, Livewire akan memanggil method store() tanpa melakukan reload halaman.
Atribut enctype="multipart/form-data" wajib digunakan agar file gambar bisa dikirim ke Livewire dengan benar.
Di dalam form, kita menggunakan directive wire:model untuk menghubungkan setiap input dengan property Livewire yang sudah kita definisikan sebelumnya. Untuk input gambar, kita gunakan kode berikut.
<input type="file" class="form-control" wire:model="image">
Input ini akan otomatis terhubung dengan property $image.
Untuk input judul post, kita gunakan kode berikut. Nilai dari input ini akan langsung tersimpan ke dalam property $title.
<input type="text" class="form-control" wire:model="title">
Sedangkan untuk konten post, kita gunakan elemen <textarea>.
<textarea class="form-control" wire:model="content" rows="5"></textarea>
Dengan menggunakan wire:model, setiap perubahan nilai pada input akan langsung disimpan ke dalam property Livewire yang bersesuaian, yaitu $image, $title, dan $content.
Inilah salah satu keunggulan Livewire, karena kita tidak perlu menulis JavaScript untuk menangani perubahan data dari form.
Untuk menampilkan pesan error hasil validasi, kita menggunakan directive Blade @error.
Contohnya pada input image.
@error('image')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
Jika validasi gagal, maka pesan error akan langsung muncul tepat di bawah input yang bermasalah, tanpa perlu reload halaman.
Hal yang sama juga kita terapkan untuk field title dan content, sehingga user langsung mengetahui bagian mana yang harus diperbaiki.
Pada bagian akhir form, kita menyediakan dua buah tombol aksi.
<button type="submit" class="btn btn-md btn-primary">SAVE</button>
<a href="/" wire:navigate class="btn btn-md btn-secondary">BACK</a>
Tombol SAVE digunakan untuk menyimpan data ke database, sedangkan tombol BACK digunakan untuk kembali ke halaman index posts tanpa melakukan reload halaman, karena kita menggunakan directive wire:navigate.
Langkah 2 - Menambahkan Route Insert Data
Agar halaman insert data dapat diakses melalui browser, sekarang kita perlu menambahkan route.
Silahkan teman-teman 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');
Dengan route di atas, halaman Create Post bisa diakses melalui URL /create.
Langkah 3 - Uji Coba Insert Data Post
Sekarang silahkan teman-teman klik button ADD NEW POST, jika berhasil maka kita akan diarahkan ke halaman post create tanpa perlu reload halaman.
Silahkan klik button SAVE dengan tanpa memasukkan data apapun di dalamnya, maka kita akan mendapatkan sebuah error validasi seperti berikut.
Sekarang silahkan masukkan data yang dibituhkan di dalam form dan jika berhasil maka akan mendapatkan hasil seperti berikut ini.
Kesimpulan
Pada artikel ini, kita telah belajar bagaimana cara insert data ke dalam database menggunakan Laravel Livewire 4, mulai dari membuat page component Livewire, menerapkan validasi menggunakan Attribute, membuat form input, menangani upload file, hingga menyimpan data ke database dan menampilkan flash message tanpa menggunakan controller dan JavaScript tambahan.
Pada artikel selanjutnya, kita akan melanjutkan pembahasan ke tahap berikutnya, yaitu edit dan update data menggunakan Livewire 4.
Terima Kasih
SAWERIA
Memuat komentar...