Visualisierte MySQL Datenbank in JavaScript
Ich habe eine Webseite entwickelt, die eine kleine Applikation enthält, mit der sich Einträge direkt im Browser über die Fetch API interaktiv in einer MySQL Datenbank anlegen, bearbeiten und löschen lassen. Die Benutzeroberfläche ist bewusst einfach gehalten und bietet Formulare für die Eingabe, klare Statusmeldungen während der Kommunikation mit dem Server und unmittelbares Update der angezeigten Daten nach jeder Aktion.
Die Webapplikation kommuniziert asynchron über die Fetch API mit REST Endpunkten, sodass Anfragen und Antworten im Hintergrund verarbeitet werden, ohne die Benutzeroberfläche zu blockieren. Nutzer können Einträge erstellen, lesen, aktualisieren und löschen, und nach jeder Aktion werden die angezeigten Daten sofort aktualisiert, sodass der aktuelle Zustand immer sichtbar bleibt. Zur Gewährleistung der Datenqualität und Konsistenz erfolgt eine Validierung der Eingaben sowohl auf der Clientseite als auch auf der Serverseite, wodurch fehlerhafte oder unvollständige Daten frühzeitig abgefangen werden.
Bei Netzwerkproblemen oder Validierungsfehlern zeigt die Anwendung aussagekräftige Fehlermeldungen und Statushinweise an, damit Nutzer und Entwickler schnell die Ursache erkennen und entsprechend reagieren können. Auf der Serverseite werden parametrisierte Abfragen eingesetzt, um die Datenzugriffe zu sichern und Angriffe durch SQL Injection zu verhindern. Die API ist so konfiguriert, dass CORS Anfragen zugelassen werden, damit die Benutzeroberfläche auch dann mit dem API Server zusammenarbeitet, wenn sie von einer anderen Herkunft geladen wird. Zusätzlich besteht die Möglichkeit, eine Authentifizierungsschicht zu aktivieren, die Schreiboperationen auf berechtigte Benutzer beschränkt und somit die Integrität der Daten erhöht. Die Dokumentation des Projekts beschreibt die verfügbaren Endpunkte, die erwarteten Payloads sowie die Schritte zum Einrichten der MySQL Datenbank und enthält Anleitungen zum lokalen Testen der Applikation sowie Hinweise zum Beheben typischer Probleme.