jFormer
on Aug 16 in PHP by abiHeute möchte ich jFormer vorstellen. Ein PHP/jQuery-Framework um einfach Formulare zu erstellen und zu verarbeiten. Das Framework erhält man unter http://www.jformer.com/ und zusätzlich benötigt man noch ein lokales jQuery.
Unter Windows gibt es im Moment noch einen Bug, so dass man das Framework derzeit nur unter Linux/ OS X einsetzen kann.
Grundgerüst
Als Basis benötigen wir eine PHP-Datei mit folgenden Angaben.
<html>
<head>
<link rel="stylesheet" type="text/css" href="jformer.css" href="jformer.css" ></link>
<script src="jquery-1.5.1.min.js"><script>
<script type="text/javascript" src="jformer.js" ><script>
</head>
<body>
<?php
require_once('jformer.php');
// ... code ...
?>
</body>
</html>
Hello $name
Als erstes versuchen wir uns in einer Abwandlung des Hello-World. Anstatt Hello World auszugeben, erstellen wir ein Formular mit einem Eingabefeld und lassen uns den Text Hello, gefolgt von dem Inhalt des Textfeldes ausgeben.
// Create a form
$form = new JFormer('example1');
// Create a form page
$page = new JFormPage($form->id.'Page');
// Create a form section
$section = new JFormSection($form->id.'Section');
// Create a textfield
$nameField = new JFormComponentSingleLineText('username','Name:');
// add the textfield to the section
$section->addJFormComponentArray(array($nameField));
// add the section to the page
$page->addJFormSection($section);
// add the page to the form
$form->addJFormPage($page);
// Set the function for a successful form submission
function onSubmit($formValues) {
$formValues = $formValues->example1Page->example1Section;
$username = $formValues->username;
$message['successPageHtml'] = '<p style="margin-bottom: .5em;">Hello '.$username.'</p>';
return $message;
}
// Process any request to the form
$form->processRequest();
Pflichtfeld $name
Um aus dem Feld ein Pflichtfeld zu machen, muss man bei der Erstellung des Feldes nur ein Konfigurationsarry mit übergeben.
// Create a textfield
$nameField = new JFormComponentSingleLineText('username','Name:', array(
'validationOptions' => array('required')));
[/ph]
Das Framework kümmert sich dann selbst darum, daß schon auf dem Client die Eingabe geprüft wird und das typische *, sowie eine Fehlermeldung generiert wird.
<a href="http://www.billmann.de/tutorials/003/example2.php" title="Beispiel 2" target="_blank">Beispiel 2</a>
<h3>Standard-Formularelemente</h3>
In dem nachfolgenden Beispiel zeige ich die in Formularen üblichen Standardelemente, wie Textfeld, Drop-Down, Textarea, Checkboxen oder Radiobuttons. Da die Methode addJComponentArray des Objektes JFormSection ein array mit den Formularfeldern erwartet, spare ich mir den Umweg, die einzelnen Felder einzeln zu instanziieren, einer Variablen zuzuweisen um dann die Variable in das Array zu packen.
1
// add the fields to the section
$section->addJFormComponentArray(
array(
// textfield
new JFormComponentSingleLineText('username','Name:'),
// textarea
new JFormComponentTextArea('message', 'Nachricht'),
// checkboxes
new JFormComponentMultipleChoice('checkboxes','Auswahl', array(
array('value' => '1', 'label' => 'Klick mich 1'),
array('value' => '2', 'label' => 'Klick Mich 2')
)),
new JFormComponentMultipleChoice('radioboxes','Auswahl', array(
array('value' => '1', 'label' => 'Klick mich 1'),
array('value' => '2', 'label' => 'Klick Mich 2')
), array(
'multipleChoiceType' => 'radio'
)),
// select
new JFormComponentDropDown('selection', 'Auswahl', array(
array('value' => '1', 'label' => 'Nimm mich'),
array('value' => '2', 'label' => 'Oder nimm mich')
))
)
);
Bei der Auswertung ist zu beachten, dass es sich bei den Checkboxes um ein Array mit den Werten handelt, die ausgewählt wurden.
// Set the function for a successful form submission
function onSubmit($formValues) {
$formValues = $formValues->example3Page->example3Section;
$username = $formValues->username;
$nachricht = $formValues->message;
// checkboxes always return an array
$selectedCheckboxes = $formValues ->checkboxes;
$selectedRadio = $formValues->radioboxes;
$selectedSelect = $formValues->selection;
$message['successPageHtml'] = '<p>Hello '.$username.'</p>'
.'<p>Nachricht: '.$nachricht.'</p>';
if (is_array($selectedCheckboxes)) {
foreach($selectedCheckboxes as $checkbox) {
$message['successPageHtml'] = $message['successPageHtml'].'<p">Checkbox-Wert: '.$checkbox.'</p>';
}
}
$message['successPageHtml'] = $message['successPageHtml'].'<p>Radio-Wert '.$selectedRadio.'</p>'
.'<p">Select-Wert: '.$selectedSelect.'</p>';
return $message;
}
Spezielle Formularfelder
jFormer unterstützt den Entwickler von Webanwendungen mit vorgefertigten Formularfelder/ -blöcke. Dies erleichtert und beschleunigt die Entwicklung von typischen interaktiven Formularen, wie Kontaktanfragen, Bezahlung mit Kreditkarte …
Nachfolgend zeige ich verschiedene Spezialfälle, welche schon von jFormer unterstützt werden.
// add the fields to the section
$section->addJFormComponentArray(
array(
new JFormComponentName('name', 'Name:', array(
'validationOptions' => array('required'),
'middleInitialHidden' => true
)),
new JFormComponentAddress('adresse', 'Adresse'),
new JFormComponentCreditCard('kredit', 'Kreditkarte', array(
'validationOptions' => array('required')
))
)
);
Als erstes wird eine Namenskomponente hinzugefügt. Diese besteht aus einem Textfeld für Vorname, einem für die Initalen und einem für den Nachnamen. Das Feld für die Initialen läßt sich auch über die Konfiguration, wie in dem Beispiel verstecken. In der Verarbeitung des Formulars greift man dann auf ein array zurück, welches dann die Einzelwerte enthält.
Der zweite Teil ist eine komplette internationale Adresse. Sie wird gebildet aus zwei Adresszeilen, dem Ort, die Postleitzahl, einem Staat/Bundesland und dem Land.
Als drittes wird ein Formular zur Eingabe von Kreditkarteninformationen erstellt. Leider ist die Validierung des Security Codes nicht enthalten, diesen muss man selbst erledigen.
function onSubmit($formValues) {
$formValues = $formValues->example4Page->example4Section;
$name = $formValues->name;
$adresse = $formValues->adresse;
$kreditkarte = $formValues->kredit;
$message['successPageHtml'] = '<p>Name: '.$name->firstName.' '.$name->lastName.'</p>'
.'<p>Adresse: '
.$adresse->addressLine1.' '
.$adresse->addressLine2.' '
.$adresse->zip.' '
.$adresse->city.' '
.$adresse->state.' '
.$adresse->country.' '
.'</p>'
.'<p>Kreditkarte: '
.$kreditkarte->cardType.' '
.$kreditkarte->cardNumber.' '
.$kreditkarte->expirationMonth.' '
.$kreditkarte->expirationYear.' '
.$kreditkarte->securityCode
.'</p>';
return $message;
}
Validierungen
Es gibt schon sehr viele Validierungsmechanismen, die man verwenden kann. Angefangen von Pflichtfelder, bis hin zu kompexen URL oder Emailadressen. Es sind auch Kombinationen möglich. Leider sind die Validierer derzeit noch nicht alle ausgereift (ISBN) oder nur im amerikanischen Format vorhanden (Telefon, Datum, …). Alle Validatoren lassen sich derzeit nur dem Sourcecode entnehmen.
$section->addJFormComponentArray(
array(
new JFormComponentSingleLineText('validation1', 'Pflichtfeld mit Tooltip', array('validationOptions' => array('required'), 'tip' => '<p>Ich bin ein nützlicher Tooltip</p>')),
new JFormComponentSingleLineText('validation2', 'mehrere Validierungen', array('validationOptions' => array('alpha', 'required'), 'tip' => '<p>Hier wird sowohl die Eigenschaft Pflichtfeld als auch der Wert auf Buchstaben geprüft.</p> <p>Ein Tooltip kann auch mehrzeilig sein.</p>')),
new JFormComponentSingleLineText('validation3', 'Telefon', array('validationOptions' => array('phone'))),
new JFormComponentSingleLineText('validation4', 'Email', array('validationOptions' => array('email'))),
new JFormComponentSingleLineText('validation5', 'Passwort', array('validationOptions' => array('password'), 'tip' => '<p>Kein echtes Passwortfeld, sondern ein Textfeld mit Passwortvalidierung.</p>' )),
new JFormComponentSingleLineText('validation6', 'Zahl mit einer minimalen Länge von 10', array('validationOptions' => array('integer', 'minLength' => 10))),
new JFormComponentSingleLineText('validation7', 'Datum', array('validationOptions' => array('date'))),
new JFormComponentSingleLineText('validation8', 'Url', array('validationOptions' => array('url'))),
new JFormComponentSingleLineText('validation9', 'Alphanummerisch', array('validationOptions' => array('alphaNumeric'))),
new JFormComponentSingleLineText('validation10', 'ISBN', array('validationOptions' => array('isbn'))),
new JFormComponentSingleLineText('validation11', 'Geldbetrag', array('validationOptions' => array('money')))
)
);
Fazit
Aber schon im jetzigen Zustand, kann man die ersten kleinen Anwendungen oder Formulare schreiben. Ich werde das Projekt weiter beobachten um zu sehen, ob die Kinderkrankheiten ausgemerzt werden und eventuell anfangen, kleinere Projekte damit umzusetzen. Ich kann nur jedem empfehlen sich am Projekt zu beteiligen und die Entwickler sind gegenüber Bugreports und Verbesserungen sehr aufgeschlossen. Die Dokumentation des Projektes findet sich gerade noch im Aufbau, aber es gibt schon einige Demos Online zu sehen. Interessant ist auch, daß jFormer “Wizards” unterstützt. Also Formulare über mehrere “Seiten” hinweg. Hierzu ist eine Umfragedemo auf deren Seite zu bewundern.
Follow Me
There are no comments yet, add one below.