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>
<html>
<head>
<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="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header id="header">
<h1><!-- TITLE --></h1>
</header>
<section id="article">
<!-- ARTICLE -->
</section>
<section id="sidemenu">
<nav><!-- SIDEMENU --></nav>
</section>
<footer id="footer">
<!-- FOOTER -->
</footer>
</body>
</html>
Code for "index.php" (for explanations, see the comments in code)
<?php
// 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: https://coursesweb.net';
$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="https://coursesweb.net/" 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.