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:
Parameter | Wert | Bemerkung |
---|---|---|
feld | 1 | Jedes Eingabefeld bekommt eine Nummer. |
type | input | Typ dieses Eingabefeldes. |
name | f001 | Einzigartiger Name dieses Feldes. |
id | f001 | ID dieses Feldes. |
label | %%001_LABEL%% | Label bzw. der Text der das Feld beschreibt. |
value | Vorbelegter Wert. | |
class | b4yf_inputfeld | CSS Klasse |
error | %%001_ERROR%% | Errortext, wenn das Feld nicht korrekt ausgefüllt wurde. |
placeholder | %%001_LABEL%% | Text für den Placeholder. |
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
- 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.
php/params.bak.ini
ist die Sicherungsdatei und die php/params.ini
ist die eigentliche Konfigurationsdatei.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.
Comments (0)