這些字可不是圖片，真的是CSS嵌入字型完成的作品....而且IE6 ~ 9、Firefox、Safari、Chrome、Opera都可以正常顯示。但要滿足這麼多瀏覽器的情況，A&F是怎麼樣做到的呢？

正確的答案就是，使用@font-face！那@font-face要怎麼用呢？請看範例：

1. 先在css中定義要使用的字型名稱以及字型檔放置的位置

我們在A&F的CSS原始碼中查看到其中一個字型的@font-face設定如下：

我們可以發現，其實在使用@font-face的時候，「好像」需要很多不同類型的字型格式檔....但是，不要懷疑。因為各家瀏覽器在支援的字型格式不同的情況下，所以造成了必須要將希望正常顯示字型的瀏覽器都要設定的情況。
所以，要使用的時候，需要先將@font-face照前面的程式碼先設定好後，再用一般使用CSS設定字型的方式套用，如下方範例：

接下來會看到字型會被套上的樣子...(此字型是套另一個worldwideweb字型)

2. 那些瀏覽器支援什麼樣的字型檔？

基本上，因為常見到的瀏覽器有幾種：IE系列、Firefox、Safari、Chrome。基本上，這幾種瀏覽器都是需要正常顯示出來。初步測試後，支援字型檔的格式如下：

* IE6, IE7, IE8, IE9： 支援EOT字型檔。
* Firefox：支援otf以及ttf、woff
* Safari：支援svg、otf
* Chrome (Google 瀏覽器)：支援svg、otf

3. 這幾個英文是什麼意思？

* EOT(Embedded OpenType)： 由微軟制定並於2008年1月提交至W3C的字型規格。因為本篇不是在介紹字型格式，所以詳情可以看這邊了解格式的內容。

* OTF(OpenType)：也是由微軟一開始制定，後來adobe也加入共同發展。字型規格

* TTF(TrueType)：早期為了對抗Adobe的Type1 Postcript字體而由Apple、微軟共同開發的一種字體標準。字型規格

* WOFF(Web Open Font Format)：2010年由Mozzila基金會、Opera、微軟一起送出的Web開放字型格式。

* SVG(Scalable Vector Graphics)：這不是一種字型檔，而是基於XML的一種製造二維向量圖形的格式。由W3C制定，是一種開放標準。頁面請見此處

基本上只要特別注意提供支援的格式，其實你也做的到不使用系統預設字型來設計網頁！

一、下載安裝python:

請先到 http://python.org/getit/ 下載windows的installer(目前是使用python 2.7版)
 

二、一直下一步安裝:

預設安裝會將python2.7安裝在 c:\Python27 的資料夾之中。在這個時候，windows上直接開始Dos模式後直接下

c:\python

會出現錯誤，因為這個時候系統並沒有將python認成是內部指令。
 

三、設定環境變數:

在系統 / 進階 / 環境變數之中，加入以下變數設定：
 

PATH = C:\Python27

 
接下來重開一次Dos模式重新再下一次python指令後，應該會進入python的指令模式。這時候退出請下：
 

exit()

 
基本的python環境就完成了。
 

四、安裝套件工具easy_install

先到http://pypi.python.org/pypi/setuptools#files下載相對python版本的工具。因為之前筆者安裝的是python 2.7，所以在這邊安裝了2.7版本的setuptools-0.6c11.win32-py2.7.exe檔。 下載好後，直接點開一直按下一步安裝。除非預設的Python27的資料夾有變動，否則直接下一步安裝就可以完成了。當安裝完畢後，會在C:\Python27\Scripts這個資料夾下發現有easy_install的程式可以執行。
 

五、將easy_install加到環境變數之中

因為安裝後還是不能直接在dos環境下直接下指令，所以，就手動把環境變數加進去。
 

PATH = C:\Python27\Scripts

六、安裝MySQLdb for Python:

先到這個網址: http://www.codegood.com/archives/129下載讓python 2.7使用的檔案。下載好後，一樣直接點二下執行安裝。一樣一直按「下一步」安裝，就會安裝在預設的資料夾C:\Python27之中。 (本文為32bit的安裝方式。64bit會需要更改機碼。)

這樣就完成了。

文章轉自：在windows環境中設定python以及MySQLdb

自 Zend Framework 1.6 之後就提供了 Zend_Test 這個套件，協助我們為 Zend Framework 的 MVC 做單元測試。然而當時也許是因為大家對 Zend Framework 的新架構還不熟悉，加上 Zend_Test 套件有許多小地方還不是很完善，因此就很少有人利用它來做測試。

而到了 Zend Framework 1.8 版之後， Zend_Test 便修正了許多缺點；而且也因為 Zend_Application 套件的引入，讓 Zend_Test 在 Controller 上的測試更加方便，也使得網路上許多高手開始為它編寫教學。

不過官方的文件並沒有特別告訴我們怎麼去建構 Zend Framework Testing 的環境，所以以下我以 Zend Framework 1.10 再加上 PHPUnit 3.4 為例，帶領大家進入 Zend Framework Testing 的世界。

準備 Zend Framework 專案

要進行測試前，我們得先要有個 Zend Framework 專案。假設這個專案名稱叫 unittest ，原始檔位於 D:\WEB\zf\unittest 上，我們用 Zend Framework 提供的 Zend_Tool工具來建立它：

zf create project unittest

然後我們切換到該專案目錄下：

cd unittest

註：雖然我是以 Win32 為主要環境，但 Linux 上的操作步驟也是雷同。

由於我個人偏好搬動整個目錄就可以移植專案的模式，因此我就不採用 Zend Framework 原本將 index.php 放在 public 目錄下的架構；以下動作的目的就是把 index.php 從 public 目錄移出來。

首先先把 D:\WEB\zf\unittest\public\index.php 和 D:\WEB\zf\unittest\public\.htaccess 複製到 D:\WEB\zf\unittest 下，然後修改 D:\WEB\zf\unittest\.zfproject.xml ，把上方紅框處的 index.php 和 .htaccess 的 XML tag 複製一份到下方的紅框處：

接下來要修改 D:\WEB\zf\unittest\index.php 中 application 目錄的相對位置；找到：

|| define('APPLICATION_PATH', realpath(dirname(__FILE__) . '/../application'));

改為：

|| define('APPLICATION_PATH', realpath(dirname(__FILE__) . '/application'));

然後我們要在 D:\WEB\zf\unittest\.htaccess 加入當前環境的常數，也就是在它的最上面一行加入：

SetEnv APPLICATION_ENV development

原來的 D:\WEB\zf\unittest\public\index.php 則用來阻擋使用者瀏覽 public 目錄，所以我們把它改成：

<?php
header('HTTP/1.1 403 Forbidden');

而原來的 D:\WEB\zf\unittest\public\.htaccess 則是將 Rewrite Engine 關閉，讓外界可以直接存取：

RewriteEngine Off

這樣就準備好我們的專案了。

在 NetBeans 中加入專案

NetBeans 近來對 PHP 的支援變得非常強大，讓我一用就愛上它。到 6.8 版為止， NetBeans 還沒有正式支援 Zend Framework ，不過這並不影響我們用它來開發以 Zend Framework 為架構的專案。

而這裡會提到 NetBeans ，主要是因為它支援了 PHPUnit ！而且還有圖形化介面；這使得我們在對 PHP 專案進行單元測試時更加便利！

回到剛剛我們建立的 Zend Framework 專案，我們可以在 NetBeans 裡加入一個現成的 PHP 專案。在工具列中，選擇 File > New Project... 後，會出現以下視窗：

然後要選擇現存專案的位置：

最後設定專案執行時的設置：

這樣一來我們就可以在 NetBeans 裡開發 Zend Framework 的專案了。

Zend_Test 基礎

Zend_Test 主要是基於 PHPUnit 這個 PHP 界公認最完善的自動化測試套件所開發的，所以不論是在設置環境或是在撰寫測試上，其實都是以 PHPUnit 的架構去完成。

為了避免本文內容過於冗長，這裡我已經先行設定好 PHPUnit 的執行環境；因此在繼續以下的步驟前，請大家先確認自己是否可以正確執行 PHPUnit 。

在 Zend Framework 為我們們準備好的專案目錄架構中，已經事先建立了 tests 這個供我們放置測試的目錄，所以現在我們可以先試試看用 PHPUnit 來執行我們的測試。假設我們目前的工作路徑是 D:\WEB\zf\unittest\ ，我們要先切換到 tests 目錄下：

cd tests

然後用 PHPUnit 提供的 Command Line Interface (CLI) 工具 phpunit 來執行測試：

phpunit .

我們會發現執行的結果出現了以下錯誤：

PHPUnit_Framework_Exception: Could not load "D:\WEB\zf\unittest\tests\phpunit.xml".

原來， phpunit 這個工具在我們對一個目錄進行測試時，會自動去剖析該目錄下的 phpunit.xml 內容；而 phpunit.xml 在 Zend_Tool 產生之後，並沒有任何內容，所以就使得 PHPUnit 丟出了一個異常。

所以這裡我們先簡單將它變成一個正確的 XML 檔案，在 D:\WEB\zf\unittest\tests\phpunit.xml 中我們加入：

<phpunit></phpunit>

然後在 Command Line 環境下再跑一次測試，結果如下：

這表示 PHPUnit 認得我們的測試環境啦！

建立測試

其實上面也只是讓 phpunit 能在我們的專案上啟用而已，但我們的測試主角根本還沒出現，所以接下來我們要開始來建立測試了。

Zend_Tool 建立出來的專案架構，其實有個預設的前置名稱，叫做 Application ；這個 Application 之後都做為專案中 Model 的前置名稱。一般來說，我都會將它改為像是 MyApp 或是 Shop 等等諸如此類符合目前專案性質的名稱。 Zend_Tool 也提供我們修改這個前置名稱的機制：

zf change application.class-name-prefix MyApp

執行結果如下：

Note: the name provided "MyApp" was altered to "MyApp_" for correctness.
Note: All existing models will need to be altered to this new namespace by hand
application.ini updated with new appnamespace MyApp_
Updating project profile 'D:\WEB\zf\unittest/.zfproject.xml'

要注意的是，如果在修改前就已經存在的 Model ，它們的前置名稱就要手動改成新的。

建立第一個 Model

接著我們建立第一個 Model Class ：

zf create model MyClass1

執行結果如下：

Creating a model at D:\WEB\zf\unittest/application/models/MyClass1.php
Updating project profile 'D:\WEB\zf\unittest/.zfproject.xml'

在 D:\WEB\zf\unittest/application/models/MyClass1.php 中就是 MyClass1 的內容：

<?php
 
class MyApp_Model_MyClass1
{
 
 
}

當然這個檔案目前只有簡單的類別定義而已，其他就是要靠我們自己手動完成。不過由於我們的重點是測試，所以這裡我們就不管 MyClass1 的內容。

用 NetBeans 產生 Test Case

前面提到 NetBeans 支援 PHPUnit ，因此這裡我們就直接試著用它來幫我們產生測試檔案。切換到專案目錄的「 Source Files/application/models 」下，在 MyClass1.php 上按下右鍵選擇「工具 / Create PHPUnit tests 」，我們就可以建立針對 MyClass1 類別的 Test Case ：

但因為 NetBeans 還不知道測試目錄的所在位置，因此它會提示我們輸入測試目錄；在這裡，我們當然就是選擇 D:\WEB\zf\unittest\tests ：

在按下確定之後， NetBeans 就會自動打開產生好的 Test Case 檔案。在本例中，它的位置就是在 D:\WEB\zf\unittest\tests\application\models\MyApp_Model_MyClass1Test.php 。

另外 NetBeans 也會把 tests 從原來的 Source Files 中獨立成 Test Files 目錄結構，但別忘了它實際的位置還是在 D:\WEB\zf\unittest\ 下。

目錄結構對應

繼續下個步驟之前，我們先來整個專案的目錄結構：

unittest
 |--application
 |   |--models
 |       |--MyClass1.php
 |--library
 |--docs
 |--public
 |--tests
 |   |--application
 |       |--models
 |           |--MyApp_Model_MyClass1Test.php
 |   |--library
 |   |--phpunit.xml
 |--.zfproject.xml
 |--.htaccess
 |--index.php

從上面的架構圖可以看到，在這個 tests 目錄下的 application 及 library ，就是對應著我們的專案目錄下的 application 及 library 。換句話說，我們在專案目錄下的 application/models 所建立的 Model Class ，它們的測試程式就可以放在 tests/application/models 下，其他以此類推。

執行測試類別

在我們建立好 MyApp_Model_MyClass1Test 這個測試類別後，就可以在上面撰寫測試案例了。這裡我們先簡單加入一個空的測試案例，即 testMethod1 方法：

// ... 略 ...
class MyApp_Model_MyClass1Test extends PHPUnit_Framework_TestCase
{
    // ... 略 ...
 
    public function testMethod1()
    {
 
    }
}

接著就可以執行測試了。

這裡雖然我們可以用 phpunit 來執行測試，不過 NetBeans 也可以幫我們代勞。我們可以在 NetBeans 的 Project 視窗中，對 unittest 專案名稱按下滑鼠右鍵，執行 Test 指令 (或直接按下 Alt + F6 ) ，這樣就會開始執行測試了。

完成測試後，就會出現下圖中的 Test Results 視窗。

這看起來是不是比先前的 Command Line 輸出結果好多了呢？

測試環境的自動載入

在測試時，其實我希望要測試用的類別能被自動載入，而不需要加入一堆的 require_once 。以往我在舊專案的做法是在每個測試案例之前，引用一個 bootstrap.php 檔，內容如下：

<?php
define('APP_PATH', realpath(dirname(__FILE__) . '/../app/'));
 
set_include_path(implode(PATH_SEPARATOR, array(
    realpath(APP_PATH . '/lib'),
    realpath(APP_PATH . '/base'),
    realpath(APP_PATH . '/mod/common/models'),
    get_include_path(),
)));
 
function autoload($className)
{
    $className = str_replace('_', '/', $className);
    require_once "$className.php";
}
 
spl_autoload_register('autoload');

而在新架構中， Zend_Tool 很貼心地為我們產生好了這個檔案，也就是 D:\WEB\zf\unittest\tests\application\bootstrap.php 。

註：不過 D:\WEB\zf\unittest\tests\application\bootstrap.php 裡面的內容是空的，我們得自己把它加入。

但是每次都要在測試類別檔載入這個 bootstraop.php 也是相當麻煩，還好 PHPUnit 讓我們可以在 phpunit.xml 中去加入對 bootstraop.php 的自動引用。接下來請將 D:\WEB\zf\unittest\tests\phpunit.xml 的內容改為：

<phpunit bootstrap="./application/bootstrap.php" />

這麼一來，當我們執行 phpunit 時，就會自動引入 bootstraop.php 了。而這裡要注意的是， ./application/bootstrap.php 這個路徑是相對於 phpunit.xml 的，其他非絕對路徑的設定也是。

不過上面的 bootstraop.php 寫法在新的 Zend Framework 架構中就不適用了，因為它的自動載入只能應付類別名稱為 Xxx_Yyy_Zzz 並對應到檔名為 Xxx/Yyy/Zzz.php 的模式；而新架構中的 Model 則是位於 application/models 之下，也就是說我們的 MyApp_Model_MyClass1 這個類別的實際位置是 D:\WEB\zf\unittest\application\models\MyApp_Model_MyClass1.php ，因此我們得想辦法讓 bootstrap.php 能自動載入新架構的 Model Class 。

還好 Zend_Loader 提供了 Zend_Loader_Autoloader_Resource 這個套件，來幫我們載入 Zend Framework MVC 架構下的 Model Class 。所以我們的 bootstrap.php 就可以改成：

<?php
error_reporting(E_ALL | E_STRICT);
 
date_default_timezone_set('Asia/Taipei');
 
define('APPLICATION_ENV', 'testing');
define('APPLICATION_PATH', realpath(dirname(__FILE__) . '/../../application'));
define('APPLICATION_CONFIG', APPLICATION_PATH . '/configs/application.ini');
 
set_include_path(implode(PATH_SEPARATOR, array(
    realpath(APPLICATION_PATH . '/../library'),
    realpath(APPLICATION_PATH . '/../tests'),
    get_include_path(),
)));
 
require_once 'Zend/Loader/Autoloader.php';
$autoloader = Zend_Loader_Autoloader::getInstance();
$resourceLoader = new Zend_Loader_Autoloader_Resource(array(
    'basePath'      => APPLICATION_PATH,
    'namespace'     => 'MyApp',
    'resourceTypes' => array(
        'model' => array(
            'path' => 'models/',
            'namespace' => 'Model',
        ),
    ),
));
$autoloader->pushAutoloader($resourceLoader);

註： Zend_Loader_Autoloader_Resource 的詳細用法請參考官方手冊 Resource Autoloaders 一節的說明。

現在我們可以試著把 MyApp_Model_MyClass1Test.php 中的 require_once 敘述移除，試試看 phpunit 會不會自動載入。

不過特別要注意的是， bootstrap.php 只會在 phpunit.xml 被載入時自動被引用，因此我們就一定要透過 phpunit . 這樣的方式來執行測試，不然就會發生找不到 Model Class 檔案的狀況。如果我們只想單獨執行某個測試類別時 (例如 MyApp_Model_MyClass1Test ) ，就必須改用以下的方式執行： (假設當前工作目錄是在 D:\WEB\zf\unittest\tests )

phpunit application\models\MyApp_Model_MyClass1Test.php --configuration ./phpunit.xml

而在 NetBeans 中，我們可以在 Project 視窗的 Test Files 上按下滑鼠右鍵選擇 Properties ，就會出現以下視窗：

然後我們再指定 phpunit.xml 的位置，這樣就算只對單一的 Model 進行測試， NetBeans 也會自動幫我們載入 phpunit.xml 了。

加入更多測試

一個專案裡要測試的 Model 當然不可能只有一個，接著我們再加入新的 Model 。在 D:\WEB\zf\unittest 之下，我們執行：

zf create model MyClass2

然後再透過 NetBeans 的 Create PHPUnit tests ，幫它建立一個測試類別 MyApp_Model_MyClass2Test 。當然也別忘了幫這個測試類別加入測試案例，以免執行測試時會出現沒有測試案例的警告。

不是只有 Model 可以被測試，在 Zend_Test 裡也提供了測試 Controller 的方法；方法很簡單，以預設的 IndexController 為例，我們一樣也是在 NetBeans 的 Project 視窗中，對 unittest/application/controllers/IndexController.php 執行 Create PHPUnit tests 就可以了。

但是這樣卻有可能出現以下的錯誤訊息，而無法成功建立 IndexController 的測試類別。

而查看輸出視窗 (Ctrl + 4) ，實際的錯誤訊息是：

Fatal error: Class 'Zend_Controller_Action' not found in D:\WEB\zf\unittest\application\controllers\IndexController.php on line 3

這是因為 NetBeans 其實是透過 phpunit --skeleton-test 這個指令來幫助我們建立測試類別，而 --skeleton-test 會利用 PHP 5 的 Reflection 機制幫我們找出類別裡的方法；但 Reflection 也會需要相關引用到的類別的定義 (這裡就是 Zend_Controller_Action ) ，因此在沒有事先定義好的狀況下， phpunit 就會回報錯誤了。

解決的方法很簡單，我們只要在 IndexController 類別的上方加入：

require_once 'Zend/Controller/Action.php';

就可以再執行 Create PHPUnit tests 指令了。

完成後， NetBeans 就會產生 D:\WEB\zf\unittest\tests\application\controllers\IndexControllerTest.php 這個檔案了。

測試 Controller

雖然前面我們產生了 IndexControllerTest 這個測試類別，但是它卻不能用來測試 IndexController 的流程。這是因為我們沒有去啟動 Zend_Application 及相關的 Resource ，所以這裡我們要借重 Zend_Test 提供的 Zend_Test_PHPUnit_ControllerTestCase 類別來幫我們進行測試。請將 D:\WEB\zf\unittest\tests\application\controllers\IndexControllerTest.php 的內容改為：

<?php
class IndexControllerTest extends Zend_Test_PHPUnit_ControllerTestCase
{
    protected function setUp()
    {
        $this->bootstrap = array($this, 'appBootstrap');
        parent::setUp();
    }
 
	public function appBootstrap()
	{
	  	$this->application = new Zend_Application(APPLICATION_ENV, APPLICATION_CONFIG);
	  	$this->application->bootstrap();
	}
 
    public function testHome()
    {
        $this->dispatch('/');
        $this->assertAction("index");
        $this->assertController("index");
        $this->assertResponseCode(200);
    }
}

在這裡我們要借重 Zend_Test_PHPUnit_ControllerTestCase 提供的 bootstrap 機制，幫我們處理有關應用程式設定與 Front Controller 等相關資源的啟動；然後我們就可以簡單地透過 Zend_Test_PHPUnit_ControllerTestCase 提供的方法 (例如 dispatch ) ，來幫我們測試 Controller 的流程。

上面的例子裡我們只很簡單地測試首頁，至於更進階的 Controller 測試，有機會我會再分享給大家。

進階的 phpunit.xml 設定

在 phpunit.xml 中可以設定的項目很多，可以參考官方手冊的說明，這邊我們簡單地探討幾個常用的項目。

testsuite

testsuite 標籤主要是幫我們透過 PHPUnit_Framework_TestSuite 去組織多個測試類別，例如以下範例：

<phpunit bootstrap="./application/bootstrap.php">
    <testsuite name="My App">
        <directory>./</directory>
    </testsuite>
</phpunit>

首先 testsuite 的 name 屬性是讓我們設定 Suite 的名稱，而 directory 標籤則是告訴 phpunit ，這個 Suite 包含了 D:\WEB\zf\unittest\tests 下所有檔名結尾為 Test.php 的測試檔案。

另外還要注意一點，在還沒加入 testsuite 之前，我們要在 D:\WEB\zf\unittest\tests 用 "phpunit ." 來指定目錄執行測試；而加入 testsuite 標籤後，我們就可以直接在 D:\WEB\zf\unittest\tests 執行 phpunit ，而不用再指定測試的路徑了。

filter

filter 標籤主要是幫我們過濾程式碼涵蓋範圍報告的項目，避免出現過多不相干類別的報告內容。 filter 分為白名單與黑名單兩種，以下我們以白名單為主：

<phpunit bootstrap="./application/bootstrap.php">
    <!-- 略 -->
    <filter>
        <whitelist>
            <directory suffix=".php">../application/</directory>
            <exclude>
            	<file>../application/Bootstrap.php</file>
            	<file>../application/controllers/ErrorController.php</file>
               <directory suffix=".phtml">../application/</directory>
            </exclude>
        </whitelist>
    </filter>
</phpunit>

這裡主要是告訴 phpunit 只處理 D:\WEB\zf\unittest\application 下的類別 (注意！不是 tests\application ！) ，但排除掉 D:\WEB\zf\unittest\application\Bootstrap.php 、 D:\WEB\zf\unittest\application\controllers\ErrorController.php 以及 D:\WEB\zf\unittest\application\ 下所有的 .phtml 樣板檔。

不過 filter 通常會搭配稍後要說明的 logging 標籤一起使用。

logging

logging 標籤主要用來產生測試報告，它支援相當多的格式，以下我們以 HTML 格式為主：

<phpunit bootstrap="./application/bootstrap.php">
    <!-- 略 -->
    <logging>
        <log type="coverage-html" target="./log/report" charset="UTF-8"
            yui="true" highlight="true" lowUpperBound="50" highLowerBound="80"/>
        <log type="testdox-html" target="./log/testdox.html" />
    </logging>
</phpunit>

在執行測試前，別忘了在 D:\WEB\zf\unittest\tests 下建立一個 log 目錄，避免 phpunit 回報錯誤。執行完測試後，就會在 D:\WEB\zf\unittest\tests\log 產生一個 testdox.html 檔案及一個 report 資料夾。

textdox.html 會以我們在測試類別裡寫的測試案例為名稱來做為驗證項目名稱，例如 testDoSomething 就會變成 Do something 。而用瀏覽器開啟 report/index.html 後，我們就能看到完整的程式碼覆蓋率報告。

小結

最後我們再整理一下重點：

• 我們可以在專案中建立一個 tests 目錄，供我們放置測試類別。

• PHPUnit 可以透過 phpunit.xml 及 bootstrap.php 來做自動化的測試環境。

• phpunit.xml 主要是用來設定 phpunit 執行時的選項。

• bootstrap.php 主要的工作是設定測試時會用到的環境常數、引入路徑以及類別自動載入機制等。

• NetBeans 對 PHPUnit 有強大的支援，不論在建立測試及執行測試上，都非常直覺。

• 即便不使用 NetBeans ，我們還是可以透過 phpunit 這個 CLI 工具來完成自動化測試。

雖然這裡我是以 Zend Framework 專案為主，但大家還是可以仿照這樣的機制，在自己的專案裡去建構自動化測試。

還猶豫什麼？快去試試吧！

雖然這樣的規劃聽起來不錯，但單元測試這件事說到底我的實務經驗還是太少，在這次的專案項目裡，才讓我真正有了較為深入的體會。

先對要測試的事情有一個概觀

其實測試一開始真的很難下手，主要是因為我們不知道我們要測些什麼東西。因此，我們需要對需要測試的東西有個概觀。

就以這次的例子來說吧，我要測試的東西就是「折價券攤提的演算法邏輯」，那它裡面重要的東西是什麼？

在跟客戶討論，我們得知折價券面額要分攤到的商品上時有一定的規則；這時我們就要先在紙上作業，用簡單的例子跟客戶確認清楚規則。

確認了方向之後，因為我之前已經測試架構準備好了，所以接下來就只要針對要測試的部份撰寫程式碼即可。但如果一開始還沒有準備好測試架構的話，這裡給大家幾個建置環境的簡易流程：

1. 在專案裡開個 tests 資料夾，這裡就是放置測試案例的地方。

2. 準備一個 init.php ，目的是用來設置 include_path 及 autoload 機制。

3. 按照 PHPUnit 官方的建議，建立一個 AllTests.php 的 Test Suite 。

註：這裡我就不列出程式碼了，讓大家自己試試看。

然後每次測試就用以下指令即可：

> phpunit AllTests.php

之後我會以「跑測試」來表示執行這個指令。

描繪程式的輪廓

接下來我們就要把整個系統的測試架構定義出來，不過這時候其實我們還沒開始寫程式，只是把流程和相關的方法先定義出來。

這裡的方法很簡單，就是先透過註解和方法介面來描述整個流程，而不是先寫細部的程式碼。

class Shop_Cart_Plugin_Coupon extends Shop_Cart_Plugin
{
    // ... 略 ...
 
    // 演算法計算後的結果
    protected $_sharedCouponData = array();
 
    // 取得演算法計算後的結果，也可供測試來驗證
    public functino getSharedCouponData() 
    {
        return $this->_sharedCouponData;
    }
 
    // 主要的執行方法
    public function doCheckout()
    {
        $this->_getCouponData(); // 取得
        $this->_getProductData(); // 取得商品資料
        $this->_initData(); // 初始化要攤提的資料
        $this->_shareCouponToProduct(); // 開始攤提
    }
 
    // ... 略 ...
}

當然這些都是大概的輪廓，因為可能在我們寫好測試執行時，會再額外加入新的方法及介面。

還有一個要先定義好的是測試用的比對數據格式，它對我們稍後要測試的程式寫法會有影響。

寫第一個測試

到這裡，我們就可以開始寫第一個測試，而接下來的程式碼，都是先以這個測試可以成功為目的。而這個測試要怎麼寫呢？就是把一開始我們在紙上作業的數字拿進來套用。

當然這裡我的 setUp 和 tearDown 也已經在之前準備測試架構時寫好了，它們會讓我們每次的測試數據都能夠獨立。我們關心的就是第一個測試案例：

<?php
class Shop_Cart_Plugin_CouponTest extends PHPUnit_Framework_TestCase
{
    // ... 略 ...
 
    public function setUp()
    {
        // ... 略 ...
    }
 
    public function tearDown()
    {
        // ... 略 ...
    }
 
    public function testDoCheckout()
    {
        $this->_plugin->setValue(array(
           1 => 1, // C1, ProductCoupon for P1, $100
           2 => 2, // C2, ProductCoupon for P1, P2, $100
        ));
        $this->_cart->addItems(array(
            'P1' => 1, // $200
            'P2' => 1, // $300
        ))->refresh();
        $this->assertEquals(300, $this->_cart->getTotal());
        $this->_plugin->doCheckout();
        $resultDataList = $this->_plugin->getSelectedOrderCouponDataList();
 
        $this->assertEquals(-100, $resultDataList['P1-C1']['discountPrice']);
        $this->assertEquals(-25,  $resultDataList['P1-C2']['discountPrice']);
        $this->assertEquals(-75,  $resultDataList['P2-C2']['discountPrice']);
    }
}

這裡因為我們在上一步就定義好比對用的數據，所以測試時就是用這個輸出的數據來與我們預期的數字相比較。

接下來就先跑跑測試，看看這個 TestCase 有沒有執行錯誤的地方 (例如物件沒有正確初始化或是變數名稱誤寫等等) ；當然如果沒有出現預期值是正常的，因為我們根本還沒有寫計算公式。

繼續完成演算法

現在回到 Shop_Cart_Plugin_Coupon ，我們就要把剛剛那些只有骨頭的方法開始添血添肉，這裡就請大家自行發擇。

接著只要你覺得程式差不多了，就先跑一下測試，看看是不是符合測試的預期結果。

當你完成第一個測試時，程式的就差不多完成百分之五十啦，到這裡別忘了先把程式 commit 到版本控制系統裡。

加入新測試並修改程式

完成第一個測試時，當然不是沒事了，我們要針對不同的狀況再加入其他的測試數據。

這裡我們就可以開始考慮把第一個測試以 PHPUnit 提供的 Data Provider 改寫，讓我們不必重複過多的程式碼。

<?php
class Shop_Cart_Plugin_CouponTest extends PHPUnit_Framework_TestCase
{
    // ... 略 ...
 
    public function setUp()
    {
        // ... 略 ...
    }
 
    public function tearDown()
    {
        // ... 略 ...
    }
 
    /**
     * @dataProvider provider
     */
    public function testDoCheckout($selectedCouponIdList, $productSkuNumberList, $total, $discountDataList)
    {
        $this->_plugin->setValue($selectedCouponIdList);
        $this->_cart->addItems($productSkuNumberList)->refresh();
        $this->assertEquals($total, $this->_cart->getTotal());
        $this->_plugin->doCheckout();
        $resultDataList = $this->_plugin->getSharedCouponData();
 
        foreach ($discountDataList as $key => $value) {
        	$this->assertEquals($value, $resultDataList[$key]['discountPrice']);
        }
    }
 
 
    public function provider()
    {
        return array( // 第一個測試
            array(array(
                1 => 1, // C1, ProductCoupon for P1, $100
                2 => 2, // C2, ProductCoupon for P1, P2, $100
            ), array(
                'P1' => 1, // $200
                'P2' => 1, // $300
            ), 300, array(
                'P1-C1' => -100,
                'P1-C2' => -25,
                'P2-C2' => -75,
            )),
            array( // 第二個測試
                // ... 略 ...
            ),
            // ... 略 ...
        );
    }
}

而加入新測試之後，就可以跑跑測試，看看我們剛寫好的演算法是否正確動作？通常這時候才真正是考驗的開始。因為這時候前面寫好的程式碼可能只對第一個測試正常，接下來的測試也許就會出錯了。

所以我們就會需要修改或重構程式碼，讓後面的測試也能正常執行。當然改過的程式也要讓第一個測試正常運作，才是正確的修改。

當然演算法寫好後，就要真正上到 Web 畫面去測試。至此，你會發現你花在寫測試上的心力都有了回報，因為通常如果你已經定義好介面，而這次的修改只是改寫一個小類別的話，那麼就會發現程式會非常順利地運作了。

心得

每次寫購物車時，最麻煩的就是測試時要開啟購物車網頁，把一個一個的商品加進來，再加入不同的折價券條件...

而有單元測試之後，我就可以省去一大堆開啟網頁，點選連結的功夫，專心地撰寫計算邏輯...只能說...單元測試真的個超級便利的工具呀。

問題

目前我們公司是用 Subversion 做為版本控管系統，在 commit 時都會需要把版本更新訊息寄送給相關人員，當然這就會用到 post-commit 這個 hook 指令；而在 post-commit 中，我們可以利用 bash 語法去呼叫寄信程式。

不過預設建立好的 Repository 下的 hooks 目錄並沒有這個檔案，我們可以把預設的 post-commit.tmpl 複製成 post-commit ：

# cp /path-to-svn-repository/project_name/hooks/post-commit.tmpl /path-to-svn-repository/project_name/hooks/post-commit

至於寄信程式的部份，在 Subversion 的 Source code 裡就提供了一個很有用的 mailer.py ，它可以協助我們寄送 commit 後的訊息。

原來的 post-commit 內容如下：

#!/bin/sh
 
# POST-COMMIT HOOK
# (略)
 
REPOS="$1"
REV="$2"
 
commit-email.pl "$REPOS" "$REV" commit-watchers@example.org
log-commit.py --repository "$REPOS" --revision "$REV"

將它修改為：

#!/bin/sh    
 
# POST-COMMIT HOOK 
# (略) 
 
REPOS="$1"
REV="$2"
 
/path-to-subversion-source/tools/hook-scripts/mailer/mailer.py commit "$REPOS" "$REV"
# log-commit.py --repository "$REPOS" --revision "$REV"

不過用原始的 mailer.py 有個缺點，主要是它寄送的訊息主旨範例如下：

r3214 - branches/2.0

這樣在多個專案時，我們就不容易識別這次的更新是哪個專案。

所以我就想透過修改 mailer.py ，讓它產生如下的主旨：

[project_name] r3214 - branches/2.0

修改方式

改法很簡單，有兩個地方要改： (針對 Subversion 版本 1.4.4 原始檔)

if commondir:
  self.output.subject = 'r%d - in %s: %s' % (repos.rev, commondir, dirlist)
else:
  self.output.subject = 'r%d - %s' % (repos.rev, dirlist)

改成：

if commondir:
  self.output.subject = '[%s] r%d - in %s: %s' % (repos.project_name, repos.rev, commondir, dirlist)
else:
  self.output.subject = '[%s] r%d - %s' % (repos.project_name, repos.rev, dirlist)

也就是這裡我多加了一個 repos.project_name ，讓信件主旨可以多一個專案名稱。不過 projects_name 並不是 repos 的屬性，所以我們還要再修改一個地方。

往下找到：

self.author = self.get_rev_prop(svn.core.SVN_PROP_REVISION_AUTHOR)

然後在底下加入一行：

self.project_name = repos_dir[10:]

其中 10 這個數字是指 /path-to-svn-repository/ 的長度，因為 repos_dir 的內容會是 /path-to-svn-repository/project-name ，而字串是由 0 開始算起，那麼 project_name 的起始位置就會剛好是 /path-to-svn-repository/ 的長度。 (所以請自行計算並更改之)

至於為什麼我會知道 repos_dir 的內容，這是因為我在一開始就用了以下的程式去印出它：

f = open("mailer.log", 'w')
f.write(repos_dir)
f.close()

當然這邊要注意縮排。

結論

Python 對我來說，其實是一個不熟悉的語言。不過它的語法也不是那麼難以理解，以我這種三流能力，竟然還能看懂並修改它。

而 mailer.py 也大量使用了物件導向的寫法，所以未來有機會在開發 Python 程式時，在物件導向的基礎也是不可或缺的。

就這樣啦~謝謝收看~再會~

官方網站 http://filenice.com/
展示網頁 http://filenice.com/demo/

介紹

filenice是一套用php編寫的檔案瀏覽工具，作用在你本身如果有架設網站並有某個資料夾提供上傳檔案，當你想要查看這個資料夾中有哪些檔案時，filenice提供使用瀏覽器就可以查看的功能。

安裝

到官網下載檔案(http://filenice.com/demo/fileNice.zip)，下載完畢將解壓縮後的檔案放到網站伺服器上你想要瀏覽檔案的資料夾下即可。

優點

官方的說明是filenice是使用php+javascript也就是所謂的Ajax技術編寫的，因此速度比較快，而且當應用程式忙碌時可以返回而不會整個畫面當掉。此外使用filenice不需要安裝任何資料庫。

感想

filenice提供了無須安裝其他軟體，僅需使用瀏覽器就可觀看主機上提供upload的資料夾下的內容，也可自訂瀏覽檔案的一些排列等細節，另外也提供搜尋的功能。不過個人比較覺得可惜的是，因為無須登入帳密即可觀看，在安全性上稍顯不足，不過或是也因此除了觀看以外，並沒有額外提供刪除或是上傳的功能吧!?介紹給大家用看看!

可以接受回傳資料？

先調查一下，知道 include 或 require 可以取得回傳資料的請舉手... (眺望)

呃...不知道的朋友也不用煩惱，我來解釋一下。

如何回傳資料呢？假設現在有個 php 檔叫做 config.php ，內容如下：

<?php
return array('123', '456');

咦？那邊有人說 return 放錯地方了？不不不， PHP 能接受這樣的寫法。

好，現在我們來證明 include 或 require 能取得 config.php 所 return 回來的資料。請建立一支 test.php ，其內容是：

$config = require 'config.php';
var_dump($config);

執行看看，是不是可以跑呀？

所以我們可以在某支 PHP 程式中 return 一個資料 (任何型態) ，然後在另一支 PHP 程式中用 include 或 require 來取得這個資料。

把 require 放在參數裡

什麼？這不是密技？不不不，密技在底下：

function test($config) {
    var_dump($config);
}
test(require 'config.php');

對！你沒看錯！直接把 require 放在函式的參數裡！

還沒完呢，再看：

class Test
{
    public function __construct($config)
    {
        var_dump($config);
    }
}
$a = new Test(require 'config.php');

連 new 建構子的參數都可以接受 require ！

所以只要能放變數的地方，都可以放 include 或 require ，例如：

if (require 'config.php') {
    var_dump(require 'config.php');
}
 
if ($config = require 'config.php') {
    var_dump($config);
}

而且不僅是 include 及 require ，連 include_once 和 require_once 都可以這麼做。

我在某篇文章發現這個密技以後，分享給辦公室裡的同事們；沒想到玩了 PHP 這麼多年的他們也沒看過這個方法，看來大家對 PHP 的瞭解需要更深入一點囉！

Scope 的問題

接著我同事問了我一個問題：如果在參數使用 require 敘述，而且被 require 的 PHP 程式裡如果有定義全域變數的話，那麼這個變數在執行的 PHP 程式裡，它的 scope 在哪裡呢？

答案是：它還是全域。

怎麼說呢？現在我們在剛剛的 config.php 的 return 敘述前加上一行程式，如下：

<?php
$data = '789'; // 加上這行
return array('123', '456');

然後在 test.php 裡的 Global 部份 (也就是不在函式或類別定義裡) 的任意處加入：

var_dump($data);

是不是也可以正確顯示 config.php 中 $data 變數所指定的內容呢？這就表示在參數中使用 require 不會影響全域變數的 scope 。

還有其他 include 或 require 的密技嗎？歡迎大家一起討論囉~

For Example:
Google Apps 就是用這個方式去作驗證

CNAME 是 DOMAIN or SUB DOMAIN 指向另一個 DOMAIN 的方式. (跟 alias 一樣)

那麼如果要用 PHP 實作呢? 有兩種方式 :
1. PHP5 內建的 dns_get_record() (Windows & BSD & Mac 不適用)
2. PEAR NET_DNS

NET_DNS 原理是用 fsockopen("你的 DNS SERVER IP", 53),
但是要先自己組合出 "封包的header data" 再丟過去, DNS Server 才會理你唷.
這些複雜的部份 NET_DNS 已經都幫我們做好了.

我們只要:

require_once('Net/DNS.php');
$ndr = new Net_DNS_Resolver();
$answer = $ndr->search("www.OOO.com", "CNAME");
echo "<pre>";
print_r($answer);
 
// 獲得的結果
Array
(
    [0] => Net_DNS_RR_CNAME Object
        (
            [name] => www.OOO.co.nz
            [type] => CNAME
            [class] => IN
            [ttl] => 86400
            [rdlength] => 18
            [rdata] => store	XXX�3
            [cname] => store.XXX.com
        )
 
)

PS, 在 Windows 環境, 請修改 PEAR/NET/DNS/Resolver.php 裡的

var $resolv_conf = '/etc/resolv.conf';

改成

var $resolv_conf = 'D:\Appserv\resolv.conf';

resolv.conf 要加入你的 DNS Server (請用 ipconfig /all 查詢)

nameserver 168.95.192.1

平常使用的安裝在哇寶主機上的subversion，這次想嘗試看看將subversion架設在windows平台上，於是開始了尋找資料之旅。
基本上，這裡有很詳細的說明，只要按照個人系統，修改部份設定，以下就紀錄一下我自己的步驟：

(因為已經寫的超白話了，所以就不另外附圖)

• 安裝apache，我是用懶人包xampp直接裝好apache、php、mysql，apache版本2.2.9。  (  範例懶人包安裝的路徑是在c:\xampp\ )     點我下載xampp (版本 1.7.2 )
• 下載subversion windows版本，點我下載  (版本 1.6.5 ) ， 安裝很容易，狂點next就對了。
• 打開C:\xampp\apache\conf\httpd.conf ，隨便找個地方 加入

    <Location /svn/repository>
      DAV svn
      SVNPath D:\svn\repository
    </Location>
  

  其中 /svn/repository 是你想對應到的網址，像是 http://localhost/svn/repository， 而D:\svn\repository 則是實際svn專案檔案放置的位置。

• 最後，請到windows提供的"命令提示字元"模式下，輸入 svnadmin create d:/svn/repository ，完成建立專案，到這裡算是完成建立整個專案。
• 打開瀏覽器，輸入http://localhost:8080/svn/repository/ ，可以看到 『 repository - Revision 0: / 』，代表該專案目前版號為0 (還沒開始動工，當然是0)
• 測試一下，先隨便找個地方，例如 D:\wwwroot\ ，滑鼠右鍵選擇『 SVN 取出 』，檔案庫URL 請輸入 『 http://localhost:8080/svn/repository 』，取出目錄按照預設即可，按下確定。
• 到D:\wwwroot\repository，測試建立一個文字檔， aaa.txt ，同樣路徑下按滑鼠右鍵『 SVN 送交 』，將更新的檔案傳送至SVN檔案庫，完成測試SVN上傳。
• 同樣來到 http://localhost:8080/svn/repository/ ，會看到『 repository - Revision 1: / 』，版號以由0變成1，代表剛上傳的svn紀錄已完成。

以上就是依照個人設定，完成subversion安裝在windows的過程，看到專案是使用自己架設的subversion，檔案成功被建立、刪除修改後更新，感覺還不錯～

]]> http://blog.wabow.com/archives/2067/feed 1 http://blog.wabow.com/archives/2072 http://blog.wabow.com/archives/2072#comments Thu, 27 Aug 2009 06:32:14 +0000 daniel http://blog.wabow.com/?p=2072 感謝上一篇文章中前輩們的熱心回覆；垃圾留言果然是大家心中的痛啊（噗）～雖然 CAPTCHA 可以透過各式各樣的 OCR 破解（最新版的 JDownloader 也已經能忽略大部分免費空間所用的圖像辨識...扯遠了），不過它仍是目前阻擋機器人最直接也最簡單的解決方案；當然更複雜的 CAPTCHA 還是能夠達到阻擋的目的，但是使用 CAPTCHA 的方式對使用者來說就已經是不友善了。

後來在討論中 Jace 提到，其實 SESSION 是有可能被機器人知道的；所以我後來綜合了 fillano 提供的演算法概念，稍微改良了一下之前的 NoSpamNX class。利用隨機產生的隱藏欄位順序，用不同的演算法再對隱藏欄位的數值作編碼；讓 SESSION 內存的未編碼的值，與 POST 過來的已編碼的值不一樣。最後再將 SESSION 內存的值編碼，與 POST 的已編碼的值作比較，判斷留言的使用者是不是機器人。

SESSION 紀錄的值是未編碼的值，但在產生隱藏欄位時，input 的值是已經編碼過後的值

/**
 * 建立隱藏欄位 HTML；利用隱藏欄位先後順序不同，使用 md5 or sha1 編碼
 * 
 */
public function addHiddenFields()
{
    $nospamnx = $_SESSION[$this->_sessionName];

    if (1 === rand(1,2)) {
        return '<input type="text" name="nospamnx['.$nospamnx['nospamnx-1'].']" value="" class="locktross" /><input type="text" name="nospamnx['.$nospamnx['nospamnx-2'].']" value="'.md5($nospamnx['nospamnx-2-value']).'" class="locktross" />';
    } else {
        return '<input type="text" name="nospamnx['.$nospamnx['nospamnx-2'].']" value="'.sha1($nospamnx['nospamnx-2-value']).'" class="locktross" /><input type="text" name="nospamnx['.$nospamnx['nospamnx-1'].']" value="" class="locktross" />';
    }
}

驗證時根據 POST 過來的 nospamnx 順序不同，以不同的演算法編碼後再做比較

// 根據 POST 過來的值順序不同，以 md5 or sha1 判斷
if ($nospamnx['nospamnx-1'] == current(array_keys($postData))) {
    $encode_value = md5($nospamnx['nospamnx-2-value']);
} else {
    $encode_value = sha1($nospamnx['nospamnx-2-value']);
}
if ($postData[$nospamnx['nospamnx-2']] != $encode_value) {
    return false;
}

最後提供範例程式下載，分為一般 POST 與 AJAX 二種方式。

]]> http://blog.wabow.com/archives/2072/feed 0 http://blog.wabow.com/archives/1986 http://blog.wabow.com/archives/1986#comments Thu, 20 Aug 2009 07:42:23 +0000 suzy http://blog.wabow.com/?p=1986 今天要介紹的是 如何用 MS Office Word 的 合併列印 列出 相關訂單資料 及 條碼(barcode), 然後再用 標籤貼紙 印出來, 格式必須要符合 7-11 取貨的規則. 這個功能將會整合在 Washop 的訂單出貨功能.
其實就是一些很簡單的操作步驟, 但是摸索的過程也花了一些時間, 所以就紀錄下來, 供大家參考.


標籤貼紙是為了直接貼在包裹上, 讓出貨流程更有效率.
我們選A4大小的標籤貼紙, 市面上有販售各式各樣的規格.

1. 合併列印精靈:

郵件 -> 啟動合併列印 -> 逐步合併列印精靈


選取文件類型, 請選擇 "標籤"


2. 定訂標籤的格式

7-11 規定, 每張貼紙大小必須至少8cmX8cm, 依照A4的大小(210X297mm), 我們決定用 2欄 X 3列 來劃分, 每小格為 9.9cmX10.5cm

紙匣, 請選擇 "預設紙匣(自動選取)". 註: 它預設是 "手動送紙器", 如果沒修改此項, 在列印時會變成要手動塞紙到印表機喔!


標籤編號, 請選擇 "自訂標籤", 請依照圖中所示, 輸入標籤的規格.


3. 匯出資料

由 Washop 後台生成 CSV 訂單資料


範例資料顯示如下:


4. 合併列印

選取收件者, "使用現有清單".
瀏覽, 請選取剛剛匯出的 CSV 檔. 直接按確定即可.


5. 編輯第一個標籤內容

所有內容置中, 用標楷體（如何顯示條碼請見第九）


6. 安排標籤

點選其他項目, 手動插入欄位


完成後按 "更新所有標籤", 神奇的事就發生了


7. 預覽標籤



8. 完成, 列印, 大功告成

列印結果範例
印出來後可試著用條碼機試刷, 如果有聽到 B 的一聲, 那恭喜你, 成功啦. (灑花

9. 關於 條碼(barcode)

• 條碼是39碼, 規定前後都要加 *
• 條碼字型 可在此下載.
• 條碼字體的大小: 我是設 34, 字元比例: 72%. 這樣才能保持在規定的 寬 = 7cm-7.5cm, 高 = 大於0.8cm 之間.
• 如果條碼一直刷不過, 試試看條碼後面空一格, 空格轉成別的字型, 因為我們家的印表機印出來會把換行當作條碼印 (螢幕顯示正常, 印出來就不對了).
• 要用雷射印表機印, 條碼機才能感應.

謝謝收看

]]> http://blog.wabow.com/archives/1986/feed 1 http://blog.wabow.com/archives/1985 http://blog.wabow.com/archives/1985#comments Thu, 20 Aug 2009 07:38:13 +0000 andrew http://blog.wabow.com/?p=1985
官方網站 http://jquery-howto.blogspot.com/2009/05/jyoutube-jquery-youtube-thumbnail.html
js下載點 http://plugins.jquery.com/files/jyuotube.zip


介紹

YouTube(http://www.youtube.com/)是一個非常知名的影像網站，影片瀏覽起來速度還蠻快的，也因此很多網站在想要顯示影片時，都會連到這個網站。作法上有很多種，假使我們今天希望在自己的網站放置某個YouTube影片的截圖，然後點截圖才連到YouTube網站去瀏覽影片，這個截圖的動作有沒有比較簡單的做法呢?jQuery的Plugin--jYouTube提供了很簡單就可以達到目的的方法，讓我們來看看要怎麼處理吧!

程式碼

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

small : use video URL<br /> <img src='' id='img1'><br /> big : use video ID <br /> <img src='' id='img2'>   <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jyuotube.js"></script> <script type="text/javascript">   $(function(){   var imgSrc = $.jYoutube('http://www.youtube.com/watch?v=hPzNl6NKAG0', 'small'); var imgSrc2 = $.jYoutube('hPzNl6NKAG0');   $('#img1').attr('src',imgSrc); $('#img2').attr('src',imgSrc2);   })   </script>

解說

1 2	<script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jyuotube.js"></script>

這兩行是載入必要的js。

jYouTube的寫法很簡單，如下：

1 2	$.jYoutube('hPzNl6NKAG0'); //指定YouTube的影片ID後回傳一個大的截圖網址 $.jYoutube('http://www.youtube.com/watch?v=hPzNl6NKAG0', 'small'); //指定YouTube的影片網址後回傳一個小的截圖網址

也就說，jYoutube會使用到兩個參數，第一個參數你可以設定為YouTube的影片ID(如:hPzNl6NKAG0)或是YouTube的影片網址(如:http://www.youtube.com/watch?v=hPzNl6NKAG0)；第二個參數則是希望顯示的截圖大小，如果保留空白則顯示較大的截圖，相對的如果輸入small則顯示小的截圖。實際顯示的效果可參照本文開頭的範例圖。

總結

jYouTube提供了很簡單就能取得YouTube影片的截圖，在需要大量引用時比用printscreen來的快速，提供給大家做個參考。

]]> http://blog.wabow.com/archives/1985/feed 0 http://blog.wabow.com/archives/1984 http://blog.wabow.com/archives/1984#comments Thu, 20 Aug 2009 06:21:07 +0000 abu http://blog.wabow.com/?p=1984 電子商務網站的後台，統籌管理了一堆訂單相關資訊，相對的，客戶對於產品銷售部份，若能搭配上統計圖表，更是一目了然，為了簡易製作出方便快速又美麗的成品，就是借重Open Flash Chart力量的時候....

在官網上可以看到各式各樣的圖表，不管是長條圖、曲線圖、圓餅圖等等，都只要把統計數值拋給他，就會產生出美美的圖表，

首先必須先下載library 點我，解壓縮後丟到你的專案裡面，找個地方擺好

接著在你要輸出的樣板裡面，加上這堆↓

swfobject.embedSWF("自訂解壓縮路徑/open-flash-chart.swf", "chart1", "800", "500", "9.0.0", "expressInstall.swf",	{"data-file":"預定產生資料程式"} );

請依照專案狀況修改上述中文部份，就完成了畫面產生部份設定。

接著是資料產生部份，還記得上面剛填寫的"預定產生資料程式"嗎，就是準備編輯他，以下是部份主要程式的範例：

include("自訂解壓縮路徑/php-ofc-library/open-flash-chart.php"); // 載入
$chart = new open_flash_chart();
$title = new title($product->name.'三個月內銷售狀況');
$chart->set_title( $title );
$x = new x_axis();
$x->set_colour( 'gray' );
$x->set_grid_colour( '#86BF83' );
$y = new y_axis();
$y->set_range( 0, 1000, 100);
$chart->set_y_axis( $y );
$bar = new bar();
$output  = new Array('1','2','3');
$bar->set_values( $outpu ); // 欲輸出的資料陣列 
$t = new tooltip( 'Hello<br>val = #val#' );
$t->set_shadow( true );
$t->set_stroke( 5 );
$t->set_colour( "gray" );
$t->set_background_colour( "#FFFFFF" );
$t->set_title_style( "{font-size: 14px; color: #000000;}" );
$t->set_body_style( "{font-size: 14px;  color: #000000;}" );
$chart->add_element( $bar );
$chart->set_tooltip( $t );
echo $chart->toPrettyString();

這邊只是簡易說明，詳細內容官網都可以查到，& 範例也是一大堆，修改一下就能輕鬆呈現你要的樣式~ 算是很方便的圖表繪製外掛，感謝作者。 m（＿ ＿）m

]]> http://blog.wabow.com/archives/1984/feed 0 http://blog.wabow.com/archives/1974 http://blog.wabow.com/archives/1974#comments Thu, 20 Aug 2009 05:06:42 +0000 daniel http://blog.wabow.com/?p=1974 目前大部分網站在表單發送時，判斷機器人發送廣告、垃圾留言的方法是採用 CAPTCHA 的方式；然而如同之前在部落格上分享過的文章所述，額外的驗證碼機制反而造成使用者在參予留言或討論時望之卻步。同篇文章中也提到 WordPress 用來防治垃圾留言的 Plugin NoSpamNX；最近剛好客戶有阻擋垃圾留言的需求，所以就稍微研究了一下，順便改成 class 讓使用上能更具彈性。


基本的流程是在建構式中，將隨機產生的隱藏驗證碼存入 SESSION，同時利用這些值建立隨機順序的 HTML 碼，在使用者 POST 的時候加以驗證。

首先要在網頁的最上面先開啟 SESSION，並建立 NoSpamNX 物件，同時寫入 SESSION，產生 HTML 碼

// 啟動 SESSION
session_start();
 
// 載入 NoSpamNX class
include_once('NoSpamNX.php');
// 建立物件時可以指定 SESSION 的名稱，或不輸入使用預設值
$noSpamNX = new NoSpamNX('test_for_NoSpamNX');
 
// 產生隨機順序的隱藏欄位
$hidden_fields_for_NoSpamNX = $noSpamNX->addHiddenFields();

將 HTML 碼嵌入表單中

echo $hidden_fields_for_NoSpamNX;

在送出表單後，根據：

1. 檢查 POST 過來的資料中，是否有 'nospamnx-1' 產生的 MD5 Name；不存在=機器人
2. 檢查 POST 過來的 'nospamnx-1' MD5 Name，其值是否為零；不為零=機器人
3. 檢查 POST 過來的資料中，是否有 'nospamnx-2' 產生的 MD5 Name；不存在=機器人
4. 檢查 POST 過來的 'nospamnx-2' MD5 Name，其值是否為 SESSION 中 'nospamnx-2' MD5 Value；不相等=機器人

每次通過檢查後就會清空 SESSION，所以每一個留言所使用的隱藏驗證碼都是不一樣的。

距離之前介紹 NoSpamNX，已經有一段時間；而作者在新版加入了選擇性的 HTTP referrer 判斷。不過因為難免會造成誤判的情況，以及程式寫起來有點醜（誤）等種種原因，所以並沒有放在這次的 class 裡面。

最後關於範例程式下載，請參考《[分享] 垃圾留言判斷，隱藏驗證碼的 NoSpamNX class PART2》。

]]> http://blog.wabow.com/archives/1974/feed 4 http://blog.wabow.com/archives/1972 http://blog.wabow.com/archives/1972#comments Wed, 19 Aug 2009 02:48:26 +0000 jaceju http://blog.wabow.com/?p=1972 本文轉載自：[PHP] 瞭解 static 關鍵字

先前同事詢問有關 PHP static 關鍵字的用法，這裡我簡單整理一下。

static 主要用途在於定義一個變數空間，讓函式或類別可以保留住該變數的值，直到下次的存取。

以下就各別來探討 static 在函式與類別中的用法。

函式裡的 static 關鍵字

先來看看以下的例子：

function getCount()
{
    static $count = 0;
    $count ++;
    return $count;
}
 
for ($i = 0; $i < 10; $i ++) {
   echo getCount(), "\n";
}
 
/* output:
1
2
3
4
5
6
7
8
9
10
*/

首先我們在 getCount() 這個方法中定義了一個 static 變數 $count ，然後每次呼叫 getCount() 時，就會對 $count 作累加的動作。

接著我們透過迴圈執行十次 getCount() 方法，便可得到了 1 ~ 10 的輸出結果。

這是因為將變數宣告為 static 後，第一次呼叫 getCount() 這個方法時，會為 $count 保留一塊記憶體空間；而當脫離了 getCount() 的變數作用域後，這個記憶體空間並不會被消滅掉，而會在下一次呼叫 getCount() 方法時，再次被配置進來，並還原先前的變數值。

因此，除了第一次呼叫 getCount() 方法外，接下來的每次呼叫都會讓 $count 值累加，而得到 1 ~ 10 的輸出結果；如果把 static 關鍵字拿掉，就會輸出十次的 1 。

應用在遞迴上的 static 關鍵字

瞭解函式中的 static 關鍵字用法後，我們來看一個應用的例子：

function fibV1($n)
{
    if ($n <= 2) {
        return 1;
    } else {
        return fibV1($n - 2) + fibV1($n - 1);
    }
}

這是 PHP 版的 Fibonacci Sequence 遞迴函式，原理我就不多說明了。先來看看它在參數為 20 時所需要的執行時間：

$start_time = (float) microtime(true);
echo fibV1(20), "\n";
$end_time = (float) microtime(true);
echo "Spent Time: ", ($end_time - $start_time), "(s)\n";
/* output:
6765
Spent Time: 0.26100397109985(s)
*/

這裡代入的數字越大，執行時間會越長。

現在我們用 static 關鍵字來改寫：

function fibV2($n)
{
    static $result = array();
    if (!isset($result[$n])) {
        if ($n <= 2) {
            $result[$n] = 1;
        } else {
            $result[$n] = fibV2($n - 2) + fibV2($n - 1);
        }
    }
    return $result[$n];
}

然後再來看執行的時間：

$start_time = (float) microtime(true);
echo fibV2(20), "\n";
$end_time = (float) microtime(true);
echo "Spent Time: ", ($end_time - $start_time), "(s)\n";
/* output:
6765<br />Spent Time: 0.0009009838104248(s)
*/

速度竟然差了快三百倍！為什麼？

其實是因為這裡的 static 關鍵字扮演了 cache 的角色，讓程式不用重新計算已經算好的結果。而使用了 static 關鍵字後，也使得執行時間不會再隨著代入數字變大而變長。

註：不是任何遞迴函式都可以用 static 變數來做 cache ，在使用上要特別注意這一點。

類別裡的 static 關鍵字

在類別裡的 static 關鍵字，也扮演了類似的角色。我們利用 static 在類別裡定義的屬性，會佔用類別的記憶體空間。而透過同一類別所生成的物件，會彼此共享這個 static 屬性；所以不論我們產生多少同類別的物件，它們都會存取到同一個 static 類別屬性。

來看看以下的例子：

class DB
{
    private static $_instance = null;
 
    private static $_instanceCount = 0;
 
    private function __construct()
    {
        self::$_instanceCount ++;
    }
 
    public static function getInstance()
    {
        if (null === self::$_instance) {
            self::$_instance = new self();
        }
        return self::$_instance;
    }
 
    public function getInstanceCount()
    {
        return self::$_instanceCount;
    }
}
 
$db1 = DB::getInstance();
echo $db1->getInstanceCount(), "\n"; // 1
$db2 = DB::getInstance();
echo $db2->getInstanceCount(), "\n"; // 1

範例即為經典的 Singleton 模式，原理這裡先不多做說明。

這裡我們定義了兩個類別 static 屬性，分別是 $_instance 及 $_instanceCount ；而透過 static 定義的類別屬性，在類別裡存取時要用 self 關鍵字加上雙冒號 (::) ，例如 self::$_instance 。

接著我們可以看到在 getInstance() 方法中，如果 self::$_instance 是 null 的話，表示是第一次呼叫，那麼程式就會透過私有的建構式產生一個 DB 物件指定給 self::$_instance 變數，最後再將它回傳出去。這時雖然 getInstance() 裡的變數作用域已經結束，但 self::$_instance 卻會保留下來。

下一次 getInstance() 呼叫時，因為 self::$_instance 已經不再是 null 值，所以就會直接將其內容回傳給呼叫的程式了。

也因為這個原因，所以整個程式執行下來， DB 的 __construct() 方法也只被執行過一次，使得 self::$_instanceCount 也只累加一次，其結果永遠為 1 。

結論

一般 PHP 開發者很少會去使用 static 關鍵字，因為平常會用到 static 的場合其實也不多。這裡我再做一次 static 使用時機的重點整理：

1. 需要記住上一次函式執行的結果。
2. 某些可以保留執行結果的遞迴函式。
3. 不希望因為物件個體不同，進而被影響的類別屬性。
4. 類別的 Singleton 模式。

希望透過上面的說明，能讓大家對 static 關鍵字有進一步的瞭解。

]]> http://blog.wabow.com/archives/1972/feed 1 http://blog.wabow.com/archives/1964 http://blog.wabow.com/archives/1964#comments Thu, 13 Aug 2009 07:45:28 +0000 jaceju http://blog.wabow.com/archives/1964 最近有個小需求是要建立一個簡單的線上影片播放系統，不需要太複雜，只要能播放 FLV 即可。

本文就來為大家介紹一些免費的製作工具，包含轉檔以及播放；不需要有複雜的伺服端環境，也不會有麻煩的設定。

註：如果有線上自動轉檔這方面的需求，建議使用 YouTube API ，或參考 FFmpeg 來架設線上轉檔系統。

軟體下載

我們會用到以下兩個軟體與套件：

• Riva FLV Encoder ： FLV 轉檔轉體。
• Flowplayer ：線上播放影片。

轉檔

其實就是照著介面操作：



在來源檔案的部份，我們可以選擇 FFmpeg 所支援的各種影片類型檔案。

然後轉完檔案後，再把轉好的 flv 檔放在網頁可以存取的地方。

嵌入影片

嵌入影片的方法也很簡單，首先把 Flowplayer 下載回來的 JavaScript 和 Flash 檔案放在適當的地方，然後在 HTML 中載入 JavaScript 即可。

接著利用一個 A 標籤，將連結指向我們的 flv 影片檔；最後再利用 Flowplayer 的指令來載入 Flash 播放器，並將播放位址指向剛剛的連結即可。

<!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="js/flowplayer.js"></script>
</head>
<body>
<a href="video/golfers.flv" style="display:block;width:480px;height:325px;" id="player"></a>
<script type="text/javascript">
flowplayer("player", "./swf/flowplayer.swf");
</script>
</body>
</html>

當然這樣的方案就顯得簡單很多，所以只適合在客戶影片不多，而且較不常更新的專案上使用。不過這個方案還有一個很明顯的缺點，那就是影片是公開的。這時如果需要影片不公開，就需要透過伺服端技術來下載位址做一些特別的處理。

完畢收工，謝謝收看。

]]> http://blog.wabow.com/archives/1964/feed 0 http://blog.wabow.com/archives/1958 http://blog.wabow.com/archives/1958#comments Thu, 13 Aug 2009 06:43:49 +0000 abu http://blog.wabow.com/?p=1958 嘗試在wacow framework，使用gmail smtp發信，不過怎麼設定都一直錯誤，

拜讀咕狗大神之後，發現必須使用ssl連線，

於是開始搜尋wacow controller裡面Mailer的來源，為了測試方便，就不做靈活的改寫，直接硬來，

找到 path\wacow\app\lib\Wacow\Mail\PHPMailer.php，加上

public function setGoogle(){
	$this->_mailer->SetLanguage("tw",'Wacow/vendor/PHPMailer//language/');
	$this->_mailer->Mailer = "smtp";
	$this->_mailer->CharSet = 'BIG5';
	$this->_mailer->ContentType = "text/html";
	$this->_mailer->Mailer = "smtp";
	$this->_mailer->CharSet = 'BIG5';
	$this->_mailer->ContentType = "text/html";
 
	$this->_mailer->SMTPAuth   = true;
	$this->_mailer->SMTPSecure = "ssl";
	$this->_mailer->Host       = "smtp.gmail.com";
	$this->_mailer->Port       = 465;                   
 
	$this->_mailer->Username   = "填上gmail帳號";
	$this->_mailer->Password   = "填上gmail密碼";
}

接著在path\wacow\app\base\Mailer.php的send函式裡面，找到『 $result = $this->_mailer->send(); 』，在他之前任意位置加上

$this->_mailer->setGoogle();

最後到controller測試一下，隨便找個action召喚Mailer出來

$mailer = new Mailer();
(略)
$mailer->send('咕狗SMTP測試', 'abu@wabow.com')

接著就會在信箱內看到剛寄發的mail，重點是PHPMailer提供的SMTPSecure屬性，要記得設為"ssl"，不過好像要更新到XX版之後才有，測試報告結束。

]]> http://blog.wabow.com/archives/1958/feed 0 http://blog.wabow.com/archives/1948 http://blog.wabow.com/archives/1948#comments Thu, 13 Aug 2009 04:24:04 +0000 andrew http://blog.wabow.com/?p=1948

前言

在linux的系統中，user與group有著密不可分的關係。透過兩者間的權限設定而達到在操作linux系統上一層又一層緊密且安全的防護。
那麼，要如何針對user去指定其群組呢，讓我們來看以下的說明。

如何新增一個帳號並同時指定主群組(primary group)

在linux作業系統中，要增加一個使用者也就是新增一個帳號我們一般會下以下指令；

useradd username

所以增加一個andrew帳號就是︰

# useradd andrew

那麼，如果要新增一個帳號同時指定這個帳號的主群組(primary group)該如何下指令呢?如下︰

useradd -g {group-name} username

所以新增一個叫做andrew的帳號並同時指定andrew的主群組為rd則輸入︰

# useradd -g rd andrew

這裡要注意rd這個群組必須是已存在的，要確認rd群組是否存在可以下指令︰

# grep rd /etc/group

如果沒有任何資訊被顯示出來的表示rd群組並不存在，新增rd群組的指令如下︰

# groupadd rd

如此我們就成功新增了使用者andrew並同時指定他的主群組為rd。

如何新增一個帳號並同時指定副群組(secondary group)

那麼，假使我們要新增一個帳號並同時指定他的副群組又該如何設定呢？指令如下︰

useradd -G {group-name} username

這裡一樣要注意要加入的群組本身必須是已存在的。所以總結來說，當useradd後面接的選項是小寫的g就是加入主群組，大寫的G就是加入副群組。
如果要一次加入數個副群組舉例來說如下︰

# useradd -G admins,www,rd daniel

這裡表示新增一個叫daniel的帳號，並同時把此帳號加入admins、www、rd這幾個群組裡，也就是把要加入的數個群組用逗號串接起來即可。

修改已存在帳號的群組

前兩段都是針對新增帳號的群組所做的說明，那麼如果我們想要修改某個已存在的帳號的主群組和增加副群組呢？這裡用到usermod這個指令，修改主群組指令如下︰

# usermod -g admins andrew

這裡表示我們要把andrew這個帳號的主群組修改為admins。而以下指令︰

# usermod -a -G ftp daniel

則表示我們把daniel這個帳號加入到ftp這個群組。

參考網址

http://www.cyberciti.biz/faq/howto-linux-add-user-to-group/

]]> http://blog.wabow.com/archives/1948/feed 0 http://blog.wabow.com/archives/1874 http://blog.wabow.com/archives/1874#comments Thu, 13 Aug 2009 04:08:11 +0000 suzy http://blog.wabow.com/?p=1874 今天想要分享的是 中文字 全型轉半型的 function!

之前的做法很土法鍊鋼, 就是笨笨地用取代(str_replace)的方式把所有全型字一一換成半型字, 但是客戶經常回報, 某些特定字會造成亂碼, 像是 '中央北路' and '郭郭' 等.... 造成了許多困擾.

因此上網搜尋了一下, 且找到了一個真正的解決方法.......

出處: [原创]PHP全角转半角算法和函数

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

function fullToHalf($str, $encode='Big5') { if ($encode != 'UTF8') { $str = mb_convert_encoding($str, 'UTF-8', $encode); } $ret=''; for ($i=0; $i < strlen($str); $i++) {   $s1 = $str[$i];   // 判斷 $c 第八位是否為 1 (漢字） if( ($c=ord($s1)) & 0x80 ) { $s2 = $str[++$i]; $s3 = $str[++$i]; $c = (($c & 0xF) << 12) | ((ord($s2) & 0x3F) << 6) | (ord($s3) & 0x3F);   if ($c == 12288) { $ret .= ' '; } elseif ($c > 65280 && $c < 65375) { $c -= 65248; $ret .= chr($c); } else { $ret .= $s1 . $s2 . $s3; }   } else { $ret .= $str[$i]; } }   return ($encode== 'UTF-8' ? $ret : mb_convert_encoding($ret, $encode, 'UTF-8'));   }

研究了一下寫法, 複習了一下 Bitwise Operators (位元運算)

• << - Shift left (means "multiply by two")
• & - And
• | - Or (inclusive or)

程式裡有0x的為16進位數:

• 0x80 = 16 * 8 = 128 = 10000000
• 0xF = 15 = 1111
• 0x3F = 3 * 16 + 15 = 48 + 15 = 63 (也可以從 ASCII table 找）

全型與半型:

• 半型字符範圍：33-126
• 全型字符範圍：65281-65374
• 對應關係是相差：65248
• 全型空格：12288
• 半型空格：32

心得

這個function還真好用阿 XD, 又可順便複習一下 Bitwise, 雖然我們很少用到, 但它其實還有很多活用空間唷.

]]> http://blog.wabow.com/archives/1874/feed 0 http://blog.wabow.com/archives/1875 http://blog.wabow.com/archives/1875#comments Thu, 13 Aug 2009 03:22:50 +0000 daniel http://blog.wabow.com/?p=1875 回顧前二次測試先行的作業，都有使用到大家在輸入字串判斷上的好朋友；所以這次就來介紹一下囉！正規表示式，Regular Expression。它有多種翻譯名稱：正規式、正規表示法、正則表達式...等等，就連英文縮寫也有多種稱呼；總之只要是用來描述或者匹配一系列符合某個句法規則的字元串的單個字元串，就被稱為正規表示式。它經常被用來檢查使用者所輸入的資料是否符合規則，像是 E-mail 或是電話號碼之類，有著一定規則的字串。

一開始接觸正規表示式的時候，真的覺得他是程式界的火星文，猛然一看幾乎無法分辨這些由符號構成的字串到底有什麼涵義，也很難想像它在驗證字串的能力上是如此驚人！如今正規表示式已被許多程式語言廣泛運用，甚至不少文字編輯器也提供支援。相關的使用規則 Wiki 解釋的非常清楚，之前曾經推薦過的「正則表達式30分鐘入門教程」by deerchao 更是深入淺出；雖然不太可能真的在 30 分鐘內完全了解，但是關於正規表示式的各種應用，作者都巨細靡遺的搭配實例一一解說，非常用心。在碰到難解的規則時，重新看過一遍會有另一番體認唷！

最後分享一個之前寫的正規表示式測試程式，原本是用單頁的 PHP 做處理，現在結合 jQuery Form Plugin 達到不需換頁的效果。在測試正規規則是否正確時，是不錯的小幫手唷！

P.S 其實 Regular Expression Library 也有提供類似的服務 RETester，不過還是在本機上執行比較快速囉^^

正規表示式測試程式下載

]]> http://blog.wabow.com/archives/1875/feed 0