Advitum.de auf Google+

Formulare, Parameter und Eingaben – Typo3: Extension selbst erstellen

Formulare, Parameter und Eingaben – Typo3: Extension selbst erstellen
VN:F [1.9.22_1171]
Bewertung: 4.7/5 (6 Stimmen abgegeben)
Von am
Kategorien: Content Management Systeme, PHP, Programmieren, Tutorials, Typo3

Seit meinem letzten Artikel kannst du einfaches »Hello World«-Frontend-Plugin für Typo3 programmieren. Als nächstes werde ich dir zeigen, wie man ein etwas komplexeres Plugin entwickelt. Am Ende dieses Artikels wirst du in deinen Plugins Formulare und POST- und GET-Variablen verarbeiten können und aus Typo3 heraus Mails verschicken können. Zudem hast du dann die Basis für dein eigenes Kontaktformular-Plugin, dass du später beliebig erweitern und in deinen eigenen Projekten verwenden kannst.

Formulare, Parameter und Eingaben - Typo3: Extension selbst erstellen, 4.7 out of 5 based on 6 ratings
Seit der Einführung von Extbase ist diese Artikelserie leider veraltet. Schau dir am besten mein neues Tutorial zur Extbase-Programmierung an!

Artikelserie: Typo3: Extension selbst erstellen

Dieser Artikel ist Teil einer mehrteiligen Artikelserie. Lies dir auch die restlichen Teile durch!

  1. Kickstarter, Grundlagen & Hallo Welt - Typo3: Extension selbst erstellen
  2. Formulare, Parameter und Eingaben – Typo3: Extension selbst erstellen
  3. Templates, CSS und TypoScript - Typo3: Extension selbst erstellen
  4. Lokalisierung und FlexForms - Typo3: Extension selbst erstellen
  5. Planung, Dokumentation und Veröffentlichung – Typo3: Extension selbst erstellen

Abonniere den RSS-Feed von Advitum, um keinen Artikel zu verpassen, oder folge mir über meine Facebook-Seite oder meinen Twitter-Kanal.

Schritt 1: Mit dem Kickstarter fängt alles an

Wie schon im ersten Teil der Artikelserie benutzen wir zum Erstellen der Erweiterung den Kickstarter. Zur Erinnerung: Wir finden den Kickstarter im Erweiterungs-Manager, wenn wir oben »Neue Erweiterung erstellen« auswählen.

Im Gegensatz zu unserem ersten »Projekt« geben wir diesmal einen sinnvollen Erweiterungsschlüssel ein, denn vielleicht wollen wir später die Erweiterung doch noch irgendwo veröffentlichen.

Zuerst registrieren wir uns dafür auf typo3.org und melden im Extension Repository eine Extension an. Ein sinnvoller Name wäre zum Beispiel eine Kombination aus deinem Namen und der Funktion der Extension. Ich könnte zum Beispiel meine Extension »le_contactform« nennen, jeder könnte sofort erkennen, dass es sich bei der Extension um ein Kontaktformular handelt und durch meine Initialien ist der Schlüssel vermutlich noch nicht belegt.

Nachdem wir den Schlüssel registriert haben, tragen wir ihn im Kickstarter ein. Unter »General info« füllen wir ein paar Informationen über die Extension ein.

Ich habe unter »General info« ein paar Informationen über die Extension abgelegt.
So sehen meine Infos aus, aber deine Infos können natürlich davon abweichen!

Ist das geschehen, müssen wir als nächstes ein Frontend Plugin anlegen. Als Titel verwenden wir am besten etwas griffiges wie »Contact form« oder so ähnlich. Wieder wählen wir »Add to ‚Insert Plugin‘ list in Content Elements« aus und setzen den Haken bei »Add icon to ‚New Contenten Element‘ wizard«, damit das Plugin in der Inhaltselemente-Liste erscheint. Gib auch eine sinnvolle Beschreibung wie zum Beispiel »Adds a contact form to the page.« Nach dem Klick auf »Update…« können wir unter »View result« mit einem Klick auf »WRITE« die neue Extension anlegen. Dann importieren und installieren wir die neue Erweiterung.

Nun fügen wir noch schnell eine neue Seite namens »Kontakt« in die Webseite ein und platzieren dort das eben erstellte Contact-form-Plugin, damit wir auch sehen was wir tun.

Schritt 2: das Formular

Nachdem wir nun das Plugin in unsere Seite eingebettet haben, sehen wir mal wieder den ominösen Beispiel-Inhalt, den der Kickstarter immer einbaut. Diesen müssen wir jetzt durch das Kontaktformular ersetzen. Wie wir im letzten Teil gelernt haben, können wir das in der Datei pi1/class.tx_lecontactform_pi1.php. Wir kommentieren also die Zeilen 59 bis 71 aus, und fügen danach unseren eigenen Inhalt in die Variable $content ein.

$content = '
	<form action="' . $this->pi_getPageLink($GLOBALS['TSFE']->id) . '" method="POST">
	
	</form>
';

In Zeile 74 ermitteln wir mit der Methode pi_getPageLink, mit der wir die URL einer beliebigen Seite bekommen, die URL der aktuellen Seite. So landen die Nutzerangaben hinterher wieder auf der Seite, sodass das Plugin sie auswerten kann.

Als nächstes fügen wir die nötigen Eingabefelder für das Kontaktformular ein.

<form action="' . $this->pi_getPageLink($GLOBALS['TSFE']->id) . '" method="POST">


		<label for="' . $this->prefixId . '_sender_name">Name:</label>
		<input type="text" id="' . $this->prefixId . '_sender_name" name="' . $this->prefixId . '[sender_name]" placeholder="Ihr Name" required="required" />
	


		<label for="' . $this->prefixId . '_sender_mail">E-Mail:</label>
		<input type="email" id="' . $this->prefixId . '_sender_mail" name="' . $this->prefixId . '[sender_mail]" placeholder="Ihre Mail-Adresse" required="required" />
	


		<label for="' . $this->prefixId . '_message">Nachricht:</label>
		<textarea id="' . $this->prefixId . '_message" name="' . $this->prefixId . '[message]" placeholder="Geben Sie hier Ihre Nachricht an uns ein!" required="required"></textarea>
	


		<input type="submit" name="' . $this->prefixId . '[send_message]" value="Nachricht versenden" />
	

</form>

Bei der Vergabe der Namen müssen wir darauf achten, dass wir immer nach dem Muster le_contactform[NAME] vorgehen. Durch diese Schreibweise landen hinterher alle Parameter für dieses Plugin in dem Array $_POSt['le_contactform'] und die Schlüssel entsprechen den Namen der Variablen. In der Plugin-Datei haben wir Typo3 in Zeile 55 mit der Methode pi_setPiVarDefaults() genau diese Parameter ausgelesen, sodass wir diese später zum Beispiel mit $this->piVars['sender_name'] abrufen können.

Die Formularfelder sind alle da, das Design aber noch nicht.
Noch sieht das Kontaktforumlar nicht toll aus, aber das kommt später!

Schritt 3: Validieren, absenden und Meldung machen

Einen wichtigen (Teil-)Schritt, das Validieren, nimmt uns seit HTML5 der Browser schon ab. Wenn ein Nutzer ein mit required="required" als Pflichtfeld markiertes Feld nicht ausfüllt, bekommt er sofort eine Fehlermeldung und das Formular wird nicht abgesendet. Doch leider reicht das als Validierung nicht aus, denn zum einen unterstützen noch nicht alle Browser HTML5 und zum anderen gibt es immer noch künstliche Aufrufe durch Spambots und gelangweilte Hacker, wobei die Validierung durch den Browser natürlich auch nicht greift. Deshalb bauen wir jetzt zumindest einen einfachen Schutz ein, der dafür sorgt, dass zumindest alle Felder ausgefüllt sind.

$errors = array();
$message = '';
$class = '';
if(isset($this->piVars['send_message'])) {
	if(!isset($this->piVars['sender_name']) || trim($this->piVars['sender_name']) == '') {
		$errors['sender_name'] = 'Bitte geben Sie Ihren Namen ein!';
	}
	if(!isset($this->piVars['sender_mail']) || trim($this->piVars['sender_mail']) == '') {
		$errors['sender_mail'] = 'Bitte geben Sie Ihre Mail-Adresse ein. Wie sollen wir Ihnen denn sonst antworten?';
	}
	if(!isset($this->piVars['message']) || trim($this->piVars['message']) == '') {
		$errors['message'] = 'Haben Sie uns denn gar nichts zu sagen? Bitte geben Sie doch eine Nachricht an uns ein!';
	}
	
	if(count($errors) == 0) {
		//	Absenden der Nachricht
		
		$message = 'Ihre Nachricht wurde erfolgreich versandt. Danke! Wir werden uns schnellstmöglich mit Ihnen in Verbindung setzen.';
		$class = 'success';
	}
	else {
		$message = 'Die Nachricht konnte nicht abgesendet werden. Bitte überprüfen Sie Ihre Eingaben!';
		$class = 'error';
	}
}

Für jedes nicht ausgefüllte Feld schreibe ich in das Errors-Array einen Fehler. Wenn am Ende der Validierung keine Fehler vorliegen, kann die Nachricht getrost abgesendet werden, ansonsten wird eine Fehlermeldung generiert. Die ganzen Fehler-Variablen müssen wir jetzt nur noch im Formular selbst ausgeben. Dazu habe ich mir eine kleine Funktion geschrieben, die die Nachricht mit beliebigem Text umgibt, aber eben nur, wenn die Nachricht nicht leer ist.

function wrapMessage($message, $prefix, $suffix) {
	if(trim($message) != '') {
		return $prefix . $message . $suffix;
	}
	else {
		return '';
	}
}

Diese Funktion wenden wir nun an, um die gerade generierten Fehlermeldungen auszugeben.

$content = '
	<form action="' . $this->pi_getPageLink($GLOBALS['TSFE']->id) . '" method="POST">
		' . $this->wrapMessage($message, '<div class="' . $class . '">', '</div>') . '


			<label for="' . $this->prefixId . '_sender_name">Name:</label>
			<input type="text" id="' . $this->prefixId . '_sender_name" name="' . $this->prefixId . '[sender_name]" placeholder="Ihr Name" required="required" value="' . htmlspecialchars($this->piVars['sender_name']) . '" />
			' . $this->wrapMessage($errors['sender_name'], '<div class="error">', '</div>') . '
		


			<label for="' . $this->prefixId . '_sender_mail">E-Mail:</label>
			<input type="email" id="' . $this->prefixId . '_sender_mail" name="' . $this->prefixId . '[sender_mail]" placeholder="Ihre Mail-Adresse" required="required" value="' . htmlspecialchars($this->piVars['sender_mail']) . '" />
			' . $this->wrapMessage($errors['sender_mail'], '<div class="error">', '</div>') . '
		


			<label for="' . $this->prefixId . '_message">Nachricht:</label>
			<textarea id="' . $this->prefixId . '_message" name="' . $this->prefixId . '[message]" placeholder="Geben Sie hier Ihre Nachricht an uns ein!" required="required">' . htmlspecialchars($this->piVars['message']) . '</textarea>
			' . $this->wrapMessage($errors['message'], '<div class="error">', '</div>') . '
		


			<input type="submit" name="' . $this->prefixId . '[send_message]" value="Nachricht versenden" />
		

</form>
';
Unter allen Feldern steht eine Fehlermeldung
Wird das Formular leer ausgefüllt oder fehlen einzelne Angaben, werden entsprechende Fehlermeldungen ausgegeben. Das Design folgt später!

Nun fehlen lediglich noch die entscheidendsten Zeilen, nämlich das Absenden der Daten per Mail an wen auch immer. Dies bewerkstelligen wir mit der PHP-Funktion mail().

if(count($errors) == 0) {
	$subject = '=?UTF-8?B?' . base64_encode(utf8_encode('Kontaktanfrage von ' . htmlspecialchars($this->piVars['sender_name']))) . '?=';
	
	$header = "From:" . htmlspecialchars($this->piVars['sender_mail']) . "\nContent-Type:text/plain; charset=utf-8\nContent-Transfer-Encoding: 8bit\n";
	
	@mail('//Deine Mail-Adresse hier//', $subject, $this->piVars['message'], $header);
	
	$message = 'Ihre Nachricht wurde erfolgreich versandt. Danke! Wir werden uns schnellstmöglich mit Ihnen in Verbindung setzen.';
	$class = 'message';
}

Unser Kontaktforumlar funktioniert jetzt im Grunde schon. Nur fehlen noch ein paar Kleinigkeiten, zum Beispiel das Design. Aber darum kümmern wir uns im nächsten Teil der Artikelserie.

Formulare, Parameter und Eingaben - Typo3: Extension selbst erstellen, 4.7 out of 5 based on 6 ratings

Nächster Artikel der Serie

Dieser Artikel ist Teil der Artikelserie »Typo3: Extension selbst erstellen«.

Hier geht es zum nächsten Artikel der Serie: Templates, CSS und TypoScript - Typo3: Extension selbst erstellen

Jetzt seid ihr dran!

Teilt eure Meinung mit uns in den Kommentaren, gebt eine Bewertung für diesen Artikel ab und teilt ihn in Social Networks!

Über

Ich bin ein junger Webdesigner und Programmierer aus Siegen und blogge auf Advitum.de über meine Erfahrungen im Web. Meine Themenschwerpunkte liegen im Bereich der Web-Entwicklung mit PHP, JavaScript, HTML und anderen Script-, Programmier- und Markup-Sprachen, der Nutzung von Content Management System wie Typo3, Wordpress etc. und der Effekt-Hascherei mit Photoshop. Seit 2008 blogge ich auf Advitum.de – mal mehr, mal weniger regelmäßig – über alles, was mich so interessiert. Wenn dir mein Blog gefällt, freue ich mich immer sehr über Feedback in Form von Kommentaren und E-Mails.

Kommentare zu diese Artikel

Schreibe jetzt einen Kommentar!

Bob schrieb am Antworten

Ich bekomme irgendwie immer einen fatal error rausgeworfen:
Fatal error: Call to undefined method tx_bbcontact_pi1::wrapMessage()

Ich habe keine Ahnung woran es liegen könnte. Habe dann auch mal den ganzen Code einfach so kopiert.

Wäre um jeden vorschlag dankbar 🙂

    Lars Ebert schrieb am Antworten

    Überprüfe mal, ob du in der Datei pi1/class.tx_bbcontact_pi1.php innerhalb der Klassendefinition die Funktion wrapMessage() definiert hast.

    [php]function wrapMessage($message, $prefix, $suffix) {
    if(trim($message) != “) {
    return $prefix . $message . $suffix;
    }
    else {
    return “;
    }
    }[/php]

JG schrieb am Antworten

Hi,

ich bin neu bei Typo3 und habe mich komplett an die Anleitung gehalten, leider taucht bei mir immer (egal ob ich die Extension per Kickstarter oder Extension Bilder erstelle) der Fehler „No TypoScript template found!“ auf, sobald ich versuche die Seite anzuzeigen. Was mache ich falsch?

Ich komme seit 3 Tagen nicht weiter und wäre für einen hilfreichen Tip sehr dankbar 🙂

Mfg

    Lars Ebert schrieb am Antworten

    Funktioniert die Seite denn ohne die Extension? Das klingt nämlich für mich, als sei das Design der Seite schon nicht richtig konfiguriert. Hast du mal einen Screenshot von der Fehlermeldung?

      JG schrieb am Antworten

      Hi,

      bei der Fehlermeldung handelt es sich um die Standard Typo3 Fehlermeldung wenn ich kein Template hinterlegt habe. Ich weiss mittlerweile zwar wie man mit TypoScript Templates erstellt/einbindet, aber wie binde ich dann im TypoScript eine Extension ein? Auch wenn ich eine Template mit „page=Page, page.10 = TEXT, page.10.value=Test“ erstelle und dann meine Extension als Content angebe passiert nichts.

      Mfg

        JG schrieb am Antworten

        Hi,

        habe es selbst rausgefunden: page.10 < plugin.tx_lecontactform_pi1 🙂 Trotzdem vielen Dank für die Hilfe und die sehr coolen Tutorials!

        Mfg

Philipp schrieb am Antworten

Hallo,

erstmals danke für die Anleitung ist sehr interessant und hilft einen ein Wenig weiter sich mit dem erstellen von Typo3extensions auszukennen.

Ich habe das tut von Ihnen nachgestellt und es wird auch alles sauber dargestellt aber,
1. Wenn ich ein feld nicht ausfülle kommt bei mir nicht die Fehlermeldung die Wir geschrieben haben sondern und polldown fenster was mir anzeig ‚Pleas fill out the field‘.
2. Absenden funktionrt nicht (ich habe meine Email eingetragen als empfänge)…..

😉 danke schon im voruas…
lg philipp

    Lars Ebert schrieb am Antworten

    Hallo Philipp,

    Zu 1. würde ich spontan vermuten, dass hier der Browser schon vorab eine Validation durchführt (http://diveintohtml5.info/forms.html#validation).

    Das Problem mit den Mails könnte von einem falsch konfigurierten Server herrühren. Ist es denn sonst möglich, per PHP Mails zu versenden?

    Lg, Lars

      Jens schrieb am Antworten

      Hallo Lars,
      genau wie bei Philipp funktioniert es auch bei mir nicht alles. Zunächst einmal: das Formular wird bei mir korrekt angezeigt. Die Formularprüfung erfolgt bei mir durch den Browser. Nachdem ich die html5-browserprüfung durch „<form nolvalidate …" abgeschaltet habe, passiert nach dem Senden aber nichts (außer einem kurzen Blitzen in der Statusleiste).
      1. Keine Fehlermeldung bei nicht oder falsch ausgefüllten Feldern
      2. Es wird keine Email versandt – zumindest kommt sie nicht bei mir an.
      Und ja – ich habe meine korrekte Email-Adresse eingetragen
      Und ja – der Server ist korrekt konfiguriert (das Typo3-Standardformular versendet die Mails problemlos)
      Irgend eine Idee?

        Lars Ebert schrieb am Antworten

        Hallo Jens,

        gib einmal vor der Zeile
        [php]if(isset($this->piVars[’send_message‘])) {[/php]
        per
        [php]var_dump($this->piVars);[/php]
        alle Parameter aus, die an die Extension übermittelt werden. Hier müsste ein Array mit den Elementen send_message, sender_name, sender_mail und message sein. Wenn diese Werte nicht vorhanden sind, geht bei dem Absenden des Formulars etwas schief, prüfe noch einmal die Namen der Formularfelder. Wenn die Werte alle vorhanden sind, solltest du checken, ob die Variablen $message und $errors beim ausgeben des Formulars vorhanden sind, wieder mit var_dump().

          Jens schrieb am

          Hallo Lars,
          ich bin noch mal von vorn angefangen und habe nun schlicht per copy&paste deinen Code eingefügt. Einzige Änderungen:

          1) < form novalidate action …"
          2) Meine Email-Adresse eingetragen

          als Ergebnis des dumps bekomme ich:
          array(0) { }

          Gruß Jens

    Heiko schrieb am Antworten

    Hallo,

    die Fehlermeldung wird ausgegeben, wenn Du im Feld Name mal ein Leerzeichen eingibst, Email- und Nachricht-Feld korrekt ausfüllst und dann absendet.

    Wenn man die Eingabefelder einfach leer lässt, bekommt man die Fehlermeldung von HTML5 ausgegeben. „Bitte füllen Sie dieses Feld aus!“

    Das die Mails nicht versendet werden, liegt wahrscheinlich daran, dass Du die TYPO3-Installation lokal auf Deinem Rechner laufen hast.. würde die Seite auf einem Webserver liegen, würde auch das Mail versenden klappen.

    PS: Danke für das Tutorial!

    Gruß
    Heiko

LukasH schrieb am Antworten

Ich hatte das Problem, dass sich bei Abschicken des Formulars nichts tat. Nach längerem Suchen habe ich dafür die Lösung gefunden:
Der Caching-Mechanismus muss ausgeschaltet werden:
In der Funktion main folgende Zeile hinzufügen: $this->pi_USER_INT_obj = 1;
In der Klassendefinition wird die Zeile $pi_checkCHash = TRUE; auskommentiert oder gelöscht.
In der Datei ext_localconf.php muss folgende Zeile stehen:
t3lib_extMgm::addPItoST43($_EXTKEY, 'pi1/class.tx_namederextension_pi1>.php', '_pi1', 'list_type', 0);

    Jens schrieb am Antworten

    @Lars Ebert,
    Danke für das Tutorial und deine Hilfe.
    @LukasH
    Danke für deinen Hinweis. Das hat auch bei mir geholfen.

      Lars Ebert schrieb am Antworten

      @Jens & @LukasH:
      Vielen Dank für euer Feedback, ich werde das bei Gelegenheit im Artikel updaten.

Stefan schrieb am Antworten

Hi Lars, Leute,

n ganz kleinen fehler hab ich entdeckt:
Zeile 91 $class = ‚message‘;
sollte statt message wohl success stehen, dann bekommt man auch die Bestätigung das die Nachricht verschickt wurde.
Ansonsten für die die mit ihrem neueren Browser die Fehlermeldungen testen wollen, einfach mal das required=“required“ im tmpl entfernen…

Ach ja und danke, schönes tutorial 🙂

Gruß
Stefan

    Lars Ebert schrieb am Antworten

    Danke für den Hinweis, ich habe es verbessert!

Diese Artikel könnten dir auch gefallen