Building Browsergames: Getting started with a templating system (PHP)

When you start building significant pieces of your game beyond the basic login and registration systems, you start to realize that you’re copying and pasting the basic layout of your pages a lot. Wouldn’t it be nice to have a template that you can drop all of the unique content into, and re-use on every page?

The answer is that you can – and should. It will help you separate your design from your code, which(if you’re anything like me) means that you can have someone with actual designing skills come through and fix up your template before you push your site out to the rest of the world.

This will be a brief rundown on how to get up and running with a templating engine, which is what we will be using to build all of the other parts of our browsergame in progress. For a PHP templating engine, I’ve chosen Smarty. I did this by taking a look at Smarty’s list of features, and deciding whether I liked them or not – when you choose a templating engine, that’s really all the forethought you need to put into it – will it work for you, and are you okay with working with it? As an aside, if you don’t like your templating system you can always switch systems for your next project.

A lot of developers are fans of “rolling their own” templating system. While this can definitely work, you’re probably going to make larger gains by simply using an existing one – if you need anyone to help you with your game later(or it really takes off and you hire someone), it will be a benefit to be using a system that they might already know as opposed to a proprietary system. Also, why do all that work when it’s already been done for you?

The Smarty website has a smarty quick start tutorial, which you can use to get yourself up and running with Smarty.

Once you’ve gotten Smarty set up on your system, we’ll be building the index page that our login page from earlier redirects to for non-administrator users. To start off with, we’ll just use the testing index.tpl file from the Smarty quick start:

&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;My Index Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;p&gt;Hello, {$name}!&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Next, we’ll use the index.php file from the Smarty quick start, and modify it so that it displays the currently authenticated user’s username:

&lt;?php
 
// put full path to Smarty.class.php
require('/usr/local/lib/php/Smarty/Smarty.class.php');
$smarty = new Smarty();
 
$smarty-&gt;template_dir = '/web/www.domain.com/smarty/templates';
$smarty-&gt;compile_dir = '/web/www.domain.com/smarty/templates_c';
$smarty-&gt;cache_dir = '/web/www.domain.com/smarty/cache';
$smarty-&gt;config_dir = '/web/www.domain.com/smarty/configs';
 
session_start();
$smarty-&gt;assign('name', $_SESSION['username']);
$smarty-&gt;display('index.tpl');
 
?&gt;

As you can see, there isn’t that much of a change made – we add a call to session_start() to load up our previously stored session values, and then we use one of them to display the user’s username. If you visit your testing page, you should see the username that you logged in with – which means that Smarty is working! With Smarty we’ll be able to make sure that our code and designs no longer have to be intermingled – meaning that there’s less chance of accidentally screwing up one while working on the other.

If you want to see it in action, you can first register, then login to get redirected to the index page – which will show you the username you’re currently logged in with.