Getting started: constructing programmatically an online form - PHP

Welcome to the last part of the series “Building a PHP 5 form processor.” In three parts, this series goes through the development of an extensible form processor package in PHP 5, explaining its benefits and demonstrating its implementation.

TABLE OF CONTENTS:

By: Alejandro Gervasio

Poor Best

Rating:

/ 22

January 30, 2006

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

One of the best things about building an online form using an object-oriented approach is that the overall rendering process may be considerably simplified to instantiating a few form objects and deciding the best layout for them. Keeping this concept in mind, I’ll construct a simple contact form, which presents some of the usual text boxes, such as “First Name”, “Last Name”, “Email” and “Comments”, as you’ve seen hundreds of times. However, all of the building process will be driven by the classes that I developed in the first part of this series, including client-side validation. Take a look at the fragment of code below:

try{

// include ‘formElement’ class

require_once 'form_element.php';

// include ‘formGenerator’ class

require_once 'form_generator.php';

// include ‘JSGenerator’ class

require_once 'js_generator.php';

// instantiate form generator object

$fg=new formGenerator();

$fg->addFormPart('<table>');

$fg->addFormPart('<tr><td>First Name</td><td>');

$fg->addElement('text',array
('name'=>'fname','required'=>array('empty','Enter your First name
(at least 4 characters)')));

$fg->addFormPart('</tr>');

$fg->addFormPart('<tr><td>Last Name</td><td>');

$fg->addElement('text',array
('name'=>'lname','required'=>array('empty','Enter your Last name
(at least 4 characters)')));

$fg->addFormPart('</tr>');

$fg->addFormPart('<tr><td>Email</td><td>');

$fg->addElement('text',array
('name'=>'email','required'=>array('email','Enter a valid email
address')));

$fg->addFormPart('</tr>');

$fg->addFormPart('<tr><td>Comments</td><td>');

$fg->addElement('textarea',array
('name'=>'comments','rows'=>'10','cols'=>'20'));

$fg->addFormPart('</tr>');

$fg->addFormPart('<tr><td> </td><td>');

$fg->addElement('submit',array('name'=>'send','value'=>'Send
Data'));

$fg->addFormPart('</tr></table>');

echo $fg->display();

}

catch(Exception $e){

echo $e->getMessage();

exit();

}

As shown in the fragment of code above, I’ve included the corresponding class files for rendering form elements, as well as for performing client-side validation. After loading these classes, I instantiated a “formGenerator” object and simply proceeded to build the pertinent form.

As you can see, I’ve utilized the “addFormPart()” method, in order to use a simple (X)HTML table for laying out each form element on the web page. Please notice how the class is instructed to perform client-side validation on the “fname”, “lname” and “email” fields, through their “required” attribute, and in all these cases, the corresponding error message is passed as an argument to the class method. After adding up all the form elements, the form is simply displayed by calling the “display()” method.

If you run the above snippet, the output looks like this:

Although the above screenshot depicts a rather crude implementation of the form rendering process, it actually demonstrates how the form has been constructed and how JavaScript validation is performed on each of the required fields. At this point, the functionality of these classes for building online forms in a very quick way should be clear to you.

Now that you understand how these classes work, the next step for setting up the example rests on demonstrating how the “validator” module checks, on the server, the validity of the data entered on required fields.

Next: Performing server-side validation: implementing the “validator” module >>