{"id":9971,"date":"2024-04-14T19:30:00","date_gmt":"2024-04-14T17:30:00","guid":{"rendered":"https:\/\/via-internet.de\/blog\/?p=9971"},"modified":"2024-04-16T10:16:29","modified_gmt":"2024-04-16T08:16:29","slug":"laravel-erstellen-eines-blade-layouts","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2024\/04\/14\/laravel-erstellen-eines-blade-layouts\/","title":{"rendered":"Laravel | Erstellen eines Blade Layouts"},"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 App<\/pre>\n\n\n\n
\u276f cd App\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 die Dashboard-Seite der Starter-App: dashboard.blade.php<\/code>. Es f\u00e4llt auf, das nur der eigentliche Inhalt definiert wird (z. B. der Willkommens-Text in Zeile 11). Das eigentliche “Aussehen” (Layout) wird abgeleitet von dem generellen App-Layout. Dies wird durch die folgende erste Zele erreicht:<\/p>\n\n\n\n
<x-app-layout><\/pre>\n\n\n\n
Wir wollen Seiten entwicklen, die ein unterschiedliches Aussehen haben. Daher wollen wir neben dem generellen App-Layout noch weitere Layouts erstellen.<\/p>\n\n\n\n
Ein weiteres Layout soll z. B. eine Seitenleiste erhalten, wir wollen es AppSidebarLayout<\/code> nennen.<\/p>\n\n\n\n
Verwendet wird es dann, wenn als erste Zeile die folgende verwendet wird:<\/p>\n\n\n\n
<x-app-sidebar-layout><\/pre>\n\n\n\n
Neue Seite erstellen<\/h2>\n\n\n\n
Im ersten Schritt erstellen wir zuerst eine neue Seite<\/p>\n\n\n\n
Blade-Datei f\u00fcr neue Seite erstellen<\/h3>\n\n\n\n
Kopieren sie die Datei dashboard.blade.php<\/code> nach page_with_sidebar.blade.php<\/code>.<\/p>\n\n\n\n
L\u00f6schen sie den Aufruf des Willkommens-Text in Zeile 11:<\/p>\n\n\n\n
<x-app-layout>\n    <x-slot name=\"header\">\n        <h2 class=\"font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight\">\n            {{ __('Dashboard') }}\n        <\/h2>\n    <\/x-slot>\n\n    <div class=\"py-12\">\n        <div class=\"max-w-7xl mx-auto sm:px-6 lg:px-8\">\n            <div class=\"bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg\">\n            <\/div>\n        <\/div>\n    <\/div>\n<\/x-app-layout>\n<\/pre>\n\n\n\n
Navigationsleiste erweitern<\/h3>\n\n\n\n
Erstellen Sie einen weiteren Navigationslink in der Datei resources\/views\/navigation-menu.blade.php<\/code>:<\/p>\n\n\n\n
<x-nav-link href=\"{{ route('page_with_sidebar') }}\" :active=\"request()->routeIs('page_with_sidebar')\">\n    {{ __('Page with Sidebar') }}\n<\/x-nav-link><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Wenn Sie jetzt die Seite aufrufen, dann bekommen Sie einen Fehler: die Route wurde nicht gefunden<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Routing hinzuf\u00fcgen<\/h3>\n\n\n\n
Erweitern Sie die Datei routes\/web.php<\/code> und die neue Route:<\/p>\n\n\n\n
 Route::get('\/page_with_sidebar', function () {\n        return view('page_with_sidebar');\n })->name('page_with_sidebar');<\/pre>\n\n\n\n
Ergebnis<\/h3>\n\n\n\n
So sieht dann unsere Seite aus:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Neues Layout verwenden<\/h3>\n\n\n\n
Nun \u00e4ndern wir das Layout unserer neuen Seite in Zeile 1 und Zeile 14<\/p>\n\n\n\n
<x-app-sidebar-layout><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Wenn Sie jetzt alles speichern und die Seite aktualisieren (im Browser) bekommen sie wie zu Erwarten eine Fehlermeldung:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Lassen Sie uns also das neue Layout erstellen.<\/p>\n\n\n\n
Neues Layout erstellen<\/h2>\n\n\n\n
Kopieren der Datei resources\/views\/layouts\/app.blade.php<\/code> nach resources\/views\/layouts\/app_with_sidebar.php<\/code>.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\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 die Dashboard-Seite der Starter-App: dashboard.blade.php. Es f\u00e4llt auf, das nur der eigentliche Inhalt definiert wird (z. B. der Willkommens-Text in Zeile 11). Das eigentliche “Aussehen” (Layout) wird abgeleitet von dem generellen App-Layout. Dies wird durch die folgende erste Zele erreicht: Wir wollen Seiten entwicklen, die ein unterschiedliches Aussehen haben. Daher wollen wir neben dem […]<\/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-9971","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\/9971","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=9971"}],"version-history":[{"count":6,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9971\/revisions"}],"predecessor-version":[{"id":9988,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9971\/revisions\/9988"}],"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=9971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=9971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=9971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}