Archive for April, 2008

Launch RoR App on HostGator

Tuesday, April 29th, 2008

這幾天試了一下在HostGator上跑RoR,搞了好久總算試成功。我是參考http://forums.hostgator.com/showthread.php?t=13038這篇教學,不過裡面寫的有點亂,所以整理一下以免自己忘記。

前置作業:
1. 首先要先申請SSH Acess

剛註冊好的帳號,並沒有辦法做SSH Access。所以要先Email給他們的Support Team: support@hostgator.com 說你要申請SSH Access服務,信裡要寫你的Account、Domain、信用卡末四碼及掃描或拍照的身份證正反面圖片。身份證圖片要加寫英文翻譯,如圖所示:

2. SSH登入,檢查Ruby和Rails版本

收到他們Support Team回覆以後,用SSH client連線軟體連到你的domain,Port應該是2222。登入了以後打ruby -v及rails -v,看一下版本是不是最新的。Po這篇時,Ruby應該是1.8.6,Rails應該是2.0.2。如果不是最新的,寫信給他們請他們幫你升級Ruby和Rails版本(記得要全寫,不要只寫Ruby,不然可能就只幫你升級Ruby),還有你需要的gem也可以一併要求安裝,如: will_paginate。

Launch RoR App流程:
1. Upload你的local project到Server上

將你的Ruby程式壓縮好丟到使用者根目錄(//home/username/)下,然後進CPanel的file manager解壓縮

2. 執行 ” rails . “

SSH登入,到你解壓好的project name下,打rails . → 覆蓋全部檔案

3. chmod 755 public

這步是最容易被遺忘的一步! 我也是爬文爬了好久才找到有人說要做這個動作,app才有辦法正常work。如果沒做的話,可能會出現這樣的錯誤
Application error
Rails application failed to start properly

4. 修改database.yml、environment.rb、routes.rb,刪除public/index.html

如果要跑production mode,記得加RAILS_ENV = ‘production’到environment.rb裡(舊寫法ENV['RAILS_ENV'] ||= ‘production’已不可用)。

5. 建立Subdomain

進入CPanel → Subdomain,建立一個Subdomain,如: demo.yourdomain.net。系統會自動產生一個demo的資料夾在public_html底下。

6. 建立Symbolic Link指到RoR App的public資料夾

SSH登入,到public_html底下刪除demo資料夾: rm -r demo
然後建立Link: ln -s ../demoruby/public demo

這樣應該就大功告成了~~ ^_^

適合架Ruby on Rails的國外虛擬主機商

Tuesday, April 29th, 2008

網路上爬到的這幾篇文章:
http://www.rubyonrailswebhost.com/ 推這幾家:
Top 5 Ruby on Rails Web Hosts
1. HostGator – 1st Place Tie
2. Site5 -1st Place Tie
3. Lunarpages – 2nd Place Tie
4. BlueHost – 2nd Place Tie
5. HostMonster – 2nd Place Tie Place
6. DreamHost – 3rd Place

http://www.railshosting.org/ 推這幾家:
>> RailsPlayground
Great Reliability & Support
>> HostingRails
Easy to Deploy & Scale
>> DreamHost
Tons of space/bandwidth
>> A2Hosting

個人用過Bluehost、Lunarpages和HostGator這三家
Bluehost支援Ruby on Rails做得還可以,不過連線速度有點慢,但是客服蠻即時的不錯!
他的CPanel有一個RoR的icon可以直接create一個RoR project,不過project的狀態好像沒啥用。但感覺還是比Lunarpages和HostGator方便。另外,跟他們申請退租,他們也不會機機車車的,一天就完成。

Lunarpages支援Ruby on Rails做的很糟,連線速度有比較快,但是客服像是龜速………….
在他們Sever要放一個新的RoR App非常麻煩!! 要先mail給他們客服要開的project name才能繼續動作。另外,在他們家申請退租,非常慢,最好要有耐性!!

HostGator就是我現在正在用的,支援Ruby on Rails也還可以,速度跟Lunarpages差不多,客服還蠻即時的。建RoR App有點小麻煩,但至少可以完全由自已處理。

Dreamhost支援Ruby on Rails好像還不錯,不過聽說好像很機車!!

HostingRailsRailsPlayground這兩家,支援RoR應該做的很棒,不過容量與流量限制似乎小了點。ping出來的速度好像慢了點。

Dojo rich text editor works with Ruby on Rails

Friday, April 25th, 2008

dojo_rich_editor

最近在公司暫時想不好什麼好的Idea,所以乾脆先用Ruby寫一個Open Source的KM系統當作練習
因為我一直覺得我們的KM系統很難用,也不能怪當初寫的工程師啦,畢竟他也是第一次寫
Any way, 最近寫到了文字Editor的部份
我以前本來在寫Client程式時,都是用GWT在寫,開發環境是用Eclipse + Java + GWT
現在開發Ruby App,IDE則是用Netbeans,我不想在Eclipse和Netbeans之前切來切去的
而且如果用GWT Client來跟Ruby Server溝通,就必須用JSON來傳資料,想到就很麻煩
前天去參加了Sun舉辦的開發者技術日,裡面有提到Dojo,它是純Javascript的Client Framework
剛好蠻適合我的需求,於是便去Dojo官網survey了一下
以下是我的心得:

1. Download Dojo V1.1.0

http://dojotoolkit.org/downloads

2. 參考 Rich Editor 教學

http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/advanced-editing-and-display/editor-rich-text
裡面有提到內建的plug-in有哪些:

Plugin Description
AlwaysShowToolbar Set to true to always display toolbar. No corresponding button.
EnterKeyHandling Make enter key handling consistent across browsers. The blockNodeForEnter property decides the behavior of Enter key. It can be either P, DIV, BR, or empty (which means disable this feature). Anything else will trigger errors. No corresponding button.
FontChoice Adds font drop down.
LinkDialog Provides a dialog for inserting URLs
TextColor Adds text color button

以及可用的properties:

Character Formatting bold, italic, underline, strikethrough, subscript, superscript, removeFormat, foreColor, hiliteColor
(這裡應該是foreColor及hiliteColor才對,C要大寫,官方教學網站寫錯了!)
Paragraph Formatting indent, outdent, justifyCenter, justifyFull, justifyLeft, justifyRight, delete, selectall
nserting Objects insertOrderedList, insertUnorderedList, createlink, inserthtml
Misc. undo, redo, cut, copy, paste

某些properties要用時,必須先require該plug-in才能用
例如要用foreColor或hiliteColor,就必須做dojo.require(“dijit._editor.plugins.TextColor”);
不過不知為何selectall和inserthtml這兩個試不出來

3. 將Dojo library解壓至你的Ruby App底下的 public/javascripts/dojo-release-1.1.0

把javascript library統一放這裡會比較好

4. 將下面這段code加入<head>…</head> tag裡
<style type="text/css">
@import "/javascripts/dojo-release-1.1.0/dijit/themes/tundra/tundra.css";
@import "/javascripts/dojo-release-1.1.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="/javascripts/dojo-release-1.1.0/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.Editor");
dojo.require("dijit._editor.plugins.TextColor");
dojo.require("dijit._editor.plugins.LinkDialog");
<span class="comment">// dojo.require("dijit._editor.plugins.FontChoice");</span>
<span class="comment">// dojo.require("dijit._editor.plugins.EnterKeyHandling");</span>
<span class="comment">// dojo.require("dijit._editor.plugins.AlwaysShowToolbar");</span>
</script>

可以看到我使用了TextColor和LinkDialog這兩個plug-in

5. 將下面這段code加入<body>…</body> tag裡
<p id="post_editor_body" class="tundra">
<b>Body</b>
<textarea id="post_body_dojo_editor" dojoType="dijit.Editor" height="200px"
plugins="[ 'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'removeFormat', 'foreColor', 'hiliteColor', '|',
'indent', 'outdent','justifyCenter', 'justifyFull', 'justifyLeft', 'justifyRight', 'delete', 'selectall', '|',
'insertOrderedList', 'insertUnorderedList', 'createLink', '|',
'undo', 'redo' ]">
<%=h @post.body %>
</textarea>
<input type="hidden" id="post_body" name="post[body]" value="">
</p>

仔細看的話會發現,我沒用cut, copy, paste這三個properties,原因是FireFox不支援
在FireFox只能用Ctrl+X, Ctrl+C, Ctrl+V,其實我也覺得這三個properties有點多餘
另外,我加了一個隱藏的input element,id為post_body,name為post[body]
這是為了在form submit時,讓ruby server端可以抓到post的body資料
如果把id跟name直接設在TextArea上並沒辦法work
原因可能是該TextArea實際的文字資料並不是存在value attribute裡,所以會抓不到

6. 加上需要的javascript function
<script type="text/javascript">
function trim(str) {
if( str != null )  {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
return null;
}

function doSubmit() {
<span class="comment">// 將dojo editor的文字資料抓出</span>
var bodyText = dijit.byId('post_body_dojo_editor').getValue();
bodyText = trim(bodyText);
// alert("["+bodyText+"]");
<span class="comment">// 將隱藏的input element值,設為dojo editor的輸入文字</span>
var ghostBodyField = document.getElementById("post_body");
ghostBodyField.value = bodyText;
<span class="comment">// 抓出form element,submit it</span>
var frm = document.getElementById("post_form");
frm.submit();
}
</script>

trim function是將字串的前後空白移除,在doSubmit裡會用到
doSubmit function是當form裡的submit button按下時會去call
加好所有的程式碼後,便可以開始編輯了,可以試著從網路上copy一段有圖有文的內容試試
另外,也可試著貼一段javascript code到編輯區裡,發現Dojo Rich Editor並不會被XSS攻擊
非常好~~~ This is what I want! ^_^