Forms With Ajax And Advanced Plugins


Published on

Tutorial of the PHP Forms Generation and Validation class with plugins for AJAX and other advanced features

Published in: Business, Technology
1 Comment
1 Like
  • helpful slideshare
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Forms With Ajax And Advanced Plugins

    1. 1. Advanced Web forms using PHP <ul><ul><li>Web forms using PHP with AJAX and advanced plug-ins </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Manuel Lemos </li></ul></ul><ul><ul><li>[email_address] </li></ul></ul><ul><ul><li>This presentation license: Creative Commons </li></ul></ul><ul><ul><li>Attribution-NoDerivs 2.5 </li></ul></ul>
    2. 2. Creative Commons License Deed Attribution-No Derivs 2.5 <ul><ul><li>You are free: </li></ul></ul><ul><ul><li>to Share -- to copy, distribute, display, and perform the work </li></ul></ul><ul><ul><li>to make commercial use of the work </li></ul></ul><ul><ul><li>Under the following conditions: </li></ul></ul><ul><ul><li>Attribution . You must attribute the work in the manner specified by Manuel Lemos . </li></ul></ul><ul><ul><li>No Derivative Works . You may not alter, transform, or build upon this work. </li></ul></ul><ul><ul><li>For any reuse or distribution, you must make clear to others the license terms of this work. </li></ul></ul><ul><ul><li>Any of these conditions can be waived if you get permission from Manuel Lemos . </li></ul></ul><ul><ul><li>Your fair use and other rights are in no way affected by the above. </li></ul></ul><ul><ul><li>This is a human-readable summary of the Legal Code (the full license) . </li></ul></ul>
    3. 3. Forms Generation and Validation class – What is it? <ul><ul><li>A class of objects written in PHP </li></ul></ul><ul><ul><li>Generates HTML to present Web forms </li></ul></ul><ul><ul><li>Generates Javascript to validate before submitting the forms to the Web server </li></ul></ul><ul><ul><li>Validate forms on the server side with the PHP code of the class itself </li></ul></ul><ul><ul><li>Extensible using plug-in classes </li></ul></ul><ul><ul><li>Open Source with a BSD like license </li></ul></ul><ul><ul><li>Good reputation in the PHP Open Source world </li></ul></ul><ul><ul><li>Over 44.000 distinct users downloaded it from the PHPClasses site </li></ul></ul><ul><ul><li>Number 248 in Freshmeat popularity top </li></ul></ul>
    4. 4. Class development history <ul><ul><li>12/01/1999 : Class creation </li></ul></ul><ul><ul><li>../../1999 : Offer the class to other users in PHP mailing lists </li></ul></ul><ul><ul><li>05/06/1999 : User recommends the class a lot in the php-general list </li></ul></ul><ul><ul><li>18/06/1999 : Beginning of the PHPClasses site </li></ul></ul><ul><ul><li>24/06/1999 : Launch of the PHPClasses site </li></ul></ul><ul><ul><li>16/12/2002 : Plug-in to integrate with Smarty </li></ul></ul><ul><ul><li>03/04/2004 : Templates with simple PHP code within HTML </li></ul></ul><ul><ul><li>14/06/2004 : Special input controls using plug-in classes </li></ul></ul><ul><ul><li>29/12/2004 : Processing browser side events on the server side </li></ul></ul><ul><ul><li>25/06/2005 : Connected input trigger actions upon browser side events </li></ul></ul><ul><ul><li>14/03/2006 : Submission of forms using AJAX </li></ul></ul>
    5. 5. Plug-in release history <ul><ul><li>14/06/2004 : Date </li></ul></ul><ul><ul><li>29/12/2004 : CAPTCHA </li></ul></ul><ul><ul><li>25/06/2005 : Linked select </li></ul></ul><ul><ul><li>30/12/2005 : MySQL, Metabase, MDB2 linked select </li></ul></ul><ul><ul><li>14/03/2006 : AJAX submit </li></ul></ul><ul><ul><li>26/03/2006 : Layout vertical </li></ul></ul><ul><ul><li>24/05/2006 : Map location </li></ul></ul><ul><ul><li>21/06/2006 : Autocomplete </li></ul></ul><ul><ul><li>12/07/2006 : MySQL, Metabase, MDB2 autocomplete </li></ul></ul><ul><ul><li>28/07/2006 : Animation </li></ul></ul><ul><ul><li>20/12/2006 : Upload progress meter </li></ul></ul>
    6. 6. How should it be used? <ul><ul><li>The script that processes the form also presents it. </li></ul></ul>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
    7. 7. Example of usage <ul><li>include('forms.php'); </li></ul><ul><li>$form = new forms_class; </li></ul><ul><li>$form->AddInput(array( </li></ul><ul><li>'TYPE'=>'text', </li></ul><ul><li>'NAME'=>'nome', </li></ul><ul><li>'ID'=>'nome', </li></ul><ul><li>'LABEL'=>'<u>N</u>ame, </li></ul><ul><li>'ACCESSKEY'=>'N', </li></ul><ul><li>'ValidateAsNotEmpty'=>1, </li></ul><ul><li>'ValidationErrorMessage'=> </li></ul><ul><li>'No name was entered.' </li></ul><ul><li>)); </li></ul><ul><li>$form->LoadInputValues(); </li></ul><ul><li>$processed=false; </li></ul><ul><li>if($form->WasSubmitted()) { </li></ul><ul><li>$error=$form->Validate($verify); </li></ul><ul><li>if(strlen($error)) </li></ul><ul><li>echo 'Error: ', $error; </li></ul><ul><li>else { </li></ul><ul><li>// Processing goes here </li></ul><ul><li>$processed=true; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>if($processed) </li></ul><ul><li>echo 'The form was processed!'; </li></ul><ul><li>else { </li></ul><ul><li>$form->StartLayoutCapture(); </li></ul><ul><li>require('template.php'); </li></ul><ul><li>$form->EndLayoutCapture(); </li></ul><ul><li>$form->DisplayOutput(); </li></ul><ul><li>} </li></ul>
    8. 8. Template sample <ul><ul><li>template.php </li></ul></ul><ul><ul><li><p><?php </li></ul></ul><ul><ul><li>$form->AddLabelPart(array( </li></ul></ul><ul><ul><li>'FOR'=>'name' </li></ul></ul><ul><ul><li>)); </li></ul></ul><ul><ul><li>?>: <?php </li></ul></ul><ul><ul><li>$form->AddInputPart('name'); </li></ul></ul><ul><ul><li>?></p> </li></ul></ul>
    9. 9. API <ul><ul><li>Divided in 3 layers: </li></ul></ul><ul><ul><li>Definition </li></ul></ul><ul><ul><li>Presentation </li></ul></ul><ul><ul><li>Processing </li></ul></ul>
    10. 10. API: Form definition <ul><ul><li>AddInput </li></ul></ul><ul><ul><li>Adds an input to the form with given parameters </li></ul></ul><ul><ul><li>Connect, ConnectFormToInput </li></ul></ul><ul><ul><li>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 </li></ul></ul><ul><ul><li>Example: when a select input changes, it is emulated a click action in a submit input </li></ul></ul><ul><ul><li>Configuration class variables </li></ul></ul><ul><ul><li>Example: ACTION , METHOD , TARGET , etc.. </li></ul></ul>
    11. 11. API: Form presentation <ul><ul><li>AddInputPart, AddLabelPart, AddDataPart </li></ul></ul><ul><ul><li>Adds an input, an input label, or custom HTML to the form output </li></ul></ul><ul><ul><li>StartLayoutCapture, EndLayoutCapture </li></ul></ul><ul><ul><li>Automatic capture of HTML to include in the form output </li></ul></ul><ul><ul><li>FetchOutput, DisplayOutput </li></ul></ul><ul><ul><li>Generates HTML and Javascript of the whole form </li></ul></ul><ul><ul><li>PageHead, PageLoad, PageUnload </li></ul></ul><ul><ul><li>Generates HTML and Javascript that must be included in the page HEAD section or in the ONLOAD and ONUNLOAD attributes of the BODY tag </li></ul></ul>
    12. 12. API: Form processing <ul><ul><li>LoadInputValues </li></ul></ul><ul><ul><li>Extract submitted input values, discards forged values, convert escaped values, format input value masks </li></ul></ul><ul><ul><li>WasSubmitted </li></ul></ul><ul><ul><li>Checks whether the form is being submitted for processing, or the form is being presented for the first time </li></ul></ul><ul><ul><li>Validate </li></ul></ul><ul><ul><li>Checks whether the input values of the whole form (or part) are valid </li></ul></ul><ul><ul><li>GetInputValue, GetCheckedState, GetCheckedRadio </li></ul></ul><ul><ul><li>Retrieve the input values to let the application process the form </li></ul></ul>
    13. 13. Form input definitions <ul><ul><li>Associative array passed to the AddInput function: </li></ul></ul><ul><ul><li>Mandatory parameters: TYPE , NAME , ID </li></ul></ul><ul><ul><li>Presentation parameters: CLASS , LABEL , etc. </li></ul></ul><ul><ul><li>Validation parameters </li></ul></ul><ul><ul><li>Input type specific parameters </li></ul></ul><ul><ul><li>Example: </li></ul></ul><ul><ul><li>$form->AddInput( array( </li></ul></ul><ul><ul><li>'TYPE'=>'password', </li></ul></ul><ul><ul><li>'NAME=>'password', </li></ul></ul><ul><ul><li>'ID'=>'password', </li></ul></ul><ul><ul><li>'CLASS'=>'password' </li></ul></ul><ul><ul><li>'ValidateAsNotEmpty'=>true, </li></ul></ul><ul><ul><li>'ValidationErrorMessage'=>'The password field is empty.', </li></ul></ul><ul><ul><li>'MAXLENGTH'=>10 </li></ul></ul><ul><ul><li>) ); </li></ul></ul>
    14. 14. Filtering the input values <ul><ul><li>Load submitted input values </li></ul></ul><ul><ul><li>Convert escaped values – magic quotes </li></ul></ul><ul><ul><li>Filter forged values </li></ul></ul><ul><ul><li>Example: MAXLENGTH , DiscardInvalidValues </li></ul></ul><ul><ul><li>Format input value masks using regular expressions </li></ul></ul><ul><ul><li>Example: zip code -> “ ^( [0-9]{5} )-?( [0-9]{3} )$ ” -> “ 1 - 2 ” </li></ul></ul>
    15. 15. Validating the input values <ul><ul><li>Generates Javascript for browser side validation </li></ul></ul><ul><ul><li>Server side validation in PHP with the class itself </li></ul></ul><ul><ul><li>Sub-forms to validate a subset of inputs depending on the submit button that was used </li></ul></ul><ul><ul><li>Example: SubForm -> “cancel” </li></ul></ul><ul><ul><li>Special values to skip validation </li></ul></ul><ul><ul><li>Example: ValidateOptionalValue -> “” </li></ul></ul><ul><ul><li>Error messages to show when input values are invalid </li></ul></ul><ul><ul><li>Focus and highlighting of invalid inputs </li></ul></ul><ul><ul><li>Example: InvalidCLASS , InvalidSTYLE </li></ul></ul>
    16. 16. Predefined types of validation <ul><ul><li>Empty input, minimum length </li></ul></ul><ul><ul><li>Input is equal or different from another input or value </li></ul></ul><ul><ul><li>Integer, decimal or floating point number </li></ul></ul><ul><ul><li>E-mail address, credit card number </li></ul></ul><ul><ul><li>Match or does not match a regular expression </li></ul></ul><ul><ul><li>Ticked an input of a group of radio or check box inputs </li></ul></ul><ul><ul><li>Developer defined validation functions </li></ul></ul><ul><ul><li>Special validation type implemented by plug-in classes </li></ul></ul>
    17. 17. Form presentation using templates <ul><ul><li>HTML with PHP </li></ul></ul><ul><ul><li>StartLayoutCapture and EndLayoutCapture to capture the current script HTML output and adds it to the form output using AddDataPart </li></ul></ul><ul><ul><li>Plug-in for the Smarty template engine </li></ul></ul><ul><ul><li>Pre-filter that replaces Smarty templates with the tags {input} and {label} by calls to AddDataPart , AddInputPart and AddLabelPart </li></ul></ul><ul><ul><li>Automatic layout </li></ul></ul><ul><ul><li>Standard form presentation defined without requiring that the developer enters HTML manually </li></ul></ul>
    18. 18. Plug-ins <ul><ul><li>Provide: </li></ul></ul><ul><ul><li>New types of input controls </li></ul></ul><ul><ul><li>New behaviors </li></ul></ul><ul><ul><li>New validation types </li></ul></ul><ul><ul><li>New types of layout for groups inputs </li></ul></ul><ul><ul><li>Implemented using sub-classes of a base plug-in class </li></ul></ul><ul><ul><li>May generate HTML and Javascript, or nothing at all </li></ul></ul>
    19. 19. Plug-in: Calendar date <ul><ul><li>Displays 3 inputs to choose the year, month and day </li></ul></ul><ul><ul><li>The date format is configurable </li></ul></ul><ul><ul><li>Accepts any valid date between 1 and 9999 AC </li></ul></ul><ul><ul><li>May restrict accepted dates within a start and end day </li></ul></ul>
    20. 20. Plug-in: Human user validation using CAPTCHA <ul><ul><li>Generates an image with the text to be typed </li></ul></ul><ul><ul><li>The image is obfuscated to difficult guessing by robots </li></ul></ul><ul><ul><li>Users can use a button to redraw unreadable images </li></ul></ul><ul><ul><li>The validation text may expire after a timeout period </li></ul></ul>
    21. 21. Plug-in: Pick a map location <ul><ul><li>Get the coordinates of a location picked by the user </li></ul></ul><ul><ul><li>The maps are presented using the Google Maps API </li></ul></ul><ul><ul><li>The coordinates appear in text inputs </li></ul></ul><ul><ul><li>The map zoom level may be adjusted in several ways </li></ul></ul>
    22. 22. Plug-in: Automatic vertical layout <ul><ul><li>Layout several inputs vertically, one per row </li></ul></ul><ul><ul><li>Does not require defining HTML for the default layout </li></ul></ul><ul><ul><li>The layout HTML templates are customizable </li></ul></ul><ul><ul><li>Invalid inputs appear with a special mark </li></ul></ul><ul><ul><li>Specific inputs may be turned invisible </li></ul></ul>
    23. 23. Plug-in: Animation visual effects <ul><ul><li>Animates page elements using visual effects </li></ul></ul><ul><ul><li>Each animation is a sequence of visual effects </li></ul></ul><ul><ul><li>Several animation sequences may run in parallel </li></ul></ul><ul><ul><li>Several effect types may be used: </li></ul></ul><ul><ul><li>Replace or insert HTML content </li></ul></ul><ul><ul><li>Show or hide a page element </li></ul></ul><ul><ul><li>Fade-in or fade-out a page element </li></ul></ul><ul><ul><li>Cancel running animation to synchronize effects </li></ul></ul>
    24. 24. Plug-in: Submit a form using AJAX <ul><ul><li>Submit the form without reloading the page </li></ul></ul><ul><ul><li>Uses the hidden IFRAME approach, which is more powerful and portable than using XMLHttpRequest </li></ul></ul><ul><ul><li>Can show server-side activity feedback </li></ul></ul><ul><ul><li>Generates Javascript to execute actions in response: </li></ul></ul><ul><ul><li>Replace or insert HTML content in the current page </li></ul></ul><ul><ul><li>Change properties of page elements </li></ul></ul><ul><ul><li>Pause for a given period </li></ul></ul><ul><ul><li>Redirect the browser to another page </li></ul></ul><ul><ul><li>Execute an arbitrary Javascript command </li></ul></ul>
    25. 25. 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
    26. 26. Plug-in: Linked select inputs <ul><ul><li>May link two or more select inputs in chain </li></ul></ul><ul><ul><li>Switches options when the value of another changes </li></ul></ul><ul><ul><li>Static options or retrieved from the server using AJAX </li></ul></ul><ul><ul><li>Has special versions to get options from a database </li></ul></ul>
    27. 27. Plug-in: Auto-complete text <ul><ul><li>Completes typed text using a list of words </li></ul></ul><ul><ul><li>Shows menu with the words that can complete the text </li></ul></ul><ul><ul><li>May get completion words from the server using AJAX </li></ul></ul><ul><ul><li>Has special versions to get the words from a database </li></ul></ul>
    28. 28. Plug-in: Upload progress meter <ul><ul><li>Sends a parallel AJAX request during form submission </li></ul></ul><ul><ul><li>Uses the uploadprogress extension to monitor upload </li></ul></ul><ul><ul><li>Renders a progress bar with optional upload statistics </li></ul></ul>
    29. 29. 3 rd party plug-ins <ul><ul><li>Xinha: Alessandro Bianchi (Italy) </li></ul></ul><ul><ul><li>HTML editor </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Cal: Alessandro Bianchi (Italy) </li></ul></ul><ul><ul><li>Calendar with pop-up to browse the months and years </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li>FCKEditor: Matías Montes (Argentina) </li></ul></ul><ul><ul><li>HTML editor </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Your plug-in </li></ul></ul><ul><ul><li>Anybody can develop, share, or even sell your own plug-ins </li></ul></ul>
    30. 30. Future plans <ul><ul><li>Define forms using separate XML files </li></ul></ul><ul><ul><li>Take plain HTML templates for form authoring with visual editing programs like DreamWeaver </li></ul></ul><ul><ul><li>Cache the definition and output of forms </li></ul></ul><ul><ul><li>Drag and drop event processing plug-in </li></ul></ul><ul><ul><li>Generic scaffolding plug-in: list and edit dynamic data </li></ul></ul><ul><ul><li>Example: insert, list, change and delete database table records </li></ul></ul><ul><ul><li>Other plug-ins you may ask </li></ul></ul>
    31. 31. Contribution opportunities <ul><ul><li>Fix and report eventual bugs </li></ul></ul><ul><ul><li>Suggest new features </li></ul></ul><ul><ul><li>Translate the documentation to other idioms </li></ul></ul><ul><ul><li>Develop and share new plug-ins </li></ul></ul><ul><ul><li>Spread the word about this project </li></ul></ul>
    32. 32. The end <ul><ul><li>Thank you for your time and attention! </li></ul></ul><ul><ul><li>Questions? </li></ul></ul><ul><ul><li>Send a message to [email_address] </li></ul></ul>
    33. 33. References <ul><ul><li>Forms class page </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Support forum </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Mailing list </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Mailing list for Portuguese speakers </li></ul></ul><ul><ul><li> </li></ul></ul>