Cilat janë komponentët e Laravel dhe si t'i përdorni ato

Komponentët Laravel janë një veçori e avancuar, e cila shtohet nga versioni i shtatë i Laravel. Në këtë artikull do të shohim se çfarë është komponenti, si ta krijojmë atë, si të përdorim komponentët në modelin e tehut dhe si të parametrizojmë komponentin duke kaluar parametra.

Çfarë është Komponenti Laravel?

Një komponent është një pjesë kodi që mund ta ripërdorim në çdo shabllon. Është diçka si seksione, paraqitje dhe përfshin. Për shembull, ne përdorim të njëjtin titull për çdo shabllon, kështu që mund të krijojmë një komponent Header, të cilin mund ta ripërdorim.

Një përdorim tjetër i komponentëve për të kuptuar më mirë është sikur ju duhet të përdorni një buton regjistrimi në uebsajt në shumë vende si në kokë, në fund të faqes ose kudo tjetër në faqen e internetit. Kështu që krijoni një komponent të kodit të atij butoni dhe ripërdoreni atë.

Si të krijoni komponentë në Laravel

Për shembull, le të krijojmë një komponent Header Me'Artisan:

php artisan make:component Header

Kjo komandë krijon dy skedarë në projektin tuaj laravel:

• një skedar PHP me emrin Header.php brenda drejtorisë app/http/View/Components;
• dhe një skedar teh HTML me emrin header.blade.php brenda drejtorisë resources/views/components/.

Ju gjithashtu mund të krijoni komponentë në një nëndrejtori, të tilla si:

php artisan make:component Forms/Button

Kjo komandë do të krijojë një komponent butoni në drejtori App\View\Components\Forms dhe skedari blade do të vendoset në drejtorinë e burimeve/pamjeve/komponenteve/formave.

Për paraqitjen e komponentit në skedarin HTML blade, ne do të përdorim këtë sintaksë:

Shembull i komponentëve Laravel

Së pari ne futim një kod HTML në skedar header.blade.php të komponentit.

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

tani krijoni një skedar pamjeje users.blade.php në dosjen e aseteve, ku mund të përdorim komponentin e kokës.

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

tani, përmes sistemit të kurs e laravel, ne e quajmë blade për të shfaqur rezultatin në shfletues

Si të kaloni të dhënat tek komponentët e Laravel

Për të kaluar të dhëna te komponenti Blade përdoret sintaksa e mëposhtme, duke specifikuar vlerën që lidhet me parametrin brenda elementit HTML:

<x-header message=”Utenti” />

Për shembull, ne kemi përdorur komponentin e mëparshëm në skedarin users.blade.php.

Ti duhet definish të dhënat e komponentit në skedarin header.php. Të gjitha të dhënat e ndryshores publike ishin automatikisht të disponueshme për pamjen e komponentit.

Shtoni kodin në skedar header.php brenda direktorisë së aplikacionit/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;

   }
}

Siç mund ta shihni, metoda e konstruktorit të klasës vendos variablin $title me vlerën e parametrit të kaluar në komponent. Tani shtoni variablin $title në skedarin e komponentit header.blade.php për të treguar të dhënat e kaluara.

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

Tani këto të dhëna të komponentit të transmetuar do të shfaqen në shfletues.

Në mënyrë të ngjashme, mund ta përdorni këtë komponent në një faqe tjetër vizualizimi me të dhëna të ndryshme, duke krijuar një skedar tjetër vizualizimi blade contact.blade.php dhe shtoni kodin e komponentit më poshtë për të treguar të dhënat e kaluara.

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

Në komponent, ndonjëherë ju duhet të specifikoni atribute shtesë HTML, të tilla si emri i klasës CSS, ju mund ta shtoni atë drejtpërdrejt.

<x-header class=”styleDiv” />

Ercole Palmeri