This tutorial shows you how to create very simple a template page (file) that can be used for webpages in PHP.
We'll use two files: "index.php" with PHP code that gets and defines data to be added in page, and "page.tpl" which contains the template, HTML code with expressions that will be replaced with data defined in "index.php".
The expression added in template, into HTML code, has this form (a HTML comment):
<!-- WORD -->
- This expression will not be displayed in the page if you not set in PHP a value to replace it, because it is treaded as HTML comment.

Code for template, added in "page.tpl" (with HTML5)

<!doctype html>
 <meta charset="utf-8" />
 <title><!-- TITLE --></title>
 <meta name="description" content="<!-- META_DESCRIPTION -->" />
 <meta name="keywords" content="<!-- META_KEYWORDS -->" />
 <style>header, footer, section, aside, nav, article {display: block;}</style>
 <!--[if IE]><script src=""></script><![endif]-->

<header id="header">
 <h1><!-- TITLE --></h1>

<section id="article">
<!-- ARTICLE -->

<section id="sidemenu">
 <nav><!-- SIDEMENU --></nav>

<footer id="footer">
<!-- FOOTER -->

Code for "index.php" (for explanations, see the comments in code)

// array with words /keys added in template (in HTML comments)
// these elements (initially empty) will contain data that will replace the HTML comment 
$templ = array('TITLE'=>'', 'META_DESCRIPTION'=>'', 'META_KEYWORDS'=>'', 'ARTICLE'=>'', 'SIDEMENU'=>'', 'FOOTER'=>'');

// get the keys from $templ to be added in RegExp
$templ_k = array_keys($templ);

// RegExp pattern with the expresion used in template
$templ_rgx = '/<!-- ('.implode('|', $templ_k).') -->/i';

// setting / defining data in elements of $templ, that will replace the corresponding comment in template
// these data can be selected from a database, external file, array, etc.
$templ['TITLE'] = 'Free Courses:';
$templ['META_DESCRIPTION'] = 'Description added in meta tag';
$templ['META_KEYWORDS'] = 'php, mysql, html, css';
$templ['ARTICLE'] = 'Article, content added in page body';
$templ['SIDEMENU'] = 'Menu: <ul><li><a href="" title="Free Courses">Free Courses</a></li></ul>';
$templ['FOOTER'] = 'Content added in page footer';

// get the template
$tpl = file_get_contents('page.tpl');

// replace data in template, and output the page content
echo preg_replace_callback($templ_rgx, function($m) { GLOBAL $templ; return $templ[$m[1]]; }, $tpl);

The expression:
$templ_rgx = '/<!-- ('.implode('|', $templ_k).') -->/i';
Sets the RegExp pattern with the words used in template that will be replaced with data defined in PHP, these words are the keys set in the array $templ. They are added in RegExp separated by "|" to create a pattern like this:
/<!-- (WORD_1|WORD_2|WORD_3) -->/i
- This RegExp pattern will match only the HTML comment formed with words added as keys in $templ, so, other HTML comments will not be taken into account.
- The "/i" flag makes preg_replace_callback() to evaluate the expression case-insensitive (without diferences between uppercase and lowercase letters).
- By adding the words for template in array as elements with empty value, will avoid the errors in case if you not set a value for that element, and will add an empty value in HTML code.

Daily Test with Code Example

Which attribute is used in <a> tag for the address of the link?
src href rel
<a href="" title=""></a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr = array(1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Create and Use in PHP a Simple Template Page

Last accessed pages

  1. Flash Games - Free online Games (11187)
  2. Skill Games (3913)
  3. Mahjong Games (13787)
  4. Select the Content of HTML Element (1807)
  5. Mahjong Gardens (4150)

Popular pages this month

  1. Qwop (4763)
  2. Bubbles3 (4404)
  3. Butterfly Kyodai (3133)
  4. Zuma Deluxe (2904)
  5. Backgammon (1486)