I'm Learning SilverStripe

Silverstripe Template Engine

Fri, 19 Mar 2010 22:07:17 -0500

MVC on the silverstripe named Sapphire has provided a template engine. This template engine can be easily combined with its controllers. As I discuss in the article Knowing Silverstripe MVC, a page type on the silverstripe will have .ss template file which contains only the HTML syntax. The .ss file names will be same as the file name of his controllers. So Page.php controllers will have template files Page.ss, and so also for the other files. With this method, programmers and web designers can work with a consistent.

Among the HTML code contained in the .ss file, there are some special characters that will be used by the template engine to insert a data object to a page that will be displayed in the browser. The process of looping and conditions can also easily done. Silverstripe also provides the control and the default variable to help facilitate the designer to create a template.

Variables

Variables will call the method or field of objects with scalar value. Output is converted into a string for display on the template. Each variable will be preceded with the character $. variables are already available by default on a page of which is $Content, $Title, $MenuTitle, $Link, etc..

Example:

<h2>$Title</h2>
$Content

Result:

<h2>Home</h2>
<p>Welcome to <strong>I'm Learning Silverstripe</strong>, this site contains about how to create web sites using <a target="_blank" href="http://www.silverstripe.org">Silverstripe CMS</a>. On this website you will find lots of information about how to use and develop the site made with silverstripe. Everything is based on the experiences suffered by post authors.</p>

Controllers

Controls on silverstripe is a method of a class that ends with _Controller. On file .ss control can be called with the syntax:

<% control [name of control] %>
....
<% end_control %>

The output of the control will be a collection of object (an array of object) then later produced a loop of the contents of the object. In silverstripe already have some controls that can be directly used. Like Menu, Children, Level, etc..

Example:

<ul>
    <% control Menu %>
        <li><a href=”$Link”>$MenuTitle </a></li>
    <% end_control %> 
</ul>

Result:

<ul>
    <li><a href=”home”>Home</a></li>
    <li><a href=”about”>About</a></li>
    <li><a href=”contact”>Contact</a></li>
</ul>

Conditions

Selection conditions can also be done by the silverstripe template engine using IF blocks. Some of the following syntax:

<% if condition %>
...
<% else_if  condition %>
...
<% else %>
...
<% end_if %>

IF Block preceded by the <% if condition %> and terminated by <% end_if %>. In this block if there is a section <% if that can determine the conditions we want. Part <% else_if offer an alternative if the block <% if not met. else_if are optional, can consist of one, several or none at all. For the <% else %> is a condition in which all the conditions if and else_if not be met, the else block is also optional.

For the condition element can contain a single variable/control or accompanied by logic == or != And alseo can be combined with logic && (and) and || (or).

Example:

<% if ClassName==Article %>
<title> $Title – [My Article] </title>
<% else %>
<title> $Title – [My Page] </title>
<% end_if %>

Other Controls/Variables

Silverstripe also bring the control or other variables that are available and can be used to assist designers in making the page templates.

$ThemeDir
This variable is used to give the output path to the directory of themes that are used. For example we're using sslearn directory, so if we write:
```
<img src=”$ThemeDir/images/logo.png” />
```
The result will be:
```
<img src=”themes/sslearn/images/logo.png” />
```
<% base_tag %>
This control is used to provide output <base> tag that was used to determine the href of a page. Designers can use this without having to think about a domain name or URL that will be used from the web.
Example:
```
<html>
	<head>
	<% base_tag %>
	<title>
	....
```
The results are:
```
<html>
	<head>
	<base href=”http://localhost/sslearn/”>
	<title>
	...
```
$Breadcrumbs
Breadcrumbs are used to display hierarchical navigation of the web. By using breadcrumbs will display the current position of pages viewed by users. Users also get the information hierarchy of the page. For example, if we are on page called sub-menu of whic is the child from the Home, then if we write:
```
 <div class=”Breadcrumbs”>$Breadcrumbs</div>
```
then the result is:
```
 <div class=”Breadcrumbs”><a href=”/”>Home</a> &raquo; Sub Menu</div>
```

Besides Control and variables I mentioned above, in fact there are many variables and other controls that can be used in silverstripe. You can read the documentation in silverstripe home page at http://doc.silverstripe.org/doku.php?id=templates.

What is Silverstripe?

Silverstripe is a free framework and content management system (open source), which can be used to manage a website. CMS to provide silvestripe an ease in managing the website. Each end user does not need to have the ability in the use of HTML. So it is easy to use.

Silverstripe has a development Model View Controller framework called Sapphire. Sapphire written using PHP5 language, with this MVC any website developers can also easily modify the functionality of the web, including with its CMS control panel pages. Silverstripe also provides full control of the HTML page generation, database design, forms, etc. With this control developers can avoid the mistakes typing html syntax, creating databases, forms, etc.

Silverstripe issued with BSD License. For documentation there was an online documentation for users and developers and also the complete guide to silvertripe book was released in August 2009. Silverstripe demo can be viewed through the video or try the demo at http://demo.silverstripe.com/.

Knowing Silverstripe MVC

Tue, 16 Mar 2010 05:58:59 -0500

Silverstripe as CMS have a MVC (Model View Controller) development framework called Sapphire. By using these MVC silverstripe developers can easily modify silverstripe CMS. This MVC also has its own template engine that can separate between program code and layout of web pages perfectly. Silverstripe programmers can work on without having to think about the web interface (html code) and vice versa designers can work without the need to think about the logic of the program. Control loop and there is also conditional on the template engine is making it easier to integrate logic programming with web interface. If you previously have not used the MVC framework, then I think Sapphire is an easy to use MVC.

The MVC Directory Structure

In fact, of the many directories on the Silverstripe CMS only two directories that are used for making a website. Two directories that will be used to create web is mysite directory and themes. Mysite directory used to store controller and models files, while the themes directory to store themes (view) files that is used by silverstripe. Another directory contains the Sapphire MVC PHP code, javascript code, modules and other supporting code for silverstripe.

After knowing the directory structure we also need to know the model template engine on silverstripe. In silverstripe, every page will have a type (Page Type). When creating a page in Silverstripe CMS we must determine what type of page will be created. The Basic page on silverstripe called Page. Page will have basic data structure to create a web page. It have a Title (Page Name), MenuTitle (Navigation Label) and Content. We can create a web page with this page types for the first time.

Model and Controller

If we take the example of Page from BlackCandy template, the Page Type will have the models and controllers located in a file mysite/code/Page.php and the view located in themes/blackcandy/templates/Page.ss. If you open the file in the directory Page.php mysite/code/, it will show two classes namely Page and Page_Controller. Class Page is a class that defines the model and a Page_Controller class defines the controller class of Page.

<?php
class Page extends SiteTree {
    ...
}

class Page_Controller extends ContentController {
    ...
}
?>

We can define a new attribute that we want in the Page Class. Or if we want to make new types of pages, we can use the Page Class as its parent class. For example we want to create a new type named Article which is derived from Page, then we must create a file named Article.php in the mysite/code/ directory.

class Article extends Page{
}

class Article_Controller extends Page_Controller{
}

Each type of page will have a .ss file located in the directory themes/[the template names]/templates/. Now try look at BlackCandy themes, in the directory themes/blackcandy/templates/ will have a file called Page.ss, which is the view file of page type called Page. Then, if we create a type of page named Article above on BlackCandy, it should have a file named Article.ss located in themes/blackcandy/templates/. If the file does not exist, Silverstripe will call his parent ss file which is Page.ss.

The View

The View from the silverstripe file has the extension .ss. Its located under the themes directory. As I mentioned before, each type of page will have a view that in accordance with the type name. Now we will take an example from the Page type. If we open Page.ss file from the directory themes/blackcandy/templates/, it will only show html codes with no PHP code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
        <% base_tag %>
        <title><% if MetaTitle %>$MetaTitle<% else %>$Title<% end_if %> &raquo; Your Site Name</title>
        $MetaTags(false)
        <link rel="shortcut icon" href="/favicon.ico" />
        
        <% require themedCSS(layout) %> 
        <% require themedCSS(typography) %> 
        <% require themedCSS(form) %> 
        
        <!--[if IE 6]>
            <style type="text/css">
             @import url(themes/blackcandy/css/ie6.css);
            </style> 
        <![endif]-->
        
        <!--[if IE 7]>
            <style type="text/css">
             @import url(themes/blackcandy/css/ie7.css);
            </style> 
        <![endif]-->
    </head>
<body>
<div id="BgContainer">
    <div id="Container">
        <div id="Header">
            $SearchForm
               <h1>Your Site Name</h1>
            <p>your site&#39;s tagline here</p>
        </div>
        
        <div id="Navigation">
            <% include Navigation %>
          </div>
          
          <div class="clear"><!-- --></div>
        
        <div id="Layout">
          $Layout
        </div>
        
       <div class="clear"><!-- --></div>
    </div>
    <div id="Footer">
        <% include Footer %>
    </div> 
</div>
</body>
</html>

This html code which will be displayed to the user via the browser.

So How do silverstripe connect the model and the controller with his view?

if you see more detail into the Page.ss files syntax and there are some unusual html tag such as <% base_tag %>, <% include ... %>, <% control ... %> or text like $Layout. It is the characters used by silverstripe template engine to connect between the logic code and web interface. For more details about the silverstripe template engine, will be discussed later.

OK, that's some of the basic Silversrtipe MVC. If you learn this MVC, then you will master the Silverstripe CMS and you can make any website with CMS Silversrtipe

Installing Mod_Rewrite on Apache

Sun, 21 Mar 2010 20:35:16 -0500

Mod_rewrite is used to change the URL using the commands rewriting engine (based on regex parser) is requested on the fly (directly). To use this module the Apache minimum version required is Apache 1.2 or latest version. You can install as a module mod_rewrite on your Apache webserver.

Before you install this module first checks whether the module is already installed by using phpinfo() if you are using php as a web programming. Loaded Modules section will appear modules that already installed, look for the words mod_rewrite, if exists you do not need to install the module, if not then prepared to install it.

The author uses Apache/2.2.12, PHP/5.2.10, Apache server bundle with Ubuntu Linux as operating system. To install this module looking for Apache httpd.conf file found in "/etc/apache2". Open the file with your preferred editor, notepad, gEdit, vim, nano, etc.. Find rows that contain word mod_rewrite.

# LoadModule rewrite_module modules/mod_rewrite.so

Then remove the sign # in line to become:

LoadModule rewrite_module modules/mod_rewrite.so

Save the httpd.conf file and then restart your Apache, the mod_rewrite module is ready for use. To ensure re-check with the phpinfo().

To make the file is easy, open your editor and save as the name ".htaccess".

If you are hosting to a provider usually we are not allowed to use the file type ".htaccess", then ask your provider to allow it. If you are using in the test localserver the configuration file is in httpd.conf, find the location of the directory where you placed the files of your web.

        <Directory /var/www/>
                Options Indexes FollowSymLinks MultiViews
                AllowOverride all # You must change
                Order allow,deny
                allow from all
        </Directory>

This section is to restrict the use of ".htaccess" on the server, for security settings are at "None" in this case to menggunakani mod_rewrite then turned into "all".

After all the preparation has been done so mod_rewrite is ready to use. Now open your .htaccess file and write the following code then save.

Options +FollowSymLinks 
RewriteEngine On 
RewriteRule google http://www.google.com/? [R,L]

Call your browser and type localhost/google or www.yourdomain.com/google, if the URL directly redirect to google.com means your mod_rewrite is running.