PHP MVC Anwendung mit Symfony Routing, Vite, TailwindCSS und Alpine.js

Eine moderne PHP-Anwendung mit MVC-Architektur, die Symfony Routing für URL-Routing, Vite für Asset-Bundling, TailwindCSS für Styling und Alpine.js für JavaScript-Interaktivität verwendet.

🚀 Installation

1. Composer Dependencies installieren

composer install

2. npm Dependencies installieren

npm install

3. Entwicklungsserver starten

In einem Terminal den Vite Dev-Server starten:

npm run dev

In einem zweiten Terminal den PHP-Server starten (falls nicht bereits ein Webserver läuft):

php -S localhost:8000

Oder verwenden Sie Ihren bevorzugten PHP-Webserver (XAMPP, WAMP, etc.).

4. Anwendung aufrufen

Öffnen Sie im Browser: http://localhost:8000

📁 Projektstruktur

.
├── app/
│   ├── Controllers/      # Controller-Klassen (PSR-4)
│   ├── Models/           # Model-Klassen (PSR-4)
│   ├── Core/             # Core-Klassen (Router, Controller, Model)
│   └── routes.php        # Route-Definitionen
├── public/               # Öffentliche Dateien (wird von Vite generiert)
├── resources/
│   ├── views/            # View-Templates
│   ├── js/               # JavaScript-Dateien
│   └── css/              # CSS-Dateien
├── vendor/               # Composer Dependencies
├── index.php             # Entry-Point
├── .htaccess             # URL-Rewriting
├── composer.json         # PHP Dependencies
├── package.json          # npm Dependencies
└── vite.config.js        # Vite-Konfiguration (inkl. TailwindCSS v4)

🛠️ Verfügbare Befehle

• npm run dev - Startet den Vite Dev-Server mit HMR (Hot Module Replacement)
• npm run build - Erstellt eine Production-Build
• npm run preview - Vorschau der Production-Build

📝 Verwendung

Neue Route hinzufügen

In app/routes.php:

// Einfache Route
$routes->add('route_name', new Route('/pfad', [
    '_controller' => 'ControllerName::methodName',
], [], [], '', [], ['GET']));

// Route mit Parameter
$routes->add('user_show', new Route('/user/{id}', [
    '_controller' => 'UserController::show',
    'id' => null,
], [
    'id' => '\d+', // Nur Zahlen erlaubt
], [], '', [], ['GET']));

// Route mit mehreren HTTP-Methoden
$routes->add('post_create', new Route('/post', [
    '_controller' => 'PostController::create',
], [], [], '', [], ['GET', 'POST']));

Neuen Controller erstellen

1. Erstellen Sie eine neue Datei in app/controllers/:

<?php

namespace App\Controllers;

use App\Core\Controller;

class YourController extends Controller
{
    public function index($params = [])
    {
        $data = ['title' => 'Meine Seite'];
        return $this->view('your/view', $data);
    }
    
    public function show($params = [])
    {
        $id = $params['id'] ?? null;
        $data = ['title' => 'Details', 'id' => $id];
        return $this->view('your/show', $data);
    }
}

2. Route in app/routes.php hinzufügen

Neue View erstellen

Erstellen Sie eine PHP-Datei in resources/views/:

<?php
ob_start();
?>

<div>
    <h1><?= $title ?></h1>
</div>

<?php
$content = ob_get_clean();
require_once __DIR__ . '/../layouts/app.php';
?>

🛣️ Symfony Routing

Das Projekt nutzt Symfony Routing Component für professionelles URL-Routing:

• Route-Parameter: /user/{id} mit Validierung
• HTTP-Methoden: GET, POST, PUT, DELETE
• Route-Namen: Für URL-Generierung
• Constraints: Regex-Validierung für Parameter

Route-Parameter im Controller

public function show($params = [])
{
    $id = $params['id']; // Route-Parameter
    // ...
}

🎨 TailwindCSS v4

Das Projekt nutzt TailwindCSS v4 mit der neuen CSS-First-Konfiguration:

• Keine tailwind.config.js mehr - Konfiguration erfolgt direkt in resources/css/app.css
• Vite Plugin - @tailwindcss/vite für optimale Integration
• CSS-First - Verwendet @import "tailwindcss" und @source Direktiven
• Dark Mode - Unterstützt über dark: Klassen (class-basiert)

Verwenden Sie die Utility-Klassen direkt in Ihren Views. Die Content-Pfade werden in resources/css/app.css definiert.

⚡ Alpine.js

Alpine.js ist bereits eingebunden. Verwenden Sie x-data, x-show, @click etc. direkt in Ihren HTML-Elementen.

🌙 Dark Mode

Die Anwendung unterstützt Dark Mode mit automatischer Erkennung der Systemeinstellungen. Der Dark Mode kann über den Toggle-Button in der Navigation umgeschaltet werden.

📦 Production Build

Für Production:

npm run build

Die kompilierten Assets werden in public/build/ gespeichert.

🔧 Konfiguration

• Vite: vite.config.js
• TailwindCSS: tailwind.config.js
• PostCSS: postcss.config.js

📄 Lizenz

MIT