Articoli

Cosa sono i componenti di Laravel e come si usano

I componenti di Laravel sono una funzionalità avanzata, che viene aggiunta dalla settima versione di laravel. In questo articolo andremo a vedere cos’è il componente, come crearlo, come utilizzare i componenti nel modello blade e come parametrizzare il componente passando dei parametri.

Cos’è il componente Laravel?

Un componente è un pezzo di codice che possiamo riutilizzare in qualsiasi template blade. È qualcosa di simile a sezioni, layout e include. Ad esempio, utilizziamo la stessa intestazione per ogni modello, quindi possiamo creare un componente Header, che possiamo riutilizzare.

Un altro utilizzo dei componenti per una migliore comprensione è come se fosse necessario utilizzare un pulsante di registrazione sul sito Web in molti punti, come nell’intestazione, nel piè di pagina o in qualsiasi altro punto del sito Web. Quindi crea un componente di quel codice pulsante e riutilizzalo.

Come creare componenti in Laravel

Ad esempio, creiamo un componente Header con l’Artisan:

php artisan make:component Header

Questo comando crea due file nel tuo progetto laravel:

  • un file PHP con il nome Header.php all’interno della directory app/http/View/Components;
  • e un file blade HTML con il nome header.blade.php all’interno della directory resources/views/components/.

Puoi anche creare componenti in una sottodirectory, come ad esempio:

php artisan make:component Forms/Button

Questo comando creerà un componente pulsante nella directory App\View\Components\Forms e il file blade verrà inserito nella directory resources/views/components/forms.

Per il rendering del componente nel file blade HTML, useremo questa sintassi:

<x-ComponentName/>

Esempio di componenti di Laravel

Per prima cosa inseriamo del codice HTML nel file header.blade.php del componente.

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

ora crea un file di visualizzazione users.blade.php nella cartella delle risorse, in cui possiamo utilizzare il componente header.

Articoli correlati
Newsletter sull’Innovazione
Non perderti le notizie più importanti sull'Innovazione. Iscriviti per riceverle via e-mail.
<x-header /><h1>User Page</h1>

ora, tramite il sistema di routing di laravel, richiamiamo il blade per visualizzare nel browser il risultato

Come passare dati ai componenti di Laravel

Per passare i dati al componente Blade si usa la seguente sintassi, specificando il valore relativo al parametro all’interno dell’elemento HTML:

<x-header message=”Utenti” />

Ad esempio, abbiamo utilizzato il componente precedente nel file users.blade.php.

Dovresti definire i dati del componente nel file header.php. Tutti i dati delle variabili pubbliche erano automaticamente disponibili per la vista del componente.

Aggiungere il codice nel file header.php all’interno della directory 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;

   }
}

Come puoi vedere, il metodo costruttore della classe imposta la variabile $title con il valore del parametro passato al componente. Ora aggiungi la variabile $title nel file del componente header.blade.php per mostrare i dati passati.

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

Ora questi dati dei componenti trasmessi verranno visualizzati nel browser.

Allo stesso modo, puoi utilizzare questo componente su un’altra pagina di visualizzazione con dati diversi, creando un altro file di visualizzazione blade contact.blade.php e aggiungere sotto il codice del componente per mostrare i dati passati.

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

Nel componente, a volte è necessario specificare attributi HTML aggiuntivi, come il nome della classe CSS, è possibile aggiungerlo direttamente.

<x-header class=”styleDiv” />

Ercole Palmeri

Newsletter sull’Innovazione
Non perderti le notizie più importanti sull'Innovazione. Iscriviti per riceverle via e-mail.

Articoli recenti

Nasce Nim, l’Osservatorio del Nord-Est sull’economia dell’innovazione

Nasce l’Osservatorio del Nordest sull’economia dell’Innovazione Nim, (Numbers Innovation Motion) è un progetto di Galileo Visionary District realizzato in collaborazione…

7 Dicembre 2023

Innovazione del Content Marketing con Memory e Personality

ASKtoAI lancia le innovative funzionalità Memory e Personality, strumenti d'avanguardia per la creazione di contenuti digitali che promettono di migliorare…

6 Dicembre 2023

Discuss apre una nuova era di ricerca qualitativa con GenAI ampliata e innovazione asincrona

Discuss , la piattaforma leader appositamente creata per trasformare le esperienze in insight, ha potenziato le sue capacità di scalare la…

6 Dicembre 2023

Unwrapping Innovation: Blue Lake Packaging annuncia un’alternativa a base di fibra e priva di plastica al nastro e ai dispenser tradizionali

Con le festività che si avvicinano rapidamente, Blue Lake Packaging è entusiasta di offrire un'alternativa ecologica al nastro da imballaggio…

6 Dicembre 2023

Riepilogo del Netlogistik Innovation Day: trasformazione digitale della catena del freddo, innovazioni nel riciclaggio e leadership nella supply chain

Netlogistik , leader in potenti servizi che guidano le aziende verso la trasformazione digitale della catena di fornitura, ha recentemente tenuto…

6 Dicembre 2023

Lattice collabora con NVIDIA per accelerare l’IA edge

Annuncia una soluzione integrata che combina FPGA di Lattice a bassa potenza e bassa latenza con la piattaforma NVIDIA Orin…

6 Dicembre 2023

Evoluzione del tessile: il progetto TEPP della Taiwan Textile Federation ispira l’innovazione sostenibile oltre il 2023

Con un successo clamoroso, il Textile Export Promotion Project (TEPP), guidato dalla Taiwan Textile Federation nel 2023, ha messo in…

5 Dicembre 2023

Lattice continua la rapida espansione del portafoglio di prodotti che rende possibile la prossima era dell’innovazione

Lattice presenta i nuovi FPGA mid-range Lattice Avant-G e Lattice Avant-X, stack di soluzioni specifiche per le applicazioni ampliate e…

5 Dicembre 2023

Scopri di più sulla gestione della conoscenza e sull’innovazione per gli studi legali con un nuovo trattato scritto da esperti

Innovazione per i professionisti della gestione della conoscenza e dell'innovazione (KM&I). Nel settore legale è ora disponibile un riferimento completo…

5 Dicembre 2023

La Fondazione Eclipse lancia il gruppo di lavoro Eclipse Dataspace per promuovere l’innovazione globale nella condivisione affidabile dei dati

La Eclipse Foundation , una delle più grandi fondazioni di software open source al mondo, ha annunciato oggi la formazione dell'Eclipse…

5 Dicembre 2023