|
|
Last Updated: September 18th, 2007
| | | |  | We suggest that before you read this tutorial you check out FORMgen, the FORMfields generator that requires no programming. |
| | | | |
| | | | The Form | | | | | |
Here is a simple example of a new contact form constructed with the FORMfields framework. Play around with it and see what you think. You will notice that all field data is validated (server side) when you click the "Create" button.
Believe it or not, the source code for displaying and processing this form is as short as what follows:
<?
// Include the FORMfields library
require_once($_SERVER["DOCUMENT_ROOT"] . "/FORMfields/FORMfields.php"); // Absolute path
////////// FORM STRUCTURE - START //////////
$ffForm = new FfForm();
$ffForm->addField(new PersonNameField("name", "Full Name", FORM_FIELD_REQUIRED));
$ffForm->addField(new EmailAddrField("email", "Email", FORM_FIELD_REQUIRED));
$ffForm->addField(new PhoneNumberField("phone", "Phone", FORM_FIELD_REQUIRED));
$ffForm->addField(new FaxNumberField("fax", "Fax", FORM_FIELD_REQUIRED));
$ffForm->addField(new SubmitField("ff_submit", "Create"));
$ffForm->addField(new SubmitField("ff_clear", "Clear"));
$ffForm->addField(new SubmitField("ff_cancel", "Cancel"));
////////// FORM STRUCTURE - END //////////
$ffForm->getParameters();
if (!$ffForm->isEmpty("ff_submit")) {
if ($ffForm->checkValues()) {
// INSERT CODE TO CREATE CONTACT
}
} else if (!$ffForm->isEmpty("ff_cancel")) {
// INSERT CODE FOR CANCEL OPERATION
} else if (!$ffForm->isEmpty("ff_clear")) {
$ffForm->clearAllData();
}
?>
<html>
<head>
<title>New Contact Form</title>
<? require_once(FF_SRC . "/FfIncludes.php"); ?>
</head>
<body>
<? if (!$ffForm->isEmpty("ff_submit") && !$ffForm->getError()) { ?>
<h1>Contact Created</h1>
<? } else if (!$ffForm->isEmpty("ff_cancel")) { ?>
<h1>Contact Creation Cancelled</h1>
<? } else { ?>
<form action="<?= $_SERVER["PHP_SELF"] ?>" method="get">
<h1>New Contact:</h1>
<?= $ffForm->getTableTag() ?>
</form>
<? } ?>
</body>
</html>
Whether you're an expert or beginner web developer, you're probably aware that the source code for creating this form in the conventional way would be a lot longer and more complicated.
Now that we have your attention, please allow us to explain the details of the above source code.
| | | | |
| | | | Part 1: Form Structure | | | | | |
A FfForm is a container class that is used to encapsulate form fields. In the following code snippet, we instantiate a FfForm and add fields for a person's name, email address, phone number and fax number. In addition, we add submit fields for submitting the data and canceling the submission. Complete list of fields.
<?
$ffForm = new FfForm(); // Instantiate a FfForm
// Add a field to the FfForm for retrieving a person's name.
$ffForm->addField(new PersonNameField("name", "Full Name", FORM_FIELD_REQUIRED));
$ffForm->addField(new EmailAddrField("email", "Email", FORM_FIELD_REQUIRED));
$ffForm->addField(new PhoneNumberField("phone", "Phone", FORM_FIELD_REQUIRED));
$ffForm->addField(new FaxNumberField("fax", "Fax", FORM_FIELD_REQUIRED));
// Add a submit button for submitting the form.
$ffForm->addField(new SubmitField("ff_submit", "Create"));
$ffForm->addField(new SubmitField("ff_clear", "Clear"));
$ffForm->addField(new SubmitField("ff_cancel", "Cancel"));
?>
| | | | |
| | | | Part 2: Retrieve Submitted Form Data | | | | | |
Since the FfForm encapsulates all the form fields and data, we only have to make one function call to retrieve the form data from the HTML request object.
<?
$ffForm->getParameters();
?>
| | | | |
| | | | Part 3: Validate the Form Data and Process the Data | | | | | |
When the user clicks the submit button, $ffForm->isEmpty("ff_submit") will return false. When this happens we want to check the form data for errors. If there are no errors then we execute code to create the contact. Typically, this create operation would be an insert into a database. (In the tutorial, Load/Unload from a DB, we will discuss how this can be easily done using FORMfields).
If the user clicks the cancel button, the code for canceling the form is executed. Typically, this cancel operation would be a redirect to another page.
If the user clicks the clear button, all the form data is cleared.
<?
if (!$ffForm->isEmpty("ff_submit")) {
if ($ffForm->checkValues()) {
// INSERT CODE TO CREATE CONTACT
}
} else if (!$ffForm->isEmpty("ff_cancel")) {
// INSERT CODE FOR CANCEL OPERATION
} else if (!$ffForm->isEmpty("ff_clear")) {
$ffForm->clearAllData();
}
?>
| | | | |
| | | | Part 4: Include the CSS and JavaScript Files | | | | | |
The following code includes the FORMfields CSS and JavaScript files. The CSS files control the look and feel of your forms and tables and the JavaScript files provide functions to dynamically manipulate your forms.
<? require_once(FF_SRC . "/FfIncludes.php"); ?>
| | | | |
| | | | Part 5: Display the Form | | | | | |
If the user has clicked "Create" and there is no error, then we display a message saying "Contact Created." Otherwise, if the user has clicked "Cancel," we display a message saying "Contact Creation Cancelled." Otherwise, we just display the form.
<? if (!$ffForm->isEmpty("ff_submit") && !$ffForm->getError()) { ?>
<h1>Contact Created</h1>
<? } else if (!$ffForm->isEmpty("ff_cancel")) { ?>
<h1>Contact Creation Cancelled</h1>
<? } else { ?>
<form action="<?= $_SERVER["PHP_SELF"] ?>" method="get">
<h1>New Contact:</h1>
<?= $ffForm->getTableTag() ?>
</form>
<? } ?>
Note: Typically the cancel and submit operations would cause a redirect to another page, however in this example these operations leave us on the same page. This is why the above code snippet displays more than just the form.
| | | | |
|
