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

Using HTML_QuickForm To Manage Web Forms, Part 1


Tired of authoring dull and dreary Web forms everyday? Fed up of programming JavaScript validations day-in and day-out? Then, the HTML_QuickForm package is just the solution for which you are looking. In the first part of this two-part tutorial, I'll get you started with the basics of building Web forms using this resourceful PEAR package.

Author Info:
By: Harish Kamath
Rating: 5 stars5 stars5 stars5 stars5 stars / 73
December 22, 2004
TABLE OF CONTENTS:
  1. · Using HTML_QuickForm To Manage Web Forms, Part 1
  2. · Installing The HTML_QuickForm Package
  3. · My First HTML_QuickForm
  4. · FORM Elements
  5. · Adding Standard HMTL FORM Elements
  6. · Defining FORM Controls, Submitting Data
  7. · Grouping
  8. · "Checkbox" and "Radio" Elements
  9. · Drop Down Control and Hidden Element
  10. · Implementing Form Validations
  11. · Password Field Validation
  12. · Processing Data With HTML_QuickForm
  13. · Conclusion

print this article
SEARCH DEVARTICLES

Using HTML_QuickForm To Manage Web Forms, Part 1 - Processing Data With HTML_QuickForm
(Page 12 of 13 )

Its all fine and dandy to have a class that streamlines the generation and rendering of a Web form as I have shown in this article, thus far. But all this effort amounts to nothing if I am unable to insert the data submitted by the user into a database. This is where the process() method of the HTML_QuickForm() object comes in handy.

But before I list the code that demonstrates how to insert the data in a table, here is the structure of the "users" table used in the following example:

mysql> desc users;
+----------------------+---------------+------+-----+------------+-------+
| Field                | Type          | Null | Key | Default    | Extra |
+----------------------+---------------+------+-----+------------+-------+
| fullname             | varchar(60)   |      |     |            |       |
| address              | text          |      |     |            |       |
| country              | varchar(60)   |      |     |            |       |
| emailaddress         | varchar(100)  |      |     |            |       |
| gender               | enum('F','M') |      |     | F          |       |
| dateofbirth          | date          |      |     | 0000-00-00 |       |
| group_name           | varchar(30)   |      |     |            |       |
| group_type           | varchar(30)   |      |     |            |       |
| looking_for          | varchar(255)  |      |     |            |       |
| username             | varchar(10)   |      |     |            |       |
| pword                | varchar(10)   |      |     |            |       |
| newsletter_subscribe | enum('Y','N') |      |     | N          |       |
| referrer_url         | varchar(255)  |      |     |            |       |
+----------------------+---------------+------+-----+------------+-------+
13 rows in set (0.05 sec)

Here is the updated code listing:

Code Listing 5

Load this example in your browser and submit the form after filling valid data in all the fields. If all goes well, you should see the following "success.php" page:

Using HTML_QuickForm

Before explaining how the process() method works, I would like to highlight one more feature of the HTML_QuickForm() object - the ability to associate "filters" with your Web form. As the name suggests, this feature allows us to apply filters (in the form of pre-defined PHP functions) to all (or selected) elements of the Web form. One good example is the trim() function - it is a common practice to apply this function to remove leading and trailing white spaces that may be present in the data submitted via a Web form. Take a look at the next statement:

<?php

// snip

// pre-validation filters come here
$obj_registration_form->applyFilter('__ALL__', 'trim');

// snip
?>

This applyFilter() method takes two parameters. The first stores name of the element and the second represents the name of the PHP function to call. Note that I can use the keyword "__ALL__" if I wish to apply the filter to all elements of the Web form.

It is also important to apply the filter at the right time. For example, you may want to delay applying some filters till the validation is complete, as we have done in the following statements:

<?php

// snip

// validate form
if($obj_registration_form->validate()) {
 
  // post-validation filters come here
  $obj_registration_form->applyFilter('__ALL__', 'addslashes');
  $obj_registration_form->applyFilter('__ALL__', 'htmlentities');
  $obj_registration_form->applyFilter('txtAddress', 'nl2br');
 
  // invoke the "store_user_info" function to store the user information
  $obj_registration_form->process('store_user_information', false);   
 
  // exit the script, on successful insertion
  header('Location: ./success.php');
}

// snip

?>

Here, I have applied some filters only after the data has been validated, for a very simple reason: it is possible that PHP functions such as addslashes(), htmlentities() and nl2br() will alter the data submitted by the user and thereby cause one of the validation rules to fail, through no fault of the user.

Coming back to the process() method of the HTML_QuickForm() object. In the code listing above, you'll notice that I have passed two parameters: the first represents the name of my "callback" function and the second parameter is set to "false" because I am not uploading any files to the server in my Web form.

If you look at the beginning of the script, you will notice that I have defined a function called store_user_information() - this is my "callback" function and contains routine code to insert a record in the "users" MySQL table.


<?php

// snip

// custom function to store user information into the database
function store_user_information($ary_artist_info) {
 
// store information in the database
  $connection = mysql_connect('localhost', 'guest', 'pass') or die ('Unable to connect!');
 
      mysql_select_db('db2') or die ('Unable to select database!');
     
      $query  = " INSERT INTO `users` ( `fullname` , `address` , `country` , `emailaddress` , `gender` , `dateofbirth` , `group_name` , `group_type` , `looking_for` , `username` , `pword` , `newsletter_subscribe`, `referrer_url` )";

      $query .= " VALUES ('".implode(" ", $ary_artist_info['txtFullName'])."', '".$ary_artist_info['txtAddress']."', '".$ary_artist_info['ddlCountry']."', '".$ary_artist_info['txtEmailAddress']."', '".$ary_artist_info['radGender']."', '".implode("-", $ary_artist_info['txtDateOfBirth'])."', '".$ary_artist_info['txtGroupName']."', '".$ary_artist_info['radGroupType']."', '".implode(",", $ary_artist_info['ddlLookingFor'])."', '".$ary_artist_info['txtUsername']."', '".$ary_artist_info['txtPassword1']."', '".(isset($ary_artist_info['chkNewsletter']) ? "Y" : "N")."', '".$ary_artist_info['txtReferrer']."');";
    
      $result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());
   
      mysql_close($connection);

}

// snip

?>

If all goes well, the data submitted by the user will be inserted into the database and he (or she) will be redirected to a "success.php" page.

With that, I can also safely conclude that I am ready to roll out my "Registration" prototype - the task that was made easy by the resourceful HTML_QuickForm package.


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