Planung und Konzeption einer kleinen Web‑App

Erste Schritte: Planung und Konzeption einer kleinen Web‑App

Bevor du ins Coding stürzt, lohnt sich eine strukturierte Planung.
Hier führen wir dich Schritt für Schritt von der Idee bis zur ersten Codezeile.
Beispiel‑Projekt: “TaskBoard” – eine Mini‑App, um persönliche Aufgaben zu verwalten
(To‑Do‑Listen mit Status «offen», «in Arbeit», «fertig»).

1. Ziele & Anforderungen definieren

  • MVP‑Funktionalität
    – Aufgaben anlegen, bearbeiten, löschen, Status ändern.
  • Einzel‑Benutzer (kein Multi‑User‑Login in Version 1).
  • Tech‑Stack – PHP 8, MySQL/MariaDB, Composer, Bootstrap‑CSS.
  • Soft‑Constraints – responsiv, möglichst wenige Abhängigkeiten.

2. User Stories (Agile‑Light)

Als Nutzer
möchte ich Aufgaben erfassen,
um meine Arbeit zu planen.

Als Nutzer
möchte ich Aufgaben in "offen", "in Arbeit", "fertig" verschieben,
um Fortschritt zu sehen.

Als Nutzer
möchte ich Aufgaben bearbeiten oder löschen,
um Änderungen nachzutragen bzw. veraltete Einträge zu entfernen.

3. Datenmodell skizzieren

Minimal reicht eine Tabelle tasks.
Feldliste + Datentypen notieren – später via SQL 

CREATE TABLE

. 

tasks
┌──────────┬────────────┬───────────────┬───────────┐
│ id       │ title      │ description   │ status    │
│ INT PK   │ VARCHAR(80)│ TEXT          │ ENUM(...) │
└──────────┴────────────┴───────────────┴───────────┘
status: 'open' | 'doing' | 'done'

4. Seiten & Routing grob planen

URL HTTP Beschreibung
/ GET Liste aller Aufgaben
/task/new GET / POST Formular + Speichern
/task/{id}/edit GET / POST Aufgabe bearbeiten
/task/{id}/delete POST Löschen (mit CSRF)

5. Wireframe / UI‑Skizze

  • Header – Logo + Button “Neue Aufgabe”.
  • Main – drei Bootstrap‑Columns: Offen | In Arbeit | Fertig.
  • Card – jede Aufgabe als Card mit Titel + Edit / Delete Icons.

6. Technische Architektur (MVC‑leicht)

/public          (index.php, assets)
/src
  /Controller    (TaskController.php)
  /Model         (Task.php, PDO DB Wrapper)
  /View          (*.php Templates)
composer.json    (autoload psr‑4 => "App\\": "src/")

7. Risiken & offene Fragen

  • Drag‑and‑Drop Kanban? → Version 2, jetzt Buttons für Statuswechsel.
  • Benutzer­auth? → Out‑of‑Scope, Single‑User ausreichend.
  • Tests / CI? → PHPUnit + GitHub Actions ab Sprint 2.

8. Zeitplan (grobe Sprints)

Tag 1: Setup Git + Composer, DB‑Schema, Routing‑Skeleton
Tag 2: Create/Read Funktion, einfache Liste
Tag 3: Update/Delete + CSRF‑Token, kleines CSS
Tag 4: Status‑Wechsel, Fehlerhandling, Doku

9. Beispiel – erste Migration & Seeder

-- create_tasks.sql
CREATE TABLE tasks (
  id          INT AUTO_INCREMENT PRIMARY KEY,
  title       VARCHAR(80) NOT NULL,
  description TEXT,
  status      ENUM('open','doing','done') DEFAULT 'open',
  created_at  TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- optional: Startdatensatz
INSERT INTO tasks (title, description) VALUES ('Willkommen!', 'Erste Aufgabe');

10. Checkliste Start → Coding

  1. Repo initialisiert, .gitignore erstellt.
  2. composer init + autoload (PSR‑4). src/ Ordner anlegen.
  3. DB anlegen & Migration ausführen.
  4. Routing / Front‑Controller (public/index.php) einrichten.
  5. Erste View (Tasks‑Liste) mit Dummy­daten – End‑to‑End Smoke‑Test.

Fazit

Durch klare Planung – Ziele, Stories, Datenmodell, Seitenstruktur –
vermeidest du spätere Umwege und hältst das Scope klein.
Mit einem leichten MVC‑Gerüst, Composer‑Autoloading und einer Task‑Tabelle
bist du bereit, das erste TaskBoard‑MVP in wenigen Tagen umzusetzen.