2010/01/31

[單車] 大稻埕-動物園


在較大的地圖上查看2010-01-31
單程距離約20KM,來回花掉四個小時 從白天騎到天黑 囧

P1010957.JPG
靠近馬場町公園的河濱

P1010959.JPG
靠進動物園的河濱,整片綠草很舒服

P1010960.JPG
在動物園站前留影

[CodeIgniter] 顯示所有活動

本篇要來新增主要功能了,預設進入首頁會顯示所有活動的項目
這篇就可以充分展現使用MVC的優勢了

新增報名資料到DB
因為還沒有寫介面讓管理員新增活動資料(這步之前還要寫帳戶登入,後台功能等)
所以直接開phpmyadmin新增兩筆資料
INSERT INTO `signup`.`event` (
 `sn` ,
 `topic` ,
 `desc` ,
 `start_time` ,
 `end_time` ,
 `joiner_no`
)
VALUES (
 NULL , 'CI教學研討會台北場', 'CodeIgnitor教學研討會描述', '2010-01-31 00:32:46', '2010-02-07 00:32:52', '10'
), (
 NULL , 'CI教學研討會台中場', 'CodeIgnitor教學研討會描述', '2010-02-08 00:33:16', '2010-02-23 00:33:24', '20'
);

講到這 CI 內建一個可以直接新增資料的功能,不需要打開phpmyadmin,叫做scaffolding


修改Controller: signup
如果在準備工作中還沒把config/database.php的DB連接資料設定好,請先完成設定。
由於CI是採自行 Load Library的方式,所以用到啥就要先讀取進來(部分基礎功能預設會自動載入,如需要自動載入Library也可在config.php內設定`)
由於預期整個報名作業都會用到DB,所以把載入Library語法直接放在constructor內即可。
講到這,看的懂的人應該少數,所以直接放CODE比較好懂 囧
Controller: signup.php
function signup(){
  parent::Controller();
  //load database library
  $this->load->database();
}

載入Database Library後,開始寫首頁吧
Controller: signup.php
function index(){
 //get event table content
 $data['title'] = 'Event List';        $data['event'] = $this->db->get('event');
 $data['content'] = 'home';
 $this->load->view('index',$data);
}

$data['title'] = 'Event List';  <= 設定首頁的Title
$data['event'] = $this->db->get('event');  <= 讀取event table的資料
好,完成。

比較一下沒CI的寫法:(憑印象寫的 應該會錯XDD)
$conn = mysql_connect();
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
$result = mysql_query("SELECT * FROM event");
mysql_close($link);

省事很多吧!CI 叫 Active Record 讓查詢資料庫十分簡單,且把存取DB的動作抽象化,如之後要改DB的種類(ex: Mysql -> MS SQL)就不用動程式碼,只需要把database.php修改即可。
如對Active Record需要更深的了解,請到http://ci.wuboy.twbbs.org/user_guide/database/active_record.html

修改View: home.php
<h1><?php echo $title?></h1>
<?php if( $event->num_rows() > 0 ):?>
<?php foreach($event->result() as $row):?>
 <div id='event-<?php echo $row->sn; ?>' class='post'>
  <h2 class='title'><a href='#'><?php echo $row->topic; ?></a></h2>
  <p class='meta'>
    Time: <?php echo $row->start_time; ?> ~ <?php echo $row->end_time; ?>
    | 人數: <?php echo $row->joiner_no; ?>
  </p>
  <div class='entry'><p><?php echo $row->desc; ?></p></div>
 </div>
 <hr/>
<?php endforeach;?>
<?php endif;?>

紅字部分是PHP語法,幾乎都是ECHO語法,幾點抓出來講
$event->num_rows()  <= 取得資料的個數
$event->result()  <= 抓取資料列,與mysql_fetch_object相同;同理可以使用$event->result_array() 以陣列形式取得值。
$row->欄位名稱  <= 就是抓欄位名稱XD

輸入http://127.0.0.1/ci/signup

就可以看到成果了,很簡單吧!

免進DB直接編修DB: scaffolding
此功能可以直接在網頁新增、編輯、刪除DB的動作,對於測試時還蠻好用的,但是也因為太強大,正式上線建議不要用。
需要設定兩個地方
  1. application/config/route.php
    $route['scaffolding_trigger'] = "scaffolding";
    紅字可修改成自己想要的字串,用以在網頁輸入使用。
    打入http://127.0.0.1/ci/signup/scaffolding/可以進入畫面。
  2. Controller內的Constructor內新增 $this->load->scaffolding('event');
    紅字為想存取的Table Name,只能輸入一個

兩者缺一不可!


Source Code
Controller: signup.php
Class Signup extends Controller{
 function signup(){
  parent::Controller();
  //load database library
  $this->load->database();
  $this->load->scaffolding('event');
 }
 function index(){
  //get event table content
  $data['title'] = 'Event List';
  $data['event'] = $this->db->get('event');
  $data['content'] = 'home';
  $this->load->view('index',$data);
 }
}


View: home.php
<h1><?php echo $title?></h1>
<?php if( $event->num_rows() > 0 ):?>
<?php foreach($event->result() as $row):?>
 <div id='event-<?php echo $row->sn; ?>' class='post'>
  <h2 class='title'><a href='#'><?php echo $row->topic; ?></a></h2>
  <p class='meta'>Time: <?php echo $row->start_time; ?> ~ <?php echo $row->end_time; ?> | 人數: <?php echo $row->joiner_no; ?></p>
  <div class='entry'><p><?php echo $row->desc; ?></p></div>
 </div>
 <hr/>
<?php endforeach;?>
<?php endif;?>


下一篇要來設計表單讓使用者報名了

2010/01/30

[CodeIgniter] 引入CSS Template作為Master Page

我寫網站比較怪,要先把外觀弄好才開始寫功能,寫起來成就感比較大XDD
由於只有內容部分會做變動,其餘head, footer, sidebar之類的幾乎不會動,所以引入master page的方法最為簡單
在此又要來說故事了(泡茶)

沒有使用master page的做法
假設現在網頁切成四塊:

  1. head: HTML的Head, CSS, Title等部分
  2. sidebar: 連結導覽列
  3. content: 網頁主要內容
  4. footer: 網頁尾,大部分作版權宣告等
分別存在view資料夾下head.php, sidebar.php, footer.php,
Content是要顯示的內容而定
在controller內則需要這樣寫
$this->load->view('head');
$this->load->view('sidebar');
$this->load->view('content');
$this->load->view('footer');
這樣就會全部顯示,看起來不難,但是

  1. 每個controller 裡需要輸出內容的 function 都要來一次四行的引入= =
  2. 網頁要切四塊,要找很累,整體設計比較累
所以....

回到正題,因為我美術細胞早就死光了,所以只能依靠別人(握)

Get CSS Template
這裡介紹一 帖好藥 個好站 http://www.freecsstemplates.org/ 可以挑個喜歡的來用
解壓縮會得到

  • images目錄 => 放到www\ci\public\  ,public請自行建立
  • index.html => 另存至www\ci\system\application\views\index.php
  • styles.css   => 放到www\ci\public\
除HTML外,image, css, js etc...等建議放到public內,引入比較方便;
當然public可以隨你高興取,只要是靜態文件都可擺這。

使用Template
將index.php內裡的div content內容改為
<div id="content">
     <?php $this->load->view($content); ?>
</div>
此舉可讓Controller設定一變數來決定內容

修改signup.php 來引入檔案
function index(){
    ....
    $this->load->view('index');
}

解決靜態內容的路徑問題
開啟http://127.0.0.1/ci/signup/ 應可看到內容,
但是應該沒有任何CSS效果與圖片,還有PHP錯誤,打擊很大吧!哈
  
會這樣的原因有二:
  1. public目錄在htaccess會被轉成index.php/public,所以找不到CSS跟圖片
  2. HTML引入CSS與CSS內引入圖片的相對網址不正確,舉例來說:
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    會去找http://127.0.0.1/ci/style.css 來使用,導致找不到
CSS可以加上路徑就好,但是CSS內指定的image路徑也要一個一個改,這樣不好吧= =

解決方法:

  1. 修改.htaccess
    RewriteCond $1 !^(index\.php|public|images),往後有其他資料夾也比照辦理
  2. 在index.php內<head>...</head>中,引入檔案前加入
    <base href="<?php echo $this->config->item('base_url') ?>public/"/>
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />


    修正:上兩行寫法會造成之後連結都會以public開頭,反而更麻煩,修正如下
    <base href="<?php echo $this->config->item('base_url') ?>"/>
    <link href="public/style.css" rel="stylesheet" type="text/css" media="screen" />

    注意要在加在引入檔案 (css, js) 前,不然還是掛= =


再次重新整理,畫面應該就正常了
但是事實是殘酷的,圖片的CSS是有出來,但是怎麼還是有ERROR


修正PHP錯誤
問題很簡單,還記得在view: index.php內中有這麼一行
<?php $this->load->view($content); ?>
因為在Controller沒有定義content內容,所以有錯誤
再次修改signup.php 內 index.php
$data['content'] = 'home';
$this->load->view('index',$data);
建立view: home.php,內容先隨便塞'123'
重新整理!你得到它了


每個需要輸出畫面的Funtion只要兩行
$data['content'] = 'home';
設定MASTER PAGE內容要呼叫哪個頁面,
此例是要在DIV Content內顯示home.php的內容
 $this->load->view('index',$data);
引入master page,並把變數傳過去

C 與 V 內容
controllers/signup.php
Class Signup extends Controller{
 function signup(){
  parent::Controller();
 }
 function index(){
  $data['content'] = 'home';
  $this->load->view('index',$data);
 }
}

views/index.php => 內容太多只貼修改的
<head>
...
<base href="<?php echo $this->config->item('base_url') ?>public/"/>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
...
<div id="content">
            <?php $this->load->view($content); ?>
</div>

views/home.php
123

語法說明
$this->load->view('index',$data);
index => 引入view的檔名 ( application\views\index.php )
$data => 變數傳到VIEW內,但會做轉換

舉例:
$data['content'] 到 view 後,view可以得到 $content的變數
如是陣列 $data['iamary'] = array( 1,2,3,4,5 );
view會得到 $iamary = array( 1,2,3,4,5 );

總結
透過master page,可以以最少的CODE來變更網頁內容
並且讓靜態部分的修改與以往無異;
透過baseurl的指定,讓引入檔案路徑可不做修改使用,也保留網站修改彈性
簡介view的變數與引入方法

目前為止,已經可以開始寫程式了(握拳)
但是好像沒用到Model...對,MODEL主要用在對資料庫的存取等,目前並不需要。

[CodeIgniter] Controller

準備工作完成後,可以開始寫主體了XDD
控制的核心Controller
Class Signup extends Controller{
 function signup(){
  parent::Controller();
 }
 function index(){
  echo "123";
 }
}

有幾點須注意
  1. 檔名與CLASS名稱相同,但請都用小寫
  2. CLASS名稱第一個字須大寫
  3. 需有一個與CLASS同名的function作為constructor <= 可以解釋為初始設定
    這個controller要先載入的東西都可以丟這,但是最重要的第一行要寫parent::Controller();
  4. function index 則是預設執行,如果網址只指定controller的話。


網址的意義
很突然要來補充一下CI的網址意義,不然會越來越混亂
http://127.0.0.1/ci/signup/index/
  • http://127.0.0.1/ci/ <= 基底網址,在config.php設定
  • signup <= Controller
  • index <= Controller內的function,如果要使用index,則可不寫
再來幾個範例
http://127.0.0.1/ci/form/add/  <= 使用 form conreoller 內的 add Function
http://127.0.0.1/ci/admin/post/  <= 使用 admin conreoller 內的 post Function

打開http://127.0.0.1/ci/signup/,可以看到'123' 表示一切正常。
目前已經使用到MVC架構中的C了。
或許有 "做這麼多步驟 我一行就可以搞定了" 的感覺,請繼續看下去,之後才知道MVC的好用之處。
使用 form conreoller 內的 add Function

[CodeIgniter] 網站準備工作

CI的文件看的差不多了,該來實際寫一個網站才能知道自己懂多少
於是設定寫一個活動報名網站,功能很簡單
首頁是所有活動列表,進去後使用者可以報名參加
藉此可以練習FORM與資料處理的功能
管理者可以到後台新增活動,檢視報名資料,製作表單等
功能很簡單,但已經囊括大部分PHP常用功能,也可與我之前開發經驗做對比
引言就到這,開始準備設定值
===========================
  1. 裝好Appserv (Apache + PHP + Mysql + phpmyadmin)
    由於是開發環境,直接用整合包比較方便;使用2.5.10版本
  2. 下載CodeIgnitor,目前版本為1.7.2
  3. 解壓縮檔案到\www\ci,結構應為
    www\ci\
        system\
        user_guide\
        index.php
        license.txt
    其中user_guide可以刪除
  4. 移除index.php,
    如果不喜歡網址出現index.php (ex:http://127.0.0.1/ci/index.php/signup/index/),可作以下設定移除。

  5. 新增.htaccess檔案,內容如下
        RewriteEngine on
        RewriteCond $1 !^(index\.php)
        RewriteRule ^(.*)$ index.php/$1 [L]

    大致意思是,如果網址有index.php就跳過,其餘都改寫成index.php/網址接的東西,這樣講聽的懂才有鬼
    http://127.0.0.1/ci/index.php/signup => 有index.php,跳過
    http://127.0.0.1/ci/signup                  => 改寫為 http://127.0.0.1/ci/index.php/signup

  6. 修改config,檔案在www\ci\system\application\config\config.php
        $config['base_url']    = "http://127.0.0.1/ci/"; 
        //原本是 $config['base_url']    = "http://www.example.com/";
        用意讓CI知道你網址是啥,內容的連結都會自己加上這串基底網址

        $config['index_page'] = "";                               
        //原本是 $config['index_page'] = "index.php";
       
        也是產生連結的基底。如果要連結到signup
        原本設定會產生http://127.0.0.1/ci/index.php/signup
        改為空值會產生http://127.0.0.1/ci/signup
       
    網址看起來比較乾淨 ( 我以前是用 index.php?op=signup ),且容易被搜尋引擎搜尋到。

  7. 如果打開網頁出現錯誤,請修改Apache Config 開啟mod rewrite功能
    Apperv\Apache2.2\conf\http.conf
    #LoadModule rewrite_module modules/mod_rewrite.so  //把#字號移除

  8. 接下來要設定DB,修改Application\config\database.php
    $db['default']['hostname'] = "localhost";
    $db['default']['username'] = "signup";
    $db['default']['password'] = "123456";
    $db['default']['database'] = "signup";
    $db['default']['dbdriver'] = "mysql";
    

    這邊是測試,所以密碼非常不嚴謹XDD

  9. 建立DB: signup 與table: event, joiner
    event 記錄活動資訊,joiner記錄報名資訊。以下結構可參考
    CREATE TABLE `event` (
     `sn` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
     `topic` VARCHAR( 50 ) NOT NULL ,
     `desc` VARCHAR( 250 ) NOT NULL ,
     `start_time` DATETIME NOT NULL ,
     `end_time` DATETIME NOT NULL ,
     `joiner_no` INT NOT NULL
    ) ENGINE = MYISAM ;
    
    CREATE TABLE `joiner` (
     `sn` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
     `name` VARCHAR( 20 ) NOT NULL ,
     `sex` ENUM( 'm', 'f' ) NOT NULL ,
     `mobile` VARCHAR( 10 ) NOT NULL ,
     `event_sn` INT NOT NULL ,
     `time` DATETIME NOT NULL
    ) ENGINE = MYISAM ;
    

基礎設定到此完成,下一篇要來引入CSS Template使用

2010/01/27

[單車] 今日20km軌跡


在較大的地圖上查看2010 01 27


[魚缸] 計泡器破了

P1010935.JPG
想說怎麼一秒五顆PH還是沒降下來,開這麼大還是不行
才發現計泡器有裂痕,難怪PH降不下來,因為根本沒有打進細化器

P1010936.JPG
就裂在裡面,哀~這個要快兩百= =

2010/01/23

[魚缸] PH控制器入手

P1010931.JPG
治療黑毛藻一直都很不徹底,一不做二不休就買PH控制器來想根治
很意外的居然很大台!!

P1010929.JPG
跟我的溫度計比起來超大台的= =
(6.2是我缸子的PH值 好像有點低)

第一次使用要先對表作校正,調整PH7 跟 PH4的數值
之後選擇是要現在數值高過設定值啟動(HI),還是低於(LO)啟動
我是用co2控制所以選擇HI,設定值為6.0,讓缸內的PH再降低達穩應值藉此消除黑毛

P1010932.JPG
設備越來越多了~哭哭

安靜的掛鐘

P1010934.JPG
時間對我很重要,重要到房間我都想掛一副鐘隨時看時間
但是掛房間絕對不能有聲音,不然睡覺會被吵死
於是找到這一個靜音的連續時鐘,完全沒聲音,而且還不到兩張國父

2010/01/15

[水族] 兩蝦缸+魚缸紀錄


1.5尺魚缸

上視圖


1.5尺方缸-水晶蝦品種篩選缸

上視圖-MOS清掉一大把


1.2尺水晶蝦缸

上視圖,一堆小蝦

2010/01/14

[手作] 自製照片桌曆

P1010884-1.JPG
今年沒有廠商送我漂亮的桌曆,只好自己來做一個
樣式參考了去年蛙大的設計,因為也用習慣了
紙張是用A5,A4對半就是了 很好取得;底座就重複使用去年的 安呢卡環保

P1010885-1.JPG
加上自己的Logo

P1010886-1.JPG
日期的另一面就是自己拍的照片,哈

2010-01-14_104426.jpg
每個月分都是不同的照片~哈

我轉成PDF檔 http://www.badongo.com/file/19736966

2010/01/12

[魚缸] 消除黑毛藻大作戰


消除黑毛藻一直是我的夢靨阿~~~
起先只使用翠湖的黑毛藻剋星,但是沒啥大作用
在網路上看到有人用藍色玻璃紙來治療
拿一尺半來實驗,大約兩個禮拜還真的沒看到黑毛藻了
現在換治療頗嚴重的兩尺缸

作法如下:關CO2、減光、加上藍色玻璃紙、每天加翠湖黑毛藻剋星
目前過一個禮拜左右,有改善的跡象所以記錄一下

圓葉網草


細葉水羅蘭 最嚴重就這兩顆 已經快接近掛點了

30元水草也很嚴重

這缸魚口多,又是使用T5燈 可能得久一點吧 囧rz...

2010/01/07

[CI] 引入外部連結CSS, img etc...

使用$this->load->view( 'your file' )時
如有引入CSS或是Image時,會有不知道該把檔案放哪及路徑如何指向的問題
爬了幾個文後發現這樣改最不會動到原始設定
先說明實驗路徑
/CI
    index.php
    /public     <= 放CSS Images之類的
        /images
        /js
           style.css
    /system
    /application

把所有引入檔案集中到根目錄 index.php 同層的public資料夾(你可以自己取)
然後在引入的VIEW中<head>間增加一行
<base href="<?php echo $this->config->item('base_url') ?>public/"/>
修正:上行寫法會造成網頁所有連結都會以public開頭,反而更麻煩
<base href="<?php echo $this->config->item('base_url') ?>"/>
這樣引入的CSS寫法為
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
修正:因 base url 修改,需將css引入路徑加入public目錄
<link href="public/style.css" rel="stylesheet" type="text/css" media="screen" />
CSS內影像的連結語法
background: #F7F7F7 url(images/img01.jpg) repeat-x left top;
完工!
註:如果這樣無法正常顯示,請檢查config/config.php內
$config['base_url']    = "http://127.0.0.1/guestbook/";
是否與你的網站相同(原始設定是http://example.com/)

2010/01/06

[CI] CodeIgniter : 看起來很簡單的Framework

有感於開發PHP程式會讓HTML跟PHP原始碼混雜
造成網頁後期修改很難維護,加上想加快開發的速度
就研究一下PHP的Framework;第一個使用的是CAKE
但是CAKE實在好慢...簡單的ECHO都可以跑好幾秒= =
加上文件很多又都是英文,夾雜一堆超複雜的東西,就放棄了

再次GOOGLE發現CodeIgniter這套主打輕量級的Framework
主要說明文件花兩小時就看完了,感覺非常容易上手
我希望能把我這陣子學習的東西整理上來,作一個學習軌跡

[官方網站]  CodeIgniter - Open source PHP web application framework
這個我沒用過,能不看英文就跳過= =


[中文非官方網站]  CodeIgniter 繁體中文- 中小企業的救星,開發人員的福音
→這是由非常熱心的appleboy架設的,說明手冊幾乎都是中文,加上有論壇可討論,請加入我的最愛。

[安裝說明] http://doublekai.org/docs/CI_Install_Guide/CI.html
中文手冊也有說明,但是這篇文章寫的非常好懂


[Master Template] http://codeigniter.com/forums/viewthread/130568/
網頁通常會把非主要HTML切開,像Header Foot的HTML會另外放,再用include把檔案抓進來,不會讓檔案漏漏長。

但在使用VIEW時要在每個Function Load各個View很麻煩,所以這篇文章有提出樣板解決方法。

2010/01/03

[遊記] 劍湖山遊樂園



一小時就決定的行程,真是很突然阿~哈哈

因血滴想出去走走拍照,就提議想去台北到彰化之間的景點走走

隨口說出去劍湖山,就這樣成行了



早上就搭高鐵到台中,血滴開車直接殺到劍湖山

大約九點就到了@@

早到真是不錯,所有遊樂設施都不用排隊,所以中午前就把所有的遊樂設施玩完了XD

遊樂園沒啥點可以拍的,所以就寫一些很讓我注目的東西XDD





裡面的兒童館,天花板是一大片的LED,還有飛機飛來飛去!





一飛沖天,還真是刺激;下來手腳都會發抖= ="





很長很長的電扶梯...不知道跟忠孝復興比哪個比較長





主打的飛天潛艇G5,上面紫色那個是軌道;所以會鑽進地底



90度的下去= = 而且非常的高

下區之前還會讓你跟地面重直停住,享受無重力(?!)的快感



出來的軌道,整個過程很短,大約一分半結束

衝下去的那一刻真的超可怕= =|||



最後要回去的時候,經過台灣咖啡館

這棟氣氛營造的真好,很值得去看看



現場可以喝咖啡,還有LIVE演唱,好像來到PUB



大圖輸出真的好棒,恍若置身於凱旋門前,那個桌椅是可以坐的



一整排的咖啡杯,家裡這樣裝潢也很棒!

2009 跨年影片 Youtube版








我把HD版的傳上YOUTUBE了,可以點連結連過去以HD格式播放

2010/01/01

2009跨年


下班後約五點多就往信義區移動,人潮已經蠻多了
而且,市政府的捷運站何時變的= ="


一排的行動基地台,怕被打爆吧!


主舞台區,搖滾區已經滿了 囧
這次多了兩個美國棉氣球在那晃,很討厭


遠在天邊的廣告看板也立即轉播TVBS的畫面


滿滿都是人....




五月天唱完接近跨年時刻,還發射了一堆紙片
很不環保又難清 不知道在想啥

煙火秀在此,PIXNET不支援HD阿= =,我在傳去YOUTUBE好了

放完煙火 台灣起來!


散場時活屍禁區的畫面少不了,今天是我參加第四次,也是人最多的


整條忠孝東路都是人,從市政府一直延伸到敦化站才慢慢恢復讓車走。
走回學校已經一點多了,站了快六小時+走路一小時
腿快廢了

鬧鐘沒響,所以五點半才出發去總統府升旗
但是...

怎麼升旗搞的跟跨年晚會沒兩樣,根本進不去阿= ="


中間那個亮亮的是主舞台區,跟我很遙遠= =
圍巾也早就發完了 囧
最後也沒升旗回家看轉播比較實際

[敗家] Wii Resort Get!!

P1010731.JPG

就降