CKEditor in CodeIgniter

Sunday, 29 August 2010 22:32

ကြၽန္ေတာ္ ဒီ Post မွာ CKEditor ကို CodeIgniter မွာ ဘယ္လိုေပါင္း ထည့္မလဲ ဆိုတဲ့ Tutorial ကိုေရးမွာ ျဖစ္ပါတယ္။ ဒါေၾကာင့္ CI မွာ Helper ေတြ၊ Library ေတြကို ဘယ္လိုေပါင္းထည့္လို႕ ရတယ္ ဆိုတာကို ေရးထားတဲ့ ဒီ Post ကိုအရင္ ဖတ္ထားဖို႔ လိုပါတယ္။

CI ထဲကို ေပါင္းထည့္မယ့္ CKEditor အေၾကာင္းေလး ဗဟုသုတ အျဖစ္ နဲနဲၾကည္ လိုက္ရေအာင္။ CKEditor ဆိုတာကေတာ့ Web ေပၚမွာ user friendly ျဖစ္ေအာင္ လုပ္ေပးထားတဲ့ WYSIWYG editor အမ်ိဳးအစားပဲ ျဖစ္ပါတယ္။ WYSIWYG ကဆိုတာကေတာ့ What-You-See-Is-What-You-Get ကိုေျပာတာ ျဖစ္ပါတယ္။ ကြၽန္ေတာ္တို႔ Word ထဲမွာ Font Size, Font color, Font Style ေတြ၊ Number & Bullet ေတြ၊ Table Format ေတြကို အလြယ္တကူ လုပ္ႏိုင္ သလိုမ်ိဳး Web Page ေတြမွာ CKEditor ကိုသုံးျပီး လုပ္ႏိုင္ပါတယ္။ Web based ျဖစ္တာေၾကာင့္ Word ကိုေတာ့ Feature ေတြအကုန္ ယွဥ္လို႕ မရေပမယ့္ အသုံးဝင္တဲ့ Editor တစ္ခု ျဖစ္တာကေတာ့ အေသအခ်ာပါပဲ ခင္ဗ်ာ။ CKEditor ဆိုတာကေတာ့ 2003 ေလာက္ထဲက စတင္ခဲ့တဲ့ FCKEditor ရဲ႕ new generation အျဖစ္ 2009 မွာေျပာင္းလဲ ခဲ့တာျဖစ္ပါတယ္။

ဒါေၾကာင့္ ခုခ်ိန္မွာ Google မွာ FCKEditor လို႔ရွာရင္လဲ CKEditor ကိုပဲ ေတြ႔ရပါ လိမ့္မယ္။

အဲဒီ အသုံးဝင္တဲ့ကို CI ထဲကို ဘယ္လို ေပါင္းထည့္ မလဲ ဆိုတာ ဆက္ၾကည့္ ရေအာင္။

1) Download CKEditor

ဒီမွာ CKEditor ကို အရင္ Download လုပ္ဖို႔ လိုပါတယ္။

2) Create folder in CI for CKEditor

Download လုပ္ထားတဲ့ Folder ကိုဖြင့္ လိုက္လို႕  _samples ၊  _sources folder ေတြကိုေတြ႔ ခဲ့ရင္ေတာ့  အဲဒီ Folder ေတြ မရွိလည္း အလုပ္လုပ္တာမို႔ Delete လုပ္ျပစ္ရင္ ပိုေကာင္းပါတယ္။ မလုပ္လဲ ျပသနာ မရွိေသာ္လည္း server ေပၚအတင္အခ်ေတြမွာ အခ်ိန္ၾကာတာေတြ ျဖစ္ေစႏိုင္ပါတယ္။ ျပီးရင္ေတာ့ js folder ကို system folder နဲ႔ level တူေဆာက္ေပးျပီး အဲဒီေအာက္မွာ ckeditor ဆိုျပီး ေနာက္ folder တစ္ခုထပ္ေဆာက္ျပီး ခုနက _samples ၊  _sources folder ေတြ Delete လုပ္ျပီး က်န္ေနတဲ့ files ေတြ၊ folders ေတြ အားလုံးကို အဲဒီ ေအာက္မွာ copy ကူးျပီး ထည့္လိုက္ပါ။ Folder Structure ကိုၾကည့္မယ္ ဆိုရင္ေတာ့

3) Add CKEditor Helper in CI

ဒီအဆင့္မွာ helper file ေရးရမွာ ျဖစ္လို႕ application/helpers ေအာက္မွာ file အသစ္ တစ္ခု ေရးျပီးထည့္ ေပးရပါမယ္။ ဒီမွာ ေရးျပေနရင္ အရွည္ၾကီး ျဖစ္သြားမွာ စိုးတာေၾကာင့္ ဒီေနရာမွာ Download လုပ္ျပီး application/helpers ကိုထည့္ေပး လိုက္ပါ။ File name ကိုေတာ့ ckeditor_helper.php လို႔ေပး လိုက္ပါ။ အဲဒီ file ကို ဖြင့္ၾကည့္မယ္ ဆိုရင္ CKEditor ကိုသုံးရန္ လိုအပ္တဲ့ Function ေတြကို စုေရးထားတာ ေတြ႔ရပါမယ္။ Author ေရးထားတဲ့ အတိုင္းသုံးရတာ အဆင္ေျပေနတဲ့ အတြက္ျပင္ေနဖို႔ မလိုပါ။

4) Create Controller

ကြၽန္ေတာ္ထည့္လိုက္တဲ့ helper ကိုျပန္ေခၚဖို႔ Controller ကိုဆက္ လုပ္ပါမယ္။ ckeditor.php လို႔ နာမည္ေပးျပီး ဒီ code ေလးကိုထည့္ ေပးလိုက္ပါ။

<?php

class Ckeditor extends Controller {
   
    public $data     =     array();
   
    public function __construct() {
       
        parent::Controller();

        $this->load->helper('url'); //You should autoload this one ;)
        $this->load->helper('ckeditor');
       
        //Ckeditor's configuration
        $this->data['ckeditor'] = array(
       
            //ID of the textarea that will be replaced
            'id'     =>     'content',
            'path'    =>    'js/ckeditor',
       
            //Optionnal values
            'config' => array(
                'toolbar'     =>     "Full",     //Using the Full toolbar
                'width'     =>     "550px",    //Setting a custom width
                'height'     =>     '100px',    //Setting a custom height
                   
            ),
       
            //Replacing styles from the "Styles tool"
            'styles' => array(
           
                //Creating a new style named "style 1"
                'style 1' => array (
                    'name'         =>     'Blue Title',
                    'element'     =>     'h2',
                    'styles' => array(
                        'color'             =>     'Blue',
                        'font-weight'         =>     'bold'
                    )
                ),
               
                //Creating a new style named "style 2"
                'style 2' => array (
                    'name'         =>     'Red Title',
                    'element'     =>     'h2',
                    'styles' => array(
                        'color'             =>     'Red',
                        'font-weight'         =>     'bold',
                        'text-decoration'    =>     'underline'
                    )
                )               
            )
        );
       

    }
   
    public function index() {
       
        $this->load->view('ckeditor', $this->data);
       
    }
}

id - CKEditor ရဲ႕ ID ပါ။
path - CKEditor Source ေတြကို Download ခ်ျပီး js folder ေအာက္ထားခဲ့တာ မွတ္မိမယ္ ထင္ပါတယ္။ အဲဒီ path ကိုေျပာတာပါ။
config - ဒီမွာေတာ့ toolbar, width, height စတာေတြကို လိုအပ္သလို parameter ေပးႏိုင္ပါတယ္။
style - CKEditor မွာ style ဆိုတဲ့ dropdown ေလးရွိေနျပီး ကိုယ့္ေရးထားျပီးသားကို select လုပ္ျပီး style dropdown ထဲကေန style တစ္ခုခုကိုေရြးတာနဲ႔ auto ေျပာင္းသြားပါမယ္။ အဲဒီ dropdown ထဲမွာေပၚမယ္ style ေတြအတြက္ ေရးထားျခင္း ျဖစ္ပါတယ္။

အားလုံးျပီးသြားေတာ့ view ကိုေခၚရင္း အဲဒီ data array ကိုထည့္ေပး လိုက္ပါတယ္။
$this->load->view('ckeditor', $this->data);

5) Create View

ေနာက္ဆုံး အဆင့္အေနနဲ႔ ckeditor.php ဆိုတဲ့ view ကိုေဆာက္ျပီး ဒီ code ေလးထည့္ေပး လိုက္ပါ။ သုံးသြားတဲ့ display_ckeditor function ကေန ckeditor_helper.php ထဲမွာ ေရးထားျပီးသားကို ေခၚလိုက္တာ ျဖစ္ပါတယ္။

ဒါကေတာ့ Googling လုပ္ရင္း ရွာေတြ႔တာ ေလးကို ျပန္ေရး ထားတာ ျဖစ္လို႕ တျခားနည္း တစ္ခုခုနဲ႔ CI ထဲေပါင္းထည့္တာ ရွိရင္လည္း comment မွာေရးထား ခဲ့ႏိုင္ပါတယ္။

Ref: http://kromack.com/developpement-php/codeigniter/ckeditor-helper-for-codeigniter/

Extend in CodeIgniter Framework

Saturday, 28 August 2010 22:23

ဒီ Post မွာ အဓိကထားျပီး ေရးမွာ ကေတာ့ CodeIgniter Framework ေပၚမွာ ရွိေနျပီးသား Library, Helper ေတြနဲ႔ မလုံေလာက္ ရင္ ျဖစ္ေစ၊ ကိုယ့္ Project Requirement အရ ေရးထည့္ဖို႔ လိုလာရင္ ျဖစ္ေစ Library, Helper အသစ္ေတြကို ဘယ္လိုထည့္ မလဲ ဆိုတာကို ျဖစ္ပါတယ္။ တစ္ နည္း အားျဖင့္ CI Framework ကိုဘယ္လို Extend လုပ္မလဲ ဆိုတာလဲ ျဖစ္ပါတယ္။ ကြၽန္ေတာ္ ေရးထားျပီးသား CI Post ေတြကို ျပန္ဖတ္ခ်င္ရင္ေတာ့

1. CodeIgniter and MVC for Beginners
   
2. Structure and Configuration of CodeIgniter
   
3. CodeIgniter Database Library
   
4. CodeIgniter Form Helper
   
5. Simple Data Entry in CodeIgniter
   
6. Pagination with CodeIgniter
   
7. File upload in CodeIgniter
   

How to add own Helper

Okay အရင္ဆုံး helper တစ္ခုဘယ္လို ေပါင္းထည့္ မလဲ ဆိုတာေလး ၾကည့္ရေအာင္။ CI Structure မွာ application နဲ႔ system ရွိေနျပီး Built-In Library ေတြ၊ Helper ေတြအားလုံးက system ေအာက္မွာပဲ ရွိတယ္ဗ်ာ။ ကိုယ့္ အသစ္ထည့္ ခ်င္တာကို အဲဒီ Folder ေတြေအာက္မွာ သြားမထည့္ ရပါဘူး။ ဒါဆိုဘယ္မွာ ထည့္ရမလဲ ဆိုေတာ့ ... application folder ေအာက္မွာလည္း helpers, libraries folder ေတြရွိေနပါတယ္။ အဲဒီမွာ ထည့္ေပးရပါမယ္။

ကြၽန္ေတာ္ကေတာ့ helpers folder ေအာက္မွာ calculation_helper.php  ဆိုျပီး php file အသစ္တစ္ခု ေဆာက္လိုက္တယ္။ အဲဒီမွာ  မွတ္သား စရာ တစ္ခုကေတာ့ file name မွာ ေနာက္က _helper ဆိုတာပါရပါမယ္။ ဆိုလိုတာကဗ်ာ abc_hepler.php, xyz_helper.php စသည္ျဖင့္ ေရွ႕က ျဖစ္ခ်င္တာ ျဖစ္ျပီး ေနာက္က _helper.php နဲ႔ ဆုံးေပးရမယ္။ ျပီးေတာ့ ေရးေနၾကအတိုင္းပဲ function ေရးလို႕ ရပါတယ္။ ကြၽန္ေတာ္ကေတာ့ function add_value ကိုေရးထားလိုက္ပါတယ္။ 

<?php

function add_value($val1,$val2){
    return $val1 + $val2;
}

အဲဒီ Code ကို Controller ထဲက ေခၚ ၾကည့္ဖို႔ controller တစ္ခုကို ဆက္ျပီးေဆာက္မယ္။ 

<?php


class Test extends Controller{


    function calculate(){
        
      

     $this->load->helper('calculation');
        
      

     $val1 = 5; 
      

     $val2 = 3;
      

     echo "Result is " . add_value($val1,$val2);
  

    }
}

test.php ဆိုျပီး နာမည္ေပး လိုက္မယ္ဗ်ာ။ ဒါက ခုန ကြၽန္ေတာ္ေရးထားတဲ့ Helper calculation ကို loading လုပ္တာပါ။

$this->load->helper('calculation');

ကြၽန္ေတာ္ လုပ္ထားတာ calculation_helper ျဖစ္ေပမယ့္ ျပန္ေခၚေတာ့ _helper မပါေတာ့ပါဘူး။ တကယ္လို႕ ကိုယ့္က abc_helper.php ကိုလုပ္ထားခဲ့ မယ္ဆိုရင္ေတာ့ $this->load->helper('abc'); ေပါ့ဗ်ာ။ Browser ကေန ဒီလို Run လိုက္မယ္ ဆိုရင္ေတာ့

http://localhost:8888/ci_extend/index.php/test/calculate/

ႏွစ္ခု ေပါင္းထားတဲ့ result ကိုျမင္ရဖို႔ သုံးသြားတဲ့ add_value ဆိုတာကေတာ့ calculation_helper.php ထဲက ေခၚသြားတာ ျဖစ္ပါတယ္။
ဒါဆိုရင္ေတာ့ CI မွာ Helper အသစ္တစ္ခု ဘယ္လိုထည့္ မယ္ဆိုတာ Idea အၾကမ္းေတာ့ ရမယ္ ထင္ပါတယ္။

How to add own Library

Library အသစ္တစ္ခု ဘယ္လိုေပါင္းထည့္ မလဲ ဆိုတာကို ဆက္ျပီး ၾကည့္လိုက္ရေအာင္။ application ေအာက္က libraries folder မွာ ကိုယ္ထည့္ ခ်င္တဲ့ library အသစ္တစ္ခုကို ထည့္ေပးရမယ္။ ကြၽန္ေတာ္က hello ဆိုတဲ့ Library ကိုထည့္ ဖို႔ ဒီလိုေလး ေရးလိုက္တယ္ဗ်ာ။ file name ကေတာ့ hello.php ေပါ့ဗ်ာ။

<?php
class hello{

function message(){
    echo "How are you?";
}
    
}
?>

function hello_lib(){
    $this->load->library('hello');
    $this->hello->message();
}

ျပီးရင္ေတာ့ Browser ကေန ဒီလိုေလး run ၾကည့္မယ္ ဆိုရင္ေတာ့  http://localhost:8888/ci_extend/index.php/test/hello_lib/
"How are you?" ဆိုတဲ့ message ကိုျမင္ရမွာ ျဖစ္ပါတယ္။

How to use resource from existing Libraries

အဲဒီ ကိုယ္ထည့္လိုက္တဲ့ Library မွာ ရွိေနျပီးသား library ေတြထဲက value ေတြ function ေတြကို ျပန္သုံးခ်င္ရင္ေရာ ဘယ္လို လုပ္မလဲ ဆိုတာေလးကို ၾကည့္ရေအာင္။ ခုန ေရးထားတဲ့ Library ထဲမွာ ဒီ code ေလးကိုထည့္ ၾကည့္မယ္ေနာ္။  
 

function message(){
        echo "How are you?";
        $this->load->library->('config');
}

ဘာလိုလဲ ဆိုေတာ့ $this က point လုပ္ေနတာက hello class ကိုျဖစ္ေနလိုပဲ ျဖစ္ပါတယ္။ ဒီေတာ့ super class object ကိုျပန္ယူေပးဖို႔  လိုပါတယ္။ အဲဒါေၾကာင့္ Library ကို ဒီလိုေလး ျပင္လိုက္မယ္။

<?php
class hello{
    
    var $CI;
    
    function hello(){
        $this->CI = & get_instance();
        
    }
    
    function message(){
        echo "How are you?";
        $this->CI->load->library('config');
        echo "My Languages is " . $this->CI->config->item('language');
        //$this->load->library->('config');
    }
}
?>

Ref: http://net.tutsplus.com/tutorials/php/codeigniter-from-scratch-extending-the-framework/