I'm Learning SilverStripe

Displays month and year options on the calendar datefield

Thu, 26 Aug 2010 18:40:27 -0500

Silverstripe has a datefield. This field is used to fill the dates on the form. In version 2.4 by default, this field is only a text field to fill in the date format as "mm / dd / yyyy". But this field can be custom to display the calendar of the jquery javascript-UI. How to use it fairly easily:

    $datefield = new DateField("Date”, "Date");
    $datefield->setConfig('showcalendar', true);

Calendar of this field can actually be used to fill out the form. But has lacked at the time of filling I have a problem to change the month and year of filling, for example when filling date of birth. Back and forward buttons at the top of this field can only change one month backward or forward.

To activate the option in the calendar month and year this field, the way he is editing files sapphire / forms / DateField.php at line number 528 by adding two additional array variables:

        'changeYear' => true,
        'changeMonth' => true,

So variable conf becomes:

    $conf = array(
        'showcalendar' => true,
        'dateFormat' => $format,
        'changeYear' => true,
        'changeMonth' => true,
    );

Array variable changeYear and changeMonth a jquery datepicker-UI option to display a selection of months and years. Later after that on datefield calendar will be as below:

Creating Simple Page Counter

Sun, 09 May 2010 09:15:17 -0500

Page counter sometimes we need to know the number of the many people who read a page on our website. From page counters, we can also get information about the pages most often read by people. On silverstripe there is no page counters function, so we have to create your own.

To create a page counter is very easy. We just need to create a DataObject that contains two fields namely Counter and Page. Counter Field used to store counter data. Later this DataObject we relate to Page with Page field. Here we create an dataobject separate from page object to avoid versioning page data on each data update.

This Data Object can we save it into a file, for example, let's call the file with a name PageCounter.php in mysite directory.

PageCounter.php

<? 
    class PageCounter extends DataObject{
        static $db = array(
            'Counter' => 'Int',
        );
        static $has_one = array(
            'Page' => 'Page',
        );
    }
?>

Next we just add the following line in the init() function of Page_Controller class in Page.php file.

    $pagecounter = DataObject::get_one("PageCounter","PageID='$this->ID'");
    if(!$pagecounter){
        $pagecounter = new PageCounter();
        $pagecounter->PageID=$this->ID;
    }
    $pagecounter->Counter = $pagecounter->Counter+1;
    $pagecounter->write();

Next we must create a function to get value from the page counter object. This function is created inside the Page_Controller class on Page.php file. The goal is only to take counters data.

    public function pagecount(){
        $pagecounter = DataObject::get_one("PageCounter","PageID='$this->ID'");
        return $pagecounter->Counter;
    }

This function we can use in our template page.

Creating Paging (per page) for Query Results

Tue, 20 Apr 2010 04:23:15 -0500

There's one of my friends asking how to create paging in query results on silverstripe?

It is to display the query results we must make the results is limited per page. Paging is the term used to regulate the number of query results are displayed per page. If not using the paging all the query results will be displayed on one page and it is not reasonable if it is implemented on the website. We can imagine, if the google.com search results do not display in the form of paging, then we must make scrolling to find the search results to the bottom of result page.

In fact Silverstripe paging facilities already provided by the DataObjectSet object. This object is used to store a collection of DataObject. DataObjek is a Class to represent the Silverstripe Database. You can read how to use DataObject in http://doc.silverstripe.org/doku.php?id=dataobject.

Create paging on silverstripe actually easy. We class to use Class DataObjectSet on our query function. Suppose we make a function ArticlePageList whose content type to display the list of pages that we will restrict ArticlePage 10 per page, its code as follows:

public function ArticlePageList($limit=10){
    $start = isset($_GET['start']) ? (int) $_GET['start'] : 0;
      $list = DataObject::get("ArticlePage", "", "","","$start , $limit");
      return $list;
}

In functions there is a $list variable which is the DataObjectSet output of the static method DataObject: get. In this function we also determine the limit of the number of query results. Then on the template we can create the following code to display it:

<ul>
<% control ArticlePageList %>
        <li><a href="$Link">$Title</a><p>$Content.Summary(50)</p></li>  
<% end_control %>
</ul>

Above code wil be shown a list of type list of pages ArticlePage limit to 10 ArticlePage per Page.

To make the paging, we just use the method that has been provided by DataObjectSet. Method which we can use for paging is as follows:

MoreThanOnePage(), this method is used to determine if the output of the query results more than one page or not.
NextLink(), this method is used to get the URL for the next page.
NotFirstPage(), this method is used to provide information that the query results are displayed not on the first page.
NotLastPage(), this method is used to provide information that the query results are displayed not on the last page.
PrevLink(), this method is used to obtain the URL to the previous page.

to use the methods, we can directly implements it on the template silverstripe as below:

<% if LatestChild.NotFirstPage %>
    <a class="prev" href="$LatestChild.PrevLink">&laquo; Sebelumnya</a>
<% end_if %>                
<% if LatestChild.NotLastPage %>
    <a class="next" href="$LatestChild.NextLink">Berikutnya &raquo;</a>
<% end_if %>

In the above code there will be displayed a link to the previous page and next page for the ArticlePage list.

HOW TO Querying Pages in Silverstripe

Fri, 02 Apr 2010 01:40:42 -0500

Silverstripe uses a class called DataObject to interact with databases. We could say that every interaction with the database will be performed by the DataObject. For example we can do a query for any data we want on the Silverstripe with this object.

In making a new page type called ArticlePage, you may be wondering, "How do I create a list of ArticlePage pages?". We know that every page on silverstripe will be stored in MySQL database. So the answer to that question is that we live make a query on the MySQL database to get the entire list page and we'll display it on other pages.

Actually there are two ways to do it all.

1. Querying If the page it was on the child of a particular page

If the page you want to be queried is in the child of a page, we just call the control named Children in the templates (.ss file). Children will give output an array contain objects of the child page. Each array will have the attributes and methods in accordance with the type of pages.

Example we write like this:

<ul>
<% control Children %>
	<li><a href="$Link">$Title</a><p>$Content.Summary(50)</p></li>	
<% end_control %>
</ul>

On that page will be shown a html list that contains a list of titles and summaries from the pages of his children.

2. Querying If the pages are not on the child of a particular page

This second condition, we must create a method on the controller class of page you want to display a list of other pages. For example a page that wants to display the list is Page and type of page you want to make the list is ArticlePage. Next we must create a new method on the controller of Page.

mysite/code/Page.php

class Page_Controller extends ContentController{
. . . .
	public function ArticlePageList($limit=10){
		$start = isset($_GET['start']) ? (int) $_GET['start'] : 0;
		$list = DataObject::get("ArticlePage", "", "","","$start , $limit");
		return $list;
	}
}

This method made ArticlePageList will issue DataObjectSet output that contains a collection of DataObject. Function DataObject::get is a function that is used to retrieve an array of all DataObject(s) named ArticlePage found on the SiteTree no matter where the hierarchy location. In the method there is a parameter $limit used to determine the amount of data will be taken, for the default 10 data will be taken.

Furthermore, to use these methods we should call ArticlePageList controls on the template.

<ul>
<% control ArticlePageList %>
	<li><a href="$Link">$Title</a><p>$Content.Summary(50)</p></li>	
<% end_control %>
</ul>

At the function DataObject::get, there are several parameters that can be used to customize the output of the query. Suppose we want to take ArticlePage whose title has the word "silverstripe", then the code becomes:

$list = DataObject::get("ArticlePage", "Title LIKE '%silverstripe%' ", "","","$start , $limit");

or if we want to display the results sorted by the most recent data, then the code becomes:

$list = DataObject::get("ArticlePage", "", "Created DESC","","$start , $limit");

For more details about the method on the DataObject class you can learn its functions in the API Documentation of Class DataObject.

Image with Fixed SIze

Wed, 31 Mar 2010 07:18:38 -0500

If we read the documentation silverstripe about the image, we will get the reference method used to resize the image on silverstripe. But there are questions on the documentation. How do I change the image size by specifying the width and height of the image from the template file?

The trick is with SetSize method or PaddedImage. Both these methods set the image proportionately width and height. If the specified width and height are not proportionate, then the image will be given a white background.

What if we want the image that really fit either the width or height in size without a white background?

I still have not found a function that could be like that on silverstripe. But I have modify files from Image.php to make that function. The trick is to add the following two methods in the Image Class.

Open the sapphire/core/model/Image.php file then add these two methods in the Image Class:

class Image extends File{
....
	public function SetFixedSize($width, $height) {
		return $this->getFormattedImage('SetReSize', $width, $height);
	}

	public function generateSetFixedSize(GD $gd, $width, $height) {
		return $gd->resize($width, $height);
	}
....
}

After adding these two methods later in the template file (. Ss) we just call the method SetFixedSize to use it like we call the SetSize method. If the Image object named Picture, the template code will be like this:

<% control Picture %>
	<% control SetFixedSize(100,120) %>
		<img src="$URL"/>
	<% end_control %>
<% end_control %>

From the snippet above programs will be created fix image size of 100x120 with no white background.

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.

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 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.

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.

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.