Laravel Anfänger und Einsteiger Tutorial

In diesem Tutorial fahren wir fort ein eigenes Social Network zu erstellen. Falls composer noch nicht auf dem Computer installiert wurde bzw. noch kein neues Laravel Projekt mit dem Namen network erstellt wurde, bitte zunächst auf der ersten Seite die notwendigen Schritte durcharbeiten.

Erste Inhalte mit Laravel Blade

Laravel UI Package installieren

Laravel hat seit bestehen eigene Frontend Dateien mitgebracht inklusive eines sogenannten Bootstrap’s. Dieses stellt eine Bibliothek nützlicher CSS und HTML Klassen bereit. Seit Laravel 6.x wurde dieses Paket deklariert als Tools für eine Oberfläche (also ein User Interface, kurz UI) und somit nicht für jeden Einsatzzweck nötig. Daher hat man kurzerhand u.a. den Bootstrap-Teil in ein Paket laravel/ui ausgelagert, welches wir nun mit folgendem Befehl installieren. Der Zusatz –dev sagt dem Composer, dass er das neue Paket aber nur für unsere Entwicklungsumgebung bereitstellen soll nicht hingegen auf etwaigen Produktivumgebungen wie Live-Servern.

composer require laravel/ui --dev

Die Ausgabe im Terminal sieht dann “ungefähr” wie folgt aus (gekürzt):

composer require laravel/ui --dev
    1/6:	http://repo.packagist.org/p/provider-2019-10$58e57b73efa2b75321c5961b7d2cf340b2c1cd47041deaaa5146843fa7e55710.json
    2/6:	http://repo.packagist.org/p/provider-latest$3671380cfefba4806526c4934438aa06edd80879515aeec07508d302eacec596.json
    3/6:	http://repo.packagist.org/p/provider-2015$edc040f2b7284f13eb102a1c7004f67c8a1e6fef860b2f1417e0991e60c2dcf6.json
    4/6:	http://repo.packagist.org/p/provider-2016$801700a42a936a4663f87584be5915737a8c40038fd0297bf70539eeb9905639.json
    5/6:	http://repo.packagist.org/p/provider-2019-07$841d07bf7d932f26532e2ec1a4cf062a40494f24d5cb97c283c05688ecb2d357.json
    6/6:	http://repo.packagist.org/p/provider-2018$685759e72e9d00b765c530ebf1446c2c8673f7e5bfa18ccd9a45c65c6287d7e9.json
    Finished: success: 6, skipped: 0, failure: 0, total: 6
Using version ^1.1 for laravel/ui
./composer.json has been updated
    1/3:	http://repo.packagist.org/p/provider-latest$61881b2b321cfc4b3f4c8031844d95ec2933ad8bd90a6d2a6da2fbb6e37ce0e3.json
    2/3:	http://repo.packagist.org/p/provider-2017$a3b3e672ceffb3e7fb16eea41bfdea8c4941f2561b5d24ba4a216a1cc21b016a.json
    3/3:	http://repo.packagist.org/p/provider-2018$bfb2e2ba5ef33c42a96dc81923edff144c4bcab96caed62e316a1136c6dc1c30.json
    Finished: success: 3, skipped: 0, failure: 0, total: 3
Loading composer repositories with package information
Updating dependencies (including require-dev)
    1/1:	https://codeload.github.com/laravel/ui/legacy.zip/57e2361b55ed1bc80ff0b3258b9713626fb38a2b
    Finished: success: 1, skipped: 0, failure: 0, total: 1
Package operations: 1 install, 0 updates, 0 removals
  - Installing laravel/ui (v1.1.1): Loading from cache
Writing lock file
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fideloper/proxy
Discovered Package: laravel/tinker
Discovered Package: laravel/ui
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.

Laravel bietet neben Bootstrap auch weitere UI Vorlagen an, welche hier einmal aufgelistet werden:

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

Wir beschränken uns in diesem Tutorial auf Twitter Bootstrap, also führen wir den folgenden Befehl aus:

$ php artisan ui bootstrap --auth

Wir haben also ui bootstrap gemeinsam mit --auth verkettet, was bedeutet, dass Laravel nun die Bootstrap UI installiert und uns zusätzlich Login, Registrieren, Passwort vergessen und Validierung quasi direkt out-of-the-box zur Verfügung stellt. Die Ausgabe sieht dann wie Folgt aus:

$ php artisan ui bootstrap --auth

Bootstrap scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
Authentication scaffolding generated successfully.

In der vorletzten Zeile sehen wir, dass uns Laravel darum bittet, mithilfe von npm etwas zu kompilieren 🤷🏼‍♂️!? Dies beachten wir an dieser Stelle noch nicht und widmen uns dem, was nun “eigentlich” passiert ist. Sollten wir unseren Entwicklungsserver nicht mehr laufen haben, so starten wir diesen mithilfe von php artisan serve erneut und rufen die angezeigte URL http://127.0.0.1:8000 auf und sehen was passiert ist:

Automatisch sind nun oben rechts die Punkte “LOGIN” und “REGISTER” hinzugekommen.

NodeJS und npm

Sofern NodeJS und npm noch nicht installiert sind, kann dies unter node.JS und npm unter Mac OS installieren bzw. node.JS und npm unter Windows installieren nachgeholt werden.

Laravel Mix

Wir wurden bereits von Laravel dazu gebeten, unsere Änderungen zu kompilieren. Hierzu geben wir nun den folgenden Befehl in der Konsole ein:

npm install && npm run dev

Zugegeben dauert dieser Befehl seine Zeit ⏰…