Wie kann ich eine FAQ-Webseite erstellen?

3 Antworten

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, CSS
25.10.2022, 21:28

Zum einen brauchst du für die Daten einen Datenträger (Datei/Datenbank) und zum anderen müsstest du eine Anwendung entwickeln, die die Daten annehmen und verarbeiten kann (Speicherung, Herausgabe, u.ä.). Dafür benötigst du eine Programmiersprache. Sei es PHP, Python (mit einem Webframework wie Flask), Ruby (mit Ramaze) oder noch eine andere der vielen Optionen, die es dafür so gibt. Mit HTML hingegen kannst du keine Logiken definieren.

Würde es sich nun tatsächlich um ein klassisches FAQ handeln, hätte man je Frage nur eine Antwort, wofür eine Datei, die ihre Daten im CSV-Format speichert, in deinem Fall ausreichen würde.

Bei mehreren Antworten je Frage hingegen eignen sich Datenformate wie XML oder JSON zur Strukturierung besser.

JSON-Beispiel:

[
  {
    "question": "Warum ist der Himmel blau?",
    "answers": [
      "Wegen des Streulichts.",
      "Weil Gott blau liebt.",
      /* etc. ... */
    ]
  },
  /* further questions ... */
]

Bei Wahl einer Datenbank hingegen würde ich zwischen zwei Datenbanktabellen unterscheiden. Eine Tabelle beinhaltet alle Fragen assoziativ zu einer ID (Autoincrement und Primärschlüssel) und die zweite Tabelle verknüpft Frage-ID und Antwort.

Bezogen auf die Software (das DBMS) sind MariaDB oder MySQL gut geeignet. Insofern wären SQL-Kenntnisse vonnöten.

Um nun einmal den Prozess durchzuspielen, bräuchtest du für deine Seite 1 ein HTML-Formular, welches die nötigen Felder für eine Frage anbietet.

Minimalbeispiel:

<!doctype html>
<title>Ask something</title>
<meta charset="utf-8">
<form action="/ask" method="post">
  <textarea name="question" required></textarea>
  <button>Send</button>
</form>

Wenn der Nutzer das Formular abschickt, werden zu den Feldern mit einem name-Attribut die Feldwerte entnommen und gebündelt (in einem Request-Dokument) an eine Zieladresse (siehe action-Attribut) verschickt, die die Daten annimmt und auswertet. An der Stelle kommt deine Webanwendung ins Spiel. Sei es nun ein PHP-Skript oder eine registrierte Route für ein Python-Programm.

Beispiel mit Python/Flask:

from flask import Flask, request

@app.route('/ask', methods=['POST'])
def save_question():
  question = request.form['question']
  # filter / validate ...
  # save data somewhere ...

Sobald die gelieferten Daten aus dem Request-Dokument gelesen wurden, solltest du sie validieren bzw. unliebsame Zeichen (spitze Klammern, Backslashes, u.ä.) herausfiltern/ersetzen. Andernfalls läufst du Gefahr, dass jemand Code (z.B. HTML) einschleust, welcher später (z.B. beim Rendern von Seite 2) interpretiert wird, obwohl du das nicht möchtest.

Im Anschluss können die Daten gespeichert werden.

Für die zweite Seite wiederum solltest du auf den GET-Request reagieren. Hierzu erneut ein vages Flask-Beispiel:

from flask import Flask, render_template

@app.route('/questions', methods=['GET', 'POST'])
def get_questions():
  questions = # read questions from data source ...
  return render_template("questions.html", questions=questions)

In diesem Fall würde bei Aufruf von https://www.deineseite.de/questions die get_questions-Funktion aufgerufen werden. Sie liest die Fragen aus der Datenquelle und übergibt sie an eine Funktion, die die Daten in ein Template (questions.html) einfügt.

Beispiel-Template:

<!doctype html>
<title>Questions</title>
<meta charset="utf-8">
<body>
  {% if len(questions) > 0 %}
    <ul>
      {% for question in questions %}
        <li>{{ question }}</li>
      {% endfor %}
    </ul>
  {% endif %}
</body>

Wenn es mehr als null Fragen gibt, wird eine Liste auf der Webseite gerendert. Die einzelnen Fragen werden mittels Schleife in einzelne li-Items eingesetzt.

Die dritte Seite ist an sich lediglich eine Abwandlung der zweiten. In get_questions müsste die questions-Liste gefiltert werden. Man könnte beispielsweise n Zufallsindizes generieren und zu denen dann die jeweiligen Einträge aus der Liste herausgreifen.

Für die vierte Seite würde erneut ein Formular notwendig sein, in dem man diesmal eine Antwort eingeben kann.

Das sind soweit allerdings nur Ansätze zur Orientierung. Für jeweilige Operationen (Zufallszahlen generieren, Daten lesen/validieren/speichern, etc.) gibt es in der Regel bereits Funktionen in den Standardmodulen der jeweiligen Programmiersprache oder denen des genutzten Webframeworks. Dein erster Schritt, bevor du überhaupt mit deinem Projekt beginnst, sollte das Erlernen einer passenden Programmiersprache sein.

Die oben genannten Optionen sind schon ziemlich einfach. Auch in die genannten Frameworks findet man sich schnell ein.

Im Folgenden kann ich noch ein paar Online-Quellen zum Lernen und Einrichtungstipps aufführen. Diese sind allerdings meist in englischer Sprache. Gute deutschsprachige Quellen findest du am besten über eine Büchersuche (bspw. bei Amazon oder Thalia).

Zu PHP:

Mit dem Softwarepaket XAMPP bekommst du ein Bündel leicht installierbarer, hilfreicher Entwicklungstools. Einen Apache-Webserver (über den wird die Webseite ausgespielt) und bei Wahl ebenso eine MariaDB.

Zu Python:

Lies meinen Beitrag von hier. Ich habe dort ebenso allgemeine Tipps zum Lernen gegeben. Einen extra Webserver brauchst du dir für die Entwicklungszeit nicht installieren, denn Flask hat bereits einen in petto.

Zu Ruby:

So wie Flask einen eigenen Webserver für die Entwicklungszeit integriert hat, so ist das auch bei Ramaze mit WEBRick der Fall.
NackterGerd
25.10.2022, 17:34

Und wie sollte das mit HTML funktionieren?

Kling alles etwas Sonderbar und nicht eindeutig genug um hier zu helfen.

Generell wäre aber wohl PHP dafür geeignet.

Allerdings unklar woher die Antworten zu den Feagen kommen