Zend Framework
Dag 3
Alle broncode is te vinden op :
http://www.janwillemeshuis.nl/zendframework
Jan Willem Eshuis, JWE new media solutions

Jan Willem Eshuis
30 jaar jong
gelukkig getrouwd
2 huisdieren
10 jaar ervaring in IT / internet
5 jaar eigenaar JWE.nl
programmeur, architect, ontwikkelaar, inspirator,
blogger, ondernemer
xHTML DHTML JAVASCRIPT PHP AJAX
C
XML mySQL asp DELPHI
XSL databases CSS java vbScript
C++
Jan Willem Eshuis, JWE new media solutions

Jan Willem Eshuis
+31 (0)6 2001 3300
janwillem@jwe.nl
www.jwe.nl
www.janwillemeshuis.nl
www.linkedin.com/in/janwillem
www.twitter.com/jweshuis
Jan Willem Eshuis, JWE new media solutions

Virtuele kerfstok
Jan Willem Eshuis, JWE new media solutions

Overzicht Zend Framework 4 daagse workshop
Dag 1
inleiding Zend Framework
algemene functionaliteit, views, helpers
Dag 2
databases
authenticatie en autorisatie
Dag 3
formulieren d.m.v. Zend_Forms
Dag 4
multi-language
mail, pdf, feeds
webservices en overige utilities (http client e.d.)
Jan Willem Eshuis, JWE new media solutions

Overzicht vandaag
Dag 3
Zend_Forms
Zend_Form
Zend_Form_Element
Zend_Form_Decorator
Zend_Validate
Jan Willem Eshuis, JWE new media solutions

Architectuur Zend Formulieren
Basis mogelijkheden
Formulieren
Elementen
Groepen
Sub formulieren
Plugins
filtering
validatie
decoratie
Utilities
Jan Willem Eshuis, JWE new media solutions

Elementen Zend Formulieren
button
checkbox
hidden
image
password
radio
reset
select
submit
text
textarea
Jan Willem Eshuis, JWE new media solutions

Zend_Form
Zend_Form is een container voor formulieren
Verzameling elementen en/of groepen elementen die
samen een formulier vormen
Validatie door middel van gekoppelde elementen of
groepen elementen
Vormgeving van elementen (HTML) door middel van
decorators
Jan Willem Eshuis, JWE new media solutions

Zend_Form_Element
Elk element bevat standaard mogelijkheden van
Zend_Form_Element
Meta-informatie omtrent een element
Validatie van een element
Decoratie van een element
Filtering van een element
Jan Willem Eshuis, JWE new media solutions

Zend_Form_Element - Metainformatie
Elk element heeft zogenaamde metainformatie
waaronder de volgende zaken
label (functie setLabel)
naam (functie setName)
volgorde (functie setOrder)
attributen (functie setAttribute)
Jan Willem Eshuis, JWE new media solutions

Zend_Form - Voorbeelden
// Aanmaken van een standaard formulier met een veld username
$objForm = new Zend_Form();
$objForm->addElement('text','username');
// aanmaken van een formulier element
$objElement = new Zend_Form_Element('text');
$objElement->setLabel('Gebruikersnaam');
$objElement->setName('gebruikersnaam');
$objForm->addElement($objElement);
// aanmaken van een formulier element en attributen
$objElement = new Zend_Form_Element('text');
$objElement->setLabel('Gebruikersnaam');
$objElement->setName('gebruikersnaam');
$objElement->setAttrib('id','gebruikersnaam');
$objForm->addElement($objElement);
Jan Willem Eshuis, JWE new media solutions

Zend_Form - Voorbeelden
// op basis van een Form_Element_Text element
$objElement = new Zend_Form_Element_Text('username');
$objElement->setLabel('Username');
$objForm->addElement($objElement);
// submit knop toevoegen aan formulier
$objElement = new Zend_Form_Element_Submit('button');
$objElement->setLabel('Verzenden');
$objForm->addElement($objElement);
Jan Willem Eshuis, JWE new media solutions

Zend_Form - Selectbox
// voorbeeld selectbox implementatie
$objElement = new Zend_Form_Element_Select('provincie');
$aOptions = array(
'GLD' => 'Gelderland',
'NB' => 'Noord - Brabant'
);
$objElement->setMultiOptions( $aOptions );
$objElement->setLabel('Provincie');
$objForm->addElement($objElement);
Jan Willem Eshuis, JWE new media solutions

Zend_Form - Selectbox
// voorbeeld selectbox implementatie
$objElement = new Zend_Form_Element_Select('provincie');
$aOptions = array(
'GLD' => 'Gelderland',
'NB' => 'Noord - Brabant'
);
$objElement->setMultiOptions( $aOptions );
$objElement->setLabel('Provincie');
$objForm->addElement($objElement);
Jan Willem Eshuis, JWE new media solutions

Zend_Form - Radio button
// voorbeeld radio implementatie
$objElement = new Zend_Form_Element_Radio('geslacht');
$aOptions = array(
'M' => 'Man',
'V' => 'Vrouw'
);
$objElement->setMultiOptions( $aOptions );
Jan Willem Eshuis, JWE new media solutions

Zend_Form_Element - standaard elementen
Zend_Form_Element_Captcha
Zend_Form_Element_Checkbox
Zend_Form_Element_File
Zend_Form_Element_Hidden
Zend_Form_Element_MultiCheckbox
Zend_Form_Element_Multiselect
Zend_Form_Element_Password
Zend_Form_Element_Radio
Zend_Form_Element_Reset
Zend_Form_Element_Select
Zend_Form_Element_Submit
Zend_Form_Element_Text
Zend_Form_Element_Textarea
Jan Willem Eshuis, JWE new media solutions

Formulier in aparte class
Ontwikkel je formulier altijd in een aparte class
die erft van Zend_Form
<?php
class DemoForm extends Zend_Form {
public function __construct($options = null) {
parent::__construct ( $options );
// username veld toevoegen
$objElement = new Zend_Form_Element_Text('username');
$objElement->setLabel('Username');
$objElement->addFilter('StringToLower');
}
}
Jan Willem Eshuis, JWE new media solutions

Zend_Form - In de praktijk
// gebruik zonder afvangen van invoer in je controller
$oForm = new Erasmusform( array ('action'=>'/demo/index') );
$this->view->formulier = $oForm;
Jan Willem Eshuis, JWE new media solutions

Opdracht 1
Maak een formulier voor het invoeren van contactpersonen.
- voornaam, tussenvoegsel en achternaam
- straat, huisnummer, huisnummer toevoeging
- postcode, plaats, provincie, geslacht
- telefoonnummer, emailadres
Zorg dat de provincie kan worden gekozen uit een eenvoudige
lijst(selectbox).
Zorg dat het geslacht door middel van een radio button te
kiezen is.
Jan Willem Eshuis, JWE new media solutions

Zend_Form - Afvangen van invoer
$oForm = new Erasmusform( array ('action'=>'/demo/index') );
$oRequest = $this->getRequest();
// is er een post actie uitgevoerd
if ($oRequest->isPost()) {
$oForm->populate( $oRequest->getPost() );
$aFormData = $oForm->getValues();
print_r($aFormData);
}
Jan Willem Eshuis, JWE new media solutions

Directory structuur
Onderstaand een voorbeeld van een mogelijke directory
structuur zoals je deze zou kunnen gebruiken voor de
implementatie van je formulieren.
Jan Willem Eshuis, JWE new media solutions

Filter versus Validatie
Een filter past ingevoerde waarden aan
Een validator voert een controle uit
invoer
filter (past invoer aan)
veldwaarde (aangepast)
validatie (controle van
Jan Willem Eshuis, JWE new media solutions

Zend_Form_Element - Filtering
Door middel van Zend_Filter
Mogelijkheden voor toepassen van meerdere
filters (bijvoorbeeld StringTrim en StringToLower)
Mogelijkheden voor realisatie van eigen filters
Filters zijn geen validatie
Bij meerdere filters werken deze op basis van de
volgorde waarin ze zijn toegevoegd
Jan Willem Eshuis, JWE new media solutions

Zend_Filter - Standaard filters
Zend_Filter_Alnum
Zend_Filter_Alpha
Zend_Filter_BaseName
Zend_Filter_Digits
Zend_Filter_HtmlEntities
Zend_Filter_StringToLower
Zend_Filter_StringToUpper
Zend_Filter_StringTrim
Jan Willem Eshuis, JWE new media solutions

Zend_Filter - Voorbeelden
// filter op cijfers en letters
$objFilter = new Zend_Filter_Alnum(false);
$objElement->addFilter($objFilter);
// zorgt dat ingevoerde string lowercase wordt
$objFilter = new Zend_Filter_StringToLower();
$objElement->addFilter($objFilter);
// zorgt dat alle (html) tags worden gestript
$objFilter = new Zend_Filter_StripTags();
$objElement->addFilter($objFilter);
LET OP: Filters werken in de volgorde waarin ze zijn toegevoegd
Jan Willem Eshuis, JWE new media solutions

Eigen filter maken
Object erft van Zend_Filter
Altijd minimaal de functie filter($value)
implementeren die de daadwerkelijke filtering
uitvoert.
Jan Willem Eshuis, JWE new media solutions

Zend_Filter - Eigen filter maken
We maken een eigen filter die aan alle ingevoerde waarden de
tekst ‘-jwe’ gaat toevoegen
<?php
require_once ('Zend/Filter/Interface.php');
require_once ('Zend/Filter.php');
class Core_Filter_Demo extends Zend_Filter {
public function filter($value) {
return $value . '-jwe';
}
}
Jan Willem Eshuis, JWE new media solutions

Zend_Filter - Aanroepen eigen filter
Onderstaande code gebruiken we binnen onze Form class.
// username veld toevoegen
$objElement = new Zend_Form_Element_Text('username');
$objElement->addPrefixPath('Core_Filter_','Core/Filter',
'filter');
$objElement->setLabel('Username');
$objElement->addFilter('Demo');
Er zal een filter(class) worden gezocht in het bestand met de
naam Core/Filter/Demo.php
In deze file zal een class aanwezig zijn met als naam
Core_Filter_Demo
Jan Willem Eshuis, JWE new media solutions

Opdracht 2
Pas de volgende filters toe op de verschillende formulier
velden.
- filter de invoer van de volgende velden op alleen letters
- voornaam, achternaam, straat
- filter de invoer van het veld plaats en zorg dat de
ingevoerde waarden wordt omgezet in hoofdletters
- pas een filter toe op het veld telefoonnummer zodat deze
automatisch worden gefilterd op cijfers
Jan Willem Eshuis, JWE new media solutions

Zend_Form_Element - Validatie
Voert een controle uit op de invoer in een
Form_Element
Voor controle worden de filters toegepast!
Controle resulteert in een boolean waarde dus
een true of false
Standaard validators aanwezig in
Zend_Framework
Mogelijkheden voor maken van eigen validators
Jan Willem Eshuis, JWE new media solutions

Zend_Validate - Standaard validaties
AlNum
Alpha
Between
Date
Digits
EmailAddress
GreaterThan
Hostname
LessThan
Ip
NotEmpty
Regex
Jan Willem Eshuis, JWE new media solutions

Zend_Validate - Code
// sta alleen getallen toe
$objValidate = new Zend_Validate_Digits();
$objElement->addValidator($objValidate);
$this->addElement($objElement);
// sta alleen een geldig email adres toe
$objValidate = new
Zend_Validate_EmailAddress(Zend_Validate_Hostname::ALLOW_ALL, true);
$objElement->addValidator($objValidate);
$this->addElement($objElement);
Jan Willem Eshuis, JWE new media solutions

Zend_Validate - Controle lege waarden
$oElement = new Zend_Form_Element_Password('password');
// required en allowempty zorgen voor controle op lege waarden
$oElement->isRequired(true);
$oElement->setAllowEmpty(false);
$oElement->setLabel('Wachtwoord');
$oValidator = new Zend_Validate_StringLength(8,8);
$oElement->addValidator($oValidator);
$this->addElement($oElement);
Jan Willem Eshuis, JWE new media solutions

Zend_Form - Validatie uitvoeren
$oForm = new Erasmusform( array ('action'=>'/demo/index') );
$oRequest = $this->getRequest();
// is er een post actie uitgevoerd
if ($oRequest->isPost()) {
$aFormData = $oForm->getValues();
if ($oForm->isValid($aFormData) ) {
echo 'Formulier is correct';
} else {
echo 'Formulier is niet correct';
}
print_r($aFormData);
}
Jan Willem Eshuis, JWE new media solutions

Zend_Validate - Eigen foutmeldingen
// controleer de lengte van een string
$objValidate = new Zend_Validate_StringLength(10,15);
$objValidate->setMessages( array (
Zend_Validate_StringLength::TOO_LONG => 'Tekst is te lang',
Zend_Validate_StringLength::TOO_SHORT => 'Tekst is te kort',
));
$objElement->addValidator($objValidate);
$this->addElement($objElement);
// ook toegestaan is onderstaande regel
Zend_Validate_StringLength::TOO_LONG => 'Tekst (%value%) is te lang',
Jan Willem Eshuis, JWE new media solutions

Zend_Validate - Reguliere expressie
// username met een validator op basis van Reguliere Expressie
$objElement = new Zend_Form_Element_Text('username');
$sPattern = '/^[a-zA-Z]+$/';
$objValidator = new Zend_Validate_Regex($sPattern);
$objValidator->setMessage('Niet juist ingevoerd');
$objElement->addValidator($objValidator);
$objElement->setLabel('Username');
$this->addElement($objElement);
Informatie over reguliere expressies is te vinden op de volgende adressen: http://
www.willempen.org/reguliere-expressies/ en http://www.baarr.nl/2006/04/07/reguliere-expressies/
Testen van reguliere expressie kan op http://www.quanetic.com/regex.php
Jan Willem Eshuis, JWE new media solutions

Zend_Validate - Eigen validatie
<?php
require_once ('Zend/Validate/Abstract.php');
class Core_Validate_Demo extends Zend_Validate_Abstract {
const NOT_JWE = 'notjwe';
protected $_messageTemplates = array(
self::NOT_JWE => \"'%value%' bevat niet de string 'jwe''\"
);
// Kijkt of op positie 5 de tekst jwe voorkomt (als 1e keer)
public function isValid($value) {
$this->_setValue($value);
if (strpos($value,'jwe')!=5) {
$this->_error();
return false;
}
return true;
}
}
Jan Willem Eshuis, JWE new media solutions

Zend_Validate - Aanroepen eigen validatie
Onderstaande code gebruiken we binnen onze Form class.
// username veld toevoegen
$objElement = new Zend_Form_Element_Text('username');
$objElement->addPrefixPath('Core_Validate_','Core/Validate',
'validate');
$objElement->setLabel('Username');
$objElement->addValidator('Demo');
$this->addElement($objElement);
Jan Willem Eshuis, JWE new media solutions

Zend_Form - Validatie uitvoeren
$oForm = new Erasmusform( array ('action'=>'/demo/index') );
$oRequest = $this->getRequest();
// is er een post actie uitgevoerd
if ($oRequest->isPost()) {
$aFormData = $oForm->getValues();
if ($oForm->isValid($aFormData) ) {
echo 'Formulier is correct';
} else {
echo 'Formulier is niet correct';
}
print_r($aFormData);
}
Jan Willem Eshuis, JWE new media solutions

Opdracht 3
Voeg de volgende validatie toe aan de verschillende formulier
velden.
- veld voornaam en achternaam alleen letters
- controleer de invoer van het veld email adres
Stel voor de verschillende validators eigen foutmeldingen in.
Maak een eigen validator voor het controleren op
Nederlandse postcodes (4 cijfers 2 letters).
Jan Willem Eshuis, JWE new media solutions

Zend_Form_Element_Decorators
Standaard is elk Zend_Form_Element voorzien
van decorators
ViewHelper
Errors
HtmlTag
Label
Decorators kunnen worden uitgeschakeld tijdens
de creatie van een Zend_Form_Element
Eigen decorators kunnen worden toegevoegd aan
een Zend_Form_Element
Jan Willem Eshuis, JWE new media solutions

Aanroep verwijderen decorators
// username met een DIV om het input element
$objElement = new Zend_Form_Element_Text('username',
array('disableLoadDefaultDecorators' => true) );
$objElement->setLabel('Username');
$objElement->addDecorator('ViewHelper');
$objElement->addDecorator('HtmlTag', array('tag' => 'div') );
$objElement->addDecorator('Label');
$this->addElement($objElement);
Jan Willem Eshuis, JWE new media solutions

Zend_Decorator - Eigen decorator
Erft van de class Zend_Decorator_Abstract
Minimaal de functie render() implementeren
Zelf implementeren van alle extra functionaliteit
zoals bijvoorbeeld weergave van Errors en andere
zaken
Jan Willem Eshuis, JWE new media solutions

Eigen decorator (minimale implementatie)
<?php
require_once ('Zend/Form/Decorator/Abstract.php');
class Core_Decorator_Demo extends Zend_Form_Decorator_Abstract{
public function render($content)
{
$element = $this->getElement();
$output = '<div class=\"form element\">'
. '<label>'. $element->getLabel() .' </label>'
. '<input name=\"'. $element->getName() .'\"'
. ' value=\"' . $element->getValue() .'\" /></label>'
. '</div>';
return $output . $content;
}
}
Jan Willem Eshuis, JWE new media solutions

Aanroep van eigen decorator
// username met een eigen decorator
$objElement = new Zend_Form_Element_Text('username');
$objElement->addPrefixPath('Core_Decorator', 'Core/
Decorator','decorator');
$objElement->clearDecorators();
$objElement->setDecorators( array('Demo') );
$objElement->setLabel('Username');
$this->addElement($objElement);
Jan Willem Eshuis, JWE new media solutions

Eigen decorator (uitgebreid)
De eigen decorator is uitgewerkt in de class
Core_Decorator_Volledig (Volledig.php)
in de map /Core/Decorator in de library.
Jan Willem Eshuis, JWE new media solutions

Zend_Form - Groeperen
Gebruikt voor het implementeren van de HTML
tag FieldSet
Eenvoudig voor het samenvoegen van velden
Altijd 3 parameters
array met namen van de velden
naam van de displaygroep
array met opties (bijvoorbeeld legenda)
Jan Willem Eshuis, JWE new media solutions

Voorbeeld gebruik in form class
$this->addDisplayGroup(
array('username','password'),
'inloggegevens',
array('legend'=>'Inloggegevens')
);
Jan Willem Eshuis, JWE new media solutions

The End
Alle broncode en sheets zijn te vinden op :
http://www.janwillemeshuis.nl/zendframework
Jan Willem Eshuis, JWE new media solutions