Geschrieben von Christian Schnettelker

Schlagwörter: , , ,

Steuerkiste – Teil 2: Die Technik

Im zweiten Teil der Projektbeschreibung zu meinem sommerlichen Großprojekt „Steuerkiste“ möchte ich ein paar Worte betreff der dort verwendeten Webtechniken verlieren.
Webtechniken
Die Kunst wird sein, Sie dabei nicht übermäßig zu langweilen, sind doch Begriffe wie Javascript, jQuery, MySQL, Webfont, PHP und Ajax eher etwas für „Nerds“, für die wiederum das Vorurteil gilt, dass selbige kreidebleich im Keller sitzen, Chips futtern, Cola trinken, selten das Sonnenlicht sehen und das gesellschaftliche Leben einer Feldermaus führen.

Übrigens, in meinem Falle und hinsichtlich des Sommer 2015 war das sogar teilweise zutreffend, durch den engen Zeitplan blieb wenig Zeit und Muße für ein „Sonnenbad“ – meine Vitamin D-Werte wage ich gar nicht mehr bestimmen zu lassen.

Immerhin habe ich den Rat meines Ärztestabes befolgt und bin bei längeren Telefongesprächen aus dem Gebäude raus in die Sonne gegangen.

Voraussetzungen

Aber zur Sache, innerhalb der neuen Webseiten soll der Benutzer, wie bereits bei der vorhergehenden Lösung, anhand einiger weniger Parameter den Preis für die Steuerkiste selber ausrechnen können. Dies ist praktisch nur über Javascript respektive jQuery möglich, sodass alle Unterseiten zur Berechnung vorab abfragen, ob Javascript nicht uU ausgeschaltet ist.

Zudem muss, da die Berechnung über mehrere Seiten erfolgt, die Möglichkeit bestehen, dass der Browser diese Daten in sogenannten „Session-Cookies“ abspeichern darf. Sind diese Funktionen deaktiviert wird eine entsprechende Fehlermeldung ausgegeben.

Dann musste ich auch Joomla überreden, PHP-Skripte aufrufen zu können, was (wohl aus Sicherheitsgründen) eigentlich so nicht vorgesehen ist. Hierfür gibt es die äußerst nützliche Joomla-Erweiterung „Sourcerer“, die das Einbinden einer externen PHP-Datei über

{source}<?php
   require_once "/var/www/joomla/php/berechnung.php";
?>{/source}

möglich macht, was man dann an eine beliebige Stelle im Webseitentext und auch in Modulen stellen kann. Wie immer bin ich auch hier über zwei fiese Fallen gestolpert, vor denen ich Sie warnen möchte:

  1. Es war mit nicht möglich, ein PHP-Skript bei require_once() über einen relativen Pfad einzubinden. Mit dem absoluten (Linux)-Pfad – siehe oben – funktioniert es problemlos.
  2. Damit Sourcerer HTML-Code innerhalb von {source} {/source} nicht eigenmächtig entfernt schreiben Sie {source 0} {/source}

So ist das, was einfach klingt hat mich Stunden des Ausprobieren und Nachlesen im Netz gekostet – wie bei Columbo sind es diese verflixten Kleinigkeiten, über die ich stolpere.

Javascript, jQuery

Gleich zu Beginn der Programmierung traf ich auf massive Probleme mit den HTML-Auswahlfeldern („Select-Boxen“), welche praktisch in jedem Browser anders aussehen und nur sehr mühsam zu gestalten sind. Erfreulicherweise gibt es hier inzwischen zahlreiche jQuery-Lösungen, von denen ich, nach einigen Versuchen, „SelectBoxIt“ auswählte.

Es war geplant, dass die Auswahlfelder der Steuerkiste besondere Funktionen beinhalten, um dem Benutzer optisch eine jeweils passende Rückmeldung zu geben. Beispielsweise sollten sie…

  • im default-Zustand weiß oder grau (für ein optionales Feld) sein
  • nach Auswahl einer Option Steuerkisten-gelb werden oder, wenn es sich um ein optionales Feld handelt, hellgrau sein
  • im Falle eines Fehlers automatisch die Hintergrundfarbe auf rot mit weißer Schrift ändern

Alles andere als trivial, insbesondere die Wiederherstellung der korrekten Farbe nach einer fehlerhaften Auswahl. Wieder vergingen Stunden dabei, alle möglichen Kombinationen zu testen. Die Zustandsänderung wird übrigens über den folgenden jQuery-Funktionsaufruf eingeleitet:

jQuery(iId).on( "change",function() {
      restoreSelectBackground( iId, bOptional );
      checkNextButton();
    }
 );

wobei restoreSelectBackground() die passende Hintergrundfarbe wiederherstellt und checkNextButton() den Status des Weiter-Buttons überprüft. jQuery stößt dies dann selbstständig an, wenn sich der Zustand eines Auswahlfelds ändert.

Neben SelectBoxIt kommen zwei weitere jQuery-Bibliotheken zum Einsatz:

  • iCheck von Damir Sultanov steuert die Checkboxen zu Beginn der Berechnung, in denen der Benutzer seine Einkunftsarten auswählt.
  • Für die Hilfe, die mittels eingeblendeter Sprechblasen realisiert wurde, wird Steven Benners „PowerTip“ verwendet.

Beide Bibliotheken mussten natürlich auch wieder relativ aufwendig angepasst werden, damit diese sich optisch und funktional in das Gesamtkonzept einfügen. Das Plugin für die Hilfe-Sprechblasen habe ich insgesamt drei mal wechseln müssen, da ich auf Schwierigkeiten hinsichtlich des „Responsive Webdesign“ stieß. Mit „PowerTip“ und ein paar Anpassungen funktioniert die Anzeige nun aber auch auf kleineren Bildschirmen.

PHP

Wie bereits unter „Voraussetzungen“ erwähnt wird die Berechnung hauptsächlich über PHP gesteuert, sämtliche entsprechenden Funktionen sind in insgesamt 17 Skript-Dateien ausgelagert, welche über „Sourcerer“ in Joomla eingebunden werden.

Man hätte natürlich rein theoretisch alles innerhalb von Joomla schreiben können, müsste dann aber auf den Luxus von Syntax-Highlighting etc. verzichten, was ich mir dann doch nicht antuen wollte. Hinsichtlich Geschwindigkeit gibt es bei dieser Vorgehensweise keine oder nur vernachlässigbare Nachteile.

PHP wird übrigens auch an zahlreichen Stellen zur automatischen Erzeugung von HTML- und Javascript-Code genutzt, so erzeugt der Aufruf „jsCode-Select“…

// Javascript-Code generieren, der die SelectBoxIt-Boxen
// beim Start auf vorab gewählte Werte setzt
// und dann die Hintergrundfarbe auf Gelb ändert
// $n = Nummer/ID der SelectBox (#dd...)
// $par1 = Name der Session-Variable
 
if ( $do == "jsCode-Select" )
   {
   return 'var dd' . $n . 
   ' = jQuery("select#dd' . $n . '").data("selectBoxIt");
   dd' . $n . '.selectOption( "' .
   $session->get( "sk_" . $par1 ) . '" );
   ';
   }

den Javascript-Code zur Initialisierung eines Auswahlfeldes („Select-Box“ via „SelectBoxIt“). Falls Sie dem oben stehenden Code nicht folgen können darf ich Sie trösten, mit den in ‚ und “ eingeschlossenen und durch . zusammengefügten Elementen komme ich oft genug selber durcheinander – grausam!

Wie auch immer, das hat den Vorteil, dass Änderungen am Code zentral durchgeführt werden können. Auch wird die Breadcrumb-Navigation im Kopf der Berechnung und des Kaufes von PHP gesteuert, da dort der aktuelle Stand durch die in den Session-Cookies gespeicherten Daten bekannt ist.

Die Steuerkiste beinhaltet ein paar kleine, aber feine Details, auf die ich noch hinweisen möchte und die auch nur über PHP zu realisieren waren: wird beispielsweise auf der ersten Seite der Berechnung die Steuererklärung 2014 ausgewählt ändern sich nachfolgend sämtliche Hilfetexte und teilweise auch die Beschriftungen der Auswahlboxen entsprechend; in diesem Falle würde dann konkret nach „Jahresbruttoeinkommen 2014″ gefragt.

Sinngemäß werden weiter Formulierungen modifiziert, abhängig davon, ob der Interessent ledig oder verheiratet (Zusammenveranlagung) ausgewählt hat.

Fontawesome

Im Zuge der Entwicklung der Steuerkiste habe ich mich auch erstmals mit „Fontawesome“ beschäftigt. Dieser relativ einfach einzubindende Icon-Webfont bietet zahlreiche (momentan 585) praxisbezogene Grafiken, die als „Schriftzeichen“ innerhalb des Layouts genutzt werden können.

Damit entfällt ein umständliches „hineinfriemeln“ von PNG- oder GIF-Bildern per CSS und die Schriftzeichen / Icons skalieren sich automatisch analog zur aktuellen Schriftgröße. Sehr praktisch.

Diese Lösung hat mich so begeistert, dass dieser Font ab sofort bei allen meinen neuen Webprojekten zum Einsatz kommt.

MySQL und Ajax

Die für die Bestellung der Steuerkiste notwendigen Daten speichert die Steuerkiste temporär (verschlüsselt) zur weiteren Bearbeitung in einer MySQL-Datenbank ab. Um die Sache nicht unnötig kompliziert zu machen wird hierfür die Joomla-Datenbank verwendet – wie die Technik hier funktioniert beschreibt mein Artikel „Zugriff auf die Joomla-Datenbank“ vom 29. August 2015.

Auch war es nötig, während der Berechnung eingegebene Daten zu überprüfen und dazu PHP-Tabellen zu benutzen, wobei „Ajax“ zum Einsatz kam. Diesen ganzen Themenblock wurde bereits vorab unter „Zugriff von Javascript auf PHP-Daten mittels Ajax“ ausführlich beschrieben.

Mehr im dritten Teil

Die Programmierung der Steuerkiste beinhaltet eine Menge mehr, dies würde aber den Rahmen endgültig sprengen, daher habe ich die interessantesten Themen ausgewählt.

Im kommenden dritten Teil zur Steuerkiste schreibe ich einiges zu den Zahlungssystemen und deren Einbindung.

Pin on PinterestShare on FacebookTweet about this on TwitterShare on Google+Share on LinkedIn

Kommentare

Kommentare

Kommentar schreiben

Allgemeiner Hinweis: Bitte kommentieren Sie zum Thema unter Vermeidung von Allgemeinplätzen und Einzeilern. Eine korrekte Rechtschreibung wird erwartet.

Hinweis für SEO-Kommentarschreiber: alle Links sind nofollow und steigern Eure Linkpopularität nicht. Die Kommentare werden moderiert, offensichtliche SEO-Kommentare nicht veröffentlicht.