Web Developer :: Introduction to Smarty

Websites are past the level of presenting summary and contact data for companies and projects. With the evolution of the Internet, most websites are now stand-alone businesses rather than summary presentations of companies. More than that, complex applications' developers have embraced the idea of using websites as interfaces for their software.

For more than ten years, PHP has been one of the best choices for web developers being the most complete open-source web programming language. With growth of the complexity of PHP applications, a new problem that was raised was, how to separate programmers' code (PHP) from designers' code (HTML), or better phrased, how to separate the content from presentation.
Smarty, a PHP templating system, was born to solve this problem.


Templating Systems
The basic functionality of a templating system is introducing a way of separating presentation from content with very little interaction between programmers and designers. For example, the design of a website may look like this:

The designers build the face of the website with pictures, text styles, tables, and so on. They build templates for how to arrange the content in each page.
The only information the designers need is how the site should look and whether they need to layout content like news, products, jokes, and so on.

On the other hand, programmers code the application using PHP to do data manipulation (business logic). They are not interested in how the website looks (colors, pictures, text styles) or where the content is laid out on the page. All they need to do is pass the content to the templates using variable names they agree upon with the designers.

This is roughly how template systems work. Starting from this basic functionality, every template system has a set of features that makes it easier for both designers and programmers if they are well documented in the template system they use.
This book is intended to show you how to use all the features offered by Smarty in the optimum way.


Why Use a Templating System?
Building a website is similar to creating software. It can be done by building it from scratch, just starting to write code to see what you can come up with at the end and solving problems on the way; or it can be done by differentiating the project's components into separate layers and building the website taking these layers into consideration. This is called multi-tier or multi-level software architecture. If the website is a small one containing only a few lines of PHP code, the first option might work. Just create a few tables in a database, start coding with PHP, maybe create a few banners, generate a few tables and debug every step. People like it this way—fast and easy.

When it comes to more complicated web-based projects such as web portals, e-commerce sites, ERP systems, and so on, the first option may work but in most cases it can very difficult to achieve anything by coding away. Besides, with the market being so crowded with web projects, in order for your website to stand a chance, you have to have a great layout which is appropriate for the type of project you are building and of course, stable code tested in all situations. That's why people involved in building websites specialize either in designing great layouts (web designers), or in programming very well (web programmers). Not often will you see a good web programmer creating great designs, or a good web designer writing good, bug-free code.

A software company that creates websites usually has a design department and a programming department, and most medium to large web projects always have a programmer as well as a designer working on them.
Programmers have different ways of coding applications and if they use only PHP without a template engine, the designer will need to be familiar with every programmer's way of arranging the code, naming variables, and so on. Also, the programmer will need to understand the designer's templates and generate the code to print HTML code from PHP where the designer wants it.
Let's take the following example:

for ( $col = 1; $col < $i; $col++ ) {
        print " $procesid[$col] $data[$col]  
$value[$col]
"; }
This is PHP code that prints the values of three arrays in a table. Even a simple example like this one is hard to read and to arrange in a web page exactly as desired.

With Smarty, the PHP syntax doesn't contain print. Instead, the programmer passes these arrays to the designer by assigning them to Smarty templates. Then it's the designer's job to make them look good in the web page without worrying about the PHP code. This is one big benefit about using Smarty, and we will learn in this book how this is done.


The Smartness of Smarty
Smarty allows designers and programmers to interoperate more effectively and not worry about each other's work. The designer builds the templates for the web page layout and extracts the data from the PHP files that the programmer has created. The programmer passes data to the templates without having to generate HTML code. This way, everyone is happy and more efficient because they all do the job they are good at.
Let's think about an e-commerce site that sells laptop computers. The manufacturer's name, the model number, characteristics, and price are content elements that will be stored in a database and displayed to the visitor.

Smarty makes the job of the designer as well as the programmer very easy. The key tasks performed by them can be listed as follows.

The Programmer's tasks:

• Extract database elements with a simple query on the database.
• Validate and manipulate the data by performing business logic on it.
• If needed, change the data access methods and the business logic without interfering with the designer's work. For example, the whole system could migrate from MySQL to PostgreSQL without the designer making a single change.

The Designer's tasks:

• Create HTML designs without affecting or jeopardizing the programmers PHP code. The designer only needs to be concerned with placing the content elements that the programmer has agreed to provide.
• Make changes to the design without consulting or interfering with the programmer's work.
• Stop worrying about technical changes to the site breaking the way that the site appears to viewers.

In the above example, we see that tasks are assigned to people involved in the project depending on the parts they are working on—presentation, business, and data access.
Later in this chapter we'll have a look at the process of building software applications, including websites, using multi-tier architecture.