Tutorial SwissKnife for NOF Formular in HTML5
Tutorial vom 11.11.2013
Dieses Tutorial beschreibt lediglich die zusätzlichen Einstellungen, die ich hier für HTML5 gemacht habe.
Für den Einbau von dem SwissKnife for NOF Secure Mailer Formular mit Spamschutz guckt bitte zunächst hier.
Dank Polyfiller ist NOF 2013 in der Lage die HTML5 Attribute auch in älteren Browsern wie dem IE8 darzustellen, obwohl dieser HTML5 gar nicht unterstützt.
Hier eine Ansicht von meinem Formular. Ich habe in diesem Fall einen Layout-Bereich verwendet und diesen als Formular angehakt, dann habe ich einige Felder als Pflichtfelder markiert (Required). “required” ist auch ein HTML5 Attribut und wird von allen Browsern auch verstanden.
Wählt den jeweiligen Feldtyp bei “Typ” - das ist ganz wichtig, damit der Typ auch in HTML5 richtig interpretiert wird. Wenn Ihr also ein Textfeld aufzieht und
z.B. bei “Typ” > “Date” wählt, dann wird in HTML5 automatisch ein Datepicker angezeigt.
Um den ausgegrauten Platzhalter Text darzustellen, schreibt Ihr diesen einfach bei “Platzhalter” hin - ich habe hier “Pflichtfeld” eingetragen.
HTML5 Attribute eintragen:
Bitte lest auch diese Seite für die möglichen HTML5 Attribute der Eingabefelder (input fields). Ich zeige hier meine Einträge von diesem Formular. Nicht jeder Feldtyp unterstützt auch jedes Attribut. Tragt die zusätzlichen Attribute in die Objekt-HTML des jeweiligen Feldes ein:
> Fenster “Eingabefeld-Eigenschaften” > Button “HTML” > im Tag (“innen”)
Feld Name:
Hier wird mit dem “pattern” Attribut auf die Zeichenanzahl geprüft, also mindestens 3 und höchstens 80 Zeichen. Mit dem “title” Attribut wird ein Hinweis dazu angezeigt. “x-moz-errormessage” benötigt z.Zt. der Firefox, da noch nicht alle HTML5 Attribute unbedingt in allen Browsern unterstützt werden.
pattern=".{3,80}" title="Namen eingeben (3 bis 80 Zeichen)" x-moz-errormessage="Namen eingeben (3 bis 80 Zeichen)"
Feld Nachricht:
Hier wird mit dem “maxlenght” Attribut auf die Zeichenanzahl geprüft, es können in diesem Beispiel maximal 200 Zeichen eingetragen werden. Mit dem “title” Attribut wird ein Hinweis dazu angezeigt. “x-moz-errormessage” benötigt z.Zt. der Firefox, da noch nicht alle HTML5 Attribute unbedingt in allen Browsern unterstützt werden.
maxlength="200" title="maximal 200 Zeichen eingeben" x-moz-errormessage="maximal 200 Zeichen eingeben"
Felder Datum:
Hier habe ich die HTML5 Attribute “min” und “max” verwendet. HTML5 interpretiert ein Datum in diesem Format:
- YYYY-mm-dd
man könnte nun also das HTML5 Attribut “min” oder “max” für ein Datum so anwenden:
- min=”2013-10-28”
- max=”2013-11-28”
somit würden nur Tage zwischen dem 28.10.2013 und dem 28.11.2013 wählbar werden.
Nun wollte ich das hier natürlich automatisieren und auf das Tagesdatum abfragen. Des Weiteren wollte ich die Datum-Auswahl auf eine Zeitspanne von
14 Tagen limitieren. Dazu habe ich das Tagesdatum über den PHP “Date” Befehl zuzüglich 14 Tagen in eine Variable $maxzeit errechnet.
<?php $maxzeit = mktime(0,0,0,date("m"),date("d")+14,date("Y")); ?>
Dann habe ich mich des PHP-Echo Befehls bedient und damit das Tagesdatum (min) sowie das oben errechnete Tagesdatum + 14 Tage (max) hingeschrieben.
min="<?php echo date('Y-m-d'); ?>" max="<?php echo date('Y-m-d', $maxzeit); ?>"
Prüfung der Datums-Eingabe mittels der SwissKnife for NOF in der Datei
- check_token.php
Nun wollte ich noch erreichen, dass das Startdatum (Buchung von:) nicht größer als das Enddatum (Buchung bis:) sein kann. Daher habe ich das Skript von SwissKnife for NOF ein wenig erweitert. Meine Erweiterung, hier auf meine Feldnamen “Buchung-Von” und “Buchung-Bis”, habe ich hier blau markiert:
<?php
/*
* check_token.php
*
* Ist der Token vorhanden?
* Stimmt der TimeStamp mit dem Wert nach der md5()-Decodierung überein?
* Ist zuviel Zeit vergangen?
*
* (c) 2012 SwissKnife for NOF by SME
*/
// Beginn EDIT Tommy zur Überprüfung der Datums-Felder
$BeginnTag = $_POST['Buchung-Von']; // Feldnamen auf Euren Feldnamen dieses Datumsfeldes anpassen
$EndeTag = $_POST['Buchung-Bis']; // Feldnamen auf Euren Feldnamen dieses Datumsfeldes anpassen
if ($BeginnTag > $EndeTag)
{
echo '<script type="text/javascript">window.alert("Buchungsdatum ist falsch. Das Enddatum ist kleiner als das Startdatum");</script>';
echo '<script type="text/javascript">window.location = "./kontakt.php"</script>';
exit();
}
// Ende EDIT Tommy zur Überprüfung der Datums-Felder
$skn_proceed = false; // Default ist Spam, bis die Gültigkeit bewiesen ist
$skn_seconds = 60*5; // 300 Sec Timeout während der das aktuelle Formular gültig ist
if (isset($_POST['skn_ts']) && isset($_COOKIE['token']) && ($_COOKIE['token'] == md5('secret SwissKnife'.$_POST['skn_ts'])) && (time()-intval($_POST['skn_ts']) < $skn_seconds))
{
$skn_proceed = true;
}
if (!$skn_proceed)
{
echo '<script type="text/javascript">window.alert("Nachricht wird wegen Timeout oder Fehlern nicht gesendet");</script>';
echo '<script type="text/javascript">window.location = "./kontakt.php"</script>';
exit();
}
?>
Bemerkung zum Zeichensatz:
Solltet Ihr Euer Projekt in dem Zeichensatz UTF-8 publizieren wollen (so wie ich hier), dann müsst Ihr Folgendes beachten, damit auch Umlaute und Sonderzeichen mit der Mail gesendet werden können.
Sämtliche Skripte von SwissKnife for NOF müssen weiterhin im ANSI-Format verbleiben, da dort mittels der Hashfunktion Message-Digest Algorithm 5 (MD5) verschlüsselt wird.
Ich habe dieses Projekt deswegen auf den Zeichensatz UTF-8 umgestellt, da sonst nicht in allen Browsern auch die HTML5 Fehlermeldungen korrekt dargestellt würden (Umlaute und Sonderzeichen können nicht immer dargestellt werden). HTML5 erwartet in vielen Browsern den Zeichensatz UTF-8.
Deswegen habe ich hier andere Mail-Funktionen in mein Skript eingebaut, die es erlauben die Mail auch in UTF-8 zu senden. Falls Ihr das tun wollt, kann ich keine Garantie dafür übernehmen, dass das auch weltweit funktioniert.
Ich habe im Skript
- skn_mail.php
von SwissKnife for NOF diese Mail-Funktionen im Zeichensatz “ISO-8859-1” entfernt:
// Send it SMTP on localhost
$header = "\r\nMime-Version: 1.0\r\nContent-Type: text/plain; charset=iso-8859-1\r\nContent-Transfer-Encoding: 8bit\r\n";
mail($mailadr_admin, $subject_admin, $message_admin,"From: ".$mailadr_customer.$header);
// Mail to Customer
mail($mailadr_customer, $subject_customer, $message_customer, "From: ".$mailadr_admin.$header);
/* Falls Meldung an einen 2. Administrator: Nächste Zeile aktivieren */
//mail($mailadr_admin1, $subject_admin, $message_admin, "From: ".$mailadr_customer.$header);
und mit meinen eigenen Mail-Funktionen im Zeichensatz “UTF-8” ersetzt (ersetzt den Betreff-Text noch mit Eurem Text - ohne Umlaute):
// Mail an Admin
$subject_admin = mb_encode_mimeheader("Mail von meinem SwissKnife HTML5-Formular", "UTF-8", "Q");
$kopfzeile = "MIME-Version: 1.0;\nFrom: " . mb_encode_mimeheader($mailadr_customer, "UTF-8", "Q") ."\nContent-Type: text/plain; Charset=UTF-8;\n";
mail($mailadr_admin, $subject_admin, $message_admin,$kopfzeile);
// Falls Meldung an einen 2. Administrator: Nächste Zeile aktivieren
// mail($mailadr_admin1, $subject_admin, $message_admin,$kopfzeile);
// Mail Kopie an Kunden
mb_internal_encoding("UTF-8");
$Betreff = mb_encode_mimeheader($subject_customer, "UTF-8", "Q");
$kopfzeile = "MIME-Version: 1.0;\nFrom: " . mb_encode_mimeheader($mailadr_admin, "UTF-8", "Q") ."\nContent-Type: text/plain; Charset=UTF-8;\n";
mail($mailadr_customer, $Betreff, $message_customer, $kopfzeile);
Viel Erfolg!
