219 lines
5.8 KiB
Markdown
219 lines
5.8 KiB
Markdown
# Migration Guide: Von Ausgaben (PHP/jQuery) zu Ausgaben-Next
|
|
|
|
Dieser Leitfaden hilft Ihnen bei der Migration von der alten PHP/jQuery-basierten Ausgaben-Anwendung zur neuen Next.js-Version.
|
|
|
|
## Übersicht
|
|
|
|
### Alte Version (`../Ausgaben`)
|
|
- **Frontend:** HTML + jQuery + jqGrid
|
|
- **Backend:** PHP
|
|
- **Styling:** Custom CSS
|
|
- **Datums-Handling:** jQuery UI Datepicker
|
|
- **Tab-System:** jQuery UI Tabs
|
|
|
|
### Neue Version (`ausgaben-next`)
|
|
- **Frontend:** React 19 + TypeScript
|
|
- **Backend:** Next.js API Routes
|
|
- **Styling:** Tailwind CSS v4
|
|
- **Datums-Handling:** Native HTML5 Date Input
|
|
- **Tab-System:** React State Management
|
|
|
|
## Was bleibt gleich?
|
|
|
|
✓ **Datenbank:** Gleiche MySQL-Datenbank (`RXF.Ausgaben`)
|
|
✓ **Datenstruktur:** Identische Tabellenfelder
|
|
✓ **Funktionalität:** Alle Features der alten Version
|
|
✓ **Look & Feel:** Ähnliches Design (angelehnt an werte-next)
|
|
|
|
## Feature-Vergleich
|
|
|
|
| Feature | Alte Version | Neue Version | Status |
|
|
|---------|-------------|--------------|---------|
|
|
| Eingabe-Formular | ✓ jQuery | ✓ React | ✓ Implementiert |
|
|
| Letzte 10 Einträge | ✓ jqGrid | ✓ React Table | ✓ Implementiert |
|
|
| Liste aller Einträge | ✓ jqGrid | ✓ React Table | ✓ Implementiert |
|
|
| Monats-Statistiken | ✓ PHP + AJAX | ✓ API Routes | ✓ Implementiert |
|
|
| Bearbeiten | ✓ | ✓ | ✓ Implementiert |
|
|
| Löschen | ✓ | ✓ | ✓ Implementiert |
|
|
| Datepicker | ✓ jQuery UI | ✓ HTML5 | ✓ Implementiert |
|
|
| Wochentag auto | ✓ | ✓ | ✓ Implementiert |
|
|
| Tab-Navigation | ✓ jQuery UI | ✓ React | ✓ Implementiert |
|
|
|
|
## Datenbank
|
|
|
|
Die Datenbanktabelle bleibt **unverändert**:
|
|
|
|
```sql
|
|
Ausgaben (
|
|
ID int(11) AUTO_INCREMENT,
|
|
Datum date,
|
|
WochTag varchar(20),
|
|
Wo varchar(255),
|
|
Was varchar(500),
|
|
Wieviel decimal(10,2),
|
|
Wie varchar(50),
|
|
OK tinyint(1)
|
|
)
|
|
```
|
|
|
|
### Wichtig:
|
|
- Beide Anwendungen können parallel auf **derselben Datenbank** laufen!
|
|
- Keine Datenmigration notwendig
|
|
- Bestehende Daten werden automatisch übernommen
|
|
|
|
## Parallelbetrieb
|
|
|
|
Sie können beide Versionen gleichzeitig laufen lassen:
|
|
|
|
1. **Alte Version:** Bleibt unter ihrem bisherigen Pfad aktiv
|
|
2. **Neue Version:** Läuft auf eigenem Port (z.B. 3001)
|
|
3. **Datenbank:** Wird von beiden genutzt
|
|
|
|
### Vorteile:
|
|
- Sanfte Migration ohne Downtime
|
|
- Training mit neuer Version möglich
|
|
- Fallback zur alten Version jederzeit möglich
|
|
- Schrittweise Umstellung der Nutzer
|
|
|
|
## Unterschiede im Verhalten
|
|
|
|
### 1. Datepicker
|
|
**Alt:** jQuery UI Datepicker mit Pop-up
|
|
**Neu:** Native HTML5 Date Input (Browser-native Erscheinung)
|
|
|
|
### 2. Auto-Complete
|
|
**Alt:** jQuery Autocomplete für "Wo" und "Was" Felder
|
|
**Neu:** Noch nicht implementiert (kann später hinzugefügt werden)
|
|
|
|
### 3. Tab-Umschaltung
|
|
**Alt:** Seite bleibt identisch, nur Tabs wechseln
|
|
**Neu:** React State Management, kein Page Reload
|
|
|
|
### 4. Datums-Formatierung
|
|
**Alt:** Server-seitig (PHP) formatiert
|
|
**Neu:** Client-seitig (JavaScript Intl API)
|
|
|
|
## Migrationsschritte
|
|
|
|
### Schritt 1: Installation
|
|
```bash
|
|
cd /home/rxf/Projekte/ausgaben-next
|
|
npm install
|
|
```
|
|
|
|
### Schritt 2: Umgebungsvariablen
|
|
```bash
|
|
cp .env.example .env
|
|
# Bearbeiten Sie .env und verwenden Sie die gleichen
|
|
# Datenbankzugangsdaten wie die alte Version
|
|
```
|
|
|
|
### Schritt 3: Test
|
|
```bash
|
|
npm run dev
|
|
```
|
|
Öffnen Sie http://localhost:3000 und testen Sie die Funktionalität.
|
|
|
|
### Schritt 4: Production Build
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
### Schritt 5: Docker Deployment (Optional)
|
|
```bash
|
|
docker-compose -f docker-compose.local.yml up -d
|
|
```
|
|
|
|
### Schritt 6: Parallelbetrieb testen
|
|
- Alte Version: Weiter unter bisheriger URL
|
|
- Neue Version: Unter Port 3001 (oder konfiguriert)
|
|
- Beide greifen auf gleiche Datenbank zu
|
|
|
|
### Schritt 7: Umstellung
|
|
Wenn Sie mit der neuen Version zufrieden sind:
|
|
1. Ändern Sie die Ports/URLs in Ihrer Infrastruktur
|
|
2. Leiten Sie Traffic zur neuen Version um
|
|
3. Behalten Sie alte Version als Backup
|
|
|
|
## Was wurde verbessert?
|
|
|
|
### Performance
|
|
- ✓ Schnelleres Loading durch Server-Side Rendering
|
|
- ✓ Optimierte Bundles durch Webpack/Turbopack
|
|
- ✓ Lazy Loading von Komponenten
|
|
|
|
### Entwicklung
|
|
- ✓ TypeScript für bessere Code-Qualität
|
|
- ✓ Moderne React Patterns (Hooks)
|
|
- ✓ Wiederverwendbare Komponenten
|
|
|
|
### Wartbarkeit
|
|
- ✓ Klare Trennung von Logik und Präsentation
|
|
- ✓ Testbare Komponenten
|
|
- ✓ Moderne Toolchain
|
|
|
|
### Security
|
|
- ✓ Aktuellere Dependencies
|
|
- ✓ Keine direct SQL-Queries im Frontend
|
|
- ✓ Input Validation
|
|
|
|
## Bekannte Einschränkungen
|
|
|
|
1. **Auto-Complete:** Noch nicht implementiert für "Wo" und "Was" Felder
|
|
2. **Drucken:** Print-Funktionalität noch nicht implementiert
|
|
3. **Anleitung-Seite:** Noch nicht erstellt (kann kopiert werden)
|
|
|
|
Diese Features können bei Bedarf hinzugefügt werden.
|
|
|
|
## Rollback-Plan
|
|
|
|
Falls Sie zur alten Version zurück müssen:
|
|
|
|
1. Stoppen Sie den Next.js Server/Container
|
|
2. Die alte PHP-Version funktioniert weiterhin
|
|
3. Keine Datenbank-Änderungen notwendig
|
|
|
|
## Support und Wartung
|
|
|
|
### Alte Version
|
|
- PHP 7.4+ erforderlich
|
|
- jQuery und jQuery UI müssen geladen bleiben
|
|
- Keine aktive Weiterentwicklung geplant
|
|
|
|
### Neue Version
|
|
- Node.js 22+
|
|
- Regelmäßige Dependency-Updates empfohlen
|
|
- Moderne Stack ermöglicht einfache Erweiterungen
|
|
|
|
## Nächste Schritte
|
|
|
|
Nach erfolgreicher Migration:
|
|
|
|
1. **Auto-Complete implementieren** (optional)
|
|
- Suche nach häufigen "Wo"-Einträgen
|
|
- Vorschläge für "Was"-Einträge
|
|
|
|
2. **Print-Funktion** (optional)
|
|
- CSS für Print-Layout
|
|
- Export als PDF
|
|
|
|
3. **Anleitung-Seite**
|
|
- Kopieren Sie die alte Anleitung
|
|
- Passen Sie sie an die neue UI an
|
|
|
|
4. **Mobile Optimierung**
|
|
- Responsive Design ist bereits vorhanden
|
|
- Kann weiter optimiert werden
|
|
|
|
5. **Erweiterte Statistiken**
|
|
- Jahresübersichten
|
|
- Grafische Darstellungen
|
|
- Kategorien-Auswertungen
|
|
|
|
## Fragen?
|
|
|
|
Bei Problemen oder Fragen:
|
|
- Prüfen Sie [DEPLOYMENT.md](DEPLOYMENT.md)
|
|
- Lesen Sie [README.md](README.md)
|
|
- Kontakt: rxf@gmx.de
|