Colorscheme

Webdesign Guide – Modul: Kontaktformular und Dankesseite

Nun kann sich der User registrieren und einloggen, doch bevor er mit seinem Account wirklich etwas anfangen kann und unsere Webanwendung einen Nutzen bekommt, ermöglichen wir ihm noch schnell uns per Kontaktformular Nachrichten, Hinweise und Fehlermeldungen zukommen zu lassen.

Doch vorerst noch eine kleine Korrektur an der Datei “.htaccess”:
Aus
RewriteRule ^([0-9a-zA-Z]+)$ index.php?action=$1

wird
RewriteRule ^([0-9a-zA-Z_]+)$ index.php?action=$1

Bislang haben wir nur Zahlen und klein/groß-Buchstaben als regulären Ausdruck erlaubt, nun kommt noch der Unterstrich hinzu, so können wir ab jetzt auch Strings in folgendem Format auswerten:

  • dies_ist_ein_string
  • _string_
  • eine_datei

Ein Kontaktformular mittels Smarty und PEAR zu erstellen ist recht einfach, wenn man sich schon die vorigen Kapitel angeschaut hat. Wie immer folgt erst der Code und danach die Erklärung.

Im Ordner “includes” legen wir die Datei “mail.php” an und im Smarty-Template Ordner die Datei “contact_mail.tpl“.

/* START – Quellcode mail.php */

<?php

require_once 'HTML/QuickForm.php';
require_once 'HTML/QuickForm/Renderer/ArraySmarty.php';
require_once 'smarty/libs/Smarty.class.php';
require_once 'includes/config.php';

function process_data($values) {

	require_once 'Mail/Mail.php';

	//die ziel-email-adresse läßt sich in der config-datei ändern
	$recipients = EMAIL_CONTACT;

	$headers['From']    = $values[email];
	$headers['To']      = $recipients;
	$headers['Subject'] = $values[mailTitle];

	$body = $values[message];

	$mail_object =& Mail::factory('mail');

	$mail_object->send($recipients, $headers, $body);

	header("Location: index.php?action=thanks&thx_value=mail");
}

$mailForm = new HTML_QuickForm('mailForm', 'post', 'index.php?action=contact_mail');

$mailForm->applyFilter('__ALL__','trim');

$mailForm->addElement('text', 'name', 'Name', array('size' => 50));
$mailForm->addElement('text', 'email', 'Email', array('size' => 50));
$mailForm->addElement('text', 'mailTitle', 'Titel der Nachricht', array('size' => 50));
$mailForm->addElement('textarea', 'message', 'Ihre Nachricht', array('cols' => 37, 'rows' => 15));

$mailForm->addElement('submit', btn_send_mail, 'Nachricht senden');

$mailForm->addRule('name', 'Bitte einen Namen eingeben', 'required');
$mailForm->addRule('email', 'Bitte gib deine Emailadresse ein', 'required');
$mailForm->addRule('mailTitle', 'Du hast den Titel vergessen', 'required');
$mailForm->addRule('message', 'Die Nachricht darf nicht leer sein', 'required');

$mailForm->addRule('name', 'min 3 Zeichen', 'minlength', 3);
$mailForm->addRule('name', 'max 40 Zeichen', 'maxlength', 40);
$mailForm->addRule('mailTitle', 'min 5 Zeichen', 'minlength', 5);
$mailForm->addRule('mailTitle', 'max 250 Zeichen', 'maxlength', 250);
$mailForm->addRule('message', 'min 20 Zeichen', 'minlength', 20);
$mailForm->addRule('message', 'max 10000 Zeichen', 'maxlength', 10000);

$mailForm->addRule('email', 'die Struktur der Email ist ungültig', 'email');

if ($mailForm->validate())
$mailForm->process('process_data', false);

$mailFormRenderer =& new HTML_QuickForm_Renderer_ArraySmarty($smarty);

$mailFormRenderer->setRequiredTemplate(
	'{if $error}
  <font color="red">{$label}</font>
  {else}
	  {if $required}
		  <font color="red" size="3">*</font>
		{/if}
		{$label}
	{/if}'
);

$mailFormRenderer->setErrorTemplate(
	'{if $error}
  	<font color="orange" size="1">{$error}</font><br />
  {/if}
  {$html}'
);

$mailForm->setRequiredNote(
	'<font color="red" size="2">
	  *&nbsp;
	</font>
	<font color="blue" size="2">
		Diese Felder werden benötigt
	</font>');

// build the HTML for the form
$mailForm->accept($mailFormRenderer);

// assign array with form data
$smarty->assign('mailForm_data', $mailFormRenderer->toArray());
$smarty->assign('mailForm_header_label', 'Kontaktformular');

?>

/* ENDE – Quellcode mail.php */

mail.php – Codeerklärung
Ich verzichte darauf den Code zu erklären der dafür zuständig ist das Formular mittels Pear zu erzeugen und die Werte an Smarty zu schicken und stürze mich direkt auf die Funktion “process_data“:

function process_data($values) {

	require_once 'Mail/Mail.php';

	//die ziel-email-adresse läßt sich in der config-datei ändern
	$recipients = EMAIL_CONTACT;

	$headers['From']    = $values[email];
	$headers['To']      = $recipients;
	$headers['Subject'] = $values[mailTitle];

	$body = $values[message];

	$mail_object =& Mail::factory('mail');

	$mail_object->send($recipients, $headers, $body);

	header("Location: index.php?action=thanks&thx_value=mail");
}

In der Process_data Funktion wird nach Abschicken des Kontakt-Formulars und nach erfolgreicher Validierung der Eingaben eine Email zusammengebastelt und an den Empfänger geschickt. Der Empfänger wird durch die Konstante “EMAIL_CONTACT” repräsentiert und kann jederzeit in der “config.php” geändert werden. Um eine Email zu verschicken benötigen wir das PEAR-Paket “Mail” welches wir schon eingebunden haben. Dann füllen wir das “headers”-array mit den Daten die wir für die Mail brauchen, das ist:

  • die Mail den Versenders ($headers['From'])
  • der Empfänger ($headers['To'])
  • und der Titel der Nachricht ($headers['Subject'])

Die Nachricht selbst wird in der Variablen “$body” gespeichert. Nun haben wir alle Daten zusammen und können uns mit der “factory”-Methode der Klasse Mail ein Nachrichten-Objekt anlegen, einmal angelegt können wir nun mittels der Methode “send” und den vorher angelegten Parametern die Nachricht an uns selbst, bzw an den Empfänger schicken. Nachdem die Nachricht verschickt wurde lassen wir den User auf die Dankesseite leiten. Die Dankesseite existiert noch nicht und erzeugt daher eine Fehlermeldung, darum kümmern wir uns nach dem Code für die Datei “contact_mail.tpl” der selbsterklärend ist (ansonsten nochmal die vorigen Kapitel durchlesen, dort stehen die Basics zu Smarty, Pear und Quickform drin).

/* START – Quellcode contact_mail.tpl */

<div id="mailForm_box">
<fieldset><legend>{$mailForm_header_label}</legend>
  <form {$mailForm_data.attributes}>
  {$mailForm_data.hidden}
    <!-- Display the fields -->
    <table>
      <tr>
        <th>{$mailForm_data.name.label}</th>
        <td class="field">{$mailForm_data.name.html}</td>
      </tr>
      <tr>
        <th>{$mailForm_data.email.label}</th>
        <td class="field">{$mailForm_data.email.html}</td>
      </tr>
      <tr>
        <th>{$mailForm_data.mailTitle.label}</th>
        <td class="field">{$mailForm_data.mailTitle.html}</td>
      </tr>
      <tr>
        <th>{$mailForm_data.message.label}</th>
        <td></td>
      </tr>
      <tr>
        <td colspan=2>{$mailForm_data.message.html}</td>
      </tr>

      <!-- Display the buttons -->
			  {if not $mailForm_data.frozen}
			  <tr>
			    <td colspan=2>{$mailForm_data.btn_send_mail.html}</td>
			  </tr>
			  {/if}
			  {if $mailForm_data.requirednote and not $mailForm_data.frozen}
			    <tr>
			      <td colspan=2 valign="top">{$mailForm_data.requirednote}</td>
			    </tr>
			  {/if}
    </table>
  </form>
</fieldset>
</div>

/* ENDE – Quellcode contact_mail.tpl */

Vergesst nicht die Konstante “EMAIL_CONTACT” in der Datei “config.php” anzupassen, denn sonst bekommt ihre die verschickte Email nicht zugesendet.

Die Dankesseite
Eine Dankesseite gibt dem User bei jedem seiner Handlungen Feedback, sei es nun die Registrierung, das Verschicken einer Email, das Aktivieren seines Accounts usw., da kann sich schon einiges mit der Zeit ansammeln. Darum legen wir jetzt für die Dankesseite eine .php-Datei im Ordner includes an mit dem Namen “thanks.php” und eine .tpl-Datei im Smarty-Template-Ordner mit Namen: “thanks.tpl”.

/* START – Quellcode thanks.php */

<?php
	require_once 'smarty/libs/Smarty.class.php';

	function output_thanks($value){
		global $smarty;

		switch($value){
			case 'password_lost':
				$smarty->assign('thanks_legend', 'Neues Passwor');
				$smarty->assign('thanks_output', 'Dir wurde eine Email mit dem neuen Passwort zugeschickt. Du musst es nur noch aktivieren.');
				break;

			case 'new_pass_activated':
				$smarty->assign('thanks_legend', 'Neues Passwort aktiviert');
				$smarty->assign('thanks_output', 'Dein neues Passwort wurde aktiviert und du kannst dich nun damit einloggen');
				break;

			case 'new_pass_not_activated':
				$smarty->assign('thanks_legend', 'Passwortaktivierung fehlgeschlagen');
				$smarty->assign('thanks_output', 'Fehler - Das neue Passwort konnte nicht aktiviert werden');
				break;

			case 'mail':
				$smarty->assign('thanks_legend', 'Nachricht verschickt');
				$smarty->assign('thanks_output', 'Danke für deine Nachricht. Ich werde mich schnellstmöglich um eine Antwort bemühen.');
				break;

			case 'reg':
				$smarty->assign('thanks_legend', 'Registrierung abschliessen');
				$smarty->assign('thanks_output', 'Danke für deine Registrierung. Du bekommst nun eine Email zugeschickt und darin befindet sich ein Link zur Aktivierung. Nach der Aktivierung kannst du direkt mit dem Sprachen lernen beginnen.');
				break;

			case 'reg_thx':
				$smarty->assign('thanks_legend', 'Registrierung abgeschlossen');
				$smarty->assign('thanks_output', 'Deine Registrierung wurde bestätigt und du kannst dich nun einloggen. Viel Spass beim Sprachen lernen!');
				break;

			case 'reg_thx_stop':
				$smarty->assign('thanks_legend', 'Es kann losgehen!');
				$smarty->assign('thanks_output', 'Du hast deinen Account schon aktiviert und kannst dich nun einloggen. Viel Spass beim Sprachen lernen!');
				break;

			default:
				break;
		}
	}

	$value = $_GET[thx_value];
	output_thanks($value);

?>

/* ENDE – Quellcode thanks.php */

thanks.php – Codeerklärung
Wieder einmal ganz einfacher Code der auch schnell erweiterbar ist: Wir holen uns den aktuellen “thx_value”, falls vorhanden, und arbeiten uns mit diesem Wert durch die Switch-Anweisung. Jenachdem welcher Wert für “thx_value” gesetzt ist, führen wir eines der “Case”-Anweisungen aus. In den Case-Anweisungen wird einfach nur Text einer Smarty-Variablen zugewiesen, keine große Magie. Der zugewiesene Wert wird dann von der Smarty-Variablen im Smarty-Template ausgespuckt, der Code des Templates ist selbsterklärend:

/* START – Quellcode thanks.tpl */

<div id="thanks_box">
<fieldset><legend>{$thanks_legend}</legend>
<p>{$thanks_output}</p>
</fieldset>
</div>

/* ENDE – Quellcode thanks.tpl */

Im nächsten Part geht es daran eine wirkliche Funktion für den User zu erstellen, mittels eines Eintragsformulars kann der User Webnotizen erstellen und diese bei jedem Login einsehen. Um das ganze etwas mehr “Web2.0″ zu machen und häßliche Seitenreloads beim erstellen und löschen der Webnotizen zu vermeiden, wird im darauffolgenden Part die Ajax-Engine mittels Prototype angeschmissen und schöne Effekte mit Scriptaculous erzeugt.

Verwandte Artikel
  1. Webdesign Guide – User-Modul: Registrieren
  2. Webdesign Guide – User-Modul: Login
  3. Webdesign Guide – Eintragsformular und Webnotizen
  4. Webdesign Guide – die Arbeitsumgebung
  5. Webdesign Guide – Awakening the biest

am Januar 10, 2007 um 12:10 Uhr | in Webdesign | 4 Kommentare

1 Trackbacks/Pingbacks
  1. Pingback: Webdesign Guide - Programmieren einer eigenen Web-Anwendung mit PHP, MySQL, Smarty, Pear, ModRewrite » Webdesignblog on Januar 10, 2007

3 Kommentare
  1. Dave, Januar 11, 2007:

    Pfui, ein FONT-Tag ;)
    Anstatt FONT color=”orange” würde ich lieber span class=”error” benutzen, welche einheitlich auf der komplettem Webseite benutzt wird.

    So muss man nur einmal das Stylesheet ändern und alle Fehlermeldungen sehen gleich aus. Das selbe gilt auch Für Warnungen und Hinweise. Außerdem besitzt man dann auch die möglichkeit nette Icons mittels Stylesheet einzubinden.

    Was mir gut gefällt ist das Fieldset beim Kontaktformular. Irgendwann mal in einem HTML Buch gelesen, aber noch nie (!) benutzt. Aber sieht sehr schick aus, allerdings könnte man sich darüber streiten ob es bei im thanks.tpl Template notwendig ist.

  2. Christian, Januar 11, 2007:

    Ja richtig, wurde von mir mal in einem Projekt mittels Copy und Paste aus dem Internet eingesetzt und seitdem nicht mehr geändert.

  3. gsd, Mai 16, 2007:

    dygfggdfdsfdf

Tut mir leid, die Kommentarfunktion für diesen Beitrag ist geschlossen.