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 / 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 - 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

- 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