Tutorial: PHP Styleswitcher

Icon Styleswitcher Viele Styleswitcher sind mit JavaScript realisiert und daher von den Benutzereinstellungen abhängig. Der PHP Styleswitcher dagegen wird auf dem Serverrechner ausgeführt und ist somit unabhängig von den Benutzereinstellungen.
In der Programmierung wird zweckmäßiger Weise nach dem EVA Prinzip verfahren, daher wird die Reihenfolge der Erklärungen sich auch an diese Reihenfolge halten.
Wer vorab das Skript einmal in Aktion sehen will, kann das hier gerne tun: Styleswitcher Demonstration. Mit dem dortigen Link auf „Artikel” kommt man wieder auf diese Seite zurück.

Eingabe der Daten

Um dem Benutzer die Möglichkeit zu geben, ein Stylesheet auszuwählen, und seine Auswahl an den Server zu senden, benutzen wir ein Formular mit einer Selectbox und einem submit Knopf. Der Quellcode für das Beispiel styleswitcher.php lautet:

  • <form action="" method="get">
  •   <fieldset>
  •     <select name="style">
  •     <option value="default" selected="selected">None</option>
  •     <option value="blume">Blume</option>
  •     <option value="the_wall">The Wall</option>
  •     <option value="fruits">Fruits</option>
  •     <!--[...usw. ...]-->
  •     </select>
  •     <input type="submit" value="Switch Style" />
  •   </fieldset>
  • </form>

In der ersten Zeile wird ein Formular geöffnet. Durch action="" sorgen wir dafür, dass das Script sich selbst wieder aufruft, wenn der submit Knopf gedrückt wird.

Die Methode GET sorgt dafür, dass die zu übergebenden Daten an die Adresse angehängt werden, wie z. B. http://example.org?[Schlüssel]=[Wert].
Den Schlüssel für unseren Wert legen wir in der dritten Zeile fest. Mit <select name="style"> öffnen wir nicht nur eine drop down Liste, sondern geben auch mit name="style" den Schlüssel an. Der Wert, der in der Variablen $_GET['style'] dann gespeichert wird, entspricht dann der Auswahl in der Liste.

Mit <option value="[Wert]">[Text]</option> wird eine Option eingefügt die den entsprechenden Wert übergibt. Wird z. B. Option „Blume” ausgewählt und der submit Knopf gedrückt, wird in $_GET['style'] der Wert "blume" gespeichert, auf den man dann im Script direkt zugreifen kann. Damit ist die Dateneingabe schon abgeschlossen. TOP

Verarbeitung der Daten

Hier müssen verschiedene Fälle unterschieden werden. Was soll geschehen, wenn die Variable $_GET['style'] leer ist?
Wenn ein Wert enthalten ist, wie soll dieser weiter verarbeitet werden?
Diese Fallunterscheidungen lassen sich recht einfach mit if else Verzweigungen erreichen.

Nachdem das erreicht wurde, soll noch ein Cookie gesetzt werden, der auf dem Benutzerrechner gespeichert wird, und der die Information des ausgewählten Styles enthält. Dadurch kann beim nächsten Besuch das zuvor gewählte Stylesheet automatisch wieder geladen werden.
Auf diesen Wert lässt sich ebenfalls leicht zugreifen mit $_COOKIE['name'].

Auch hier müssen dann wieder zwei Fälle unterschieden werden, je nachdem ob diese Information existiert, oder nicht. Vorhandene Information über das gewählte Stylesheet wird dann in einer eigenen Variablen $css_name gespeichert. Diese wird dann später benutzt, um das gewünschte Stylesheet zu laden, doch mehr dazu später.

Zunächst geht es erst mal um die wenn-sonst Verzweigung des Scriptes. Logischerweise muss es folgende Fälle berücksichtigen:
Wenn GET nicht gesetzt (durch Verschachteln erreicht man hier ein „und”)
  (und)COOKIE nicht gesetzt
    $css_name soll default Wert annehmen.
  Sonst (bezieht sich hier auf COOKIE ist gesetzt)
    $css_name soll den Wert von COOKIE bekommen
Sonst (bezieht sich hier auf GET und COOKIE sind gesetzt)
  soll $css_name den Wert von GET bekommen

Durch diese Reihenfolge der Verschachtelung erreichen wir, dass $css_name auf jeden Fall den Wert von GET enthält, sofern GET gesetzt ist, also eine (neue) Auswahl vollzogen wurde.
Würde man die Verschachtelung umdrehen, würde GET in jedem Fall von COOKIE überschrieben werden, sofern COOKIE einen Wert enthält. Dann würde aber auch eine neue Auswahl von COOKIE wieder überschrieben werden, und das Script würde nicht wie gewünscht funktionieren. Der Wert in COOKIE soll ja durch eine neue Auswahl auch geändert werden.

Auf die genaue Syntax von PHP gehe ich nicht näher ein. Unter Links finden Sie Websited, die sich mit PHP sehr detailiert auseinander setzten.
Obige Bedingungen lassen sich wie folgt programmieren:

  • <?php
  • if (empty($_GET['style'])) {
  •   if (empty($_COOKIE['style'])) {
  •     $css_name = "default";
  •   } else {
  •     $css_name = $_COOKIE['style'];
  •   }
  • } else {
  •   $css_name = $_GET['style'];
  • }
  • setcookie("style", $css_name, time()+(60*60*24*30), "/examples/styleswitcher/", ".{$_SERVER['SERVER_NAME']}");
  • $_GET['style'] = $css_name;
  • ?>

Nach den Fallunterscheidungen folgen noch drei Zeilen:
In Zeile 13 wird mit setcookie() der Cookie mit dem Namen style gesetzt, dem Wert von $css_name, einer Dauer von einem Monat (60*60*24*30 Sekunden) für das Verzeichnis /examples/styleswitcher/ und die jeweilige Domain (gespeichert in $_SERVER['SERVER_NAME']).
In der nächsten Zeile wird $_GET['style'] der Inhalt von $css_name übergeben, womit verhindert wird, dass $_GET['style'] leer bleiben kann. TOP

Ausgabe der Daten

Nachdem die eigentliche Arbeit nun geschehen ist, müssen die Daten nur noch an der geeigneten Stelle in der Webseite ausgegeben werden.
Als erstes wird das entsprechende Stylesheet als *.css Datei eingebunden. Das geschieht mit einem Metatag. Normalerweise lautet die Syntax:

  • <link rel="stylesheet" type="text/css" media="screen" title="User Defined Style" href="[Pfad]/dateiname.css " />

In der Variablen $css_name ist nun der Name der entsprechenden *.css Datei gespeichert, die geladen werden soll. Notiert man nun:

  • <link rel="stylesheet" type="text/css" media="screen" title="User Defined Style" href="css/<?php echo $css_name?>.css" />

wird auf diese Weise das entsprechende Stylesheet geladen. Ist wie in unserem Beispiel "blume" als Wert gespeichert, wird die Datei blume.css geladen. Es versteht sich von selbst, dass für jede Option ein entsprechendes Stylesheet erstellt werden muss, dass auch entsprechend der im Formular gemachten Vorgaben zu benennen ist.

Will man Benutzern deren Browser das unterstützen (wie z.B. FireFox) einen Gefallen tun, kann man jede Option noch einmal wie folgt notieren:

  • <link rel="alternate stylesheet" type="text/css" media="screen" title="Blume" href="css/blume.css" />

Dadurch kann direkt im Browser auch auf die Stylesheets zugegriffen werden. Der IE unterstützt das bis Version 6 nicht. Ob das in der neuen Version 7 implementiert wurde kann ich nicht sagen. Vermutlich nicht.

Jetzt müssen wir noch bei der Verlinkung dafür sorgen, dass der Wert von $css_name mittels GET übertragen wird. Das ist aber auch einfach zu bewerkstelligen. Obwohl man eigentlich die aktuelle Seite nicht verlinken sollte, habe ich es hier gemacht, weil das ganze Beispiel ja nur aus einer Seite besteht.
Der Link sieht dann wie folgt aus:

  • <a href="styleswitcher.php?style=<?php echo $css_name ?>" title="Styleswitch">Styleswitch</a>

Damit übergibt $css_name seinen Wert gewissermaßen an die nächste aufgerufene Seite. Sollte clientseitig kein Cookie akzeptiert werden, so bleibt dennoch zumindest für diesen Besuch das gewünschte Stylesheet geladen.

So, das war schon alles. Eigentlich kinderleicht.

Wer sich bis hierhin zügeln konnte, sollte sich aber nun doch einmal den Styleswitcher in Aktion ansehen. Es ist schon eindrucksvoll, wie man mit nur zwei Mausklicks das Aussehen der gleichen Seite total verändern kann.
Die angebotenen Styles sind kleine CSS Übungen von mir, also nichts besonderes. Mir geht es darum zu zeigen, was man mit ein wenig Skript erreichen kann, sofern man Inhalt/Struktur in (X)HTML und Gestaltung in (CSS) konsequent von einander trennt.
Dort ist auch der relevante Quellcode von stylesheet.php nocheinmal im Zusammenhang gelisted.

TOP