Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar bagaimana cara menampilkan data di Laravel menggunakan Livewire dan sekarang kita akan lanjutkan belajar bagaimana cara membuat proses insert data beserta upload gambar menggunakan Livewire.
Langkah 1 - Membuat Component Posts Create
Sama seperti sebelumnya, kita akan menggunakan class component untuk proses insert data posts. Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project Laravel-nya.
php artisan make:livewire posts.create
Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan file component baru yang berada di dalam folder app/Livewire/Posts/Create.php.
Silahkan teman-teman buka file tersebut dan ubah semua kode-nya menjadi seperti berikut ini.
<?php
namespace App\Livewire\Posts;
use App\Models\Post;
use Livewire\Component;
use Livewire\WithFileUploads;
use Livewire\Attributes\Rule;
class Create extends Component
{
use WithFileUploads;
//image
#[Rule('required', message: 'Masukkan Gambar Post')]
#[Rule('image', message: 'File Harus Gambar')]
#[Rule('max:1024', message: 'Ukuran File Maksimal 1MB')]
public $image;
//title
#[Rule('required', message: 'Masukkan Judul Post')]
public $title;
//content
#[Rule('required', message: 'Masukkan Isi Post')]
#[Rule('min:3', message: 'Isi Post Minimal 3 Karakter')]
public $content;
/**
* store
*
* @return void
*/
public function store()
{
$this->validate();
//store image in storage/app/public/posts
$this->image->storeAs('public/posts', $this->image->hashName());
//create post
Post::create([
'image' => $this->image->hashName(),
'title' => $this->title,
'content' => $this->content,
]);
//flash message
session()->flash('message', 'Data Berhasil Disimpan.');
//redirect
return redirect()->route('posts.index');
}
/**
* render
*
* @return void
*/
public function render()
{
return view('livewire.posts.create');
}
}
Dari perubahan kode di atas, pertama kita import Model Post.
use App\Models\Post;
karena akan ada file upload, maka kita import WithFileUploads dari Livewire dan sekaligus kita panggil di dalam class menggunakan keyword use.
use Livewire\WithFileUploads;
use WithFileUploads;
Karena akan ada sebuah pengecekan validasi, disini kita akan manfaatkan Rule Attribute dari Livewire untuk membuah validator.
use Livewire\Attributes\Rule;
Di dalam class Create kita membuat 3 public properti beserta validasinya, yaitu image, title dan content.
//image
#[Rule('required', message: 'Masukkan Gambar Post')]
#[Rule('image', message: 'File Harus Gambar')]
#[Rule('max:1024', message: 'Ukuran File Maksimal 1MB')]
public $image;
//title
#[Rule('required', message: 'Masukkan Judul Post')]
public $title;
//content
#[Rule('required', message: 'Masukkan Isi Post')]
#[Rule('min:3', message: 'Isi Post Minimal 3 Karakter')]
public $content;
Dalam contoh di atas merupakan cara pembuatan sebuah validasi input di Livewire, dimana kita buatkan sebuah validasi menggunakan kode #[Rule] dan diikuti parameter validasi yang ingin dibuat. Dan untuk masing-masing properti dipisah menggunakan ENTER atau line baru.
Setelah itu, kita buat method baru yang bernama store. Method ini nantinya yang akan dipanggil pada action form yang ada di view.
public function store()
{
//...
}
Di dalamnya, kita panggil validasi dengan cara seperti berikut ini.
$this->validate();
kemudian dibawahnya akan dieksekusi apabila validasi sudah terpenuhi dan kita lakukan proses upload gambar ke dalam server.
//store image in storage/app/public/posts
$this->image->storeAs('public/posts', $this->image->hashName());
Setelah gambar berhasil disimpan, langkah selanjutnya adalah menyimpan data post ke dalam database menggunakan Model.
//create post
Post::create([
'image' => $this->image->hashName(),
'title' => $this->title,
'content' => $this->content,
]);
Kemudian kita buatkan session flash data untuk menampilkan pesan bahwa data berhasil diinsert dan kita lanjutkan redirect ke route yang bernama posts.index.
//flash message
session()->flash('message', 'Data Berhasil Disimpan.');
//redirect
return redirect()->route('posts.index');
Dan untuk method render digunakan untuk menampilkan view yang nanti difungsikan sebagai form tambah data post.
return view('livewire.posts.create');
Langkah 2 - Membuat Form Tambah Data
Sekarang kita lanjutkan membuat sebuah form yang digunakan untuk proses tambah data. Silahkan teman-teman buka file resources/views/livewire/posts/create.blade.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.
@section('title')
Create Post - Belajar Livewire 3 di SantriKoding.com
@endsection
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-12">
<div class="card border-0 shadow-sm rounded">
<div class="card-body">
<form wire:submit="store" enctype="multipart/form-data">
<div class="form-group mb-4">
<label class="fw-bold">GAMBAR</label>
<input type="file" class="form-control @error('image') is-invalid @enderror" wire:model="image">
<!-- error message untuk title -->
@error('image')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="form-group mb-4">
<label class="fw-bold">JUDUL</label>
<input type="text" class="form-control @error('title') is-invalid @enderror" wire:model="title" placeholder="Masukkan Judul Post">
<!-- error message untuk title -->
@error('title')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="form-group mb-4">
<label class="fw-bold">KONTEN</label>
<textarea class="form-control @error('content') is-invalid @enderror" wire:model="content" rows="5" placeholder="Masukkan Konten Post"></textarea>
<!-- error message untuk content -->
@error('content')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
<button type="submit" class="btn btn-md btn-primary">SIMPAN</button>
<button type="reset" class="btn btn-md btn-warning">RESET</button>
</form>
</div>
</div>
</div>
</div>
</div>
Dari perubahan kode di atas, pertama kita atur untuk title halaman.
@section('title')
Create Post - Belajar Livewire 3 di SantriKoding.com
@endsection
Kemudian pada form action kita arahkan ke dalam method yang bernama store dan disini kita gunakan wire:submit.
<form wire:submit="store" enctype="multipart/form-data">
//...
</form>
Di dalam Livewire, untuk mengambil value dari sebuah input kita bisa gunakan wire:model, kurang lebih seperti berikut.
wire:model="image"
wire:model="title"
wire:model="content"
Untuk menampilkan error validasi, sama seperti Laravel pada umumnya.
@error('image')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
Langkah 3 - Membuat Route
Silahkan teman-teman buka file routes/web.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.
<?php
use Illuminate\Support\Facades\Route;
//posts index
Route::get('/', App\Livewire\Posts\Index::class)->name('posts.index');
//posts create
Route::get('/create', App\Livewire\Posts\Create::class)->name('posts.create');
Di atas, kita menambahkan route baru dengan path /create dan kita arahkan ke dalam class component posts create dan untuk name dari route-nya adalah posts.create.
Langkah 4 - 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 SIMPAN 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 semua telah belajar bagaimana cara membuat class component untuk proses insert data post, kemudian belajar membuat validasi di Livewire menggunakan Attribute Rule dan belajar upload gambar di Livewire.
Pada artikel selanjutnya kita semua akan belajar bersama-sama bagaimana cara membuat proses edit dan update data di Laravel menggunakan Livewire 3.
Terima Kasih