The All New Smarty Template Inheritance.

The day I started my journey in PHP, smarty was an inevitable part of it. For me life without smarty is something which I just cannot imagine.

The PHP programming language is great for code development but when mixed with HTML, the syntax of PHP statements can be a mess to manage. Smarty makes up for this by insulating PHP from the presentation with a much simpler tag-based syntax. The tags reveal application content, enforcing a clean separation from PHP (application) code. No PHP knowledge is required to manage Smarty templates.

Many a times, maintaining access levels and roles on HTML pages was still a pain in the neck with just PHP and smarty. But the latest version of Smarty, introduces a new concept “TEMPLATE INHERITANCE”.
With template inheritance, in a high level sense, it is like having ‘Master Pages ‘, and ‘User Controls’ in .Net. For those who are not sure of that, it’s like having a LAYOUT.HTML which can take sections or blocks of data/html into it depending on the way we instruct Smarty to fetch the blocks.

Smarty site gives a very simple real life example for understanding the power of Inheritance.

The challenge:

Let’s say we are creating an HTML page, and it requires some custom Javascript/CSS files loaded within the of the document. The problem is that this is defined in the header.tpl, which was included further up the page. There are many ways to address this, but they can get quite messy. Let’s make this task an easy one, with Template Inheritance, new to Smarty 3.
Before template inheritance, we were stuck with using {include …} tags to share content such as headers and footers. Here is an example:

Example without Inehritance:

Header.tpl
<html>
<head>
  <title>{$title|default:"Default Page Title"}</title>
</head>
<body>
footer.tpl
</body>
</html>
mypage.tpl
{include file="header.tpl" title="My Page Title"}
My HTML Page Body goes here
{include file="footer.tpl"}

Result : output of mypage.tpl

<html>
<head>
  <title>My Page Title</title>
</head>
<body>
My HTML Page Body goes here
</body>
</html>

Now let’s rewrite this with template inheritance:

layout.tpl
<html>
<head>
  <title>{block name=title}Default Page Title{/block}</title>
</head>
<body>
{block name=body}{/block}
</body>
</html>
mypage.tpl
{extends file="layout.tpl"}
{block name=title}My Page Title{/block}
{block name=body}My HTML Page Body goes here{/block}
output of mypage.tpl
<html>
<head>
  <title>My Page Title</title>
</head>
<body>
My HTML Page Body goes here
</body>
</html>

Instead of managing our page layout in several files (header.tpl, footer.tpl, etc.), we now manage it in one cohesive template (layout.tpl), and define the changeable blocks of content with {block …} tags. Now you can simply extend the layout.tpl (which basically copies it) and then customize any of the defined block elements. You can have any number of child templates chained together, thus the concept of inheritance.

So back to our initial challenge, how do we address the need to have custom Javascripts/CSS loaded in the header? Simply add a new block to the layout.tpl, and customize it in the child template:

layout.tpl
<html>
<head>
  <title>{block name=title}Default Page Title{/block}</title>
  {block name=head}{/block}
</head>
<body>
{block name=body}{/block}
</body>
</html>
mypage.tpl
{extends file="layout.tpl"}
{block name=title}My Page Title{/block}
{block name=head}
  <link href="/css/mypage.css" rel="stylesheet" type="text/css"/>
  <script src="/js/mypage.js"></script>
{/block}
{block name=body}My HTML Page Body goes here{/block}
output of mypage.tpl
<html>
<head>
  <title>My Page Title</title>
  <link href="/css/mypage.css" rel="stylesheet" type="text/css"/>
  <script src="/js/mypage.js"></script>
</head>
<body>
My HTML Page Body goes here
</body>
</html>

As you can see, we can now easily customize header content from the child template. This is the basics of template inheritance. It cleans up template management, and makes tough problems trivial!

This example can essentially be extended to form the basis of Access level and roles management in template level, all that would be needed is a high level planning of the layout.tpl right during the design phase itself ! 

Advertisements

About mytechlifedays

Its been a wonderful learning period over the last 6 years in the IT industry , getting exposed to whole lot of technologies and ideas. The hurdles and the crisis that came along have been wonderful experience ... And now its time to pen them down so that let some others execute faster and easily with these information .....
This entry was posted in PHP, Smarty and tagged , , , . Bookmark the permalink.

Leave a Reply ! It would be always appreciated ! :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s