HTML/JavaScript: user input submit in externe Tabelle speichern?

[McMoneysack91]

Liebe Freunde,

heute geht es nicht um konkrete Code-Beiträge, sondern um eine Grundsatzfrage:

Kann ich Benutzereinträge aus einer "offline" HTML/CSS/JS Datei in eine existierende Tabelle speichern?


Ausgangslage:

Wir haben eine Client-seitige GUI aus HTML/CSS/JS. Hier gibts kein PHP, keine Server, nichts. Einfach eine entsprechende HTML-Datei in einem Ordner auf einem gemeinsamen Laufwerk, auf die alle Benutzer Zugriff haben.

Gleichzeitig liegt in diesem Ordner bereits eine vorgefertigte Tabelle, beispielsweise die "Benutzerübersicht.xlsx". Die Spalten tragen die Titel Name, Vorname, Alter und Lieblingsfarbe.

Wenn der Benutzer die HTML-Datei öffnet, kommt er in die entsprechende GUI und sieht eine <form> also ein Formular. Hier sind beispielsweise Name, Vorname, Alter und Lieblingsfarbe gefragt, also exakt wie die Spalten in der Tabellendatei. Diese Felder befüllt der Anwender brav und klickt anschließend den <button> "Submit" oder "Abschicken".



Idealvorstellung:

Die Idealvorstellung wäre, dass nach dem Klick auf den Absendebutton die Benutzereingaben in diese Tabelle entsprechend der zugehörigen Spaltentitel übertragen werden und die Tabelle gespeichert wird.

Wenn nun der nächste Benutzer seine Eingaben macht und abschickt, wird er direkt eine Zeile darunter verewigt und so weiter, bis alle Benutzer ihre Eingaben in diese eine gemeinsame Übersichtstabelle verewigt haben.


Meine bisherigen Erkenntnisse:

ich habe viel im Netz gestöbert und zahlreiche Lösungsansätze gefunden, jedoch keine zufriedenstellenden. Einige arbeiten mit mySQL/PHP und verewigen die Ergebnisse in Datenbanken. Manche fangen an mit APIs, die man sich runterladen muss, nachdem man irgendwo Accounts angelegt hat usw... Das geht mir etwas zu weit und würde in der Umgebung wo ich es einsetzen möchte weder technisch umsetzbar sein, noch erlaubt werden.


Alternative Überlegungen:

Es muss ja nicht zwingend eine Excel-Tabelle sein. Das war jetzt nur das Klischeebeispiel. Es kann auch sehr gerne eine externe und veränderbare HTML-Datei sein, wenn das die Sache vereinfacht. Jetzt wo ich das schreibe, kommt es mir sogar als der gangbarste Weg vor.

Quasi eine HTML Datei mit der Form für den Benutzer und JS Code um das zu exportieren und eine HTML Datei für den Auswerter mit JS Code um aus dem empfangenen Zeug wiederum eine schöne Tabelle zu befüllen.

Wäre diese Alternative ein umsetzbarer Weg? Hat diese Methode in Programmierkreisen einen bestimmten Namen, sodass ich mich erstmal selbst dazu einlesen kann?


Wichtig ist nur nochmal anzumerken, auf die Gefahr hin, dass ich mich vielleicht missverständlich ausgedrückt habe, dass nicht nach jeder Benutzereingabe/Submit eine neue Tabelle/Datei mit seinen Werten generiert wird, sondern er lediglich eine neue Zeile IN einer bereits vorgefertigten Tabelle/Datei erzeugt, sodass alle Benutzer unabhängig von einander ihre Eingaben machen, aber am Ende alle in EINER gemeinsamen Übersicht als Zeilen landen.

 

[Testa2014]

Kannst du mal umschreiben was du machen möchtest? Das macht alles keinen richtigen Sinn. Wo liegt die HTML Datei? Wie stellst du dir das mit den Speichern vor? (Die 2 Fragen beziehen sich auf das Netzlaufwerk, bei uns z.B. kannst du nicht direkt auf dem Laufwerk speichern, was wieso warum keine Ahnung ist mir auch egal da ich es nie Nutz)
Was passiert bei Änderungen? Gleichzeitiger Zugriff?

Eine Umgebung wo keine Datenbanken erlaubt sind, aber ein Flickenteppich aus Excel Dateien? Ähh … entweder kleines Unternehmen oder nicht wirklich gedacht.

Datenbanken gibt es nicht ohne Grund.

 

[floq0r]

Zugriff vom Scripting innerhalb des Browsers aufs Filesystem gibt es nicht (abgesehen vom Filepicker Dialog und nachgelagert basic infos), schreibend schon gar nicht.
Ich sehe keine vernünftige Lösung außer einer DB.

entweder kleines Unternehmen

hnhnhn leider nein Ich frage mich immer noch was das in der Bude werden soll

 

[jube]

So doof finde ich die Frage nicht, aber ich würde auch z.B. eine Datenbank empfehlen. Ansonsten ist doch bei einem Neustart alles wieder verloren. Insbesondere für Benutzerdaten wäre mir eine Excel Datei zu unsicher.
Möglich sollte es sein. Gefunden habe ich diese Bibliothek:
https://github.com/exceljs/exceljs

 

[Raijin]

So sehr man den Wunsch nach so einer Funktion auch verstehen kann, so gefährlich wäre es, wenn es sie gäbe. Über genau denselben Weg könnte sonst jede x-beliebige Webseite im Internet munter auf der lokalen Festplatte (oder einem verbundenen Netzlaufwerk) rumschreiben, inkl. Malware und allem drum und dran.

Der übliche Weg liefe über einen Webserver, der im Backend die Formulardaten beim Absenden von der Webseite entgegennimmt, sie verarbeitet und wegschreibt, sei es in eine Excel-Tabelle oder - besser - in eine Datenbank. Eine nackte HTML-Seite ohne Server ist hingegen nichts anderes als ein banales Textdokument wie eine .txt.

 

[McMoneysack91]

nackte HTML-Seite ohne Server

Genau das ist es. Ihr kennt mich ja, ich formuliere meine Wünsche, Situationen und Ausgangslagen so banal und abstrakt, dass eine Diskussion, wie sinnig das ganze ist, sich erübrigt. Nicht zuletzt sind das alles wunderbare Übungen, auf denen man aufbauen kann. Es dürfte jedem klar sein, dass ich nicht an den Lieblingsfarben von Leuten interessiert bin

Von echten Webseiten ist nicht die Rede, sprich Wildfremde können hier eh nichts tun. HTML/CSS nutze ich eigentlich nur, um dem Anwender eine GUI zu bieten. Darin lässt sich ja sehr schnell und unkompliziert entsprechendes bauen.

Zur Frage, wo das ganze liegt:

auf dem gemeinsamen Laufwerk. Da liegt ein Ordner. In diesem Ordner liegt diese HTML Datei mit dem Formular. AUCH in diesem Ordner liegt dann die Ausgangsdatei, die von der Formulardatei gespeist werden soll.

hnhnhn leider nein

 

[CyborgBeta]

Zugriff vom Scripting innerhalb des Browsers aufs Filesystem gibt es nicht (abgesehen vom Filepicker Dialog und nachgelagert basic infos), schreibend schon gar nicht.
Ich sehe keine vernünftige Lösung außer einer DB.

hnhnhn leider nein Ich frage mich immer noch was das in der Bude werden soll

Das ist korrekt. JS muss quasi immer in einer Art Sandkasten leben. Dateien herunterladen geht allerdings.

Ergänzung (4. Juli 2023)

Edit: Sie können aber mit dem fetch command lokale Dateien lesen. Aber das ist nur die halbe Miete: https://stackoverflow.com/questions/14446447/how-to-read-a-local-text-file-in-the-browser

Ergänzung (4. Juli 2023)

Noch einmal etwas anders beschrieben: Die REST-Schnittstelle eines möglicherweise vorhandenen Webservers kann nur GET-Anfragen beantworten. Das heißt, Dateien können nur an den Client ausgeliefert werden.

Hier gibt es aber einen Sonderfall, der Webserver läuft auf derselben Maschine. Das heißt, der Benutzer kann die Website lokal im Browser aufrufen. Sie wird dabei entweder über den Webserver bereitgestellt, oder direkt vom Dateisystem über das Betriebssystem.

Das fetch command sollte in beiden Fällen funktionieren, wenn entweder ein relativer oder absoluter Pfad (+ Präfix) angegeben wird.

Damit hättest du aber nur die halbe Miete, nämlich das Excel-File geöffnet und ggf. bearbeitet. Ein bestehendes Excel-File muss aber noch gespeichert bzw. überschrieben werden. Ein Download ist mit JavaScript auch möglich, allerdings muss der Benutzer den Speicherort immer selbst auswählen.

So viel erst einmal von mir, just put my 2 cents in ...

 

[Raijin]

Wenn eh Excel mit im Spiel ist, kann man es natürlich auch direkt darüber machen. Im einfachsten Fall mit einer definierten Liste, die sich ohne weiteres Zutun selbsttätig erweitert, wenn man in der letzten Zeile Daten eingibt Man könnte beispielsweise mit gesperrten/freigegebenen Zellen arbeiten und so nur die Eingabefelder freigeben oder aber man macht das ganze gar via VBA.

 

[Joshinator]

Zugriff vom Scripting innerhalb des Browsers aufs Filesystem gibt es nicht

Sie können aber mit dem fetch command lokale Dateien lesen.

In Chrome funktioniert auch schreiben, Chrome & Co hat die File System API.
Apple & Mozilla halten davon Abstand, wirklich universal kann man das also nicht benutzen.

Logseq nutzt die API recht eindrucksvoll für offline-first Notes, funktionieren tut das also.
Der Browser fragt nach Ordern-Zugriff und innerhalb dieses lokalen Ordners darf die Website dann schalten und walten.

So könnte man recht einfach eine CSV per JS einlesen, und entsprechend wird der DOM geupdated.
Wenn man dann das <form>-Submit abfängt kann man auch beim absenden die CSV entsprechend erweitern.

Die Datenbank ist dann aber diese CSV Datei die permanent hin & her gesendet werden muss.
Und wenn mehrere Leute parallel (z.B. per Samba) die selbe CSV auf haben kann es sein dass die sich gegenseitig die Datei überschreiben.
Kann man dagegen absichern, aber "rumgepfusche" trifft es ganz gut. Das Szenario schreit nach nem Server.

Edit: sollte dazu gesagt sein, File System API braucht wie viele andere moderne Browser-APIs secure context. Je nach Setup vielleicht problematisch, wobei file:// als Secure gilt.