Langsung ke konten utama

Tutorial Lengkap Membuat Component di Laravel Livewire

 

Sebelum membuat component, sebaiknya kita install Laravel Livewire terlebih dahulu.

Jika sudah, sekarang kita bisa membuat component baru dengan 3 cara yang akan saya jelaskan di bawah ini.

Cara Pertama dalam Membuat Component

php artisan make:livewire post-index 
Tahap pertama dalam membuat component di Laravel Livewire

… dengan perintah di atas kita akan mendapatkan 2 buah file, yaitu:

app/Http/Livewire/PostIndex.php 
resources/views/livewire/post-index.blade.php 

Kedua file tersebut dapat kita gunakan sebagai controller maupun viewnya.

Pada file PostIndex.php ini adalah tempat kita mengatur proses, database dan yang berhubungan dengan proses.

… di dalamnya terdapat function render() yang sudah tersedia untuk mengirimkan data ke post-index.blade.php atau kita juga bisa membuat function lainnya.

Cara Kedua dalam Membuat Component

Kadang-kadang kita butuh merapikan file agar lebih tertata.

… untuk itu, kita bisa menyusun file berdasarkan folder saat membuat component.

Caranya dengan menambahkan titik (.).

Perhatikan contoh berikut:

php artisan make:livewire post.create

Perhatikan gambar berikut:

Tahap kedua dalam membuat component di Laravel Livewire

Kita bisa lihat terdapat 2 buat file yang berada di dalam folder post.

… ini sangat berguna agar susunan folder lebih tertata rapi dan memudahkan dalam pengembangan.

Cara Ketiga dalam Membuat Component

Cara terakhir dapat digunakan apabila kita hanya ingin menginstall bagian prosesnya saja tanpa .blade.php.

Ini disebut sebagai inline component.

Caranya cukup ketik perintah berikut ini melalui terminal:

php artisan make:livewire post-detail --inline 

Hasilnya:

Tahap ketiga dalam membuat component di Laravel Livewire

Contoh Program Sederhana dengan Component di Laravel Livewire

Sekarang kita masuk ke bagian terpenting pada tutorial kali ini, yaitu membuat contoh program.

Step 1 : Install Laravel Livewire

Silahkan install Laravel Livewire terlebih dahulu melalui tutorial yang sudah saya tulis sebelumnya.

Step 2 : Buat Component Baru

Sebagai contoh, silahkan buat component baru dengan perintah berikut ini:

php artisan make:livewire example

Step 3 : Buat Route Baru

Tambahkan route di bawah ini pada file routes/web.php:

Route::livewire('/example', 'example');

Step 4 : Modifikasi Component Example

Buka file app/Http/Liveware/Example.php dan cobalah untuk memodifikasinya menjadi seperti berikut ini:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class Example extends Component
{
    public function render()
    {
        $kalimat = "Selamat datang di Laravel Liveware";
        return view('livewire.example', compact('kalimat'));
    }
}

Step 5 : Modifikasi File View

Sekarang buka file resources/views/livewire/example.blade.php dan kita modifikasi menjadi seperti ini:

1
2
3
<div>
    {{ $kalimat }}
</div>

Step 6: Jalankan Laravel

Ketik perintah php artisan serve untuk menjalankan file project laravel kita.

Hasilnya:

Selamat datang di Laravel Liveware 

Komentar

Postingan populer dari blog ini

Keunggulan dalam menggunakan framework Laravel

      Pengembangan website akan terasa lebih mudah jika menggunakan tool yang tepat. Contohnya pemilihan framework php yang akan digunakan Framework yang baik adalah framework yang sesuai dengan kebutuhan aplikasi web yang akan Anda bangun. Tidak hanya itu, framework juga harus bisa menyederhanakan proses pembuatan dan menghasilkan performa yang aplikasi web yang lebih maksimal. Nah! Salah satu framework yang sangat populer saat ini adalah Laravel. Framework ini terkenal kesederhanaannya dan menghasilkan aplikasi web yang powerful. Artikel ini akan membahas soal apa itu Laravel, manfaat Laravel, fitur-fitur Laravel, hingga tips Laravel untuk pemula.  Apa itu Laravel? Anda pasti tahu bahasa pemrograman PHP? Laravel adalah satu-satunya framework yang membantu Anda untuk memaksimalkan penggunaan PHP di dalam proses pengembangan website. PHP menjadi bahasa pemrograman yang sangat dinamis, tapi semenjak adanya Laravel, dia menjadi lebih powerful, cepat, aman, dan simpe...

Pengertian MVC (Model, View & Controller)

  Pengertian MVC MVC adalah sebuah arsitektur perancangan kode program. Tujuannya untuk memecah kode program utama menjadi 3 komponen terpisah dengan tugas yang spesifik. Ketiga komponen tersebut adalah:  1. Model(Pengaksesan database) 2. View(Tampilan design/User Interface) 3. Controller(Alur logika program) Gabungan Model-View-Controller inilah yang disingkat sebagai MVC. Ide awal dari perlunya konsep MVC adalah agar aplikasi yang dibuat bisa mudah dikelola dan dikembangkan, terutama untuk aplikasi besar. Sebagai contoh, seorang web designer bisa fokus merancang bagian View saja, yakni tampilan design website yang terdiri dari kode HTML dan CSS plus sedikit JavaScript. Kode program untuk berkomunikasi dengan database bisa ditangani oleh programmer yang secara khusus bagian Model. Serta programmer lain mengatur alur logika program di bagian Controller. Dengan pemisahan seperti ini, kerja tim menjadi mudah dikelola. Selain itu dengan penerapan konsep MVC yang baik, setiap bag...

Situs FREELANCE terbaik

Berikut Beberapa Contoh Situs Freelance Di Indonesia Terbaik: Fiverr Situs freelance yang berbasis di Israel ini mungkin sedikit di luar jangkauan orang Indonesia. Tetapi, tidak melepas kemungkinan bagi anda yang ingin mencoba keberuntungan Anda di situs ini. Fiverr menyediakan para Freelancer kesempatan untuk menjual keahliannya dimulai dari harga 5 USD. Fiverr merupakan situs yang menyediakan beragam bidang pekerjaan, dari desain grafis, writing, development, bahkan musik. Meski merupakan situs yang cukup baru di bidang Freelance, Fiverr sudah menarik pengguna yang cukup banyak secara internasional. Sribulancer Sribulancer adalah situs Freelance yang berbasis di Indonesia. Tapi jangan salah, Sribulancer tersedia bagi Anda bagi yang ingin bekerja bahkan hingga ranah internasional. Sribulancer menyediakan pilihan gaji baik Rupiah atau US Dollar. Situs yang satu ini cocok bagi Anda yang memiliki keahlian seperti desain grafis, back-end dan front-end developer, copywriting, tran...