Tutorial CRUD Laravel Livewire Part 2 - Tambah Data

Lanjut blog dari Part 1 sebelumnya, disini akan membuat fitur tambah data kontak ke database melalui form dengan Livewire.

1. Edit Model Contact.php di folder app/Models

protected $guarded diatas digunakan untuk mengizinkan semua kolom pada table kontak untuk ditambah dan diedit.

2. Edit controller Contact.php di folder app/Http/Livewire/Contact

Setelah melihat codingan diatas, tentu kalian menemukan use WithFileUploads ini wajib digunakan pada saat ada peng-upload an sebuah File/Image/Photo. Lalu selanjutnya ada public dengan variable yang terdiri dari $nama_lengkap, $tanggal_lahir dan seterusnya yaitu digunakan untuk passing variable ke halaman view atau front-end.

3. Selanjutnya buat file blade dengan cara manual dan diberi nama “form.blade.php” di dalam folder resources/views/livewire/contact

Diatas ini kalian menemukan wire:submit.prevent=”submit()” yang berfungsi ketika men-submit form langsung menjalankan komponen submit yang berada di kontroller contact. Selanjutnya kalian menemukan wire:model.defer=”” yaitu untuk menggantikan name=”” pada pembuatan form seperti biasanya.

4. Edit file contact.blade.php menjadi seperti dibawah ini..

Disini kita memanggil file form.blade.php dengan @include dan menambahkan sebuah alert.

Dan sekarang kita lihat tampilan dan hasil nya sekarang..

Gimana seru bukan?? Bisa membuat form tanpa adanya refresh 😊.

Jika menemukan error foto yang tidak muncul seperti diatas, maka solusinya jalankan command berikut

1. Buka filesystems.php di dalam folder config

Edit storage_path menjadi seperti diatas.

2. Jalankan command di CMD Anda seperti dibawah

php artisan storage:link

maka hasilnya seperti dibawah ini..

3. Selamat foto atau file yang tidak muncul menjadi terlihat sekarang..

Oke teman-teman sampai disini dulu yaaa, tunggu part ketiga nya yaitu Edit Data di Laravel Livewire…