Easy PHP templates

Here I want to describe one of the easy ways of separating code from layout-design. Say we have a "index.php" file and there is html+PHP code in it(which we want to separate to make it, as minimum, easy for the designer and the programmer work on design and program code without mixing them and giving them the ability to work at the same time [assuming that the structure of web site is made -- that gives both of them the ability to work on their respective files without waiting for the other to finish]).

Depending on some parameter (say page_id), the site displays different pages (these pages are saved in the folder "pages". Depending on the project these pages may be data/text saved in a database like MySQL). We have two pages "page1.html" and "page2.html" (if page_id is 1, then "index.php" loads "page1.html" and echos it where the content has to be displayed and if page_id is equal to 2 "index.php" loads "page2.html" and echos the content to be displayed). So at this moment we have file tree which would look like this:

\root
|
|-\pages
| |-page1.html
| |-page2.html
|
|-|index.php

The code in "index.php" at this moment could be the index page for the site having a front end consisting of menu div and content div where the pages are loaded:

<div id="menu">
<a href="?page_id=1">page1</a>
<a href="?page_id=2">page2</a>
</div>
<div id="content">

<? php
$page = $_GET['page_id'];

$pages[1] = "pages/page1.html";

$pages[2] = "pages/page2.html";

require_once($pages[$page]);
?>

</div>


As you can see if the layout and php code logic gets more complex it becomes difficult to navigate through code plus the coding and design process synchronization becomes more and more complex. Suppose the designer added couple of div's (for some added content, navigations, etc) and the php code has to be moved or edited to fit the changes made, the Designer has to watch out not to mess up the php code and then the php coder has to navigate again in the html page code again and then edit the php code to fit the changes.

On the other hand if you'd be using a system where the code and design are separate, there would be only one php line in design file( echo $content ). You put what you want in the variable $content and then the php line( echo $content) in design file would echo it in (Would display the content that the variable stores. For the designer, now it's easier to move a singe php line instead of huge pile of php scripts through html file).

After separating code and design from index.php we'll have:


\root
|
|-\pages
| |-page1.html
| |-page2.html
|
|-|index.php
|-|index.t.php

We'll put all HTML in the "index.t.php" and put the php tags (which acts as placeholders where the page content will be displayed. In our case echo $content) which will echo HTML generated in index.php before loading "index.t.php" and sending it to browser.

Here is the logic:

1. index.php gets parameters
2. index.php depending on parameter i.e (page_id) value loads page content in the buffer, then in a variable say $page_content.
3. index.php asignes $page_content value to $content.
4. index.php loads template file.
5. in index.t.php echo's $content i.e echoes the page content and the page is sent to browser.

Now index.t.php looks like:

<div id="menu">
<a href="page_id=1">page1<a href="?page_id=2">page2</div>
<div id="content">
<?php echo $content;?>
</div>

And the index.php:

<?php
$page = $_GET['page_id'];
$pages[1] = "pages/index1.html";
$pages[2] = "pages/index2.html";

ob_start(); //The content from including the $pages[$page ] is sent to the buffer

include_once $pages[$page];

$content = ob_get_contents(); //The content from page (saved in buffer) is saved in the variable $content

ob_end_clean();

include_once 'index.t.php'; //The template file is loaded and the content sent

?>