Artikel

Apa itu komponen Laravel dan bagaimana cara menggunakannya

Komponen Laravel adalah fitur lanjutan, yang ditambahkan oleh laravel versi ketujuh. Pada artikel ini kita akan melihat apa itu komponen, cara membuatnya, cara menggunakan komponen dalam model blade, dan cara membuat parameter komponen dengan meneruskan parameter.

Apa itu Komponen Laravel?

Komponen adalah bagian dari kode yang dapat kita gunakan kembali di setiap template blade. Ini seperti bagian, tata letak, dan penyertaan. Misalnya, kami menggunakan header yang sama untuk setiap template, sehingga kami dapat membuat komponen Header yang dapat digunakan kembali.

Penggunaan komponen lain untuk pemahaman yang lebih baik adalah seperti Anda perlu menggunakan tombol daftar di situs web di banyak tempat seperti di header, footer, atau di mana pun di situs web. Jadi buat komponen dari kode tombol itu dan gunakan kembali.

Cara membuat komponen di Laravel

Sebagai contoh, mari buat sebuah komponen Header dengan l 'Artisan:

php artisan make:component Header

Perintah ini membuat dua file di proyek laravel Anda:

file PHP dengan nama Header.php di dalam direktori app/http/View/Components;
dan file blade HTML dengan nama header.blade.php di dalam direktori resources/views/components/.

Anda juga dapat membuat komponen dalam subdirektori, seperti:

php artisan make:component Forms/Button

Perintah ini akan membuat komponen tombol di direktori App\View\Components\Forms dan file blade akan ditempatkan di direktori resources/views/components/forms.

Untuk merender komponen dalam file blade HTML, kami akan menggunakan sintaks ini:

Contoh komponen Laravel

Pertama kita masukkan beberapa kode HTML ke dalam file header.blade.php dari komponen.

<div><h1> Header Component </h1></div>

sekarang buat file tampilan users.blade.php di folder aset, di mana kita dapat menggunakan komponen header.

<x-header /><h1>User Page</h1>

sekarang, melalui sistem rute laravel, kami memanggil blade untuk menampilkan hasilnya di browser

Cara meneruskan data ke komponen Laravel

Untuk meneruskan data ke komponen Blade sintaks berikut digunakan, menentukan nilai yang terkait dengan parameter di dalam elemen HTML:

<x-header message=”Utenti” />

Misalnya, kami menggunakan komponen sebelumnya di file users.blade.php.

Anda harus defiselesaikan data komponen di file header.php. Semua data variabel publik secara otomatis tersedia untuk tampilan komponen.

Tambahkan kode di dalam file header.php di dalam direktori app/http/View/Components/ .

<?php

namespace App\View\Components;
use Illuminate\View\Component;

   class Header extends Component{

   /*** The alert type.** @var string*/

   public $title = "";

   public function __construct($message){

   $this->title = $message;

   }
}

Seperti yang Anda lihat, metode konstruktor kelas menetapkan variabel $title dengan nilai parameter diteruskan ke komponen. Sekarang tambahkan variabel $title dalam file komponen header.blade.php untuk menampilkan data masa lalu.

<div> <h1> {{$title}}'s Header Component </h1> </div>

Sekarang data komponen yang dikirimkan ini akan ditampilkan di browser.

Demikian pula, Anda dapat menggunakan komponen ini di halaman visualisasi lain dengan data berbeda, dengan membuat file visualisasi lain blade contact.blade.php dan tambahkan kode komponen di bawah ini untuk menampilkan data yang diteruskan.