Practical PHP Tutorial - Master Page I

Chapter 4
Master Page, what is master page? We always here this term whenever we come to server side programming, but what is it? what is the use of it? how and when do we use it?

Well, lets come to our project. We have a structure here so far. Let me give the content of the html of the page's body.

<div class="center-it" id="main-container">
  <table style="width:100%; margin-bottom: 50px;" id="page-holder">
    <tr style="vertical-align: top">
      <td style="width: 250px">
        <div id="div-header"></div>
        <div id="div-category"></div>
      </td>
      <td>
        <div id="div-cpanel"></div>
        <div id="div-menu"></div>
        <div id="div-page">
:::::::::::::::::::::::::::::::::::::::::::::::::
        </div>
      </td>
    </tr>
  </table>
</div>
<div class="center-it" id="div-footer"></div>

The line in the middle (line 12) tells the position in which all our page's or pages' content is going to be.
Now lets answer all the questions asked above. When we are going to have many many pages, and we are, that have the same structure above. Instead of repeating this pattern for every page that will result in reloading the same content for every page which eventuate in increased page-load-time, we separate this common structure into what is called as Master Page. I think this answered all except for "how". Reread if you want to and lets proceed to answer how.

Note: if you know and have used Master Page in ASP, the process in PHP is quiet different and actually reverse.

Create two files in the common folder: 1. header.php, 2. footer.php. These two are, combined, our Master Page.

Cut the text above the line in the index.php page, including the html, script, doctype etc. i.e everthing above the line and paste it into the header.php. Similarly cut all the text below the line and paste it into footer.php file.

Now all we have is a empty index.php file. How is this going to help us? we will see. We have a function in php include() that will include a file into the position where it is requested. Just like C language but has more precision and more use. So what we are going to do is write two include() statements as shown below. You can exclude the comments though.

<?php include("common/header.php"); ?> // Till <div page>
// Page Content
<?php include("common/footer.php"); ?> // </div page> and so on.

So does this work? test it. Run it in your browser (I use url: http://localhost/OnlineStock/). Cool isn't it? we no longer need to write the doctype, html, style, script blah and blah again and again. If you see closer, that thing works just like external css: put all common styles at one place and include into your html, but more position-specific.

Next step: we are going to pass some parameters to the master page. Of course, we don't need same title on every page. We need page-relative titles. Also the relative urls for scripts and styles are liable to be affected if we call them from different location, say folder/folder/index.php. Its not going to be the same and the browser will throw error that it didn't find the specified files. So we are going to pass two parameters.

1. $pp // or page-path that tells the master page the relative path of current file.
2. $pt // or page-title that tells the maser page what is the title of the page.

Include this before the inclusion of the header.php. Now go to header.php (better use a MDI-ed text editor) edit the head tag as follows.

<title><?php echo $pt; ?> - My Trading Center</title>
<link href="<?php echo $pp; ?>styles/style.css" rel="stylesheet" type="text/css">
<script src="<?php echo $pp; ?>scripts/jquery.js" type="text/javascript"></script>
<script src="<?php echo $pp; ?>scripts/script.js" type="text/javascript"></script>

I think you understand whats going on. Now come to the index.php, declare two variables $pp = "";, as this is the home page and no additional path is needed, and $pt = "Home";.

How this works? Lets start from the beginning, in the eyes of php compiler.

1. First create an empty html file.
2. There are two variables declared: $pp and $pt and I don't know where I use them, yet.
3. They want me to include some file from a common/ folder. Let me look up if it is there or not.
4. There it is. Let me copy the content and paste them here.
5. Oh! They use those variables here. They want me to print them in those locations, so let me...
6. I have printed Home inside the title tag at the specified position, same with the variable $pp, though it is empty, I print empty strings
7. Is there anything else? no. So I print rest of the header.php.
8. Come back to index.php. There is nothing to print on next line. (Only comment "// Page Content").
9. Next they want me to go for a file footer.php in the common/ folder. Fetch that and on variables here and print that.
10. The html file the user requested is ready. Send it to the browser and from here on its browser's head ache.

Note: This tells that if don't declare the variables, the php compiler will throw error when it comes across the echo statements. So we must have those declared on every page. What if don't need some variables on some page? we will come to that.
Now in the eyes of browser,

1. That dumb php compiler thinks he can make me wait this long? Hah! here it is, the file I requested.
2. First the client wants all the styles and scripts. Are they located correctly? of course they are, at styles/ and scripts/ location from the index.php.
3. The html is good and let me render it.

Done. This is what goes under the hood of browser and the server. Finally we have what the original index.php file would have given us.

This is the working of master page and we will proceed with this structure further on. Next we will take care of menus, logo and and other stuffs.