Using CSS and Javascript Codes in a Smarty Template

By default, Smarty parses anything that is inside { and } characters including those used in CSS rules and Javascript functions. Without proper coding and escaping techniques, your page will render into a disaster.

There are four (4) ways to escape from Smarty parsing:

   1.Separate your CSS and Javascript codes into their own files and include them into your template using standard HTML methods.

      Linking a CSS file:

      <LINK REL=STYLESHEET HREF=”style.css” TYPE=”text/css”>

      Including a Javascript file:

      <script type=”text/javascript” src=”popup.js”></script>

   2.Enclose embedded CSS and Javascript code with {literal} and {/literal} tags so Smarty engine would leave them alone.

      Embedding CSS:

      <style type=”text/css”>
      <!–
      {literal}
      p {text-indent: 10pt}
      body {margin:0; padding:0;}
      {/literal}
      –>
      </style>

      Declaring embedded Javascript function:

      <script language=”javascript” type=”text/javascript” >
          <!–
              {literal}
                   function hello_world(){
                          alert(‘Hello Smarty World’);
                        }
              {/literal}
             –>
      </script>

   3.Change Smarty’s $left_delimiter and $right_delimiter to custom delimiter strings so you can use curly braces in your templates. In addition, it would allow you to insert template variable values into your CSS and Javascript codes to make them dynamic on the fly at server side.

      The PHP code:

      <?php
      require ‘Smarty.class.php’;
      
      $smarty = new Smarty;
      
      $smarty->left_delimiter = ‘<!–{‘;
      $smarty->right_delimiter = ‘}–>’;
      
      $smarty->assign(‘title’, ‘The Smarty Template Engine’);
      $smarty->assign(‘element’, ‘h1’);
      $smarty->assign(‘size’, ’36px’);
      $smarty->assign(‘popup’, ‘alert’);
      $smarty->display(‘index.tpl’);
      ?>

      The Smarty Template “index.tpl”:

      <head>
      <style type=”text/css”>
      <!–
      <!–{$element}–> {font-size: <!–{$size}–>}
      –>
      </head>
      <body>
      <<!–{$element}–>><!–{$title}–></<!–{$element}–>>
      <script language=”javascript” type=”text/javascript” >
      <!–
      function show_popup()
      {
        <!–{$popup}–>(‘<!–{$title}–>’);
      }
      //–>
      </script>
      </body>

      The code above will output:

      <head>
      <style type=”text/css”>
      <!–
      h1 {font-size: 36px}
      –>
      </head>
      <body>
      <h1>The Smarty Template Engine</h1>
      <script language=”javascript” type=”text/javascript” >
      <!–
      function show_popup()
      {
        alert(‘The Smarty Template Engine’);
      }
      //–>
      </script>
      </body>

   4.Use {ldelim} and {rdelim} tags in place of { and } in defining your CSS rules and JavaScript functions assuming the default delimiters are set. This is not practical for real-world use and it will break when delimiters are set to other strings.

      Define CSS rules:

      <style type=”text/css”>
      <!–
      p {ldelim}text-indent: 10pt;{rdelim}
      body {ldelim}margin:0; padding:0;{rdelim}
      –>
      </style>

      Will output:

      <style type=”text/css”>
      <!–
      p {text-indent: 10pt;}
      body {margin:0; padding:0;}
      –>
      </style>

Advertisements

Debugging Smarty Templates

Smarty has a debugging console that allows you to easily examine assigned template variables, included templates and config file variables for the current template.

To enable the debugging console:

   1.Set Smarty $debugging property to true.

      <?php
      $smarty = new Smarty;
      $smarty->debugging = true;
      …
      ?>

   2.If the debug console window does not pop up when you load the page, set $debug_tpl property to the path of your debug template. By default, Smarty will look for the “debug.tpl” in SMARTY_DIR. This file is included in Smarty distributions and can be found in library “libs/” folder.

The easiest and quickest way to enable debugging console is by placing a {debug} tag in your templates. It works regardless of the $debugging settings in the php script. However, it only allows you to see all the available variables within the scope of the current template.

Example usage:

<h1>{$title}</h1>
{debug}
<p>{$description}</p>

Accessing Request Variables from Smarty Templates

Request variables available in PHP scripts can be accessed from your Smarty templates through the reserved template variable {$smarty}. Request variables include $_GET, $_POST, $_COOKIE, $_SERVER, $_ENV, and $_SESSION.

Examples:

Output the value of $_GET[‘page’] from the url “http://www.jampmark.com/index.php?page=about

{$smarty.get.page}

Output the value of $_POST[‘page’] from a posted form

{$smarty.post.page}

Output a cookie variable, $_COOKIE[‘status’] from request header

{$smarty.cookies.status}

Output a server variable, $_SERVER[‘SERVER_NAME’]

{$smarty.server.SERVER_NAME}

Output a system environment variable, $_ENV[‘PATH’]

{$smarty.env.PATH}

Output a session variable, $_SESSION[‘id’]

{$smarty.session.id}

Output the value of “username” from merged get/post/cookies/server/env

{$smarty.request.username}

Smarty :Pagination

The simple pagination using array is shown to easy understand, how the smarty pagination will work,

During this example i am going to be using some test data, a basic PHP array with 10 sub array’s, like so:

$myArray = array(
array('id' = > 1, 'title' => 'Test Item 1'),
array('id' = > 2, 'title' => 'Test Item 2'),
array('id' = > 3, 'title' => 'Test Item 3'),
array('id' = > 4, 'title' => 'Test Item 4'),
array('id' = > 5, 'title' => 'Test Item 5'),
array('id' = > 6, 'title' => 'Test Item 6'),
array('id' = > 7, 'title' => 'Test Item 7'),
array('id' = > 8, 'title' => 'Test Item 8'),
array('id' = > 9, 'title' => 'Test Item 9'),
array('id' = > 10, 'title' => 'Test Item 10'),
);


Then assign the pagination class to an object called pagination and assign the array and the amount of page numbers and assign this information into the smarty template vars, one for the listing of the items and another for the actual pagination.

$pagination = new pagination();
$myArray = $pagination->generate($myArray, 10);
$smarty->assign('listing', $myArray);
$smarty->assign('pagination', $pagination->links());

Then go into the template side of your setup and add the following code,

{if !empty($listing)}
{if !empty($pagination)}

{/if}
{foreach item="item" from="$listing"}
{$item.id}
{$item.title}{/foreach}
{/if}

 

It's a pretty quick and simple solution to get you going as a beginner, good luck!

Smarty : Introduction

Smarty is a web template system written in PHP. Smarty is primarily promoted as a tool for separation of concerns, which is a common design strategy for certain kinds of applications.

Smarty generates web content by the placement of special Smarty tags within a document. These tags are processed and substituted with other code.

Tags are directives for Smarty that are enclosed by template delimiters. These directives can be variables, denoted by a dollar sign ($), functions, logical or loop statements. Smarty allows PHP programmers to define custom functions that can be accessed using Smarty tags.

Smarty is intended to simplify compartmentalization, allowing the presentation of a web page to change separately from the back-end. Ideally, this eases the costs and efforts associated with software maintenance. Under successful application of this development strategy, designers are shielded from the back-end coding, and PHP programmers are shielded from the presentation coding.

Smarty supports several high-level template programming features, including:

  • Control flow statements, foreach
  • if, elseif, else statements
  • variable modifiers – For example {$variable|nl2br}
  • functions – For example {html_select_date start_year=’-5′ end_year=’+5′}
  • output filters
  • possiblity to create own modifiers / functions / output filters
  • advanced caching of pages

along with other features. There are other template engines that also support these features. Smarty templates are often incorporated into existing PHP web applications to some extent. More often it is used where a web application or a website has a theme system built into it, where the templates can be changed from theme to theme.

The latest verision of the Smarty can download from the below URL,

http://www.smarty.net/download.php

 

Smarty

Smarty

Know More about Smarty by detail follow the link,

http://www.smarty.net/manual/en/