2009年1月7日 星期三

PHP: Object Oriented Web Forms

As I've gone from project to project over the years I've built up my
personal code library. One piece of code that I've found extremely
useful time and time again is an object oriented class for building web
forms. It allows me to keep consistent looking/acting forms throughout
a web application, rapidly develop new forms, make global changes by
editing a single file, and keep all the logic of a form within one file.


The following code and examples are for php version 5 or higher.


Example 1: The Basics

include("forms.php");
 
function Button1Clicked(&$data,&$error){
$error .= "Field 1 = ".$data["field1"]."<br/>";
$error .= "Field 2 = ".$data["field2"]."<br/><br/>";
$error .= "You clicked Button 1. <br/>";
 
return true;
}
 
$form = new form("myform");
 
$element = new form_element_text("field1","Field 1","This is field 1");
$form->add($element);
 
$form->newline();
 
$element = new form_element_text("field2","Field 2","This is field 2");
$form->add($element);
 
$form->newline();
 
$element = new form_button("Button 1","Button1Clicked");
$form->add($element);
 
$form->run();
Download or View Demo




Example 2: Pre-loading Data

function LoadData(&$data,&$error){
 
// Load initial data here.
$error .= "Data Loaded!!<br/>";
 
return true; // return true to show form and false to not show it.
}
 
...
 
$form = new form("myform", "LoadData"); // Call LoadData on load.
 
...
Download or View Demo




Example 3: Buttons

...
 
function Button1Clicked(&$data,&$error){
$error .= "You clicked Button 1. <br/>";
return true;
}
 
function Button2Clicked(&$data,&$error){
echo "You clicked Button 2. <br/>";
echo "<a href='example3.php'>Click here to go back.</a>";
return false;
}
 
...
 
$element = new form_button("Button 1","Button1Clicked");
$form->add($element);
 
$element = new form_button("Button 2","Button2Clicked");
$form->add($element);
 
$element = new form_button("Button 3");
$element->submit = false;
$element->on["Click"] = "alert('You clicked Button 3!!');";
$form->add($element);
 
...
Download or View Demo




Example 4: Individual Element Styling

Most of the styling is done via the forms.css file but occasionally you'll need to apply a style to an individual element.

...
 
$element = new form_element_text("field1","Field 1");
$element->style = "width: 400px;";
$form->add($element);
 
...
Download or View Demo




Example 5: Validation

Form validation is done through making an element required and/or
applying a regular expression to an element that the value must match.
If you need more complicated validation then you would put that logic
within the function associated with a form_button.

...
 
function Button1Clicked(&$data,&$error){
if ($data["field1"] == strtoupper($data["field1"])){
echo "Form Validated!<br/>";
echo "<a href='example5.php'>Click here to continue.</a>";
return false; // Don't show form.
}else{
$error .= "Field 1 must be all uppercase.<br/>";
return true;
}
}
 
...
 
$element = new form_element_text("field1","Field 1","UPPERCASE only.");
$element->required();
$form->add($element);
 
...
 
$element = new form_element_text("field2","Field 2","Integer value only.");
$element->required();
$element->regex("\d+","Field 2 must be an integer.");
$form->add($element);
 
...
Download or View Demo




Note that Button1Clicked() never gets called until the built-in form validation passes.





Example 6: Other Form Elements

...
 
$element = new form_element_text("field1","text");
$form->add($element);
 
$form->newline();
 
$element = new form_element_password("field2","password");
$form->add($element);
 
$form->newline();
 
$element = new form_element_textarea("field3","textarea");
$element->cols = 50;
$element->rows = 3;
$form->add($element);
 
$form->newline();
 
$element = new form_element_checkbox("field4","checkbox");
$form->add($element);
 
$form->newline();
 
$element = new form_element_select("field5","select");
$element->option("","");
$element->option("option1","Option 1");
$element->option("option2","Option 2");
$form->add($element);
 
$form->newline();
 
$element = new form_element_select("field6","select (multiple)");
$element->multiple = true;
$element->option("option1","Option 1");
$element->option("option2","Option 2");
$element->option("option3","Option 3");
$element->option("option4","Option 4");
$form->add($element);
 
$form->newline();
 
$element = new form_element_radio("field7","radio");
$element->option("option1","Option 1");
$element->option("option2","Option 2");
$form->add($element);
 
...
Download or View Demo




Download the Code


forms.php
The form class to include in your php code.

沒有留言: