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:

1
2
3
4
5
6
7
8
<html>
<head>
	<title>My Index Page</title>
</head>
<body>
	<p>Hello, {$name}!</p>
</body>
</html>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
 
// put full path to Smarty.class.php
require('/usr/local/lib/php/Smarty/Smarty.class.php');
$smarty = new Smarty();
 
$smarty->template_dir = '/web/www.domain.com/smarty/templates';
$smarty->compile_dir = '/web/www.domain.com/smarty/templates_c';
$smarty->cache_dir = '/web/www.domain.com/smarty/cache';
$smarty->config_dir = '/web/www.domain.com/smarty/configs';
 
session_start();
$smarty->assign('name', $_SESSION['username']);
$smarty->display('index.tpl');
 
?>

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.

Wish there was more?

I'm considering writing an ebook - click here.

.

Luke is the primary editor of Building Browsergames, and has written a large portion of the articles that you read here. He generally has no idea what to say when asked to write about himself in the third person.

Friday, May 16th, 2008 buildingbrowsergames, code, design, php, setup, templates
  • Scar

    I have upload files in root and do all steps as mentioned by keilaniswk. Changed path in php code to match mine and I get this error:
    Uncaught --> Smarty: unable to write file /web/www.domain.com/smarty/template... <-- thrown in/home/vhosts/mojaproba.orgfree.com/Smarty/l... on line 44
    Any help pls?

  • Dewan Payroda

    I dont get this either, Smarty is just hard to get working
    Why not put the code on github for us to learn how its done ?

  • D0nkey

    Luke,

    I hardly have any HTML knowledge and your guide so far was a real gem and it got me super motivated every step of the way. I made some minor mistakes, managed to find and fix um, and with hardly any HTML knowledge I mean 12 hours of HTML learning :).

    Unfortunately this is where I'll have to drop this very nice course. Not everybody has a local server, which according to my acquaintances is necessary to run something like Smarty.

    Thank you for teaching many people the basics and it's really too bad that I can't do much else now here.

    Best of luck with your great site!

  • Patrick

    why exactaly do I need to use smarty at all? I can follow all the php and mysql but when you started using smarty I got totally lost. any help will be very appreciated.

  • this is the right question ^^ but let me explain, you can use php right without template system (whatever smarty or savant), but your code will always mixed html and php... but what about separate code and html, better readability, faster output (caching)? then you need to use a template, my favorite is of course savant3. it is a class, every output has to be added first from the main php and the final display-output the ready prepared website (like echo).

  • Why not using Savant3?? I'm using this template system since 2 years and works perfectly for me. Savant3 uses php for templates. So you don't need to learn another template language. It is faster than smarty and most of all smarty has a memory leak and is instable....

  • Savant3 is a pretty nice templating engine - but no matter what engine you
    choose, there will always be someone saying "why didn't you use templating
    system X? Or Y?"(and in the extreme cases, "why did you use a templating
    system?").

    Smarty was the templating system recommended to me by a few other developers
    - so it was the one I went with.

  • keilaniswk

    Here is what to do if you have problems setting Smarty up:

    1) You should put the Smarty files in the same folder you have your site. (Just all the directories and files inside the "libs" folder that you get when you unzip).

    2) Create the following folders at the same location: "configs", "templates", "templates_c and "cache".

    3) Read this page to find the absolute path of your files/folders on your server (you will need this info to edit your "index.php" file): http://bogdan.org.ua/2007/04/3...

    4) Use your absolute path to edit your "index.php" file.

    That is all :)

    @Luke: Your host has disabled send mail, I can't get registration mail :(

  • @keilaniswk: The e-mail issue should be fixed now - not really sure what
    went wrong there.

    Sorry about that!

  • disqus_pGbNa6YIN6

    Please, explain more simple. I don't understand what ou mean ......

  • Chris Black

    well... too bad the tutorial ends here for me... :(
    the "smarty" installation is not too easy to configure... at least for a human just learning PHP like me. I was sucessful in the previous steps of all this... never a fail! so, I feel happines! :P but.. with this...
    There is some way to do this part without the use of that? I mean... If I need some kind of skin for the game... man! long life to CSS!! I have in mind other look for my game (if I can learn some of this...) I mean... it is really necesary the use of "Smarty" for all this? The tutorial here is the best I found around the Net to learn all this stuff. It's perfect even for a noob like me. I just fail for the inclussion of this stuff here... :(
    if someone can help me to translate the codes without the use of the so called "Smarty" it could be great help... I know you guys are busy people but... I'm so noob... T_T

  • Did you try following the Smarty Quick Install guide at
    http://smarty.net/quick_start.... There is also a link to the windows
    instructions at the top, if you're not using *nix.

  • Have you ever considered adding more videos to your blog posts to keep the readers more entertained? I found that to be more helpful well let me know how it turns out! I love what you guys are always up too. Such clever work and reporting! Keep up the great works guys I've added you guys to my blogroll

  • I've definitely considered it, but unfortunately I don't really have the
    time right now - I had to actually switch to only writing twice a week back
    in november because life got so busy!
    Contributors are more than welcome to post videos, but I'm afraid that I
    won't be right now - perhaps when my schedule gets a little less hectic.

  • Patrik

    Hello! now you maybe will think iam an total noob, but i have some trouble getting Smarty to work i should put it on the web server i have an some how install it there ? and the server i use to try this stuff out is not mine juste my schools server so i cant install everything there but the thing is shoul i just edownload the version change some names,configfiles and put it on the server and edit my .php files and it should work ???

    plz dont bully me iam kinda new at this :P

  • jamal

    i'm having alot of trouble with smarty -.- How would i use smarty on 000webhosting.com ? its a free server but im only practising php. but if this project is successfull i will make my own server or pay for one

  • Hi jamal,
    If you're having trouble getting up and running with Smarty, I would
    recommend that you contact support for your hosting plan and see if they can
    install it for you.

    If that doesn't work, you can also upload the entire Smarty library to a
    local directory, and then just reference that in your PHP files instead of
    an install directory.

  • I don't understand it either. I can of course install smarty on my devserver, but once I go public, and will not have my own server but just a standard hosting service, I will not be able to for example modify the php.ini which is required according to the installation tutorial.

    Uploading the entire smarty libary to a local directory... That would not solve all my problems easily right? I would need a system that does not require anything more than FTP and database access... :/
    Lets have a look at cakePHP.

  • I'm not quite sure where the problem with keeping smarty in your local
    directory is - as all you need to use Smarty is FTP access(not even
    database).
    As far as I'm aware, CakePHP is a lot more work to install than Smarty, as
    it's a framework instead of just a templating engine - so I don't think that
    CakePHP is the solution to your problems either.

  • Yup, I indeed figured that.
    However, at the moment I am still working without smarty, just because I want to fully understand exactly what is happening. Maybe I will implement smarty later on, but for now I do not really feel the need for it.
    Thanks again for your great tutorial!

  • Yeah. One thing that I'd like to take a look at in the future is all of the different frameworks, and potentially write a little bit about how to build a game using them - but I'm definitely going to need to research them a little bit before I can write about them and feel comfortable explaining how to use them.

  • I wrote a site with it http://www.mondogatto.net

    There is already security built in, and a nice thing about it is that if you change the table on the database you don't need to change methods for creating/updating/deleting records on the database, thus saving a lot of coding time.

  • Hey Michele,

    CakePHP sounds pretty neat - I'll check it out and look into writing something about it soon.

  • I have intention to use CakePHP for the next game.

    I know this framework a bit and it's very easy to mantain/change the layout, and it forces you to design your game in an object oriented way.

blog comments powered by Disqus

About

Building Browsergames is a blog about browsergames(also known as PBBG's). It's geared towards the beginner to intermediate developer who has an interest in building their own browsergame.

Sponsors

Got Something to Say?

Send an e-mail to luke@buildingbrowsergames.com, or get in touch through Twitter at http://twitter.com/bbrowsergames