Easy templates in PHP(the basics)

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

Say depending on some parameter(say page_id) site displays different pages(and these pages are saved in folder "pages", depending on project these pages may be say posts saved in database like MySQL). Say we have two pages "page1.html" and "page2.html"(if page_id is 1 "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 it where the content has to be displayed). So at this moment we have file tree:

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

The code in "index.php" at this moment would be(Say the site front end consists from 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 coding and design process synchronization becomes more and more complex. Say designer added couple of divs(for some blocks etc) and now the php code has to be moved or edited to fit the changes made. Designer has to watch out for not to mess up with php code and then php coder has to navigate again in html code again and edit php code to fit the changes.

On the other hand if you'd be using code and design separation 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 echo it in the place where you put it. for designer now it's easier to move singe php line instead of huge php scripts through html).

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 "index.t.php" and put there php tags(something like 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(page_id) value loads page content in buffer, then in 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 $content 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>
<a href="?page_id=2">page2</a>
</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 $pages[$page] is sent to buffer
include_once $pages[$page];
$content = ob_get_contents(); //The content from page(saved in buffer) is saved in $content
ob_end_clean();

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

?>