Home arrow Design Usability arrow Page 5 - Using HTML_QuickForm To Manage Web Forms, Part 2
DESIGN USABILITY

Using HTML_QuickForm To Manage Web Forms, Part 2


In this second part of the HTML_QuickForm primer, I will demonstrate the advanced features of the package - these include "hierarchical" drop downs, "auto-complete" text boxes, integration with the "Smarty" template engine, and much, much more.

Author Info:
By: Harish Kamath
Rating: 5 stars5 stars5 stars5 stars5 stars / 48
December 29, 2004
TABLE OF CONTENTS:
  1. · Using HTML_QuickForm To Manage Web Forms, Part 2
  2. · Hierarchical Drop Downs in Web Forms
  3. · Auto-complete Text Boxes
  4. · Dressing Up Your Web Form
  5. · Getting Smart with HTML_QuickForm
  6. · End Game
  7. · Conclusion

print this article
SEARCH DEVARTICLES

Using HTML_QuickForm To Manage Web Forms, Part 2 - Getting Smart with HTML_QuickForm
(Page 5 of 7 )

In the previous section, I tweaked the default template of the HTML_QuickForm package. However, in the real world, a Web site is more an expression of creativity than an application with dull and dreary interfaces. Combine that with animated GIFs, Flash movies, JAVA applets and other thingamajigs - the default HTML_QuickForm template looks like an ugly duckling in the company of beautiful swans -  a poor simile but you get the picture!

What I need is a solution that combines the power of the HTML_QuickForm package with the flexibility of a template engine.  

Time to say hello to "Smarty." The first line of its introduction on the official Web site - http://smarty.php.net - says it all: "Smarty is a template engine for PHP." And a good one to boot, considering that the "PHP Group" endorses this project.

Now there are reams of digital print about "Smarty" and how it works, and I want to focus on its integration with the HTML_QuickForm package. With that goal in mind, I have downloaded the "Smarty" package from this URL - http://smarty.php.net/download.php - and unzipped it at suitable location on my Web server.

Next, I have created the following folders, as required by "Smarty" - one titled "templates" and another titled "compiled." As the names suggest, the former is used to store my "Smarty" templates and the latter stores the compiled versions of all templates for faster rendering - one of the unique aspects of the "Smarty" template engine.

After I have unzipped "Smarty" and created the required folders, my Web site folder structure looks something like this:

web-site-root
|
+-library
|   |
|   +-classes
|   |   |
|   |   +-internals
|   |   +-plugins
|   |   |
|   |   \-Smarty.class.php
|   |
|   \-templates
|      |
|      \-compiled  
|
\-example.php

Now, I have created a template for my Web form:

Code Listing 4

I saved this code listing as "frm_registration.tpl" in the "templates" created earlier. While the template primarily contains HTML code, there are some tags that you値l need to pay special attention to.

All these special tags are also recognized by the built-in "Smarty" renderer plugin of the HTML_QuickForm package - more on this later.

<%

{$obj_registration_form.javascript}
<form {$obj_registration_form.attributes}>
{$obj_registration_form.hidden}

// snip

%>

Above, I have the <FORM> related marker tags. The first is the placeholder for any JavaScript code (for client-side validations) associated with the Web form, the second is for the <FORM> element attributes and the third is replaced by the hidden fields, if any, associated with the Web form.

Note that the name of the form object (i.e. $obj_registration_form) used in this template should be the same as the name of the HTML_QuickForm() object instantiated in the corresponding PHP script.

Next, I値l explain the template for one Web form element. The rest follow the same syntax - only the names have to be updated. Take a look:

<%

// snip

<tr>
<td colspan="2" style="font-size:16px;background-color:#DDDDDD;font-weight:bold">
{$obj_registration_form.header.user_information}
</td>
</tr>  
<tr>
   <td width="25%" valign="top" align="left" style="font-weight:bold">
{$obj_registration_form.txtFullName.label}
</td>
   <td valign="top" align="left">
{$obj_registration_form.txtFullName.html}
</td>
</tr>

// snip

%>

The first tag - {$obj_registration_form.header.user_information} - is a place holder for a header control titled "user_information."

Next, I have a couple of placeholders for the first Web form element i.e. the "txtFullName" group control. The first tag specifies the location of the "label" associated with the control and the second tag is replaced by the actual HTML code for rendering the textbox.

Skim through rest of the template and you値l notice that I have followed the same syntax for every other Web form element.

Now, let me shift your attention to the associated PHP script:

Code Listing 5

Before I dive into explanations, load the above example in the browser to view the following output:

Using HTML_QuickForm

As you can see, I have customized the appearance of the Web form without much fuss. In fact, even a programming-wary creative designer will be comfortable working with "Smarty" templates since they mostly contain HTML code.

Back to the PHP script. Since I need to create an instance of the Smarty() class, the required files are imported as listed below:

<?php

// snip

require_once './library/classes/Smarty.class.php';
require_once 'HTML/QuickForm.php';
require_once 'HTML/QuickForm/Renderer/ArraySmarty.php';

// snip

?>

Below, I have created a local instance of the Smarty() class and initialized its "template_dir" and "compile_dir" properties.

<?php

// snip

// Setup a template object
$obj_registration_tpl = & new Smarty;
$obj_registration_tpl->template_dir = './library/templates';
$obj_registration_tpl->compile_dir  = './library/templates/compiled';

// Apply the Smarty template to the HTML_QuickForm object
// using the built-in renderer capabilities
$renderer =& new HTML_QuickForm_Renderer_ArraySmarty($obj_registration_tpl);

$renderer->setRequiredTemplate(
   '{$label}
       {if $required}
           <span style="color:#FF0000;font-size:16px"><sup>*</sup></span>
        {/if}'
    );

$renderer->setErrorTemplate(
   '{$html}
    {if $error}
         <br clear="all"><span style="color:#FF0000;font-size:12px">{$error}</span><br />
    {/if}'
);

// snip

?>

Here, I have created an instance of the HTML_QuickForm_Renderer_ArraySmarty() object that acts as an interface between the HTML_QuickForm and Smarty packages.

Next, I have used the setRequiredTemplate() method to define the template that displays the "Required field" indicator alongside the label of a compulsory Web form field and the setErrorTempate() method to customize the template that displays the error message on the screen.

<?php

// snip


// proceed to display the content on this page
// error message if any are displayed to the user
$obj_registration_form->accept($renderer);

// assign array with form data
$obj_registration_tpl->assign('obj_registration_form', $renderer->toArray());

?>
<HTML>
<HEAD>
   <TITLE>Artist Registration</TITLE>
   <BASEFONT face="Arial" size="2" >
</HEAD>
<BODY>
<?php

   // display the form
   $obj_registration_tpl->display('frm_registration.tpl');

?>
</BODY>
</HTML>

These last few steps are mandatory; they invoke different methods of the HTML_QuickForm() and Smarty() objects to ensure that Web form is correctly rendered on the screen. Note the use of the different variables and objects in the code snippet above. You could be in for nasty surprises if you miss out on any of them.

Whew!

I値l agree that this was a complex example - one that requires familiarity with APIs for two different packages, references to objects and variables across different files and, let's not forget, tons of patience when it comes to debugging errors. But take it from me: when everything - scripts, templates, code, variables, objects, tags - falls into place and the Web form renders correctly, you値l be on top of the world - just like moi!


blog comments powered by Disqus
DESIGN USABILITY ARTICLES

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials