CodeSteps

Python, C, C++, C#, PowerShell, Android, Visual C++, Java ...

PHP – Building a web-page using Smarty Template Engine

Smarty is a template engine, written in PHP. Smarty Template Engine is used to separate business logic from presentation logic. Business logic is placed into .php files, whereas the presentation layer will be in .tpl (Template Programming Language) files.

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

Let’s 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 displays the S.No, Name & e-mail ids of 5 entries on the web page.

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

Here we create the page.tpl file and add presentation logic with Smarty code. The code looks like the 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 assigned names & email-id arrays to smarty variables. These variables are used in the .tpl file. Once the business logic is ready, display the .tpl file.

PHP – Building a web-page using Smarty Template Engine

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top