Just opening your editor and writing Smarty tags with variables supplied by programmers will never make you a top designer. As a designer, you should be familiar with these terms and processes before you start.
Caching: This is the process of temporarily storing the output and using it from this storage when necessary. Caching increases Smarty’s performance greatly as it avoids extra calculation for a Smarty template and thus reduces the script execution time. Caching gives Smarty an edge over other template engines.
Optimization: This is the process of removing overload from your browser and allowing your template to work well with minimal memory. Simply reducing the size of your page is not optimization. You should also take care of extra images and extra HTML code for your design. For example, the navigation bar is a part of website that hardly changes itself dynamically page by page. Hence, you should leave it as a separate component and ask your programmer to cache it.
Stylesheet (Cascading Style Sheets or CSS): This is a language for formatting the output of HTML tags. As a designer, you must have a strong grounding in stylesheets. In older days, people used <table> to design their site. These days, they use <div> instead. With <div> and CSS you have full control over the placement of objects and can design liquid layouts according to your need. <div> and CSS give you maximum control over your website and increase the reusability of your template components. In addition, optimized CSS upgrades your site for faster loading and less bandwidth consumption. CSS also allows you to use shorthand style, which is an extra benefit.
Debugging: This is the process of eliminating the errors, bugs, and bad code that give a wrong result. As a designer, you should be capable of debugging your templates. Smarty has its own debug capability in the form of a debug console. While designing, you will realize that most errors occur when your programmers supply you with a lot of data using nested arrays and you have to iterate through them to output a fantastic result. If any error occurs, you have to check and recheck your template to find out where the error occurred. The Smarty debug console helps you to analyze instantly what your programmers supplied you and identify the parameter(s) that caused the error. Smarty lets you debug your template as intuitively and simply as possible.
JavaScript: You can embed JavaScript in your templates. However, for the sake of optimization, separate the JavaScript into another file and link to that file with the <script> tag. This will optimize your template and the browser will load this JavaScript file from cache and not from the server. Take extra care while embedding JavaScript in your template to avoid compile-time bugs.
Object-Oriented Programming (OOP): As I have already mentioned, if you have some basic programming knowledge, it will help you in template design. You may ask “How?” Well, Smarty is a templating engine that allows your programmer to pass arrays and nested arrays, which you can access in three styles, normal index style, associative style, or high-level object-oriented style. However, that’s not where your knowledge about OOP helps you. You will be surprised to know that Smarty allows programmers to pass an entire object (a class as an object), which you can handle in your template. The benefit of this is that you can access attributes and methods of this object inside your template. You can even pass parameters from your template to that object.
Plug-ins and Modifiers: A designer must know what modifiers and plug-ins are. These are simple functions that work with the Smarty engine as embedded objects. Smarty lacks some features in order to maintain its simplicity and extensibility, but it gives you full control over extending it. If you ever feel that you need to do some special processing with your variable, content, or the whole template then you can ask the programmers to develop a plug-in or modifier to meet your requirement. We will go through the detail of extending Smarty later in this book. Nevertheless, let’s understand what plug-ins and modifiers are. A plug-in is a special function that allows you to modify a whole block of content inside a template or to add a complete new tag to your Smarty engine. Modifiers are functions that simply modify the variable content.
Basic programming knowledge: Besides being a templating engine, Smarty is also a new language for templating. It has all the key features of a programming language. Hence, Smarty is not very easy and you should spend some studying it. If basic concepts of programming like logic development, loops, conditional flow, and array manipulation are totally unknown to you, please study them carefully. A template, unlike WYSIWYG HTML design, requires experience, regular practice, and foresight.
Reusability is a common concept that a Smarty template designer can benefit from. Firstly, let’s see what reusability is. It is the process of designing a component or object in such a way that you can use it repeatedly in different projects either as it is or with a simple modification. Here, by components, we mean important, individual parts of your web page.
Let us assume you design a template that represents an entire page and contains a menu bar, header, footer, body, banner rotator, calendar, news rotator, and so on. A template can contain many components in a single page. However, this kind of template wouldn’t be standard in the context of modern web design style, and as such, is not optimized. The following code snippet is a typical example of such a non-structured but working template:
<HTML>
<body>
{code for banner}
{code for menu bar}
{code for body} //inside this there are {code for news
rotator} and {code for advertisement}
{code for footer}
</body>
</HTML>Now let’s design another page with a slight modification. You will again copy and paste most of the page and change the <body> part, give your template to another designer in your team and tell him or her to design a third page with a slight modification in the news rotator. He or she will have to study your whole template and understand which portion of your template is responsible for news rotation. If your template is filled with many business logic sections, it’s a bit of a hassle for him or her. How can you help your other programmers not to copy and paste every component in their every template? Split them up into components. Design separate templates for each section and integrate them in your final template. Look at the structure below:
{include your header template}
{include your menu bar template}
{include your body template}
{include your footer template}Moreover, inside your body template just include your {news rotator template} and {advertisement template}. What benefit do you get if you follow this style? Let’s see.
- When you need something to be changed, just change the component. No need to spend extra time on studying, and aligning the complete template code.
- More structured to understand.
- Each component is individually reusable. Suppose one of your co-developers needs just the news rotator part; he or she can simply include your news rotator component.
- This will help you while designing by increasing concentration on each part.
These are more or less all the benefits, but the most important benefit is reusability. Don’t overlook component separation—it will help you and your team to save a lot of time while modifying and extending your site.
The diagram above clearly illustrates how you can reuse your components in different templates. Developer A developed a template that uses three components and Developer B developed a template that uses four components. Both templates share two components between them. If there are a huge number of templates, then this process will definitely save your many nights’ sleep.
However, there is a pitfall in this style. If you follow this style, you need to assign only one person for a single component. It’s not a good practice to have more than one person designing a single component.
You already have some idea of splitting a web page into components. It will help if we take a closer look before proceeding further. Let’s see components in action. Here is a screenshot of the Packt website.
Assuming this is a sample page of your site, let’s define which could be the components. Can you figure out how many components we can divide the page into? Let’s start one by one.
- Banner with embedded menu bar
- Left Navigation Panel
- A small navigation menu
- A search box with a newsletter subscription box
- News rotator
- Body
- General heading
- Recent book description rotator
- Right Panel
- Simple News rotator
- Footer
We can split the whole page into these components. Note that there are three news rotators in the page: in the left panel, in the body (as a book description rotator), and in the right panel. Just this single page reuses a news rotator component three times with a different look-and-feel using CSS classes.
Let’s look at a typical webpage and the components it usually contains:
The figure above shows you typical components that are commonly used in a webpage. Whenever you plan to design a template, keep in mind that more or less every page uses these components. Let me clarify content separation a bit more. Let us suppose you have a website where you sell items.
When you’re deciding how to split your page into components, it’s useful to think about reusability. If you design a separate template for each item, then you can use that template every time the item is required on another page. On the other hand, don’t overdo your splitting into components so small that you’ll never make use of them on their own. Otherwise, you could end up wasting a lot of time on splitting a template into hundreds of tiny components!
Let’s go into depth: How should each component look? I am not going to discuss Smarty codes in this chapter, rather pure HTML to show you the basic structure of each component.
If you prefer table-less design then design each component enclosed by the <div> object. We already discussed in brief why table-less design is extensible for designers. If you prefer flexible templating, do it table-less. However, if you use templates for pure reporting, then a table is flexible to manage. Choose whatever suits you best.
Table-less design gives you unlimited flexibility and reduces the HTML code on your page, but requires in-depth knowledge of CSS. It saves a lot of time that you would otherwise spend on a table and its cell alignment. In the next example, we will design a very basic table-less page with the usual components.
This is your sample HTML without a table:
<body>
<div id=”container”>
<div id=”head”>
<div id=”header”> <h1>Header</h1> </div>
</div>
<div id=”menubar_horizontal”> Menubar </div>
<div id=”content”>
<div id=”leftpanel”>
<div id=”menubar_vertical”>Menubar Vertical</div>
<div id=”news”>News</div>
</div>
<div id=”body”>Body</div>
</div>
<div id=”footer”>Footer</div>
</div>
</body>The output will look like this:
Now attach the following style sheet to this web page:
<style>
div
{
border: 1px solid #333233;
}
#container
{
width: 780px;
margin: auto;
border: 0px;
}
#head
{
height: 100px;
}
#header
{
text-align: center;
margin-top: 30px;
border: 0px;
}
#menubar_horizontal
{
margin-top: 5px;
padding: 5px;
text-align: right;
}
#content
{
margin-top: 5px;
padding: 5px;
}
#leftpanel
{
height: 350px;
width: 200px;
padding: 5px;
float: left;
}
#menubar_vertical, #news
{
width: 190px;
margin: auto;
margin-top: 5px;
padding: 5px;
}
#menubar_vertical{
height: 150px;
}
#news
{
height: 180px;
}
#body{
left: 210px;
height: 359px;
padding: 5px;
}
#footer
{
margin-top: 5px;
padding: 5px;
}
</style>The output will now be completely different, as shown in the figure opposite. Without using any tables, you have a well-structured design.
CSS is a very powerful tool. Take a closer look at the CSS code above to get a feel of how it works. The purpose of this example is to show that whenever you write a specific component, it’s worth writing it inside a <div> tag and then processing it with your cascading style sheets.
You should also correctly identify the fixed and dynamic parts of your site. Any part of your template that is not enclosed by a Smarty tag is fixed. It can only change if somebody comes and edits the template. (A fixed part may be conditional, that is, if a condition is satisfied, a specific fixed part may be displayed—but the content of that part will always be fixed.)
Some dynamic parts, such as Navigation Menus, will only change rarely. It’s still best to treat these as dynamic parts. In later chapters, we will see how to use caching so that rarely updated sections are not regenerated every time a page is requested. This will make your site faster, although for many sites the difference will not be noticeable.