Dokumentation

Appearance

2. Anlegen eines neuen Übungsmoduls und Aufbau des Modulverzeichnisses ​

2.1 Anlegen eines neuen Übungsmoduls mit dem Artisan-Command php artisan uebung:make-module {alias} ​

Das Kommando php artisan uebung:make-module erstellt ein neues Übungsmodul basierend auf der Vorlage in /modules/Blueprints/UebungVorlage. Der alias muss im kebab-Case (Kleinbuchstaben mit Bindestrichen) formatiert sein und das Präfix uebung- enthalten.

In unserem Fall:

bash
php artisan uebung:make-module uebung-vokabeltrainer

Das Kommando erstellt ein neues Verzeichnis mit dem Namen UebungVokabeltrainer im Verzeichnis modules/Uebungen/

2.2 Aufbau des Modulverzeichnisses ​

Nach der Erstellung eines neuen Moduls entsteht folgende Verzeichnisstruktur, wobei [ModulName] der Name des neuen Moduls (in unserem Fall uebung-vokabeltrainer bzw. UebungVokabeltrainer) ist:

modules/Uebungen/[ModulName]/
├── app/
│   ├── Controllers/
│   │   └── [ModulName]Controller.php
│   └── Models/
│       └── [ModulName].php
├── config.json
├── module.json
├── resources/
│   ├── css/
│   │   └── [modul-name]-custom-css.css
│   ├── img/
│   ├── js/
│   │   └── [modul-name]-some-js-file.js
│   ├── views/
│   │   └── test/
│   │       └── testview.blade.php
│   └── vue/
│       ├── [ModulName]CreateComponent.vue
│       └── [ModulName]MyComponent.vue
├── routes/
│   ├── [modul-name].api.php
│   └── [modul-name].web.php
└── tests/
    └── [ModulName]Test.php

Erläuterung: Die Verzeichnisstruktur repräsentiert im Grunde die Basisstruktur einer Laravel-App, ist aber ein in sich geschlossenes System.

  • app/: Enthält die PHP-Klassen des Moduls
    • Controllers/: API- und Web-Controller
    • Models/: Eloquent-Modelle
  • resources/: Frontend-Ressourcen
    • css/: Modulspezifische Stylesheets
    • js/: JavaScript-Dateien
    • vue/: Vue.js-Komponenten
    • views/: Blade-Templates
  • routes/: API- und Web-Routen
  • tests/: PHPUnit/Pest-Testdateien
  • module.json: Modul-Informationen
  • config.json: Konfigurationsdatei

Bevor die Entwicklung der Übung beginnen kann, sollten sämtliche Konfigurationsdateien angepasst werden.

7. Einbindung von Frontend-Assets: CSS ​

7.1 CSS-Dateistruktur ​

resources/
└── css/
    └── uebung-vokabeltrainer-custom-css.css

7.2 CSS-Import ​

CSS-Dateien werden in resources/index.css importiert:

css
/* resources/index.css */
@import './css/uebung-vokabeltrainer-custom-css.css';

8. Einbindung von Frontend-Assets: Vue-Komponenten und eigene JS-Dateien ​

Die Datei resources/index.js stellt den zentralen Entry-Point für alle Frontend-Assets (CSS, JS, Vue-Komponenten) dar.

8.1 Vue-Komponenten registrieren ​

Komponenten werden in resources/index.js registriert:

javascript
import './index.css';
import UebungVokabeltrainerMyComponent from "./vue/UebungVokabeltrainerMyComponent.vue";

export function initModule(VueAppInstance) {
    VueAppInstance.component('uebung-vokabeltrainer-my-component', UebungVokabeltrainerMyComponent);
}

9. Von der config.json vorgegebene Komponenten ​

Die config.json definiert erforderliche Frontend-Komponente für die jeweiligen Aktion:

9.1 Create-Komponente ​

json
{
  "components": {
    "create": {
      "path": "resources/vue/UebungVokabeltrainerCreateComponent.vue",
      "title": "Vokabeltrainer erstellen"
    }
  }
}

Diese Komponente wird automatisch in der Übungsbibliothek beim Erstellen einer neuen Übung geladen.

10. Testing ​

Im /tests-Verzeichnis befindet sich ein grundlegender PEST-Test, der bereits die grundlegenden CRUD-Funktionen testet.