PHP: Building a simple web-page using Smarty Template Engine

Smarty is a template engines based on PHP. Smarty Template Engine is used to separate business logic from presentation logic. Business logic placed into .php files whereas presentation layer will be in .tpl (Template Progamming Language) files.

In this article we will develop a simple web-page using Smarty.

Lets take this simple web-page sample.html.

<html>

<head>
	<title>This is simple Smarty demonstration</title>

    <link href="style.css" rel="stylesheet"/>
</head>

<body>
	<div>
    	<div class="outerbox"><div class="leftbox"><strong>S.No</strong></div><div class="middlebox"><strong>Name</strong></div><div class="rightbox"><strong>e-mail</strong></div></div>    
    	<div class="outerbox"><div class="leftbox">1</div><div class="middlebox">Name-1</div><div class="rightbox">name-1@some-domain.com</div></div>
    	<div class="outerbox"><div class="leftbox">2</div><div class="middlebox">Name-2</div><div class="rightbox">name-2@some-domain.com</div></div>
    	<div class="outerbox"><div class="leftbox">3</div><div class="middlebox">Name-3</div><div class="rightbox">name-3@some-domain.com</div></div>
    	<div class="outerbox"><div class="leftbox">4</div><div class="middlebox">Name-4</div><div class="rightbox">name-4@some-domain.com</div></div>
    	<div class="outerbox"><div class="leftbox">5</div><div class="middlebox">Name-5</div><div class="rightbox">name-5@some-domain.com</div></div>
    </div>
</body>

</html>

Here is the code for style.css

div .leftbox,
	.rightbox,
	.middlebox {
	float:left;
	width: 200px;
	border: #06C solid;
}

div .outbox {
	border: #06C solid;
}

div .outerbox {
	clear:both;
}

This example simply display the S.No, Name & e-mail ids of 5 entries on the web-page.

Let’s separate business logic from presentation layer using smarty. Usually presentation logic goes into .tpl files. And business logic will be separated using PHP code.

Here we create page.tpl file and add presentation logic with smarty code. The code looks like below:

<html>

<head>
	<title>This is simple Smarty demonstration</title>
    <link href="style.css" rel="stylesheet"/>
</head>

<body>
	<div>
    	<div class="outerbox"><div class="leftbox"><strong>S.No</strong></div><div class="middlebox"><strong>Name</strong></div><div class="rightbox"><strong>e-mail</strong></div></div>    

		{section name=idx loop=$names}
			<div class="outerbox"><div class="leftbox">{$smarty.section.idx.index}</div><div class="middlebox">{$names[idx]}</div><div class="rightbox">{$emails[idx]}</div></div>
		{/section}
    </div>
</body>

</html>

Now write the business logic in PHP.

<?php
	define('SMARTY_DIR', '/public_html/mysite/includes/smarty/');
	require_once(SMARTY_DIR . 'Smarty.class.php');

	$names = array("Name-1", "Name-2", "Name-3", "Name-4", "Name-5");
	$emailids = array("name-1@some-domain.com", "name-2@some-domain.com", "name-3@some-domain.com", "name-4@some-domain.com", "name-5@some-domain.com");

	$smarty = new Smarty();
	$smarty->assign("names", $names);
	$smarty->assign("emailids", $emailids);
	$smarty->display('page.tpl');
?>

Observe that in PHP code, we have created a smarty object and assign names & email-id arrays to smarty variables. These variables are used in .tpl file. Once the business logic is ready, display the .tpl file.

Leave a Reply