2011/11/29

PHPExcel

PHPEcel
PHPExcel API

PHPExcel 是我用過最久最強大的 PHP 檔案轉成 Excel 檔案的套件,簡單介紹一下我常用到的方式,PHPExcel 可以儲存成 Office 2007 的格式,但有鑑於流通性的問題,下方的範例將格式存成 2003 的版本。

include_once 'lib/PHPExcel.php';
$excel = new PHPExcel();
$excel->setActiveSheetIndex(0); // 選擇sheet
$excel->getActiveSheet()->setTitle('sample'); // 將sheet命名
$excel->getActiveSheet()->SetCellValue('A1', 'Hello'); // 設定內容
$type = PHPExcel_Cell_DataType::TYPE_STRING;
$excel->getActiveSheet()->getCell('B1')->setValueExplicit('0966666666', $type);
// PHPExcel 可以選擇 Excel 的欄位格式
// 將格式轉成 string 可以避免像手機開頭的 0 自動忽略的問題
$excel->getActiveSheet()->getColumnDimension('A1')->setWidth(20); // 設定寬度

// 如果你無法預知欄位多寡,可以用動態的方式放置資料
for ($i = 2; $i < 5 ; $i++) {
    for ($j = 0; $j < 2; $j++) {
        $excel->getActiveSheet()->setCellValueByColumnAndRow($j, $i, 'test');
        $excel->getActiveSheet()->getCellByColumnAndRow(1, $i)->setValueExplicit('0966666666', $type);
    }
}

// 下載
header('Content-Type: application/vnd.ms-excel');
header('Content-Disposition: attachment;filename="sample.xls"');
header('Cache-Control: max-age=0');

$objWriter = PHPExcel_IOFactory::createWriter($excel, 'Excel5');
$objWriter->save('php://output');

2011/11/24

CKEditor

FCKEditor 是我早期一直用到現在的編輯器,該官網出了新產品 CKEditor 頗久,但一直沒時間摸,最近打算開始使用新玩具,寫下一些筆記來使用。

CKEditor 官方網站

CKEditor api 網站

CKEditor 基本框架

我在 config 裡面定義了自己的 toolbar 叫 chan

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="ckeditor/ckeditor.js" type="text/javascript"></script>
    <script src="ckeditor/config.js" type="text/javascript"></script>
</head>
<body>
<textarea id="editor" name="editor" rows="10" cols="30"></textarea> 
<script type="text/javascript">
    CKEDITOR.replace('editor');
</script>
</body>
</html>

jQuery 導入

ckeditor 有整合 jQuery 的插件,可以利用 jQuery 導入。

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.6.2.min" type="text/javascript"></script>
    <script src="ckeditor/ckeditor.js" type="text/javascript"></script>
    <script src="ckeditor/adapters/jquery.js" type="text/javascript"></script>
    <script src="ckeditor/config.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $('#editor').ckeditor();
        });
    </script>
</head>
<body>
<textarea id="editor" name="editor" rows="10" cols="30"></textarea> 
</body>
</html>

config 基本定義

CKEditor 不像 FCKEditor 是修改他預設的 js 檔案,而是自己定義一個檔案並且透過 api 決定你要使用的內容,我定義了我認為比較用的到跟客戶比較不會出錯的按鈕,並且將 enter 的預設模式改為 br,還有加上開啟圖片上傳的功能。

/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config )
{
    config.toolbar = 'chan';
    config.toolbar_chan = 
        [
            {name:'document', items:['Source','-','Preview','Print']},
            {name:'clipboard', items:['Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo']},
            {name:'editing', items:['Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt']},
            {name:'basicstyles', items:['Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat']},
            '/',
            {name:'paragraph', items:['NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','- ','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl']},
            {name:'links', items:['Link','Unlink','Anchor']},
            {name:'insert', items:['Image','Table','HorizontalRule','SpecialChar','PageBreak']},
            '/',
            {name:'styles', items:['Format','Font','FontSize']},
            {name:'colors', items:['TextColor','BGColor']},
            {name:'tools', items:['Maximize']}
        ];
    config.enterMode = CKEDITOR.ENTER_BR;
    config.filebrowserImageUploadUrl = 'upload.php';

    // 如果你要更換外觀,只要設定 skin 即可
    // 官方有 v2、office2003 以及 kama 三種預設的 skin
    config.skin = 'v2';
};

toolbar 名稱翻譯,來自阿忠伺服器

Source:原始碼
Save:儲存
NewPage:開新檔案
Preview:預覽
Templates:樣版
Cut:剪下
Copy:複製
Paste:貼上
PasteText:貼為文字格式
PasteFromWord:自 word 貼上
Print:列印
SpellChecker:拼字檢查
Scayt:即時拼寫檢查
Undo:復原(上一步)
Redo:重複(下一步)
Find:尋找
Replace:取代
SelectAll:全選
RemoveFormat:清除格式
Form:表單
Checkbox:核取方塊
Radio:選項按鈕
TextField:文字方塊
Textarea:文字區域
Select:選單
Button:按鈕
ImageButton:影像按鈕
HiddenField:隱藏欄位
Bold:粗體
Italic:斜體
Underline:底線
Strike:刪除線
Subscript:下標
Superscript:上標
NumberedList:編號清單
BulletedList:項目清單
Outdent:減少縮排
Indent:增加縮排
Blockquote:引用文字
JustifyLeft:靠左對齊
JustifyCenter:置中
JustifyRight:靠右對齊
JustifyBlock:左右對齊
Link:插入/編輯超連結
Unlink:移除超連結
Anchor:插入/編輯錨點
Image:插入影像
Flash:插入Flash
Table:插入表格
HorizontalRule:插入水平線
Smiley:插入表情
SpecialChar:插入特殊符號
PageBreak:插入分頁符號
Styles:樣式
Format:格式
Font:字體
FontSize:大小
TextColor:文字顏色
BGColor:背景顏色
Maximize:最大化
ShowBlocks:顯示區塊
About:關於 CKEditor

圖片上傳

CKEditor 的圖片上傳需要自己定義跟撰寫,個人覺得這樣比較好,提供比較大的彈性,下方是 CKEditor 上傳用 PHP 的基本架構。

// Required: anonymous function reference number as explained above.
$funcNum = $_GET['CKEditorFuncNum'] ;
// Optional: instance name (might be used to load a specific configuration file or anything else).
$CKEditor = $_GET['CKEditor'] ;
// Optional: might be used to provide localized messages.
$langCode = $_GET['langCode'] ;

// Check the $_FILES array and save the file. Assign the correct path to a variable ($url).
$url = '/path/to/uploaded/file.ext';
// Usually you will only assign something here if the file could not be uploaded.
$message = '';

echo "";

我使用了 class.upload.php 當作我的上傳套件,下方是我修改的結果。

// Required: anonymous function reference number as explained above.
$funcNum = $_GET['CKEditorFuncNum'] ;
// Optional: instance name (might be used to load a specific configuration file or anything else).
$CKEditor = $_GET['CKEditor'] ;
// Optional: might be used to provide localized messages.
$langCode = $_GET['langCode'] ;

// Usually you will only assign something here if the file could not be uploaded.
$message = '';
$url = '';
$newName = date('YmdHis'); // 新檔案名稱
$dir = 'uploads/editor/'; // 預設目錄
$width = 600; // 定義寬度

include_once 'libs/class.upload.php'; // 使用 upload class
$foo = new Upload($_FILES['upload']);
if ($foo->uploaded) {
    $foo->file_new_name_body = $newName;
    $foo->image_resize = true;
    $foo->convert = 'jpg'; // 轉換為 jpg
    $foo->jpeg_quality = 100;
    $foo->image_x = $width;
    $foo->image_ratio_y = true;
    $foo->process($dir);

    if ($foo->processed) {
        $url = $dir.$newName.'.jpg';
    } else {
        $message = $foo->error;
    }
} 

echo "";

PHPMailer

PHPMailer 是 PHP 一個歷久彌堅的 mail class,有強大的功能,在這邊介紹他簡單的用法。

include_once 'libs/class.phpmailer.php';
$mail = new PHPMailer;
$mail->SetLanguage('zh', 'libs/lang/'); // 設定語言
$mail->CharSet ='UTF-8'; // 設定預設編碼
$mail->Encoding = 'base64'; // 設定文字編碼
$mail->IsHTML(true); // 使用 HTML 格式
$mail->From = 'sender@gmail.com'; // 寄件者 Email
$mail->FromName = 'name'; // 寄件者名字
$mail->Subject = 'subject'; // 主題
$mail->Body = 'contents'; // 內容
$mail->AddAddress('receiver@gmail.com', 'receiver'); // 收件者 Mail
if ($mail->Send()) {
    echo '寄出';
} else {
    echo $mail->ErrorInfo;
}
$mail->ClearAddresses(); // 如果你要在迴圈跑寄信,使用這個函式可以清除收件者

// 如果你要自己設定 SMTP,此時要 include class.smtp.php
$mail->IsSMTP();
$mail->SMTPAuth = false;
$mail->Host = 'msa.hinet.net';
$mail->Port = 25;

// 如果是需要驗證的 Server
$mail->SMTPAuth = true;
$mail->Username = 'username';
$mail->Password = 'password';

2011/11/17

CentOS 6 修改網路卡參數

一般來說修改網路卡有兩種方式,一個是用 ifconfig 指令

ifconfig eth0 192.168.1.12 broadcast 163.26.1.255 netmask 255.255.255.0

另一種是直接修改系統的檔案

/etc/sysconfig/network-scripts/ifcfg-eth0
# 檔案路徑,可以使用 vi 或 vim 來編輯

參數

  • DEVICE=eth0 這個裝置的名稱;
  • BOOTPROTO=static 使用我們給的網路名稱(若為浮動 IP 則為 dhcp )
  • BROADCAST=192.168.1.255 這是節點的網域;
  • IPADDR=192.168.1.12 這是這塊網路卡的位址;
  • NETMASK=255.255.255.0 子遮罩網路;
  • ONBOOT=yes 開機自動開啟網路卡。
  • DNS1=168.95.1.1 DNS

完成之後可以使用指令重新啟動網路服務

service network restart
/etc/init.d/network restart
# 兩個取其一使用即可

如過要啟用或關閉網路卡,可以用 ifup 跟 ifdown 兩個指令

ifup eth0
ifdown eth0

2011/11/16

微軟到底可以多蠢?

之前申請 hotmail,完全就是為了申請 MSN 帳號,hotmail 除了讓我註冊一些日後應該也不會去的網站,作為驗證身分的作用之外,平常是完全沒在用的,可是平常有些 msn 的朋友會把信寄到我的 hotmail,應該是直接從帳號點選寄發,所以常常得花告知的力氣,請他們把東西寄到我的 Gmail。

有一天忘記在哪邊逛到,msn 可以增加 email 信箱進去帳號,我想說微軟終於開始投入於人性化這件事,應該也意識他們的 webmail 有多難用,於是我興沖沖的要加入我的 gmail,但智障的事情從此每天輪迴。

ask to add email

從我真的忘記在哪邊申請加入以後,msn 就會三不五時跳出這個問題,為什麼不一次把它弄好,看下去你就知道。

msn login page

點選了連結以後導到微軟的登入頁面,這很合理啊,msn 是 ap,你要用 website 的功能當然要先 login,於是我輸入了我的帳號以及密碼,按下登入。

ask login again

然後應該可以加入新的 email 了......啥!沒有登入,要再登入一次?於是我點選右上方的登入,結果又跑到同樣的畫面,微軟啊微軟,我實在太低估你的愚蠢能力了,

或許你會說怎樣怎樣就可以,但為什麼我加一個 email 進去 msn 帳號這個普通到不能再普通的動作還要怎樣又怎樣才可以,我有試過先在瀏覽器登入後再在 msn 上點選連結,一樣把你導到登入畫面,我只能說,微軟,你繼續吃屎吧。

deck.js 簡介

http://imakewebthings.github.com/deck.js/

deck.js 是最近很受歡迎的 slide 製作方式,使用 HTML 5 的架構來製作投影片,只要載入他的核心 JavaScript 以及布景的 CSS,就可以構成最陽春的 slide 版本,他另外提供了一些用於場景變換的 transition 以及 extension,搭配使用就有很好的轉場效果,簡單介紹一下他的使用方式。

場景變換

目前官方提供了 4 個場景。

neon

neon

none

none

swiss

swiss

web-2.0

web-2.0

只要 include 該同名的 JavaScript 以及 CSS,程式會自己偵測運行。

Transition

目前官方提供了三種特殊變換方式,只要載入同名的 CSS 檔案便可以使用。

  • fade - 淡入淡出
  • horizontal-slide - 平行切換
  • vertical-slide - 垂直切換

Extension

  • deck.goto: 按下 g 之後,可以輸入數字前往指定的 slide 頁面
  • deck.hash: 將每個有指定 id 的 slide 於網址後方加入 anchor,這樣可以便於提供別人某個指定的網址,以觀看指定的 slide 頁面
  • deck.menu: 按下 m 之後,可以將所有的 slide 切換為縮圖選擇模式(大推)
  • deck.navigation: 增加可以點選左右切換頁面的按鈕
  • deck.status: 呈現目前以及所有頁面的數字編號

相關的使用方式都在這邊:http://imakewebthings.github.com/deck.js/docs/

直接用實際的例子一步一步來完成投影片

這是最基本的 HTML 5 架構,現在要來 include 我需要的格式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my first deck.js slide</title>
</head>
<body>

</body>
</html>

完成了初步的布局

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my first deck.js slide</title>
<!-- core CSS -->
<link rel="stylesheet" type="text/css" href="css/deck/deck.core.css">
<link rel="stylesheet" type="text/css" href="css/deck/deck.hash.css">
<link rel="stylesheet" type="text/css" href="css/deck/deck.navigation.css">
<link rel="stylesheet" type="text/css" href="css/deck/deck.menu.css">
<link rel="stylesheet" type="text/css" href="css/deck/deck.status.css">

<!-- theme and transition CSS -->
<link rel="stylesheet" type="text/css" href="css/deck/web-2.0.css">
<link rel="stylesheet" type="text/css" href="css/deck/fade.css">

<!-- include js -->
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/deck/deck.core.js"></script>
<script type="text/javascript" src="js/deck/deck.hash.js"></script>
<script type="text/javascript" src="js/deck/deck.navigation.js"></script>
<script type="text/javascript" src="js/deck/deck.menu.js"></script>
<script type="text/javascript" src="js/deck/deck.status.js"></script>
<script type="text/javascript" src="js/deck/modernizr.custom.js"></script>
<script>
$(function() {
    $.deck('.slide');
});
</script>
</head>

<body class="deck-container">

<!-- navigation extension --> 
<a href="#" class="deck-prev-link" title="Previous">&#8592;</a> <a href="#" class="deck-next-link" title="Next">&#8594;</a> 

<!-- status extension -->
<p class="deck-status"> <span class="deck-status-current"></span> / <span class="deck-status-total"></span> </p>
</body>
</html>

Hi, this is my first slide

first slide

Introduce

Here is the introduce

  • first: first content
  • second: second content
  • third: third content

intro

我們指定了 .slide 給 deck 辨別,所以所有 class 等於 deck.js 的都會視為投影片,在同一個頁面你想要訊息依次出現的話,只要使用巢狀的結構,將所有內容加上 slide 的 class 屬性 就可以達成,使用一些 HTML 語法會產生不同的預設 layout,如 h1 - h6、pre、cite 等等,也可以搭配自己設計的 CSS 來布置你要的樣式,是不是很有趣呢。

2011/11/14

PHPConf 2011

PHPConf 2011

有幸參與第一屆。

PHPConf place

這是台灣第一次有人舉辦跟 PHP 有關的 conference,並且到場人數超過百人,算是台灣一場程式界很大的聚會,場地也很棒,在平常一般人無法進入的中研院會議室,因為有幸報名到這次的聚會,也沾光進了中研院的 conference room,感受一下一堆奇人平常在這邊開會的氣氛,硬體設備不用說相當良好,每個座位有自己的有線網路插頭(現場也有品質很好的 Wifi),自己的電源插座,冷氣溫度適中,燈光明亮,視野良好,投影設備齊全,左右有很大的投影布幕,中間有電視牆,椅子也很舒適,是一個很銷魂的開會地點,要開多久都沒問題。

pct and Jace

這兩位是網路名人 pct 以及 Jace 大大,Jace 大大是台灣截至 2011 年為止,唯一出過一本有關 smarty 書籍的人,早期也購買拜讀過。

eddit kao

活動主辦者之一高見龍,非常熱心致力舉辦研討性質的活動。

People in PHPConf 2011

滿坑滿谷的人,我想都是來自各領域的 IT 人員。

appleboy

這是台灣 codeigniter 網站的維護者 appleboy,在這邊想特別提一下他,一直覺得執著於沒有這麼主流,卻願意全心投入付出的人很酷,目前算認識的有三位,其中兩位是因為家裡小時候第一台是 Twingo,因此長大開了一間專修 Twingo 的二傻車坊兩兄弟,另一位就是 appleboy,在這邊向你們致敬 :)

要舉辦一個活動並不容易,要顧的環節非常的多,更何況是像這種免費的 conf 更是難上加難,希望有幸能夠報名的人盡量不要缺席,畢竟沒有收費,報名成功就佔了人家一個名額,能夠參加這種神人聚集的神聖聚會實屬難得,感謝所有無私為眾人付出的無名英雄,不過他們多半也滿有名的就是了~哈。

2011/11/12

PChome & skype 去吃屎

在通了 15 封 email 我的 skype 帳號仍然不能使用以後,我輾轉找到了他們國外的線上客服,花了半小時解決了我一個星期前的問題,附上我們的對話。

03:49:01 Jose E.
Thank you again for having provided us with the necessary information. Your account has now been unblocked. 

03:49:48 Chan
Hold on, let me try it

03:50:17 Chan
Finally, it's  work

03:51:21 Jose E.
That's good to hear.

03:51:31 Jose E.
Is there anything else I can help you with?

03:52:48 Chan
Thanks for your help, and hope you could bring my advisement to your superior, change your cooperative agent in Taiwan, they are irresponsible and without any ability to serve your client in Taiwan, as I said, we hate their service for a long time, you can try to investigate it.

03:54:26 Jose E.
I'm sorry to hear about your experience. We will take note of that. Before I let you go, is there anything else I can assist you with?

03:54:51 Chan
It's ok, thanks again.

2011/11/11

PChome & skype 爛透了

skype 客服

上個星期天,我才剛儲值完不久,發現我的 skype 居然不能打市話,帳號被鎖起來了,於是我跑去台灣 PChome & skype 官網,想要撥電話或者是寫 Email 問他們怎麼回事,看到上面這個線上客服時間差點沒傻眼,打電話這個動作是一天 24 小時都有可能發生的行為,他們客服下午五點下班就算了,還給我周休二日是怎樣,這是一個付錢的商業行為耶。

客服電話不能打,該不會 Email 的部分也周休二日吧,果然超過星期一才給我回信,我把我的狀況跟資料都填過去,他們回信要我改密碼,我打電話過去問他們怎麼回事,他們說因為我常常在兩個不同的地方登入,這樣會被鎖帳號(What the f?),接著發了一封 Email 要我寄身分證正反面跟健保卡正反面給他們,我昨天下午就寄了,到現在我帳號還是被鎖住,剛剛又撥了通電話給他們,居然語音說現在不是上班時間,還午休就對了啦..............

上網查了一下才發現 PChome 的服務是臭名遠播的爛,於是剛寫了一封信去 skype international 大罵他們,雖然知道沒什麼用,當作發洩吧,有在用 skype out 的朋友們,遇到這種事情只能自求多福囉。

2011/11/06

動態載入 jQuery

現在很多瀏覽器都有 console 的功能(連很爛的 IE 都有了),所以如果懂 DOM 又是 jQuery 熟手的話,透過 console 去處理一些事情會格外方便,但如果該網站預設並不是使用 jQuery 的話,我們可以試著動態的載入 jQuery 的內容使用。

var theHead = document.getElementsByTagName("head")[0]; 
var theJs = document.createElement('script');
theJs.type = 'text/javascript';
theJs.src= "http://code.jquery.com/jquery-1.7.min.js";
theHead.appendChild(theJs);

2011/11/04

雅雯生日整人計畫

今天是雅雯的生日,招集了我一幫好兄弟,幫我實現生日整人計畫,劇情如何發展,就讓我們看下去。

計畫大綱

  1. 過 12 點雅雯生日那一刻把她找出來慶生
  2. 道具:禮物、蛋糕、仙女棒、火樹銀花
  3. 地點:玫瑰公園
  4. 騙取手段:急性腎結石

由於雅雯很精,所以我們想到了所有的可能性,就是為了確保作戰計畫能夠順利進行,光是把雅雯弄到玫瑰公園的急性腎結石方案就有好幾個備案。

作戰方式

騙雅雯說在球場腎結石發作,引她到玫瑰公園,並且跟她說崇文會來接我

  1. 雅雯主動說要過來並且願意等崇文接送(這是最順利的情況)
  2. 雅雯說等不及要直接過來,崇文直接過來玫瑰公園集合(這個狀況也還 ok)
  3. 雅雯第一次說不過來,故意讓崇文遲到並謊稱手機沒電要她幫忙聯繫崇文,再由崇文動之以情(這樣就有點麻煩了)
  4. 雅雯如果就是沒有要過來(那只能殺到她家樓下了)

作戰日當天,在球場聯繫每個工作人員

計畫總統籌睿書

作戰場地「玫瑰公園」

雅雯準備經過的動線

工作人員之一,阿建大師

作戰的裝備

  • 枕頭
  • 短褲
  • 墨鏡
  • 領帶
  • 襯衫
  • 白襪
  • 拖鞋

這次作戰的 key man,司機崇文

阿建大師真調皮

九姑娘志銘也到了

萬事俱備,開始等待時間的到來

這張毫無疑問就是 Lebron James

等待的過程中打起球來了

時間到了,準備打電話

由於我是老天爺賞飯吃的戲精,於是雅雯接到我電話以後就主動要過來,跟崇文再次對好行徑路線後,準備出發接人

就戰鬥位置,我在思考要用 50 種痛苦的表情中的哪一種

工作人員在後方準備點仙女棒,等雅雯一接近我便衝出來給她驚喜

很順利

九姑娘帶著蛋糕打頭陣

仙女棒部隊唱著歌尾隨在後

這個表情,我知道我們成功了

大家圍繞著壽星唱歌,而我還陶醉在自己的演技中

由於太愛演被踢了,喂!

準備布置生日蛋糕

女人的年齡是秘密喔

重頭戲 2,火樹銀花

燒啊燒啊

九姑娘玩 high 了

阿建大師拿出他的白色 iPhone 記錄這一刻

壽星許願

頒獎

回禮

到底是什麼東西呢

將將將將,一台雪白的拍立得,啥,我訂的明明是 Hello Kitty 的版本,怎麼會是全白的,明天要打去相機王罵人了

賢慧的九姑娘在幫大家分蛋糕,順便跟大家提一下烤肉有他的話也會很熱心的幫大家生火

圓滿成功

好兄弟元凱終於入鏡了

今天真的很感激我每個好兄弟,元凱、元建、崇文、賤人(睿書)、賤人(志銘),以後有任何需要小弟效勞的地方,一通電話一定挺到底,今天這個晚上真是很難忘,祝雅雯跟每個人可以永遠快樂。