哇寶部落格

家的大小事　一輩子都是特力的事

abu — Thu, 25 Feb 2010 04:45:47 +0000

Trihome 是個以靜態頁面為主的網站，需要管理介面的功能也是少之又少。

在和Neo討論之後，想試試看"內嵌前台"方式來製作這次的管理介面，一開始思索了一下，首先是"如何進入管理模式"，一般正常的方式，不外乎就是進到一個有帳號&密碼欄位的畫面，輸入帳密之後，導向進管理後台，而這次想挑戰的內嵌式，當然要嚐試看看新鮮的寫法，相信有玩過魂斗羅的骨灰級玩家都知道，只要在一開始遊戲畫面中輸入上、上、下、下、左、右、左、右、B、A、B、A，，就可以得到30隻，對於想破關的朋友，莫不是一大福音，根據這樣的"取得隻數"的方式，"取得權限"亦可如法炮制，於是就出現了，魂斗羅內嵌Trihome的想法，在網站的任意位置，只要管理者突然有想進入管理介面的衝動，只要輸入密碼按下Enter，就可以神不知鬼不覺的偷偷進入管理介面，以下即為進入管理介面之後的畫面：

眼尖的朋友應該注意到了，在畫面上有隱約透露出神秘綠光的區塊，這部份是提示管理者，目前頁面上"即將被編輯的區域"，而點擊右上的綠勾，就可以進入真正的編輯區塊了，如下圖：

在編輯區塊內全部採取ajax即時更新資訊方式，讓管理者更能直覺的輸入修改資料。

在一開始構思的時候，本來預定是要真的在網頁上，即時編輯所有內容，不過第一頁就遇到問題了，在首頁的Banner，一次需要上多張Banner，系統判斷上下檔期後，要自動替換，那要可以即時編輯的話，難道要把全部已經上傳的圖都秀出來，版面應該會破的亂七八糟吧，所以才借助了blockUI，把需要編輯的部份通通丟在裡面，以不破壞原始版面為主；在這次撰寫過程，遇到很多問題需要解決，也連帶吸收了不少EXP，整個管理的方式進步空間還很大，不過算是處女作就....勉強算ok，未來有機會的話，可以再嚐試看看不同的方式，朝更人性、更直覺的設計介面前進吧~

哇寶 2010 尾牙宴 - 台北京華酒店三燔本家

admin — Sun, 14 Feb 2010 18:53:44 +0000

公司這次的尾牙選在台北京華酒店的三燔本家，日期則是訂在1/20。

三燔本家在網路上許多吃過的人都極力推薦，甚至可以說是一生當中一定要吃一次的店。經過哇寶挑嘴團這次尾牙的實地品嚐，雖然價格較高，但的確非常值得親身前往一探究竟。

有多值得呢? 從第一道菜開始沒多久，身邊陸續傳來同事們此起彼落的聲音「好好吃喔~」「嗯~這個真好吃」「喔~太好吃了」...(每道新的菜上來，重覆的戲碼也不斷的上演 XD)

(不只沙拉做的美味，連裝沙拉的碗都又脆又香，吃的不亦樂乎)

(極度受好評的開胃菜)

(生魚片好吃到大家都在用搶的)

(這道牛肉的料理鮮嫩多汁，對牛肉最挑嘴的 Jace 都大力推薦)

(龍蝦海鮮的美妙滋味實在讓人難以忘懷)

(這隻魚一出現沒多久就只剩下骨頭了 XD)

(燒烤的味道也不是蓋的)

這次的主角"和牛"更是不可少，甚至加點了一份頂級和牛來吃。

(用鍋底的蒸氣來吃，這真的是人間美味呀~)

最後的甜點水果一搬進來，真的就是異口同聲的「哇噢~~~」

(照片看起沒什麼，但現場看這個真的非常大一鍋)

雖然有遇到牛小排吃到飽的優惠，但同事有的不吃牛、不吃肉...點吃到飽的並不划算 (註)，所以這次以尾牙以三燔本家的套餐為主。以上的照片也只列出部份餐點，由於現場吃的種類很多，加上平常難得有機會吃到高級料理，只顧著吃都來不及了，能保持理性的人記得每樣菜的人已經不多了。XD

註:使用吃到飽的優惠，包廂全場的每個人都要加一份牛小排吃到飽的價格。

(最後每個人幾乎飽到走不太動了，飽到不行的合照)

今年大家也要一起好好努力，明年繼續吃大餐。^^

HOLA 的網站改版會議

Neo — Sat, 09 Jan 2010 09:15:36 +0000

回顧去年的時候，特力集團的電子商務團隊負責人跑來我們公司。

會議開始後，從投影機之中映出了一網站，問我們能不能做到這樣的效果?

(這個網站是 Pixazza 。發音 Pix-a-zza 音似: "皮克斯阿殺")

Pixazza 在去年成立時就引發國外媒體關注，這個連 Google 也名列股東之一的公司，做的事看起來明白易懂:「即使是新聞圖片也可以購物」。

雖然很多人笑稱這只是 Flickr + EDM 的變形，國外早年已有類似的應用在型錄上，但實際應用於購物網站在台灣還沒見到。

特力的團隊同時也帶來了 IKEA 的網站做為參考:

看完之後，我請另一位同事先放下手邊的工作，從電腦拿出個東西給他們看，我們其實很早就開發出雛形來了。

(這個雛形不只有"點"，甚至可以延伸到"面"。上圖是 Email 給特力團隊時改為廚房情境照)

接著跟特力的團隊討論完技術層面，並且參考 HOLA 的實體型錄內容之後，特力團隊的負責人認為還有一件事要解決，以圖片為購物主軸來結合購物網站並不容易，在國內外都沒有這樣的案例可以參考，也希望我們能提供一些意見。

這次就輪到我來做展示了，其實在討論的過程中就已經想到我們的客戶 BlingCandy 的網站首頁非常適合呈現這樣的購物模式:

首頁上方遠大於一般購物網站的圖片尺寸，可以左右切換不同的圖片來進行購物。
這樣情境圖片便能成為網站購物的主體，網頁下方再規畫為展示及促銷訊息區塊。

就這樣，客戶帶著滿意的微笑離去， HOLA 的新版計畫也就從這裡開始了。

Yahoo! 2009 網路爆紅品牌之最

admin — Sun, 03 Jan 2010 16:01:58 +0000

回顧 2009 年，Yahoo! 做了一系列的網路活動調查，網路爆紅品牌之最 TOP 10 也是其中之一:

(第1名"天母嚴選"及第10名"御家族"正好都是我們的客戶)

我們非常了解網路市場的經營不易，因此對能入榜 Yahoo! TOP10 的商家都深感佩服。

在這邊也同時祝福台灣所有的電子商務網站在 2010 年能有更好的成績。TAIWAN UP!

相關網頁:
Yahoo! 奇摩2009之最

御家族網站上線，喚醒體內的零食基因

admin — Sat, 02 Jan 2010 08:28:15 +0000

上線日期: 2009/11/30

沒吃過御海苔，等於這輩子沒吃過海苔。

御海苔有多好吃? Google 搜尋 "御海苔" 所出現的一大串團購、勸敗文:

小華兒愛瞎拼_【團購】御家族的御海苔~忍不住想吃咧

喵喵の簡單生活 ::【團購】御家族的味付海苔&手工達人之黃金蛋捲

[團購]板橋市。寬泓御海苔@ 佳莉。心情:: 痞客邦PIXNET ::

yumi的隨意札記: 【零食】味付御海苔- yam天空部落

御家族除了海苔很有名之外，陸續推出了許多不同種類的零食。

這次很高興能有機會跟御家族的團隊合作，他們真的很在乎每一位網友的反應，對於自家購物網站也要求一定要做到最好、最方便訂購。

御家族網站在2009 年尾很順利的上線了，但偷偷告訴大家，這個網站的重頭戲還沒來，2010 年初將提供一般購物網站難得一見的新功能，敬請期待。

御家族官方購物網站:
http://www.ace-88.com/

美麗華 IMAX 3D 體驗阿凡達的真實世界

admin — Fri, 01 Jan 2010 06:22:43 +0000

阿凡達 AVATAR 這部劃時代的電影上映，許多企業紛紛包場體恤辛苦的工作同仁們。

哇寶當然不能錯過這個新時代 3D 電影的響宴，阿凡達在台正式上映前便已預訂在台灣螢幕最大的美麗華 IMAX 影廳，讓全體同仁體驗身歷其境的 IMAX 3D 的潘朵拉星球之旅。

(哇寶夥伴們在阿凡達立牌前合影)

阿凡達這部電影成功的寫下影史的新頁，相信台灣未來也能做出更多舉世刮目相看的革命性產品。

TAIWAN UP!

噗浪備份工具 BKPlurk Beta 上線

admin — Sat, 12 Dec 2009 11:51:30 +0000

Plurk 的官方API 出來之後，第一件事當然就是要用來好好的備份噗浪啦。

噗浪備份工具 BKPlurk Beta 測試上線網址:
http://www.wabow.com/bkplurk/

在噗浪官方 API 發布前，備份工具大多只能備份自己的噗，因此這次在做 BKPlurk 時就把備份"回噗"列為重點。

為了觀看方便，所以備份檔案採用 HMTL 格式，點一下就可以看到回噗了。
(至於 CSV 的格式目前還在規畫中)

使用上有任何問題或意見也歡迎大家提出來一起討論。^^

更新記錄:
12/15: 感謝 Jace 做的新畫面 (點此回顧初版的畫面)

天母嚴選 Gotobuy 網站上線

admin — Wed, 18 Nov 2009 11:57:11 +0000

Yahoo! 購物中心最大的女裝品牌「天母嚴選」購物網站在 11/15 正式上線了。

不就是個服裝購物網站嘛?

如果這麼想可就大大的錯囉。

只要在 Yahoo! 購物中心或 Gotobuy 網站消費，都可以累積紅利積點兌換好康商品喔。接下來即將登場的優惠折扣機制，讓網友即使在實體通路也能享受到天母嚴選異業合作的大優惠，真的是賺翻啦。

在建置的過程當中，最複雜的地方在於庫存的調撥機制，為了讓天母嚴選在不同的通路都能有正確的數量，花了很多時間跟天母嚴選的團隊一起討論、修正、討論、再修正，過程當中天母嚴選的倉管、物流、客服人員也很用心的提出作業的流程建議參考，在雙方不斷的努力下，最後終於讓網站順利的完成上線了。

上線後才驚覺天母嚴選的團隊更是臥虎藏龍，有人在家隨手就畫出了這張 Gotobuy 的 7-11 取貨圖。

別再等啦~ 想親身體驗各種不同風格的時尚穿搭，來 Gotobuy 就對了! ^^

天母嚴選 Gotobuy 網址:
http://www.gotobuy.com.tw/

同場加映，網站開發中畫面:

[轉載][SVN] 為 Subversion 的 post-commit mail 加入專案名稱

jaceju — Fri, 02 Oct 2009 12:21:06 +0000

本文轉載自：[SVN] 為 Subversion 的 post-commit mail 加入專案名稱

問題

目前我們公司是用 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 程式時，在物件導向的基礎也是不可或缺的。

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

[PHP]免費的檔案瀏覽工具 fileNice

andrew — Thu, 27 Aug 2009 07:34:03 +0000

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

介紹

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

安裝

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

優點

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

感想

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

[PHP] PHP 密技： include 與 require

jaceju — Thu, 27 Aug 2009 07:25:54 +0000

轉載自：[PHP] PHP 密技： include 與 require

可以接受回傳資料？

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

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

如何回傳資料呢？假設現在有個 php 檔叫做 config.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 敘述前加上一行程式，如下：


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

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

var_dump($data);

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

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

用 PHP 查 DOMAIN 的 CNAME 紀錄

suzy — Thu, 27 Aug 2009 06:44:34 +0000

接獲一項來自 Neo 的任務, "用PHP 實作由 CNAME 去判定新加入服務的 DOMAIN 為申請人所有" (證明他不是來亂的).

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 "";
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] Setup In Windows

abu — Thu, 27 Aug 2009 06:41:19 +0000

版本控管是個相當方便的程式開發好幫手，不管檔案被改到多爛，甚至不小心誤殺，都能輕鬆救回。

平常使用的安裝在哇寶主機上的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 ，隨便找個地方加入
```
  
    DAV svn
    SVNPath D:\svn\repository
  
```
其中 /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，檔案成功被建立、刪除修改後更新，感覺還不錯～

[分享] 垃圾留言判斷，隱藏驗證碼的 NoSpamNX class PART2

daniel — Thu, 27 Aug 2009 06:32:14 +0000

感謝上一篇文章中前輩們的熱心回覆；垃圾留言果然是大家心中的痛啊（噗）～雖然 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 '';
    } else {
        return '';
    }
}

驗證時根據 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 二種方式。

[Washop] 用 Word 合併列印 7-11 取貨標籤

suzy — Thu, 20 Aug 2009 07:42:23 +0000

今天要介紹的是如何用 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 之間.
如果條碼一直刷不過, 試試看條碼後面空一格, 空格轉成別的字型, 因為我們家的印表機印出來會把換行當作條碼印 (螢幕顯示正常, 印出來就不對了).
要用雷射印表機印, 條碼機才能感應.

謝謝收看

[jQuery Plugin]抓取YouTube影片的截圖 jYouTube

andrew — Thu, 20 Aug 2009 07:38:13 +0000

官方網站 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提供了很簡單就可以達到目的的方法，讓我們來看看要怎麼處理吧!

程式碼

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來的快速，提供給大家做個參考。

[Open Flash Chart] 無痛繪製統計圖表

abu — Thu, 20 Aug 2009 06:21:07 +0000

電子商務網站的後台，統籌管理了一堆訂單相關資訊，相對的，客戶對於產品銷售部份，若能搭配上統計圖表，更是一目了然，為了簡易製作出方便快速又美麗的成品，就是借重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

[分享] 垃圾留言判斷，隱藏驗證碼的 NoSpamNX class

daniel — Thu, 20 Aug 2009 05:06:42 +0000

目前大部分網站在表單發送時，判斷機器人發送廣告、垃圾留言的方法是採用 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》。

[PHP] 瞭解 static 關鍵字

jaceju — Wed, 19 Aug 2009 02:48:26 +0000

本文轉載自：[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
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 使用時機的重點整理：

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

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

建立簡易的線上影片播放系統

jaceju — Thu, 13 Aug 2009 07:45:28 +0000

最近有個小需求是要建立一個簡單的線上影片播放系統，不需要太複雜，只要能播放 FLV 即可。

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

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

軟體下載

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

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

轉檔

其實就是照著介面操作：

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

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

嵌入影片

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

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


<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>

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

完畢收工，謝謝收看。