Laravel Tutorial - Teil 1 - Wir erstellen einen Terminkalender mit Laravel

Vorwort

Ich habe meine Tutorialreihe zu Laravel komplett gelöscht und biete euch nun ein wirklich einfaches Laravel-Tutorial an. Zu viel bin ich abgeschweift, dabei soll das Tutorial euch an einem Laravel-Praxisbeispiel verdeutlichen, wie schnell man mit diesem Framework etwas aufbauen kann. Ich setze PHP-Grundkenntnisse voraus. Ebenso verlange ich von euch, dass ihr mindestens folgende Programme bereits lauffähig installiert habt:

benötigte Software

  • Einen Webserver (Nginx, Apache, Xampp), wobei das optional ist. Für das Tutorial brauchen wir das eigentlich nicht
  • PHP
  • Eine relationale Datenbank (MySQL / MariaDB, SQLite)
  • Composer Composer-Website
  • NPM NPM-Website

Docker, Vagrant und der ganze Kram

Von Laravel gibt es eine fertige virtuelle Maschine, die man über Vagrant installieren kann. Dort hast du schon einen Datenbankserver, einen Webserver und eine speziell für Laravel optimierte Entwicklungsumgebung, inklusive Composer, git und so weiter. Wenn du unter realen Bedingungen entwickeln möchtest, ist Vagrant dein Schweizer Taschenmesser. Wie Vagrant funktioniert, werde ich hier aber nicht beschreiben. Das Tutorial soll ja einfach bleiben. 😅

Projekt anlegen

Im Webverzeichnis deines Servers kannst du folgenden Befehl angeben:

composer create-project laravel/laravel terminplaner

Hinweis: Für unser Tutorial reicht der Laravel-Entwicklungsserver völlig aus, daher kannst du auch dein “Eigene Dateien” bzw. “Home”-Verzeichnis verwenden.

Shell-Installation
Shell-Installation

Nachdem Composer alle benötigten Dateien heruntergeladen hat und Laravel entsprechende Voreinstellungen vorgenommen hat, wunderst Du dich sicherlich, was zur Hölle hier alles herunter geladen wurde.

Pakete und so
Pakete und so

Das alles ist mühsam kuratierte Software, die dir zukünftig die Arbeit erleichtern soll. Wenn Du Laravel vernünftig gelernt hast, musst du kaum noch SQL schreiben, die Minimierung von CSS und Javascript ist ein Witz und nicht zuletzt kannst Du dich auf das Coding einer echten Anwendung konzentrieren, ohne das Rad neu erfinden zu müssen.

Den Entwicklungsserver starten

Nach der Installation kannst du in den Ordner terminplanerwechseln und

php artisan serve

starten.

Durch den Aufruf von http://localhost:8000 solltest du normalerweise diesen hübschen Bildschirm sehen.

Laravel Startseite
Laravel Startseite

Beende den Entwicklungsserver vorläufig mit STRG+C, denn im Moment brauchen wir diesen Server nicht.

Datenbank einrichten

Am Beispiel von MySQL/MariaDB richten wir nun noch eben schnell die Datenbank ein. Im Projektordner befindet sich eine Datei namens .env, in der sämtliche Konfigurationseinstellungen deiner Laravel-Applikation hinterlegt sind.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

Hier schreibst du lediglich deine Datenbankzugangsdaten hinein und speicherst die Datei ab. Leere den Cache des Entwicklungsservers durch Eingabe von php artisan optimize:clear, damit diese Änderungen auch übernommen werden.

Das Projekt

Der Terminplaner

Wir wollen einen sehr einfachen Terminplaner für uns selbst und unser Team erstellen. Im Terminplaner können wir festlegen, dass wir am tt.mm.jjjj um ss:mm Uhr bestimmte Dinge erledigen wollen. Wir können andere Team-Mitglieder zu dem Termin hinzufügen und so z.B. Meetings planen. Wir werden per Mail an die Termine erinnert und wir können jederzeit Termine absagen. Zu jedem Termin können wir einen vollständig formatierten Text per Wysiwyg-Editor schreiben.

Grundsatzüberlegungen: Was benötigen wir?

Wir brauchen mindestens eine Tabelle, in der die Termine gespeichert werden. Da die Termine von Benutzern angelegt werden, müssen wir vermutlich auch eine Benutzertabelle anlegen. Da nicht jeder willkürlich Termine hinterlegen darf, sollte es also wohl auch ein Sicherheitskonzept in Form eines Logins geben. Wir wollen, dass jeder aus dem Team sich selbst registrieren darf und öffentliche Termine nach dem Login angucken darf.

Model-View-Controller

Hinweis: Wenn wir von Daten-Tabellen reden, meinen wir in diesem Tutorial übrigens Modelle, denn Laravel arbeitet nach dem MVC-Konzept. Es gibt ein Modell, das als Platzhalter für jede Entität in der Datenbank verwendet wird, es gibt einen View, der uns die Daten hübsch anzeigt und es gibt einen Controller, der die gesamte Steuerungslogik übernimmt.

Gerüst aufbauen

Da unsere Anwendung über ein Login verfügen soll und natürlich auch einer Mobile-First-Strategie folgt, setzen wir jetzt ein komplettes Login-Gerüst auf. Dieser, als Scaffolding bezeichnete Schritt, war früher in der Webentwicklung fast die Hauptarbeit. Bei uns ist das jetzt etwas, was in wenigen Minuten erledigt ist. Wir verwenden das Bootstrap-Framework.

Zuerst installieren wir über Composer noch das UI-System von Laravel.

composer require laravel/ui

anschließend legen wir fest, dass wir Bootstrap verwenden wollen und Laravel uns schonmal Modelle für User und Views für das Login festlegen soll.

php artisan ui bootstrap --auth

Laravel installiert nun Bootstrap, erstellt CSS-Dateien und legt diverse Migrationen für Datenbanken an. Überschrieben wird vorläufig nichts, in die Datenbanken werden auch noch keine Daten eingetragen.

Scaffolding
Scaffolding

Im Screenshot siehst du bereits, dass anschließend noch ein paar NPM-Pakete installiert werden sollen. Laravel sagt uns hier, was wir tun sollen. Also führen wir diese Befehle auch noch eben aus.

npm install && npm run dev

Laravel Mix Vue Sass und so weiter
Laravel Mix Vue Sass und so weiter

Registrierung ausprobieren, Datenbank füllen

Laravel hat uns nun jede Menge weiteren Kram installiert. Wir sorgen jetzt dafür, dass unser Terminplaner mit einer Datenbank harmoniert. Als erstes führen wir jetzt eine Datenbankmigration aus

php artisan migrate:fresh

Im Idealfall hat Laravel nun ein paar Tabellen angelegt und wir starten nun mal unseren Entwicklungsserver neu.

php artisan serve

Wir können uns nun selbst für unsere Anwendung registrieren

http://localhost:8000/register

Sobald wir unseren User angelegt haben, werden wir als eingeloggter User in unserer Anwendung angezeigt. Das komplette Login ist nun schon fertig programmiert!

Das Terminmodell

Unser Usermodell existiert schon, unser Login funktioniert und jetzt wollen wir natürlich auch unsere Termine irgendwo speichern können. Ein Termin besteht mindestens aus einem Datum, einer Uhrzeit und einer Beschreibung des Termins. Außerdem gibt es Benutzer, die dem Termin zugeordnet sind. Vielleicht wollen wir ja sogar, dass der Termin öffentlich einsehbar ist.

php artisan make:model termin --migration

Dieser Befehl erstellt uns ein Modell und gleichzeitig eine Migration. Das Modell ist unsere Schnittstelle zwischen Datenbank und Programm, die Migration legt fest, wie die Datenbanktabelle auszusehen hat. Zuerst schauen wir uns nun die Migration an. Im Ordner database/migrations/sehen wir nun ein PHP-Skript namens yyyy_mm_17_000000_create_termins_tableund diese Datei öffnen wir jetzt mal.

Die up()-Methode haben wir erweitert. Unsere Termintabelle soll eine Spalte namens titel haben, eine Spalte namens beschreibung und wir haben ein Datumsfeld hinzugefügt, das den eigentlichen Termin beinhaltet.

Wenn wir nun wieder php artisan migrate:fresheingeben, sehen wir in unserer Datenbank eine neu angelegte Tabelle.

Tabelle Termine
Tabelle Termine

Wichtig: Einer der Vorteile ist, dass jeder Mitentwickler deines Teams aufgrund dieser Migrations-Skripte auf dieselben Tabellenstrukturen zugreifen kann. Es ist unmöglich, dass einer deiner Entwickler die Titel-Spalte anders benannt hat, als der Rest des Teams. Die Migrationen stellen sicher, dass alle mit denselben Daten arbeiten.

Da es nicht notwendig ist, SQL zu schreiben und es zum aktuellen Zeitpunkt sogar egal ist, welche Datenbank-Software verwendet wird, kann der eine Entwickler z.B. diesen Terminplaner mit MS-SQL entwickeln, während du unter SQLite arbeitest und euer Grafiker zum Beispiel MariaDB verwendet. Alle arbeiten mit denselben Tabellenlayouts/Modellen und die komplette Struktur ist durch die Programmierung festgelegt.

Wie geht es weiter?

Im nächsten Tutorial legen wir unseren ersten Controller an. Wir befassen uns mit Routen und erstellen blade-Templates.

Tags: laravel tutorial
Kategorie: Laravel