When I first started working with web design and web development I did both the page layout, design and programming. This worked great since I was the only one working on the web site. I didn’t have to wait for a design to be approved or work my ass off when the design actually was finished and the time for implementing the code was slimmed down to almost nothing because of design changes. After  spending a lot of time working with various people across the world, many of them I haven’t met in real life, I had to look at a different system for developing and releasing web sites easy and on time. I didn’t have to look far until I came a cross the Smarty PHP Template System.

The Smarty PHP Template System is a framework of classes which will automatically compile your templates into running PHP code. The best part of it is that you separate the application logic and structure from the actual design and presentation. If you want, you can say you divide your application into two layers:

  1. A application layer where you store your logic and structure written in PHP.
  2. A presentation layer where you present and design the content of the application.

So what does this mean? You no longer need to wait for a design to be approved and sent to you and every once in a while when a design change is made you don’t need to re-programme parts of the web site. The application layer is where you, as a programmer, use all your PHP magic and creates smart and useful content boxes which will be sent to the presentation layer. The presentation layer can only use variables the application layer has provided and with the content from the application layer, the presentation layer can use XHTML and CSS to design the page and put the dynamic content where is should be. This process can interact between the programmer and the designer. As soon as the application structure and data is defined the programmer can start working, even though the design isn’t finished. The programmer doesn’t need to put in extra hours due to delays in the design development and, since the application code is separated from the design, when design updates must occur the programmer doesn’t need to be involved. At least if the design changes doesn’t required new application structure or logic. Sounds good? It gets even better!

So far the PHP Smarty Template System isn’t breaking any new ground, the idea of cutting up a application with a GUI, Graphical User Interface, has been around for awhile now. Actually we could add a extra layer, so our layers would look like:

  1. Data layer
  2. Application layer
  3. Presentation layer

The difference between the application layer and data layer is that the data layer should be the one interacting with our information source, might be a MySQL database or a text file containing the information we want to present. In our PHP Class series we presented a Database Class. This class would work as our data layer since it’s taking care of the communication between our MySQL database and retrieves the information we are asking for. It is only the application layer that knows about the two other layers in the application. There must be no communication between the data layer and presentation layer directly, the communication will have the follow schema:

  1. The application layer requests information from the data layer.
  2. The data layer sends the requested information back the application layer.
  3. The application layer handles the incoming information and assign workable content boxes to the presentation layer.
  4. The presentation layer uses the content boxes and designs and presents the application.

This is called the 3 layer architecture. Once again, this isn’t something new for the Smarty system. This is a great way of structuring your applications. Mix this 3 layer development concept with PHP unit test and your application is golden. If you also go for the test-driven development style your application will be safe and error free… at least in a perfect world! 🙂

OK, we have the basic concept of what the 3 layered architecture is all about and we know a tiny bit of what Smarty is. Now we will take a deeper look at how the Smarty Template System can help us achieve the 3 layer architecture. We already talked about the split between application layer and presentation layer in Smarty. We will take a look on how to install the Smarty framework and look at a few examples on how the implementation of the code will look like.

The Smarty Framework works both in Linux and Windows. We will look at the installation steps in Windows and how we can interact with Smarty using our WAMP server. Before we start you should download the Smarty Framework.

The easiest way of installing Smarty is to use their own installation guide, so click here to follow the installation guide for Windows. To make the installation interact with our WAMP server I used the main WAMP folder as the main folder holding the Smarty templates_c and cache folders. For the templates and config folders I used the WAMP/www folder. The rest of the instructions should be easy to follow. I do recommend creating a Smarty class as they do at the bottom of that installation guide page. If you follow the installation steps you should be able to run your Smarty templates minutes after installation. If you encounter any type of error I suggest you turn to the Smarty official web page.

We will start looking at the structure of the Smarty system. When working, each page will have a .php file connected to a .tpl file (the template file). The .php file is the application layer and the .tpl file is the presentation layer. We will not use a data layer in this example but it would certainly be possible to include.

We create a .php file and name it to foo.php. If you followed my advice before and creating that smarty class file, the very first thing we are required to do is to include this file in our foo.php. This is simply done like this:

require('smarty.php');

I named the smarty class to smarty.php. Next, we need to create an instance of our class. This is done like this:

$smarty = new smarty_connect();

I named the instance to $smarty and I’m trying to create an object from the smarty_connect() class. After this we are able to assign variables to our $smarty object. By assigning variables to the object we are letting our presentation layer access these variables. To assign a variable in our foo.php file we print:

$smarty->assign('test', 'test');

The first parameter is the name the presentation layer will use to access the variable, and the second parameter is the value the variable should point at. The first parameter must be a string but the second one can be a string, integer, array, object and more. To finish off our foo.php page we need to add a line telling the Smarty system which template we want to use. This is done like this:

$smarty->display('bar.tpl');

The bar.tpl must be a template file found in your templates folder. The name of the application file and the template file don’t need to match. So, our foo.php file isn’t that fancy. All we do is assigning a variable named test to the string ‘test’. This is just an example. The foo.php could and should contain a lot of the PHP magic you write. Anyway. We turn to the bar.tpl file next.

The bar.tpl file must be put in the template folder. Inside the file we are able to use XHTML, CSS and with a special syntax, access our signed variables from the foo.php file. The bar.tpl file also accept various control and looping structures to ease up our work. We are able to do if’s, foreach’s and loops. We are actually able to include all PHP functionality inside our tpl files but we don’t want that. We want to follow the 3 layer architecture.

So, the XHTML, CSS and Javascript syntax will be exactly the same as before, but the PHP isn’t! Instead of using <? ?> we will use { }. To access our test variable we assigned in the foo.php file we write:

{$test}

Basically our full tpl file will look like this:

<html>
<body>
This is our variable {$test}
</body>
</html>

This is an excellent way of separating our layers making life a lot easier and especially web development for the programmer. The designer will be able to use the assigned variables from the foo.php file in the tpl file as much as s/he wants. It’s great! The Smarty system includes more useful and powerful PHP short cuts to be used in the tpl files. You should check them out on their web page. OK, I think that’s it! We have looked at the 3 layer architecture with the data, logic and presentation layer and lastly we used the Smarty PHP Template system as an example on how to separate the logic and presentation layer. Enjoy!

July

, , , , , , , , ,

July 4, 2008

4 Comments