Zend Form Tutorial

Zend_Form tutorial by Michelangelo van Dam

Who is Michelangelo van Dam ?

Freelance PHP consultant with over 7 years of enterprise level PHP development experience.

Started using Zend Framework in 2007 and contributes to this framework for Zend_Ldap.

web: http://www.in2it.be

blog: http://dragonbe.blogspot.com

e-mail: dragonbe [at] google mail

Zend_Form

Zend_Form simplifies form creation and handling in your web application. It accomplishes the following goals:

Element input filtering and validation

Element ordering

Element and Form rendering, including escaping

Element and form grouping

Element and form-level configuration

Zend_Form (continued)

It heavily leverages other Zend Framework components to accomplish its goals, including Zend_Config, Zend_Validate, Zend_Filter, Zend_Loader_PluginLoader, and optionally Zend_View.

More info can be found at http://framework.zend.com/manual/en/zend.form.html

Directory structure

application_root/

application/

config/ -> this is where you put the configuration files

userform.xml

controllers/ -> this is where you put your controllers

UserController.php

views/ -> this is where you put your view templates

user/

login.phtml, register.phtml, resetpassword.phtml

web/

index.php -> your bootstrap file

library/

Zend -> This is where you put Zend Framework

Requirements

Zend Framework 1.5 ( http://framework.zend.com )

an editor (vi) or IDE (Zend Studio Neon)

a (huge) cup of coffee

knowledge of XML or INI structures

a site already using Zend Framework MVC

Example description

We're going to build the following forms:

User registration form

User login form

Password retrieval form

userform.xml – global structure

<? xml version = "1.0" encoding = "UTF-8" ?>

< forms >

< localhost >

< user >

<register>

</register>

< login >

</login>

<resetpassword>

</resetpassword>

</user>

</localhost>

</forms>

Registration form

Full name: the user's full name

E-mail address: the user's e-mail address

Desired username: the user's username

Password: a password for the account

Password check: retype the password

userform.xml – registration form 1

< register >

< action > /app/web/register </ action >

< method > post </ method >

< name > registerForm </ name >

< elements >

< fullname >

< type > text </ type >

< options >

< label > Full name: </ label >

</options>

</fullname>

<email>

<type> text </type>

<options>

<label> E-mail address: </label>

</options>

</email>

<username>

<type> text </type>

<options>

<label> Username: </label>

</options>

</username>

<password>

<type> password </type>

<options>

<label> Password: </label>

</options>

</password>

<passwordcheck>

<options>

<label> Retype password: </label>

</options>

</passwordcheck>

...

userform.xml – registration form 2

...

<submit>

<type> submit </type>

<options>

<label> Register </label>

<class> button </class>

</options>

</submit>

</elements>

</register>

Login form

Username: the user's username

Password: a password for the account

userform.xml – login form 1

< login >

< action > /app/web/auth </ action >

< name > login Form </ name >

< elements >

<username>

<type> text </type>

<options>

<label> Username: </label>

</options>

</username>

<password>

<options>

<label> Password: </label>

</options>

</password>

< submit >

<options>

<label> Login </label>

</options>

</ submit >

</ elements >

</login>

Resetpassword form

E-mail address: the user's e-mail address

userform.xml – reset pwd form 1

< resetpassword >

< action > /app/web/resetpassword </ action >

< name > resetpwd Form </ name >

< elements >

<email>

<type> text </type>

<options>

<label> E-mail address: </label>

</options>

</email>

<submit>

<options>

<label> Reset password </label>

</options>

</submit>

</elements>

</resetpassword>

UserController - getForm

We create a method getForm

public function getForm( $myForm )

{

$config = new Zend_Config_Xml( '../app/config/forms.xml' , 'localhost' );

$form = new Zend_Form( $config ->user-> $myForm );

return $form ;

}

UserController - registerAction

We create a method registerAction

public function registerAction()

{

$this ->view->form = $this ->getForm( 'register' );

}

And we put in the view script (register.phtml):

<?php echo $this ->form; ?>

UserController - loginAction

We create a method loginAction

public function loginAction()

{

$this ->view->form = $this ->getForm( 'login' );

}

And we put in the view script (login.phtml):

UserController - resetpassworAction

We create a method resetpasswordAction

public function resetpasswordAction()

{

$this ->view->form = $this ->getForm( 'resetpassword' );

}

And we put in the view script (resetpassword.phtml):

Rendered register page

Rendered login page

Rendered reset password page

Source code of login page

< form name = "loginForm" id = "loginForm" enctype = "application/x-www-form-urlencoded" action = "/app/web/auth" method = "post" >

< dl class = "zend_form" >

< dt >< label for = "username" class = "optional" >Username:</ label ></ dt >

< dd >< input type = "text" name = "username" id = "username" value = "" ></ dd >

< dt >< label for = "password" class = "optional" >Password:</ label ></ dt >

< dd >< input type = "password" name = "password" id = "password" value = "" ></ dd >

< dt ></ dt >

< dd >< input type = "submit" name = "submit" id = "submit" value = "Login" class = "button" ></ dd >

</ dl >

</ form >

automated generation using

Zend_Form

Zend_Config_Xml

Validation and Filtering

Of course we need to validate input !

And we filter the input !

This is done easily in our configuration file

userform.xml – login enhancement

New source code of login page

< form name = "loginForm" id = "loginForm" enctype = "application/x-www-form-urlencoded" action = "/app/web/auth" method = "post" >

< dl class = "zend_form" >

< dt >< label for = "username" class = "required" >Username:</ label ></ dt >

< dd >< input type = "text" name = "username" id = "username" value = "" ></ dd >

< dt >< label for = "password" class = "required" >Password:</ label ></ dt >

< dd >< input type = "password" name = "password" id = "password" value = "" ></ dd >

< dt ></ dt >

< dd >< input type = "submit" name = "submit" id = "submit" value = "Login" class = "button" ></ dd >

</ dl >

</ form >

automated generation using

Zend_Form

Zend_Config_Xml

Validation and Filtering details

All the validation and filtering options can be found at http://framework.zend.com

Zend_Validate

Zend_Filter

Of course you can implement your own filters and validators.

More information

More information can be found at the Zend Framework website http://framework.zend.com

The example files can be downloaded at http://www.in2it.be/files/zend_form_example.zip

Thank you Questions ?

Zend Form Tutorial

7 comments

Notes on slide 1

6 Favorites