Archive for the ‘ Coding ’ Category

SVN + Trac + Apache 完整安裝攻略

SVN + Trac + Apache 完整安裝攻略,而原本在 SVN 所欠缺的用戶及權限管理介面,也都可以由 Trac 的外掛程式來搞定,可謂兩全其美。

本文章適合熟悉 SVN 但沒用個任何線上專案管理的人做為參考。

請注意,本人使用的 Linux 是 CentOS 4.x,RHEL 4.x 也適用。

Read more

[JavaScript]動態網頁設計的相關網頁 (dhtml)

國外網站

中文網站

其它

正規表示式 (Regular Expression) 語法整理

正規表示式 (Regular Expression, 簡寫 regex、regexp 或 RE) 是用於字串比對的小型語言,又稱正則表達式、正規表示法、規則運算式、常規表示法 (Wiki)。

很多程式語言和軟體都會附加「正規表示式」這項功能。在字串的處理上,針對大量、重複、有固定邏輯的文字,正規表示式是非常強而有力的工具! 即便不是程式設計師,在可以在運用到正規表示式的場合 (例如: 文字編輯器),能幫你節省許多文字處理的時間。但是不同的軟體所附加的正規表示式可能略有差異,這部份就要稍加留意。

不過在初學者的眼中,正規表示式卻又像是天書一樣的難以理解。以下文章針對正規表示式的相關語法做解說,你可到線上測試工具,以實際的例子去做測試。

Read more

[Perl][JavaScript]以數學的原理處理四捨五入

我看過太多人都把四捨五入的問題看成是「字串」來處理,實際上,如果把四捨五入做為「數學」來解的話,程式大概只要幾行即可解決。

以四捨五入取整數的例子來講,其原理就是: 任何數值 +0.5 再取整數

但要注意的是,當四捨五入遇到「負數」時就會變成「五捨六入」,這是因為中間數要往數值大的那邊進位的緣故。所以加上了負數的處理,程式至少又多了一行:
Read more

[JavaScript]讓網頁的「外部超連結」自動開啟在新視窗

在編輯網頁時,如果要讓某個超連結 (Link) 開啟在新的瀏覽器視窗,我們可以在超連結加上「href="_blank"」屬性,但如果超連結很多,要一個一個加上去畢竟麻煩!!

以下的程式碼可以幫你把網頁內所有針對「外部」的超連結自動設為在新視窗開啟。

一般網頁

  1. 將下列程式碼加到網頁的 <head> 區段:
    <script type="text/javascript">
    function parseLink(){
      var tagA = document.getElementsByTagName( "a" );
      re = new RegExp( "^(http://" + document.domain + ")|(javascript:)", "i" );
      for( var i=0; i < tagA.length; i++ ){
        if( !tagA[i].href.match( re ) ){ tagA[i].target = "_blank"; }
      }
    }
    </script>
  2. 在 <body> 標籤內的 onload 事件加入:
    parseLink();

    Ex:

    <body onload="parseLink();">

WordPress 外掛程式

如果你的網站是用 WordPress 架設,可直接在控製台搜尋並安裝「Open external links in a new window」這個外掛程式 (版本: 1.3.1 作者: Kristian Risager Larsen),這樣就不用添加任何程式碼了。

另外需注意,如果本外掛程式與其它像 LightBox、FancyBox...之類的圖片燈箱特效的程式一起使用,有可能會造成同時顯示燈箱特效,又同時將圖片開啟於新視窗!!

在 Blogger 中使用 dp.SyntaxHighlighter 顯示程式碼

db.SyntaxHighlighter 是一支不錯的程式碼高亮度顯示程式,特點為:

  1. 顯示行號
  2. 支援12種程式語言
  3. 模組化載入需要的程式語言
  4. 支援 「<pre>」 及 「<textarea>」 區塊
  5. 純文字檢視
  6. 複製到剪貼簿
  7. 直接列印程式碼

缺點就是載入速度較慢。

安裝步驟

  1. 修改 blogger 樣板,搜尋 「</body>」,在 「上方」 加入(你可以選擇你要的語言載入即可):
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shCore.js'></script>
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushPhp.js'></script>
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushJScript.js'></script>
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushSql.js'></script>
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushXml.js'></script>
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushDelphi.js'></script>
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushPython.js'></script>
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushRuby.js'></script>
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushCss.js'></script>
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushCpp.js'></script>
    <script class='javascript'>
    dp.SyntaxHighlighter.ClipboardSwf = 'http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
    </script>

    (因為 「偷吃步」 的關係,程式直接連到 dp.SyntaxHighlighter 的 SVN 上,你可以視情況下載回來放到自己的伺服器)

  2. dp.SyntaxHighlighter 原本已經有一個 CSS 檔了,但如果將這個 CSS 檔以 「Link」 的方式載入,卻無法正常顯示。所以,請自行增加下列 CSS 到 blogger 樣板的 CSS 區段:
    /*dp.highlighter*/
    .dp-highlighter {
      font-family: "Consolas", "Courier New", Courier, mono;
      font-size: 12px;
      background-color: #E7E5DC;
      width: 99%;
      overflow: auto;
      margin: 18px 0px 18px 0px;
      padding-top: 1px; /* adds a little border on top when controls are hidden */
      border:1px inset;
      max-height:200px;
    }
    .dp-highlighter .bar {
      padding-left: 45px;
    }
    .dp-highlighter.collapsed .bar,
    .dp-highlighter.nogutter .bar {
      padding-left: 0px;
    }
    .dp-highlighter ol {
      list-style: decimal; /* for ie */
      list-style: decimal-leading-zero; /* better look for others */
      background-color: #fff;
      margin: 0px 0px 1px 45px; /* 1px bottom margin seems to fix occasional Firefox scrolling */
      padding: 0px;
      color: #5C5C5C;
    }
    .dp-highlighter.nogutter ol {
      list-style-type: none !important;
      margin-left: 0px;
    }
    .dp-highlighter ol li,
    .dp-highlighter .columns div {
      border-left: 3px solid #6CE26C;
      background-color: #f8f8f8;
      padding-left: 10px;
      line-height: 14px;
    }
    .dp-highlighter.nogutter ol li,
    .dp-highlighter.nogutter .columns div {
      border: 0;
    }
    .dp-highlighter .columns {
      color: gray;
      overflow: hidden;
      width: 100%;
    }
    .dp-highlighter .columns div {
      padding-bottom: 5px;
    }
    .dp-highlighter ol li.alt {
      background-color: #fff;
    }
    .dp-highlighter ol li span {
      color: Black;
    }
    /* Adjust some properties when collapsed */
    .dp-highlighter.collapsed ol {
      margin: 0px;
    }
    .dp-highlighter.collapsed ol li {
      display: none;
    }
    /* Additional modifications when in print-view */
    .dp-highlighter.printing {
      border: none;
    }
    .dp-highlighter.printing .tools {
      display: none !important;
    }
    .dp-highlighter.printing li {
      display: list-item !important;
    }
    /* Styles for the tools */
    .dp-highlighter .tools {
      padding: 3px 8px 3px 10px;
      font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
      color: silver;
      background-color: #f8f8f8;
      text-align1: right;
      padding-bottom: 10px;
      border-left: 3px solid #6CE26C;
    }
    .dp-highlighter.nogutter .tools {
      border-left: 0;
    }
    .dp-highlighter.collapsed .tools {
      border-bottom: 0;
    }
    .dp-highlighter .tools a {
      font-size: 9px;
      color: #a0a0a0;
      text-decoration: none;
      margin-right: 10px;
    }
    .dp-highlighter .tools a:hover {
      color: red;
      text-decoration: underline;
    }
    /* About dialog styles */
    .dp-about { background-color: #fff; margin: 0px; padding: 0px; }
    .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
    .dp-about td { padding: 10px; vertical-align: top; }
    .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
    .dp-about .title { color: red; font-weight: bold; }
    .dp-about .para { margin: 0 0 4px 0; }
    .dp-about .footer { background-color: #ECEADB; border-top: 1px solid #fff; text-align: right; }
    .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; width: 60px; height: 22px; }
    /* Language specific styles */
    .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; }
    .dp-highlighter .string { color: blue; }
    .dp-highlighter .keyword { color: #069; font-weight: bold; }
    .dp-highlighter .preprocessor { color: gray; }
  3. 儲存即可

使用方法

  • 方法一 - 使用 「<textarea>」 區塊,需將 「&」 轉換為 「&amp;」:
    <textarea name="code" class="程式語言">
    程式碼
    </textarea>
  • 方法二 - 使用 「<pre>」 區塊,需將 「&」 轉換為 「&amp;」、」<」 轉換為 「&lt;」、」>」 轉換為 「&gt;」:
    <pre name="code" class="程式語言">
    程式碼
    </pre>

參考網頁

在 Blogger 中使用 google-code-prettify 顯示程式碼

google-code-prettify 是一支不錯的程式碼高亮度顯示程式,特點為:

  1. 支援 15 種程式語言(但某些語言似乎還沒完成)
  2. 程式僅兩個檔案
  3. 載入速度較快

缺點為:

  1. 跟 IE 的相容性比較不佳,在 IE 內複製程式碼時無換行符號
  2. 無行號顯示
  3. 僅支援 "<pre>" 區塊
  4. 程式碼過長時不會自動顯示捲軸 (可透過修改 CSS 解決)

安裝步驟

  1. 修改 blogger 樣板,搜尋 "</head>",在 "上方" 加入
    <link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' type='text/css' rel='stylesheet' />
    <script type='text/javascript' src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js'></script>

    (因為 "偷吃步" 的關係,程式直接連到 google-code-prettify 的 SVN 上,你可以視情況下載回來放到自己的伺服器)

  2. 繼續搜尋 "<body>",在標籤內的 onload 事件加入:
    prettyPrint();
  3. 儲存即可。

使用方法

      使用 "<pre>" 區塊,需將 "&" 轉換為 "&amp;"、"<" 轉換為 "&lt;"、">" 轉換為 "&gt;":
<pre class="prettyprint">
程式碼
</pre>

參考網頁

在 CentOS 4.x 安裝 Subversion 1.4.3

Subversion (簡稱 SVN) 是目前最熱門的版本控制套件,因為語法與 CVS 相近,又是改良自 CVS,幾乎所有平台的 OS 都有支援,目前正快速地進佔版本控制的霸主地位。以下介紹 Subversion 在 CentOS 4.x 或 RHEL 4.x 下的安裝步驟。

安裝 Subversion

安裝步驟:

  1. 先移除系統上的 Subversion 1.2.x
    rpm -e subversion
  2. http://summersoft.fay.ar.us/pub/subversion/latest/rhel-4/i386/ 下載最新版的 subversion,下載符合下一個步驟中相同名稱的 rpm 套件。
  3. 依序安裝:
    rpm -U apr-x.x.x-x.i386.rpm
    rpm -U apr-util-x.x.x-x.i386.rpm
    rpm -ivh subversion-x.x.x-x.i386.rpm
    rpm -ivh mod_dav_svn-x.x.x-x.i386.rpm
    rpm -ivh subversion-perl-x.x.x.x.i386.rpm
    rpm -ivh subversion-tools-x.x.x-x.i386.rpm
  4. 這樣就 OK 了!

以 SVN+SSH 存取檔案庫

使用 「SVN+SSH」 的存取方式就是直接使用主機上的用戶帳號做存取。而你所要被用戶存取的檔案庫其實就是一個子目錄,因此要存取的用戶必須有可以讀取及寫入該目錄的權限。

語法:

svn+ssh://帳號@主機名稱/檔案庫絕對路徑

範例:

svn+ssh://[email protected]/var/svn/repositories

其中 user1 必須要在 192.168.1.1 這台主機上有 [/var/svn/repositories] 目錄的讀取及執行權限 (建議設為群組)

從 Web 存取檔案庫

網頁主機需安裝有 「dav_svn_module」 模組,在 httpp.conf 內設定:

LoadModule dav_svn_module modules/mod_dav_svn.so
LoadModule authz_svn_module modules/mod_authz_svn.so
<location>
DAV svn
#設定 SVN 儲存庫的根目錄
SVNParentPath /var/svn
#設定 SVN 儲存庫的目錄
#SVNPath /var/svn/repositories
Satisfy Any
Require valid-user
AuthType Basic
AuthName "SVN Repository"
#用戶認證的帳號/密碼檔 (使用 htpasswd 建立)
AuthUserFile /etc/svn/svn_htusers
#用戶存取權限設定檔
AuthzSVNAccessFile /etc/svn/svn_access
</location>

參考網頁

[Perl]Perl 的相關網頁資源

手冊

教學/手冊

Read more

[Perl]CGI 模組常用語法

載入 CGI 模組

use CGI qw/:standard/;
my $CGI = CGI->new();

取得所有輸入的參數名稱

@param_name = $CGI->param();

取得特定參數的內容

$value = $CGI->param( "param_name" );

取得所有參數的名稱及內容

%param = $CGI->Vars;

轉換 $url 為 url 可接受的字串

$url_escape = $CGI->escape( $url )

取得目前網頁的編碼

$charset = $CGI->charset();

指定網頁的編碼,並送出網頁表頭

print $CGI->header( -charset=>"utf-8", -expires=>"-1d" );

return top