Menu:


 

Updates:

Neu:
27. April 2022:

Web Fever 0.9.2 (Beta) inkl.usive Handbuch
90-Tage-Demo

14. Januar 2022:
Web Fever 0.9.1 (Beta) inkl.usive Handbuch
90-Tage-Demo



24. Dezember 2021:
Web Fever 0.9 Handbuch (PDF-Datei)

39. November 2021:
Web Fever 0.9 (Beta)
90-Tage-Demo



26. November 2020:
Web Fever 0.8 Handbuch (PDF-Datei)

03. November 2020:
Web Fever 0.8 (Beta)
90-Tage-Demo

23. Juli 2020:
Web Fever 0.7.2.1 (Beta)
90-Tage-Demo

22. Juli 2020:
Web Fever 0.7.2 (Beta)
90-Tage-Demo

24. März 2020:
Web Fever 0.7.1.1 (Beta)
30-Tage-Demo

Neu:
02.März 2020:

PTF Editor 1.5
Freeware

10. Januar 2020:
Web Fever 0.7.1 (Beta)
30-Tage-Demo



24 Dezember 2019:
Web Fever 0.7 (Beta)
30-Tage-Demo

 


PublicSQL

Mit Web Fever und PublicSQL können auch einfache Datenbankanwendungen erstellt werden.

PublicSQL ist eine SQL-Version für Javascript. Damit ist es möglich direkt in Javascript mit SQL-Befehlen auf Datenbanken bzw. Tabellen zuzugreifen. Tabellen können einfach weitergegeben werden (z. B. auf CD).

PublicSQL ist Open-Source und kann unter
www.publicsql.org
heruntergeladen werden.




Tutorial: Laufen

Schritt-für-Schritt-Anleitung

In diesem Tutorial erstellen wir aus einer OpenOffice- oder Excel-Tabelle mit Ergebnissen von Laufw ettbewerben eine Website mit Laufergebnissen, Auswertungen und Diagrammen.
Das Tutorial setzt die Web-Fever-Version 0.9 oder später voraus.

Vorbemerkungen

Es ist vorteilhalft wenn Sie zuvor die anderen Tutorials, insbesondere die Tutorials zu den Bundestags-Wahlergebnissen, der Corona-Statistik und "Land + Kreis" durchgearbeitet haben. In diesem Tutorial werden die einzelnen Schritte nicht mehr so ausführlich behandelt wie in den ersten Tutorials (in der Menü-Reihenfolge).

Denken Sie daran die Ergebnisse regelmäßig zu speichern und ggfs. Sicherheitskopien zu erstellen!

Ausgangsbasis ist eine Tabelle die mit der Tabellenkalkulation OpenOffice Calc in der Version 4.1.10 erstellt wurde. Es können auch andere Programme wie Libre-Office oder Excel verwenet werden. Die Funktionsweise ist meistens sehr ähnlich und man findet leicht passende Anleitungen im Internet.

Vorbereitungen

Erstellen Sie ein Verzeichnis für das Projekt (z. B. Laufen) und in diesem Verzeichnis die Unterverzeichnisse "Daten", "Projekt" und "Bilder". Im Verzeichns "Daten" werden alle Calc-, CSV- und PTF-Dateien gespeichert, das Verzeichnis "Projekt" enthält später das Web-Fever-Projekt und das Verzeichnis "Bilder" die für das Projekt benötigten Bilder.

Tabelle Laufwettbewerbe anpassen

In diesem Abschnitt wird eine bestehende OpenOffice-Calc-Tabelle für das Webprojekt vorbereitet. Sie können diesen Abschnitt auch überspringen und die angepasste Tabelle im nächsten Abschnitt herunterladen.

Laden Sie die Tabelle Laufwettbewerbe_Start.ods
herunter und öffnen Sie dies in OpenOffice-Calc.
Alternativ können Sie die Tabelle Laufwettbewerbe_Start.xls für Excel verwenden.

In OpenOffice-Calc kann die Formatierung von Feldern geändert werden indem die Spalte markiert wird und anschließend mit der rechten Maustaste angeklickt wird. Im Popup-Menü ist dann „Zellen formatieren“ auszuwählen.
In der Tabelle wurde für einige Spalten eine andere Formatierung ausgewählt damit die Werte immer das gleiche Format haben. Für „Datum“ wurde das Datumsformat „TT.MM.JJ“ ausgewählt, für „Strecke“ ein Zahlenformat mit 2 Nachkommastellen, für „Zeit“ das Zeitformat 'HH:MM:SS,00.

Das Datumsformat der Spalte Datum ist für die alphabetische Sortierung der Datensätze nicht geeignet, daher benötigen wir eine 2. Spalte mit den gleichen Daten im geeigneten Datumsformat.
Erstellen Sie rechts neben der Spalte „Datum“ eine neue Spalte „Datum2“. Kopieren Sie nun die Werte der Spalte „Datum“ in die Spalte „Datum2“. Wählen Sie anschließend für die neue Spalte „JJJJ-MM-TT“ (bzw. „1999-12-31“) als Datumsformat aus (entspricht ISO 8601, EN 28601 sowie DIN 5008).

Auf der Startseite unserer Website soll eine Tabelle mit den wichtigsten Daten zu sehen sein. Für eine bessere Übersicht erstellen wir noch eine zusätzliche Spalte mit dem Jahr des Wettbewerbs.
Erstellen Sie links neben der Spalte „Datum“ eine neue Spalte „Jahr“. Kopieren Sie nun die Werte der Spalte „Datum“ und fügen Sie diese in die Spalte „Jahr“ ein. Wählen Sie anschließend für die neue Spalte das Datumsformat „JJJJ“ (bzw. „1999“) für Jahr.

Wir wollen für unsere Anwendung den Ort und den Ortsteil direkt nebeneinander platzieren. Wenn wir dazu 2 einzelne Datenfelder benutzen müssen diese einen ausreichenden Abstand zueinander haben. Dadurch entstehen zwischen Ort und Ortsteil oft ein großer leerer Zwischenraum. Wir fassen die beiden Spalten „Ort“und „OrtDetail“ daher in einer neuen Spalte zusammen.

Erstellen Sie eine neue Spalte hinter der Spalte „Ortsteil“ mit dem Namen „OrtDetail“. Markieren Sie das oberste Datenfeld (in Zeile 2) der neuen Spalte und schreiben Sie

= D2 & " " & E2

in die Eingabezeile über der Tabelle und drücken Sie die <RETURN>-Taste. Im ersten Feld sollte nun der erste zusammengesetzte Ortsname stehen.
Kopieren Sie das erste Feld, markieren Sie die Inhalts-Felder darunter und fügen Sie das kopierte Feld mit <STRG>+<V> ein.

Speichern Sie die Tabelle unter dem Namen „Laufwettbewerbe“ im Verzeichnis „Daten“.

PTF-Datei aus Tabelle Laufwettbewerbe erstellen

Wenn Sie den vorigen Abschnitt übersprungen haben oder es Probleme beim Ändern der Tabelle gab können Sie hier die Tabelle Laufwettbewerbe.ods bzw. für Excel die Tabelle Laufwettbewerbe.xls herunterladen. Öffnen Sie anschließend die Tabelle in OpenOffice-Calc (bzw. Excel...).

Wählen Sie "Speichern unter..." um die Tabelle als CSV-Datei im Verzeichnis "Daten" zu speichern. Geben Sie als Dateiname "Laufwettbewerbe" ein, wählen Sie als Datentyp "Text CSV" und klicken Sie auf "Speichern".
Wählen Sie im anschließenden Dialogfenster "Aktuelles Format beibehalten". Im Fenster "Exportierte Text Datei" wählen Sie als Feldtrenner das Komma (Voreinstellung), als Texttrenner doppelte Anführungszeichen (Voreinstellung) sowie "Alle Textzeilen zitieren" und "Zellinhalt wie angezeigt" (Voreinstellung). Bestätigen Sie die Einstellungen mit "OK". Es erscheint eine Warnmeldung dass nur die aktuelle Tabelle gespeichert wird. Bestätigen Sie dies mit "OK" und schließen Sie anschließend die Datei in OpenOffice.

PTF-Datei bearbeiten

Für die Bearbeitung der CSV-Dateien laden Sie sich den PTF-Editor unter
https://www.publicsql.org/download.htm
in der aktuellen Version herunter. Installieren und starten Sie den PTF-Editor.
Das Programm enthält ein umfangreiches Handbuch im PDF-Format. Machen Sie sich ggfs. vorher mit dem Programm vertraut.

Importieren Sie die CSV-Datei "Laufwettbewerbe.csv" (Datei → Import). Wählen Sie beim Import das Komma als Feldtrennzeichen - die anderen Import-Einstellungen können beibehalten werden.

Klicken Sie auf den Button mit dem Tabellensymbol um die Tabellenstruktur zu ändern. Ändern Sie den Datentyp der Feldes "Strecke" in "Number" und bestätigen Sie die Änderungen mit "OK"

Achten Sie darauf dass oben die UTF8-Codirung ausgewählt ist und speichern Sie die Datei unter den Namen „Laufwettbewerbe.ptf“ ebenfalls im Verzeichnis „Daten“.

Projekt „Laufen“ in Web Fever erstellen

Erstellen Sie in Web Fever ein neues Projekt und speichern Sie das Projekt in das zuvor erstellte Unterverzeichnis "Projekt" unter dem Namen "Laufen".

Genaue Angaben zum Aussehen (z. B. Größe, Position und Farbe) der nachfolgenden Komponenten werden hier meistens nicht gemacht. Legen Sie die Werte nach Ihren persönlichen Vorstellungen fest.
Bei Textfeldern und Feldansicht-Komponenten sollte bei "Größe anpassen" immer "ja" ausgewählt werden (bei Problemen ggfs. kurz ab- und wieder anwählen).

Erstellen Sie die folgenden Seiten und Vorlagen. Geben Sie den Namen jeweils im Objekteditor unter "Name" ein und verwenden Sie diesen auch als Dateiname.

Typ Name Beschreibung
Seite Startseite Startseite
Seite Veranstaltungen Tabelle mit allen Laufveranstaltungen
Seite VeranstaltungenDetail Basis für Einzelseiten mit Details zur ausgewählten Laufveranstaltung
Seite Strecken Tabelle mit allen Ergebnissen sortiert nach Strecke und Zeit
Seite StreckenDetail Basis für Einzelseiten mit Details zur ausgewählten Strecke
Vorlage Hauptvorlage Vorlage für alle Seiten


Nachdem Sie alle Seiten und Vorlagen gespeichert haben sollten Sie das Projekt neu laden da sonst eventuell teilweise noch die alten Seitennamen verwendet werden.

Vorlage „Hauptvorlage“


Platzieren Sie im oben links ein beliebiges Bild als Logo. Sie können z. B. das Bild unter
https://pixabay.com/illustrations/sport-athlete-track-runner-field-3677470/
verwenden.

Das Bild sollte noch verkleinert (z. B. 160 x 107 px) und dann im JPEG-, GIF- oder PNG-Format im Verzeichnis "Bilder"gespeichert werden.

Platzieren Sie oben neben dem Logo ein "Breadcrumb-Menü" und unter dem Logo ein "Vertikales Menü".
Platzieren Sie die Komponente "DatenMenüstruktur" (Register "Datenbank") für die Menüstruktur der Website und geben geben Sie folgende Menütexte ein und weisen Sie die entsprechenden namensgleichen Seiten zu:

Wählen Sie bei beiden Menüs unter "Menüstruktur" die Menüstruktur aus. Speichern Sie das Projekt mit „Alles speichern“ und laden Sie es neu.

Platzieren Sie für den Titel der Website oben 2 Textfelder (Register Standard) nebeneinander. Das erste Textfeld ist für die Hauptüberschrift und sollte daher etwas größer sein als das zweite Textfeld. Geben Sie als Text für das 1. Textfeld "Laufergebnisse" und für das 2. Textfeld "2004 bis 2021 " ein.

Platzieren Sie eine Datenbank-Komponente (Register Datenbank) auf die Vorlage und wählen Sie als Pfad das Verzeichnis "Daten" aus in dem sich die PTF-Datei „Laufwettbewerbe.ptf“ befindet.

Speichern Sie die Vorlage. Weisen Sie dann allen Seiten die Hauptvorlage zu und speichern Sie das Projekt.

Seite „Startseite“

Auf dieser Seite soll eine Übersichtstabelle mit allen Lauf-Wettbewerben angezeigt werden.

Platzieren Sie auf der Seite eine Datenquelle-Komponente. Wählen Sie als Datenbank die zuvor erstellte Datenbank der Hauptvorlage aus. Öffnen Sie den SQL-Editor und erstellen Sie dort folgende SQL-Abfrage:
SELECT
Laufwettbewerbe.Jahr, Laufwettbewerbe.Datum, Laufwettbewerbe.Ort, Laufwettbewerbe.Ortsteil, Laufwettbewerbe.Name, Laufwettbewerbe.Strecke, Laufwettbewerbe.Zeit, Laufwettbewerbe.PlatzGesamt, Laufwettbewerbe.PlatzAK
FROM Laufwettbewerbe
ORDER BY Laufwettbewerbe.Datum2
Da das Feld „Datum2“ das Datum in der Reihenfolge Jahr-Monat-Tag enthält werden die Datensätze in der richtigen zeitlichen Reihenfolge angezeigt.

Platzieren Sie eine Komponente „Tabellenansicht“ aus dem Register „Datensteuerung“ und wählen Sie als Datenquelle die zuvor erstellte Datenquelle-Komponente aus.

Speichern Sie die Seite.

Seite „Veranstaltungen“

Auf dieser Seite soll eine Übersichtstabelle mit allen Veranstaltungen angezeigt werden.

Platzieren Sie für den Seitentitel unter dem Text „2004 bis 2021“ ein Textfeld für die Seitenüberschrift. Geben Sie als Text „Veranstaltungen“ ein.

Platzieren Sie auf der Seite eine Datenquelle-Komponente. Wählen Sie als Datenbank die zuvor erstellte Datenbank der Hauptvorlage aus. Öffnen Sie den SQL-Editor und erstellen Sie dort folgende SQL-Abfrage:
SELECT DISTINCT
Laufwettbewerbe.Name, Laufwettbewerbe.Ort, Laufwettbewerbe.Ortsteil
FROM Laufwettbewerbe
ORDER BY
Laufwettbewerbe.Name, Laufwettbewerbe.Ort,
Laufwettbewerbe.Ortsteil

Platzieren Sie eine Komponente „Tabellenansicht“ aus dem Register „Datensteuerung“ und wählen Sie als Datenquelle die zuvor erstellte Datenquelle-Komponente aus.

Speichern Sie die Seite.

Seite „Veranstaltungs-Details“


Auf dieser Seite sollen alle Veranstaltungsdetails übersichtlich dargestellt werden.

Da wir auf der Seite sehr viele Komponenten platzieren wollen sollten Sie das Fenster zunächst etwas vergrößern.

Platzieren Sie für den Seitentitel unter dem Text „2004 bis 2021“ ein Textfeld für die Seitenüberschrift. Geben Sie als Text „Veranstaltungs-Details“ ein.
Sie können auch die Überschrift der Seite „Veranstaltungen“ kopieren und hier einfügen (rechte Maustaste → kopieren/einfügen wählen), dann haben Sie das gleiche Format und die gleiche Position und brauchen nur noch den Text zu ändern.

Platzieren Sie auf der Seite eine Datenquelle-Komponente. Wählen Sie als Datenbank die zuvor erstellte Datenbank der Hauptvorlage aus. Öffnen Sie den SQL-Editor und erstellen Sie dort folgende SQL-Abfrage:
SELECT * FROM Laufwettbewerbe
ORDER BY Laufwettbewerbe.Name, Laufwettbewerbe.Datum2
Dadurch werden die Datensätze der einzelnen Wettbewerbe nach Datum sortert.

Mit Hilfe der Datenmenü-Komponente können Seiten abhängig von Tabellen bzw. Datenbank-Inhalten erstellt werden. Für die zugehörigen Seiten ist lediglich die Erstellung einer Seite nötig. Diese dient als Vorlage für alle Seiten die dann jeweils die Daten zum gewählten Menüpunkt (bzw. Datenfeld) enthalten. Die Komponente 'Datenmmenü-Eintrag' legt die Datenquelle und das Datenfeld für die Generierung der Einzelseiten fest.

Platzieren Sie eine Datenmenü-Eintrag-Komponente auf der Seite um Untermenüeinträge für alle Veranstaltungen zu erstellen.
Wählen Sie unter "Datenquelle" die zuvor erstellte Datenquelle aus.
Wählen Sie unter „Feld für Menütext“ und unter „Feld für Parameter“ das Feld "Name"aus.
Klicken Sie dann kurz auf die Seite und dann wieder auf die Meinüeintrag-Komponente - ansonsten kommt es evtl. zu einer Fehlermeldung.
Wählen Sie am besten unter Menütext eine Veranstaltung die öfter stattgefunden hat (z. B. „Straßenlauf-Cup“ oder „Blütenlauf“) damit beim Erstellen der weiteren Komponenten möglichst umfangreiche Daten angezeigt werden.
Bei der Eigenschaft "Verbotene Zeichen" muss nun noch das Komma entfernt werden, da ein Veranstaltungsname ein Komma enthält ( „3000 m, Staffel Harsefeld“ )
Wählen Sie für die Seite bei der Eigenschaft "Datenmenü" die zuvor erstelle Datenmenü-Komponente aus.

Speichern Sie (zur Sicherheit) das Projekt (Datei → Alles speichern) und laden Sie es neu.

Platzieren Sie 2 Feldansicht-Komponenten (Register Datensteuerung) unter der Seitenüberschrift. Wählen Sie für beide Komponenten die Menüeintrag-Komponente als Vorgänger aus sowie für das erste Textfeld das Datenfeld „Name“ und für das zweite das Datenfeld „OrtDetail“.

Wir wollen auf der Seite im oberen Bereich alle Details zu den einzelnen Wettbewerben und darunter ein Diagramm mit einen Vergleich der Zeiten je Strecke anzeigen. Um beide Bereiche abzugrenzen benutzen wir 2 Formulare - das hat zudem den Vorteil das wir die Formulare mit den Komponenten auf der Seite bewegen können. In einer späteren Version ist eine eigene Komponente zum Aufnehmen anderer Komponenten geplant.

Platzieren Sie die beiden Formulare. Um alle Komponenten aufzunehmen sollten die Formulare mindestens etwa 700 Pixel breit und 240 Pixel hoch sein.
Beide Formulare sollten möglichst vollständig zu sehen sein - ansonsten kann es in der aktuellen Version beim Anklicken der betroffenen Komponente zu ungewollten Positionsänderungen kommen.

Auf dem oberen Formular werden sehr viele Komponenten platziert. Wenn Sie für die Text- und Datenfelder die gleiche Hintergrundfarbe wie beim Formular einstellen möchten können sie ggfs. leere Felder auf dem Formular nicht mehr erkennen. Daher sollten Sie in diesem Fall zunächst für das Formualar eine andere Hintergrundfarbe einstellen und diese erst ändern wenn alle Felder platziert sind.

Platzieren Sie nun 2 Datenauswahllisten, 12 Textfelder und 10 Datenfelder auf das obere Formular (siehe Bild). Bei den Text- und Datenfeldern können Sie Arbeit sparen wenn Sie zunächst jeweils eine Komponente platzieren, bei dieser alle Eigenschaften (Hintergrundfarbe, Schriftgröße etc.) wie gewünscht festlegen und diese anschließend mehrfach kopieren und einfügen. Sie müssen die Komponenten dann nur noch an die richtige Position verschieben bzw. diese im Objektinspektor einstellen. Die Eigenschaften Vorgänger, Datenquelle und Datenfeld werden nicht kopiert.

Wählen Sie für die obere Auswahlliste als Vorgänger die Datenmenü-Eintrag-Komponente und als Datenfeld das Feld „Datum“.

Wählen Sie für die untere Auswahlliste als Vorgänger die oberer Auswahlliste und als Datenfeld das Feld „Strecke“.

Wählen Sie für alle Datenfelder als Vorgänger die untere Auswahlliste. Welches Datenfeld auszuwählen ist können Sie nachstehender Tabelle entnehmen:

Textfeld Datenfeld
Zeit: Zeit
Platz: (Textfeld oben) PlatzGesamt
Platz/AK: PlatzAK
Platz/Mannschaft: PlatzMannschaft
Meisterschaft: Meisterschaft
Platz: (Textfeld unten, gilt für Meisterschaft) PlatzMeisterschaft
AK: PlatzMeisterschaftAK
Urkunde: Urkunde
Ergebnisse: Ergebnisse
Anmerkungen: Anmerkungen


Platzieren Sie auf das untere Formular auf der linken Seite ein Textfeld und geben Sie als Text „Strecke:“ ein.

Platzieren Sie unter das Textfeld eine Datenauswahlliste. Wählen Sie als Vorgänger die Datenmenü-Eintrag-Komponente, als Datenfeld „Strecke:“. Wählen Sie außerdem für Sortieren „Ja“ und als Sortierrichtung „aufsteigend“ (= Voreinstellung) um nach der Streckenlänge zu sortieren.

Erstellen Sie rechts daneben ein Daten-Balkendiagramm. Wählen Sie die zuvor erstellte Datenauswahlliste als Vorgänger aus. Stellen Sie außerdem folgende Eigenschaften für das Diagramm ein:

Weil es sich beim Datenfeld „Zeit“ um keine Zahl sondern um eine Zeichenkette handelt wird dieses automatisch als Zeitfeld interpretiert. Durch die Angabe von „Datum2“ als zweites Sortierfeld in der SQL-Anweisung werden die Daten im Diagramm nach Datum sortiert.

Beachten Sie dass die Vorschau im Editor im Gegensatz zur Webseite im Browser die Zeiten neben dem Balken nicht korrekt anzeigt und die Reihenfolge der Balken umgekehrt darstellt.

Speichern Sie die Seite.

Seite „Strecken“

Auf dieser Seite soll eine Übersichtstabelle mit den nach Strecken und Zeit sortierten Veranstaltungs-Ergebnissen angezeigt werden.

Platzieren Sie für den Seitentitel unter dem Text „2004 bis 2021“ ein Textfeld für die Seitenüberschrift. Geben Sie als Text „Strecken“ ein. Sie können auch die Überschrift einer bereits erstellen Seite kopieren, hier einfügen und dann den Text entpsrechend ändern.

Platzieren Sie auf der Seite eine Datenquelle-Komponente. Wählen Sie als Datenbank die zuvor erstellte Datenbank der Hauptvorlage aus. Öffnen Sie den SQL-Editor und erstellen Sie dort folgende SQL-Abfrage:
SELECT
Laufwettbewerbe.Strecke, Laufwettbewerbe.Zeit, Laufwettbewerbe.Datum, Laufwettbewerbe.Name, Laufwettbewerbe.Ort, Laufwettbewerbe.Ortsteil
FROM Laufwettbewerbe
ORDER BY
Laufwettbewerbe.Strecke, Laufwettbewerbe.Zeit

Platzieren Sie eine Komponente „Tabellenansicht“ aus dem Register „Datensteuerung“ und wählen Sie als Datenquelle die zuvor erstellte Datenquelle-Komponente aus.

Speichern Sie die Seite.

Seite „Strecken-Details“

Auf dieser Seite sollen alle Streckenzeiten als Balkendiagramm dargestellt werden.

Platzieren Sie für den Seitentitel unter dem Text „2004 bis 2021“ ein Textfeld für die Seitenüberschrift. Geben Sie als Text „Strecken-Details“ ein.
Sie können auch die Überschrift einer bereits erstellen Seite kopieren, hier einfügen und dann den Text entpsrechend ändern.

Platzieren Sie auf der Seite eine Datenquelle-Komponente. Wählen Sie als Datenbank die zuvor erstellte Datenbank der Hauptvorlage aus. Öffnen Sie den SQL-Editor und erstellen Sie dort folgende SQL-Abfrage:
SELECT * FROM Laufwettbewerbe
ORDER BY
Laufwettbewerbe.Strecke, Laufwettbewerbe.Datum2

Platzieren Sie eine Menüeintrag-Komponenten auf der Seite um Untermenüeinträge für alle Strecken zu erstellen.
Wählen Sie unter "Datenquelle" die zuvor erstellte Datenquelle aus.
Wählen Sie unter „Feld für Menütext“ und unter „Feld für Parameter “ das Feld "Strecke"aus.
Klicken Sie dann am besten zunächst auf die Seite und dann wieder auf die Meinüeintrag-Komponente - ansonsten kommt es evtl. zu einer Fehlermeldung.
Damit beim Erstellen des Diagramms mehrere Zeiten angezeigt werden sollten Sie unter Menütext eine Strecke wählen die öfter gelaufen wurde (z. B. 3000 oder 10000).
Bei der Eigenschaft „Erlaubte Zeichen“ muss „0123456789,.“ eingetragen werden, dadurch werden hier nur Zahlen berücksichtigt.

Wählen Sie für die Seite bei der Eigenschaft "Datenmenü" die zuvor erstelle Datenmenü-Komponente aus.
Speichern Sie (zur Sicherheit) das Projekt (Datei → Alles speichern) und laden Sie es neu.

Platzieren Sie eine Textfeld-, eine Feldansicht- und dann wieder eine Textfeld-Komponente nebeneinander unter die Seitenüberschrift. Geben Sie für die Textfelder die Texte „Strecke:“ und „Meter“ ein. Wählen Sie für das Datenfeld die Menüeintrag-Komponente als Vorgänger und „Strecke:“ als Datenfeld. Insgesamt sollte dann als Text z. B. „Strecke: 10000 Meter“ zu lesen sein.

Platzieren Sie ein Daten-Balkendiagramm auf der Mitte der Seite. Wählen Sie die Menüeintrag-Komponente als Vorgänger aus. Stellen Sie außerdem folgende Eigenschaften für das Diagramm ein:

Weil es sich beim Datenfeld „Zeit“ eine Zeichenkette handelt wird dieses automatisch als Zeitfeld interpretiert. Durch die Angabe von „Datum2“ als zweites Sortierfeld in der SQL-Anweisung werden die Daten im Diagramm nach Datum sortiert.

Speichern Sie zur Sicherheit nochmal alles mit dem Button "Alles specihern" und laden Sie das Projekt neu.

Website erstellen:

Achten Sie darauf dass alle Seiten geöffnet sind und klicken Sie auf den Button mit den zwei roten Pfeilen oder wählen Sie „Projekt → Website erstellen“ ODER „Projekt→ Website aktualisieren“ um die Website zu erstellen.

Wählen Sie die Startseite aus und klicken Sie auf den Button für die Browservorschau (Button Weltkugel und Lupe).

Die Website befindet sich im Projektordner im Unterverzeichnis "website". Die gesamte Website hat eine Größe von lediglich ca. 250 KByte (ggfs. abweichend je nach verwendeten Logo-Bild).

Mögliche Erweiterungen

Bei der Streckenauswertung der Website wird aktuell auch die Zeit der 3000-Meter-Staffel mit ausgegeben. Solange es sich nur um einen einzelnen Staffellauf handelt könnte man dies auch im SQL-Statement mit angeben (... and Name <> "3000 m, Staffel Harsefeld"...). Wenn wir dann weitere Staffel-Ergebnisse hinzufügen müsste jedoch jedes Mal die SQL-Abfrage geändert werden.

Sinnvoller ist es deshalb eine Spalte "Streckenauswertung" hinzuzufügen und hier „nein“ einzugeben wenn der Lauf bei der Streckenauswertung nicht aufgeführt werden soll (ggfs. können wir dann auch den Stundenlauf aus der Auswertung herausnehmen).
Wir können dann das SQL-Statement entsprechend ändern (... and Streckenauswertung <> "nein" ...).

Hier geht's zur fertigen Website: Tutorial_Laufen/Startseite.htm