Laravel Blade Components

Componets – Aus VueJS kennen wir es und haben es bereits lieben gelernt. In Laravel können wir im Blade auch sehr dynamisch in Componenten arbeiten. Von Hause gibt uns Laravel Componets mit.

Am Beispiel erklärt

Stellen wir uns vor, wir wollen ein Blog erstellen. In der Übersichtsseite, sollen die Blogartikel untereinander gelistet werden. Wer ohne Componets gerabeitet hatte, wird in einer @foreach Schleife die Artikel ausgelesen haben und innerhalb der Blade Direktive @foreach ein HTML Block befüllt haben. In etwas so:

@foreach ($posts as $post)
  <div>
    <h1>$post->title</h1>
    <p>$post->description</p>
  </div>
@endforeach 

Wir können nun aber auch:

<x-postListing :posts=”$posts”/> 

schreiben.

Jetzt wird die Componente PostListing aufgerufen und die Posts Collection wird mit übergeben. Dafür legen wir die Componente PostListing mal an.

php artisan make:component PostListing 

Laravel Artisan legt uns zwei Dateien an.

1. app/View/Components/PostListing.php

2. views/components/postListing.blade.php

1. app/View/Components/PostListing.php

 use Illuminate\View\Component;
 
 
 class Card extends Component
 {
      * Create a new component instance.
      *
      * @return void
      */
     public function __construct()
     {}
 
 
     /**
      * Get the view / contents that represent the component.
      *
      * @return \Illuminate\Contracts\View\View|\Closure|string
      */
     public function render()
     {
         return view('components.card');
     }
 } 

2. views/components/postListing.blade.php

<div>
     <!-- Knowing is not enough; we must apply. Being willing is not enough; we must do. - Leonardo  
</div>

Nun müssen wir der Componente erklären, dass sie den Parameter posts erhalten wird. Das geschieht im Constructor der Klasse.

public function __construct($post)
{
  $this->post = $post;
} 

Und ab jetzt ist die Varaible ibn der PostListing Blade auch verfügbar. Deshalb können wir die Collection mit einer Foreach durchlaufen lassen. Also fügen wir in unsere Blade ein:

@foreach ($posts as $post)
 {{$post}}
 <x-posts :posts=”$post”/>
@endforeach

Nun können wir das ganze noch weiter gehen. Ich meine damit das wir eine weitere Componente dem ganzen hinzufügen. Und zwar die Componente Card. Jeder Post soll in einer Card im Listing dargestellt werden. Damit würden wir ein Grundstein für eine saubere Blade / View Architektur unser App legen. Zum Beispiel könnten wir mehre Carddesigns besitzen und diese werden im PostLinsting getriggert.


Leave a Comment

Your email address will not be published. Required fields are marked *

*

*

Empfholende Artikel


Meine wichtigsten Artisan Commands

September 6, 2021

Als Laravel Entwickler braucht man sie ständig. Wenn man etwas länger Frontendarbeiten gemacht hat, kommt es schon mal vor, dass man etwas vergessen hat. Daher hier die Liste mit den häufigsten Artisan Commands: php artisan migrate:rollback –step=1 Ihr wollte eine oder x-beliebige Migrationen zurückspulen? Dann rollback und die Anzahl der Migrationssteps eingeben. php artisan migrate:refresh […]

Laravel – Slugs einrichten

September 2, 2021

Slugs machen die URLs Sprechender und damit auch SEO-(Freund)licher. Statt domain.de/posts/1 würde man mit domain.de/posts/mein-erster-blog-eintrag arbeiten. Um das in Laravel zu realisieren, bedient man sich in der Regel externer Bibliotheken. Einmal eine von Spartie und eine cviebrock. Man kann es natürlich aber auch selber machen. Die Bibliotheken sind hier aber vorzuziehen. Weil es ist keine […]

Laravel Resource – Kurz mal erklärt

August 26, 2021

Nutzen wir zum Beispiel Larvel als Backend und beliefern das Frontend via api Route mit Daten, dann stellt sich manchmal die Frage, welche Daten braucht das Frontend eigentlich? Braucht man wirklich created_at oder updated_at mit auszuliefern? Sobald man sich so eine oder ähnliche Frage stellt wird es Zeit sich mal mit Laravel Resource auseinander zu […]

Laravel Spatie Permission Package – Kurz mal erklärt

August 25, 2021

Die belgische „SoftwareGang“ Spatie haut ein coole Laravel Package nach dem anderen raus. Super nützlich und sehr angenehm zu nutzen. Heute gibt es einen Einstieg in das Package Spatie Permission Package. I. Einrichten 1. Schritt: 2. Schritt: Permission Service Provider anmelden Füge dafür den „PermissionServiceProvider“ in der Datei config/app.php ein. 3. Schritt: Kopiere die migration […]

Laravel Test möglicher Fehler – Unknown formatter “name”

April 17, 2021

Falls Du gerade Dein Test geschrieben hast und du deinen Test mit php artisan test startest kann es sein, dass Du folgende Fehlermeldung erhalten kannst: Was ist passiert? Wahrscheinlich hast Du in deiner seUp() Methode oder in deiner Testfunktion ein factory eingebaut. Zum Beispiel Da Laravel einige Optimierungen vorgenommen hat, kannst Du nicht die Standard […]

Eine einzelne Migration in Laravel ausführen

March 25, 2021

Aus unterschiedlichen Gründen kann es sein, dass man in einem Laravel Projekt eine spezielle Migration ausführen möchte. Zum Beispiel die zuletzt erstellte Migration. Ein anscheinend häufiger Grund für dieses Vorgehen könnte sein, dass in einer vorherigen Migrationsdatei ein Fehler auftreten würde. Und da Laravel die Migrationsdateien von der ältestesten zur jüngsten Migration abarbeitet, würde man […]