4D Doc Center : Video Skript

Home

4D v14

Video Skript

Dieses Video zeigt, wie Sie den in 4D integrierten Web Server konfigurieren und einrichten.

Die in 4D integrierte Architektur bietet viele Vorteile, da Sie mit demselben Tool und demselben Code sowohl im Einzelplatz als auch im Client/Server Modus entwickeln und ohne Tools zu wechseln, auch Daten der Anwendung im Web veröffentlichen können.

Zuerst prüfen wir den Port zum Veröffentlichen. Das ist unter Windows nicht notwendig. Auf Mac OS wird standardmäßig Port 80 von Apache verwendet. So setzen wir diesen Port, z.B. auf 8080 und starten dann den Web Server (in der Praxis markieren wir die Option "Launch Web Server at Startup", so dass es automatisch wird).

Die Seite, die im Browser erscheint, gibt an, dass die Verbindung hergestellt wurde. Sehen wir uns an, was passiert ist.
Wir gehen zu den Einstellungen der Datenbank:
Wir sehen, dass eine Standardseite und ein Standardverzeichnis angegeben sind. Also sucht 4D nach dem Verzeichnis und der Indexseite (und erstellt sie, da sie noch nicht existieren).

Es ist unsere Aufgabe, den Inhalt der Seite zu ändern und falls nötig, den Namen des Ordners, der unsere Web Site enthält (wie HTML Seiten, Bilder, JavaScript und CSS).

Für leichteres Arbeiten empfehlen wir, die Dateien in folgender Anordnung zu gliedern:

CSS
Bilder
index_en.html
JS
Seiten

...wo Sie die verschiedenen Dateitypen in den entsprechenden Ordnern sammeln können.

Zuerst ändern wir die Home Page, um Daten aus der Anwendung hinzuzufügen (das kann die Anzahl Datensätze pro Tabelle, der Inhalt eines Array, etc. sein).

Doch zuvor müssen wir verstehen, wie Meldungen zwischen Browser und dem 4D Web Server ablaufen.
Sendet der Browser eine Anfrage:

Wird sie vom Web Server empfangen, er sendet sie an die Methode "On Web Authentication", wenn vorhanden
Dann an die Methode "On Web Connection", dem Eintrittspunkt zur Bearbeitung

Diese Methode empfängt eine bestimmte Anzahl Parameter, über die Sie die Bearbeitung ausführen und Senden der Antwort steuern können.

Nehmen wir an, der Browser fragt folgendes an:

Root 127.0.0.1 und Portnummer 8080 oder Domain Name bei einer realen Site: Die Methode "On Web Connection" empfängt nur "/" als Parameter.
Bei einer spezifischen Seite, z.B. 127.0.0.1:8080/TechList, empfängt er alles, was auf den Root der Site folgt, hier "/TechList". Dies ist also der Parameter, den wir empfangen und analysieren müssen.

Bevor wir weitergehen, ändern wir eine 4D "Preference", um die Standardseite zu definieren, die wir per Programmierung senden wollen.

Wir gehen zurück zu 4D
Eigenschaften der Datenbank
und entfernen die Standardseite

Ab jetzt kann 4D nicht mehr automatisch, also ohne unsere Kontrolle, eine Seite senden.

Bei einer Änderung in den Preferences müssen Sie den Web Server stoppen und erneut starten.

Jetzt wollen wir die Methode "On Web Connection" so verändern, dass sie die passende Seite sendet.

Diese Methode empfängt, wie alle 4D Methoden, Parameter.
Zuerst berücksichtigen wir nur den ersten empfangenen Parameter ($1).

Als nächstes können wir testen, ob der empfangene Parameter "/" ist; wenn ja, soll eine bestimmte Seite gesendet werden; hier die Seite index.html.
Wir geben folgenden Code ein:

 C_TEXT($1)

 Case of

    :($1="/")

       WEB SEND FILE("index.html")

 End case

Wir setzen einen Unterbrechungspunkt und laden die Seite erneut in unseren Browser. Wir sehen, dass der Browser in Standby geht. Wir sehen, dass in $1 der Parameter "/" übergeben wird, in diesem Fall senden wir die Seite index.html.

Jetzt ändern wir unsere Seite, um Datum und Zeit sowie die Liste aller Techniker anzuzeigen.
Im Ordner Webfolder ändern wir die Seite index.html:

Wir entfernen diesen ganzen Teil
Diesen auch, da wir ihn gerade nicht brauchen
Wir kopieren den Text aus einem Tag vom Typ 4DVAR, das ist entweder eine Variable oder ein Feld aus der entsprechenden Datenbank und wir beenden den Kommentar.
Dasselbe geht hier für die aktuelle Zeit.

Wir wollen hierfür die Variablen und Daten der Datenbank verwenden.

Beachten Sie, dass für jede Web Verbindung ein neuer Prozess erstellt wird, und 4D behält die Auswahlen früherer Anfragen nicht bei. (Ausführliche Informationen zu Sitzungen finden Sie in der 4D Dokumentation. Wir erläutern hier nur die grundlegenden Mechanismen. Evtl. werden Variablen nicht gelöscht, das ist das Prinzip hinter Sessions.).

Laden wir die Seite erneut in den Browser, gibt 4D an, dass die beiden Variablen undefiniert sind. (4D hat versucht, vdate und vtime zu finden). Wir müssen sie also initialisieren und Werte zuweisen, bevor wir die Seite neu laden.

Hier weisen wir diesen 2 Variablen Werte zu:

 vDate:=Current date

 vHour:=Current time

Jetzt haben wir Datum und Uhrzeit.

Bevor wir die Seite senden, können wir z.B. eine Auswahl Techniker erstellen:

ALL RECORDS([Technicians])

Laden wir die Seite erneut, erscheinen nicht die Techniker selbst; wir müssen sie im HTML Code hinzufügen.

Wir machen zwei Zeilenumbrüche und dann eine Schleife auf die Techniker und geben z.B. an, dass wir den Inhalt eines Feldes wollen, nämlich den Nachnamen des Technikers mit Zeilenschaltung am Ende.

Beim Neuladen der Seite sind jetzt alle Techniker da

Natürlich lassen sich beim Erstellen der Seiten alle HTML Anzeigeelemente, wie Listen, Arrays, CSS und DIVs verwenden. Ziel unseres Videos ist jedoch das Konzept und nicht die Form.

Jetzt wollen wir jeden Techniker anklickbar machen. Dazu machen wir folgendes...

Wir sichern und laden die Seite erneut, nun lässt sich jeder Techniker anklicken.

Im unteren Teil erscheinen keine Details, in HREF ist nicht definiert ist, was dieser Link zeigen soll.

Wir müssen selbst festlegen, welche URL in 4D erscheint, und dabei berücksichtigen, dass bei einer systematischen Übergabe in On Web Connection, die 4D Syntax /4DCGI ist.
Als nächstes wählen wir z.B., einen Techniker ansehen.

Wir sichern und gehen zurück. Jetzt haben wir anklickbare Links; wir haben jedoch nicht zwischen den einzelnen Technikern unterschieden; wir müssen also nach dieser URL die ID des Technikers angeben, um sicher zu sein, dass wir den richtigen finden.

Wir sichern und laden die Seite erneut. Jetzt sehen wir unten am Ende jeder URL die ID des Technikers.

Wir testen im Schrittmodus, um zu sehen, was beim Klicken auf einen Link in 4D passiert.

In der Methode On Web Connection enthält $1 das Erwartete. Also ändern wir die Methode, damit diese neue Information berücksichtigt wird. Wir sehen, dass $1 nicht nur "/" enthalten kann, sondern zum Beispiel auch /4DCGI. So sind wir hier im Kontext eines Standard Aufrufs der Methode On Web Connection.

Wir strukturieren diesen Teil wie folgt:

:($1="/4DCGI/@") //Empfang einer URL für On Web Connection

 $URL:=$1

 $URL:=Replace string($URL;"/4DCGI/";"")

 Case of:($URL="Display_Tech/@")

       $URL:=Replace string($URL;"Display_Tech/";"")

       QUERY([Technicians];[Technicians]ID=$URL)

       WEB SEND FILE("page_tech.html")

    Else

 End case

Wir weisen den Wert einer Zwischenvariable zu, wo wir 4DCGI ersetzen; wird dann die Anfrage gesendet, um den Techniker anzusehen, ersetzen wir wieder den nicht benötigten Teil, um schließlich die ID zu erhalten, die wir in dieser Variable wollen.

Wir erstellen also eine technische Seite mit Namen page-tech.html, die Vor- und Nachname des Technikers und seine E-Mail enthält. Aber zuerst prüfen wir, ob wir dieses Ergebnis erhalten.
Nach Aktualisieren der Seite:

Enthält $1 den kompletten String, wie erwartet
Wir fahren fort und ersetzen das 4DCGI in dieser URL Variablen
schließlich Display_Tech
Und finden den gewünschten Techniker in der Tabelle Technicians
Nun senden wir diese zuvor angelegte page_tech.html

Dazu:

Duplizieren wir die Indexseite page_tech.html
Ersetzen Datum und Zeit
Suchen nach Vor- und Nachname des Technikers
Und setzen einen Titel

Führen wir die Methode in 4D fort, empfängt unser Browser die Information von page_tech mit Vor- und Nachname des Technikers.

Jetzt können wir in dieser Seite die Liste der nächsten 10 Einsätze hinzufügen, die vom Techniker ausgeführt wurden. Dazu müssen wir in der Methode On Web Connection vor Senden der Seite nur folgendes hinzufügen:

Suche zukünftige Einsätze
Sortiere nach Einsatzdatum
Nimm die nächsten 10
Und füge in unserer HTML Seite hier eine Schleife auf [Interventions] hinzu
Und wir fordern an, dass z.B. Einsatzdatum und Objekt in derselben Zeile sind.

 QUERY([Interventions];[Interventions]Tech_ID=[Technicians]ID)

 QUERY SELECTION([Interventions];[Interventions]Date_Intervention>=Current date)

 ORDER BY([Interventions];[Interventions]Date_Intervention;>)

 REDUCE SELECTION([Interventions];10)

Wir fügen einen Titel hinzu, bei Bedarf mit vorangestelltem Zeilenvorschub.
Wir sichern und haben beim Wiederladen der Seite die Information zum Techniker, sowie die nächsten Einsätze und können später sogar HTML Code hinzufügen, damit die Anzeige der Seite klarer wird.

An dieser Stelle können wir auch wie oben ein href tag hinzufügen, um jeden Einsatz anklickbar zu machen. Sie können die Änderungen sichern und natürlich die URL angeben, die Sie in Ihrem Web Server empfangen wollen, damit jede Zeile anklickbar wird.

Dieser erste Einblick zum Einrichten einer Web Site zeigt, wie Sie Ihre Daten mit der in 4D integrierten Engine im Internet veröffentlichen können.