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 %> » 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'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