Thursday, August 30, 2012

Translate Server side static HTML page into Dynamic HTML page using PHP with OOP concepts

We can split static HTML code into small parts using PHP and then dynamically generate all parts together to view it as a complete web page. Now let us see a static HTML code which belongs to a one particular web page. I name it as "home.html".




In above code I included a CSS file to style the web page to view as very attractive manner. Here is the style sheet code for it.



You can see the number of distinct sections of code exist in the file. Here the HTML head contains cascading style sheet definitions used by the page. The section labeled "page header" displays the company name and logo, "menu" creates the page's navigation bar and "page content" is text unique to this page. Below the HTML code contains the page footer.

Now I explain how to split this file into smaller parts to generate dynamic web page. Here we should have to name the parts page.class.php, home.php.

Before going to the PHP code you need to have some kind of knowledge about Object Oriented Programming. Here I'm not talking about those concepts. But I use those ones.

Designing Classes

Now I suppose that you know some of the concepts behind objects and classes and the syntax to implement them in PHP, it's time to look at how to design useful classes.
Many classes in OOP code will represent classes or categories of real-world objects. Classes you might use in web development might include pages, user interface components, shopping carts, error handling, product categories or customers.
Using this technique you can give consistent look and feel across the different pages of its website. Using classes and the inheritance, we can create a more advanced version of the same site. 

Here I am going to create a Page class. The main goal of this class is  to limit the amount of HTML needed to create a new page. The class should provide a flexible framework for creating new pages. Because I am generating the page from PHP script rather than with static HTML.

Writing the Code for Page class

class Page  { 

}

The class need some attributes.title, content, array of buttons are some of the attribute of that Page class should have.

class Page  {
         public $content;
         public $title = "WOKIS Creations";
         $buttons = array('Home'=>'home.php'
                                     'Contact'=>'contact.php'
                                     'Services'=>'services.php'
                                      'Site Map'=>'map.php'
                                   );
}

To provide some functionality, the class also need operations. 
The main purpose of this class is to display a page of HTML. so need a function called "display()" for it.

public function display()  {
   echo "<html>\n<head>\n";
   $this->displayTitle();
   $this->displayStyles();
   echo "</head>\n<body>\n";
   $this->displayHeader();
   $this->displayMenu($this->buttons);
   echo $this->content;
   $this->displayFooter();
   echo "</body>\n</html>\n";
}

 Breaking up functions like this because it has more advantages. Each function should have to different task to perform. Using inheritance we can override operations. Also we can replace one large display() function, but it is unlikely that will want to change the way the entire page is displayed. It will be much better to break up the display funtionality into a few self-contained tasks and be able to override only the parts that we need to change.
This display() function calls displayTitle(), displayStyles(), displayHeader(), displayMenu() and displayFooter(). That means we need to define these operations.


Here display the complete program in PHP for this.

page.class.php





home.php



Here is the output of the webpage in both techniques (static HTML and PHP)