Apa komponen Laravel lan carane nggunakake

Komponen Laravel minangka fitur sing luwih maju, sing ditambahake dening laravel versi kapitu. Ing artikel iki, kita bakal weruh komponen apa, carane nggawe, carane nggunakake komponen ing model agul-agul lan carane parameterize komponen dening pass paramèter.

Apa Komponen Laravel?

Komponen minangka potongan kode sing bisa digunakake maneh ing bilah cithakan. Iku kaya bagean, tata letak, lan kalebu. Contone, kita nggunakake header sing padha kanggo saben cithakan, supaya kita bisa nggawe komponen Header, sing bisa digunakake maneh.

Panggunaan komponen liyane kanggo pangerten sing luwih apik kaya sampeyan kudu nggunakake tombol registrasi ing situs web ing akeh panggonan kaya ing header, footer utawa ing ngendi wae ing situs web. Banjur gawe komponen kode tombol kasebut lan gunakake maneh.

Cara nggawe komponen ing Laravel

Contone, ayo nggawe komponen Header Kanthi 'Artisan:

php artisan make:component Header

Printah iki nggawe rong file ing proyek laravel sampeyan:

• file PHP kanthi jeneng Header.php nang direktori app/http/View/Components;
• lan file blade HTML kanthi jeneng header.blade.php nang direktori resources/views/components/.

Sampeyan uga bisa nggawe komponen ing subdirektori, kayata:

php artisan make:component Forms/Button

Printah iki bakal nggawe komponen tombol ing direktori App\View\Components\Forms lan file agul-agul bakal diselehake ing sumber / views / komponen / direktori formulir.

Kanggo nerjemahake komponen ing file blade HTML, kita bakal nggunakake sintaks iki:

Conto komponen Laravel

Pisanan kita masang sawetara kode HTML menyang file header.blade.php saka komponen.

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

saiki nggawe file tampilan users.blade.php ing folder aset, ing ngendi kita bisa nggunakake komponen header.

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

saiki, liwat sistem saka nuntun saka laravel, kita nelpon agul-agul kanggo nampilake asil ing browser

Cara ngirim data menyang komponen Laravel

Kanggo ngirim data menyang komponen Blade sintaks ing ngisor iki digunakake, nemtokake nilai related kanggo parameter nang unsur HTML:

<x-header message=”Utenti” />

Contone, kita nggunakake komponen sadurunge ing file users.blade.php.

Sampeyan kudu definish data komponen ing file header.php. Kabeh data variabel umum kasedhiya kanthi otomatis kanggo tampilan komponen.

Tambah kode ing file header.php nang 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;

   }
}

Minangka sampeyan bisa ndeleng, metode konstruktor kelas nyetel variabel $title karo nilai parameter liwati kanggo komponen. Saiki nambah variabel $title ing file komponen header.blade.php kanggo nuduhake data kepungkur.

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

Saiki data komponen sing dikirim iki bakal ditampilake ing browser.

Kajaba iku, sampeyan bisa nggunakake komponen iki ing kaca visualisasi liyane kanthi data sing beda, kanthi nggawe file visualisasi liyane blade contact.blade.php lan nambah kode komponen ing ngisor iki kanggo nuduhake data liwati.

<x-header message=”Contact Us” />

Ing komponen, kadhangkala sampeyan kudu nemtokake atribut HTML tambahan, kayata jeneng kelas CSS, sampeyan bisa nambah langsung.

<x-header class=”styleDiv” />

Ercole Palmeri