2012年5月18日 星期五

Backbone.js Model 07︰Sample 使用Post執行Save and Delete

Backbone.js在與Server執行CRUD的動作,也就是Model的fetch,save,destroy等Method預設是以REST來與Server溝通,因為在REST裡update與delete是用到 HTTP的PUT與DELETE Method
如果你的Server不支援,只允許使用POST與GET
以下是處理方式

Client端
一.開啟設定使用emulateHTTP與emulateJSON
當開啟emulateHTTP時,Backbone會將原本應該用PUT與DELETE  Method與Server溝通,改成以POST Method來送資料,並另外多傳遞一個POST參數_method
1.執行model.save()
原本會以PUT HTTP Method與Server溝通
會變成以POST HTTP Method與Server溝通,
並自動加上一個_method='PUT'的參數送出

2.執行model.destroy()
原本會以DELETE HTTP Method與Server溝通
會變成以POST HTTP Method與Server溝通,
並自動加上一個_method='DELETE'的參數送出

3.開啟emulateJSON
會將要傳遞的model資料序列化後,以一個POST參數model傳遞給server
Backbone.emulateHTTP = true;
Backbone.emulateJSON = true;

二.model執行CRUD相關參數區別
1.model.sync 接收到method值為
"create","read","update","delete"
2.REST Server接收到的HTTP METHOD為
"POST","GET","PUT","DELETE"
3.非REST Server接收到的$_POST['_method']為
"POST","GET","PUT","DELETE"

三.改寫Model SYNC
所有與Server溝通的動作,都會去執行到Sync,當model或collection執行CRUD時,會先去檢查model或Collection內是否有定義sync,如果有就會執行內部的synce,若沒有就會去執行系統global的Backbone.sync

要連結Server的URL,系統會先去檢查Sync內的options.url是否有設定,如果有會採用這裡的url來與Server溝通,若沒有才會去檢查model或collection內的url設定值

所以要讓不同的執行動作連結不同的Server url,規則就必須是寫在sync內
以下是model 改寫sync對應CRUD提供不同的url sample
define(['_Backbone'], function(Backbone) {
    return Backbone.Model.extend({
        sync:function(method, model, options){      
            switch(method){
            case "create":
                options.url =API_Save;
                break;
            case "update":
                options.url = API_Update+"/"+this.id;
                break;
            case "delete":
                options.url = API_Delete+"/"+this.id;
                break;           
             }            
            return Backbone.sync(method, model, options);
        }
    })    
});


Server端(以PHP為例)
一.判斷Client端要執行的動作
$cmd=$_POST['_method'];
$id=$_GET['id']
switch($cmd){
    case "PUT":
        $this->_update($id);
        break;
    case "DELETE":
        $this->_delete($id);
        break;
    case "GET":
      $this->_read($id);
        break;
    case "POST":
      $this->_create($id);
        break;                    
}
二.取得model資料
$model=$_POST['model'];
if(ini_get("magic_quotes_gpc")=="1"){
    $model=stripslashes($model);
};        
$obj = json_decode($model);
就可以用$obj.prop..形式來讀取傳進來的json相關屬性了

2012年5月15日 星期二

PHP CodeIgniter 安裝與設定

一.環境設定
目標是建置一個可以多個Project共用的使用環境
1.下載CodeIgniter放置於Web目錄下
(或其他主機目錄均可),所有App Project都將共用裡面的system folder
2.Web目錄下建置,CI_Application目錄,用來放置要開發的所有App目錄
3.在CI_Application目錄下,建立新目錄(ex:MyApp1)
在目錄下建立.htaccess檔案,並Copy CodeIgniter下app目錄與index.php到此目錄下, 這樣一個目錄即代表一個App
檔案結構
/ci_application/MyApp1/.htaccess
/ci_application/MyApp1/index.php
/ci_application/MyApp1/app

二.Apache rewrite設定
1.開啟rewrite mod
ubuntu:
cd /etc/apache2/mode-enabled
touch rewrite.load
寫入 LoadModule rewrite_module /usr/lib/apache2/modules/mod_rewrite.so
window
開啟 conf/httpd.conf
LoadModule rewrite_module modules/mod_rewrite.so
2.http conf設定
ubuntu:
開啟 /ect/apache2/sites-avilable/default
window:
開啟 conf/httpd.conf
在相關的<directory>內</directory><br />
AllowOverride All(none都改成All)

三.App Project設定
1..htaccess設定
RewriteBase / 設定在這App內要作rewirte以哪個目錄當作這App根目錄

RewriteBase /ci_application/myapp1/
2.index.php設定
設定$system_path與$application_folder,設定的字串可以使用相對路徑寫法
例:目前的設定都是把application目錄放在Project下
web_root/ci_application/MyApp1/app
$application_folder='app'

system目錄統一放在CodeIgniter目錄下
web_root/codeIgniter/system
$system_path='../../codeIgniter/system'
3.app內的config.php設定
//設定這個APP對應到的網址
$config['base_url']    = 'http://192.168.2.104/ci_app/myApp1/';
//設定index_page為空白,就可以讓網址上看不到index.php(只看到路徑/ci_application/myApp1/)
$config['index_page'] = '';
4.app內的database.php設定
設定要使用的db連線相關資訊