Machen wir doch mal Laravel - Teil 3

In Teil 1 haben wir Laravel installiert und unser eigenes Template erstellt. In Teil 2 haben wir dann die Datenbank modelliert und ein Model erstellt. Nun werden wir endlich eine Website erstellen, also unsere Postings auf einer Seite darstellen. Das Ergebnis wird in etwa so aussehen:

Preview Seite

Unser Controller

Moderne MVC-Frameworks legen die Programmlogik in sogenannte Controller. Diese Dinger steuern die Abfragen der Daten, verwalten die Daten, führen evtl. auch Berechnungen durch und geben das an den View weiter. Also kommen die Daten aus dem MODEL, gehen in den CONTROLLER und werden dann im VIEW ausgegeben. Meiner Meinung nach müsste der Mist Modelcontrollerview heißen, aber was weiß ich schon. Lass uns nun einen Controller erstellen.

php artisan make:controller BlogController

Symfony erstellt eine Klasse im Ordner app/Http/Controllers/ und wir verändern die Klasse nun spontan und schreiben eine eigene Funktion rein:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class BlogController extends Controller
{
public function BlogIndex($page=0)
{
$entries = \App\Blogposts::orderBy('created_at', 'desc')
->where('visible', 1)
->paginate(20);
return view('home', ['entries' => $entries]);
}
}

Ui! WTF!? hat der Marcel DA denn jetzt alles geschrieben? (Es funktioniert, so weit kann ich schonmal Entwarnung geben)

Ich habe eine Methode namens BlogIndex gemacht. Also quasi die Index-Aktion vom Blog. Hier sollen alle Blogeinträge „$entries“ dargestellt werden. Ich hole aus dem Blogposts-Modell alle Einträge heraus und sortiere diese absteigend nach dem Erstelldatum. Natürlich nur diejenigen, die „visible“ sind. Und ich will auch nur 20 Einträge pro Seite darstellen.

Ich gebe dann einen „view“ namens home aus. An den View übergebe ich die Einträge.

Ich habe es gefeiert, dass Laravel direkt Paginations hat. Das ist bei Plain-PHP echt eine Höllenaufgabe, daher bin ich hier froh, dass man das so machen kann. Aber gut, bisher wird noch nichts angezeigt. Genau genommen passiert hier noch gar nichts.

Variablen im Template ausgeben

Oben steht ja diese Zeile

return view('home', ['entries' => $entries]);

und diese Zeile öffnet die Datei home und schreibt das in Entries die Objekte aus unsere Datenbank-Abfrage. Also erstellen wir erstmal die resources/views/home.blade.php und schreiben dies hinein:

@foreach ($entries as $item)
<div class="row">
<div class="twelve columns">
<h2>{{ $item->title }}</h2>
{!! $item->contents !!}
</div>
</div>
@endforeach

Ist noch gar nicht so schwer, oder? Wir wollen auch, dass dies angezeigt wird, wenn die Startseite aufgerufen wird. Wie in Teil 1 schon geschildert, werden Routen in Laravel in der Datei /routes/web.php festgelegt. Also nehmen wir die alte Route raus und ändern die Datei so um:

Route::get('/', 'BlogController@BlogIndex');

Wenn wir jetzt im Browser wieder unser Projekt aufrufen, werden tatsächlich unsere 3 Postings angezeigt. Wir haben ein Laravel-Programm geschrieben, welches sogar funktioniert Und dafür haben wir gerade mal ein paar Minuten gebraucht.

3 Postings

Doch halt, das sieht doch doof aus! Wofür haben wir denn mühevoll das Template aus Teil 1 gebaut?! Wir müssen etwas tun. Zum einen werde ich euch nun zeigen, wie man Laravel Mix verwendet und ich werde nun zeigen, wie ich mein Blade-Template verändere.

SCSS anstelle von CSS

In Teil 1 haben wir klassische CSS-Dateien verwendet. Es muss aber ja ratzfatz gehen, ich werde also das Skeleton-Framework per yarn einbinden. Yarn ist vergleichbar mit NPM, das muss erstmal reichen. Falls du yarn noch nicht installiert hast, solltest du das nun tun:

npm i -g yarn

Nachdem wir yarn installiert haben, führen wir einmal in unserem larablog-Projektverzeichnis den Befehl yarn aus. Es werden so diverse Abhängigkeiten für Laravel Mix aufgelöst, auf die ich aktuell nicht eingehen möchte.

Nun installieren wir skeleton-scss

yarn

yarn add skeleton-scss

Und jetzt schreiben wir noch einmal unser larablog.blade.php-Template ein wenig um. Wir nehmen die Verweise auf normalize.css und skeleton.css heraus und schreiben stattdessen dies hier:

<link rel="stylesheet" href="{{ asset('css/app.css') }}" type="text/css">

Nun müssen wir noch dafür sorgen, dass unsere SCSS-Dateien auch wirklich kompiliert werden, daher öffnen wir die app.scss-Datei im Verzeichnis /resources/sass/:

Wir schmeissen alles raus und schreiben nur noch das hier rein:

@import '~skeleton-scss/scss/skeleton.scss';

Das ist doch mal sexy.

Nun kompilieren wir das ganze:

yarn run dev

Laravel erstellt nun eine CSS-Datei. Die ist noch nicht komprimiert, wir machen ja schließlich erst mal nur Entwicklungskram. Du kannst auch yarn run prod ausführen, dann werden deine CSS-Dateien auch gleich komprimiert, was die Ladezeiten natürlich verbessert.

Öffnen wir nun das larablog.blade.php - Template und gucken nochmal, was alles drin steht:

Den Content im Layout laden

larablog.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Wir laden nun komprimierte CSS-Dateien //-->
<link rel="stylesheet" href="{{ asset('css/app.css') }}" type="text/css">
</head>
<body>
<!-- Das hier bestimmt die eigentliche Seitenbreite //-->
<div class="container">
<div class="row">
<div class="two columns">
<!-- Hier kommt die Menüstruktur //-->
</div>
<div class="ten columns">
<!-- Was zur Hölle ist das hier? Das steht im Tutorial! //-->
@yield('contents')
</div>
</div>
</div>
</body>
</html>

Wir haben das Template nun ein wenig angepasst. Ein blade-Befehl namens „yield“ wird hier verwendet. Yield bedeutet so etwas wie „Ausbeute“ oder Ergebnis. Hier wird also der Inhalt aus dem Bereich „contents“ dargestellt, doch wie erstelle ich den Bereich (die Sektion = section) namens Contents. Da wir unser home.blade.php auf der Route / laden, muss ich dieses Template nun auch noch einmal öffnen. Das sieht jetzt so aus:

{{-- This is a comment. This comment tells you, that home.blade actually extends our main template --}}
@extends('larablog')
 
{{-- This is the section that will be 'yield'ed in that parent template. So whatever you see here, will be included in that layout --}}
@section('contents')
 
@foreach ($entries as $item)
<div class="row">
<div class="twelve columns">
<h2>{{ $item->title }}</h2>
{!! $item->contents !!}
</div>
</div>
@endforeach
<div class="row">
{{ $entries->links() }}
</div>
 
@endsection

Eine Menge ist passiert. Wir sagen Laravel, dass home.blade.php eine Erweiterung („extends“) vom larablog-Template ist. In larablog haben wir festgelegt, dass „contents“ im breiten DIV-Container dargestellt werden soll. Also lädt Laravel nun unser Layout und inkludiert alles, was in Section 'contents' gespeichert wurde, innerhalb der Hauptseite.

Wir haben nun tatsächlich ein einigermaßen ansehnliches Template erstellt. Ich bin entzückt und ihr?

Den Quellcode von  Larablog findest du auf Github. https://github.com/marcshake/larablog

Magst du, was du liest? Dann lass mir doch eine Spende da.


Machen wir doch mal Laravel Machen wir doch mal Laravel - Teil 2 - die Datenbank Machen wir doch mal Laravel - Teil 3 Machen wir doch mal Laravel - Teil 4 - Nochmal ein wenig Styling
Lesezeit: 05:51 Minuten
1  

Diese Website nutzt Cookies. Inder Datenschutzerklärung steht, was mit deinen Daten hier passiert… Hab ich verstanden