網站製作學習誌 2008-10-08T18:04:56+08:00 首頁 讀者留言版 管理介面 _uacct = "UA-450710-1"; urchinTracker(); tag:blog.roodo.com,2008://6970 Roodo Blog Copyright (c) 2005, Bug Tracker 安裝紀錄 2008-09-29T13:49:53+08:00 2008-09-29T13:49:53+08:00 tag:blog.roodo.com,2008://6970.7231811 2008-09-23T17:05:44+08:00 http://blog.roodo.com/jaceju/ 伺服器安裝與設定 我之前介紹過 Trac 這個軟體的安裝及簡略的使用方式，但是 Trac 是一套基於 Python 開發的軟體缺陷追蹤系統，在安裝上有一定的複雜度。

這次，我推薦大家一套國人自行開發的 Bug Tracker ，它是一套以 PHP 所開發的軟體缺陷追蹤系統，相當適合不想安裝複雜開發環境的 PHP 開發者使用。

這裡有 Neo 寫的簡介：國人自製 Bug Tracker 。

下載

網址： http://www.twbsd.org/cht/bug_tracker/index.php?page=download.htm

在「按此下載」的連結上點一下，把 BugTracker-2.x.x.tar.gz 存放到網站根目錄就可以了。

安裝

Bug Tracker 號稱安裝非常容易，但其實在 PHP5 的環境上，還是有一些要特別注意的地方。

解開剛剛的 BugTracker-2.x.x.tar.gz ，然後我們會得到一個 bug 目錄；所以到時候我們可以用 http://localhost/bug 的網址來使用這套系統。

假設你的開發環境是 PHP5 ，那麼 short_open_tag 這個選項預設應該是 Off 。而 Bug Tracker 的程式碼大部份都是以 <? 開頭，因此我們需要把 short_open_tag 設為 On 。

不過因為我個人不喜歡去更動系統預設值，所以我改用 .htaccess 來改變 short_open_tag 的設定。請將以下內容存為 .htaccess 後，存在 bug 資料夾下。

php_flag short_open_tag on

接著我們要修改應用程式的設定，請用文字編輯器開始 bug/include/config.php ，找到：

$GLOBALS['BR_dbtype'] = "postgres";

將它註解掉 (前面加上 //) 。

然後取消以下程式碼開頭的註解：

$GLOBALS['BR_dbtype'] = "mysqlt";

然後往下看到：

$GLOBALS['BR_dbpwd'] = "";

在設定值上寫上 MySQL 的 root 密碼，讓程式可以自動建立資料庫。

最後修改應用程式的路徑：

$GLOBALS["SYS_PROJECT_PATH"] = '/home/synosrc/bug';

將 /home/synosrc/bug 改為你安裝程式的路徑。

現在開啟以下連結，進行安裝動作：

http://localhost/bug/setup/

基本上就是一直按 Next Step 而已，安裝程式會告訴你一切需要的資訊，並自動執行相關的動作。

安裝完後，請記得移除 bug/setup 這個資料夾。

這樣就完成安裝 Bug Tracker 囉~

設定語系

一開始 Bug Tracker 的登入畫面是正體中文：

登入畫面

但用 admin 登入後，我們會發現預設的語系還是英文的：

主畫面

這時我們可以點選上面的 System (系統設定) 功能，然後選擇 Preference (偏好設定) 項目，將 System Language (系統語言) 改為 Chinese Traditional 即可。

搭配 Subversion 使用

Bug Tracker 目前還沒辦法像 Trac 一樣直接支援 Subversion ，也就是說它目前無法直接讓專案回報與源碼相結合。

這裡我找到一篇反過來讓 TortoiseSVN 配合 Bug Tracker 使用的文章：如何設定 TortoiseSVN 整合 Bug Tracker 系統。

依照文章上的解說，我們可以在 Subversion 的 log 上直接連結到 Bug Tracker 回報的畫面。

其實 PHP 是可以支援 Subversion 的，但必須配合 php_svn 這個外掛模組。不過 php_svn 還不支援新版的 Subversion ，這是比較可惜的地方。請參考：安裝php_svn.dll 。

結論

其實不論是團隊合作還是個人開發，一套好的追蹤系統都可以協助我們管理好專案的進度；而 Bug Tracker 可以說是慣用中文的 PHP 開發者一個不錯的選擇。

大家有任何使用上的經驗嗎？也歡迎分享喔~

]]> [jQuery] IE 上的 clone 陷阱 2008-10-03T15:03:19+08:00 2008-10-03T15:03:19+08:00 tag:blog.roodo.com,2008://6970.7231115 2008-09-23T14:07:15+08:00 http://blog.roodo.com/jaceju/ JavaScript 前陣子在處理客戶更改版面的需求時，為了偷懶，結果發現了一個 jQuery 在 IE 上 clone 元素的問題。

先簡單說明一下例子：

FF未複製前

如上圖所示，我希望在按下「複製」按鈕後，藍色區塊中的 checkbox 被勾選的項目會被複製到紅色區塊中：

FF複製後

這裡我簡單的使用 jQuery 的 clone 方法來完成它，原始程式如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>測試</title>
<script type="text/javascript" src="jquery/1.2.6.js"></script>
<script type="text/javascript">
$(function () {
    $('#copy').click(function () {
        $('#target').html('').append($('input.test:checked').clone());
    });
});
</script>
</head>
<body>

<div id="source" style="border:1px solid #33F; padding: 20px; width: 200px;">
<input type="checkbox" name="test[]" class="test" value="1" />
<input type="checkbox" name="test[]" class="test" value="2" />
<input type="checkbox" name="test[]" class="test" value="3" />
<input type="checkbox" name="test[]" class="test" value="4" />
</div>

<br />

<div id="target" style="border:1px solid #F33; padding: 20px; width: 200px;">
</div>

<br />

<input type="button" value="複製" id="copy" />

</body>
</html>

在非 IE 的瀏覽器上， jQuery 的 clone 方法可以正確的把已勾選的 checkbox 的 checked 狀態複製下來，但在 IE 上卻不行，如下圖：

IE複製後

所以這裡只好針對 IE 再進行一次特別的處理：

$(function () {
    $('#copy').click(function () {
        var $checkedValues = $('input.test:checked').clone();
        if ($.browser.msie) {
            $checkedValues.attr('checked', true);
        }
        $('#target').html('').append($checkedValues);
    });
});

原理很簡單，就是遇到 IE 時，再將複製下來的 checkbox 的 checked 屬性設為 true 即可。

補充：IE6 的逆襲

不過上述程式在 IE6 又會出現問題了，在 IE6 上執行時，會發現 checked 屬性無法正常被設為 true 。

雖然沒有深入去研究，但我猜想是 IE6 在處理 DOM 時的問題，因此我祭出了 setTimeout 大法：

$(function () {
    $('#copy').click(function () {
        var $checkedValues = $('input.test:checked').clone();
        if ($.browser.msie) {
            setTimeout(function () { $checkedValues.attr('checked', true); }, 0);
        }
        $('#target').html('').append($checkedValues);
        
        setTimeout(function () {
            // 其他可能會對處理到 checkbox 的動作
        }, 0);
    });
});

這裡 setTimeout 可以確保程式在 DOM 完全更新後，再執行下一步的動作。

]]> [Web] 連結分享 2008-09-19T22:06:18+08:00 2008-09-19T22:06:18+08:00 tag:blog.roodo.com,2008://6970.7209897 2008-09-19T22:05:49+08:00 http://blog.roodo.com/jaceju/ 連結分享 PHP

JavaScript

jQuery

CSS

Web Development

Database

MySQL

Programming

Project

SCM

Service

]]> [Web] 連結分享 2008-09-06T23:57:32+08:00 2008-09-06T23:57:32+08:00 tag:blog.roodo.com,2008://6970.7125781 2008-09-06T23:56:58+08:00 http://blog.roodo.com/jaceju/ 連結分享 PHP

Zend Framework

CSS

JavaScript

jQuery

Web Development

Browser

Project

Software

Game

]]> [PHP] 觀念教室 - 取值函式 2008-08-31T12:02:12+08:00 2008-08-31T12:02:12+08:00 tag:blog.roodo.com,2008://6970.7078107 2008-08-31T12:01:30+08:00 http://blog.roodo.com/jaceju/ PHP 通常在物件導向的開發過程裡，我們常會將類別的屬性隱藏起來，然後透過設值及取值函式來存取它們，也就是我們常說的 setter/getter 。

例如：

<?php
class SampleClass
{
    private $_attr = 0;

    public function setAttr($value)
    {
        $this->_attr = (int) $value;
    }
    
    public function getAttr()
    {
        return $this->_attr;
    }
}

不過設值函式並不是本文的重點，這裡我先略過不談。

從上面的程式碼裡可以看到，取值函式似乎是一段再簡單不過的程式碼，它只是很單純的把物件內部的屬性值回傳而已。

但如果今天我們的屬性值是需要經過計算才能夠回傳的話，怎麼辦呢？我們應該把計算的邏輯寫在取值函式裡嗎？

在討論之前，我們先來假設一個簡單的狀況：

「現在有一個購物車程式，在使用者購買金額未超過 500 元時，我們要在總金額上加上運費 100 元；然而當總金額滿 500 元時，就不需要加入運費了。」

以下就是這個簡化過的購物車程式碼：

<?php
/**
 * 購物車類別
 *
 */
class Cart
{
    /**
     * 購物車項目列表
     *
     * @var array
     */
    private $_itemList = array();

    /**
     * 總金額
     *
     * @var int
     */
    private $_total = 0;

    /**
     * 加入購物車項目
     *
     * @param array $item
     * @return Cart
     */
    public function addItem($item)
    {
        $this->_itemList[] = $item;
        return $this;
    }

    /**
     * 更新購物車
     *
     * @return Cart
     */
    public function refresh()
    {
        $this->_total = 0;
        foreach ($this->_itemList as $item) {
            $this->_total += $item['subTotal'];
        }
        return $this;
    }

    /**
     * 清空購物車
     *
     * @return void
     */
    public function clearAll()
    {
        $this->_itemList = array();
        $this->_total = 0;
    }

    /**
     * 取得總金額
     *
     * @return int
     */
    public function getTotal()
    {
        if ($this->_total < 500) {
            $this->_total += 100;
        }
        return $this->_total;
    }
}

註：我故意省略掉數量、單價等資訊。

在邏輯上，這段程式碼似乎沒有什麼問題，在取得總金額時判斷是否應該加上運費看起來是很合理的。

是嗎？

相信有經驗的朋友，思考一下就能看出這個程式的邏輯錯誤。

看不出來的朋友也沒關係，我簡單寫個測試程式來說明：

<?php

require 'Cart.php';

// 建立購物車物件
$cart = new Cart();

// 顯示總金額 (金額為 520 元，大於 500 元，故不加上運費)
echo $cart
    ->addItem(array('name' => '商品1', 'subTotal' => 120))
    ->addItem(array('name' => '商品2', 'subTotal' => 100))
    ->addItem(array('name' => '商品3', 'subTotal' => 50))
    ->addItem(array('name' => '商品4', 'subTotal' => 70))
    ->addItem(array('name' => '商品5', 'subTotal' => 80))
    ->refresh()
    ->getTotal(), "\n";

// 再顯示一次總金額 (正確顯示 520 元)
echo $cart->getTotal(), "\n";

// 先清空購物車
$cart->clearAll();

// 顯示總金額 (金額為 340 元，小於 500 元，故加上 100 元運費)
echo $cart
    ->addItem(array('name' => '商品1', 'subTotal' => 120))
    ->addItem(array('name' => '商品2', 'subTotal' => 100))
    ->addItem(array('name' => '商品3', 'subTotal' => 50))
    ->addItem(array('name' => '商品4', 'subTotal' => 70))
    ->refresh()
    ->getTotal(), "\n";

// 再顯示一次總金額 (錯了！竟然變成 540 元！)
echo $cart->getTotal(), "\n";

從上面的程式可以發現，當我們購買金額小於 500 元時， Cart::getTotal 這個取值函式會幫我們自動加上運費。但是我們第二次呼叫 Cart::getTotal 時，程式竟然又幫我們加上了一次運費！

原因我想大家都看出來了，也就是說我們根本不應該在 Cart::getTotal 中加入運費判斷這件事情。這裡正確的做法是應該把運費判斷的條件寫在 Cart::refresh 這個方法裡，而 Cart::getTotal 應該要很單純地只是回傳 $_total 這個屬性值，也就是：

   /**
     * 更新購物車
     *
     * @return Cart
     */
    public function refresh()
    {
        $this->_total = 0;
        foreach ($this->_itemList as $item) {
            $this->_total += $item['subTotal'];
        }

        // 將運費判斷改到這裡
        if ($this->_total < 500) {
            $this->_total += 100;
        }
        return $this;
    }

或許有人會問，什麼狀況下你會去呼叫兩次 Cart::getTotal ？其實答案很多，例如有時候在 MVC 模式下，我們常會用 Model 的取值函式來呈現其對應的值，這時我們就可能會多次去呼叫 Cart::getTotal ；也有可能其他團隊成員並不知道 Cart::getTotal 的運作方式，他們一直很快樂地使用著 Cart::getTotal 來取得總金額，直到慘劇的發生...

所以這裡我們暫時得到一個結論：取值函式不應該參與運算邏輯。

是嗎？

其實這樣的結論還是有問題的，接下來我們來看看以下這個計時器類別：

<?php

class Timer
{
    public function getTime()
    {
        return time();
    }
}

$timer = new Timer();

echo $timer->getTime(), "\n";
sleep(2);
echo $timer->getTime(), "\n";

很明顯的，對計時器這種物件來說，即時性是很重要的，也就是說每一次取得的時間是會變動的。在這裡，取值函式就參與了時間的計算。

因此，我們要修正剛剛的結論，為它加入一個但書：除非有即時性的需求，否則取值函式不應該參與運算邏輯。

有其他想法嗎？歡迎大家一起討論。

]]> [Web] 連結分享 2008-08-26T17:09:23+08:00 2008-08-26T17:09:23+08:00 tag:blog.roodo.com,2008://6970.6954675 2008-08-24T03:47:42+08:00 http://blog.roodo.com/jaceju/ 連結分享 PHP

Zend Framework

JavaScript

jQuery

CSS

Web Development

Browser

Design

Service

System

]]> [Web] 連結分享 2008-08-14T10:33:48+08:00 2008-08-14T10:33:48+08:00 tag:blog.roodo.com,2008://6970.6794485 2008-08-14T10:33:03+08:00 http://blog.roodo.com/jaceju/ 連結分享 PHP

Zend Framework

JavaScript

jQuery

CSS

Web Development

Database

MySQL

Browser

Programming

SCM

Service

Software

System

]]> [JavaScript] 五分鐘小教室 - 不重複送出 Ajax Request 2008-08-02T17:35:04+08:00 2008-08-02T17:35:04+08:00 tag:blog.roodo.com,2008://6970.6643083 2008-08-02T17:32:50+08:00 http://blog.roodo.com/jaceju/ JavaScript 這次在設計購物車時，遇到了以下的介面：

客戶的需求是在按下「 + 」 或「 - 」時，要以 Ajax 發送更新的數量到後端系統去驗算；每按一次「 + 」 或「 - 」，就要送出一次 Ajax Request。

可是這時候問題就來啦，如果數量要 10 個的話就要連續按 10 次「 + 」，也會連續發送 10 次的 Ajax Request ；這樣不但會浪費珍貴的網路頻寬，更不用說會造成後端系統的負擔。

怎麼解決呢？其實方法很多，而這裡我採用最簡單的 setTimeout 和 clearTimeout 。程式如下：

var sending = null;

var _formSubmit = function () {
    alert('Form submited!');
};

var _doAjaxPost = function () {
    if (sending !== null) {
        clearTimeout(sending);
        sending = null;
    }
    sending = setTimeout(_formSubmit, 1000);
};

var plusQuantity = function () {
    // ... 執行增加數量的動作 ...
    _doAjaxPost();
    return false;
};

var minusQuantity = function () {
    // ... 執行減少數量的動作 ...
    _doAjaxPost();
    return false;
};

$(function () {
    // 增加數量
    $('a.plus').click(plusQuantity);

    // 減少數量
    $('a.minus').click(minusQuantity);
});

註：這裡我大量使用了 jQuery 的功能。

想法很簡單，就是當我們按下「 + 」 或「 - 」時，要隔一秒才會送出 Ajax Request ；而在這一秒內如果再次按下「 + 」 或「 - 」，那麼就重新計時。

因此程式的主要重點在 _doAjaxPost 這個函式以及全域變數： sending ；當第一次呼叫 _doAjaxPost 時 sending 還是 null ，這時我們利用 setTimeout 開始計時，並將計時器指定給 sending 這個變數。而當第二次呼叫時， sending 變數已經不為空值，因此我們再利用 clearTimeout 將它清除，並重設為 null 以達到重新計時的目的。

是不是很簡單呢？

如果各位有更好的作法，也歡迎分享~

]]>