Creating a New Page Type

Last Update : 28/03/2010 6:48am
assets/Uploads/_resampled/SetWidth250-page-types.gif

The first time when we install silverstripe, silverstripe has provided some type of standard pages that can we use. These page types are:

  1. Page: this is the type of standard pages for each page shown.
  2. ErrorPage: This page is a page to display a customizable error conditions. For example we can use this type to create 404 pages (page not found) with a layout according to which we want.
  3. RedirectorPage: This page is a page to redirect (move to another page), whether it is in our web or those outside of our web.
  4. VirtualPage: same as Redirector page but only devoted to the existing pages on our website only, with different link from the destination page.

Apart from these four types of pages we can also create our own types of pages in accordance with our needs. Suppose we want to create a page whose content type consists of the title, date, pictures and content that we give the name of the type is ArticlePage. The way is easy and it not takes a lot of time.

Making a page type on silverstripe refer to the concept of MVC development framework. Where on this concept of a type of page is always going to have a component Model, View and Controller. For that, ArticlePage that will be created will have all three of these components.

Model and Controller

Model and Controller in silverstripe to a type of pages stored in a file that is located in the mysite/code/ directory  and have the extension .php. If we want to make a type named ArticlePage then we must create a php file named ArticlePage.php in that directory with the following contents:

mysite/code/ArticlePage.php

<?php

class ArticlePage extends Page { // Model
static $db = array(
'Date' => 'Date',
);
public static $has_one = array(
'Picture' => 'Image',
);
function getCMSFields() {
$fields = parent::getCMSFields();

$fields->addFieldToTab('Root.Content.Main', new CalendarDateField('Date'), 'Content');
$fields->addFieldToTab("Root.Content.Main", new ImageField('Picture'));

return $fields;
}
}
/* controller */
class ArticlePage_Controller extends Page_Controller {
}

?>

The model and controller at silverstripe using Object-oriented programming concepts, where each page will have a hierarchy like the image below:

Inheritance

So that at each new page type for it must be the child of Page. In his own page type is already providing data fields in the form like titles and content, so that it automatically will also be included in each type of page that is derived from the type of this page. We just need to make two additional fields of date and pictures. So the controller file Articlepage we need to add a variable like:

    static $db = array(
'Date' => 'Date'
);
public static $has_one = array(
'Picture' => 'Image'
);

Static $db is a database variable that will be generated by silverstripe, the contents contain an array of fields. Here the static $db we added a Date field which the type of the field also named Date. If you want to add any other fields you can add yourself to the field names at $db variable with the type of data. List of other data types you can see on URL http://doc.silverstripe.com/doku.php?id=data-types.

You may wonder why the $db variable is not directly include Picture with Image type? Actually the silverstripe image/file is stored using a separate table with the table of page. Because of that, if we want to use the image/file on our pages, we need relating our page to the table image/file. Here we use the $has_one variable which means every ArticlePage have one Picture with the type called Image.

After declaring the field we must add these fields into the CMS form. GetCMSFields() method is the method to used to display the field in the CMS. For that we need to override this method to display the form accordance with the field that we have declare before.

The View

Furthermore, we must create a view of the ArticlePage pages. Make a file called ArticlePage.ss which is stored in the directory templates/ of our themes directory. The example content of the file may like this:

<html>
<head>
<title>Themes Silverstripe 1</title>
</head>
<body>
<ul>
<% control Menu(1) %>
<li><a href="$Link">$MenuTitle</a></li>
<% end_control %>
</ul>
<div>
<h1>$Title</h1>
<div>Date : $Date.nice</div>
<div>$Picture</div>
$Content
$Form
</div>
</body>
</html>

If the Model, View and Controller is completed, access db/build/?flush=1 page in your browser. Later on the admin page will appear Article Page for the choice when making the page. The Article Page will show the form with the fields we have set.

Post your comment

Comments

No one has commented on this page yet.

RSS feed for comments on this page | RSS feed for all comments