I'm Learning SilverStripe

Creating a New Page Type

Sat, 20 Mar 2010 00:53:24 -0500

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

Page: this is the type of standard pages for each page shown.
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.
RedirectorPage: This page is a page to redirect (move to another page), whether it is in our web or those outside of our web.
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:

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.

Creating Contact Page

Wed, 24 Mar 2010 00:58:51 -0500

At each web site, contact page (Contact Us) is one of the pages needed for site visitors to contact/comment to the creator's web. From the business side of this page must be made to accommodate the client desires. From this page also a business transaction can be starts.

In silverstripe, we can create a contact page containing a form to be filled by the customer. Every customer who wants to contact or provide a message to the website must fill out a message on this form. Later messages are stored into the database or if it allows such messages will be immediately sent to the email the site creator. Page contact to be made in this post has a form that contains the field names, email, phone and message.

Silverstripe has provide facilities page comments form, but is it a standard form. If we want another form we have to make our own. The way is easy and fast just like when we create pages in Creating New Page Type.

This time we will create a new page type called ContactPage in which there will be a form called ContactForm. For that we need to create a page that is ContactPage and ContactForm. And also there will be a data object used to store data-entry in database named Contact.

ContactForm

Create a file ContactForm.php in the directory mysite/code/

mysite/code/ContactForm.php

<? 
class ContactForm extends Form { 

function __construct($controller, $name) { 
   $fields = new FieldSet( 
      new TextField("name", "Name"), 
      new TextField("Phone", "Phone"), 
      new EmailField("email", "E-mail"), 
      new TextareaField ("message","Message") 
   ); 

   $actions = new FieldSet(new FormAction("sendContact", "Send")); 
   $validator = new RequiredFields("name", "email", "message"); 

   parent::__construct($controller, $name, $fields, $actions, $validator); 
} 

function forTemplate() { 
   return $this->renderWith(array( 
      $this->class, 
      'Form' 
   )); 
} 

function sendContact($data, $form) { 
} 

} 
?>

ContactForm is a class derived from Form. Where the content of the initial fields of the form that will be made. The file also contains the action of ContactForm if the form submitted. Action named sendContact on ContactForm created using the ContactForm Class method. In this case action is empty. This meant that we could customize the action later.

View for ContactForm will have stored on themes/themes1/templates/Includes directory. For that we need to create a file in that directory ContactForm.ss.

themes/sslearn/templates/Includes/ContactForm.ss

<% if IncludeFormTag %> 
    <form $FormAttributes> 
<% end_if %> 
<% if Message %> 
   <p id="{$FormName}_error" class="error $MessageType">$Message</p> 
<% else %> 
   <p id="{$FormName}_error" class="message $MessageType" style="display: none"></p> 
<% end_if %> 

<fieldset class="form"> 
   <legend>$Legend</legend> 
   <% control Fields %> 
       <label><span>$title</span> $Field</label> 
   <% end_control %> 
   <div class="clear"><!-- --></div> 
</fieldset> 

<% if Actions %> 
   <div class="send"> 
   <% control Actions %> 
      $Field 
   <% end_control %> 
   </div> 
<% end_if %> 
<% if IncludeFormTag %> 
   </form> 
<% end_if %>

ContactPage

Create a file ContactPage.php in the directory mysite/code/

mysite/code/ContactPage.php

<?php 

class ContactPage extends Page{ 
   public function getCMSFields() { 
      $fields = parent::getCMSFields(); 
      $contactEntry = new TableListField("contactEntry", "Contact", array("name"=>"Name", "phone"=>"Phone", "email"=>"Email","message"=>"Message")); 
      $fields->addFieldToTab("Root.Content.Contact", $contactEntry); 
      return $fields; 
   } 

} 

class ContactPage_Controller extends Page_Controller { 
   function ContactForm(){ 
      if(Session::get('ContactFormEntry')) { 
         Session::clear('ContactFormEntry'); 
         return "Your message has been sent"; 
      } 

      $form = new ContactForm($this, "ContactForm"); 
      return $form; 
   } 

   function sendContact($data,$form) { 
      Session::set('ContactFormEntry', true); 
      $Contact = new Contact; 
      $form->saveInto($Contact); 
      $Contact->write(); 
      Director::redirectBack(); 
   } 

} 

?>

ContactPage is a type of page that will be used to display ContactForm. ContactPage controller has a method to display ContactForm. From controller method, ContactPage also containing sendContact controller commands of the form. In sendContact method, data storage will be made into the data object Contact. For that we'll also have to create data objects Contact. Then after contact has been saved to database we can return to the previous page with instructions Director::redirectBack().

In the file ContactPage.php we see the contents getCMSField method more or less as follows:

public function getCMSFields() { 
	$fields = parent::getCMSFields(); 
	$contactEntry = new TableListField("contactEntry", "Contact", array("name"=>"Name", "phone"=>"Phone", "email"=>"Email","message"=>"Message")); 
	$fields->addFieldToTab("Root.Content.Contact", $contactEntry); 
	return $fields; 
}

In this method, we use an object TableListField to be used to display the contents of the Contact data objects that are used to store data from ContactForm entry.

After creating the file we have to make ContactPage.php view the contents ContactPage.ss approximately as follows:

themes/sslearn/templates/ContactPage.ss

<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> 
         $Content 
         $ContactForm 
      </div> 
   </body> 
</html>

Contact Data Object

Contact data object used to store data entry from ContactForm action. This data object that will represent the database. For making this Contact data object we need to make a contact.php file whose contents form a class named Contact derived from the DataObject class. These files are stored in the directory mysite / code / with following contents:

<?php 

class Contact extends DataObject{ 

	static $db = array( 
		'name' => 'Varchar', 
		'phone' => 'Varchar', 
		'email' => 'Varchar', 
		'message' => 'Text' 
	); 

} 
?>

In the Contact class will have an array variable named $db. The contents of this variable is array containing field definition in the database that will be used to store data in the entry on ContactForm we have previously made. The name of his field-adjusted to the form that was created.

The last stage before we use this contact form is to flush the database to build a database and silverstripe form and page design that we make. Way by typing ttp://localhost/sslearn/db/build/?flush=1 in your browser.

Next ContactPage page type will appear in the combo box when we will add a new page in the admin page of our Silverstripe CMS.

And also the contact tab will appear on the form on the contact page CMS to see anyone who has entry our contact data. This tab will contain the contact tablelistfield we have previously defined.

The way is easy enough. Please try by yourself, if there is a problem please give comments.

Image Object on Silverstripe

Thu, 25 Mar 2010 21:15:26 -0500

If you read a post about Creating a New Page Type, I created a new type of pages that contain the image object. If we see inside of Class Articlepage there is a definition:

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

The meaning of the definition is each Articlepage will have a field of Image named Picture.

Image is an object of silverstripe which is derived from the object file. All the attributes and methods contained in the object file will be owned by this object. The object image also has an additional method that is used to manipulate images for resizing.

Inputing Image File

Image files can be input using a form object named ImageField. As ArticlePage.php there is one line of code in the method getCMSFields as follows:

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

The syntax above will display form fields to input the image file.

Each image file will be automatically uploaded to the directory assets/Uploads.

Image Object On the Templates

Image object also has a standard template that can be directly used in the template file (.ss). In the example template ArticlePage.ss, there is a code:

<div>$Picture</div>

Where $Picture is Image Object, then on the HTML page will automatically become:

<img alt="engineeringrulerandpencil" src="/sslearn/assets/Uploads/engineeringrulerandpencil.jpg">

Resizing Image

SetWidth(width)
Is a method to set the width of the image. With this method the height of the image will be set proportionally.
How to use:
```
<div>$Picture.SetWidth(50)</div>
```
SetHeight(height)
Is a method to set the height of the image. With this method the width of the image will be set proportionally.
How to use:
```
<div>$Picture.SetHeight(50)</div>
```
SetSize(width, height)
Is a method to set the image size based on width and height specified. This method will adjust the image in a padded conditions, where the image will remain on for proportional, but if the height or width are disproportionately the image will be filled with a white background to make the size fixed.
How to use:
```
<div>
	<% control Picture %>
		<% control SetSize(100,50) %>
			<img src=”$URL”/>
		<% end_control %>
	<% end_control %>
</div> 
```

Beside to the above method there is also another method that can be used in the object image. You can read the documentation referred to in http://doc.silverstripe.org/doku.php?id=image.

Creating Flash Video Object on Silverstripe

Sun, 28 Mar 2010 06:48:44 -0500

One time ago, I was ever asked to do a web project in which there is a web page containing the video look like on youtube. The video file should be able to upload by their self. Later after the video uploaded, it have to be converted automatically to the .flv format which is will be displayed in the browser.

Actually, there is extension provided by Silverstripe to manage video called Youtube Gallery. But this extension provides only features to take videos from youtube. While my client wants to manage their own videos without using youtube or other video sharing website. For that, I tried to make an object FlashVideo to accommodate a request from my client.

Requirements

1. FFMPEG

FFMPEG is an opensource application that can be used to record, convert and stream audio and video. FFMPEG application is required to be used to convert uploaded video results from the user. These applications can be downloaded for free from http://ffmpeg.org/. If you use a hosting server, ask your admin to install this application.

After downloading and installing on a computer that is used by silverstripe. You must know the path of ffmpeg binary file. If on my computer ffmpeg file is located in /usr/local/bin/ffmpeg. We must make sure ffmpeg run by running the command /usr/local/bin/ffmpeg on the console (microsoft windows in command prompt). Usually output looks like:

bash-3.2# /usr/local/bin/ffmpeg
FFmpeg version SVN-r17910, Copyright (c) 2000-2009 Fabrice Bellard, et al.
  configuration: --enable-libmp3lame --enable-shared --disable-mmx
  libavutil     50. 0. 0 / 50. 0. 0
  libavcodec    52.21. 0 / 52.21. 0
  libavformat   52.31. 1 / 52.31. 1
  libavdevice   52. 1. 0 / 52. 1. 0
  libswscale     0. 7. 1 /  0. 7. 1
  built on Mar 10 2009 22:33:58, gcc: 4.0.1 (Apple Inc. build 5465)
At least one output file must be specified

If no error message means that ffmpeg is installed correctly.

2. FLV Player

We need a flv player to play the video on the web. In general, you can use any flv player. How to get it quite easily, search in google search engine with keywords "flv player" or "flash video player". I myself use the JW Player which can be downloaded for free at http://www.longtailvideo.com/players/jw-flv-player/. Flv player files will be .swf as a flash file.

FlashVideo Object

If you've installed ffmpeg and download flv player then we are ready to begin making the FlashVideo object on Silverstripe.

First of all, create a directory called FlashVideo in the main directory of silvertripe. Inside the FlashVideo directory, create two directories named code and swf, so the directory structure will look like in the picture below.

The purpose of creating this directory is to separate the FlashVideo object and its components from the main directory of our website (mysite) directory. However, we could actually make the object in the FlashVideo mysite directory, because its structure is same.

After making FlashVideo directory, copy the .swf files of flv player that you have downloaded in the swf directory. Flash video player file that I use is called player.swf, this file name will be used in viewing the FlashVideo file.

Create a file called _config.php in FlashVideo/code/ directory with the following contents:

FlashVideo/_config.php

<?php 
	define('FFMPEG_BIN',"/usr/local/bin/ffmpeg");
	$dir = "video"; 

	/*
		Don't change these code bellow if you dont know what you're doing!!
	*/
	define('VIDEO_PATH', ASSETS_PATH."/".$dir);
	define("VIDEO_DIR", ASSETS_DIR."/".$dir);

	if (!file_exists(VIDEO_PATH)){
		@mkdir(VIDEO_PATH);
		@mkdir(VIDEO_PATH."/_resampled");
		@mkdir(VIDEO_PATH."/_thumbnail");
	}
?>

_config.php configuration File which will FlashVideo use later. Silverstripe MVC will read the _config.php file first before processing the other FlashVideo files in the directory. In this file there is constants named FFMPEG_BIN used to inform the location of the application binary FFMPEG file. Then there is the definition of $dir= "videos", where $dir is the name of the directory to save the file processing results. This directory ($dir) will be located in the directory assets, so for our flv files can be managed easily through the Files & Images on silverstripe admin page.

After creating the file _config.php, next is create a FlashVideo.php file that is placed on FlashVideo/code/ directory. The contents of FlashVideo.php are as follows:

FlashVideo/code/FlashVideo.php

<?php
/* 
	Flash Video Model File for uploading Video Files and convert it to flv extension
	By Firnas Nadirman	
*/
class FlashVideo extends File {

	public static $thumbnail_width = 114;

	public static $thumbnail_height = 87;

	public static $cms_thumbnail_width = 100;

	public static $cms_thumbnail_height = 60;
	
	public $allowedExtensions = array("mov","mp4","avi","flv","mpeg","mpg");	
	
	public $flvplayer = "FlashVideo/swf/player.swf";
		
	function getOriginalFileURL() {
		return Director::baseURL() . $this->FileName;
	}
	
	function getURL() {
		if (!file_exists($this->getFlvFilePath())){
			$this->generateFlv();
		}
		
		return Director::baseURL().$this->getFlvFileName();
	}
	
	function URL() {
		return $this->getURL();
	}
	
	function forTemplate(){
		if(!file_exists($this->getCMSThumbFilePath())) {
			$this->getThumbnail($this->stat("cms_thumbnail_width"), $this->stat("cms_thumbnail_height"), $this->getCMSThumbFilePath());
		}
		return "<embed width=\"400\" height=\"300\" flashvars=\"file=".$this->getURL()."&amp;image=".$this->getCMSThumbFileName()."\" allowscriptaccess=\"always\" allowfullscreen=\"true\" quality=\"high\" bgcolor=\"#FFFFFF\" name=\"player\" id=\"player\" style=\"\" src=\"$this->flvplayer\" type=\"application/x-shockwave-flash\">";
	}
	
	function getThumbFileName(){
		return VIDEO_DIR."/_thumbnail/thumb_".strtolower($this->Name).".png";
	}
	
	function getThumbFilePath(){
		return VIDEO_PATH."/_thumbnail/thumb_".strtolower($this->Name).".png";
	}

	function getCMSThumbFileName(){
		return VIDEO_DIR."/_thumbnail/CMSthumb_".strtolower($this->Name).".png";
	}
	
	function getCMSThumbFilePath(){
		return VIDEO_PATH."/_thumbnail/CMSthumb_".strtolower($this->Name).".png";
	}
	
	public function CMSThumbnail() {
		return $this->generateCMSThumbnail();
	}

	public function getImage() {
		return $this->generateThumbnail();
	}

	function generateThumbnail(){
		if(!file_exists($this->getThumbFilePath())) {
			$this->getThumbnail($this->stat("thumbnail_width"), $this->stat("thumbnail_height"), $this->getThumbFilePath());
		}
		return "<img src=\"".$this->getThumbFileName()."\" title=\"".$this->Title."\">";
	}

	function generateCMSThumbnail() {
		if(!file_exists($this->getCMSThumbFilePath())) {
			$this->getThumbnail($this->stat("cms_thumbnail_width"), $this->stat("cms_thumbnail_height"), $this->getCMSThumbFilePath());
		}
		
		return "<div style=\"text-align:center;width: 100px;\"><a target=\"_blank\" href=\"$this->URL\" title=\"Download: $this->URL\"><img src=\"".$this->getCMSThumbFileName()."\" alt=\"".$this->getCMSThumbFileName()."\" /></a><br /><br /><a style=\"color: #0074C6;\"target=\"_blank\" href=\"$this->URL\" title=\"Download: $this->URL\">Download</a></div>";
	}
	
	function getThumbnail($width, $height, $filedest){
		$videoFile = BASE_PATH."/".$this->Filename;
		if(file_exists($videoFile)){
			$execthumb = FFMPEG_BIN." -i ".$videoFile." -r 1 -s ".$width."x".$height." -f image2pipe -vframes 1 -ss 00:00:01 ".$filedest;
			exec($execthumb);
		}
	}
	
	function getFlvFileName(){
		return VIDEO_DIR."/_resampled/"."flv_".strtolower($this->Name).".flv";
	}
	
	function getFlvFilePath(){
		return VIDEO_PATH."/_resampled/flv_".strtolower($this->Name).".flv";
	}
		
	function generateFlv(){
		$videoFile = BASE_PATH."/".$this->Filename;
		$execvid =	FFMPEG_BIN." -i ".$videoFile." -r 16 -ar 11025 -ab 32k -s cga -qscale 10 -y ".$this->getFlvFilePath();
		exec($execvid);
	}
		
}
?>

FlashVideo.php contains objects FlashVideo. This object is derived from the File object, so this object has all the attributes and methods that are owned by the File object. In this FlashVideo object there are several variables used to configure the FlashVideo files:

$thumbnail_width, this variable is used to determine the width of the thumbnail images of video.
$thumbnail_height, this variable is used to determine the height of the thumbnail images of video.
$cms_thumbnail_width, this variable is used to determine the width of the thumbnail images of video on the admin page.
$cms_thumbnail_width, this variable is used to determine the height of the thumbnail image of video on the admin page.
$allowedExtensions, this variable contains an array of file extension to be uploaded. You can add other file extensions on these variables.
$flvplayer, this variable contains the relative path to the flv file player from silverstripe directory.

If you've made a second file, then run the command db/build/?flush=1 on silvertripe url to add FlashVideo objects into the silverstripe database structure. Later this object we can use on our pages.

Using FlashVideo Object

To use the FlashVideo object on silverstripe page, we can add a fields type FlashVideo like adding fields of type Image. If in the previous post in ArticlePage.php, we can add the following code:

    public static $has_one = array(
	'Picture' => 'Image',
	'Video' => 'FlashVideo'
    );

We can use FileIFrameField for uploading video files on getCMSFields() method.

    function getCMSFields() {
       $fields = parent::getCMSFields();
    
       $fields->addFieldToTab('Root.Content.Main', new CalendarDateField('Date'), 'Content');
       $fields->addFieldToTab("Root.Content.Main", new ImageField('Picture'));
       $fields->addFieldToTab("Root.Content.Main", new FileIFrameField('Video'));
            
       return $fields;
    }

For our templates call variable of FlashVideo type ($Video) and placed on ArticlePage.ss as we want.

<h2>$Title</h2>
	
$Picture
$Video
$Content
$Form
$PageComments

Do not forget to do the command db/build/?flush=1. After that will appear flv player on ArticlePage which will contain uploaded video.

You can download the source code files of the above FlashVideo objects here.