Notfallvorrats-Inventar
Eine selbstgehostete, leichtgewichtige Webanwendung zur Verwaltung von Hahaltsnotfallvorräten und zur Planung von Überlebensmahlzeiten. Erstellt mit PHP 8.x und Vanilla JavaScript — keine Datenbank erforderlich, keine Frameworks, keine Build-Tools.
✨ Funktionen
Bestandsverwaltung
Vollständige CRUD-Operationen mit automatisch berechneten Resttagen, Statusanzeigen, Kategoriefilter, Sortierung und Suche.
Admin-Authentifizierung
BCrypt-Passwort-Hashing, PHP-Sitzungsauthentifizierung, Nur-Lese-Modus für Betrachter und .htaccess-Dateischutz.
Haushaltskonfiguration
Anpassbare Haushaltszusammensetzung und Zieltage mit dynamischer Neuberechnung aller Vorratsdauern.
Überlebensrezepte
16 überlebensoptimierte Rezepte mit Prioritätsstufen, Brennstoffkosten-Indikatoren, Kinderversionen und druckfähigem Layout.
Mehrsprachig
Englisch, Deutsch und Rumänisch mit sofortigem Wechsel und persistenter Präferenz über localStorage und Cookies.
Design & UX
Responsives Layout, Dunkelmodus-Unterstützung, CSS Custom Properties, barrierefreie Fokus-Rahmen und reduzierte Bewegung.
Bestandsverwaltung
- Vollständige CRUD-Operationen — Artikel hinzufügen, bearbeiten und löschen mit Kategorien, Unterkategorien, Mengen, Einheiten, täglichem Verbrauch und Ablaufdaten
- Automatisch berechnete Resttage — das System berechnet, wie viele Tage jeder Artikel basierend auf dem aktuellen Bestand und dem täglichen Verbrauch je Haushaltsmitglied reicht
- Statusanzeigen — Artikel werden automatisch als Kritisch (unter Mindestbestand), Warnung (unter Ziel) oder Ausreichend markiert
- Kategoriefilter — Klicken Sie auf eine Kategorie-Pille, um die Tabelle sofort zu filtern; Pillen sind nach aggregiertem Status farbcodiert
- Sortierbare Tabelle — Klicken Sie auf eine Spaltenüberschrift für aufsteigende/absteigende Sortierung
- Suche — Echtzeitsuche über Artikelnamen, Kategorien und Unterkategorien
- Backup exportieren — Ein-Klick-JSON-Export Ihres gesamten Inventars zur Offline-Aufbewahrung
Admin-Authentifizierung
- Einzel-Admin-Modell — ein Admin-Konto wird bei der Ersteinrichtung erstellt; keine Multi-User-Konten erforderlich
- BCrypt-Passwort-Hashing (Kostenfaktor 12) — Passwörter werden niemals im Klartext gespeichert
- PHP-Sitzungsauthentifizierung — Sitzungen in einem geschützten sessions/-Verzeichnis, nicht im System-Temp-Ordner
- Betrachtermodus — nicht authentifizierte Besucher können nur lesen
- Passwortänderung — Admin kann das Passwort jederzeit in den Einstellungen ändern
- .htaccess-Schutz — direkter URL-Zugriff auf JSON-Datendateien und Sitzungen ist blockiert
Überlebensrezepte
- 16 überlebensoptimierte Rezepte — speziell für die im Inventar erfassten Zutaten entwickelt
- Prioritätsstufen — Zuerst verwenden (verderblich), Bald verwenden oder Jederzeit
- Brennstoffkosten-Indikatoren — Null (kein Kochen), Niedrig (<10 Min.) oder Mittel (10-20 Min.)
- Nur-Notfall-Rezepte — klar markiert für kritische Situationen
- Komfort-/Normalitätsrezepte — Mahlzeiten, die die Moral in längeren Notfällen stärken
- Kinderversionen — angepasste Anleitungen für junge Kinder (ab 5 Jahren)
- Überlebenstipps — Wasserspartechniken, Zutaten-Ersatzstrategien und Koch-Abkürzungen
- Druckfertig — optimiertes Druck-Stylesheet für physische Kopien oder "Als PDF speichern"
📁 Dateistruktur
Voraussetzungen
- Webserver — Apache (mit .htaccess-Unterstützung) oder Nginx
- PHP 8.x — mit json- und posix-Erweiterungen (posix ist optional, bietet aber bessere Diagnose)
- Schreibberechtigungen — der Webserver-Benutzer (typischerweise www-data) muss in data/ und sessions/ schreiben können
- Keine Datenbank — alle Daten werden in JSON-Dateien gespeichert
- Kein npm/Build-Schritt — reines HTML, CSS und JavaScript; keine Kompilierung oder Bündelung erforderlich
🛠 Installation
Wählen Sie die Installationsmethode, die zu Ihrem Betriebssystem und Setup passt.
Schnellstart
Dateien in das Webserver-Verzeichnis kopieren
Kopieren Sie den gesamten Projektordner in Ihr Apache/Nginx-Dokumentverzeichnis.
sudo cp -r ./emergency-prep-inventory /var/www/html/tools/emergency-prep-inventory
Berechtigungsskript ausführen
Dies erstellt data/ und sessions/, setzt Eigentümer und Berechtigungen, erstellt .htaccess-Schutz, generiert ein Favicon und führt einen Schreibtest durch.
sudo bash setup-permissions.sh /var/www/html/tools/emergency-prep-inventory
Browser öffnen
Navigieren Sie zu Ihrer Anwendungs-URL und schließen Sie den Einrichtungsbildschirm ab.
Manuelle Berechtigungseinstellung
Wenn Sie Berechtigungen lieber manuell statt mit dem Skript festlegen möchten:
mkdir -p /var/www/html/tools/emergency-prep-inventory/data
mkdir -p /var/www/html/tools/emergency-prep-inventory/sessions
sudo chown -R www-data:www-data /var/www/html/tools/emergency-prep-inventory
find /var/www/html/tools/emergency-prep-inventory -type d -exec chmod 755 {} \;
chmod 750 /var/www/html/tools/emergency-prep-inventory/data
chmod 700 /var/www/html/tools/emergency-prep-inventory/sessions
chmod 640 /var/www/html/tools/emergency-prep-inventory/*.php
chmod 644 /var/www/html/tools/emergency-prep-inventory/*.html
chmod 644 /var/www/html/tools/emergency-prep-inventory/*.css
chmod 660 /var/www/html/tools/emergency-prep-inventory/data/*.jsonNginx-Konfiguration
Wenn Sie Nginx statt Apache verwenden, fügen Sie diese Location-Blöcke zu Ihrer Serverkonfiguration hinzu:
location /data/ {
deny all;
}
location /sessions/ {
deny all;
}XAMPP ist ein kostenloses All-in-One-Paket mit Apache, PHP und allem, was Sie benötigen, um diese Anwendung unter Windows auszuführen. Keine manuelle Webserver-Installation nötig.
Schritt 1: XAMPP installieren
- XAMPP für Windows von apachefriends.org herunterladen
- Den Installer ausführen. Standard-Installationspfad: C:\xampp
- Während der Installation sicherstellen, dass Apache und PHP ausgewählt sind (Standard)
- Nach der Installation das XAMPP-Kontrollpanel öffnen und neben Apache auf Start klicken — der Status sollte grün werden
Schritt 2: Projektdateien kopieren
- Zum XAMPP-Webroot-Verzeichnis navigieren: C:\xampp\htdocs\
- Einen Projektordner erstellen, z.B. C:\xampp\htdocs\emergency-prep-inventory\
- Alle Projektdateien in diesen Ordner kopieren: api.php, index.html, receips.html, style.css, permission.sh, setup-permissions.sh
Schritt 3: Erforderliche Verzeichnisse erstellen
Erstellen Sie in Ihrem Projektordner manuell diese zwei Verzeichnisse:
C:\xampp\htdocs\emergency-prep-inventory\data\C:\xampp\htdocs\emergency-prep-inventory\sessions\
Das war's — XAMPP führt Apache unter Ihrem eigenen Windows-Benutzerkonto aus, sodass keine Berechtigungsprobleme bestehen. PHP kann automatisch in diese Verzeichnisse schreiben.
Schritt 4: Anwendung öffnen
- Browser öffnen und zu: http://localhost/emergency-prep-inventory/ gehen
- Der Einrichtungsbildschirm erscheint — Admin-Konto erstellen und Haushalt konfigurieren
- Die Anwendung läuft jetzt lokal auf Ihrem Rechner
Optional: Lokalen Netzwerkzugriff aktivieren
Wenn andere Geräte in Ihrem Heimnetzwerk (Telefon, Tablet, anderer Computer) auf das Inventar zugreifen sollen:
- Lokale IP-Adresse Ihres Windows-PCs finden: Eingabeaufforderung öffnen und ipconfig ausführen — nach "IPv4-Adresse" suchen (z.B. 192.168.1.100)
- Auf dem anderen Gerät im Browser zu: http://192.168.1.100/emergency-prep-inventory/ gehen
- Sicherstellen, dass die Windows-Firewall eingehende Verbindungen auf Port 80 zulässt (XAMPP fragt normalerweise danach)
Die .htaccess-Dateien, die data/ und sessions/ vor direktem URL-Zugriff schützen, funktionieren mit XAMPP sofort, da es Apache mit standardmäßig aktiviertem mod_rewrite verwendet.
Fehlerbehebung (Windows / XAMPP)
| Problem | Solution |
|---|---|
| Apache startet nicht | Ein anderes Programm (oft Skype oder IIS) nutzt Port 80. Im XAMPP-Kontrollpanel neben Apache auf "Config" klicken → Port auf 8080 ändern → über http://localhost:8080/... aufrufen |
| "Zugriff verboten"-Fehler | Sicherstellen, dass der Ordnername in htdocs mit der URL übereinstimmt. Keine Leer- oder Sonderzeichen im Ordnernamen. |
| Leere Seite / PHP läuft nicht | XAMPP-Kontrollpanel öffnen → neben Apache auf "Config" klicken → sicherstellen, dass PHP aktiviert ist. Testen mit in einer test.php-Datei. |
| data/ oder sessions/ nicht beschreibbar | Rechtsklick auf den Ordner → Eigenschaften → Sicherheit → sicherstellen, dass "Benutzer" oder "Jeder" Schreibberechtigung hat. Selten nötig bei XAMPP. |
| .htaccess funktioniert nicht | C:\xampp\apache\conf\httpd.conf öffnen, #LoadModule rewrite_module modules/mod_rewrite.so finden und das # am Anfang entfernen. Apache neu starten. |
Auf macOS haben Sie zwei beliebte Optionen für einen lokalen PHP-Server: XAMPP (plattformübergreifend, wie bei Windows) oder MAMP (macOS-fokussiert). Beide funktionieren gut.
XAMPP auf macOS
Schritt 1: XAMPP installieren
- XAMPP für macOS von apachefriends.org herunterladen
- Die .dmg-Datei öffnen und XAMPP in den Programme-Ordner ziehen
- XAMPP aus Programme starten — möglicherweise wird Ihr macOS-Passwort benötigt
- Im XAMPP-Kontrollpanel neben Apache auf Start klicken
Schritt 2: Projektdateien kopieren
Das XAMPP-Webroot unter macOS ist: /Applications/XAMPP/xamppfiles/htdocs/
cp -r ./emergency-prep-inventory /Applications/XAMPP/xamppfiles/htdocs/emergency-prep-inventory
Schritt 3: Erforderliche Verzeichnisse erstellen
mkdir -p /Applications/XAMPP/xamppfiles/htdocs/emergency-prep-inventory/data mkdir -p /Applications/XAMPP/xamppfiles/htdocs/emergency-prep-inventory/sessions sudo chown -R daemon:daemon /Applications/XAMPP/.../data sudo chown -R daemon:daemon /Applications/XAMPP/.../sessions
Bei Berechtigungsfehlern (XAMPP läuft als Benutzer 'daemon'): sudo chown -R daemon:daemon /Applications/XAMPP/.../data und sessions ausführen
Schritt 4: Anwendung öffnen
Browser öffnen und zu: http://localhost/emergency-prep-inventory/ gehen
MAMP auf macOS
MAMP (Mac + Apache + MySQL + PHP) ist eine weitere beliebte Option. Die kostenlose Version reicht aus — MySQL wird für dieses Projekt nicht benötigt.
Schritt 1: MAMP installieren
- MAMP von mamp.info herunterladen
- Durch Ziehen in den Programme-Ordner installieren
- MAMP starten und auf Server starten klicken — Apache und MySQL starten (MySQL wird nicht verwendet, stört aber nicht)
Schritt 2: Projektdateien kopieren
Das MAMP-Webroot ist: /Applications/MAMP/htdocs/
cp -r ./emergency-prep-inventory /Applications/MAMP/htdocs/emergency-prep-inventory
Schritt 3: Erforderliche Verzeichnisse erstellen
mkdir -p /Applications/MAMP/htdocs/emergency-prep-inventory/data mkdir -p /Applications/MAMP/htdocs/emergency-prep-inventory/sessions chmod 777 /Applications/MAMP/htdocs/emergency-prep-inventory/data chmod 777 /Applications/MAMP/htdocs/emergency-prep-inventory/sessions
MAMP führt Apache unter Ihrem eigenen Benutzerkonto aus, sodass Berechtigungen kein Problem sein sollten. Falls doch: chmod 777 data/ und sessions/
Schritt 4: Anwendung öffnen
Standardmäßig nutzt MAMP Port 8888. Browser öffnen und zu: http://localhost:8888/emergency-prep-inventory/ gehen
Sie können MAMPs Port in MAMP → Einstellungen → Ports → "Auf Standard-Apache- und MySQL-Ports setzen" ändern. Dann wird die URL einfach http://localhost/emergency-prep-inventory/.
Optional: Lokalen Netzwerkzugriff (macOS)
- Lokale IP-Adresse Ihres Macs finden: Systemeinstellungen → Wi-Fi → auf "Details" klicken — oder im Terminal: ipconfig getifaddr en0
- Auf dem anderen Gerät: XAMPP: http://192.168.1.50/emergency-prep-inventory/ — MAMP: http://192.168.1.50:8888/emergency-prep-inventory/
- Sicherstellen, dass die macOS-Firewall eingehende Verbindungen zulässt: Systemeinstellungen → Netzwerk → Firewall
Fehlerbehebung (macOS / XAMPP / MAMP)
| Problem | Solution |
|---|---|
| Apache startet nicht | macOS hat einen eingebauten Apache, der kollidieren kann. Stoppen: sudo apachectl stop. Auch prüfen, ob eine andere App Port 80 nutzt. |
| "Zugriff verboten" | Ordnerberechtigungen prüfen. Für XAMPP benötigt der daemon-Benutzer Lesezugriff. Für MAMP sollte Ihr eigener Benutzer funktionieren. |
| data/ nicht beschreibbar | XAMPP läuft als daemon — sudo chown -R daemon:daemon /Applications/XAMPP/.../data ausführen. MAMP läuft als Ihr Benutzer — sollte ohne Änderungen funktionieren. |
| .htaccess funktioniert nicht (XAMPP) | /Applications/XAMPP/xamppfiles/etc/httpd.conf öffnen, #LoadModule rewrite_module finden und das # entfernen. Apache neu starten. |
| .htaccess funktioniert nicht (MAMP) | MAMP hat mod_rewrite standardmäßig aktiviert — sollte sofort funktionieren. |
| PHP-Version zu alt | XAMPP und MAMP liefern aktuelle PHP-Versionen mit. Wenn Sie PHP 8.x benötigen, laden Sie die neueste Version von deren Website herunter. |
🔌 API-Referenz
Die Backend-API (api.php) verwendet ein einfaches aktionsbasiertes Routing. Alle Anfragen geben JSON-Antworten zurück.
Öffentliche Endpunkte (Keine Authentifizierung erforderlich)
| Action | Method | Description |
|---|---|---|
check_setup | GET | setup complete? |
setup | POST | create admin (first-time) |
login | POST | authenticate admin |
logout | GET/POST | destroy session |
session_status | GET | auth state |
get_settings | GET | household config |
inventory | GET | all items |
check_permissions | GET | diagnostic |
Geschützte Endpunkte (Admin-Authentifizierung erforderlich)
| Action | Method | Description |
|---|---|---|
save_inventory | POST | save full inventory |
save_settings | POST | update household config |
change_password | POST | change admin password |
Anfrage-/Antwort-Beispiele
Anmeldung:
{ "action": "login", "username": "admin", "password": "your-password" }Inventar speichern:
{ "action": "save_inventory", "data": [{ "itemName": "Rice", "category": "Grains", "currentQuantity": 5, "unit": "kg", "dailyConsumption": 0.1 }] }📖 Anleitung
Ersteinrichtung
- Admin-Konto erstellen — Benutzername wählen (mindestens 2 Zeichen) und Passwort wählen (mindestens 6 Zeichen)
- Haushalt konfigurieren — Anzahl der erwachsenen Männer, erwachsenen Frauen, Kinder und Zieltage festlegen
Nach der Einrichtung werden Sie automatisch als Admin angemeldet.
Bestandsartikel verwalten
- Neuen Artikel hinzufügen — auf "Neuer Artikel" klicken (nur Admin)
- Artikel bearbeiten — auf das Stift-Symbol in der Aktionsspalte klicken (nur Admin)
- Artikel löschen — auf das Papierkorb-Symbol klicken (nur Admin)
- Neue Kategorien/Einheiten hinzufügen — jedes Dropdown hat eine "+"-Schaltfläche
- Backup exportieren — auf "Backup Export" klicken, um das Inventar als JSON-Datei herunterzuladen
Als Gast betrachten
Besucher, die nicht angemeldet sind, können das Inventar im Nur-Lese-Modus durchsuchen. Sie können:
- Alle Bestandsartikel und deren Status anzeigen
- Nach Kategorie filtern und suchen
- Sprachen wechseln
- Auf die Rezeptseite zugreifen
Sie können keine Artikel hinzufügen, bearbeiten oder löschen.
Überlebensrezepte
Klicken Sie auf "Rezepte", um die Überlebensrezeptseite zu öffnen. Jedes Rezept enthält:
- Prioritätsabzeichen — wann dieses Rezept basierend auf der Verderblichkeit der Zutaten verwenden
- Brennstoffkosten-Abzeichen — wie viel Brennstoff zum Kochen benötigt wird
- Wasserkosten — geschätzter Wasserverbrauch für das Rezept
- Zutatenliste — mit auf Ihr Inventar abgestimmten Mengen
- Schritt-für-Schritt-Anleitung — nummerierte Kochschritte
- Kinderversion — angepasste Anleitungen für die Fütterung junger Kinder
- Überlebenstipp — praktische Ratschläge zur Ressourcenschonung
Verwenden Sie die Schaltfläche "Drucken / Als PDF speichern", um ein physisches Backup aller Rezepte zu erstellen.
🔧 Fehlerbehebung
Berechtigungsfehler
Wenn Sie Fehler zum Dateischreibzugriff sehen:
- Berechtigungsprüfungs-Endpunkt ausführen: api.php?action=check_permissions
- Dies zeigt den PHP-Benutzer, Dateieigentümer und Berechtigungsdetails an
- Das Einrichtungsskript erneut ausführen: sudo bash setup-permissions.sh /ihr/projektpfad
- Wenn das Problem weiterhin besteht, Eigentümer manuell prüfen — Dateien sollten www-data:www-data mit Berechtigungen 660 für JSON-Dateien gehören
Sitzungsprobleme
Wenn die Anmeldung nicht persistent bleibt:
- Sicherstellen, dass das sessions/-Verzeichnis existiert und von www-data beschreibbar ist
- Prüfen, dass das Verzeichnis Berechtigungen 700 hat und www-data gehört
- Überprüfen, dass Ihr Browser Cookies von der Domain akzeptiert
API gibt 500 bei Einrichtung zurück
Dies bedeutet normalerweise, dass das data/-Verzeichnis oder JSON-Dateien nicht beschreibbar sind. Die API-Antwort enthält Diagnoseinformationen:
- php_user — der Benutzer, als der PHP läuft
- file_perms — aktuelle Dateiberechtigungen
- file_owner — aktueller Dateieigentümer
- fix — der genaue Befehl zur Problemlösung
🛡 Sicherheitsaspekte
- JSON-Datendateien sind über .htaccess-Regeln (Apache) oder Nginx-Location-Blöcke vor direktem HTTP-Zugriff geschützt
- Admin-Anmeldeinformationen werden mit BCrypt-Hashing (Kosten 12) gespeichert — Passwörter werden niemals im Klartext gespeichert
- Sitzungsdateien werden in einem dedizierten Verzeichnis mit restriktiven Berechtigungen (700) gespeichert, nicht im systemweiten /tmp-Verzeichnis
- PHP-Dateien haben Berechtigungen 640 — nur vom Webserver-Benutzer und der Gruppe lesbar, nicht weltweites Lesbar
- Keine CSRF-Token — diese Anwendung ist für die Verwendung durch einen einzelnen Admin in einem vertrauenswürdigen Netzwerk konzipiert. Bei öffentlichem Internetzugang CSRF-Schutz hinzufügen
- Keine Ratenbegrenzung — Brute-Force-Schutz ist nicht implementiert. Bei öffentlichem Zugriff fail2ban oder ähnliche Tools verwenden
⚙️ Technologie-Stack
| Component | Technology |
|---|---|
| Backend | PHP 8.x |
| Frontend | HTML5 CSS3 JS ES6+ |
| Storage | JSON files |
| Auth | Sessions BCrypt |
| Languages | EN DE RO |
Browser-Unterstützung
- Chrome / Edge (letzte 2 Versionen)
- Firefox (letzte 2 Versionen)
- Safari (letzte 2 Versionen)
- Mobile Browser (Chrome für Android, Safari für iOS)
📄 Lizenz
Dieses Projekt wird wie besehen für die persönliche Haushaltsnotfallvorsorge bereitgestellt. Kontakt: marundaliliana@gmail.com für individuelle Einsätze oder Anfragen.