Home arrow PHP arrow Page 5 - Building a Web Page Controller for Simulating the Model-View-Controller Schema in PHP

Putting the MVC schema to work: generating style sheets on the fly - PHP

If you’re one of those PHP developers that want to extend your background in object-based applications, then this series might be quite attractive to you. In these three tutorials (of which this is the second), you’ll learn how to simulate a simple Model-View-Controller schema, which can be easily expanded to construct more complex relationships between the different entities, in this case applicable specifically to PHP classes.

TABLE OF CONTENTS:
  1. Building a Web Page Controller for Simulating the Model-View-Controller Schema in PHP
  2. Creating the first component of the schema: defining a web page controller class
  3. Creating a real-world model: defining a web page generator class
  4. Completing the MVC schema: defining a style sheet generator class
  5. Putting the MVC schema to work: generating style sheets on the fly
By: Alejandro Gervasio
Rating: starstarstarstarstar / 11
August 14, 2006

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

In order to demonstrate how the MVC schema can be used to attach different style sheets to the web page created by the respective “WebPage” class, first I’ll define three sample style files. As you’ll see, these styles will be displayed dynamically, based on the instructions given originally by the "PageController" class.

In consonance with the concepts that I deployed before, here are the respective definitions of the three sample CSS files:

“styles1.css” file

body{
    margin: 0;
    padding: 0;
    background: #fff;
}
h1 {
    font: bold 22px Arial, Tahoma;
    color: #000;
    margin: 0;
}
#header{
    height: 100px;
    background: #9c0;
}
#navbar{
    background: #cfc;
    padding: 4px 0 4px 20%;
}
#navbar ul{                  
    display: inline;
}
#navbar li{
    list-style-type: none;    
    display: inline;
}
#navbar a, #navbar a:visited{ 
    display: block;
    float: left;
    width: 100px;
    height: 15px;
    padding: 2px 0 0 0;
    margin-right: 4px;
    font: normal 11px Tahoma, Arial;
    color: #000;
    text-align: center;
    text-decoration: none;
    border: 1px solid #000;
}
#navbar a:hover{
    background: #fff;
}
#leftcol{
    float: left;
    width: 20%;
    height: 500px;
    background: #9c0;
}
#centercol{
    float: left;
    width: 58%;
    height: 500px;
    background: #fff;
}
#rightcol{
    float: right;
    width: 20%;
    height: 500px;
    background: #9c0;
}
#footer{
    clear: left;
    height: 20px;
    background: #cfc;
}

“styles2.css” file

body{
    margin: 0;
    padding: 0;
    background: #fff;
}
h1 {
    font: bold 22px Arial, Tahoma;
    color: #000;
    margin: 0;
}
#header{
    height: 100px;
    background: #f60;
}
#navbar{
    background: #cfc;
    padding: 4px 0 4px 20%;
}
#navbar ul{
    display: inline;
}
#navbar li{
    list-style-type: none;
    display: inline;
}
#navbar a, #navbar a:visited{
    display: block;
    float: left;
    width: 100px;
    height: 15px;
    padding: 2px 0 0 0;
    margin-right: 4px;
    font: normal 11px Tahoma, Arial;
    color: #000;
    text-align: center;
    text-decoration: none;
    border: 1px solid #000;
}
#navbar a:hover{
    background: #fff;
}
#leftcol{
    float: left;
    width: 20%;
    height: 500px;
    background: #f60;
}
#centercol{
    float: left;
    width: 58%;
    height: 500px;
    background: #fff;
}
#rightcol{
    float: right;
    width: 20%;
    height: 500px;
    background: #f60;
}
#footer{
    clear: left;
    height: 20px;
    background: #cfc;
}

“styles3.css” file

body{
    margin: 0;
    padding: 0;
    background: #fff;
}
h1 {
    font: bold 22px Arial, Tahoma;
    color: #000;
    margin: 0;
}
#header{
    height: 100px;
    background: #9cf;
}
#navbar{
    background: #cfc;
    padding: 4px 0 4px 20%;
}
#navbar ul{
    display: inline;
}
#navbar li{
    list-style-type: none;
    display: inline;
}
#navbar a, #navbar a:visited{
    display: block;
    float: left;
    width: 100px;
    height: 15px;
    padding: 2px 0 0 0;
    margin-right: 4px;
    font: normal 11px Tahoma, Arial;
    color: #000;
    text-align: center;
    text-decoration: none;
    border: 1px solid #000;
}
#navbar a:hover{
    background: #fff;
}
#leftcol{
    float: left;
    width: 20%;
    height: 500px;
    background: #9cf;
}
#centercol{
    float: left;
    width: 58%;
    height: 500px;
    background: #fff;
}
#rightcol{
    float: right;
    width: 20%;
    height: 500px;
    background: #9cf;
}
#footer{
    clear: left;
    height: 20px;
    background: #cfc;
}

All right, after defining the three CSS files that you saw before, take a look at the following example, which uses the first style file, and then renders the web page in question:

// display web page with the first style sheet
try{
    $pageController=new PageController('styles1');
    $webPage=new WebPage($pageController);
    $webPage->doHeader();
    $webPage->doBody();
    $webPage->doFooter();
    $styleGenerator=new StyleGenerator($webPage);
    echo $styleGenerator->generateStyle();
}
catch(Exception $e){
    echo $e->getMessage();
    exit();
}

As you can see, the above script shows how the “PageController” object determines what style sheet to use when rendering the corresponding web page. The result of this code snippet can be appreciated in the screen shot below:

Similarly, the other two style sheets can be attached to the web document as shown below:

// display web page with the second style sheet
try{
    $pageController=new PageController('styles2');
    $webPage=new WebPage($pageController);
    $webPage->doHeader();
    $webPage->doBody();
    $webPage->doFooter();
    $styleGenerator=new StyleGenerator($webPage);
    echo $styleGenerator->generateStyle();
}
catch(Exception $e){
    echo $e->getMessage();
    exit();
}

// display web page with the third style sheet

try{
    $pageController=new PageController('styles3');
    $webPage=new WebPage($pageController);
    $webPage->doHeader();
    $webPage->doBody();
    $webPage->doFooter();
    $styleGenerator=new StyleGenerator($webPage);
    echo $styleGenerator->generateStyle();
}
catch(Exception $e){
    echo $e->getMessage();
    exit();
}

Definitely, you’ll have to agree with me that this simple MVC schema really works. Try creating more style sheets and see what happens in each case. The experience is really worthwhile!

Final thoughts

Unfortunately, we’re finished now. Over this second part of this series, I demonstrated how to implement the Model-View-Controller schema with PHP, by setting up a simple example that shows how to attach different style sheets to a given web document, based on the instructions given by a page controller.

If this example wasn’t enough for you, there’s still more material to learn. In the last tutorial, I’ll show you how to use an MVC-based object relationship to produce disparate outputs from returned MySQL result sets. See you in the last part! 



 
 
>>> More PHP Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

PHP ARTICLES

- Hackers Compromise PHP Sites to Launch Attac...
- Red Hat, Zend Form OpenShift PaaS Alliance
- PHP IDE News
- BCD, Zend Extend PHP Partnership
- PHP FAQ Highlight
- PHP Creator Didn't Set Out to Create a Langu...
- PHP Trends Revealed in Zend Study
- PHP: Best Methods for Running Scheduled Jobs
- PHP Array Functions: array_change_key_case
- PHP array_combine Function
- PHP array_chunk Function
- PHP Closures as View Helpers: Lazy-Loading F...
- Using PHP Closures as View Helpers
- PHP File and Operating System Program Execut...
- PHP: Effects of Wrapping Code in Class Const...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: