Lagerverwaltungssystem | Alpstein-IT¶

Auftrag:
Ich sollte ein Lagerverwaltungssystem bauen, das besser ist als das alte Tool.

Ich hatte Zugriff auf das alte System und habe daraus die Grundfunktionen übernommen. Außerdem habe ich mir Tipps geholt, wie man so ein System am besten aufbaut.

1. Ziele & Anforderungen¶

Probleme, die ich lösen wollte:
Was alles im Lager ist im Blick haben
Ein gutes Tool zu schaffen um den Bestandesüberblick zu haben
Etwas was man auf jedem Gerät aufrufen kann
Wer nutzt das System: nur ich oder ein kleines Team
Einschränkungen: Eigentlich keine hatte einen PC einen Webhost

2. Konzept & Datenmodell¶

Die wichtigsten Dinge im System:
Artikel (Nummer, Name, Kategorie, Anzahl)
Bestände
Nutzer (Rollen & Rechte)

3. Technologie¶

Frontend: HTML
Backend: zuerst Node.js lokal
Datenbank: SQL

4. MVP bauen¶

Ich habe erst den Kern gebaut:

Artikel anlegen
Kategorie wählen
Bestände buchen (Ein-/Ausgang)

Alles andere wie Userverwaltung oder Berechtigungen kam später.

5. UI/UX¶

Einfache Suche & Filter
Schnell zu den wichtigsten Funktionen
Mobilfreundlich, falls am Handy oder Tablet genutzt

6. Testen & Feedback¶

Mit echten Daten getestet
Geschaut, wo es hakt (z. B. Buchungen schneller machen, Berichte fehlen)
Auf Nutzen getestet, bevor ich mehr gebaut habe

Ich habe mich dann entschieden, alles mit HTML zu machen und eine Datenbank dahinter zu haben. Erst lokal mit Node.js gehostet, hat alles super funktioniert.

Dann habe ich ein paar Testprodukte angelegt und geschaut, wie alles zusammenarbeitet. Als die erste Version stand, wollte ich es auf meine Portfolioseite bringen. Mein Hoster konnte kein Node.js, also habe ich alles auf SQL umgestellt. Anfangs war es etwas tricky, aber schliesslich hat es funktioniert.

Ich wollte auf der Seite ein schönes Menu haben indem man genau die Übersicht hat was für produkte und welche kategorien es gibt. So habe ich es dann umgesetzt:

Man kann es schön ausklappen und hat einen Überblick darüber was alles so existiert, also welche Produke man in welcher Kategorie findet.

Ausserdem habe ich ein Loginfenster erstellt man muss sich also zuerst anmelden um etwas bearbeiten zu können und sonst kann man einfach auf die viewOnly() Funktion zugreifen, das heisst man kann nichts bearbeiten.

Wenn man also im viewOnly ist dann kann man nur anschauen, also habe ich ein Menu oben rechts eingefügt um sich einzuloggen.

Wenn man dann eingeloggt ist hat man noch andere Möglichkeiten im Menu wie z.B.:

Die Nur-Leseansicht erlaubt es einem Admin die Ansicht anzusehen in der man nichts bearbeiten kann aber trozdem eingeloggt zu bleiben. Es gibt auch noch einen Menupunkt um sich auszuloggen.

Oberhalb der Tabelle gibt es einen grünen Knopf bei dem man neue Produkte und auch neue Kategorien anlegen kann.

So kann man Kategorien erstellen und oder neue anlegen. Wenn man dann auf Speichern klickt wird das neue Produkt gespeichert und es wird in der Datenbank hinzugefügt.

Ich habe ausserdem in der Tabelle hinten ein Dropdownmenu gemacht bei dem Produkte löschen oder hinzufügen kann.

Ich habe mich dazu entschieden eine Funktion hinzuzufügen bei der man CSV importieren und exportieren kann. Ich habe diese ebenfalls beim Menu oben rechts eingefügt.

Der Admin wenn er eingeloggt ist kann nun CSV Importieren und exportieren. Wenn man jedoch nur im onlyView ist kann man nur exportieren da ja nicht jeder einfach irgenetwas einfügen sollte.

Um es etwas besser zu machen Daten einzufügen habe ich mich dazu entschieden eine kurze Vorschau einzubauen das man zuerst sehen kann was für Daten eingefügt werden und ob sie richtig formatiert sind.

Meine nächste Idee ist es ein Benutzerverwaltungssystem zu erstellen um verschiedene User zu haben die Unterschiedliche Berechtigungen haben. Dazu musste ich eine neuen Table in SQL anlegen.

Ich habe nun ein UI gemacht um neue Benutzer zu erstellen und deren Rolle im System anzupassen auch kann man dort das Passwort ändern.

Berechtigungen der Rollen¶

Berechtigung / Aktion	Admin	Editor	OnlyView
Produkte ansehen	✅	✅	✅
Produkte bearbeiten (Name, Menge, Kategorie)	✅	✅	❌
Produkte löschen	✅	✅	❌
Neues Produkt anlegen	✅	✅	❌
Dark Mode Toggle	✅	✅	✅
Bearbeiten / Nur-Leseansicht umschalten	✅	✅	❌
CSV Export	✅	✅	✅
CSV Import	✅	❌	❌
Benutzerverwaltung öffnen	✅	❌	❌
Login / Logout	✅	✅	✅

Meine nächste Challenge ist es denn Dark-Mode auszubauen.

aktueller stand:

Der Darkmode funktioniert noch nicht ganz perfekt er ist definitiv noch ausbaufähig. Beim Hovern wird es noch zu hell und das Dropdown bei neuen Pordukten ist noch zu hell.

Ich habe es dann geschafft alles schön im Dark-Mode zu gestalten.

Ich habe angefangen eine Funktion hinzuzufügen das man sieht wer und wann etwa erstellt/bearbeitet wurde.

Meine nächster Punkt der ich Umsetzen will ist eine Responsive Design für das Handy.

Ich habe mich dazu entschieden das die sidebar ganz ausgeblendet wird auf mobile fürs erste.

Ich habe eine Funktion hinzugefügt für Admins das Sie mehrere Produkte auswählen können und z.B. löschen oder einzelne Produkte/Items exportieren können.

Ich versuche beim Log immernoch so anzupassen das man sieht welcher User bearbeitet hat. Aufbau der Datenbank:

Feld	Typ	Bemerkung
`id`	INT PK AI	Eindeutige ID
`name`	VARCHAR	Produktname
`quantity`	INT	Menge
`category`	VARCHAR	Kategorie
`createdAt`	DATETIME	Erstellzeit
`updatedAt`	DATETIME	Letzte Bearbeitung
`createdBy`	VARCHAR	Benutzer, der erstellt hat
`updatedBy`	VARCHAR	Benutzer, der zuletzt bearbeitet hat

Ich habe es geschafft das nun der Benutzer in die Datenbank gespeichert wird der den Code bearbeitet hat mit dem richtigen Zeitpunkt an dem es gespeichert wurde.

Ich habe einen neuen Menupunkt hinzugefügt bei dem man die Namen der Kategorien bearbeiten kann.

Und so sieht es dann aus:

Mein nächstes Ziel war es eine Scan QR-Code Funktion hinzuzufügen bei der man den qr scannt der dann eine ID hinterlegt hat und man dann ein produkt hinzufügen kann.

Wenn man dann drauf drückt wird die Kamera geöffnet

Wenn man dann den einen QR-Code scannt wird eine Aufforderung aufgerufen bei der man entscheiden muss wie viele Produkte man hinzufügen will.

Ich habe ausserdem mein responsive Design ausgearbeitet.

Ich habe weiter an meinem responsivem Design gearbeitet das es schöner aussieht:

Ich habe anschliessend die Funktion Produkte hinzufügen mit dem QR Code so erweitert das man auswählen kann ob man löschen oder hinzufügen will.

Mein nächster Punkt war es das die Session mit Cookies gespeichert wird das man sich nicht immer einloggen muss sondern dass das automatisch im Browser gespeichert wird solange er offen ist.

Ich habe dann allgemein mein ganzes CSS angepasst und auch geschaut das alles schön ist voralem auf Mobile das es gut aussieht. Ich habe mich dann dazu entschieden auf der Desktop Version das es kein Menu Dropdown mehr gibt sondern das es wie eine Menubar oben ist

Ausserdem das man die Daten nicht zu früh sieht habe ich beim Loginfenster denn Hintergrund schwarz gemacht das es getrennter von einander ist.

Es gibt jetzt ausserdem eine Funktion bei der man wenn man etwas in der Tabelle bearbeitet nacher ctrl-s drückt das dann alles gespeichert wird.

Seite:¶

Verwaltungssystem ¶

Projektbeschreibung: Inventory-Management-Web-App¶

Projektname: Tim Langenauer – Inventarverwaltung

Zweck:¶

Eine webbasierte Anwendung zur Verwaltung von Inventarartikeln. Benutzer können Produkte hinzufügen, bearbeiten, löschen und kategorisieren.
Alle Änderungen werden geloggt, sodass nachvollziehbar ist, welcher Benutzer wann welche Änderungen vorgenommen hat.
Ziel ist es, den Verwaltungsaufwand zu reduzieren, Änderungen transparent zu machen und die Nutzung durch mehrere Benutzer mit unterschiedlichen Berechtigungen zu ermöglichen.

Technologien:¶

Backend: PHP + MySQL
Frontend: HTML, CSS, JavaScript
Kommunikation: Fetch-API (AJAX) mit JSON für CRUD-Operationen
Sessions: PHP Sessions für Login und Berechtigungen
Sicherheitsmassnahmen: Prepared Statements, Passwort-Hashing, Session-Validierung, serverseitige Input-Prüfung

Datenbankstruktur (vereinfacht):¶

users
id
username
password (hashed)
role (admin, editor, onlyview)
createdAt
lastLogin
items
id
name
quantity
category
createdBy
createdAt
updatedBy
updatedAt

Funktionen:¶

1. Benutzerverwaltung:¶

Login / Logout mit Session-Handling
Benutzerrollen:
admin: alle Rechte (inkl. Benutzerverwaltung)
editor: kann Items hinzufügen, bearbeiten und löschen
onlyview: darf nur lesen
CRUD für Benutzer (nur Admins)
Passwortänderung und Benutzeraktivierung/-deaktivierung
Login-Versuchszähler mit Sperrzeit bei mehrfach falscher Eingabe

2. Inventarverwaltung:¶

Items erstellen, bearbeiten und löschen
Inline-Bearbeitung direkt in der Tabelle
Dynamische Kategorieauswahl (mit Option, neue Kategorien zu erstellen)
Speichern über einen 💾-Button pro Zeile
Sofortige Aktualisierung nach jeder Änderung
Bestandsänderung über +1 / -1 Buttons
Echtzeit-Berechnung von Gesamtmengen oder Summen
Visuelle Hervorhebung von geänderten Zeilen bis zum nächsten Reload
Filter- und Suchfunktion (nach Name, Kategorie, Menge)
Sortierbare Spalten (alphabetisch, numerisch, nach Datum)

3. Frontend-Funktionalität:¶

Dynamische HTML-Tabelle mit Items und Kategorien
EventListener für jede Zeile: +1 / -1 Menge, Löschen, Inline-Speichern
Nach Speichern: Tabelle wird automatisch aktualisiert (loadItems()), Log-Daten ebenfalls
Responsive Design für Desktop, Tablet und Mobile
Nutzung von modalen Dialogen für kritische Aktionen (z. B. Löschen bestätigen)
Dropdown-Menüs für Filter, Sortierung und Kategorienauswahl
Ladeindikatoren und Fehlermeldungen bei Serverproblemen

4. Sicherheitsfeatures:¶

Passwort-Hashing (password_hash + password_verify)
Rollenbasiertes Berechtigungsmanagement auf Serverebene
SQL Injection-Prävention durch Prepared Statements und real_escape_string
XSS-Schutz durch htmlspecialchars() beim Rendern
CSRF-Schutz durch Session-basierte Token
Zeitliche Session-Ablaufüberwachung (Auto-Logout nach Inaktivität)

API-Endpunkte (REST-ähnlich):¶

Methode	Pfad
`GET /api/items.php`	Gibt alle Items zurück
`POST /api/items.php`	Erstellt ein neues Item
`PUT /api/items.php?id=X`	Aktualisiert ein Item
`DELETE /api/items.php?id=X`	Löscht ein Item
`GET /api/categories.php`	Gibt alle Kategorien zurück
`POST /api/categories.php`	Erstellt eine neue Kategorie
`GET /api/logs.php`	Gibt Log-Einträge (optional gefiltert) zurück

Alle Endpunkte geben JSON-Antworten zurück und prüfen die Session-Berechtigung des Nutzers.

Frontend-Architektur (JS):¶

Module:
auth.js → Login / Logout
items.js → CRUD-Funktionen für Items
ui.js → Tabellenaufbau, Buttons, Events
logs.js → Log-Anzeige und Filterung
Nutzung von ES6-Modulen und Fetch-API
Zentrale Fehlerbehandlung und Notifications-System

Design & UX:¶

Minimalistisches UI mit klarer Farbstruktur (hell/dunkel-Modus geplant)
Übersichtliche Tabellenansicht mit Sticky-Header
Icons für Bearbeiten, Speichern, Löschen, Filtern, und Log-Anzeige
Hover-Effekte und visuelle Rückmeldungen bei Interaktionen
Responsive Navigation (Sidebar oder Burger-Menü auf Mobile)

Erweiterbarkeit:¶

Geplant: Dashboard mit Statistiken (z. B. häufig bearbeitete Kategorien, Item-Verläufe)
Optionale Exportfunktionen (CSV, Excel, PDF)
Benachrichtigungssystem (E-Mail oder interne Alerts bei kritischen Lagerständen)
Mehrsprachigkeit (i18n) durch externe JSON-Übersetzungsdateien
Möglichkeit zur Integration von Barcode-Scanner-Unterstützung
API-Authentifizierung über Token für externe Tools (z. B. mobile App-Anbindung)

Workflow-Beispiel:¶

Benutzer loggt sich ein → Session wird gesetzt
Benutzer öffnet Tabelle → alle Items werden per GET /api/items.php geladen
Benutzer bearbeitet ein Item inline → 💾-Button erscheint
Klick auf 💾 → PUT /api/items.php?id=X → Backend aktualisiert Item, Log wird gesetzt
Tabelle und Log werden automatisch neu geladen
Änderungen erscheinen im Log-Bereich (inkl. Benutzername, Uhrzeit, alte/neue Werte)

Besonderheiten:¶

Vollständig dynamisches Frontend: Tabellenzeilen und Buttons werden per JS generiert
Inline-Editing + dynamische Kategorieauswahl
Echtzeit-Update nach jeder Änderung (ohne Neuladen der Seite)
Erweiterbares Log-System
Klare Trennung von Daten- und Präsentationslogik
Leicht wartbarer Code durch modulare Struktur