Membuat Create Data Hotel Laravel 11

Menambahkan tombol Create Hotel

Buka file hotel-list.blade.php lalu tambahkan script create hotel diatas tabel agar muncul disebelah kanan atas, dengan menambahkan kode berikut

<div class="card-title">

<div class="row">

<div class="col-6">

<h5 class="card-title">Hotel List</h5>

</div>

<div class="col-6">

<a href="" class="btn btn-primary float-end">Create Hotel</a>

</div>

</div>

</div>

Sehingga menjadi seperti ini

Buat Komponen Create Hotel

untuk membuat komponen dengan cara mengetikkan perintah

php artisan make:livewire hotels.hotel-create (enter) file komponen hotel-create akan dibuatkan dalam folder hotels. seperti terlihat pada gambar berikut

Tambahkan Routingnya

buka file web.php lalu tambahkan routing untuk mengaktifkan tombol hotel-create dengan menambahkan kode berikut

use App\Livewire\Hotels\HotelCreate;

Route::get('/hotels/create',HotelCreate::class);

Lalu arahkan pada tombol Create Hotel <a href="/hotels/create"></a> pada file hotel-list.blade.php

lalu supaya tetap single page aplikasi agar tidak terload tambahkan <a wire:navigate href="/hotels/create"></a>

Buka file hotel-create.blade.php

buka file di folder view hotel-create.blade.php, kemudian copy semua kode dari hotel-list.blade.php dan paste ke halaman hotel-create.blade.php

Hapus bagian tabel, dan copy paste form.

Sesuaikan kolom yang dibutuhkan sesuai dengan database yang sudah dibuat

tampilan form akan seperti ini

Jika kita klik tombol Create, maka halaman akan terload (terefresh), agar tidak terload / mencegah loading kita buat tambahan kode pada bagian form seperti berikut

<form wire:submit.prevent>

Kemudian tambahkan funtion sesuai dengan kebutuhan, dalam hal ini akan kita buat function create, sehingga kodenya menjadi

<form wire:submit.prevent='create'>

dengan cara ini, maka ketika mengklik tombol Create akan mengakses di kelas Component, dalam hal ini akan memanggil file app/hotels/HotelCreate.php

pada kode wire:model sebenarnya terhubung dengan properties, jadi apa yang ada di wire:model, misal name, email, address, stars, dst harus didefinisikan juga di Class Component, dalam hal ini adalah file HotelCreate.php. Jadi kode programnya berubah menjadi seperti berikut

lalu kita buat function create dibawah render

    public function create(){

    }

sehingga kode program menjadi seperti berikut

untuk mengetahui apakah ketika mengklik tombol Create data sudah terkirim atau belum bisa kita lakukan dengan menambahkan script berikut pada function create

dd($this->all());

sehingga kodenya seperti berikut

public function create(){

        dd($this->all());

}untuk pengujian, isikan form lalu klik tombol Create. Jika muncul tampilan seperti berikut, maka data sudah terkirim ke Class HotelCreate.php dengan benar

Jika sudah benar seperti diatas, maka kita bisa hapus script dd($this->all());, lalu data yang sudah diinputkan akan kita masukkan ke database dengan menuliskan script seperti berikut pada function create.

public function create(){

        Hotel::create($this->all());

        return $this->redirect('/hotels',navigate:true);

    }

karena ada navigate script ini tidak akan meload semua halaman, tetapi hanya meload komponen dan routingnya saja.

Solusi Error Mass Assignment

setelah mengedit class biasanya akan muncul error mass assignment seperti gambar berikut

ini terjadi ketika di model tidak kita definisikan field apa saja yang bisa ditambahkan secara masal. Solusinya adalah mendeklarasikan di Model app/Model/Hotel.php, caranya dengan mengetikkan script

protected $guarded = ['id'];

selain id adalah boleh mass assignment. maka kode program akan terlihat seperti berikut

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Hotel extends Model

{

    protected $guarded = ['id'];

    use HasFactory;

}

setelah itu, lakukan pengujian ulang untuk menginputkan data baru.

hasilnya seperti berikut