Building Object-Oriented Web Pages with Inheritance in PHP 5 - Using inheritance to derive a web page generator class (
Page 3 of 4 )
As you'll possibly recall from the previous section, I said that I was going to derive a child class from the prior parent "WebPage" to implement all of its abstract methods, and in consequence, define a class capable of displaying a basic web document.
Based on this premise, below I included the signature of a brand new class, called "HomeWebPage." As its name suggests, it is responsible for creating the front page of a fictional web site. The definition for this class is as follows:
// define concrete 'HomeWebPage' class
class HomeWebPage extends WebPage{
// define default values for page links
private $mainLinks=array('Home'=>'index.php','About
us'=>'about.php','Products'=>'products.php','Contact'=>
'contact.php');
public function __construct($title='Home Page',$content='This
is the default context for HOME web page'){
if(!$title||is_numeric($title)||strlen($title)>256){
throw new Exception('Invalid title for the web page.');
}
if(!$content){
throw new Exception('Invalid contents for the web page.');
}
$this->title=$title;
$this->content=$content;
}
// implement 'buildMetaData()' method
public function buildMetaData(){
$output=<<<EOD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
EOD;
return $output;
}
// implement 'buildStyles()' method
public function buildStyles(){
$output=<<<EOD
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h2{
margin: 0;
font: bold 18px Arial, Helvetica, sans-serif;
color: #000;
}
p{
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
#header{
padding: 2%;
background: #ffc;
}
#navbar{
padding: 1% 2% 1% 2%;
background: #fc0;
}
#navbar ul{
list-style: none;
}
#navbar li{
display: inline;
padding-right: 4%;
}
#navbar a:link,#navbar a:visited{
font: normal 12px Arial, Helvetica, sans-serif;
color: #039;
text-decoration: none;
}
#navbar a:hover{
text-decoration: underline;
}
#mainwrapper{
clear: both;
height: 100%;
overflow: hidden;
background: #eee;
}
#mainwrapper .leftcol{
position: relative;
float: left;
}
#mainwrapper .rightcol{
position: relative;
float: right;
}
#leftbar{
width: 16%;
padding: 2%;
}
#centerbar{
float: left;
width: 55%;
padding: 2%;
background: #fff;
}
#rightbar{
width: 16%;
padding: 2%;
}
#footer{
clear: both;
padding: 2%;
background: #ffc;
}
</style>
EOD;
return $output;
}
// implement 'buildHeader()' method
public function buildHeader(){
$output.=<<<EOD
<title>$this->title</title>
</head>
<body>
<div id="header">
<h2>This is the header section of the web page</h2>
<p>Contents for header section go here.</p>
</div>
EOD;
return $output;
}
// implement 'buildLinks()' method
public function buildLinks(){
$output='<div id="navbar">'."n".'<h2>This is the navigation
bar of the web page</h2>'."n".'<ul>'."n";
foreach($this->mainLinks as $label=>$link){
$output.='<li><a
href="'.$link.'">'.$label.'</a></li>'."n";
}
$output.='</ul>'."n".'</div>';
return $output;
}
// implement 'buildBody()' method
public function buildBody(){
$output=<<<EOD
<div id="mainwrapper">
<div id="leftbar" class="leftcol">
<h2>This is the left column of the web page</h2>
<p>Contents for left column go here..</p>
</div>
<div id="centerbar" class="leftcol">
<h2>This is the center column of the web page</h2>
<p>$this->content</p>
</div>
<div id="rightbar" class="rightcol">
<h2>This is the right column of the web page</h2>
<p>Contents for right column go here.</p>
</div>
</div>
EOD;
return $output;
}
// implement 'buildHeader()' method
public function buildFooter(){
$output.=<<<EOD
<div id="footer">
<h2>This is the footer section of the web page</h2>
<p>Contents for footer section go here.</p>
</div>
</body>
</html>
EOD;
return $output;
}
}
As you can see, the above "HomeWebPage" class is merely a child of the corresponding parent defined in the previous section, and implements all of its prior abstract methods to build the home page of a sample web site.
Of course, in this case the aforementioned "HomeWebPage" class uses a part of its logic to display the different sections of a basic web page, which implies that it deals at a certain level with the visual presentation of the web site in question. But, as you know, this isn't a good practice in general terms, so this issue could be fixed easily by using a template instead of including hard-coded structural markup within some class methods.
However, in this case I'm going to keep the definition of the previous "HomeWebPage" class untouched, so you can see more clearly how an inherited class can be used to build a simple web page.
All right, having clarified this important point, it's time to recapitulate what I have done so far. At this point I derived a child class from the corresponding parent, which comes in handy for displaying the home web page of a fictional site, a process that uses the principle of inheritance.
Nevertheless, I'd like to go one step further and show you how to utilize the same concept, but this time to create another web document of the sample web site in question. Maybe you think that this could be quickly achieved by deriving another subclass from the respective parent, and you'd be right.
But, in this case there's a much better approach to follow. Since the initial "HomeWebPage" class already encapsulates all the logic required to display a web page, it'd be much easier to derive a child from it, and eventually override/overload some of its methods. Now, are you starting to realize how inheritance can be used in a simple fashion to build a complete web site? I bet you are!
So, now that I have generally outlined how a different web page of this fictional web site can be quickly built by using the functionality provided by inheritance, please jump into the next section and keep reading to learn how this process will be performed.
