Komponen Laravel: Cara Membuat dan Menyusun Komponen yang Terpisah

Apa itu Laravel Component?

Komponen Laravel digunakan untuk membangun sistem yang handal dan dapat diperluas. Mereka memungkinkan kita membangun aplikasi besar yang terdiri dari komponen yang dapat digunakan kembali, independen, dan terpisah. Laravel menyediakan banyak alat untuk membantu membangun aplikasi web yang handal dan memotong waktu pengembangan hingga tingkat yang signifikan.

Keuntungan Menggunakan Laravel Component

  1. Reusable
    Komponen dapat digunakan kembali di berbagai bagian aplikasi, yang membantu mengurangi duplikasi kode.
  2. Independent
    Setiap komponen adalah unit independen dengan logika dan tampilannya sendiri
  3. Decoupled
    Komponen dapat dikembangkan dan dikelola secara terpisah, yang membuatnya lebih mudah untuk dikelola dan dipelihara

Komponen Laravel biasanya didefinisikan dengan menempatkan template Blade di dalam direktori resources/views/components. Namun, Anda mungkin sesekali ingin mendaftarkan jalur komponen anonim lainnya dengan Laravel selain jalur default.

Cara Membuat Componet

  • Anda perlu membuat komponen. Anda dapat melakukannya dengan menggunakan perintah artisan php artisan make:component ComponentName. Ini akan membuat file komponen baru di dalam direktori App\View\Components dan file view di dalam direktori resources\views\components
  • Setelah Anda menjalankan perintah php artisan make:component ComponentName, Anda akan menemukan file komponen di dalam direktori App\View\Components. Biasanya, ada dua file yang akan dibuat: ComponentName.php dan component-name.blade.php.
  • Contoh Codingan untuk App\View\Components
<?php
 
namespace App\View\Components;
 
use Illuminate\View\Component;
 
class ComponentName extends Component
{
    public $data; // Anda dapat menambahkan properti yang ingin Anda gunakan di komponen ini.
 
    public function __construct($data)
    {
        $this->data = $data;
    }
 
    public function render()
    {
        return view('components.contohcomponent'); // Nama file Blade view yang sesuai.
    }
}
  • Selanjutnya, buat atau edit file Blade view di dalam direktori resources\views\components. Nama file ini harus sesuai dengan yang Anda tentukan dalam method render pada file komponen. Dalam contoh di atas, file tersebut harus bernama component name.blade.php.
    Codingan Pada contohcomponent.blade.php
<div>
    <!-- Anda dapat menggunakan data yang Anda lewatkan ke komponen di sini -->
    <h1>{{ $data }}</h1>
</div
  • Setelah komponen dan tampilan komponen Anda selesai, Anda dapat menggunakannya di dalam view Blade Anda. Misalkan Anda ingin menggunakan komponen ini di dalam file welcome.blade.php
    Contoh codingan di welcome.blade.php
<x-component-name :data="$someData" />

Subscribe

Related articles

Web Developer | Pengalaman Magang di Udacoding

Udacoding menjadi salah satu tempat, dimana peserta magang...

Segala Hal yang Perlu Kamu Tahu tentang Dark Theme

Ngomongin mode gelap, kayaknya sekarang lagi jadi yang hits...

TinyMCE: Solusi Praktis untuk Konten Web yang Lebih Interaktif

TinyMCE adalah alat untuk membuat dan mengedit teks di...

LEAVE A REPLY

Please enter your comment!
Please enter your name here