Erweiterung eines bestehenden phpContact Templates - TEIL 1

Vorwort

Ein umfangreicher Umbau eines Templates ist zu komplex um es in ein paar Worten zu erklären. Hier wird nur der allgemeine Vorgang demonstriert um kleine Erweiterungen und Anpassungen selbst zu machen. Auf den ersten Blick schaut es sehr kompliziert aus. Wenn man die Technik etwas durchschaut hat, ist es gar nicht sooo schwer sich sein eigenes Template zu basteln. Diese Anleitung richtet sich an fortgeschrittene Homepagebastler mit Kenntnissen in HTML, CSS, PHP und eventuell etwas JavaScript. Es ist grundsätzlich nur ein einfacher Texteditor notwendig. Ich favorisiere Notepadd++, der einen guten Syntaxhighlighter, eine Zeilennummerierung und eine einstellbare Zeichencodierung hat.

Allgemeines

Hier in dieser Anleitung verwende ich als Ausgangspunkt das Template "Amela" in der Version 2.5. Alle in dieser Version vorhandenen Formularfelder und dessen Definitionen können hier Tempalte Amela angesehen werden.

Aufgabenstellung

Es soll ein einfaches Eingabefeld zwischen Vorname und dem Familiennamen mit dem Titel 2. Vorname eingebaut werden. Genauso wie bei allen anderen Feldern soll es über die einstellbaren Parameter "aktivieren / deaktivieren" und "Pflichtfeld / optionales Feld" verfügen.

Erster Schritt - Kopie des Ausgangstemplate erstellen

Zuerst kopieren wir den kompletten Ordner des Ausgangstemplate das sich im Verzeichnis templates befindet. In unserem Fall den Ordner "Amela" und geben ihm einen neuen Namen. Ich verwende in dieser Anleitung den Namen "Test". Der Name des Ordners ist auch gleichzeitig der Name des Templates. Wir haben jetzt also im Verzeichnis templates das Unterverzeichnis Test.

Alle Änderungen machen wir ausschließlich an Dateien in diesem Verzeichnis.

Öffnen wir jetzt die Datei info.php das sich im Root von Test befindet. In der Zeile 23 steht folgender Eintrag:

$phpContact_template_name = "Amela";

Diesen ändern wir auf:

$phpContact_template_name = "Test";

Dann müssen wir noch die Schreibrechte für die Datei php/params.php kontrollieren. Diese müssen auf CHMOD 777 gesetzt sein.

Der erste Schritt ist somit fertig. Wir haben jetzt eine Kopie von "Amela" mit dem neuen Namen "Test". Das kann man im Administratorbereich auch gut sehen und testen.

Information zur Template-Technik

Änderungen werden in folgenden Dateien durchgeführt:

• Formular Template: htmls/formular.tpl.html
• E-Mail Template: htmls/mail.tpl.html
• Parameter Standard: php/params.bak.ini

optionale Dateien

Diese Dateien werden im nächsten Teil dieser Anleitung behandelt.

• Sprachdatei deutsch: languages/deutsch.ini
• Sprachdatei english: languages/english.ini
• CSS: (alle Dateien in diesem Verzeichnis)

Schauen wir uns zuerst die Datei htmls/formular.tpl.html an. Hier werden die Formularfelder definiert und positioniert.

Ein Eingabefeld hat z.B. folgenden Code:

{feld:1;type:input;name:f001;id:f001;label:%%001_LABEL%%;value:;class:b4yf_inputfeld;error:%%001_ERROR%%;placeholder:%%001_LABEL%%}

Diese Zeile definiert das erste Eingabefeld. Zerlegen wir diese Codezeile in seine Einzelteile:

Bemerkung: In diesem konkreten Fall handelt es sich um ein einzeiliges Eingabefeld. Bei anderen Feldern gibt es andere bzw. auch noch weitere Parameter. Bleiben wir jetzt aber bei diesem Beispiel.

Schauen wir uns diese Parameter genauer an:

feld

Jedes Feld hat eine Nummer.

Die Nummerierung muss bei 1 beginnen und fortlaufend sein!

Wenn wir ein Feld dazubauen und dieses nicht am Ende steht, muss die Nummerierung aller nachfolgenden Felder berichtigt werden!

type

Es sind verschiedene Typen möglich. Je nach verwendeten Typ können sich die Parameter unterscheiden. Mögliche Typen sind:

• input
• textarea
• email
• url
• number
• select
• checkbox
• radio
• file
• hidden
• captcha
• button
• select-empfaenger

name

Jedes Feld muss einen einzigartigen Namen haben um es im Programmcode ansprechen zu können. Vor allem werden wir diesen Namen dann bei der E-Mail Templatedatei htmls/mail.tpl.html brauchen.

id

Diese ID muss auch bei jedem Feld unterschiedlich sein. Es ist notwendig um dieses Eingabefeld per CSS oder JavaScript zu selektieren.

label

Hier wird der Text (das sogenannte Label) eingetragen, der das Feld beschreibt. Dieser steht bei einem "normalen" Eingabefeld wie hier dessen voran. Z.B. "Familienname".

In unserem Beispiel steht hier aber %%001_LABEL%%. Das ist ein Wildcard, ein sogenannter Platzhalter, der durch einen anderen Text ersetzt wird. Dieser ist hier in der Sprachdatei definiert. Näheres möchte ich hier nicht erwähnen.

Wenn wir statt %%001_LABEL%% einfach Familienname schreiben, so wird dieser Text vor dem Eingabefeld stehen.

value

Hier können wir ein Feld vorbelegen. Z.B.: können wir bei einem Eingabefeld für die URL einer Homepageadresse das Feld mit http:// vorbelegen.

class

Wie schon zu vermuten wird hier die CSS Klasse eingetragen. Es können auch mehrere Selektoren verwendet werden. Diese einfach dann mit Leerzeichen trennen.

error

Hier wird der Errortext definiert. Das ist jener Text der bei nicht gültiger Eingabe angezeigt wird. Hier handelt es sich genauso wie beim "label" um eine Wildcard.

placeholder

Text bzw. Wildcard, der als Beschreibung im Eingabefeld steht.

einfaches Eingabefeld hinzufügen

jetzt gehts richtig los

htmls/formular.tpl.html

Nachdem wir jetzt wissen wie ein einzeiliges Eingabefeld aufgebaut werden muss, wollen wir unser eigenes Eingabefeld bauen.

Wir bleiben bei der Datei htmls/formular.tpl.html und suchen uns zuerst die Position. Wir wollen unser neues Eingabefeld nach dem Feld "Vorname" und dem Eingabefeld "Familienname" einfügen. Das bedeutet zwischen den Zeilen 118 und 119. Diese beiden Zeilen schauen so aus:

{feld:4;type:input;name:vorname;id:f004;label:%%004_LABEL%%;value:;class:b4yf_inputfeld;error:%%004_ERROR%%;placeholder:%%004_LABEL%%}
{feld:5;type:input;name:familienname;id:f005;label:%%005_LABEL%%;value:;class:b4yf_inputfeld;error:%%005_ERROR%%;placeholder:%%005_LABEL%%}

Wir erstellen vorerst unser neues Feld ohne Berücksichtigung der Wildcards und schreiben direkt die Texte.

{feld:5;type:input;name:vorname2;id:vorname2;label:zweiter Vorname;value:;class:b4yf_inputfeld;error:Der zweite Vorname fehlt.;placeholder:zweiter Vorname}

Wie wir sehen, habe ich die Nummer dieses Feldes mit 5 beziffert.

WICHTIG: Alle nachfolgenden Felder müssen um 1 erhöht werden.

Der Code der 3 Zeilen (Vorname, zweiter Vorname und Familienname) schaut jetzt so aus:

{feld:4;type:input;name:vorname;id:f004;label:%%004_LABEL%%;value:;class:b4yf_inputfeld;error:%%004_ERROR%%;placeholder:%%004_LABEL%%}
{feld:5;type:input;name:vorname2;id:vorname2;label:zweiter Vorname;value:;class:b4yf_inputfeld;error:Der zweite Vorname fehlt.;placeholder:zweiter Vorname}
{feld:6;type:input;name:familienname;id:f005;label:%%005_LABEL%%;value:;class:b4yf_inputfeld;error:%%005_ERROR%%;placeholder:%%005_LABEL%%}

Alle Felder bis runter zum Feld 40 müssen um 1 erhöht werden.

NUR die Feld-Nummer ändern wir. Alle anderen Nummerierungen (id, label, u.s.w.) lassen wir so wie sie sind!

Obwohl wir mit dieser Datei noch nicht fertig sind, speichern wird diese und machen mit der nächsten Datei weiter.

php/params.bak.ini

In dieser Datei werden alle Parameter definiert und mit Startwerten belegt.

Schauen wir uns die Zeilen 29 bis 33 genauer an:

$b4yf_param[8]='activate|feld:4|active||%%004_LABEL%%|%%K_ACTIVATE%%'; // Vorname
$b4yf_param[9]='required|feld:4|yes||%%004_LABEL%%|%%K_REQURIED%%';

$b4yf_param[10]='activate|feld:5|active||%%005_LABEL%%|%%K_ACTIVATE%%'; // Familienname
$b4yf_param[11]='required|feld:5|yes||%%005_LABEL%%|%%K_REQURIED%%';

Dazwischen müssen wir jetzt unser neues Feld einbauen. Das schaut dann so aus:

$b4yf_param[8]='activate|feld:4|active||%%004_LABEL%%|%%K_ACTIVATE%%'; // Vorname
$b4yf_param[9]='required|feld:4|yes||%%004_LABEL%%|%%K_REQURIED%%';

$b4yf_param[10]='activate|feld:5|active|active|zweiter Vorname|%%K_ACTIVATE%%'; // zweiter Vorname
$b4yf_param[11]='required|feld:5|yes||zweiter Vorname|%%K_REQURIED%%';

$b4yf_param[12]='activate|feld:6|active||%%005_LABEL%%|%%K_ACTIVATE%%'; // Familienname
$b4yf_param[13]='required|feld:6|yes||%%005_LABEL%%|%%K_REQURIED%%';

Vermutlich hast du es schon bemerkt: Wir müssen wieder alle nachfolgenden Zeilen (Felder) umnummerieren. (leider sehr mühsam)

Durchnummeriert muss nicht nur das Array (Zahl in der eckigen Klammer), sondern auch die Nummer nach dem feld:. Ich habe auch hier ohne dem Wildcard gearbeitet und direkt den Text "zweiter Vorname" geschrieben.

Kontrollieren wir kurz die Zeile 127 und die Zeile 158: Wenn alles richtig durchnummeriert ist, müssten sie so aussehen:

$b4yf_param[73]='feldactivate|feld:40|active|active|%%K_BUTTON_LOESCHEN%%|%%K_ACTIVATE%%'; // Löschen Button

$b4yf_param[99]='select|var:phpContact_html5_inputs|yes,no|yes|%%K_HTML5_INPUTS%%|'; // HTML5 Eingabefelder nutzen

Wenn das soweit richtig ist, laden wir beide Dateien htmls/formular.tpl.html und php/params.bak.ini auf den Server. Danach öffnen wir den Administratorbereich, melden uns mit dem Passwort an und navigieren zum Konfigurationsbereich des neuen Templates.

Im Moment ist noch kein neues Feld zu sehen. Beim genaueren hinsehen stimmen jetzt sogar einiges nicht. Wir müssen jetzt die neue Konfigurationsdatei erst neu laden.

Durch den Klick auf den Button "Grundeinstellungen laden" werden alle Parameter aus der php/params.bak.ini in die php/params.ini geladen. Danach sollte jetzt auch das neue Feld im Administratorbereich sichtbar und konfigurierbar sein.

Schauen wir uns durch Klick auf "Vorschau als eigenständige Seite" (ziemlich weit oben rechts) das Formular an. Es sollte jetzt das neue Feld sichtbar sein und im Formular auch schon (fast) richtig arbeiten.

Leider sind wir noch nicht fertig. Es fehlt jetzt noch die Erweiterung im E-Mail Template htmls/mail.tpl.html.

htmls/mail.tpl.html

Schauen wir uns gleich mal die Zeile 98 an:

{name}{vorname} {familienname}

Blicken wir kurz zurück in die Datei htmls/formular.tpl.html. Hier haben wir die Felder mit dem Parameter name versehen. Das ist das "Wildcard", dass wir jetzt brauchen. In unserem Fall haben wir geschrieben ...;name:vorname2;.... Unser Wildcard für den übergebenen Wert setzt sich aus der öffnenden geschweiften Klammer {, dem Namen und der schließenden geschweiften Klammer } zusammen. Also: {vorname2}. Unsere neue Zeile 98 schaut somit so aus:

{name}{vorname} {vorname2} {familienname}

Wenn wir uns diese Datei noch weiter ansehen, sehen wir weiter unten (Zeile 135) noch einmal den gleichen Eintag:

{name}{vorname} {familienname}

Diese Zeile wird ausgegeben, wenn der Empfänger nur reine Text E-Mails empfängt. Zuvor wurde die HTML-Ausgabe geändert. Schreiben wir also auch hier:

{name}{vorname} {vorname2} {familienname}

Jetzt nur noch speichern und alles hochladen, dann kann schon mal getestet werden.

fertig!

Wir sind mit dem 1. Teil dieser Anleitung "Erweiterung eines bestehenden phpContact Templates" fertig.

Vorschau zum Teil 2 dieser Anleitung

Im zweiten Teil werde ich noch ein paar Feinheiten erklären.

• Wie lagere ich die Texte in die Sprachdatei aus.
• Der Vorschaumodus wurde bisher nicht berücksichtigt.