Rechteck-Berechnung mit PHP + SVG

(PHP + Live-Objekt-Grafik)


Berechnung mit PHP,  Darstellung mit HTML + SVG



Mit Klick auf diesen Link wird der ↗ HTML+SVG Quelltext des Programms angezeigt. Diesen Text hat ihr Browser vom Webserver erhalten und daraus die Mini-Webseite der Lösung erzeugt.

Mit Klick auf diesen Link wird der ↗ PHP Quelltext des Programms angezeigt. Dieses Programm in der Programmiersprache PHP hat der Webserver verwendet, um den HTML+SVG-Quelltext nach ihren Vorgaben Live zu erzeugen.

Client-Programmierung


Tipp: Laden sie ↗ diesen Link mit RechtsKlick in einem neuen Browser-Fenster. So können sie den Quelltext und die Kommentare dieses Kapitels bequem nebeneinander anzeigen.



Auf den Seiten → Minimal‑HTML und → HTML‑5 werden ausführlich kommentierte Beispiele von einfachen Webseiten vorgestellt.


Zuerst sind die Regeln für Auszeichnungs-Elemente festgelegt, z.B. für die Elemente body{}...svg{}
Danach folgen Regeln für CSS-Klassen, die mit class-Attributen angewendet werden.
Die mit einem # Zeichen beginnenden Regeln werden auf die Elemente mit dem jeweiligen id-Attribut angewendet.



Sowohl das <form>-Element als auch alle <input>-Elemente müssen eindeutige name-Attribute erhalten:
Der Name des Formulars wird verwendet, um es mit der Javascript-Methode submit() abzusenden.
Mit den Namen der Eingabe-Felder werden die gleich lautenden Namen der GET-Argumente bezeichnet.

Alle Eingabe-Felder enthalten in dieser Lösung ein onchange-Attribut. Damit wird angegeben, was bei einer Änderung ihres Wertes geschehen soll. In diesem Fall wird das Formular mit der → Javascript-Methode submit() abgesendet. Damit erspart man eine eigene Bildschirm-Taste (<button>) zum Absenden.



Diese Methode hat allerdings einen Nachteil:
Man kann beliebige (falsche) Werte in die Eingabe-Felder des Ergebnis-Formulars eintragen. Das wird mit einem kleinen Trick verhindert:

Alle <input>-Eingabe-Felder dieses Formulars enthalten ein onchange-Atrribut: Damit wird bei jeder Änderung erneut das Vorgabe-Formular <form name="f1"> abgesendet.



Man kann besonders viele Ziffern angeben, z.B. mit
a=123.4567890123456789
Das Programm verwendet in jedem Fall nur die ersten ca. 14 Dezimal-Stellen zur Berechnung. Dieses Verhalten ist nicht auf PHP beschränkt, sondern eine allgemeine Eigenschaft aller zum Rechnen verwendeten Programme (Details)

Server-Programmierung


Das Webserver-Programm sendet die angeforderte Datei *.php an das PHP-Interpreter-Programm, welches an jedem Standard Webserver installiert ist.
Dieses Programm liest den Text und führt die darin als <?php  ?> enthaltenen Programm-Teile aus. Darin befinden sich typisch einige print-Anweisungen: Diese erzeugen Text, welcher an der jeweiligen Stelle in den HTML-Ausgabe-Text eingefügt wird.

Diagramm des → HTTP-Client-Server-Modells→ Minimal-Beispiel eines PHP-Programms.



Nur der Text zwischen den Marken <?php  ?> wird vom PHP-Interpreter-Programm gelesen, in Maschinensprache übersetzt und sofort ausgeführt. Von den meisten dieser PHP-Mini-Programme wird Text erzeugt und als 'Dynamischer Text' in den statischen Text eingesetzt.



Die PHP Fehler-Meldungen werden jedoch nur dann sicher angezeigt, wenn sich die jeweiligen Programm-Teile innerhalb des HTML <body>-Elements befinden.

Daher sind hier auch all jene Programm-Teile im <body>-Element angeordnet, die keine Ausgabe erzeugen und sich daher auch im <head> befinden könnten (z.B. Decodierung der GET-Argumente, Berechnung der Ergebnisse).



Dieser PHP-Programm-Teil wird mehrmals verwendet, um den Datei-Namen in den HTML-Quelltext einzufügen.
Damit macht man ein PHP-Programm vom jeweiligen Datei-Namen unabhängig.
Man kann den Datei-Namen auch direkt (hard-coded) in den Quelltext einsetzen, allerdings funktioniert dann das Programm nach einer Änderung des Datei-Namens nicht mehr.

Ergebnis des Beispiels:
Mein Date-Name lautet rect_svg_1.php



Im Empfangs-Programm wird für jede erwartete Variable ein Standard-Wert festgelegt: Dieser Wert wird verwendet, wenn das betreffende GET-Argument nicht empfangen wurde. Im Beispiel wird ein Zufalls-Wert eingesetzt:
$a = rand(150,350);

Mit der Funktion isset() wird geprüft, ob das erwartete GET-Argument vorliegt. Nur in diesem Fall wird sein Wert verwendet. Dazu wird der Wert (ein Text!) durch Addition der Zahl 0 in eine Zahl umgewandelt:
if(isset($_GET['a'])) {
$t = $_GET['a'];
$a = $t + 0;
}



Hier wird auf Javascript verzichtet und eine reine PHP-Lösung vorgestellt. Diese Anweisung löscht aus dem Text der GET-Variablen alle außer den angegebenen Zeichen [Punkt, Beistrich, Ziffern 0...9]:
$t = $_GET['a'];
$t = preg_replace("/[^\.,0-9]/",'',$t);
Die Details der Funktion preg_replace() werden hier nicht kommentiert. Mit dieser relativ einfachen Anweisung werden alle illegalen Sonderzeichen, Leerzeichen, Buchstaben usw. zuverlässig gelöscht.


Beispiel: Hier wird ein Text mit Dezimal-Beistrich an die Variable $t zugewiesen. Anschließend wird ein allfällig darin enthaltener Beistrich durch einen Punkt ersetzt:
$t = '3,1416';
$t = preg_replace("/,/",'.',$t);
print $t;
Die Details der Funktion preg_replace() werden hier nicht kommentiert. Das Beispiel erzeugt die Ausgabe 3.1416 (mit Dezimal-Punkt) und lässt sich korrekt in eine Gleitkomma-Zahl umwandeln.



Mit dem value-Attribut wird der jeweilige Wert (hier: des vorigen Auftrags) in das <input>-Eingabe-Feld eingetragen.

Das ist für die Berechnung der Aufgabe nicht notwendig, gibt jedoch eine wichtige Rückmeldung an die/den jeweilige/n AnwenderIn für den Fall, dass ein illegaler Eingabe-Text (z.B. 'xyz') nicht akzeptiert und vom Programm verändert wurde.



Der Programm-Teil zur Berechnung ist absichtlich im HTML <body>-Element angeordnet, damit allfällige Fehler-Meldungen bei der Entwicklung gut sichtbar angezeigt werden.


Hinweise

Es ist wichtig, den AnwenderInnen Hinweise zu geben, wenn die Gefahr von Missverständnissen besteht.
Hier wird vom PHP-Programm eine Warnung in den HTML-Quelltext geschrieben, wenn die Grafik abgeschnitten wurde.



Mit der PHP Standard-Funktion print() kann man beliebigen Text erzeugen und in den statischen Text einsetzen, z.B. auch <svg>-Elemente und die darin enthaltenen Grafik-Elemente wie z.B. hier ein <rect>-Rechteck, dessen Attribute (Position, Breite, Höhe) mit PHP variabel programmiert werden.

Beurteilung der vorgestellten Lösung



Die Programmierung ist relativ einfach und kostengünstig, da Kenntnisse von → HTML ohnehin für EntwicklerInnen unentbehrlich und solche von → PHP weit verbreitet sind.


Die Rechen- und Transport-Zeiten sind beide so gering, dass sie in der Praxis dieses Beispiels unbemerkt bleiben.

Das kann sich allerdings schnell ändern, wenn
  • Der Rechen-Aufwand einer (anderen) Aufgabe hoch ist
  • Eine Lösung oftmals hintereinander mit geänderten Daten angefordert wird
  • Das Netzwerk überlastet ist

Eine → Javascript-Lösung ist umso mehr überlegen, je öfter die genannten Bedingungen eintreten.



Dem stehen allerdings Nachteile gegenüber:
Ein Server-Programm braucht wesentlich mehr Rechen-Zeit am Server-Prozessor, weil das angeforderte Produkt vor dem Absenden erst erzeugt werden muss. Darauf müssen alle anderen Anfragen warten.
Ein Client-PC braucht ähnlich viel Prozessor-Zeit, erledigt diese Aufgabe jedoch dezentral und entlastet dadurch den Server.

Die Transport-Zeit übersteigt die Prozessor-Zeit typisch um das 100...1000fache. Das wirkt sich bei häufigen Anforderungen auf die Geschwindigkeit des Netzwerks aus. Außerdem ist eine Live-Animation über das Netzwerk kaum möglich.

Diese Lösung braucht Server und Netzwerk. Das kann für sehr kleine Betriebe oder Organisationen ein Nachteil sein, die nicht über einen eigenen (zuverlässigen) Intranet-Server verfügen.
PHP-Programme kann man nur auf einen anderen Webserver portieren - und das auch nur dann, wenn sie sauber und portabel programmiert sind.
Javascript-Programme kann man dagegen auf praktisch jedem PC verwenden, unabhängig von Betriebssystem, Browser und sonstigen Resourcen.



Der Grafik-Typ ist nicht an eine Programmiersprache gebunden:

Mit jeder Server-Programmiersprache (Java, Perl, PHP, ...) kann man sowohl SVG-ObjektGrafik-Quelltext herstellen, als auch (mit der GD-Bibliothek) binäre Pixel-Grafik.

Mit Javascript → DOM-Methoden kann man schon seit vielen Jahren HTML- oder SVG-Objekte herstellen. Seit Version → HTML-5 kann man mit Javascript und → Canvas auch sehr effizient PixelGrafik erzeugen.


Strategie

Wenn ein Programm zur Ausführung keine Server-Resourcen erfordert und keine vertraulichen Daten verwendet, dann ist eine Lösung mit Javascript fast immer überlegen.
Wenn eine Lösung typisch mehrmals mit wechselnden Daten angefordert wird, dann ist Javascript einer Server-Lösung um mehrere Größenordnungen (!) überlegen. Das ist bei vielen technischen oder naturwissenschaftlichen Rechnungen der Fall.

Wenn ein Programm typische Server-Resourcen (z.B. eine Datenbank) verwendet, dann kombiniert man ein möglichst schlankes Server-Programm mit → Javascript + AJAX Programmen. Dieser Fall tritt in der Praxis häufig auf, um z.B. kommerzielle Daten aus einer Datenbank anzufordern und auf Webseiten als Tabellen und Büro-Grafik darzustellen.

Reine Server-Programme, die - so wie das hier vorgestellte Beispiel - komplette Produkte herstellen, verteilen die Lasten sehr ungünstig.
Das wirkt sich allerdings auf den meist über-dimensionierten und unter-beschäftigten Servern kleiner Unternehmen nicht merkbar aus.
Weitsichtige IT-AdministratorInnen und EntwicklerInnen sollten solche ungünstige Lösungen allerdings nicht neu entwickeln und vorhandene zeitgerecht auf moderne (HTML-5 + Javascript)-Technik umstellen.