Laravel Tutorial: Building Your First Home Page

Introduction

Hallo da, angehende Web-Entwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von Laravel zu sein. Als jemand, der seit über einem Jahrzehnt Informatik unterrichtet, kann ich Ihnen sagen, dass Laravel eines der leistungsstärksten und unterhaltsamsten Frameworks zum Arbeiten ist. Heute werden wir unsere erste Startseite mit Laravel erstellen. Machen Sie sich keine Sorgen, wenn Sie noch nie kodiert haben – wir gehen Schritt für Schritt vor, und bevor Sie es wissen, werden Sie wunderschöne Webseiten wie ein Profi gestalten!

Was ist Laravel?

Bevor wir eintauchen, lassen Sie uns schnell über das eigentliche Laravel sprechen. Stellen Sie sich vor, Sie bauen ein Haus. Laravel ist wie Ihr zuverlässiges Werkzeugkasten, gefüllt mit verschiedenen nützlichen Werkzeugen, die die Arbeit einfacher und schneller machen. Es ist ein PHP-Framework, das Entwicklern hilft, Webanwendungen zu erstellen, ohne jedes Mal neu erfinden zu müssen. Es ist wie ein Haufen vorgefertigter Lego-Teile, die Sie zusammenstecken können, um etwas Erstaunliches zu schaffen!

Voraussetzungen

Um diesem Tutorial zu folgen, benötigen Sie:

1. Ein Computer (offensichtlich!)
2. PHP auf Ihrem Computer installiert (Version 7.3 oder höher)
3. Composer (ein PHP-Abhängigkeitsmanager)
4. Ein Texteditor (ich empfehle Visual Studio Code, aber verwenden Sie was Ihnen bequem ist)
5. Eine Abenteuerlust und den Wunsch zu lernen!

Machen Sie sich keine Sorgen, wenn Sie diese noch nicht eingerichtet haben. Es gibt viele großartige Tutorials da draußen, die Ihnen helfen, Ihre Umgebung bereit zu machen.

Setting Up Laravel

Schritt 1: Laravel installieren

Zunächst einmal, lassen Sie uns Laravel installieren. Öffnen Sie Ihr Terminal (haben Sie keine Angst, es ist nur eine textbasierte Möglichkeit, mit Ihrem Computer zu kommunizieren) und tippen Sie:

composer create-project --prefer-dist laravel/laravel my-first-laravel-project

Dieser Befehlweist Composer an, ein neues Laravel-Projekt in einem Ordner namens my-first-laravel-project zu erstellen. Es könnte ein paar Minuten dauern, also maybe einen Kaffee holen oder ein kleines Tanzchen machen, während Sie warten.

Schritt 2: Zu Ihrem Projekt navigieren

Wenn das erledigt ist, lassen Sie uns in Ihren neuen Projektordner wechseln:

cd my-first-laravel-project

Glückwunsch! Sie sind jetzt in Ihrem ersten Laravel-Projekt. Fühlt sich gut an, oder?

Creating Your Home Page

Schritt 3: Verständnis von Routen

In Laravel sind Routen wie die Rezeptionistin Ihrer Anwendung. Sie entscheiden, wohin Besucher gehen sollen, wenn sie Ihre Webseite besuchen. Öffnen wir die Datei routes/web.php. Dies ist der Ort, an dem wir Laravel mitteilen, was es tun soll, wenn jemand unsere Startseite besucht.

Sie werden etwas wie folgt sehen:

Route::get('/', function () {
return view('welcome');
});

Dies ist die Standardroute von Laravel. Sie sagt: "Wenn jemand die Wurzel unserer Webseite ('/') besucht, zeige ihnen die 'welcome'-Ansicht." Aber wir möchten unsere eigene Startseite erstellen, also lassen Sie uns das ändern!

Schritt 4: Erstellen eines Controllers

Controller sind wie die Manager Ihrer Anwendung. Sie verarbeiten Anfragen und geben Antworten zurück. Lassen Sie uns einen für unsere Startseite erstellen:

php artisan make:controller HomeController

Dieser Befehl erstellt eine neue Datei unter app/Http/Controllers/HomeController.php. Öffnen Sie sie und fügen Sie eine Methode hinzu:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
public function index()
{
return view('home');
}
}

Diese index-Methode wird verantwortlich sein, um unsere Startseite anzuzeigen.

Schritt 5: Aktualisieren der Route

Jetzt aktualisieren wir unsere routes/web.php-Datei, um unseren neuen Controller zu verwenden:

use App\Http\Controllers\HomeController;

Route::get('/', [HomeController::class, 'index']);

Diesweist Laravel an: "Wenn jemand '/' besucht, verwenden Sie die index-Methode des HomeController."

Schritt 6: Erstellen der Ansicht

Jetzt müssen wir die tatsächliche HTML für unsere Startseite erstellen. Erstellen Sie eine neue Datei unter resources/views/home.blade.php und fügen Sie einige HTML hinzu:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to My First Laravel Site!</title>
</head>
<body>
<h1>Hello, Laravel World!</h1>
<p>This is my very first Laravel home page. Exciting times!</p>
</body>
</html>

Schritt 7: Ihre Anwendung ausführen

Nun zum großen Augenblick der Wahrheit! Führen Sie im Terminal aus:

php artisan serve

Dies startet einen Entwicklungsserver. Öffnen Sie Ihren Browser und gehen Sie zu http://localhost:8000. Sie sollten Ihre neue Startseite sehen!

Adding Some Flair

Schritt 8: Blade-Templates verwenden

Laravel verwendet eine Vorlagenengine namens Blade. Es ist wie HTML mit Superkräften. Lassen Sie uns unsere home.blade.php aktualisieren, um einige Blade-Funktionen zu verwenden:

@extends('layouts.app')

@section('content')
<h1>Welcome to {{ config('app.name') }}!</h1>
<p>The current time is {{ now() }}.</p>
@endsection

Erstellen Sie jetzt eine neue Datei unter resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', config('app.name'))</title>
</head>
<body>
@yield('content')
</body>
</html>

Dies erstellt eine wiederverwendbare Struktur, die unsere Startseite (und zukünftige Seiten) verwenden kann.

Conclusion

Und dort haben Sie es! Sie haben Ihre erste Laravel-Startseite erstellt. Wir haben viel Boden cobered - von der Einrichtung von Laravel bis hin zur Erstellung von Routen, Controllern und Ansichten. Denken Sie daran, das Lernen zu programmieren ist eine Reise, keine Destination. Bleiben Sie am Üben, erkunden Sie weiter und vor allem, haben Sie Spaß!

Hier ist eine kurze Referenztabelle der Haupt-Laravel-Konzepte, die wir behandelt haben:

Konzept	Beschreibung
Routes	Definieren URLs und wie die Anwendung auf Anfragen reagiert
Controllers	Verarbeiten die Logik für die Antwort auf Anfragen
Views	Enthält das HTML, das von Ihrer Anwendung served wird
Blade	Laravel's Vorlagenengine zur Erstellung dynamischer Ansichten

Frohes Coden und willkommen in der wundervollen Welt von Laravel!

Credits: Image by storyset