Baglan Dosmagambetov
2003-03-13
No web programming is possible without somw way of interaction between the visitor of the web page and the server-side program, be it in PHP or anything else. Flexibility of HTML is enhanced with various 'form' elements thru which wide variety of user input can be accomodated.
Majority of server-side tools now offer easy ways for fetching that 'request' data. PHP used to put those in 'global' scope which posed security problems but now it comes with that option disabled and latest recommentation advises to use the $_GET and $_POST global variables to fetch the data. In fact it is the last approach which I've assumed when I developed code for "database table handlers" described in an aricles here.
For simple input controls like text fields, writing down the HTML code for the control is enough but in some cases the raw data should be pre-processed. Imagine a drop-down list control where values should be fetched from the database. In those cases for the sake of clarity and to spare you as a programmer chore of writing and maintaining the code, implementing some functionality for showing such controls can come handy.
This article is primarily for PHP programmers and all the examples are in PHP. Nevertheless, ideas behind this articles should be easily applicable to other languages as well. HTML knowledge is also assumed.
HTML features various form controls allowing as to implement some simple interaction with the server-side program. Those controls are:
I see 2 basic functionality that can be associated with those:
Taking tihs knowledge as a base let's proceed to the next chapter and see just how can it be used to buile OO form controls.
OO approach is all about classes and classes in ters have:
What kind of properties can an HTML form control have? Consider "text" control; it has 2 properties:
and these two are the base properties for all the HTML form controls.
Form controls, as I mentioned above, have the basic functionality for allowing user to enter some data. But after the data is entered, in most cases it is also shown back. This assumption brings us to these 2 methods:
Now let's write an example text field control then:
<?php
class TextfieldControl
{
var $name;
var $value;
function TextfieldControl( $name, $value )
{
$this->name = $name;
$this->value = $value;
}
function printValue()
{
echo $this->value;
}
function printControl()
{
?>
<input type="text" name="<?= $this->name ?>"
value="<?= $this->value?>">
<?
}
}
?>
Now let's see how would this control be used in HTML form:
<?php
$textfieldControl = new TextfieldControl( "example", "Testing..."
);
?>
...
<form>
...
<? $textfieldControl->printControl() ?>
...
</form>
And value of the text field is shown simply as:
<? $textfieldControl->printValue() ?>
For the textfield control this method may be considered an overkill but let now see how the same approach can be used with dropdown lists and radio groups.
Let's start with the control. Ưn drop-down lists we would need the values and titles for the items to be shown. I add a new property 'items' which is assumed to be and array consisting of arrays with keys 'id' and 'title'.
<?php
class DropdownControl
{
var $name;
var $value;
var $items = array();
function DropdowsControl( $name, $value, $items )
{
$this->name = $name;
$this->value = $value;
$this->items = $items;
}
/**
* Will print the title of item with 'id'='value'
*/
function printValue()
{
foreach( $this->items as $item )
if ( $item['id']==$this->value )
echo $item['title'];
}
function printControl()
{
?>
<select name="<?= $this->name ?>">
<?
foreach( $this->items as $item )
{
?>
<option value="<?= $item['id'] ?>"<? if ( $item['id']==$this->value)
echo " selected" ?>><?= $item['title'] ?></option>
<?
}
?>
</select>
<?
}
}
?>
Let's now see how is it used in a program:
<?php
// We will extend the base class to present months of the year:
class MonthsControl extends DropdownControl
{
var $items = array
(
array( 'id'=>'1', 'title' => 'January' );
array( 'id'=>'2', 'title' => 'February' );
array( 'id'=>'3', 'title' => 'March' );
array( 'id'=>'4', 'title' => 'April' );
array( 'id'=>'5', 'title' => 'May' );
array( 'id'=>'6', 'title' => 'June' );
array( 'id'=>'7', 'title' => 'July' );
array( 'id'=>'8', 'title' => 'August' );
array( 'id'=>'9', 'title' => 'September' );
array( 'id'=>'10', 'title' => 'October' );
array( 'id'=>'11', 'title' => 'November' );
array( 'id'=>'12', 'title' => 'December' );
);
/**
* New contructor will allow to reduce the number of arguments to 2
*/
function MonthsControl( $name, $value )
{
$this->name = $name;
$this->value = $value;
}
}
?>
That's it. To print it in a form all is needed is to create a new class and call it's 'printControl' method:
<?php
// Default value would be 'January'
$monthsControl = new MonthsControl("month",1);
?>
<form>
...
<? $monthControl->printControl() ?>
...
</form>
Once the value is submitted, showing it is as easy as:
<?php
$monthsControl = new MonthsControl("month",$month);
$monthsControl->printValue();
?>
Radio groups are almost the same way as the drop-down lists. The difference is that instead of 'options' in 'select' control you have many 'radio' controls with the same 'name' attribute.
<?php
class RadiogroupControl
{
var $name;
var $value;
var $items = array();
function RadiogroupControl( $name, $value, $items )
{
$this->name = $name;
$this->value = $value;
$this->items = $items;
}
/**
* Will print the title of item with 'id'='value'
*/
function printValue()
{
foreach( $this->items as $item )
if ( $item['id']==$this->value )
echo $item['title'];
}
function printControl()
{
foreach( $this->items as $item )
{
?>
<input type="radio" name="<?= $this->name ?>"
value="<?= $item['id'] ?>"<? if ( $item['id']==$this->value)
echo " checked" ?>><?= $item['title'] ?><br>
<?
}
}
}
?>
Very close to the DropdownControl, isn't it? In fact I realized that both of them could be derived from a common parent class. Therefore you can refer to the examples above - just not to copy and paste the code from above :).
I hope after reading this article you share my enthusiasm about OO controls. There is no reason not to take the method further and using methods described here in couple with database table handlers (my article about them here) move on to the automatic form generation.
Hope this article proved to you.