Home arrow Design Usability arrow Page 6 - 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 / 44
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

TOOLS YOU CAN USE

advertisement
Using HTML_QuickForm To Manage Web Forms, Part 2 - End Game
(Page 6 of 7 )

One last example before I bring the curtains down on this two-part tutorial. So far, I have covered all aspects of the Web form except one critical feature. Pat yourselves on the back if your answer was "file uploads using a Web form."

The next example shows you how:

Code Listing 6

Load this example in the browser to view the following:

Using HTML_QuickForm

This Web file allows you to upload an MPEG Layer 3 (a.k.a. MP3) file to the server. I gave it a simple test run and got the following output:

Using HTML_QuickForm

Note that the Web form has been configured to reject files that are not MP3 files. When I attempted to upload a file with a different extension, the Web form threw the following error message:

Using HTML_QuickForm

As seen from the output above, this PHP script is intelligent. But what is source of this intelligence? Read on.

<?php

// define a new HTML_QuickForm object
$obj_songfileupload_form = new HTML_QuickForm('frmSongFileUpload', true);

// snip

It all begins with the instantiation of a HTML_QuickForm object - note that the second parameter has been set to "true" in order to indicate that I will use this Web form for file uploads.

<?php

// snip

// add 'upload' control and associated rules
$obj_songfileupload_form->addElement('file', 'ctlFileUpload', 'Select Song:');

$obj_songfileupload_form->addRule('ctlFileUpload', 'Please select a Song file to upload.', 'uploadedfile');
$obj_songfileupload_form->addRule('ctlFileUpload', 'The extension of the Song file should be *.mp3', 'filename', '/^.*\.mp3$/');
$obj_songfileupload_form->addRule('ctlFileUpload', 'The MIME type of the uploaded Song file is not valid.', 'mimetype', 'audio/mpeg');

// snip

?>

Next, I have passed the "file" keyword to the addElement() method to include a file upload <FORM> control in the Web form. Then, I have added some "file" control-specific rules:

  • The 'uploadedfile' rule is synonymous to the 'required' rule for text controls; it ensures that a file is selected for upload.

  • The 'filename' rule allows me to specify a pattern for the name of the file using a regular expression; in my example, the regex ensures that the uploaded file has a ".mp3" extension.

  • The 'mimetype' rule enforces MIME-type restrictions on the uploaded file; if it does not match the required file type, an error is thrown. You may want to add more MIME-types based on your requirement.

<?php

// snip

$obj_songfileupload_form->process('store_song_file', true);

// snip

?>

Once the upload file has been validated, I store it on the server by invoking the store_song_file() function via the process() method, as seen above. This callback function, in turn, uses copy()to store the file at the required destination.


blog comments powered by Disqus
DESIGN USABILITY ARTICLES

- 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
- Browsers as Test Platforms
- Website Knick Knack

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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