Membuat Create Data Hotel Laravel 11

Dari Dokumentasi Robie
Loncat ke navigasi Loncat ke pencarian


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

001-tambahkan-tombol-create.png

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

002-create-component-hotel.png

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);

003-menambahkan-routing-tombol-create.png

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>

001-tambahkan-tombol-create.png

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.

004-form-ke-hotel-create.png

Sesuaikan kolom yang dibutuhkan sesuai dengan database yang sudah dibuat

005-sesuaikan-form-create.png

tampilan form akan seperti ini

006-tampilan-form.png

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

007-tambah-properties-di-class-hotel-create.png

lalu kita buat function create dibawah render


    public function create(){


    }

sehingga kode program menjadi seperti berikut

008-create-function-hotel.png

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

009-dydum-test.png