Rechteck-Berechnung mit PHP + Pixel-Grafik

(PHP + GD-Bibliothek)


Berechnung mit PHP,  Darstellung mit HTML + Bild


Mit Klick auf diesen Link wird der ↗ HTML+Bild Quelltext des Programms angezeigt. Diesen Text hat ihr Browser vom Webserver erhalten und daraus die Mini-Webseite der Lösung erzeugt.
Kurz vor dem Ende des Textes ist das Bild als HTML <img>-Element enthalten.

Mit Klick auf diesen Link wird der ↗ PHP Quelltext der Mini-Webseite angezeigt. Dieses Programm in der Programmiersprache PHP hat der Webserver verwendet, um den HTML+Bild-Quelltext nach ihren Vorgaben Live zu erzeugen. Das darin enthaltene Bild wurde allerdings von einem weiteren PHP-Programm erzeugt:
Mit Klick auf diesen Link wird der ↗ PHP Quelltext jenes Programms angezeigt, welches die dynamische (variable) Pixel-Grafik erzeugt..

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.

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.



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;
}



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.


Pixel-Grafik

Die hier verwendete ↗ Pixel-Grafik ist dynamisch (variabel): Sie wird Live nach den gleichen Vorgaben hergestellt.
Zur Lösung der Rechteck-Aufgabe werden hier 2 verschiedene PHP-Programme verwendet:
Das PHP-Programm zur Herstellung des HTML-Quelltextes wird in diesem Kapitel kommentiert, das PHP-Programm zur Herstellung der binären Pixel-Grafik im nächsten ↓ Kapitel.

Programmierun g der Pixel-Grafik



Im Kapitel → Grafik finden sie Beispiele zu einigen Grundlagenn der IT-Grafik: → Datei-Formate, → RGB-Farben, → Pixel- und Objekt-Grafik

Die Programmierung eines binären Produkts (PixelGrafik) ist schwieriger als jene eines Text-Produkts (HTML, SVG).
Ein eigenes Beispiel zeigt → Tricks zum Debuggen von Programmen, die binäre Produkte herstellen.



Es ist sehr empfehlenswert, am eigenen Entwicklungs-Server die gleichen Software-Versionen zu installieren wie beim Web-Provider, darunter natürlich auch das GD-Modul.

Alle in diesem Web vorgestellten Beispiele zur → Erzeugung von Pixel-Grafik mit PHP verwenden die Funktionen der GD-Library.



An Stelle einer Datei wird vom PHP-Programm ein binärer Datenstrom (Binary string) erzeugt und ohne Speicherung direkt an den Client (Browser) gesendet.
Ein Browser kann nicht unterscheiden, ob die Daten aus einer Grafik-Datei oder aus einem Datenstrom stammen und erzeugt daraus eine Pixel-Grafik.
Dieses Verfahren ist einfacher und schneller als die Erzeugung einer Grafik-Datei.



Es gibt keinen statischen Text, daher wird der gesamte Quelltext in die Marken <?php  ?> eingeschlossen.

Die erste Anweisung legt den MIME-Typ der Ausgabe-Daten fest (hier image/png).

Mit Funktion imagecreate() wird ein Image-Objekt der angegebenen Größe erzeugt ($img). Alle folgenden Funktionen der GD-Library verwenden dieses Objekt.

Die verwendeten Farben werden mit Funktion imagecolorallocatee() festgelegt und an Variable (hier $col_back, $col_fill) zugewiesen.

An Stelle des // Kommentars setzt man Funktionen zum Malen der Pixel ein.

Zuletzt wird das fertig gemalte Objekt mit Funktion imagepng() als Datenstrom an den Client gesendet.



Es gibt mehrere Möglichkeiten, um einen Rand variabler Breite zu erzeugen:

Hier werden 2 Rechtecke gemalt, deren Größe sich nur um die Breite des Randes $w unterscheidet.

Zuerst wird das hintere Rechteck gemalt und mit der Farbe des Randes $col_stroke gefüllt, danach das vordere Rechteck mit der Farbe der Füllung $col_fill



Je 1 einzige Zeile genügt zur Decodierung der beiden verwendeten GET-Variablen und zur Umwandlung in einen Zahlenwert:
if(isset($_GET['a'])) {$a=$_GET['a']+0;}

Sie können die ↗ Pixel-Grafik in einem eigenen Browser-Tab laden und mit den in der Adresszeile angegebenen Variablen a und b experimentieren.

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. Zur Programmierung einer binären Pixel-Grafik sind allerdings fortgeschrittene PHP-Kenntnisse hilfreich.


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.


Die hier vorgestellte Lösung hat daher nur geringen praktischen Wert.

Bei dieser Gelegenheit werden allerdings zahlreiche Methoden der praktischen Informatik Live demonstriert. Die zu lösende Aufgabe ist absichtlich besonders einfach. Damit soll es leicht werden, die Details der Methoden zu erkennen und die verschiedenen Lösungen der → Rechteck-Aufgabe miteinander zu vergleichen.

Seit Einführung der Version → HTML-5 haben sich die Möglichkeiten der Programmiersprache → Javascript gegenüber → PHP stark verbessert. Es ist daher sinnvoll, die Rolle von PHP bei neuen Entwicklungen auf die unbedingt notwendigen Server-Funktionen zu beschränken und so viele Aufgaben wie möglich nach Javascript zu portieren.