Benötige Hilfe zur Erstellung einer Webseiten-Eingabemaske, die eine Liste fortlaufend befüllt

[Maria Prader]

Hallo zusammen,

ich bin noch relativer Neuling im Bereich Webseiten erstellen. Ich habe eine Linksammlung in Form einer einfachen html-Seite erstellt, auf der Links in verschiedenen Kategorien dargestellt sind.

Diese Seite (bzw. die Link-Liste darin ) soll fortlaufend bestückt werden (können). Von jedem der die Seite aufruft (Zugang ist passwortgeschützt)

Ich würde nun auf der Webseite gerne Formularfelder/Eingabemasken einfügen, in die die Nutzer (oder ich) Daten eintragen und mit einem "Absendebutton" die eingegebenen Werte in die Linksammlung aufgenommen werden.

Zum besseren Verständnis habe ich dies mal beispielhaft dargestellt; siehe Screenshot.

Ist mein Vorhaben für mich als relativer Neuling machbar? Oder wäre ein zu tiefer Einstieg in ggf. PHP / Java etc. notwendig?

Ich bin für jeden Tipp / Hinweis dankbar!

Vielen vielen Dank vorab!

Liebe Grüße Maria

[Raketenwilli]

Ich würde nun auf der Webseite gerne Formularfelder/Eingabemasken einfügen, in die die Nutzer (oder ich) Daten eintragen und mit einem "Absendebutton" die eingegebenen Werte in die Linksammlung aufgenommen werden.

Das Speichern und Ausgeben ist vorliegend das allerkleinste Problem für Dein Vorhaben.

• Definiere bitte „die Nutzer“.
• Wie willst Du verhindern, dass böse Mitmenschen da böse Links hineinsetzen?
• Wo sollen die Daten gespeichert werden?
• Was willst Du tun wenn es sehr viele Links werden?

[Maria Prader]

Hallo Raketenwilli,

danke für dein Feedback.

• Definiere bitte „die Nutzer“.

Wären so zehn Kollegen, die die Linksammlung mitbenutzen würden

• Wie willst Du verhindern, dass böse Mitmenschen da böse Links hineinsetzen?

Das weiß ich noch nicht, darum habe ich mich im Forum angemeldet, um Ratschläge zu bekommen. Natürlich auch solche, die mir davon abraten, wenn es für mich als Einsteiger wirklich zu "gefährlich" sein sollte.

• Wo sollen die Daten gespeichert werden?

In einer Datenbank bei einem Webhoster (Strato)

• Was willst Du tun wenn es sehr viele Links werden?

Wäre das problematisch? Es gäbe ca. 20 Kategorien mit jeweils ca. 10-20 Links.

LG Maria

[Raketenwilli]

Wie auch Rolf schrieb: Mach mal Deine Pläne (z.B. darf jeder Benutzer die Links hinzufügen, bearbeiten, löschen - wenn „ja“ nur bestimmte? - und wenn bestimmte, wie wird das festgelegt? ...), mach mal die Mockups, zeig uns Deine Datenbankstruktur und die Schritte.

Definiere und beschreibe jeden einzelnen Schritt für jedem Benutzungsablauf. (Links suchen und anzeigen, Authentifizierung, ggf. Abmelden, Hinzufügen, Ändern, Löschen der Links, Hinzufügen, Ändern, Löschen der Kategorien; ggf. Abmelden). Vergiss die Benutzerkonfiguration nicht: Hinzufügen, Ändern, Löschen der Benutzer.

Du wirst feststellen, dass nur kleine Änderungen an den angedachten Arbeitsabläufen teilweise große Änderungen am Ablauf, also in Deinen Skripten erfordern. Beginnt man mit dem Programmieren fürchtet man diese umfangreichen Änderungen und behält erkannten Murks bei: Aus diesem Grund macht man erst mal einen Plan.

Und noch etwas: Ich habe gerade mal eben im Netz mit dem Begriffen „Linkliste PHP“ gesucht. Und stieß gleich beim ersten Suchtreffer auf die erste Katastrophe:

include "konfiguration.php";
#...
if ($BENUTZER_PASSWORT[$_POST["name"]] === $_POST["passwort"])

Grober Fehler: Das Passwort wird im Klartext gespeichert, zudem wurde es in einer Konfigurationsdatei untergebracht. Dafür wird, vorliegend völlig „sinnfrei“, ein typstrenger Vergleich durchgeführt. So endet es, wenn man erlerntes Wissen nicht anwenden kann.

Zweite Katastrophe:

$LINK_TAB = "ja";

„Wenn man zu doof ist true oder 1 zu tippen, notiert man eben "ja". Geht ja viel einfacher, wie auch der schöne spätere Vergleich. Und da habe ich noch kein Wort zum Variablenname gesagt.“ - So wird sich meine Kritik lesen … 😇

Ach so: Bei dieser Nutzerzahl teile ich die Besorgnis bezüglich des Zugriffsschutzes via http/htaccess nicht grenzenlos. (Immerhin bewirkt das empfohlene Server-Modul mod_evasive im Nebeneffekt auch einen gewissen Schutz gegenüber „brute force“-Attacken - falls die Passwörter hinreichend lang und sicher sind. (→ Arbeitsschritt: Überprüfen der Passwörter beim Anlegen und Ändern der Benutzer) Frag Deinen Hoster, ob er dieses oder etwas ähnliches installiert hat.) Aber Du solltest - egal, wie Du das realisierst, darauf achten, dass Benutzernamen und Passwörter nicht im Klartext übertragen werden (schon bei der Aufforderung zur Anmeldung HTTPS erzwingen, danach erst recht.) Die übrigen Bedenken (keine Abmeldung) kann man umgehen - die Benutzer müssen halt wissen wie man handelt, wenn man sich an fremde Rechner setzt um mal im Web was nachzusehen (und ob man in einem solchen Fall überhaupt Passwörter eingibt). Die „Kirche im Dorf zu lassen“ (Du hast nach Deinen Worten 10 bekannte Benutzer) ist, wie wohl nie perfekt, aber eben auch hin und wieder nicht die schlechteste Idee, manchmal die Grundlage dafür, dass überhaupt irgendetwas entstehen kann.

Noch ein Rat: Versuche nicht, die Darstellung und ein Formular für das Editieren der Links auf der selben Webseite zu bewirken.

[Maria Prader]

Hallo Raketenwilli,

vielen Dank für die weiteren Hinweise!

Wie auch Rolf schrieb: Mach mal Deine Pläne..... , mach mal die [Mockups]..., zeig uns Deine Datenbankstruktur und die Schritte.

Ich habe mal ein "Mockup" erstellt. Hierbei den Hinweis, Darstellung und Editierfunktion nicht auf einer Webseite zu realisieren, berücksichtigt.

„Wenn man zu doof ist true oder 1 zu tippen, notiert man eben "ja". Geht ja viel einfacher, wie auch der schöne spätere Vergleich. Und da habe ich noch kein Wort zum Variablenname gesagt.“ - So wird sich meine Kritik lesen … 😇

Ich freue mich schon darauf! 😊

LG Maria

[Raketenwilli]

• Die gezeigten Hashs der Passwörter sind unsicher. Das geht gar nicht. Benutze die PHP-Funktionen password_hash() und deren Schwestern.
• In der Tabelle der Links fehlt eine ID. Die wird aber im Zweifelsfall für den direkten Zugriff gebraucht.
• Die Datentypen in der Tabelle stehen auf INT(11). Das ist merkwürdig - da soll doch Text rein. Vergiss nicht, dass Du vorhersehbar eine UTF-8-Kodierung willst.
• Die Rechte „lesen schreiben löschen ändern“ sind offenbar generelle Rechte. Die kannst Du auf "Lesen/Schreiben" „eindampfen“.
• Wie die Dinge liegen solltest Du noch Schlüsselwörter für die Linkliste definieren, damit auch in diesen gesucht werden kann. Eine Suche zu „bauen“ ist immer ein großes Thema.

Die angegeben Domain existiert. (Und ist seit dem 14.02.2020 umd 15:25:59 MEZ registriert, zeigt offenbar auf eine Domain-Parking-Seite von SEDO - die allerdings mein Adblocker zuverlässig „ausnullt“)

• Für ein Projekt mit zehn Nutzern nutzt man eher selten eine eigene Domain.
• So wie die Webseite aktuell angeboten wird, fehlt die verschlüsselte Übertragung (HTTPS). Das geht gar nicht.

Eine Bitte noch:

Zeige Deinen Code nicht als Grafik. In der Hilfe steht wie Du ihn hier einfügen kannst. Das geht auch mit den Tabellendefinitionen, also SQL.

[Rolf B]

Hallo Raketenwilli,

Die angegebene Domain existiert.

Wenn linksammlung.de ein Beispiel für eine beliebige URL sein soll, wäre hier sowas wie https://links.example.org angebracht.

Zeige Deinen Code nicht als Grafik. In der Hilfe steht wie Du ihn hier einfügen kannst.

Ich hab auch gestaunt 😀
Aber bei umfangreicheren Codes könnte man auch darum bitten, ein Github-Projekt anzulegen und den Code dort ablegen.

Ich würde dann noch darauf hinweisen wollen, dass es eine Tabelle "Kategorie" geben sollte, in der die verfügbaren Kategorien stehen (mit ID, Name und einer Nummer für die Anzeigereihenfolge). In der Linksammlung-Tabelle wird dann pro Link die Kategorie-ID gespeichert.

Dadurch entsteht ein neuer Usecase: Kategorie anlegen / bearbeiten / löschen. Im ersten Schritt muss das nicht online funktionieren, es reicht, wenn das ein Admin mit myPhpAdmin tut. Ob dieser Usecase es dann jemals vom Backlog in die aktiven Todos schafft, wird sich dann zeigen.

Die Frage der Anzeigereihenfolge ist auch für die Links relevant. Soll sie innerhalb der Kategorie zufällig sein? Alphabetisch nach URL? Alphabetisch nach Beschreibung? Oder soll die Reihenfolge festlegbar sein? Dafür bräuchte es dann wiederum Steuerelemente, mit denen man die Reihenfolge ändern kann - das kann man beliebig kompliziert gestalten (Eingabefelder für die Reihenfolgenummer, Pfeil-Links zum "hoch"/"runter" schieben, Drag&Drop - letzteres braucht definitiv JavaScript.

Kaum hat man eine Idee, kriegt sie Junge 😂

Rolf

[Maria Prader]

Hallo Rolf,

vielen Dank auch für dein Feedback! 🙏

Die angegebene Domain existiert.

Wenn linksammlung.de ein Beispiel für eine beliebige URL sein soll, wäre hier sowas wie https://links.example.org angebracht.

Zeige Deinen Code nicht als Grafik. In der Hilfe steht wie Du ihn hier einfügen kannst.

Die Domain war nur eine "Fantasie-Domain", ich habe es deinem Hinweis entsprechend geändert. Den Code (für den es sicher noch einige Zeit brauchen wird), werde ich wie in der Hilfe aufgezeigt, einfügen.

Ich würde dann noch darauf hinweisen wollen, dass es eine Tabelle "Kategorie" geben sollte, in der die verfügbaren Kategorien stehen (mit ID, Name und einer Nummer für die Anzeigereihenfolge). In der Linksammlung-Tabelle wird dann pro Link die Kategorie-ID gespeichert.

👍 Das nehme ich auf.

Dadurch entsteht ein neuer Usecase: Kategorie anlegen / bearbeiten / löschen. Im ersten Schritt muss das nicht online funktionieren, es reicht, wenn das ein Admin mit myPhpAdmin tut. Ob dieser Usecase es dann jemals vom Backlog in die aktiven Todos schafft, wird sich dann zeigen.

Die Frage der Anzeigereihenfolge ist auch für die Links relevant. Soll sie innerhalb der Kategorie zufällig sein? Alphabetisch nach URL? Alphabetisch nach Beschreibung? Oder soll die Reihenfolge festlegbar sein? Dafür bräuchte es dann wiederum Steuerelemente, mit denen man die Reihenfolge ändern kann - das kann man beliebig kompliziert gestalten (Eingabefelder für die Reihenfolgenummer, Pfeil-Links zum "hoch"/"runter" schieben, Drag&Drop - letzteres braucht definitiv JavaScript.

Die Reihenfolge der Links (innerhalb der einzelnen Kategorien) wäre egal. Wenn ich mal soweit bin, könnte ich mir darüber noch Gedanken machen.

Kaum hat man eine Idee, kriegt sie Junge 😂

Haha. Das kenne ich. Mir fielen auch noch einige "Addons" ein. Aber ich glaube, ich halte es erst mal so einfach wie möglich.

LG

Maria

[Maria Prader]

Hallo Raketenwilli,

ein wiederholtes Danke für dein Feedback! 🙏

• Die gezeigten Hashs der Passwörter sind unsicher....

Alle dargestellten Benutzer(-namen) und Passwörter(Hashes) sowie die Links sind nur beispielhaft

• In der Tabelle der Links fehlt eine ID. Die wird aber im Zweifelsfall für den direkten Zugriff gebraucht.

Eine Spalte "ID" habe ich nach deinem Hinweis hinzugefügt

• Die Datentypen in der Tabelle stehen auf INT(11). Das ist merkwürdig - da soll doch Text rein.

Mit der Formatierung der Tabelle habe ich mich noch nicht beschäftigt. HIerzu muss ich mich erst weiter in Sql einlesen. War nur erst mal für die Erstellung des "Mockups".

• Die Rechte „lesen schreiben löschen ändern“ sind offenbar generelle Rechte. Die kannst Du auf "Lesen/Schreiben" „eindampfen“.

👍

• Wie die Dinge liegen solltest Du noch Schlüsselwörter für die Linkliste definieren, damit auch in diesen gesucht werden kann. Eine Suche zu „bauen“ ist immer ein großes Thema.

Guter Hinweis!

Die angegeben Domain existiert. (Und ist seit dem 14.02.2020 umd 15:25:59 MEZ registriert, zeigt offenbar auf eine Domain-Parking-Seite von SEDO - die allerdings mein Adblocker zuverlässig „ausnullt“)

Die Domain war nur eine "Fantasie-Domain". Ich habe es im "Mockup" dem Hinweis von Rolf entsprechend geändert (https://links.example.org)

• Für ein Projekt mit zehn Nutzern nutzt man eher selten eine eigene Domain.

Ich habe einen Webspace (u.a. für eine OwnCloud). Dass es für mein Vorhaben einfachere Lösungen gibt, z.B. eine Google-Tabelle oder ähnliches, ist schon klar. Ich finde es einfach interessant und nehme es als Anlass mich grundsätzlich in html/PHP/Sql einzufinden.

• So wie die Webseite aktuell angeboten wird, fehlt die verschlüsselte Übertragung (HTTPS). Das geht gar nicht.

Ein SSL-Zertifikat ist bei meinem Webspace dabei. Das wird dann selbstverständlich genutzt.

Eine Bitte noch:

Zeige Deinen Code nicht als Grafik. In der Hilfe steht wie Du ihn hier einfügen kannst. Das geht auch mit den Tabellendefinitionen, also SQL.

👍 wird gemacht

(aber sicher noch dauern...)

LG

Maria

[Maria Prader]

Mockup aktualisiert

[Der Martin]

Hallo Maria,

ich bin noch relativer Neuling im Bereich Webseiten erstellen. Ich habe eine Linksammlung in Form einer einfachen html-Seite erstellt, auf der Links in verschiedenen Kategorien dargestellt sind.

das ist schon mal ein schöner Einstieg.

Ich würde nun auf der Webseite gerne Formularfelder/Eingabemasken einfügen, in die die Nutzer (oder ich) Daten eintragen und mit einem "Absendebutton" die eingegebenen Werte in die Linksammlung aufgenommen werden.

Damit sind wir aber gar nicht mehr bei "einsteigertauglich" oder gar "trivial".

Ist mein Vorhaben für mich als relativer Neuling machbar? Oder wäre ein zu tiefer Einstieg in ggf. PHP / Java etc. notwendig?

Damit nicht nur derjenige die neuen Links sehen kann, der sie eingetragen hat, müssen diese Daten auf dem Server gespeichert werden. Du brauchst also a) einen irgendeine Art der Datenhaltung. Das könnte eine einfache Datei sein, das hat aber seine Tücken; die Königslösung wäre eine Datenbank. Und du brauchst b) ein Programm, das auf dem Server läuft und neue Daten entgegennimmt, auf Plausibilität prüft und speichert, und auf Anfrage auch alle eingetragenen Daten wieder ausgibt. Ja, da kommt wahrscheinlich PHP zum Zug.

Java galt im Web-Umfeld vor 20 Jahren mal als "hip", ist aber schon lange out. Aber du meinst vermutlich Javascript. Das ist eine Scriptsprache, die auf dem Client (d.h. im Browser) läuft und damit schlecht für Aufgaben geeignet ist, die über den eigenen privaten Horizont hinausgehen.

Ich würde daher aufgrund deiner Fragestellung und der Vorkenntnisse, die sie vermuten lässt, eher von diesem Vorhaben abraten. Es sei denn, du hast Ehrgeiz und keine Angst vor einer steilen Lernkurve.

Wenn dich aber die technische Herausforderung reizt und du gern auch etwas Zeit und Hirnschmalz investieren möchtest, findest du hier bestimmt einige Helfer, die dich unterstützen wollen.

Einen schönen Tag noch
 Martin

[Maria Prader]

Hallo Martin,

vielen Dank für deine ausführliche Antwort!

Ich werde meinen Ehrgeiz, mein Hirnschmalz und (vermutlich viiiiel) Zeit in das Vorhaben stecken. Denn ich möchte mich grundsätzlich auch unabhängig von dem aktuellen Vorhaben, weiter in die Bereiche html/PHP/SQL einarbeiten.

Guten Tag und

LG Maria

[Rolf B]

Hallo Maria,

verwende eine Standardsoftware und programmiere das nicht selbst.

Derzeit verwendest Du vermutlich einen HTTP Login (also eine Funktion des Webservers, die mit der .htpasswd Datei des Apache arbeitet). Daran ist nachteilig, dass die Anzahl der Fehlversuche nicht limitiert ist, bis der User blockiert wird, wodurch brute-force Angriffe auf Passworte möglich sind.

Ein selbstgeschriebenes Login-Formular ermöglicht eine Zählung von Fehlversuchen, ist aber ein derart sensibles und fehleranfälliges Thema, dass wir uns im Selfwiki nicht mehr getraut haben, dazu eine Lösung anzubieten. Ein Fehler in der Implementierung, und der Einbruch ist da.

Eine Cloud-Anwendung wie bspw. Google Tabellen bringt die Benutzerverwaltung von Google mit (und leider auch den kompletten Satz an Google-scher Datenspionage). Es gibt auch andere Anwendungen im Web, such mal nach "online Listen teilen".

Das ist nicht ermutigend, ich weiß, aber die Hürde "Security" ist etwas, wo wir uns derzeit wenig vornehm zurückhalten. Und was Du da möchtest, ist kein Einsteigerprojekt. Die Frage, was ein "zu tiefer Einstieg" ist, kannst natürlich nur Du selbst beantworten - aber sobald Security ins Spiel kommt und keine reine Datenausgabe, beginnt das Katz-und-Maus Spiel mit den Bösen Jungs der Wilden Weiten Welt. Und die sind einfach besser als die meisten von uns.

Wenn Du unbedingt willst, dann brauchst Du einen Hoster, der Dir PHP und MySQL (bzw. MariaDB) anbietet. Du musst PHP und SQL lernen. JavaScript ist nicht erforderlich - was Du tun willst, lässt sich über normale Webformulare abhandeln.

Das ist eine steile Lernkurve, die trotz Klimawandel hartnäckig vergletschert ist.

Einen ordentlichen Einstieg in PHP haben wir im Wiki nicht, eher eine "Loseblattsammlung". Vielleicht hilft es Dir etwas.

Erste Basteleien mit PHP kannst Du beispielsweise hier im Sandkasten probieren. Da gibt's natürlich keine DB.

Für lokale Versuche bräuchstest Du bspw. ein XAMPP Paket, oder Du versuchst, Dir Apache, PHP und MariaDB selbst aufzusetzen. Setzt einiges an Systemkenntnissen in Windows bzw. Linux voraus - aber ohne die kommst Du, wenn Du programmieren willst, eh nicht aus.

Rolf

[Maria Prader]

Vielen lieben Dank erstmal für eure Antworten! 🙏

Zunächst würde ich sagen, Ehrgeiz und Frustrationstoleranz sind vorhanden. Und ich habe Lust darauf mich damit zu beschäftigen. Ich werde also eure Tipps beherzigen und versuchen das zu lösen.

Webhoster mit PHP und SQL ist vorhanden, eine Datenbank ist auch schon angelegt.

Der "Schutz" der Webseite ist tatsächlich über eine htaccess und htpasswd Datei gelöst. Die Domäne ist unbekannt dachte ich mir, und es ist ja nur eine Linksammlung zu öffentlich zugänglichen Webseiten. Vielleicht bin ich da etwas zu unbedarft...?!

Ich danke euch jedenfalls sehr für eure (schnellen!) Antworten und wenn es noch weitere Tipps gibt, freue ich mich auch! 😃

LG Maria

[Rolf B]

Hallo Maria,

es ist ja nur eine Linksammlung zu öffentlich zugänglichen Webseiten.

Gefahr 1: Jemand knackt den Schutz und baut Dir Links ein, die wie harmlose Webseiten aussehen, aber nicht das sind, wonach sie aussehen. Zum Beispiel http://www.medıamarkt.de oder sаturn.de - nicht aufrufen! Da ist ein türkisches punktloses ı an Stelle vom gepunkteten i und im Saturn ist ein kyrillisches а an Stelle des lateinischen a. Nicht jeder Browser warnt rechtzeitig, wenn man eine solche URL aufrufen will. medıamarkt ist bspw. bei Strato reserviert, und Chrome lädt die Seite erstmal und fragt erst dann, ob ich vielleicht was anderes meinte.

Gefahr 2: Bei einer unsauber gebauten Webseite injiziert Dir jemand SQL oder HTML, wodurch in deiner DB oder beim Seitenabruf durch Nutzer Schabernack entsteht.

Wenn Du einen ersten Wurf gebaut hast, schauen wir uns den Quellcode gerne an. Rechne mit vernichtender Kritik - es wäre ein Wunder, wenn es Dir anders ginge als uns und Du ein PHP Erstlingswerk ablieferst, das von den üblichen Anfängerfehlern frei ist 😉.

Rolf

[Maria Prader]

Hallo Rolf,

vielen Dank für deine Antwort und die Hinweise. Ja, das sind so Aspekte die man als Einsteiger wohl nicht bedenkt bzw. noch nicht mal davon gehört hat.

Ich werde mein Vorhaben so versuchen umzusetzen, dass es mal grundsätzlich funktioniert, ohne "wichtige" Inhalte. Und dann komme ich sehr sehr gerne auf das Angebot zurück, mir eure vernichtende Kritik zu meinem Erstlingswerk einzuholen. 😊

Einen guten Tag!

LG Maria