{"id":9941,"date":"2024-04-11T11:08:14","date_gmt":"2024-04-11T09:08:14","guid":{"rendered":"https:\/\/via-internet.de\/blog\/?p=9941"},"modified":"2024-04-11T12:07:40","modified_gmt":"2024-04-11T10:07:40","slug":"laravel-erstellen-einer-blade-komponente","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2024\/04\/11\/laravel-erstellen-einer-blade-komponente\/","title":{"rendered":"Laravel | Erstellen einer Blade Komponente"},"content":{"rendered":"\n

TL;DR<\/h2>\n\n\n\n

Der Code f\u00fcr die in diesem Post erstelle Anwendung liegt hier<\/a>.<\/p>\n\n\n\n

Einrichten der Starter-App<\/h2>\n\n\n\n

Erstellen der Starter App. In diesem<\/a> Post beschreibe ich, wie sie eine Starter-App erstellen und die grundlegenden Anpassungen durchf\u00fchren k\u00f6nnen.<\/p>\n\n\n\n

Sie k\u00f6nnen auch direkt mit dem dazugeh\u00f6rigen Repository starten:<\/p>\n\n\n\n

\u276f git clone https:\/\/github.com\/r14r\/Laravel_Tutorial_Erstellen-einer-Starter-App Laravel_Tutorial_Arbeiten-mit-htmx<\/pre>\n\n\n\n
\u276f composer install\n\u276f npm install\n\u276f npm run build<\/pre>\n\n\n\n
\u276f cp .env.example  .env\n\u276f php artisan migrate\n\u276f php artisan key:generate<\/pre>\n\n\n\n
\u276f php artisan serve<\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Motivation<\/h3>\n\n\n\n
Betrachten wir sie Startseite der Starterapp: welcome.blade.php<\/code>. Es f\u00e4llt auf, das es viele Code-Wiederholungen gibt,  z. B bei den \u00dcberschriften<\/p>\n\n\n\n
1013: <h2 class=\"text-xl font-semibold text-black dark:text-white\">Laracasts<\/h2>\n1047: <h2 class=\"text-xl font-semibold text-black dark:text-white\">Laravel News<\/h2>\n1077: <h2 class=\"text-xl font-semibold text-black dark:text-white\">Vibrant Ecosystem<\/h2><\/pre>\n\n\n\n
Nicht nur, das mehrfach den gleichen Code geschrieben wurde, auch bei \u00c4nderungen muss an mehreren Stellen ge\u00e4ndert werden.<\/p>\n\n\n\n
Dabei sollte aus Designer-Sicht das Layout oder Aussehend der Seite aus “logischen” Bestandteilen bestehen, z. B. einer \u00dcberschrift, einer Kopfzeile, einen Textabschnitt.<\/p>\n\n\n\n
Das aussehen dieser Bestandteile wird dann an andere Stelle festgelegt, aber jeder dieser Bestandteile hat das gleiche Aussehen.<\/p>\n\n\n\n
Unsere Startseite w\u00fcrde dann vielleicht so aussehen:<\/p>\n\n\n\n
<starter-header>Laracasts<\/starter-header>\n<starter-header>Laravel News<\/starter-header>\n<starter-header>Vibrant Ecosystem<\/starter-header><\/pre>\n\n\n\n
F\u00fcgen wird diesen Bestandteile auch noch Parameter hinzu, so vereinfacht sich die Startseite so:<\/p>\n\n\n\n
<starter-header title=\"Laracasts\"\/>\n<starter-header title\"Laravel News\" \/>\n<starter-header title=\"Vibrant Ecosystem\" \/><\/pre>\n\n\n\n
Um dies zu implementieren, setzen wir Blade<\/a> Komponenten ein.<\/p>\n\n\n\n
Hinweis: Der Begriff Blade kommt ihnen vielleicht bekannt vor. Sie haben ihn bestimmt schon in den Dateinamen gesehen:<\/p>\n\n\n\n
welcome.blade.php<\/pre>\n\n\n\n
Was ist Blade. <\/h2>\n\n\n\n
Die Projektseite formuliert es so:<\/p>\n\n\n\n
Blade is the simple, yet powerful templating engine that is included with Laravel.<\/cite><\/blockquote>\n\n\n\n
Oder, wie Wikipedia es formuliert: <\/p>\n\n\n\n
Funktional erweiterbare Templating-Sprache zur Erstellung von Views.<\/em><\/p>\n\n\n\n
\n
Blade ist Funktional erweiterbare Templating-Sprache zur Erstellung von Views.<\/em>.
Eine\u00a0Template-Engine<\/strong>\u00a0(von\u00a0englisch\u00a0f\u00fcr\u00a0Vorlage<\/em>\u00a0bzw.\u00a0Schablone<\/em>\u00a0und\u00a0Maschine<\/em>) ist eine\u00a0Software, die eine Vorlagen-Datei (engl.\u00a0Template) verarbeitet und bestimmte Platzhalter darin \u00e4hnlich wie bei einem Formular durch jeweils aktuelle Inhalte ersetzt.\u00a0<\/p>\n<\/blockquote>\n\n\n\n
Unsere Blade besteht also nicht nur aus grafischen Elementen, z. B. Text, Icon, Auswahlbox. Sondern auch aus Programmkomponenten um diese Seite mit dynamischen Werten zu f\u00fcllen.<\/p>\n\n\n\n
Bezogen auf unser Beispiel des <starter-header> <\/code>besteht der dynamische Teil aus dem tat\u00e4chlich anzuzeugendem Text. Dadurch kann diese Komponente an beliebiger Stelle eingesetzt werden und jedesmal einen anderen Text darstellen, immer mit dem gleichen Aussehen.<\/p>\n\n\n\n
Erstellen wir also unsere erste Komponente.<\/p>\n\n\n\n
Blade Komponente erstellen<\/h2>\n\n\n\n
Wir erstellen eine Komponente mit dem nachfolgenden Kommando:<\/p>\n\n\n\n
\u276f php artisan make:component StarterHeader<\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Dadurch werden zwei neue Dateien erstellt:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
    \n
  • resources\/views\/components\/starter-header.blade.php<\/code>
    In dieser Datei wird das Aussehen der Komponente festgelegt, Dabei k\u00f6nnen zus\u00e4tzlich “Variablen” (also die dynamischen Teile) verwende werden.<\/li>\n\n\n\n
  • app\/View\/Components\/StarterHeader.php<\/code>
    Diese ist die zum Blade-View zugeh\u00f6roge PHP-Klasse. In dieser Daten wird die Verbindung zwischen dem Komponentennamen (starter-header) und dem dazugeh\u00f6rigen View definiert. Zus\u00e4tzlich werden hier auch die dynamischen Teile festgelegt, also die Parameter f\u00fcr unsere Komponente (im Beispiel “title”)<\/li>\n<\/ul>\n\n\n\n
    Blade Komponente konfigurieren <\/h2>\n\n\n\n
    PHP Klasse: app\/View\/Components\/StarterHeader.php<\/code><\/h3>\n\n\n\n
    Betrachten wird im ersten Schritt die PHP Klasse der Komponente: app\/View\/Components\/StarterHeader.php<\/code><\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
      \n
    • Der Name der Klasse in Zeile 9: StarterHeader<\/code><\/li>\n\n\n\n
    • Den dazugeh\u00f6rigen Blade-View in Zeile 24: components.starter-header<\/code><\/li>\n<\/ul>\n\n\n\n
      F\u00fcgen wir nun einen Parameter f\u00fcr unsere Komponente hinzu: title<\/code><\/p>\n\n\n\n
          public $title;\n\n    public function __construct($title = 'Header')\n    {\n        $this->title = $title;\n    }<\/pre>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Wird in einer Blade-Seite einen Komponenten verwendet, so wird der Konstruktor (__construct)<\/code> dieser Komponente aufgerufen, um den notwendigen Programmcode zu erstellen.<\/p>\n\n\n\n
      Die beim Aufruf angegebene Parameter werden diesem Konstruktor \u00fcbergeben.<\/p>\n\n\n\n
      Der Aufruf:<\/p>\n\n\n\n
      <starter-header title=Laravel\" \/><\/pre>\n\n\n\n
      f\u00fchrt zu einem Aufruf des Konstruktor __construct(\"Laravel\")<\/code>. Der Parameter $title<\/code> wird dabei durch den angegebene Wert \"Laravel\"<\/code> ersetzt.<\/p>\n\n\n\n
      Blade View: resources\/views\/components\/starter-header.blade.php<\/h3>\n\n\n\n
      Betrachten wir nun den Blade-View in der Datei resources\/views\/components\/starter-header.blade.php<\/code>:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Der View hat noch sehr wenig Inhalt. Wir ersetzen nun den vorhandenen Inhalt mit dem Inhalt aus der Datei welcome.blade.php<\/code>, der f\u00fcr die Formatierung und Darstellung es Headers verwendet wird:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Wir sehen zwei Header: in Zeile 1013 und in Zeile 1047. Beide beinhalten die gleichen HTML-Anweisungen und unterscheiden sich nur im Text des Headers:<\/p>\n\n\n\n
      <h2 class=\"text-xl font-semibold text-black dark:text-white\">Laracasts<\/h2><\/pre>\n\n\n\n
      Wir kopieren also diese Anweisungen in unseren Blade-View. Dabei ersetzen wir gleichzeitig den (statischen) Text, z. B. Laracast<\/em>, durch unsere Variable $title<\/code>, die den gew\u00fcscnhten Titel enth\u00e4lt.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Hinweis: Damit Blade erkenne kann, wann HTML Code verwendet wird und wann Programmcode, wird dieser durch die Zeichen {{<\/code> und }}<\/code> umschlossen.<\/p>\n\n\n\n
      In unserer Seite welcome.blade.php<\/code> k\u00f6nnen wir nun die Komponente einsetzen und den vorhandenen Text ersetzen:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Wichtig: Beachten Sie, das wir dem Komponentennamen mit x-<\/code> beginnen m\u00fcssen:<\/p>\n\n\n\n
      <x-starter-header title=\"Vibrant Ecosystem\" \/><\/pre>\n\n\n\n
      <\/p>\n","protected":false},"excerpt":{"rendered":"
      TL;DR Der Code f\u00fcr die in diesem Post erstelle Anwendung liegt hier. Einrichten der Starter-App Erstellen der Starter App. In diesem Post beschreibe ich, wie sie eine Starter-App erstellen und die grundlegenden Anpassungen durchf\u00fchren k\u00f6nnen. Sie k\u00f6nnen auch direkt mit dem dazugeh\u00f6rigen Repository starten: Motivation Betrachten wir sie Startseite der Starterapp: welcome.blade.php. Es f\u00e4llt auf, das es viele Code-Wiederholungen gibt, z. B bei den \u00dcberschriften Nicht nur, das mehrfach den gleichen Code geschrieben wurde, auch bei \u00c4nderungen muss an mehreren Stellen ge\u00e4ndert werden. Dabei sollte aus Designer-Sicht das Layout oder Aussehend der Seite aus “logischen” Bestandteilen bestehen, z. B. einer \u00dcberschrift, […]<\/p>\n","protected":false},"author":1,"featured_media":8087,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[99,57],"tags":[],"class_list":["post-9941","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","category-php"],"jetpack_featured_media_url":"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/07\/Laravel-Installation-einer-Beispielanwendung.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=9941"}],"version-history":[{"count":9,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9941\/revisions"}],"predecessor-version":[{"id":9965,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9941\/revisions\/9965"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media\/8087"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=9941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=9941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=9941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}