Tutorial CRUD Laravel Livewire SPA #5 : Membuat Component Livewire


Fika Ridaul Maulayya
Software Engineer | Content Creator | Founder & Author di SantriKoding.com

Tutorial CRUD Laravel Livewire SPA #5 : Membuat Component Livewire - Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara membuat component di Laravel Livewire.

Laravel Livewire menggunakan konsep component, konsep ini akan mempermudah para developer/programmer dalam mengembangkan suatu aplikasi, sepeti halnya framework JavaScript seperti Vue Js, React Js mereka juga menerapkan konsep component.

Pada tutorial kali ini kita akan membuat beberapa component sekaligus, dimana component ini nanti kita akan gunakan sebagai praktek di aplikasi kita.

Langkah 1 - Membuat Component

Untuk membuat component di Laravel Livewire, silahkan teman-teman jalankan perintah dibawah ini :

php artisan make:livewire post.index

Jika berhasil, maka kita akan mendapatkan 2 file, yaitu Component & View, yang mana akan secara otomatis dibuatkan di dalam folder app/Http/Livewire/Post/Index.php & resources/views/livewire/post/index.php

Component di atas nanti akan kita gunakan untuk menampilkan data dari database, selanjutnya kita akan buat component lagi untuk proses insert & update data.

Silahkan teman-teman jalankan perintah dibawah ini :

php artisan make:livewire post.create
php artisan make:livewire post.edit

Maka sekarang jika teman-teman lihat kurang lebih struktur foldernya seperti berikut ini :

app
 |── Http
       |── Livewire
             |── Post
                   |── Create.php
                   |── Edit.php
                   |── Index.php
resources
 |── views
       |── layouts
       |── livewire
              |── post
                    |── create.php
                    |── edit.php
                    |── index.php
       |── welcome.blade.php

Langkah 2 - Menambahkan Route

Setelah kita berhasil membuat component di Laravel Livewire, selanjutnya kita akan menambahkan sebuah route di aplikasi kita.

Silahkan teman-teman buka file routes/web.php silahkan ganti semua kodenya menjadi seperti berikut ini :

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::livewire('/', 'post.index')->name('post.index');
Route::livewire('/create', 'post.create')->name('post.create');
Route::livewire('/edit/{id}', 'post.edit')->name('post.edit');

Oke, sekarang jika teman-teman jalankan aplikasinya, maka teman-teman akan menemukan tampilan blank karena di dalam template component kita belum memberikan apapun.

Di artikel selanjutnya kita semua akan belajar bagaimana cara menampilkan data dari database menggunakan Laravel Livewire menggunakan component.

SOURCE CODE

Untuk teman-teman yang ingin mengunduh source codenya : https://github.com/maulayyacyber/CRUD-Laravel-Livewire-SPA

KESIMPULAN

Pada tutorial kali ini kita semua telah belajar bagaimana cara membuat component baru di Laravel Livewire & kita juga belajar menambahkan route baru untuk aplikasi kita.

Jika teman-teman ada pertanyaan atau kendala saat mencoba, silahkan teman-teman bisa bertanya melalui kolom komentar dibawah artikel ini.

Terima Kasih


Fika Ridaul Maulayya
Software Engineer | Content Creator | Founder & Author di SantriKoding.com

Jika Anda menyukai konten kami, silakan pertimbangkan untuk membeli kopi untuk kami.
Terima kasih atas dukungan Anda!

Buy me a coffeeBuy me a coffee
KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR