Create and Use in PHP a Simple Template Page

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 = '//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:

//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.

<<-Remove / Get duplicate .. -- Get Relative Path to ..->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which HTML5 tag can be used to embed an external application (SWF, PDF) in web page?

<embed src="flash_game.swf" width="450" height="350" />

Which CSS pseudo-element adds a special style to the first line of a text?

:first-letter :before :first-line

#id:first-line {
  font-weight: bold;
  color: blue;
}

Click on the window object property which gets or sets the URL of current page.

window.location window.self window.status

var url = window.location;
alert(url);

Indicate the PHP function used to get the contents of a file or page and store it into a string.

fopen() file_put_contents() file_get_contents()

$homepage = file_get_contents("http://coursesweb.net/");
echo $homepage;