Advanced Web forms using PHP Web forms using PHP with AJAX and advanced plug-ins http://www.phpclasses.org/formsgeneration Manuel Lemos [email_address] This presentation license: Creative Commons Attribution-NoDerivs 2.5

Web forms using PHP with AJAX and advanced plug-ins

http://www.phpclasses.org/formsgeneration

Manuel Lemos

[email_address]

This presentation license: Creative Commons

Attribution-NoDerivs 2.5

Creative Commons License Deed Attribution-No Derivs 2.5 You are free: to Share -- to copy, distribute, display, and perform the work to make commercial use of the work Under the following conditions: Attribution . You must attribute the work in the manner specified by Manuel Lemos . No Derivative Works . You may not alter, transform, or build upon this work. For any reuse or distribution, you must make clear to others the license terms of this work. Any of these conditions can be waived if you get permission from Manuel Lemos . Your fair use and other rights are in no way affected by the above. This is a human-readable summary of the Legal Code (the full license) .

You are free:

to Share -- to copy, distribute, display, and perform the work

to make commercial use of the work

Under the following conditions:

Attribution . You must attribute the work in the manner specified by Manuel Lemos .

No Derivative Works . You may not alter, transform, or build upon this work.

For any reuse or distribution, you must make clear to others the license terms of this work.

Any of these conditions can be waived if you get permission from Manuel Lemos .

Your fair use and other rights are in no way affected by the above.

This is a human-readable summary of the Legal Code (the full license) .

Forms Generation and Validation class – What is it? A class of objects written in PHP Generates HTML to present Web forms Generates Javascript to validate before submitting the forms to the Web server Validate forms on the server side with the PHP code of the class itself Extensible using plug-in classes Open Source with a BSD like license Good reputation in the PHP Open Source world Over 44.000 distinct users downloaded it from the PHPClasses site Number 248 in Freshmeat popularity top

A class of objects written in PHP

Generates HTML to present Web forms

Generates Javascript to validate before submitting the forms to the Web server

Validate forms on the server side with the PHP code of the class itself

Extensible using plug-in classes

Open Source with a BSD like license

Good reputation in the PHP Open Source world

Over 44.000 distinct users downloaded it from the PHPClasses site

Number 248 in Freshmeat popularity top

Class development history 12/01/1999 : Class creation ../../1999 : Offer the class to other users in PHP mailing lists 05/06/1999 : User recommends the class a lot in the php-general list 18/06/1999 : Beginning of the PHPClasses site 24/06/1999 : Launch of the PHPClasses site 16/12/2002 : Plug-in to integrate with Smarty 03/04/2004 : Templates with simple PHP code within HTML 14/06/2004 : Special input controls using plug-in classes 29/12/2004 : Processing browser side events on the server side 25/06/2005 : Connected input trigger actions upon browser side events 14/03/2006 : Submission of forms using AJAX

12/01/1999 : Class creation

../../1999 : Offer the class to other users in PHP mailing lists

05/06/1999 : User recommends the class a lot in the php-general list

18/06/1999 : Beginning of the PHPClasses site

24/06/1999 : Launch of the PHPClasses site

16/12/2002 : Plug-in to integrate with Smarty

03/04/2004 : Templates with simple PHP code within HTML

14/06/2004 : Special input controls using plug-in classes

29/12/2004 : Processing browser side events on the server side

25/06/2005 : Connected input trigger actions upon browser side events

14/03/2006 : Submission of forms using AJAX

Plug-in release history 14/06/2004 : Date 29/12/2004 : CAPTCHA 25/06/2005 : Linked select 30/12/2005 : MySQL, Metabase, MDB2 linked select 14/03/2006 : AJAX submit 26/03/2006 : Layout vertical 24/05/2006 : Map location 21/06/2006 : Autocomplete 12/07/2006 : MySQL, Metabase, MDB2 autocomplete 28/07/2006 : Animation 20/12/2006 : Upload progress meter

14/06/2004 : Date

29/12/2004 : CAPTCHA

25/06/2005 : Linked select

30/12/2005 : MySQL, Metabase, MDB2 linked select

14/03/2006 : AJAX submit

26/03/2006 : Layout vertical

24/05/2006 : Map location

21/06/2006 : Autocomplete

12/07/2006 : MySQL, Metabase, MDB2 autocomplete

28/07/2006 : Animation

20/12/2006 : Upload progress meter

How should it be used? The script that processes the form also presents it. Yes No No Yes Create an object of the class Define the form inputs Load the submitted values, if any Show the form for the first time? Validate submitted input values All the inputs are valid? Process the form Output the form Output the form denoting invalid inputs

The script that processes the form also presents it.

Example of usage include('forms.php'); $form = new forms_class; $form->AddInput(array( 'TYPE'=>'text', 'NAME'=>'nome', 'ID'=>'nome', 'LABEL'=>'<u>N</u>ame, 'ACCESSKEY'=>'N', 'ValidateAsNotEmpty'=>1, 'ValidationErrorMessage'=> 'No name was entered.' )); $form->LoadInputValues(); $processed=false; if($form->WasSubmitted()) { $error=$form->Validate($verify); if(strlen($error)) echo 'Error: ', $error; else { // Processing goes here $processed=true; } } if($processed) echo 'The form was processed!'; else { $form->StartLayoutCapture(); require('template.php'); $form->EndLayoutCapture(); $form->DisplayOutput(); }

include('forms.php');

$form = new forms_class;

$form->AddInput(array(

'TYPE'=>'text',

'NAME'=>'nome',

'ID'=>'nome',

'LABEL'=>'<u>N</u>ame,

'ACCESSKEY'=>'N',

'ValidateAsNotEmpty'=>1,

'ValidationErrorMessage'=>

'No name was entered.'

));

$form->LoadInputValues();

$processed=false;

if($form->WasSubmitted()) {

$error=$form->Validate($verify);

if(strlen($error))

echo 'Error: ', $error;

else {

// Processing goes here

$processed=true;

}

}

if($processed)

echo 'The form was processed!';

else {

$form->StartLayoutCapture();

require('template.php');

$form->EndLayoutCapture();

$form->DisplayOutput();

}

Template sample template.php <p><?php $form->AddLabelPart(array( 'FOR'=>'name' )); ?>: <?php $form->AddInputPart('name'); ?></p>

template.php

<p><?php

$form->AddLabelPart(array(

'FOR'=>'name'

));

?>: <?php

$form->AddInputPart('name');

?></p>

API Divided in 3 layers: Definition Presentation Processing

Divided in 3 layers:

Definition

Presentation

Processing

API: Form definition AddInput Adds an input to the form with given parameters Connect, ConnectFormToInput Connect inputs in such way that when an event happens in the source input or the form, an action is executed in the scope of the target input Example: when a select input changes, it is emulated a click action in a submit input Configuration class variables Example: ACTION , METHOD , TARGET , etc..

AddInput

Adds an input to the form with given parameters

Connect, ConnectFormToInput

Connect inputs in such way that when an event happens in the source input or the form, an action is executed in the scope of the target input

Example: when a select input changes, it is emulated a click action in a submit input

Configuration class variables

Example: ACTION , METHOD , TARGET , etc..

API: Form presentation AddInputPart, AddLabelPart, AddDataPart Adds an input, an input label, or custom HTML to the form output StartLayoutCapture, EndLayoutCapture Automatic capture of HTML to include in the form output FetchOutput, DisplayOutput Generates HTML and Javascript of the whole form PageHead, PageLoad, PageUnload Generates HTML and Javascript that must be included in the page HEAD section or in the ONLOAD and ONUNLOAD attributes of the BODY tag

AddInputPart, AddLabelPart, AddDataPart

Adds an input, an input label, or custom HTML to the form output

StartLayoutCapture, EndLayoutCapture

Automatic capture of HTML to include in the form output

FetchOutput, DisplayOutput

Generates HTML and Javascript of the whole form

PageHead, PageLoad, PageUnload

Generates HTML and Javascript that must be included in the page HEAD section or in the ONLOAD and ONUNLOAD attributes of the BODY tag

API: Form processing LoadInputValues Extract submitted input values, discards forged values, convert escaped values, format input value masks WasSubmitted Checks whether the form is being submitted for processing, or the form is being presented for the first time Validate Checks whether the input values of the whole form (or part) are valid GetInputValue, GetCheckedState, GetCheckedRadio Retrieve the input values to let the application process the form

LoadInputValues

Extract submitted input values, discards forged values, convert escaped values, format input value masks

WasSubmitted

Checks whether the form is being submitted for processing, or the form is being presented for the first time

Validate

Checks whether the input values of the whole form (or part) are valid

GetInputValue, GetCheckedState, GetCheckedRadio

Retrieve the input values to let the application process the form

Form input definitions Associative array passed to the AddInput function: Mandatory parameters: TYPE , NAME , ID Presentation parameters: CLASS , LABEL , etc. Validation parameters Input type specific parameters Example: $form->AddInput( array( 'TYPE'=>'password', 'NAME=>'password', 'ID'=>'password', 'CLASS'=>'password' 'ValidateAsNotEmpty'=>true, 'ValidationErrorMessage'=>'The password field is empty.', 'MAXLENGTH'=>10 ) );

Associative array passed to the AddInput function:

Mandatory parameters: TYPE , NAME , ID

Presentation parameters: CLASS , LABEL , etc.

Validation parameters

Input type specific parameters

Example:

$form->AddInput( array(

'TYPE'=>'password',

'NAME=>'password',

'ID'=>'password',

'CLASS'=>'password'

'ValidateAsNotEmpty'=>true,

'ValidationErrorMessage'=>'The password field is empty.',

'MAXLENGTH'=>10

) );

Filtering the input values Load submitted input values Convert escaped values – magic quotes Filter forged values Example: MAXLENGTH , DiscardInvalidValues Format input value masks using regular expressions Example: zip code -> “ ^( [0-9]{5} )-?( [0-9]{3} )$ ” -> “ 1 - 2 ”

Load submitted input values

Convert escaped values – magic quotes

Filter forged values

Example: MAXLENGTH , DiscardInvalidValues

Format input value masks using regular expressions

Example: zip code -> “ ^( [0-9]{5} )-?( [0-9]{3} )$ ” -> “ 1 - 2 ”

Validating the input values Generates Javascript for browser side validation Server side validation in PHP with the class itself Sub-forms to validate a subset of inputs depending on the submit button that was used Example: SubForm -> “cancel” Special values to skip validation Example: ValidateOptionalValue -> “” Error messages to show when input values are invalid Focus and highlighting of invalid inputs Example: InvalidCLASS , InvalidSTYLE

Generates Javascript for browser side validation

Server side validation in PHP with the class itself

Sub-forms to validate a subset of inputs depending on the submit button that was used

Example: SubForm -> “cancel”

Special values to skip validation

Example: ValidateOptionalValue -> “”

Error messages to show when input values are invalid

Focus and highlighting of invalid inputs

Example: InvalidCLASS , InvalidSTYLE

Predefined types of validation Empty input, minimum length Input is equal or different from another input or value Integer, decimal or floating point number E-mail address, credit card number Match or does not match a regular expression Ticked an input of a group of radio or check box inputs Developer defined validation functions Special validation type implemented by plug-in classes

Empty input, minimum length

Input is equal or different from another input or value

Integer, decimal or floating point number

E-mail address, credit card number

Match or does not match a regular expression

Ticked an input of a group of radio or check box inputs

Developer defined validation functions

Special validation type implemented by plug-in classes

Form presentation using templates HTML with PHP StartLayoutCapture and EndLayoutCapture to capture the current script HTML output and adds it to the form output using AddDataPart Plug-in for the Smarty template engine Pre-filter that replaces Smarty templates with the tags {input} and {label} by calls to AddDataPart , AddInputPart and AddLabelPart Automatic layout Standard form presentation defined without requiring that the developer enters HTML manually

HTML with PHP

StartLayoutCapture and EndLayoutCapture to capture the current script HTML output and adds it to the form output using AddDataPart

Plug-in for the Smarty template engine

Pre-filter that replaces Smarty templates with the tags {input} and {label} by calls to AddDataPart , AddInputPart and AddLabelPart

Automatic layout

Standard form presentation defined without requiring that the developer enters HTML manually

Plug-ins Provide: New types of input controls New behaviors New validation types New types of layout for groups inputs Implemented using sub-classes of a base plug-in class May generate HTML and Javascript, or nothing at all

Provide:

New types of input controls

New behaviors

New validation types

New types of layout for groups inputs

Implemented using sub-classes of a base plug-in class

May generate HTML and Javascript, or nothing at all

Plug-in: Calendar date Displays 3 inputs to choose the year, month and day The date format is configurable Accepts any valid date between 1 and 9999 AC May restrict accepted dates within a start and end day

Displays 3 inputs to choose the year, month and day

The date format is configurable

Accepts any valid date between 1 and 9999 AC

May restrict accepted dates within a start and end day

Plug-in: Human user validation using CAPTCHA Generates an image with the text to be typed The image is obfuscated to difficult guessing by robots Users can use a button to redraw unreadable images The validation text may expire after a timeout period

Generates an image with the text to be typed

The image is obfuscated to difficult guessing by robots

Users can use a button to redraw unreadable images

The validation text may expire after a timeout period

Plug-in: Pick a map location Get the coordinates of a location picked by the user The maps are presented using the Google Maps API The coordinates appear in text inputs The map zoom level may be adjusted in several ways

Get the coordinates of a location picked by the user

The maps are presented using the Google Maps API

The coordinates appear in text inputs

The map zoom level may be adjusted in several ways

Plug-in: Automatic vertical layout Layout several inputs vertically, one per row Does not require defining HTML for the default layout The layout HTML templates are customizable Invalid inputs appear with a special mark Specific inputs may be turned invisible

Layout several inputs vertically, one per row

Does not require defining HTML for the default layout

The layout HTML templates are customizable

Invalid inputs appear with a special mark

Specific inputs may be turned invisible

Plug-in: Animation visual effects Animates page elements using visual effects Each animation is a sequence of visual effects Several animation sequences may run in parallel Several effect types may be used: Replace or insert HTML content Show or hide a page element Fade-in or fade-out a page element Cancel running animation to synchronize effects

Animates page elements using visual effects

Each animation is a sequence of visual effects

Several animation sequences may run in parallel

Several effect types may be used:

Replace or insert HTML content

Show or hide a page element

Fade-in or fade-out a page element

Cancel running animation to synchronize effects

Plug-in: Submit a form using AJAX Submit the form without reloading the page Uses the hidden IFRAME approach, which is more powerful and portable than using XMLHttpRequest Can show server-side activity feedback Generates Javascript to execute actions in response: Replace or insert HTML content in the current page Change properties of page elements Pause for a given period Redirect the browser to another page Execute an arbitrary Javascript command

Submit the form without reloading the page

Uses the hidden IFRAME approach, which is more powerful and portable than using XMLHttpRequest

Can show server-side activity feedback

Generates Javascript to execute actions in response:

Replace or insert HTML content in the current page

Change properties of page elements

Pause for a given period

Redirect the browser to another page

Execute an arbitrary Javascript command

COMET: AJAX using IFRAME Accesses the form page -> ← Sends form with Javascript and IFRAME Submits form with the IFRAME -> ← Sends HTML with Javascript to update the form page : Browser : Web Server

Plug-in: Linked select inputs May link two or more select inputs in chain Switches options when the value of another changes Static options or retrieved from the server using AJAX Has special versions to get options from a database

May link two or more select inputs in chain

Switches options when the value of another changes

Static options or retrieved from the server using AJAX

Has special versions to get options from a database

Plug-in: Auto-complete text Completes typed text using a list of words Shows menu with the words that can complete the text May get completion words from the server using AJAX Has special versions to get the words from a database

Completes typed text using a list of words

Shows menu with the words that can complete the text

May get completion words from the server using AJAX

Has special versions to get the words from a database

Plug-in: Upload progress meter Sends a parallel AJAX request during form submission Uses the uploadprogress extension to monitor upload Renders a progress bar with optional upload statistics

Sends a parallel AJAX request during form submission

Uses the uploadprogress extension to monitor upload

Renders a progress bar with optional upload statistics

3 rd party plug-ins Xinha: Alessandro Bianchi (Italy) HTML editor http://www.phpclasses.org/xinha_plug_in Cal: Alessandro Bianchi (Italy) Calendar with pop-up to browse the months and years http://www.phpclasses.org/plugin_cal_class FCKEditor: Matías Montes (Argentina) HTML editor http://www.phpclasses.org/form_fckeditor Your plug-in Anybody can develop, share, or even sell your own plug-ins

Xinha: Alessandro Bianchi (Italy)

HTML editor

http://www.phpclasses.org/xinha_plug_in

Cal: Alessandro Bianchi (Italy)

Calendar with pop-up to browse the months and years

http://www.phpclasses.org/plugin_cal_class

FCKEditor: Matías Montes (Argentina)

HTML editor

http://www.phpclasses.org/form_fckeditor

Your plug-in

Anybody can develop, share, or even sell your own plug-ins

Future plans Define forms using separate XML files Take plain HTML templates for form authoring with visual editing programs like DreamWeaver Cache the definition and output of forms Drag and drop event processing plug-in Generic scaffolding plug-in: list and edit dynamic data Example: insert, list, change and delete database table records Other plug-ins you may ask

Define forms using separate XML files

Take plain HTML templates for form authoring with visual editing programs like DreamWeaver

Cache the definition and output of forms

Drag and drop event processing plug-in

Generic scaffolding plug-in: list and edit dynamic data

Example: insert, list, change and delete database table records

Other plug-ins you may ask

Contribution opportunities Fix and report eventual bugs Suggest new features Translate the documentation to other idioms Develop and share new plug-ins Spread the word about this project

Fix and report eventual bugs

Suggest new features

Translate the documentation to other idioms

Develop and share new plug-ins

Spread the word about this project

The end Thank you for your time and attention! Questions? Send a message to [email_address]

Thank you for your time and attention!

Questions?

Send a message to [email_address]

References Forms class page http://www.phpclasses.org/formsgeneration Support forum http://www.phpclasses.org/discuss/package/1/ Mailing list http://groups.yahoo.com/group/forms-dev Mailing list for Portuguese speakers http://br.groups.yahoo.com/group/forms-pt

Forms class page

http://www.phpclasses.org/formsgeneration

Support forum

http://www.phpclasses.org/discuss/package/1/

Mailing list

http://groups.yahoo.com/group/forms-dev

Mailing list for Portuguese speakers

http://br.groups.yahoo.com/group/forms-pt