Member Avatar for veedeoo

Hello Everyone,

I got bored reading PHP questions. So, this is probably the best time to add another article here at daniweb.com. If someone ever stumbled upon by boring blog (mini-tutorial), I talked about how light and simple is the tinybutstrong templating engine. However, I began to wonder why not too many people are using it.

Months ago, I went to their site and read their implementation and I finally answer my own question. The reason most people would ignore the validity or the existence of tinybutstrong is that, until now they are using the tables instead of div on their example of implementation. So, I guess it is safe to say that developers and designers these days does not have anything to do with tables, UNLESS, it is deem necessary :).

Why is TinyButStrong, a good template engine?
I am confident it has potentials. However, it is and can be powerful as any BIG template engines available out there .. can be considered somewhere just below twig and smarty. What makes it good is that it has one 1 Php class with 6 methods and 5 properties. This one file makes it a templating engines runner up :).

How do we use TinyButStrong?
Please read tutorials below..

First Step: Download the tinyButStrong here. Unzipped this file and move the tbs_class.php to your working directory.

Second Step: In your working directory (server of course), create a new dirctory called 'templates'.
Thirs Step: Copy and paste codes below to your notepad, or any suitable program editor. Save as index.php

filename: index.php

<?php
    include_once('tbs_class.php');
    ## Written by  veedeoo from daniweb.com and tutpages.com 2012. 
    ## reposting of this script is not allowed except, on those two domains mentioned above

    $title = "This site is powered by TinyButStrong";
    $metaDesc = "this is the coolest site on the net";
    $metaKeywords = "cool,site,internet,number one,ever,created with TinyButStrong";
    $mainContent = "Lorem ipsum dolor sit amet, tritani dissentiunt ne est, an commune maluisset consequat sed. Cu sit odio voluptua, quidam evertitur nam no. Usu ne assum feugait scriptorem. Qui luptatum instructior in. Alterum interpretaris at pro, nibh etiam mucius an est. Sed fugit augue constituam ne .";

    ## IMPORTANT contents above can be from database.

    $rightContent = "This is the right column content";
    $footerContent = "This is footer content";

$Vedeoo = new clsTinyButStrong (array('chr_open'=>'{{', 'chr_close'=>'}}') );
$Vedeoo->LoadTemplate('templates/index.tpl');
$Vedeoo->Show();

Brief Explanations of the codes above..

First, this line of codes

    $Vedeoo = new clsTinyButStrong (array('chr_open'=>'{{', 'chr_close'=>'}}') );

That is an instance of the tinyButsrong class, and I telling the template engine that I want my delimeter change to

    {{ and }}.

Why change the default delimeter? Well, the response is simple.. I want it to be like the smarty delimeters so that I can easily modify it to become functional in smarty templating environment.. In fact we can change the delimeter to Twig like delimeter e.g

    {%  and %}

.. but that is not within the scope of this tutorial. I have plans to write one in the near future.

Lets move on to the next codes that requires our attention. This codes right here

    $Vedeoo->LoadTemplate('templates/index.tpl');

That tells the template parser of the directory of the template file. In this example I have it named as index.tpl.

Fourth Step: Create a new file and save it in the templates directory ( this is the directory we created in second step). Copy codes below and paste it to the index.tpl

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- we define the meta description block -->
<meta name="description"  content="{{onshow.metaDesc}}">
<!-- we define the meta keywords block -->
<meta name="keywords"  content="{{onshow.metaKeywords}}">
<!-- we define our title block -->
<title>{{onshow.title}}</title>
<link media="screen" type="text/css" rel="stylesheet" href="css/css.css" />

</head>
<body>
<div id="maincontainer">
<!-- top section -->

<div id="topsection">
<div class="innertube">
<!-- header content -->
<h1>Your Logo Here</h1>
</div>
</div>
<!-- end of top section -->
<!-- this is main content column -->
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<!-- main column content -->
<!-- we define our main column content -->
{{onshow.mainContent}}
</div>
</div>
</div>
<!-- end of main content column -->
<!-- this is right column content -->
<div id="rightcolumn">
<div class="innertube">
<!--  right column content -->
<!-- we define our right column content  -->
{{onshow.rightContent}}
</div>
</div>
<!-- end of right column content -->
<!-- footer section -->
<div id="footer">
<!-- footer content -->
<!-- we define our footer content  -->
{{onshow.footerContent}}
</div>
<!-- end of footer section -->

</div>
</body>
</html>

Simple concept we need to grasp on an instant.. this code {{onshow.footerContent}} is the tinyButStrong template syntax. Yes we don't need to have $ infront of it., but instead we just use the "onshow.whatEverIsTheNameOfVariable_In_PHP_File".

Speaking of the TBS syntax, unlike smarty TBS is a lot simple and easy to understand.

Fifth Step: Create a directory called "css", and in this directory save codes below as css.css

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-right: 200px; /*Set right margin to RightColumnWidth*/
}

#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left margin to -(RightColumnWidth) */
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

That's it for now. Thank you very much for reading :). I hope you enjoy this simple and a borderline tutorial, and I am hoping you will learn something from it as well. For intermediate implementation, you can visit my boring blog. Search for it somewhere, because I don't have the habit of posting a link to my site for my own personal gain. I would only add my affiliation to my own site , solely for the copyright purposes only.

Edited by veedeoo because: Moved to PHP, made a tutorial
  • 2 Contributors
  • 4 Replies
  • 1K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by diafol
LastMitch commented: Thanks for sharing! +7
Member Avatar for veedeoo

The content can be from array and database.. if the content is in the form of array as in database, then the proper approach can be something like this.

$this_content_is_array = array(
            'title'=>$title,
            'metaDesc'=>$metaDesc,
            'metaKeywords'=>$metaKeywords,
            'mainContent'=>$mainContent,
            'rightContent'=>$rightContent,
            'footerContent'=>$footerContent
            );

The instance of TBS can be something like this

    $veedoo->MergeBlock('blk1',$this_content_is_array);

And the template code will be almost the same as the simple implementation above, but we will be using block function like this

    {{blk1.mainContent}}
    {{blk1.rightContent}}
Edited by veedeoo because: info added
Member Avatar for diafol

Thanks for the info and examples. I'm currently using Twig, but used to use RainTPL. Having taken a look at the TBS site, it looks rather poor, so you can imagine that some would be put off by that. It's even worse than the Smarty site - and that's evilly bad looking.

However the documentation is hell of a lot better than that found in Twig. Getting lost navigating the Twig documentation is one of my bugbears.

I particularly like TBS' shortened loop method. May give it some consideration.

Edited by diafol
Member Avatar for veedeoo

Hi Diafol,

Yes, all of them have a really bad documentations. I am really fascinated by what this little template engine TBS could do. I experimented on it for a few weeks, and it is not that hard to get familiarized with how they do things.

I also experimented with the contents coming from the database, and I don't have to do any loops at all.

What is so interesting about this template engine is that it has its own hook ( some people call it binding capability) to mysql, mysqli and I think it can do PDO also.

For example, if we are to fetch some contents from database, the TBS php code can be as minimum as this... this is on the php file side. I love writing them in simple function for easy implementation later on.

    ## function db_connect

    function db_connect($db_host, $db_user, $db_password, $db_database){

    # connect to our databse Use the example below.
    $this_connection = mysql_connect($db_host, $db_user, $db_password);
    mysql_select_db($db_database,$this_connection);

    ## we need some simple boolean response
    $sql_ok = ( isset($this_connection) && is_resource($this_connection) ) ? 1 : 0;

    if ($sql_ok==0) $this_connection = 'clear'; 
    ## this makes the block to be cleared instead of merged with an SQL query.

    ## connection is valid we return it for other fucntion to use
    return $this_connection;
    }

    ## we can directly assign the results to our template using the block function or merge block function
    $query = "select title, description, id from content";

    $Veedeoo->MergeBlock('blk2', db_connect( 'localhost', 'username', 'password', 'password'), $query);

That's pretty much it, on the PHP file.. and on the template ..

    <!-- Default template file -->

    <ul class="content">

<li id="li">

Id: {{blk2.id}}
<br/>

<!-- Since that there is a title for every id, then it must be iterated just like loop. In TBS, we provide the block=ul as the scope or bound where the title and description are included . that makes it the <li></li>-->

Title:{{blk2.title;block=ul}}
<br/>
{{blk2.description;block=ul}}
</li>

</ul>
<!-- end of our loop -->

In smarty this is pretty similar to a built-in function called section.. e.g.

    $some_array = array( 'title', 'description', 'id');
    $smarty->assign('this_array', $some_array );

and then the template file can be something like this..

    {section name=content loop=$this_array}
              id: {$this_array[id]}
              <br />
              Title: {$this_array[title]}
              <br/>
              Description: {$this_array[title]}

    {/section}

TBS is more database friendly and does not need any extra coding. Plus, smarty only support DOT notation when it is within loops, but not much if it is a loop within section block. TBS does support the dot notation and without the needs of a closing tags on the template syntax.

Edited by veedeoo because: more info.
commented: Thanks for the heads up. +14
Member Avatar for diafol

Yep, that's the bit I really find interesting:

Title:{{blk2.title;block=ul}}
<br/>
{{blk2.description;block=ul}}

I really hate the loop syntax in the other templaters. I sometimes wonder why the hell I don't just write native php when I see the horrible convolutions required to get a loop to roll. This is really nice. Thanks for that - I'll definitely be experimenting with this for my next project.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.