Connect with us

Pay Per Code

Pay Per Code

Drawing HTML Elements with PHP

HTML

Drawing HTML Elements with PHP

PHP is a wonderfully powerful language. It has procedural, as well as, Object Oriented characteristics, and today I’d like to focus on how to leverage PHP’s OOP paradigm with a class that draws HTML elements.

Before I do that though, one way to think of PHP, in this case, is like that of a paint program where the methods to draw the elements on the page will be the objects we create with PHP.

For example, let’s take a look at this class HTML_Elements:

class HTML_Elements {
protected $element, $id, $class, $style;
const space = " ";
function __construct($element, $id, $class, $style) {
$this->element = $element;
$id = '"'.$id.'"';
$this->id = "id=".$id;
$class = '"'.$class.'"';
$this->class = 'class='."$class";
$style = '"'.$style .'"';
$this->style = 'style='."$style".";";
}
}

The constructor for this class, where four parameters are passed, $element, $id, $class and $style, of that element, are what constructs an HTML_Elements object. This resembles what a usual html element might have on a web page.

Then, a __toString() method is written to output those values, in the event debugging is needed:

function __toString(){
$str = '<br>Element: '. $this->element . '<br>id: ' . $this->id .         '<br>class: '.$this->class . '<br>style: '.$this->style;
return $str;
}

Additionally, by creating an object and making some print statements to test the function of our class like so:

$htmlElements = new HTML_Elements("p", "01", "classname",     "background-color:powderblue");
echo "This is the toString method:<br>";
echo $htmlElements."<br>";

We have the following output on a webpage when our browser runs the PHP file:

This is the toString method:

Element: p
id: id="01"
class: class="classname"
style: style="background-color:powderblue";

Now, if we add two more methods drawElement_Start and drawElement_End, we can draw our html elements:

function drawElement_Start($hide) {
$space = $this::space;
$element = $this->element;
$id = $this->id;
$class = $this->class;
$style = $this->style;
switch ($hide) {
case 'hide';
$style = 'style="display:none;"';
return '<'.$element.$space.$id.$space.$class.$space.$style.'>';
default:
return '<'.$element.$space.$id.$space.$class.$space.$style.'>';
}
}
function drawElement_End() {
$element = $this->element;
echo '</'.$element.'>';
}

Finally, the magic happens where we create HTML_Elements objects and draw them:

$htmlElements = new HTML_Elements("p", "01", "classname",     "background-color:powderblue");
echo "This is the toString method:<br>";
echo $htmlElements."<br>";
echo "<br>";
echo $htmlElements->drawElement_Start("");
echo "this is inside a paragraph because it is between start and end.";
echo $htmlElements->drawElement_End();
$htmlElements = new HTML_Elements("p", "01", "classname", "background-color:red");
echo $htmlElements->drawElement_Start("");
echo "this is inside a paragraph because it is between start and end.";
echo $htmlElements->drawElement_End();

Output From Browser:

Output From Chrome Console:

So, as you can see, leveraging PHP’s OOP paradigm, in the case of drawing html elements will certainly have its advantages.

And, even though I have not covered all of the possible implications of this PHP script, surely upon experimenting with the code, you’re likely to see robustness in its use with far ranging applications, extending way beyond just simply drawing html elements on a web page.

Anyway, this concludes today’s tutorial, and check out some of my other post, you’re likely to find something useful in them.

Also, I’ve included the entire class file below if you can’t quite figure out how to put it all together:

<?php
$htmlElements = new HTML_Elements("p", "01", "classname", "background-color:powderblue");
echo "This is the toString method:<br>";
echo $htmlElements."<br>";
echo "<br>";
echo $htmlElements->drawElement_Start("");
echo "this is inside a paragraph because it is between start and end.";
echo $htmlElements->drawElement_End();
$htmlElements = new HTML_Elements("p", "01", "classname", "background-color:red");
echo $htmlElements->drawElement_Start("");
echo "this is inside a paragraph because it is between start and end.";
echo $htmlElements->drawElement_End();

class HTML_Elements {
protected $element, $id, $class, $style;
const space = " ";
function __toString(){
$str = '<br>Element: '. $this->element . '<br>id: ' . $this->id . '<br>class: '.$this->class . '<br>style: '.$this->style;
return $str;
}
function __construct($element, $id, $class, $style) {
$this->element = $element;
$id = '"'.$id.'"';
$this->id = "id=".$id;
$class = '"'.$class.'"';
$this->class = 'class='."$class";
$style = '"'.$style .'"';
$this->style = 'style='."$style".";";
}
function drawElement_Start($hide) {
$space = $this::space;
$element = $this->element;
$id = $this->id;
$class = $this->class;
$style = $this->style;
switch ($hide) {
case 'hide';
$style = 'style="display:none;"';
return '<'.$element.$space.$id.$space.$class.$space.$style.'>';
default:
return '<'.$element.$space.$id.$space.$class.$space.$style.'>';
}
}
function drawElement_End() {
$element = $this->element;
echo '</'.$element.'>';
}
}

Comments

More in HTML

Instead of using ads, I am having you mine for crypto currency to support this site. Here are your stats:

You can start or stop at anytime but please wait for some accepted hashes before you do.

Contributors

Popular Posts

To Top