Creating a website with a template engine! (Detailed Tutorial for newbies)

**litewarez** · 28th Sep 2009, 04:01 AM

Description:
Ok now what im going to do is show you haow to Start a website using a tempalte engine

I havent even started it yet im going to be doing it and then placing the steps below so you can see how its done Step by Step.

Overview
The template engine will make your website developments a lot easier, by using a template engine you open your website up to a lot of new possibilities such as template catching etc.

The template engine we will be using is STE (Smarty: Template Engine)

Ok so lets get started !
______

First we need to create a directory to work within or you can just use your htdocs or a subfolder, i will be using a directory on my localhost called "template" for this

Ok now what we need to do is to get the template engine sources from the the link below!
Here

We want to download the the compressed file thats listed under the "Latest Stable Release"

and extract all the all the files within the libs folder to a new directory called /template_engine/*.*

So now my directory layout looks like

Code:

C:\xampp\htdocs\template\template_engine\*.*

ok so now we need to create a new folder called themes that should look like

Code:

C:\xampp\htdocs\template\themes\*.*

we also need to create another folder called compile within the themes dir

Code:

C:\xampp\htdocs\template\themes\compile\

Ok so now we have a place for our template engine and our template files we need to create our main index file and should be placed within our root such as

Code:

C:\xampp\htdocs\template\index.php

ok then once we have created that file we are going to place some code there to start getting us started... such as include the main template system.

below is the code i have created to start us off, just copy the code into your index.php and hit the magic save button

PHP Code:


<?php
/*
    *
    *    Starting a website with Smarty PHP Template Engine
    *            Tutorial Created my Litewarez
*/

define("ROOT_FOLDER",dirname(__FILE__)); // this will help us navigate and iclude files with ease

/*
    *Ok so now we need to include hte core of the tempalte system.
*/
include ROOT_FOLDER . "/template_engine/Smarty.class.php";

/*
    *Once the main core of the engine is included we need to create an instance of the tempalte object !
*/
$Smarty = new Smarty;

/*
    *On now Smarty template engine requires us to set soveral settings. here we will do that.
*/

#1
$Smarty->template_dir = ROOT_FOLDER . "/themes/"; // this will tell the template engine where the template files are!

#2
$Smarty->compile_dir = ROOT_FOLDER . "/themes/compile"; // This will tell the engine where it can compile the tempaltes.
?>

Ok now if we goto our index.php and run it we should not have any errors.. i havent... so lets continue
______

Ok now that Smarty is ready to start working with the template files, we dont actually have any

so guess what.... were going to make a nice simple one

now the actually template file is only going to be very basic, you can research further if you wish to carry on your own project!.

OPk so lets create a new black filed called "index.tpl".. yes thats tpl and save it within our themes directory for e.g.

Code:

C:\xampp\htdocs\template\themes\index.tpl

ok see here is what i have in my template file, yes you can copy it

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>{$head_title}</title>
	</head>
	<body>
	</body>
</html>

Whooooo we have simple index file that we can work with but if we try to go back and run the index.php file, you will notice that we still dont have nothing... thats because we haven't told Smart what template file it should load!!!

so what we need to do is edit our index.php file and tell smarty what file to load

so open "index.php" again and do the following

FIND:

PHP Code:

?>

ADD BEFORE:

PHP Code:


/*
    *Load the index.tpl template
*/
$Smarty->display("index.tpl");

..

Ok so now we should not have any errors what so ever and if we co back to the index.php page and refresh if you view the source you will notice that we have the tpl contents withing out index.php

this is exactly what we wanted... BUT, we dont have any content

always something aint there, so lets start adding some content

as you might have noticed we have {$head_title} in the index.tpl file but not showing in the main index.php source,

this is because we haven't told Smarty what to put within its place!.. so heres what i want you to do

Go into index.php and do the Following

FIND:

PHP Code:


#2
$Smarty->compile_dir = ROOT_FOLDER . "/themes/compile"; // This will tell the engine where it can compile the tempaltes.

ADD AFTER:

PHP Code:


/*
    *Assign some data to the index.tpl file :)
*/
//This is whats used for the title tag
$Smarty->assign("head_title","Litewarez Template Tutorial");

Ok so now if you go back to your index.php file and reresh you should now have a title thats shows like

Code:

<title>Litewarez Template Tutorial</title>

Thats practically it about starting your own website with a tempalte engine, BUT yes fans big BUT, we havent really explored the functionality of Smarty fully, so ill show you one more feature that you are guaranteed to use when using Smarty, and thats called LOOPS

open up index.php and do the following

FIND:

PHP Code:


$Smarty->assign("head_title","Litewarez Template Tutorial");

ADD AFTER:

PHP Code:


/*
    *Adding some arrays :)
*/
$simple_array = array(1,2,3,4,5,6,7,8,9,10); // simple ehh
$medium_array = array(
                    array("site_url" => "http://www.litewarez.net","site_name" => "Litewarez"),
                    array("site_url" => "http://www.besthostingforums.com","site_name" => "KWWHunction")
                );
$advanced_array = array(
                    "litewarez" => array("age" => 20,"firstname" => "Robert","sex" => "Male", "is_admin" => true),
                    "Splitice" => array("age" => "Unknown","firstname" => "Split","sex" => "Male"),
                    "KillaJ" => array("age" => 56,"firstname" => "Jason","sex" => "Female")
                );

//Now we need to send them to smarty to parse with the index.tpl template
$Smarty->assign("simple_array",$simple_array);
$Smarty->assign("medium_array",$medium_array);
$Smarty->assign("advanced_array",$advanced_array);

ok so now Smarty knows about these arrays we just have to place some code within the actually template so Smarty knows what to do with the arrays

Update the index.tpl file with the information below, overwriting the previous html.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>{$head_title}</title>
	</head>
	<body>
    <div class="simple_array">
    	<h1>Simple Array</h1>
       	{section name=i loop=$simple_array}
            {$simple_array[i]}
		{/section}
    </div>
    <div class="medium_array">
    	<h1>Medium Array</h1>
		{section name=i loop=$medium_array}
            <a href="{$medium_array[i].site_url}">{$medium_array[i].site_name}</a><br />
		{/section}
    </div>
    <div class="medium_array">
    	<h1>Advanced Array</h1>
        <ul>
        	{foreach from=$advanced_array key=username item=user_details}
				<li>
                Hello, {$username}:
                You are a {$user_details.age} year old {$user_details.sex} with a first name of {$user_details.firstname}
                {if $user_details.is_admin}
                	And you are an administrator :).


                {/if}
                </li>
			{/foreach}
		</ul>
    </div>
	</body>
</html>

And now you can run the system and you should can an output as you probably desired..

______________________________________

I hope you have all learnt something from this and if you have any Questions then just ask, Below i have placed a link for you to download the source files so you can see or save some time

Get Source Files

REMEMBER TO RATE THIS TUTORIAL AND SAY THANKS IF YOU FOUND IT HELPFUL

Peace.

litewarez Reviewed by litewarez on 28th Sep 2009. Creating a website with a template engine! (Detailed Tutorial for newbies) Description: Ok now what im going to do is show you haow to Start a website using a tempalte engine I havent even started it yet im going to be doing it and then placing the steps below so you can see how its done Step by Step. Overview The template engine will make your website developments a lot easier, by using a template engine you open your website up to a lot of new possibilities such as template catching etc. The template engine we will be using is STE (Smarty: Template Engine) Rating: 5

**litewarez** · 28th Sep 2009, 04:19 AM

not share lol, i just written this lol

**anantgupta** · 28th Sep 2009, 04:22 AM

nice share man.........

**SuicidalMedia** · 28th Sep 2009, 04:42 AM

Thanks man , you're really great. Writing this stuff for free and helping the community.

**litewarez** · 28th Sep 2009, 04:49 AM

Thanks dood, always good to help out

**yais** · 28th Sep 2009, 08:14 PM

thanks for the tutorial. i havent personally used smarty myself before but i have heard a lot of good things about it.

**DEViANCE** · 28th Sep 2009, 08:46 PM

Good read and useful, thanks

Creating a website with a template engine! (Detailed Tutorial for newbies)

Thread Tools

Display

Creating a website with a template engine! (Detailed Tutorial for newbies)

Sponsored Links

Thread Information

Users Browsing this Thread

Similar Threads

[For Hire] Creating Website Detailed Report of its seo and ranking

[TUTORIAL] A basic guide to flipping domains for newbies.

Tutorial [Creating a PHP Framework] {advanced} (PART 6) Smarty Engine

PHP Tutorial (Creating Classes)

PHP Tutorial ( Creating Functions ).

Tags for this Thread

Posting Permissions

themaCreator - create posts from...

themaPoster - post to forums and...

themaManager - edit and manage...

themaPoster - post to forums and...

themaRegister - register to forums...