Einleitung des Laravel Anfänger Tutorial
Dieses Laravel Anfänger Tutorial soll dir den perfekten Einstieg in das Laravel PHP Framework bieten. Dabei lernst du, wie du mit Composer ein Laravel Projekt erstellst und ein gutes Prototype Layout mit Twitter Bootstrap und Blade erstellst. Auf dieses Wissen bauen wir dann auf und schauen uns gemeinsam Laravel Elixir an, mit dem unser CSS und Javascript verwaltet wird.
Zum Abschluß des Tutorials legen wir ein paar Routen und Views für Standartseiten wie Startseite, Impressum und Kontakt Seite an. Im Grund steht am Ende des Tutorials eine kleine Seite, die mit etwas mehr Styling so fast online gehen kann.
Das Tutorial wurde mit Laravel 8.5.7 erstellt und getestet.
Wie PHP und Composer zusammenarbeiten kannst du auch in PHP Projekte mit Composer initialisieren lesen.
Updates:
- 15.09.2016 angepasst auf Laravel 5.3
- 08.03.2017 angepasst auf Laravel 5.4
- 05.11.2017 angepasst auf Laravel 5.5
- 27.01.2019 angepasst auf Laravel 5.7
- 25.10.2019 angepasst auf Laravel 6.4
- 25.04.2020 angepasst auf Laravel 7.8.1
- 11.01.2021 angepasst auf Laravel 8.5.7
Für wen ist dieses Laravel Tutorial gedacht?
Du solltest dich schon einige Zeit mit der PHP Entwicklung beschäftigt haben. Wenn du zumindest eine kleinere Anwendung programmieren kannst, dann kommst du auch mit diesem Tutorial zurecht. Falls dir noch Grundlagen in der PHP Entwicklung fehlen, empfehle ich dir mal bei Codecademy vorbei zu schauen.
Composer installieren
Für dieses Tutorial benutzen wir die Allzweckwaffe Composer. Kein Tool hat mich in den letzten Jahren so freudig erregt wie Composer. Simple Idee, aber grandioser Nutzen für die gesamte Entwicklung.
Composer lädt bei Bedarf notwendige Pakete und Erweiterungen aus dem Netz. In unserem Fall wird auch direkt ein Laravel Projekt erzeugt.
Wenn du Composer bereits installiert hast, kannst du zum Punkt Composer Update springen.
Composer Installation für Mac OS X
Composer runterladen und installieren:
curl -sS https://getcomposer.org/installer | php
Composer (version 2.0.8) successfully installed to: YOURPATH/composer.phar
Use it: php composer.phar
Damit man jetzt nicht immer den kompletten Pfad eingeben muss, verschiebe ich Composer:
mv composer.phar /usr/local/bin/composer
Für einen ersten Test jetzt
composer about
eingeben. Erscheint eine ähnliche Mitteilung wie diese:
Composer - Dependency Manager for PHP
Composer is a dependency manager tracking local dependencies of your projects and libraries.
See https://getcomposer.org/ for more information.
hat alles funktioniert und Composer ist einsatzbereit.
Composer Installation für Windows
Windows Benutzer haben es hier sogar noch einfacher. Einfach die Composer-Setup.exe runterladen und installieren.
Composer Update
Auch Composer entwickelt sich weiter und es kommen von Zeit zu Zeit neue Versionen heraus. Damit wir jetzt mit der aktuellsten Version starten, kannst du Composer ganz einfach updaten:
composer self-update
Die Ausgabe sollte dann ähnlich wie diese sein:
Updating to version 2.0.8 (stable channel).
Downloading (100%)
Use composer self-update --rollback to return to version 2.0.7
Wenn du noch mit Composer 1.x unterwegs bist, dann solltest du jetzt Composer updaten.
composer self-update --2Damit sind wir jetzt soweit um den nächsten Schritt zu gehen.
Laravel Projekt mit dem Laravel Installer (Bevorzugt)
composer global require laravel/installer
Jetzt kann das Projekt einfach initialisiert werden mit
laravel new demolaravel
Interessanterweise wird mit dem Laravel Installer unter Umständen eine andere Version installiert, als mit der Initialisierung mit dem Composer im nächsten Schritt. Trotzdem möchte ich die Alternative hier auch vorstellen.
Laravel Projekt mit Composer (Alternative)
Ein Laravel Projekt zu initialisieren ist schon fast grotesk einfach:
composer create-project laravel/laravel demolaravel --prefer-dist
Die Ausgabe habe ich hier gekürzt:
Installing laravel/laravel (v8.5.7)
Die Ausgabe wird bei dir eventuell etwas länger sein, da noch einige Pakete nachgeladen werden.
Manchmal können sich die Versionen aber etwas unterscheiden. Das ist jetzt kein Drama, sollte man aber bedenken.
Das Ganze dauert aber keine zwei Minuten. Natürlich immer vorausgesetzt die Internetverbindung ist einigermaßen schnell.
Erster Aufruf der Laravel Tutorial Demo Seite
Ich finde es gut zwischendurch ein Erfolgserlebnis zu haben. Daher starte ich einen integrierten Webserver mit
cd demolaravel
php artisan serve
Laravel development server started on http://localhost:8000/
Wenn du jetzt im Browser die Adresse http://localhost:8000/ aufrufst, solltest du folgendes sehen.
Falls der Port 8000 schon belegt ist, wird ein anderer Port ausgewählt, wie in meinem Fall. Dann muss auch im Browser http://localhost:8003 aufgerufen werden.
Wenn nicht, dann stimmt etwas nicht. Ich würde auf die Berechtigung des Ordners „storage“ tippen.
Als erfahrener Laravel Entwickler und Mac Besitzer kannst du auch Larvel Valet nutzen. Damit kannst du ganz einfach Projekte direkt im Browser aufrufen mit PROJEKTNAME.dev. Schau dir dazu mal mein Tutorial für schnelles Prototyping mit Laravel und Mac OS an.
Layout mit Tailwind und Blade erstellen
Jetzt wird es im Vergleich zu Versionen kleiner als Laravel 8 interessant. Es gibt die Laravel Starter Kits. Dazu gehört Breeze und Jetstream.
Breeze ist ein Starter Kit mit Benutzerregistrierung, Login, Passwort Anfrage und E-Mail Verifikation. Die Views dazu sind mit dem CSS Framework TailwindCSS gestylt. Ab Laravel Version 8 ist Tailwind gewissermaßen das Standard CSS Framework für Laravel. Aber auch mit Bootstrap lassen sich natürlich noch Layouts entwickeln.
Wer noch etwas mehr möchte, der ist mit Jetstream gut bedient. Hier kommen zusätzlich noch Zwei-Faktor-Authentifizierung, API Support mit Laravel Sanctum und optionales Team Management dazu.
In diesem Tutorial werde ich aber nur auf Breeze eingehen, weil das für die meisten Anwendungsfälle ausreicht.
Da wir nun zum ersten Mal unsere Anwendung aufgerufen haben, wird es Zeit sie ein bisschen mit Leben zu füllen. Nur die stumpfe Ausgabe von „Laravel“ und ein paar Infos über Laravel haut mich jetzt auch nicht vom Stuhl. Im Grunde sehen wir hier nur die welcome.blade.php aus dem /resources/views Verzeichnis.
Laravel Breeze muss noch zusätzlich als Paket über Composer installiert werden.
composer require laravel/breeze --dev
Jetzt noch Breeze initialisieren und mit npm installieren.
php artisan breeze:install
npm install && npm run dev
Damit wird neben der grundsätzlichen Login und Registrierungsfunktionen auch das Layout System mit TailwindCSS initialisiert, sowie die CSS und JS Dateien generiert.
Dabei werden mehrere neue Verzeichnisse und Dateien erstellt.
resources/views/layouts/app.blade.php
resources/views/layouts/guest.blade.php
resources/views/layouts/navigation.blade.php
resources/views/dashboard.blade.php
resources/views/components/...
resources/views/auth/...
Die /resources/views/welcome.blade.php kannst du löschen. Die wird nicht mehr benötigt.
Das musst du nach jeder Änderung am Javascript oder CSS in /resources/assets/js oder /resources/assets/css ausführen. Oder du benutzt npm run watch. Damit startest du einen Watcher, der bei Änderungen die Dateien automatisch neu generiert.
PageController anlegen
php artisan make:controller PageControllerDer Page Controller enthält die Methoden, die unsere Logik enthalten soll.
Routen anlegen
Damit bei dem Aufruf von /impressum oder /irgendwas auch die richtigen Stellen in der Anwendung in Aktion treten, werden wir ein paar Routen anlegen.
Welche Seiten brauchen wir überhaupt für dieses Laravel Anfänger Tutorial. Ich denke eine Startseite, ein Impressum und eine Kontaktseite sollten reichen. Die Routen dazu legen wir jetzt an.
In /routes/web.php lege ich drei neue Routen an. Die Datei sieht dann folgendermaßen aus:
use App\Http\Controllers\PageController;
Route::get('/', [PageController::class, 'index']);
Route::get('/impressum', [PageController::class, 'imprint']);
Route::get('/kontakt', [PageController::class, 'contact']);
Route::get('/dashboard', function () {
return view('dashboard');
})->middleware(['auth'])->name('dashboard');
require __DIR__.'/auth.php';
Eventuell vorhandene alte Anweisungen können ruhig vorher gelöscht werden.
Theoretisch könnte ich jetzt mit http://localhost:8000/impressum das Impressum anzeigen lassen. Aber dazu müssen wir jetzt noch die Methoden anlegen.
Methoden im PageController anlegen
Da wir jetzt drei typische Seiten anlegen wollen, ist es notwenig die Methoden im Controller anzulegen.
Das neue Controller Gerüst findest du unter /app/Http/Controllers/PageController.php. Hier werden jetzt die Methoden für die GET Methoden implementiert.
public function index()
{
return view('pages.index');
}
public function imprint()
{
return view('pages.imprint');
}
public function contact()
{
return view('pages.contact');
}
Auch jetzt würde der Aufruf einer Seite nicht funktionieren. Es fehlt noch das Layout und die drei Views. Somit wären wir beim nächsten Schritt.
Layout erstellen
Zuerst erstelle ich die /resources/views/layouts/default.blade.php mit folgendem Inhalt, den du einfach kopieren kannst. Hier gehe ich jetzt nicht jeden einzelnen Schritt durch.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<div class="font-sans text-gray-900 antialiased">
<div class="min-h-screen bg-gray-100">
<header class="bg-white shadow">
<nav x-data="{ open: false }" class="bg-gray-800">
<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
<div class="relative flex items-center justify-between h-16">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
<button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
<div class="flex-shrink-0 flex items-center">
<span class="text-white text-2xl font-bold">Laravel Tutorial</span>
</div>
<div class="hidden sm:block sm:ml-6">
<div class="flex space-x-4">
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Impressum</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Kontakt</a>
</div>
</div>
</div>
</div>
</div>
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Impressum</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Kontakt</a>
</div>
</div>
</nav>
</header>
<main>
@yield('content')
</main>
</div>
</div>
</body>
</html>
Views erstellen
Ich benutzt hier für die Views die Template Engine Blade auf die herkömmliche Weise mit der sogenannten Template Vererbung (Template Inheritance).
Dazu lege ich das Verzeichnis pages in /resources/views an. Dort erstelle ich die index.blade.php, die imprint.blade.php und die contact.blade.php.
Die index.blade.php
@extends('layouts.default')
@section('content')
<div class="mx-8 my-8 px-7 py-8 bg-white">
<h1 class="text-3xl">Startseite</h1>
<p class="mt-4">Das ist die Startseite</p>
</div>
@endsection
Die imprint.blade.php
@extends('layouts.default')
@section('content')
<div class="mx-8 my-8 px-7 py-8 bg-white">
<h1 class="text-3xl">Impressum</h1>
<p class="mt-4">Das ist das Impressum</p>
</div>
@endsection
Die contact.blade.php
@extends('layouts.default')
@section('content')
<div class="mx-8 my-8 px-7 py-8 bg-white">
<h1 class="text-3xl">Kontakt</h1>
<p class="mt-4">Das ist die Kontakt Seite</p>
</div>
@endsection
Zur Erklärung:
extends('layouts.default') bindet das Layout aus /resources/views/layouts/default.blade.php ein. Alles zwischen @section('content') und @endsection stellt den Inhalt zur Verfügung der im Layout mit yield('content') ausgegeben wird. content ist hier nur ein selbstdefiniertes Keyword. Auf diese Art und weise können auch mehrere Sektionen erstellt und befüllt werden.
Der Inhalt der drei Views ist erstmal nur unterschiedlicher Dummy Text. Ich will nur sehen ob es auch funktioniert.
Ein Aufruf von http://localhost:8000, http://localhost:8000/impressum und http://localhost:8000/kontakt sollte jetzt funktionieren und der Inhalt der drei Dateien wird angezeigt.
Die weitere Funktionalität wie die Erstellung des Kontaktformulars, die Verarbeitung der eingegebenen Daten und das Verschicken des Formulars als E-Mail werde ich in einem weiteren Tutorial behandeln.
Zusammenfassung
In diesem Tutorial habe ich Composer installiert, ein Laravel Projekt erstellt und das Layout initialisiert. Außerdem habe ich noch das Routing erstellt, sowie einen Controller angelegt und Views erstellt.
Im Grunde habe ich jetzt eine richtige kleine Anwendung. In weiteren Tutorials werde ich auf dieser Grundlage aufbauen.
Den Quellcode zum Tutorial findest du auf Github.
Wenn du einen Fehler gefunden hast oder an einer Stelle nicht weiter kommst, dann hinterlass einfach einen Kommentar.
Zur Laravel Tutorial Startseite
Moin Dirk,
im Textabschnitt „Views erstellen“ erwähnst du @end, die Templates enthalten aber @stop (welches korrekt zu sein scheint).
Habe ich etwas übersehen?
Viele Grüße,
Christoph
Hi Christoph,
sehr gut aufgepasst. Es schaut sich ja doch jemand die Tutorials an 😉
Vielen Dank für deinen Hinweis. Ich habe es gerade korrigiert.
Viele Grüße,
Dirk
Sehr fein, sehr fein.
Ich bin zwar an sich kein Feind von Englisch, dennoch ist es oft schön, wenn man Nachschlagewerke in deutscher Sprache lesen kann =)
Vielen Dank!
Schön geschrieben, Dankeschön. 🙂
Wie sieht’s mit dem nächsten Teil aus?
MfG Dome
Danke für das Lob.
Ich hatte leider in der letzten Zeit viel zu tun mit meiner Hochzeit. Aber es werden noch neue Teile kommen. Ich bin gerade dabei ein Konzept zu erarbeiten bei dem eine richtige Anwendung vom Anfang bis zum Ende entwickelt wird.
Cooles Tutorial 😀
Hat mir weitergeholfen
Vielen Dank
Hallo Lars. Das freut mich sehr. Vielen Dank, Dirk
Nach dem ich laravel schon verwerfen wollte da mir die Produkt-eigene Doku keinen Zugang ermöglichte, finde ich nun langsam die bekannten Elemente aus codeigniter und yii2 wieder.
Ich freue mich, dass du doch noch Zugang gefunden hast. Laravel ist einfach ein tolles Framework.
Viele Grüße,
Dirk
Finde es wirklich sehr gut, das du dir die Mühe machst. Wollte mich schon länger mal mit einem PHP-Framework befassen. Dank deines Tutorials ist dann meine Wahl auf Laravel gefallen. Ich freue mich schon sehr auf weitere Teile deines Tutorials
Super das dir mein Tutorial und Laravel gefällt. Du wirst ganz bestimmt nicht enttäuscht werden mit deiner Wahl.
Viele Grüße,
Dirk
Pingback: Laravel Anfänger Tutorial #01 zum mitmachen für dich
Hi,
warum kommt denn das?
„FatalErrorException in e4c8b4d5e0da99aeed3ce6a6db2b7e515302d5b9.php line 9: syntax error, unexpected ‚extends‘ (T_EXTENDS)“
In der Datei steht fongendes:
@extends('layouts.main') @section('content') Index @stopLG
Hi,
ist das der einzige Code in der View?
Hast du ihn selbst eingetippt oder kopiert? Wenn er kopiert ist, dann schreib die Zeilen mal komplett selbst. Vielleicht ist da irgendwo ein unsichtbares Steuerzeichen drin?
Auch sollte vor dem @extends keine Leerzeile sein.
Viele Grüße,
Dirk
Danke für diese gute Tutorial
In der main.blade.php ist IMHO ein führender „/“ zuviel in der Zeile vor „css“
Gruß
Michel
Hallo Michael,
vielen Dank für deinen Kommentar.
Welche Zeile meinst du?
Diese hier:
Viele Grüße
Dirk
Hi Dirk,
danke für dein Tutorial. In der aktuellen Version (5.4)werden die Views so aufgerufen:
return view(‚imprint‘);
und die Layouts so:
@extends(‚main‘)
Hi Bernd,
Danke für deinen Kommentar.
Der Aufruf der View und des Layouts funktioniert so nur, wenn die Dateien nicht in einem Unterverzeichnis liegen. Ansonsten weiss Die Anwendung ja nicht welche Datei genommen werden soll. Ich könnte ja auch drei verschiedene Layouts haben, die alle main.blade.php heissen. Dann kann ich die nur durch die Angabe des Verzeichnisses unterscheiden.
Aber tatsächlich kann man für
@extendsauch@componentnehmen, wenn man denn will. Dann kann man mit$slotarbeiten. Das mache ich dann in einem neuen Tutorial 🙂Viele Grüße
Dirk
Hallo Dirk,
vielen Dank für dieses Tutorial, es macht Lust auf mehr 🙂
Es hat sich ein kleiner Fehler eingeschlichen:
„In /app/Http/routes.php app/routes/web.php lege ich drei neue Routen an. Die Datei sieht dann folgendermaßen aus:“
da ist vor routes/web.php das „app“ zu viel 🙂
Viele Grüße
Marco
Hi Marco,
vielen Dank für den Hinweis 🙂 Ich habe das direkt korrigiert.
Viele Grüße
Dirk
Hallo Dirk,
vielen Dank für den guten Einstieg in LARAVEL 5, für mich genau die richtige Mischung an wichtigen Informationen und LearningByDoing.
Meine Klippen, die es galt zu umschiffen, waren npm & node (alte versionen & alte symlinks). Musste beides reinstallieren und dann lief alles. In der main.blade.php fangen in der navbar die href-links mit href=“#…. an, das hat bei mir nicht die controller action aufgerufen, also hab ich # entfernt und dann klappts auch mit dem Aufruf der Unterseiten (impressum, contact).
Nochmal vielen Dank für dein Tutorail, great work!!!
Vielleicht als nächstes etwas mit Datenbank und User-Handling (Login,..).
Hallo Stefan,
vielen Dank für deinen Kommentar. Der Code für die navbar war tatsächlich falsch. Und das obwohl ich die Tutorial immer zweimal mache, bevor ich sie online stelle. Ich habe das jetzt korrigiert.
Ja, ich würde gerne noch viel viel mehr machen. Im Moment überlege ich, ob ich eher schriftliche Tutorials machen soll oder auf Videos umsteige. Es wird auf jeden Fall noch eine Artikel Serie kommen mit einer richtigen Anwendung.
Hallo Dirk,
ich lese ja lieber Tutorials, aber das ist Gewohnheit.. Ich glaube für einen Laravel-Anfänger wäre es hilfreich zu wissen, wie man z.B. den Title eines Projekts global für alle Views implementiert (AppServiceProvider?) oder was ein Provider ist. Wer von z.B. CodeIgniter kommt, kennt solche Vorgehensweisen nicht (also ich z,B.) und die Laravel-Docu ist zum „einlesen“ ziemlich umfangreich. Ich fände es genial wenn du weiter machst, da man hier auch eventuell auch komplexe Frage auf deutsch stellen kan (mein English ist eingeschränkt).
Schönen Gruß,
Stefan
Wenn du den
meinst, dann würde ich das über den AppServiceProvider und einem ViewComposer machen.
Hallo Dirk, ich hab wie beschrieben die „welcome.blade.php“ gelöscht und die „main.blade.php“ im Ordner layouts hinzugefügt.. Ich bekomme allerdings eine Fehlermeldung das meine „welcome“ fehlt. Ohne die, gehts bei mir leider nicht weiter.. muss ich danach noch etwas beachten?
Ok, ich hätte vllt abwarten und Tee trinken sollen.. aber jetzt bin ich fast am Ende und ich bekomme die Meldung „NotFoundHttpException in RouteCollection.php line 179“ die Startseite wird ohne Probleme angezeigt.
Moin Sam,
Cool, dass du mein Tutorial durcharbeitest. „NotFoundHttpException“ ist immer ein Hinweis darauf, dass die Route nicht existiert. Startseite bedeutet bei dir / nehme ich an und die funktioniert. Das ist schon gut. Welche funktioniert denn dann nicht? /impressum oder /kontakt ? Du kannst mir auch gerne dein /routes/web.php mal zuschicken an info@dirk-helbert.de . Meistens klärt sich dann schon einiges.
Du hast schon das Tutorial hier auf der Seite gemacht und nicht aus meinem Gratis E-Book, oder?
Viele Grüße
Dirk
Hallo, steht in Deinem E-Book mehr als in diesem Tutorial ???
Mit freundlichen Grüßen T.R.
Das kostenlose E-Book ist etwas ausführlicher. Außerdem behandelt es noch Mailables und die Datenverwaltung mit Eloquent. Du machst auf jeden Fall nichts verkehrt, wenn du dir das auch anschaust.
Dirk,
dein Ebook ist nicht downloadbar. Ich wäre sehr glücklich
wenn ich bald mal einen Blick auf dein Ebook werfen dürfte.
Hast du nach der Registrierung keine E-Mail mit einem Link zur Download Seite bekommen? Evtl. Ist die E-Mail im Spam Ordner gelandet?
Ich bin gerade unterwegs, habe es nochmal ausprobiert um dir zu zeigen was passiert. Es ist wie folgt:
1. kommt die Website mit dem link zum Buch in der E-Mail https://picload.org/image/rpolcigi/img_2897.png
2. danach kommt. Ein 500 internal error von nginx https://picload.org/image/rpolcigw/img_2898.png
Du hast ja meine E-Mail Adresse. Ich würde mich freuen wenn du mir das Buch direkt Sendest oder mir Bescheid gibst wann ich das Buch Downloaden kann.
Tut mir leid, dass es bei dir nicht funktioniert. Ich habe es gerade auch nochmal über mein Smartphone ausprobiert und es ging. Sehr komisch. Ich sende dir das PDF an deine E-Mail Adresse.
Das wäre sehr nett, momentan warte ich noch auf die Mail.
Zuerst, cooles tutorial. Gratulation!
Ich habe jedoch einen Fehler gefunden, in routes/web.php sind die url’s mit /impressum bzw. /kontakt definiert. In resources/views/layouts/main.blade.php verweisen die href’s jedoch auf /about bzw. /contact
Ich vermute mal, dies ist auch der Punkt an dem sam mit dem Post vom 13.6. um 04:45 (!) gestrandet ist.
Gruss sam (der andere 😉
Moin Sam,
vielen Dank für dein Lob 🙂
Da hat sich tatsächlich ein Bug eingeschlichen. Vielen Dank für den Hinweis. Habe es direkt korrigiert.
Viele Grüße
Dirk
Hallo Dirk,
vielen lieben Dank für das super Tutorial.
Aktuell bearbeite ich dein tolles eBook-Tutorial zu diesem Thema.
In deinem eBook steht der Vermerk „Durch die Standard CSS Anweisungen wird der komplette Content zentriert angezeigt. Das
können wir hier so stehen lassen.“
Jedoch wird bei mir nichts zentriert angezeigt, sondern wie unter dem nachfolgenden Link zu sehen ist, alles in der oberen linken Ecke angezeigt.
http://imgur.com/a/zQC9S
Liebe Grüße
Hi,
es freut mich sehr, dass es dir gefällt. Bei dir wird es so dargestellt, weil das CSS nicht geladen wird. Hast du in der /resources/views/layouts/main.blade.php stehen? Und wenn ja, hast du das CSS generiert wie im Abschnitt „Generieren der Assets mit Laravel Mix“ beschrieben?
Viele Grüße
Dirk
ja, habe ich.
Siehe Bild unter folgenden Link http://imgur.com/a/go76j
Die /css/app.css scheint mir etwas klein zu sein. Evtl. fehlt in der /resources/assets/sass/app.scss der Import für Bootstrap?
Das ist der Inhalt der app.scss
// Fonts
@import url(„https://fonts.googleapis.com/css?family=Raleway:300,400,600“);
// Variables
@import „variables“;
// Bootstrap
@import „node_modules/bootstrap-sass/assets/stylesheets/bootstrap“; <— dieser Import ist rot unterstrichen mit Kommentar "Cannot resolve directory '…'
aber node:modules ist vorhanden wie am vorherigen Screenshot erkennen kann
Du hast Recht. Da ist ein Fehler im E-Book. In /resources/assets/sass/app.scss fehlt am Ende noch etwas CSS. Im Buch habe ich das jetzt korrigiert. Vielen Dank für deinen Hinweis.
html, body { background-color: #fff; color: #636b6f; font-family: 'Raleway', sans-serif; font-weight: 100; height: 100vh; margin: 0; } .full-height { height: 100vh; } .flex-center { align-items: center; display: flex; justify-content: center; } .position-ref { position: relative; } .top-right { position: absolute; right: 10px; top: 18px; } .content { text-align: center; } .title { font-size: 84px; } .links > a { color: #636b6f; padding: 0 25px; font-size: 12px; font-weight: 600; letter-spacing: .1rem; text-decoration: none; text-transform: uppercase; } .m-b-md { margin-bottom: 30px; }Habe nach deinem Kommentar die app.scss geändert.
Zwar wird nun alles zentriert abgezeigt, aber immer am untersten Rand
Folgender Kommentar aus der CMD erhalte ich, wenn ich die Seite aufrufe
„[Tue Aug 22 20:27:53 2017] 127.0.0.1:64335 [200]: /css/app.css
[Tue Aug 22 20:27:53 2017] 127.0.0.1:64337 [200]: /js/app.js
[Tue Aug 22 20:27:58 2017] 127.0.0.1:64336 Invalid request (Unexpected EOF)“
Irgendwas stimmt mit Nodes nicht.
Der Command npm watch funktioniert nicht
Ok, der Command heißt npm run watch aber im Buch steht npm watch
Hallo Dirk!
Mir fehlen Screenshot hier in der HTML-Variante deines Tutorials.
Ich kann daher nicht erkennen, ob das, was erstellt habe, richtig sein kann.
Hi Burkhard,
welche Screenshots fehlen dir denn?
Hi Dirk,
erst mal vielen Dank für das Tutorial. Ich denke ich habe das richtige Framework für mich entdeckt.
Ich habe das Tutorial durchgemacht und bei mir kommt leider folgender Fehler:
„View [pages.index] not found.“
Ich kann den Fehler leider nicht finden. Ich habe Laravel 5.6 installiert. Kann es sein, dass es hier Änderungen gab, welche das Tutorial beeinflussen?
Danke schon mal für deine Hilfe und viele Grüsse
Silvio
Hi Silvio,
vielen Dank für das Lob.
Die Nachricht lässt darauf schliessen, dass die /resources/views/pages/index.blade.php fehlt. Kann das sein?
Viele Grüße
Dirk
Hall Dirk,
Super Tutorial.
Bitte mach weiter so. Ich würde gerne mehr Tutorials von Dir lesen und ich würde auch dafür bezahlen.
Gruß aus Madrid
Martin
Wie Du anfangs erwähnt hast: Veraltete Tutorials sind ärgerlich…mit der Version 6.0.x funktioniert Dein Tutorial leider nicht mehr….make:auth beispielsweise gibt es nicht mehr. Am besten entweder bei der installation von laravel die Versionsnummer angeben oder das Tutorial anpassen 🙂
Ja, du hast vollkommen Recht und ich bin auch wieder spät dran 🙁
Hallo Dirk,
ich versuche schon seit einer Woche in Laravel reinzukommen. Habe schon einige Tutorials versucht und scheitere immer wieder an derselben Stelle: Beim Routing. So auch in Deinem Tutorial. Die Startseite funktioniert, doch die Unterseiten führen zu einem „404 Not Found“ Fehler.
Ich vermute das Problem im VirtualHost. Ich habe auch dazu einige Varianten aus dem Netz ausprobiert, doch keine war bislang zielführend.
Meine conf sieht so aus:
DocumentRoot /var/www/html/mediathek/public/
ServerName mediathek
Options +Indexes +FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all
Irgendeinen Tipp, was hier falsch ist?
Vielen Dank und VG
Adrian
er nimmt nicht mehr „php artisan ui bootstrap –auth“
wie bekomme ich sonst bei laravel 7.6.0 twitter bootstrap als UI?
Moin und vielen Dank für deinen Kommentar.
Ja, ich muss mal wieder das Tutorial überarbeiten. Die Laravel Entwicklung ist einfach zu schnell oder ich zu langsam 😉
Für 7.x sollte folgendes reichen:
composer require laravel/ui
php artisan ui bootstrap
oder mit Auth Scaffolding
php artisan ui bootstrap –auth
Ob dann der Rest funktioniert kann ich nicht garantieren. Aber ich werde das Tutorial demnächst überarbeiten.
Viele Grüße
Dirk
geht auch nicht mit 6.4. Vielleicht mach ich ein Fehler?
Schönes Einstiegstutorial, vielen Dank dafür.
Mit Lavarel 8.x gab es Änderungen, so dass der Part „Routen anlegen“ überarbeitet werden müsste, siehe auch https://medium.com/@litvinjuan/how-to-fix-target-class-does-not-exist-in-laravel-8-f9e28b79f8b4
Gibt es weitere Änderungen in 8.x, die besonders erwähnenswert sind?
Hallo ich erhalte diese Fehlermeldung beim Aufruf der Dateien im Browser
Auth::routes(); Route::get(‚/‘, ‚PagesController@index‘); Route::get(‚/impressum‘, ‚PagesController@imprint‘); Route::get(‚/kontakt‘, ‚PagesController@contact‘);
In der Version Laravel 8 haben sich die Pfadangaben im Router geändert (RouteServiceProvider), siehe u.a.
https://github.com/laravel/framework/issues/34204
Die Doku müsste also entsprechend angepasst werden:
Route::get(‚/‘, ‚App\Http\Controllers\PagesController@index‘);
Route::get(‚/impressum‘, ‚App\Http\Controllers\PagesController@imprint‘);
Route::get(‚/kontakt‘, ‚App\Http\Controllers\PagesController@contact‘);
oder
Route::get(‚/‘, [App\Http\Controllers\PagesController::class, ‚index‘])->name(‚index‘);
Route::get(‚/impressum‘, [App\Http\Controllers\PagesController::class, ‚imprint‘])->name(‚imprint‘);
Route::get(‚/kontakt‘, [App\Http\Controllers\PagesController::class, ‚contact‘])->name(‚contact‘);
die ändern Laravel wirklich viel zu schnell. 🙂
Danke jedenfalls für das großartige Tutorial.
Ja, vielen Dank für deinen Beitrage. Man kann das so ändern, wie du es beschrieben hast oder in der /app/Providers/RouteServiceProvider.php die folgende Zeile wieder einkommentieren.
In meinem Fall war das Tutorial ein wenig veraltet (Laravel 8; PHP 8), so dass einige Dinge nicht ordentlich funktionierten,
Wenn das Dashboard (bzw die Index?) nur Fehler wirft, könnte folgende Zeile über der ersten Route (routes/web.php) helfen:
use App\Http\Controllers\PageController;
Viel Glück! 🙂
Veraltet? Was soll das denn heissen? 😉
Ich hatte es am 11.01.2021 überarbeitet, aber tatsächlich die use Anweisung vergessen. Vielen Dank für deinen Hinweis. Habe es eingebaut.
Viele Grüße
Hallo Dirk,
dies ist schon das ich glaube 4. Tutorial das ich bereits mehrfach von Grund auf starte.
Leider hänge ich immer am selben Punkt:
nem install && rpm run dev spuckt mir einen häufen Fehlermeldungen aus (immer verschiedene).
dieses Mal bei deinem Tutorial schreibt er:
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /home/vagrant/code/project1/node_modules/terser-webpack-plugin/node_modules/p-limit/package.json.3681067783
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open ‚ /home/vagrant/code/project1/node_modules/terser_webpack_plugin/node_modules/p-limit/package.json.3681067783‘
npm ERR! anoint This is related to npm not being able to find a file.
…
bei jedem weiteren ausführen kommen andere Meldungen.
Weißt du, woran das liegen könnte?
Alle vorherigen Schritte funktionieren immer ohne Probleme, server läuft, Zugriff ist da, Seite wird angezeigt…
besten Dank
Thomas
Hi Thomas,
leider habe ich deine Frage viel zu spät gesehen. Wahrscheinlich oder hoffentlich hast du dir schon selbst helfen können.
In der Regel hilft es das node_modules Verzeichnis zu löschen und ggf. die package-lock.json zu löschen und npm install && npm run dev noch mal aufzurufen.
Hallo Thomas,
seitl langem mal wieder ein Tutorial was von Anfang an ohne Probleme funktioniert (Laravel Version 9.3.1 ) . Vielen Dank!
Grup Jörg
Hallo,
habe dieses tut gefunden und es mal durchgearbeitet. Soweit okay. Jedoch wird mir nur die Index angezeigt, die Links mit /impressum bzw /kontakt zeigen nur eine Fehlermeldung „Not Found The requested URL was not found on this server.“
Ich muss sagen das ich eine virtuelle Linux Maschine nutze, mit Apache2 als Webserver. Liegt evtl da das Problem?
Hi Martin,
danke für deinen Kommentar und entschuldige die späte Antwort.
Ich denke, du wirst in der Zwischenzeit eine Lösung gefunden haben.
Danke für’s Tutorial, würde 3 von 5 Sternen geben, weil, wie bei vielen, eben nicht alles 100% sauber erklärt ist. Klassiker sind u.a. unvollständige path Variablen fehlende VZ Details. Ärgerlich auch immer, wenn auf einem frischen Linux die Skripte nicht durchlaufen und man suchen muss, woran es liegt …
Egal, spannend ist eigentlich insbesoneder folgende Aussage:
„Die Views dazu sind mit dem CSS Framework TailwindCSS gestylt. Bootstrap spielt ab Laravel 8 keine Rolle mehr.“
Wer sagt, dass Bootstrap keine Rolle mehr spielt? Finde dazu nichts im Internet, im Gegenteil dutzende von Seiten die die jeweiligen Vor- und Nachteile beleuchten.
Ralf
Hi Ralf,
sorry für die späte Antwort. Du hast natürlich völlig Recht. Bootstrap ist immer noch präsent, aber im Laravel Kosmos wird es immer mehr durch TailwindCSS abgelöst. Das heißt aber nicht, dass man mit Bootstrap keine guten Layouts mehr erstellen kann.
Was die restliche Kritik angeht: Ich werde in den kommenden Wochen das Tutorial auf den neuesten Stand updaten.
Beim Schritt zum Installieren von Breez:
php artisan breeze:install
npm install && npm run dev
Woher kommt das npm plötzlich her?
Das wurde vorher im Tutorial noch nie erwähnt und ist daher auch nicht vorhanden.
Der Node Package Manager (npm) wird durch die NodeJS Installation mit installiert. Das wurde tatsächlich vorher nicht erwähnt. Die meisten Entwickler werden NodeJS installiert haben, aber nicht alles. Die Installationsanleitung dazu findet man unter: https://nodejs.org/de/download/