Laravel 5.4 Anfänger Tutorial für den einfachen Einstieg

7. März 2017 von Dirk Helbert in Laravel
Laravel Anfaenger Tutorial

Einleitung des Laravel 5.4 Anfänger Tutorial

Dieses Laravel 5.4 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.

Hol dir jetzt mein kostenloses E-Book
Geben Sie Ihre Email Adresse ein und klicken Sie auf den Knopf "Sofort Zugang erhalten".
Ich hasse Spam. Deine E-Mail wird nicht an Dritte weitergegeben oder verkauft.

Das Tutorial wurde mit Laravel v5.2.31 Laravel v5.3.9 5.4.15 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

Für wen ist dieses Laravel 5.4 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:

Damit man jetzt nicht immer den kompletten Pfad eingeben muss, verschiebe ich Composer:

Für einen ersten Test jetzt

eingeben. Erscheint eine ähnliche Mitteilung wie diese:

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:

Die Ausgabe sollte dann ähnlich wie diese sein:

Damit sind wir jetzt soweit um den nächsten Schritt zu gehen.

Laravel 5.4 Projekt initialisieren

Ein Laravel Projekt zu initialisieren ist schon fast grotesk einfach:

Die Ausgabe habe ich hier etwas gekürzt:

Die Ausgabe wird bei dir eventuell etwas länger sein, da noch einige Pakete nachgeladen werden.

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:

Wenn du jetzt im Browser die Adresse http://localhost:8000/ aufrufst, solltest du folgendes sehen.
Laravel 5 Tutorial Start
Wenn nicht, dann stimmt etwas nicht. Ich würde auf die Berechtigung des Ordners „storage“ tippen.

Layout mit Twitter Bootstrap und Blade erstellen

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“ haut mich jetzt auch nicht vom Stuhl. Im Grund sehen wir hier nur die welcome.blade.php aus dem /resources/views Verzeichnis.

Daher werden wir jetzt ein Layout mit Twitter Bootstrap erstellen.

Die /resources/views/welcome.blade.php kannst du jetzt löschen. An ihre Stelle tritt jetzt die /resources/views/layouts/main.blade.php, die du jetzt mit folgendem Inhalt erstellst:

Als Vorlage habe ich das Bootstrap Starter Template genommen. Das CSS und Javascript für Bootstrap ist bereits im Laravel Projekt enthalten.

Node, NPM und Laravel Mix

Laravel Mix ist ein Wrapper für Webpack. Wenn du an dieser Stelle noch keine Ahnung hast wovon ich spreche, ist das ok. Du musst einfach nur wissen, dass das Javascript und das CSS generiert werden.

Wenn du Node noch nicht auf deinem System hast, dann schau auf der Node Seite vorbei und installier es. Du wirst es später noch öfter brauchen.

In der Konsole im Projekt Root gibst du dann folgendes ein: npm install

Das dauert jetzt eine Weile. Damit werden die benötigten Node Module installiert.

Als nächstes generierst du die app.css und app.js mit npm run dev.

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.

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 5.4 Anfänger Tutorial. Ich denke eine Startseite, ein Impressum und eine Kontaktseite sollten reichen. Die Routen dazu legen wir jetzt an.

Seit Laravel 5.3 sind die Routendefinitionen in der Hierarchie nach oben gerutscht.

In /app/Http/routes.php routes/web.php lege ich drei neue Routen an. Die Datei sieht dann folgendermaßen aus:

Eventuell vorhandene alte Anweisungen können ruhige 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 den PagesController und die Methoden anlegen.

PagesController und Methoden anlegen

Da wir jetzt drei typische Seiten anlegen wollen, ist es notwenig einen neuen Controller zu erstellen.

Das kann man ganz einfach mit

machen. Das neue Controller Gerüst findest du unter /app/Http/Controllers/PagesController.php. Hier werden jetzt die Methoden für die GET Methoden implementiert.

Auch jetzt würde der Aufruf einer Seite nicht funktionieren. Es fehlen noch die drei Views. Somit wären wir beim nächsten Schritt.

Views erstellen

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

Die imprint.blade.php

Die contact.blade.php

Zur Erklärung:

extends('layouts.main') bindet das Layout aus /resources/views/layouts/main.blade.php ein. Alles zwischen @section('content') und @stop 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. Wenn ihr das Bootstrap Template benutzt, dann kann es sein das die Navigationsbar den Inhalt überdeckt.

Du kannst jetzt in der /resources/assets/sass/app.scss folgendes ans Ende der Datei hinzufügen:

Jetzt überlagert die Navigation auch nicht mehr den Inhalt.

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, Twitter Bootstrap eingebunden und das Layout erstellt. 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

47 Kommentare zu “Laravel 5.4 Anfänger Tutorial für den einfachen Einstieg”

  • 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

    1. 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 =)

    1. 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.

  • 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.

  • 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

    1. 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:

    LG

    1. 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

    1. 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‘)

    1. 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 @extends auch @component nehmen, wenn man denn will. Dann kann man mit $slot arbeiten. 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

  • 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,..).

    1. 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.

      1. 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

        1. 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?

    1. 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.

      1. 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

    1. 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.

    1. Hast du nach der Registrierung keine E-Mail mit einem Link zur Download Seite bekommen? Evtl. Ist die E-Mail im Spam Ordner gelandet?

      1. 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.

        1. 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.

  • 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 😉

    1. 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

    1. 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

      1. 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

        1. 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.

          1. Habe nach deinem Kommentar die app.scss geändert.
            Zwar wird nun alles zentriert abgezeigt, aber immer am untersten Rand

          2. 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)“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.