Eine Website mit einer Datenbank mit TeleportHQ erstellen

Das Erstellen einer Website mit einer Datenbank umfasst vier wesentliche Aufgaben: Informationen organisieren, einen Speicherort auswählen, die Daten mit den Seiten verbinden und testen, wie die veröffentlichte Website funktioniert. In TeleportHQ können Sie eine integrierte, gehostete Datenbank nutzen oder eine unterstützte Datenbank verbinden, die Sie bereits verwalten.

Dieser Leitfaden erläutert beide Optionen, zeigt, wie Datenbanken Blogs, Hilfebereiche und E-Commerce-Websites unterstützen, und führt Sie durch den Aufbau eines durchsuchbaren Kurskatalogs. Dasselbe Vorgehen können Sie auf Verzeichnisse, Ressourcensammlungen und andere Websites mit strukturierten Inhalten übertragen.

Was ist eine Website-Datenbank und wie funktioniert sie?#

Eine Website-Datenbank speichert Informationen, die Ihre Website anzeigen oder verwalten muss. Bei einem Blog sind das Beiträge und die dazugehörigen Inhalte. Bei einem Onlineshop umfasst sie Produkte und Bestellungen. Eine Schulungswebsite kann Kurse, Lehrkräfte und bevorstehende Termine speichern.

Datenbank und Website haben unterschiedliche Aufgaben. Die Datenbank speichert die Informationen; die Website stellt sie auf Seiten dar und ermöglicht Besuchern die von Ihnen eingerichteten Aktionen.

Stellen Sie sich einen Kurskatalog vor. Ein Datenbankeintrag enthält die Details eines Fotografie-Kurses. Auf einer Übersichtsseite werden Titel, Bild und Preis neben denen anderer Kurse angezeigt. Wenn jemand den Kurs öffnet, zeigt eine Detailseite die vollständige Beschreibung anhand derselben gespeicherten Informationen an.

Sie können den Kurseintrag aktualisieren, ohne manuell jede Stelle suchen und neu bearbeiten zu müssen, an der seine Informationen erscheinen. Die verbundenen Seiten rufen die Daten entsprechend ihrer Konfiguration und ihres Caching-Verhaltens ab.

Die Begriffe, die Sie kennen sollten#

Sie müssen kein Datenbankadministrator werden, um diese Art von Website zu erstellen. Einige Begriffe erleichtern das Verständnis der Einrichtung:

Eine datenbankgestützte Website kombiniert diese gespeicherten Datensätze mit Seitenlayouts und dem Verhalten der Anwendung. So kann die Website Hunderte einzelne Seiten enthalten, ohne dass Sie jede davon separat gestalten müssen.

Der Begriff „Webdatenbank“ wird auch für Datenbanken verwendet, auf die über einen Browser zugegriffen oder die über einen Browser verwaltet werden. In diesem Leitfaden geht es um die Datenbank, die Ihre Website mit Informationen versorgt.

Wann benötigt eine Website eine Datenbank?#

Eine Datenbank ist nützlich, wenn Sie wiederkehrende Inhalte verwalten, eine wachsende Sammlung von Elementen organisieren oder Aktivitäten wie Käufe speichern müssen.

Typische Gründe sind:

• Artikel über ein gemeinsames Layout veröffentlichen.
• Einen Katalog anzeigen, den Besucher durchsuchen oder filtern können.
• Für jedes Produkt, jeden Kurs oder jeden Verzeichniseintrag eine eigene Seite bereitstellen.
• Informationen pflegen, die an mehreren Stellen erscheinen.
• Datensätze speichern, die durch konfigurierte Website-Aktionen erstellt werden.

Eine Website für ein kleines Unternehmen mit wenigen Leistungsseiten benötigt möglicherweise keine Datenbank. Wenn sich die Informationen nur selten ändern und keiner wiederkehrenden Struktur folgen, reicht es eventuell aus, die Seiten direkt zu bearbeiten.

Außerdem legt die Speicherung von Inhalten in einer Datenbank nicht automatisch fest, wie eine Website gerendert wird. Manche Websites erzeugen statische Seiten aus gespeicherten Inhalten, andere rufen Daten ab, wenn Seiten angefordert werden. Die gewählte Methode sollte dazu passen, wie aktuell die Informationen sein müssen und welche Möglichkeiten Besuchern zur Verfügung stehen sollen.

Beispiele für Datenbank-Websites, die Sie mit TeleportHQ erstellen können#

Bevor Sie eigene Tabellen erstellen, prüfen Sie, ob eine integrierte Funktion bereits den gewünschten Website-Typ abdeckt. TeleportHQ bietet datenbankgestützte Funktionen zum Veröffentlichen und Verkaufen sowie Tools zum Erstellen individueller Seiten auf Basis von Daten.

Blogs: Beiträge unabhängig von ihrem Design verwalten#

Ein Blog speichert den Inhalt jedes Artikels getrennt vom Layout, in dem er angezeigt wird. Eine gemeinsame Beitragsvorlage kann Titel, Autor und Artikeltext darstellen, während die Blogübersicht die Beiträge zum Durchstöbern auflistet.

Mit dem Blog-Builder von TeleportHQverbindet die Blog-Einrichtung das Content-System mit Übersichts- und Beitragsseiten. Sie können deren Erscheinungsbild anpassen und Beiträge mit den verfügbaren Blog-Tools oder über die Administrationsoberfläche verwalten.

Für ein Unternehmen, das Anleitungen veröffentlicht, bedeutet das, dass das Redaktionsteam einen weiteren Beitrag hinzufügen kann, ohne eine bestehende Seite zu duplizieren und deren Inhaltsblöcke neu aufzubauen. Kategorien helfen Lesern dabei, thematisch verwandte Inhalte zu finden, während ein einheitliches Artikeldesign für ein vertrautes Leseerlebnis sorgt.

Die Datenbank gibt den Inhalten eine Struktur. Die Redakteure müssen weiterhin entscheiden, was in die einzelnen Artikel gehört, wie Kategorien aufgebaut sein sollen und wann ein Beitrag zur Veröffentlichung bereit ist.

Hilfezentren: Antworten in einer durchsuchbaren Wissenssammlung organisieren#

Ein Hilfezentrum folgt ähnlichen Grundsätzen, richtet sich aber an andere Leser. Wer einen Supportartikel aufruft, hat meist eine konkrete Aufgabe oder ein bestimmtes Problem. Deshalb sind Suchfunktion und Navigation nach Kategorien ebenso wichtig wie das Artikellayout.

Das integrierte Hilfezentrum von TeleportHQ erstellt einen durchsuchbaren Hilfebereich mit Seiten für Artikel und Kategorien. Die umfassenderen Funktionen für Wissensdatenbanken unterstützen außerdem den Aufbau von Systemen für strukturierte Dokumentationen und Supportinhalte.

Ein Softwareunternehmen kann beispielsweise Anleitungen in die Kategorien Kontoeinrichtung, Abrechnung und Produktnutzung einteilen. Um eine Anleitung zu aktualisieren, muss lediglich der entsprechende Inhaltseintrag geändert werden; das gemeinsame Layout sorgt weiterhin für eine einheitliche Darstellung des Artikels.

Richten Sie die Kategorien nach den Fragen aus, die Kunden stellen. Eine Kategorie namens „Daten importieren“ ist für neue Kunden hilfreicher als eine Bezeichnung nach dem internen Team, das für Importe zuständig ist. Die Datenbank unterstützt die gewählte Struktur, kann aber nicht beurteilen, ob sie für die Leser sinnvoll ist.

E-Commerce: Verbinden Sie den Onlineshop mit Produkt- und Bestelldaten#

Eine E-Commerce-Website nutzt eine Datenbank sowohl für öffentlich zugängliche Informationen als auch für betriebliche Datensätze. Produktdaten speisen den Katalog und die Produktseiten. Durch Käufe entstehen Bestelldaten, die das Unternehmen für die Auftragsabwicklung benötigt.

Der E-Commerce-Website-Builder von TeleportHQ bietet Funktionen zur Einrichtung von Shopseiten, des Bezahlvorgangs und zugehöriger Daten. Sie können das Einkaufserlebnis anpassen und die Dienste sowie Geschäftsregeln einrichten, die für die Annahme und Abwicklung von Bestellungen erforderlich sind.

Eine Datenbankverbindung allein macht noch keinen funktionierenden Shop aus. Die Website benötigt außerdem eine Checkout-Logik, Zahlungseinstellungen und eine Auftragsverwaltung. Die E-Commerce-Funktion bietet Ihnen eine Ausgangsstruktur für diese Anforderungen, anstatt eine Produktliste als vollständigen Shop zu behandeln.

Für einen Händler ist der gesamte Kaufprozess ein sinnvoller Test: Ein Kunde öffnet eine Produktseite, wählt einen Artikel aus, schließt den Bezahlvorgang ab und erhält die erwartete Bestätigung. Die Produktseite ist nur ein Teil dieses Ablaufs.

Individuelle Kataloge und Verzeichnisse#

Für eine individuelle Sammlung können Sie die Datensätze selbst definieren und mit wiederverwendbaren Seitendesigns verknüpfen. Beispiele dafür sind ein Lieferantenverzeichnis, ein Immobilienkatalog oder eine Bibliothek mit herunterladbaren Ressourcen.

Die folgende Anleitung verwendet einen Kurskatalog, dessen Struktur leicht nachvollziehbar ist. Besucher können Kurse durchsuchen, die Liste nach Themen eingrenzen und Seiten mit weiteren Informationen öffnen. In der ersten Version werden Informationen angezeigt, ohne Schülerkonten, kostenpflichtige Anmeldungen oder ein Lernmanagementsystem hinzuzufügen.

Wenn du diesen Umfang klar absteckst, kannst du die grundlegende Website fertigstellen, bevor du anspruchsvolleres Anwendungsverhalten hinzufügst.

Wähle, wie du die Datenbank deiner Website erstellen möchtest#

In TeleportHQ stehen dir zwei grundlegende Datenbankoptionen zur Verfügung: Du kannst die integrierte Datenbank bereitstellen oder eine bereits vorhandene, unterstützte Datenbank verbinden. Du kannst auch andere Datenquellen nutzen, wenn deine Informationen in einer Tabelle, einer API oder einem Headless-CMS gespeichert sind.

Die Datenbanktools von TeleportHQ integrieren diese Optionen in den Workflow zur Website-Erstellung. Welche Option passt, hängt davon ab, wo deine Informationen gespeichert sind, wer sie verwaltet und wo du das fertige Projekt hosten möchtest.

Nutzen Sie die integrierte Option für ein neues Projekt#

TeleportHQ stellt eine gehostete PostgreSQL-Datenbank bereit, die Sie im Editor einrichten können. Jedes Projekt erhält eine eigene Datenbank, in der Sie Tabellen erstellen und Datensätze verwalten können.

Für den Kurskatalog ist dies ein unkomplizierter Einstieg, wenn Sie noch keinen Datendienst nutzen. Sie können die Kurse im selben Projekt organisieren, in dem Sie ihre Seiten gestalten.

Behalten Sie eine vorhandene Datenbank bei, wenn sie bereits die maßgebliche Datenquelle ist#

Wenn Ihre Organisation Kursinformationen an anderer Stelle pflegt, sollten Sie diese Datenbank verbinden, statt eine zweite, manuell gepflegte Kopie anzulegen.

TeleportHQ unterstützt unter anderem Konnektoren für PostgreSQL, MySQL, MongoDB und Supabase. Die verschiedenen Konnektoren haben unterschiedliche Einrichtungsanforderungen und Bearbeitungsmöglichkeiten. Vergewissern Sie sich, dass die ausgewählte Verbindung die erforderlichen Vorgänge unterstützt.

Durch das Verbinden einer Datenbank wird sie nicht zu TeleportHQ übertragen. Sie wird weiterhin von ihrem Anbieter gehostet, und Ihr Team bleibt für die Konfiguration dieses Dienstes verantwortlich.

Schritt 1: Inhalte und Besucherführung festlegen#

Notieren Sie zunächst, was ein Besucher erreichen soll. In diesem Beispiel sieht der Ablauf so aus: verfügbare Kurse durchstöbern, ein passendes Thema finden, eine Kursseite öffnen und einem Anfrage-Link folgen.

Aus diesem Ablauf ergeben sich zwei Hauptseitentypen:

• Eine Katalogseite mit Kurskarten, Suche und Kategoriefiltern.
• Eine Kursdetailseite mit der vollständigen Beschreibung und einer Anfrageoption.

Sie benötigen außerdem eine Möglichkeit, Kurse hinzuzufügen und ihre Informationen zu aktualisieren. In der ersten Version können Sie diese Datensätze über die Datenbankwerkzeuge im Editor verwalten.

Die Felder sollten sowohl die Übersichts- als auch die Detailseiten abdecken. Eine kurze Zusammenfassung erleichtert den Vergleich der Kurse; eine ausführlichere Beschreibung erklärt, was die Teilnehmenden nach dem Öffnen eines Kurses lernen werden.

Eine einfache Datenstruktur skizzieren#

Eine erste Kurstabelle könnte folgende Felder enthalten:

Dies ist eine Beispielstruktur und keine Plattformanforderung. Ein Kurskatalog für interne Schulungen benötigt möglicherweise keine Preis- oder Anfragefelder. Für eine öffentliche Workshop-Übersicht sind stattdessen möglicherweise Termine und Orte erforderlich.

Verwenden Sie geeignete Datentypen. Wird die Dauer als Zahl gespeichert, ist eine numerische Sortierung möglich. Der Freitext „etwa zehn Stunden“ ist zwar gut lesbar, lässt sich beim Filtern oder Sortieren jedoch nicht wie eine Zahl behandeln.

Legen Sie fest, welche Felder erforderlich sind. Ein Kurs sollte einen Titel und eine eindeutige Seitenkennung haben. Falls ein Bild optional ist, planen Sie, was auf der Seite angezeigt werden soll, wenn es fehlt.

Fügen Sie Beziehungen hinzu, wenn Informationen gemeinsam genutzt werden müssen#

Wenn mehrere Kurse zu derselben Lehrkraft gehören, können die Details dieser Person einmalig in einer Lehrkräftetabelle gespeichert werden. Jeder Kurs kann dann auf den passenden Lehrkräfteeintrag verweisen.

So muss dieselbe Biografie nicht in mehrere Kurse kopiert und bei Änderungen an jeder Stelle aktualisiert werden. Die Tabellenstruktur-Tools von TeleportHQ unterstützen Fremdschlüssel für kompatible Datenbanken, einschließlich der integrierten Datenbank.

Halte das erste Datenmodell übersichtlich. Füge Beziehungen nur hinzu, wenn es einen klaren Grund dafür gibt. Jedes Feld in eine eigene Tabelle aufzuteilen, macht ein Anfängerprojekt schwieriger zu verwalten.

Schritt 2: Datenbank erstellen oder verbinden#

Sobald du weißt, welche Daten du speichern musst, füge die Datenbank zu deinem Projekt hinzu.

Eine integrierte TeleportHQ-Datenbank erstellen#

1. Öffne „Datenquellen“ in der linken Seitenleiste des Editors.
2. Klicke auf die Plus-Schaltfläche, um eine Datenquelle hinzuzufügen.
3. Wähle „TeleportHQ-Datenbank“ aus und gib ihr einen aussagekräftigen Namen.
4. Lies den Hinweis zum Hosting und die Einschränkungen des Tarifs.
5. Wählen Sie „TeleportHQ-Datenbank einrichten“.

Nach der Einrichtung wird die Datenbank unter den Datenquellen Ihres Projekts angezeigt. Öffnen Sie sie, um Tabellen hinzuzufügen. Der integrierte Leitfaden zur Datenbankeinrichtung erläutert die Oberfläche und häufige Probleme bei der Bereitstellung.

Wenn Ihr Projekt bereits über eine integrierte Datenbank verfügt, verwenden Sie diese bestehende Verbindung. Möglicherweise wurde sie bereits beim Aktivieren einer anderen Funktion erstellt.

Stattdessen eine externe Datenbank verbinden#

Wählen Sie für eine vorhandene Datenquelle den entsprechenden Connector unter „Datenquellen“ aus und geben Sie die angeforderten Verbindungsdetails ein. Dazu können Host, Datenbankname und Anmeldedaten oder eine von Ihrem Anbieter bereitgestellte Verbindungszeichenfolge gehören.

Die Verbindung muss von den Servern von TeleportHQ aus erreichbar sein. Richten Sie zusammen mit Ihrem Anbieter die erforderliche authentifizierte Zugriffsmöglichkeit und sichere Verbindung ein.

Durch das Abrufen des Schemas kann TeleportHQ die verfügbare Struktur erkennen. Prüfen Sie die importierten Tabellen oder Sammlungen, bevor Sie sie mit Seiten verbinden. Der Leitfaden zum Verbinden externer Datenbanken beschreibt die unterstützten Connectoren und ihre jeweiligen Anforderungen.

Eine erfolgreiche Verbindung bestätigt den Zugriff, beweist jedoch nicht, dass sich jeder Datensatz zur öffentlichen Anzeige eignet. Halten Sie sensible Betriebsdaten von den Informationen getrennt, die für Besucher bestimmt sind.

Schritt 3: Tabellen erstellen und mit Daten füllen#

Sobald die Datenbank verfügbar ist, erstellen Sie die im ersten Schritt geplante Struktur. Im Datenbankbereich bietet die Karte „Neue Tabelle hinzufügen“ Optionen zum manuellen Erstellen von Tabellen, zum Generieren mit KI oder zum Importieren unterstützter Dateien.

Erstellen Sie für den Kurskatalog die Tabelle „Kurse“, fügen Sie die Spalten hinzu und legen Sie die erforderlichen Feldtypen fest. Weisen Sie einen Primärschlüssel zu und machen Sie das Slug-Feld eindeutig, damit Datensätze eindeutige öffentliche Kennungen haben.

Wenn Sie die Einrichtung lieber mit KI-Unterstützung vornehmen möchten, beschreiben Sie die Tabelle, ihre Felder und etwaige Beziehungen. Geben Sie genau an, welche Werte erforderlich sein müssen und welche Felder eindeutig sein sollen. Überprüfen Sie das generierte Ergebnis, bevor Sie Inhalte für den Produktivbetrieb hinzufügen. Die KI-Generierung verbraucht Tokens und erfordert weiterhin Ihr Urteilsvermögen.

Das Hilfe-Center erläutert beide Vorgehensweisen in seiner Anleitung zum Erstellen von Datenbanktabellen.

Fügen Sie Beispieldatensätze hinzu, bevor Sie alles importieren#

Öffnen Sie die Tabelle über „Daten anzeigen“ und fügen Sie einige Kurse hinzu. Wählen Sie unterschiedliche Beispiele, um den Entwurf zu testen:

• Ein kurzer und ein deutlich längerer Kurstitel.
• Kurse aus verschiedenen Kategorien.
• Ein Kurs ohne optionales Bild.
• Ein kostenloser Kurs, sofern ein Preis von null für Ihr Projekt zulässig ist.
• Beschreibungen unterschiedlicher Länge.

So lassen sich Layout- und Darstellungsprobleme erkennen, solange sie noch leicht zu beheben sind. Wenn alle Beispieldatensätze gleich viel Text enthalten, wirkt das Design möglicherweise fertig, bis echte Inhalte hinzugefügt werden.

Betrachten Sie die Datensätze aus der Perspektive eines Besuchers. „Fotografie-Grundlagen“ sagt für sich genommen nur wenig aus. Eine hilfreiche Zusammenfassung kann erklären, für wen der Kurs gedacht ist und was man dabei lernt.

Daten aus einer Tabelle importieren#

Wenn die Informationen bereits in einer Datei vorliegen, können Sie sie importieren, anstatt jeden Datensatz manuell einzugeben. TeleportHQ unterstützt Datenbankimporte aus Formaten wie CSV und Excel. Weitere Optionen sind in den Importwerkzeugen dokumentiert.

Bereinigen Sie zuerst die Quelldatei. Verwenden Sie aussagekräftige Spaltennamen, prüfen Sie, ob Zahlen einheitlich gespeichert sind, und entfernen Sie doppelte Slugs. Vereinheitlichen Sie die Kategorien, damit „Fotografie“ und „Fotografiekurse“ nicht versehentlich als separate Filter angezeigt werden.

Es gibt unterschiedliche Abläufe, um Tabellen aus einer Datei zu erstellen oder eine CSV-Datei in eine bestehende integrierte Datenbanktabelle zu importieren. Beim zweiten Verfahren können vorhandene Datensätze anhand eines Schlüssels zugeordnet, passende Zeilen aktualisiert und neue hinzugefügt werden. Weitere Informationen finden Sie in den Anleitungen zum Datenbankimport zu unterstützten Formaten und Einschränkungen.

Vergleichen Sie nach dem Import einige Quellzeilen mit den daraus erstellten Datensätzen. Achten Sie besonders auf Datumsangaben, Dezimalwerte und leere Felder. Ein abgeschlossener Import ist ein Anlass, das Ergebnis zu überprüfen, und kein Ersatz dafür.

Schritt 4: Gestalten Sie die Übersichtsseite und verknüpfen Sie sie mit den Daten#

Ihre Katalogseite sollte Besuchern dabei helfen, zu entscheiden, welchen Kurs sie öffnen möchten. Gestalten Sie zuerst das Grundlayout: eine Seitenüberschrift, eine kurze Erklärung des Katalogs und einen Bereich für die Kurskarten.

Verknüpfen Sie anschließend die Karten mit der Datenbank. Bei der Datenbindung wird festgelegt, aus welcher Quelle ein Element seinen angezeigten Wert bezieht. Eine Überschrift kann den Kurstitel anzeigen, ein Bild die Bild-URL aus demselben Datensatz.

Für ein wiederholtes Kartenlayout bietet TeleportHQ einen Array Mapper. Fügen Sie ihn in der Gruppe „Liste“ unter „Elemente“ hinzu, verknüpfen Sie seine Quelle mit der Kurstabelle und gestalten Sie darin eine Karte. Das Element wiederholt dieses Design für die von der Quelle zurückgegebenen Einträge.

Jede Karte mit dem aktuellen Kurs verknüpfen#

Verknüpfen Sie innerhalb des wiederholten Layouts die Überschrift, die Zusammenfassung und das Bild mit den Feldern des aktuellen Eintrags. Dieser Kontext legt fest, welchen Kurs die jeweilige Karte darstellt.

Wenn auf jeder Karte derselbe Titel angezeigt wird, prüfen Sie, ob Sie versehentlich eine bestimmte Datenbankzeile statt des aktuellen wiederholten Eintrags ausgewählt haben. Dies ist ein Verknüpfungsproblem und liegt normalerweise nicht an der Tabelle selbst.

Der Leitfaden zum Anzeigen von Datenbankinhalten auf Seiten erklärt, wie Sie dynamische Werte auswählen und mit Elementen verknüpfen.

Karten für den Vergleich gestalten#

Zeigen Sie die Informationen an, die Besucher benötigen, bevor sie die Detailseite öffnen. Bei diesem Katalog könnten das neben der Zusammenfassung auch Thema, Dauer und Preis sein.

Die ausführlichere Beschreibung gehört auf die Seite des jeweiligen Kurses. Eine Liste lässt sich nur schwer überfliegen, wenn jede Karte mehrere Absätze und mehrere konkurrierende Aktionen enthält.

Prüfen Sie das Layout mit Ihrem längsten Titel und auf der kleinsten Bildschirmgröße. Vermeiden Sie feste Höhen, durch die wichtige Texte abgeschnitten werden, und gestalten Sie den Kurslink auf dem Smartphone leicht auswählbar. Wenn Bilder Teil des Kartendesigns sind, verwenden Sie ein einheitliches Seitenverhältnis, damit die Liste auch bei unterschiedlichen Bildern gut lesbar bleibt.

Auch für fehlende Daten ist eine bewusst gewählte Lösung nötig. TeleportHQ unterstützt Ersatzwerte für relevante Verknüpfungen. Auf der veröffentlichten Website können jedoch auch 0 und „false“ als Fälle für Ersatzwerte behandelt werden. Seien Sie bei einem Preis von 0 vorsichtig: Ein kostenloser Kurs sollte nicht fälschlich als „Preis nicht verfügbar“ gekennzeichnet werden. Testen Sie das genaue Verhalten des Feldes, bevor Sie sich auf einen Ersatzwert verlassen.

Schritt 5: Suche, Filter und Navigation hinzufügen#

Ein Katalog mit wenigen Kursen lässt sich manuell durchsuchen. Wenn er wächst, benötigen Besucher Steuerelemente, mit denen sie die Liste eingrenzen können.

Nutzen Sie die Suche für Personen, die bereits wissen, wonach sie suchen, und Kategorien für diejenigen, die ein Thema erkunden. Die Steuerelemente sollten die vorhandenen Daten widerspiegeln und nicht jede Filtermöglichkeit abdecken, die Sie später vielleicht hinzufügen möchten.

Textsuche aktivieren#

Aktivieren Sie bei einem unterstützten, datengebundenen Array Mapper oder einer Tabelle die Option „Suche aktivieren“. TeleportHQ fügt der Liste ein Suchfeld hinzu, das Sie passend zur Seite gestalten können.

Die dokumentierte Listensuche gleicht Textfelder ohne Beachtung der Groß- und Kleinschreibung ab. Sie ist keine allgemeine Suchfunktion für jeden Datentyp: Zahlen-, Datums- und boolesche Felder werden anders behandelt.

Testen Sie die Suche in der Vorschau und auf der veröffentlichten Website. Suchen Sie nach einem vollständigen Titel, einem Teil eines Titels und einer Formulierung aus einer Beschreibung. Testen Sie auch eine Suche ohne Treffer, um den Zustand „Keine Ergebnisse“ zu überprüfen.

Nach Kategorie filtern#

Ein Filter legt fest, welche Datensätze angezeigt werden. Ein Kategoriefilter kann beispielsweise das Kategoriefeld mit „Fotografie“ vergleichen.

Damit Besucher diesen Wert ändern können, verknüpfen Sie ihn mit einem Status, der über ein Dropdown-Menü oder Schaltflächen gesteuert wird. Ein im Editor festgelegter Filter erzeugt eine feste Auswahl; Besuchern werden dadurch nicht automatisch Steuerelemente zur Verfügung gestellt.

Legen Sie fest, was passiert, wenn der Filter gelöscht wird. Besucher benötigen eine eindeutige Möglichkeit, zur Anzeige aller Kurse zurückzukehren, insbesondere nachdem sie eine Kategorie mit einem Suchbegriff kombiniert haben. Die Filterfunktionen von TeleportHQ unterstützen dynamische Werte und bei Datenbanklisten auch Kombinationen von Bedingungen. Die Anleitung zum Filtern von Listen erläutert diese Einstellungen und die Unterschiede je nach Datenquelle.

Seitennummerierung und eine sinnvolle Standardsortierung hinzufügen#

Die Seitennummerierung unterteilt eine größere Sammlung in überschaubare Gruppen. Bei unterstützten TeleportHQ-Listen können Sie die Anzahl der Elemente pro Seite festlegen und ein Navigationsmuster wie Seitensteuerungen oder das Nachladen weiterer Elemente auswählen.

Wählen Sie die Anzahl der sichtbaren Karten mit Blick auf Lesbarkeit und Leistung. Eine Seite mit zwölf hilfreichen Karten lässt sich oft leichter durchsuchen als eine, die versucht, einen ganzen Katalog auf einmal anzuzeigen.

Legen Sie eine Sortierung fest, die zu den Inhalten passt. Eine alphabetische Sortierung eignet sich für einen Referenzkatalog, während bei geplanten Workshops bevorstehende Termine wichtiger sein können. Prüfen Sie das Zusammenspiel: Die Suche sollte innerhalb der vorgesehenen gefilterten Sammlung funktionieren, und nach einer Filteränderung sollte die Seitennummerierung Besucher nicht auf einer Ergebnisseite ohne Treffer zurücklassen.

Schritt 6: Eine dynamische Seite für jeden Kurs erstellen#

Die Kursdetailseite verwendet ein einziges Design, um an jeder Adresse einen anderen Datensatz anzuzeigen. Sie müssen nicht für jeden Kurs ein separates Layout erstellen.

Erstellen Sie unter „Seiten, Komponenten & Strukturansicht“ eine Seite für das Kurslayout. Öffnen Sie das Menü, aktivieren Sie „Ist Detailseite“ und wählen Sie die Kursliste als Quelle aus. Verwenden Sie ein Feld, das für jeden Datensatz eindeutig und ausgefüllt ist, etwa den Slug, um jede URL zu bestimmen.

Verknüpfen Sie den Seiteninhalt mit dem aktuellen Kurs. Verbinden Sie anschließend die Links auf den Katalogkarten mit der Detailseite und übergeben Sie dabei den URL-Wert des jeweiligen Kurses. Die Anleitung zum Einrichten von Detailseiten erläutert diese Konfiguration.

Eine Beispieladresse könnte /courses/beginner-photographylauten. Ein anderer Kurs verwendet dasselbe Layout mit einer eigenen Adresse und eigenen Inhalten.

Gestalten Sie die Seite so, dass sie die anstehende Entscheidung unterstützt#

Eine Detailseite sollte die Fragen beantworten, die auf der Katalogkarte offenbleiben. Bei einem Kurs könnten das folgende Fragen sein:

• Für wen ist der Kurs geeignet?
• Was lernen die Teilnehmenden?
• Wie lange dauert der Kurs?
• Was kostet der Kurs, sofern Kosten anfallen?
• Was muss man tun, um sich zu erkundigen oder anzumelden?

Diese Fragen geben sowohl dem Inhaltsmodell als auch dem Layout die Richtung vor. Wenn für jeden Kurs Informationen zu Voraussetzungen benötigt werden, sollten dafür einheitliche Felder vorgesehen werden, statt diese Angaben willkürlich in Beschreibungen unterzubringen.

Testen Sie mehrere Einträge auf der Seite. Rufen Sie deren URLs direkt auf, aktualisieren Sie den Browser und folgen Sie den Links aus dem Katalog. Jede Route sollte den richtigen Kurs anzeigen, und die Anfrageaktion sollte zum vorgesehenen Ziel führen.

Wenn Sie später kostenpflichtige Anmeldungen hinzufügen, behandeln Sie diese als zusätzlichen Ablauf mit eigenen Anforderungen. Einen Preis anzuzeigen und auf eine Kursseite zu verlinken, setzt weder Zahlungsabwicklung noch Einschreibung um.

Schritt 7: Datenbankgestützte Seiten für SEO vorbereiten#

Suchmaschinen benötigen zugängliche Seiten mit nützlichen Inhalten. Die Datenbank hilft Ihnen dabei, diese Inhalte einheitlich zu pflegen. Einfach mehr URLs zu generieren, macht die Website für Suchende jedoch nicht wertvoller.

Geben Sie jedem Kurs einen aussagekräftigen Titel und eine Beschreibung, die das jeweilige Angebot erläutert. Vermeiden Sie es, alle Seiten mit demselben allgemeinen Absatz zu füllen und lediglich den Kursnamen auszutauschen. Leser sollten erkennen können, worin sich die einzelnen Kurse unterscheiden.

Seitenspezifische Titel und Beschreibungen festlegen#

In den SEO-Einstellungen der Detailseite von TeleportHQ können Sie den Meta-Titel und die Meta-Beschreibung an den aktuellen Datensatz binden. Separate SEO-Felder sind nützlich, wenn der auf der Seite angezeigte Titel oder die Zusammenfassung nicht dem Wortlaut entsprechen, den Sie für die Suchmetadaten verwenden möchten.

Prüfen Sie die resultierenden Werte für mehrere Datensätze und nicht nur für die Vorlage. Fehlende Ausgangsinhalte können dazu führen, dass einzelne Seiten unvollständig bleiben.

Inhalte auffindbar machen#

Verlinken Sie jeden Kurs im Katalog oder auf einer passenden Kategorieseite. Verwenden Sie aussagekräftige Linktexte und gut lesbare URLs. Ergänzen Sie aussagekräftige Bilder mit geeignetem Alternativtext.

Prüfen Sie nach dem Start repräsentative öffentliche URLs in der Google Search Console. Vergewissern Sie sich, dass die Inhalte, die indexiert werden sollen, zugänglich sind und wichtige Seiten nicht versehentlich ausgeschlossen wurden.

Sorgen Sie für eine nützliche Seitenstruktur. Erstellen Sie Kategorieseiten, wenn sie Besuchern die Orientierung zu einem Thema erleichtern, und stellen Sie genügend relevante Inhalte bereit, um ihren Zweck zu erklären. Suchfunktionen können die Navigation ergänzen, sollten aber nicht die einzige Möglichkeit sein, wichtige Datensätze zu finden.

Schritt 8: Aktualisierungen testen, veröffentlichen und überprüfen#

Sieh dir eine Vorschau des Designs an, veröffentliche die Website und teste den gesamten Ablauf in der Live-Version. Überprüfe Verbindungen, Suche und Aktualität der Daten dort, wo Besucher sie erleben.

Eine gezielte Prüfung vor dem Start kann Folgendes umfassen:

Teste auch fehlende optionale Werte. Ein Ladezustand, eine leere Sammlung und ein Fehler sind unterschiedliche Situationen. Entwirf passende Meldungen für die von den verwendeten Elementen unterstützten Zustände, damit Besucher verstehen, was passiert ist und was sie als Nächstes tun können.

Verstehe, wann eine Veröffentlichung erforderlich ist#

Änderungen an Layout und Konfiguration müssen veröffentlicht werden. Die veröffentlichte Website und der Editor rufen Daten getrennt ab. Den Editor zu aktualisieren ist daher nicht dasselbe wie eine geänderte Seite zu veröffentlichen.

Auf datengestützten Seiten lassen sich Datensätze abrufen, ohne jede Seite manuell neu erstellen zu müssen. Caching und das Verhalten der Datenquelle beeinflussen, wann aktualisierte Werte angezeigt werden. Wenn Editor und Live-Website voneinander abweichen, prüfe den ursprünglichen Datensatz, aktualisiere die betreffende Datenquelle und kontrolliere die Cache-Einstellungen, bevor du davon ausgehst, dass die Datenverknüpfung unterbrochen ist.

Bei integrierten Blogs und Hilfe-Centern müssen die Seiten mindestens einmal veröffentlicht worden sein. Außerdem müssen Artikel den passenden Veröffentlichungsstatus haben, damit sie angezeigt werden. Betrachte die Veröffentlichung von Inhalten und die Veröffentlichung des Seitendesigns als miteinander verbundene, aber unterschiedliche Schritte im Arbeitsablauf.

Datenbank-Hosting: Wo die Daten deiner Website liegen#

Beim Website-Hosting wird die Website betrieben, die Besucher aufrufen. Beim Datenbank-Hosting wird der Dienst betrieben, der die zugehörigen Informationen speichert und abruft. Eine Plattform kann beides anbieten, oder die beiden Dienste werden getrennt verwaltet.

Mit der integrierten Datenbank von TeleportHQ musst du keinen separaten Datenbankserver bereitstellen. Die Datenbank wird für das Projekt gehostet und funktioniert mit Websites, die auf TeleportHQ gehostet werden.

Diese Hosting-Abhängigkeit ist wichtig, wenn du das Projekt exportieren möchtest. Die integrierte Datenbankverbindung funktioniert nicht mit heruntergeladenem Code, der anderswo gehostet wird. Plane für eine externe Bereitstellung die Datenbankverbindung und alle weiteren Backend-Anforderungen, bevor du dich für eine bestimmte Einrichtung entscheidest.

Wenn Sie eine externe Datenbank verbinden, verbleibt sie bei ihrem Anbieter. So können Sie Ihre bestehende Dateninfrastruktur weiterhin nutzen. Gleichzeitig müssen Sie jedoch das Konto beim Anbieter, die Kapazität und die Verbindungseinstellungen verwalten.

Prüfen Sie die Limits vor dem Start#

Die dokumentierten Limits für die integrierte Datenbank unterscheiden sich je nachdem, ob Sie die Testversion oder einen kostenpflichtigen Tarif nutzen:

Beschränkungen gelten auch für Tabellen, Spalten und Indizes. Informieren Sie sich über die aktuellen Datenbanktarif-Beschränkungen von TeleportHQ , bevor Sie einen großen Datensatz importieren oder eine Website veröffentlichen, die auf der Datenbank basiert.

Schätzen Sie sowohl die Anzahl der Datensätze als auch den Speicherbedarf. Ein Verzeichnis mit kurzen Texteinträgen und eine Wissensdatenbank mit langen Artikeln können eine ähnliche Anzahl von Datensätzen, aber einen unterschiedlichen Speicherbedarf haben. Für externe Datenbanken gelten die jeweiligen Kapazitätsgrenzen der Anbieter.

Datenzugriff und laufende Wartung verwalten#

Die erste Version eines Katalogs zeigt möglicherweise nur öffentliche Informationen. Wenn Sie später Kundendatensätze, private Inhalte oder Bearbeitungstools hinzufügen, prüfen Sie die Zugriffsanforderungen, bevor Sie diese Informationen verwenden.

Legen Sie fest, wer die einzelnen Arten von Datensätzen lesen, erstellen, bearbeiten und löschen darf. Ein Administrator, der Kurse aktualisiert, benötigt andere Berechtigungen als ein Besucher, der sie durchstöbert. Wenn Nutzer ihre eigenen Inhalte verwalten, muss die Anwendung sicherstellen, auf welche Datensätze die einzelnen Personen zugreifen können.

TeleportHQ speichert Datenbankzugangsdaten und API-Schlüssel als Projektgeheimnisse. Verwenden Sie die dafür vorgesehenen Anmeldeinformations-steuerungen und halten Sie vertrauliche Verbindungsdetails aus Seitentexten und öffentlichem Code heraus.

Ein ausgeblendeter Button oder Abschnitt sorgt für sich genommen nicht für Datenschutz. Überprüfen Sie den Zugriff auf Anwendungs- und Datenebene, einschließlich der Daten, die nicht angemeldete Besucher abrufen können. Das ist besonders wichtig, wenn ein Projekt öffentliche Einträge mit vertraulichen Betriebsinformationen kombiniert.

Einen praktikablen Aktualisierungsprozess einrichten#

Legen Sie fest, welche Person oder welches Team für die Inhalte verantwortlich ist. Vereinbaren Sie, wie neue Einträge geprüft und veraltete Einträge korrigiert oder entfernt werden.

Für einen Schulungskatalog könnte ein einfacher Prozess so aussehen:

1. Bereiten Sie die Kursinformationen in den vereinbarten Feldern vor.
2. Prüfen Sie die Beschreibung, den Preis und das Ziel für Anfragen.
3. Fügen Sie den Eintrag hinzu und überprüfen Sie seine Anzeige sowie die Detailseite.
4. Überprüfen Sie den Katalog regelmäßig auf Kurse, die nicht mehr verfügbar sind.

Wenn das Projekt integrierte Veröffentlichungsfunktionen nutzt, beziehen Sie deren Steuerelemente für den Inhaltsstatus in den Prozess ein. Bei einer benutzerdefinierten Tabelle müssen Sie einen eventuell erforderlichen Prüfablauf definieren und umsetzen. Eine Statusspalte allein schränkt den öffentlichen Zugriff nicht automatisch ein.

Behalten Sie den Überblick über die Felder, die von Seitenbindungen verwendet werden, bevor Sie die Tabellenstruktur ändern. Das Umbenennen oder Löschen einer Spalte kann sich auf alle davon abhängigen Seiten auswirken. Klären Sie vor einer Massenaktualisierung, wie Einträge zugeordnet werden und wie Sie die Daten wiederherstellen können, falls der Import ein unerwünschtes Ergebnis liefert.

Häufige Fehler beim Erstellen einer Website mit einer Datenbank#

Die meisten anfänglichen Probleme entstehen durch eine Diskrepanz zwischen der Datenstruktur und der Benutzeroberfläche. Die folgenden Prüfungen können während der Einrichtung Zeit sparen:

Vermeiden Sie es, das Projekt zu erweitern, bevor diese Grundlagen funktionieren. Weitere Datensätze in einer fehlerhaften Bindung vergrößern das sichtbare Problem, ohne seine Ursache zu beheben.

Für eine erste Veröffentlichung ist ein vollständiger, getesteter Ablauf mit korrekten Inhalten am wichtigsten. Weitere Funktionen sollten einem klaren Bedarf entsprechen, etwa der Möglichkeit, kostenpflichtige Buchungen anzubieten oder Kursleitenden Zugriff auf ihre eigenen Datensätze zu geben.

Häufig gestellte Fragen#

Kann ich eine Website mit einer Datenbank erstellen, ohne Code zu schreiben?#

Ja. TeleportHQ bietet visuelle Tools für die Einrichtung von Datenbanken, die Verwaltung von Datensätzen und die Verknüpfung von Daten mit Seitenelementen. Die Struktur müssen Sie weiterhin planen und konfigurieren, wie sich die Website verhalten soll. Für fortgeschrittene Workflows oder ungewöhnliche Integrationen kann zusätzliche Entwicklung erforderlich sein.

Kann ich meine vorhandene Datenbank verwenden?#

Sie können eine unterstützte externe Datenbank verbinden und ihre Informationen im Projekt verwenden. Prüfen Sie den Connector, den Netzwerkzugriff und die Zugangsdaten sowie die benötigten Vorgänge. Die Unterstützung beim Lesen einer Datenquelle bedeutet nicht, dass alle Quellen identische Bearbeitungs- oder Tools zur Strukturverwaltung bieten.

Ist das Erstellen einer Online-Datenbank dasselbe wie das Erstellen einer Website mit Datenbank?#

Nein. Eine Online-Datenbank speichert und organisiert Informationen. Eine Website mit Datenbank ergänzt eine für Besucher sichtbare Benutzeroberfläche und die nötigen Funktionen, um diese Informationen zu nutzen. Für den Aufbau der Website müssen Sie die Seiten gestalten, Datensätze verknüpfen und die Aktionen testen, die Besucher ausführen werden.

Ist für das Hinzufügen einer Datenbank ein Web-App-Slot erforderlich?#

Das Verbinden einer Datenquelle allein erfordert in TeleportHQ keinen Web-App-Slot. Funktionen wie Authentifizierung, Workflows, E-Commerce und der integrierte Blog oder das Hilfe-Center ermöglichen Web-App-Funktionen. Auch einige optionale Funktionen, darunter das Zwischenspeichern von Listen, setzen diese Funktionen voraus.

Kann ich eine Website exportieren, die Datenbankinhalte verwendet?#

Die Dokumentation von TeleportHQ beschränkt den Code-Export für datenverbundene Projekte auf Next.js. Der Download des Codes ist im Pro- und Premium-Tarif verfügbar, nicht während der Testphase. Die integrierte Datenbankverbindung ist weiterhin vom Hosting durch TeleportHQ abhängig. Der Code-Export ist daher nicht gleichbedeutend mit der Übertragung eines funktionsfähigen, gehosteten Backends.

Sollte ich benutzerdefinierte Tabellen für einen Blog oder einen Onlineshop erstellen?#

Beginne mit der integrierten Funktion, wenn sie deinen Anforderungen entspricht. Sie stellt die erwarteten Seiten und die erforderliche Struktur für diese Art von Website bereit. Benutzerdefinierte Tabellen eignen sich für ein anderes Inhaltsmodell oder eine andere Anwendung, wie etwa den Kurskatalog in dieser Anleitung. Prüfe die Funktionsanforderungen, bevor du Tabellen änderst, die von einem integrierten System verwendet werden.

Erstelle deine erste datenbankgestützte Website#

Beginne mit den Informationen, die deine Besucher benötigen, und einer kleinen Auswahl repräsentativer Datensätze. Erstelle eine Datenbank oder stelle eine Verbindung zu ihr her, baue Übersichts- und Detailseiten und überprüfe den gesamten Ablauf auf der veröffentlichten Website.

Wenn es sich bei deinem Projekt um einen Blog, ein Hilfezentrum oder einen Onlineshop handelt, nutze die entsprechende integrierte Funktion als Ausgangspunkt. Für einen individuellen Katalog oder ein Verzeichnis kannst du die Tabellen passend zu deinen Inhalten definieren und mit wiederverwendbaren Layouts verknüpfen. Sobald die ersten Datensätze korrekt angezeigt werden und der Aktualisierungsprozess funktioniert, kannst du die Sammlung erweitern, ohne jede Seite neu gestalten zu müssen.