Laravel – Erste Schritte im Template System

Ich habe im ersten Beitrag erklärt wie man Laravel mit Composer installiert – nun zeige ich euch wie man sein erstes Template erstellt und worauf man achten sollte.

Wir bewegen uns erst einmal in das Root Verzeichnis von unserer Laravel Installation und legen dort einen Ordner layouts an und erstellen die Datei app.blade.php

cd /var/www/laravel
mkdir resources/views/layouts
touch resources/views/layouts/app.blade.php

Dort können wir den Inhalt aus der Laravel Dokumentation kopieren und einfügen

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

Um den Inhalt zu sehen müssen wir die Datei mit nano routes/web.php bearbeiten. Dort ist nach der Standardinstallation nur eine Route eingetragen – diese passen wir nun auf

Route::get('/', function () {
    return view('layouts.app');
});

an, denn damit kommen wir in die views/layouts/app.blade.php . Etwas außergewöhnlich diese mit einem Punkt zu trennen. Aber jedem Entwickler nach seiner Façon.

Um die Nutzung von @yield, @section und @extends am besten zu zeigen erstellen wir eine zweite View Datei.

nano resources/views/child.blade.php

Dort fügen wir folgenden Code ein:

@extends('layouts.app')

@section('title', 'Page Title')

@section('sidebar')
    @parent

    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
    <p>This is my body content.</p>
@endsection

Nun fügen wir der web.php Datei in routes noch folgendes hinzu um die Seite auch unter laravel.de/blade abrufen zu können (ich habe für den Aufruf meine Host Datei umgebogen).

Route::get('blade', function () {
    return view('child');
});

Nun sollten wir unter der URL laravel.de/blade folgendes sehen:

Ich habe für die weiteren ersten Schritte dafür allerdings ein Bootstrap Template genutzt. Das ist etwas schicker und erspart uns das bauen von eigenen CSS Klassen etc.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        /* Remove the navbar's default margin-bottom and rounded borders */
        .navbar {
            margin-bottom: 0;
            border-radius: 0;
        }

        /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
        .row.content {height: 450px}

        /* Set gray background color and 100% height */
        .sidenav {
            padding-top: 20px;
            background-color: #f1f1f1;
            height: 100%;
        }

        /* Set black background color, white text and some padding */
        footer {
            background-color: #555;
            color: white;
            padding: 15px;
        }

        /* On small screens, set height to 'auto' for sidenav and grid */
        @media screen and (max-width: 767px) {
            .sidenav {
                height: auto;
                padding: 15px;
            }
            .row.content {height:auto;}
        }
    </style>
</head>
<body>

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Logo</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="/blade">Child</a></li>
                <li><a href="/test1">Test1</a></li>
                <li><a href="/test2">Test2</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container-fluid text-center">
    <div class="row content">
        <div class="col-sm-2 sidenav">
            @section('sidebar')

        </div>
        <div class="col-sm-8 text-left">
            @yield('content')
        </div>
        <div class="col-sm-2 sidenav">
            <div class="well">
                <p>ADS</p>
            </div>
            <div class="well">
                <p>ADS</p>
            </div>
        </div>
    </div>
</div>

<footer class="container-fluid text-center">
    <p>Footer Text</p>
</footer>

</body>
</html>

Jetzt könnt Ihr erst einmal mit dem Template herum experimentieren – weitere Schritte wie das einbinden von CSS/JS Dateien folgt im nächsten Artikel.

Schreibe einen Kommentar Antworten abbrechen