SilverStripe templates tutorial
In this article I would like to explain the Silverstripes‘ Template-Engine by an example, as well as illustrate how it works. Hereof I’m only going to explain prime methods that are efficient for developers who want to program a project with Silverstripe. The logic of Silverstripe’s Template-
Engine lays behind building a HTML framework and to taking hold of the variable that was given back on PHP controller to assemble it into a HTML code.
Overview of the methods that are going to be explained in this tutorial::
- Template- directory- structure
- Variables
- include
- Operators
- „if“ branches
- loop
- with
- Formatting of the date
1. Template- directory- structure
The template-files of a Silverstripes‘ project are situated in the themes/mytheme/ directory
The theme directorys‘ structure:
- css: css-files directory
- images: css-files directory
- javascript: javascript-files directory
- templates: this directory contains the template files and has its own structure:
- templates/Layout: this directory contains all controllers‘ index- and actions templates
- templates/Includes: global templates (Header, Footer, Navigaions, SideBar etc.) can all be deposited here.
- templates/email: all e-mail templates can be deposited in this directory.
- templates/forms: all forms templates can be deposited in this directory.
- templates/Page.ss: the HTML-base frame for the whole project is constructed in the file Pages.ss.
Here all HTML-basic elements, css,javascripts and include-files are being accessed.
Here you can see how a simple Page.ss looks like::
<html>
<head>
<% base_tag %>
<title>$Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- CSS Files -->
<% require themedCSS('style') %>
</head>;
<body>
<div class="wrapper">
<% include Header %>
<div class="main">
$Layout
</div>
<% include Footer %>
<!-- JavaScript Files -->
<script type="text/javascript" src="{$ThemeDir}/javascript/script.js"> </script>
</div>
</body>
2. Variables
The variables for example, the $Title are being written with the $ first and the variables‘ name
afterwards.
Here’s a quick example of how a variable can be defined in a controller and output in a template:
Defining the variable in a controller:
class Page_Controller extends ContentController {
public MyVar = null;
public Member = null;
public function init() {
parent::init();
$this->MyVar = 'hello';
$this->Member = Member::get()->First();
}
}
indicate the variable in a template
<h1>$MyVar</h1> <p>$Member.ID <br/> $Member.FirstName<br/> $Memberr.Surname<br/> $Member.Email</p>
3. Include
With Include it is possible to integrate specific or global templates. It requires that the include-
templates are situated in the includes folder.
This is the correct syntax for include: <% include Templatename %>. Silverstripe automatically
includes the include-template.
4. Operators
In SilverStripe Templates-Engine you can use the following operators:
== , =, != , || und &&
In the following part „If“ of this blog I will point out the functional examples of both parts,
namely Operators and „if“.
5. if
Functional examples for „if“-branches and operators:
== <% if $Member.ID == 1 %> <h1>Member ID is 1 </h1> <% else %> <h1>Member with ID is not 1 </h1> <% end_if %> && <% if $Member.FirstName && $Member.Surname %> Hello $Member.FirstName $Member.Surname <% end_if %> || <% if $MyVar == 'silverstripe' || $MyVar='wordpress' %> <h1>$MyVar is silverstripe or wordpress </h1> <% else %> <h1>$MyVar is not silverstripe and note wordpres </h1> <% end_if %> != <% if $MyVar != 'silverstripe' %> <h1>$MyVar is not silverstripe </h1> <% end_if %>
if not <% if not $MyVar %> <h1>$MyVar is undefined </h1> <% end_if %> else_if <% if $Member.ID == 0 %> <h1>$MyVar is 0</h1> <% else_if $Member.ID == 1%> <h1>$MyVar is 1 </h1> <% else_if $Member.ID == 2%> <h1>$MyVar is 2</h1> <% else_if $Member.ID == 3%> <h1>$MyVar is 3</h1> <% else %> <h1>$MyVar is greater than 3</h1> <% end_if %>
6. Loop
In the Silverstripes‘ Template-Engine you can let Array variables slide in a Loop.
<% loop MyMenu %> <h1>$Title</h1> <% end_loop %> Sort the data sets with „Sort“ <% loop MyMenu.Sort(Title) %> <h1>$Title</h1> <% end_loop %> Limit the data sets with „Limit“ <% loop MyMenu.limit(3) %> <h1>$Title</h1> <% end_loop %> List data sets backwards with „Limit Reverse“ <% loop MyMenu.Reverse %> <h1>$Title</h1> <% end_loop %>
Loop Indicators
In einer Loop- Schleife kann man auf folgende Indikatoren zugreifen:
- $Pos gives you the current location, back$Even shows whether the current position is even or not.
- $Odd shows whether the current position is uneven or not.
- $EvenOdd delievers, depending on the position, $EvenOdd Even or Odd as String back.
- $First, $Last, $Middle: shows on which place the current position is placed.
- $FirstLast: delievers, depending on the position, $ FirstLast First or last as String back.
- $TotalItems: delievers the number of found data sets back in Array.
7. With
With „with“ you can get the single index from the Array variable
<% with $Member %> <h1>$FirstName $Surname</h1> <% end_with%>
8. Date formatting:
Date formatting is one of the advisable methods in SilverStripes‘ Template-Engine.
Here you can format a date on the base of date-format. The variable $Now is defined as a global
variable and it defines the current date.$Now // the current date
- $Now.Year // the current year
- $Now.Month // the current month
- $Now.Day // the current day
- $Now.Nice // depending on the variable i18n::set_locale('en_US'); in _config.php the date will be defined and formatted.
- $Now.Format('m.d.Y') // gibt z.B 01.01.2014 back. With the option‘ format‘ you can determine the dates‘ format.
For more information about SilverStripe go to http://doc.silverstripe.org/framework/en/reference/templates
