I’m trying to design an HTML Form class and I need some help with some concepts.
Buttons, for example, are easy to visualize as “objects” but when I create an HTML form, all I really need is for the code (class, function, method, or whatever I wind up using) to write a bunch of HTML. The button has no properties and the only method is writing itself as HTML code.
Does this mean that it makes more sense to write the button code as a function as opposed to a class? Or should the button instead of being an object be a method of the Form class? The same applies to all the other form objects such as select, radio buttons and check boxes.
BTW, I’m saving the state of radio buttons and other elements in a different object such as a shopping cart.
Which makes a button an object which is where I started but then I noticed that this “object” would only have one method and no properties which is what led me to ask the question if it was worth creating a Button class, a Select class, etc.
SilverBullet, your answer is yes, go for it! Right?
A button has plenty of attributes – I’m assuming these are your properties? ID, name and class for starters. I’m not sure how you’ve structured your classes but here’s what I would do.
class Form_Element_Abstract
{
protected $_attributes;
public function addAttribute($name, $value){}
public function setAttribute($name, $value){}
public function getAttribute($name){}
public function isAttribute($name){}
protected function _buildAttributes(){}
abstract public function render();
}
class Form_Element_Button extends Form_Element_Abstract
{
public function render()
{
$openTag = '<button';
$closeTag = '</button>';
$xhtml = $openTag
. $this->_buildAttributres()
. '/>'
. $closeTag;
return $xhtml;
}
}
If it’s needed you can add wrapper functions around setAttribute to create a function to set ID and name, but it’s extensible so can set any attribute that a button has.
Thanks for the code sample. I’ve not structured anything yet, I write mostly procedures and I’m still trying to get my head around OOP.
Looking at your code I think that the issue to solve is nesting a group of tags inside other tags (radio buttons inside a field set, options inside a select), and all these tags inside the form tag in addition to populating the tags with name=value pairs (attributes). The class could be a lot more general than just a form builder.
An article I read recently suggested that the most efficient way to pass parameters to an object is to pass a single associative array and that already has the name=value pairs.
That’s good because I was looking for a place to discuss OOP. I recently upgraded myself to php 5 and I’m anxious to leant to use the object model. I’ve been playing around with OOP for a long time but I never used it for serious work until recently because I have a hard time conceptualizing programming objects as you can see from my trashing around with this form thing.
The only production object code I have written is a File class that manages various types of files: mail attachments, uploads, downloads, file storage in MySQL.
…because that’s what Application Design is about.
For me, Application Design is 40% user interface, 40% data structure. You can use a multitude of tools to get there.
It depends. Making the form element an object, rather than a method, you gain the advantage of polymorphism - Which is really just a type of decoupling. Decouplings are good if they are used in the proper places, but they add unnecessary complexity, if they are placed in the wrong places. In this case, it’s pretty common to make the form elements objects, but you might want to start out with a less flexible - simpler - design, and change it when you see the need.
I don’t see the need to have a class for each form element so I simplified your code a bit. My version has a single Tag class and the constructor is passed the actual tag (input, button, etc.):
<?php
class Form
{
protected $sAction;
protected $sMethod;
protected $aTags = array();
public function __construct($sAction, $sMethod = 'post')
{
$this->sAction = $sAction;
$this->sMethod = $sMethod;
}
public function addTag(Tag $oTag)
{
$this->aTags[] = $oTag;
}
public function render()
{
foreach ($this->aTags as $oTag)
{
$sTags .= $oTag->render() . "\\r\
";
}
return sprintf(
'<form action="%s" method="%s">
%s
</form>',
$this->sAction,
$this->sMethod,
$sTags
);
}
}
class Tag
{
protected $sTag;
protected $sDisplayText;
protected $aAttributes;
public function __construct($sTag, $sDisplayText = '')
{
$this->sTag = $sTag;
$this->sDisplayText = $sDisplayText;
}
public function addAttribute($sName, $mValue)
{
$this->aAttributes[$sName] = $mValue;
}
public function render()
{
if (is_array($this->aAttributes))
{
foreach ($this->aAttributes as $sName => $mValue)
{
$sAttributes .= sprintf('%s="%s" ', $sName, $mValue);
}
}
if ($this->sDisplayText == '')
{
return sprintf(
'<%s %s/>',
$this->sTag,
$sAttributes
);
} else {
return sprintf(
'<%s %s>%s</%s>',
$this->sTag,
$sAttributes,
$this->sDisplayText,
$this->sTag
);
}
}
}
$oForm = new Form('/users/login/');
$oUsernameField = new Tag('input');
$oUsernameField->addAttribute('type', 'text');
$oUsernameField->addAttribute('name', 'username');
$oBr = new Tag('br');
$oPasswordField = new Tag('input');
$oPasswordField->addAttribute('type', 'password');
$oPasswordField->addAttribute('name', 'password');
$oSubmitButton = new Tag('button', 'Click Me!');
$oSubmitButton->addAttribute('type', 'submit');
$oSubmitButton->addAttribute('name', 'submit');
$oSubmitButton->addAttribute('value', 'login');
$oForm->addTag($oUsernameField);
$oForm->addTag($oBr);
$oForm->addTag($oPasswordField);
$oForm->addTag($oBr);
$oForm->addTag($oSubmitButton);
echo $oForm->render();
/*
<form action="/users/login/" method="post">
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit" name="submit" value="login" >Click Me!</button>
</form>
*/
?>
Would you be kind enough to explain this line of code
public function addTag(Tag $oTag)
I don’t understand the function of the class name parameter it takes.
A class for each element because each element separate object. You don’t want to over simplify the relation between objects. It will come back to bite you eventually.
// THis
$oUsernameField = new Tag('input');
$oUsernameField->addAttribute('type', 'text');
$oUsernameField->addAttribute('name', 'username');
// Become this
Tag::get('input')->addAttribute('type', 'text')->addAttribute('name', 'username');
// add $attribs so you can add your attributes from your constructor
public function __constructor($sTag, array $attribs = null)
{}
// Factory pattern.
public function get($sTag, array $attribs = null)
{
return new Tag($sTag, $attribs);
}
public function addAttribute($name, $value)
{
// Keep the attributes as an array until you need it rendered
$this->_attribs[$name] = $value;
returh $this; // daisy chained
}
One more thing. Your tag class shouldn’t be concerned with the over content. It’s purpose is basically to handle tags, i.e. to alter and render a tag with it’s attributes. If you want to render an entire set of tags then that’s a different class all together. In any case I thought this was about forms? O.o
Most tags have the same structure, a tag name, zero or more attributes and optional content. I don’t see why these would need separate objects. But there are specialized tags, I can think of three: select, radio, and checkbox, that do need their own classes which I plan on building.
