謝謝大家支持，本站內容已搬到mr.mu設計工作室，請移駕! 感謝!~

閱讀全文

[圖片來源:blog.sharkspace.com]


最近遇到想做SEO的客戶，因為該客戶現有的網站選單，主要以Flash製作，觀看網站的原始碼就很容易了解spider應該很難分析全站的架構。不過因為該站經營三、四年了，除了要修改選單為適合SEO的方式，我想最好也要保持選單與視覺設計的一致性，除了不要破壞視覺識別，也希望讓操作性的影響降到最低。

很直覺的，我使用了jQuery這個javascript函式庫，設計了一組選單，在色系與動畫的呈現上幾乎與原先的Flash選單有90%的相似度，當然原始碼呈現出來的是完整的選單結構，也使用了標準的HTML。

客戶一開始被CSS的把戲搞混了，宣稱這些選單使用的是圖片，後來經過一番解釋才說服他 (我請他另存圖檔下來寄給我，但這當然辦不到，因為那是用CSS做的效果。)後來，客戶也許出於擔心又問了：這樣符合SEO的原則嗎？

的確，對SEO有概念的人都知道，spider不會剖析javascript的內容。遇到script標籤，spider會停工直到遇見script的結尾標籤，spider很忙很忙的，它根本不想看這麼一堆跟網站架構無關的code。因為這種特性，出現了「如何擺放script標籤」的說詞，有人宣稱放在head，先讓spider看到的話，它會比較不愛這個頁面，也會對script接下來真正的網頁資訊感到興趣缺缺，所以可以將script放在body。

將script放在body一樣是可以運作的，但這種說法是不可信的，因為spider會先取得整個page的資訊，才開始進行分析，之所以專家建議將script放在head，是一種類似coding standard的習慣，讓code整齊乾淨兼易讀。

所以，如果有一大串javascript需要匯入使用，像是使用jQuery這種函式庫，讓怎麼維持SEO呢？通常我們要用內容較多的js檔時，會將它設為外部檔案再行匯入，jQuery也不例外，使用語法如下：

如果網頁的內容與架構不是儲存在外部的.js檔內，那您大可放心，spider會看的是接下來的網頁內容，它不會理會script標籤。但是呢，因為spider真的很忙很忙，如果要它對你的網站印象好一點，不妨撰寫robots.txt放在網站的根目錄，指出這個外部js檔不需spider分析了，幫助它減輕工作負擔，我想對SEO也是有莫大的幫助。

閱讀全文

其實CodeIgniter的官方使用者手冊就已經有很多詳細的說明了，但一定也有人跟我一樣，希望有更詳細的書本，可以掌握的更完全。
前幾天發現有個網站可以下載很多免費的原文電子書，裡面也有一本Professional CodeIgniter可以下載，真的...嗯...很囂張的感覺XD。

雖然這本書的評價不是非常好，而且版本有點舊了，不過有總比沒有好....XD
話說這本書的電子檔實在不難找，其實隨便拜一下Google就有了...

這裡就是rsebook.com提供的Prof. CodeIgniter電子書載點了，喜歡的話還是要買書支持哦!!

閱讀全文

[圖片來源: CodeIgniter.com]

CodeIgniter是一套簡單、快速的PHP Framework，因為採用MVC的概念，所以能讓中、大型網站專案的架構變得漂亮乾淨許多，最近有空又開始試玩它，建議剛入門的同學可以先到官網跟著教學影片run幾次，尤其是20分鐘建立Blog的例子，實際跑過幾次流程，認識一下Controller跟View之間的互動方式。

耶，為什麼只提到Controller跟View呢？Model呢？是的，那個範例並沒有使用到Model，它是將取得資料的動作，直接寫在Controller了。其實寫CodeIgniter，並不用強制一定要M、V、C都使用，如果網站很單純，只要有C (只要有心...)，V跟M都能被實作在C裡。跑過教學影片的同學一定有印象，Controller就是一堆PHP的Class，一個繼承Controller類別的Class，本身就像是一頁網頁，使用echo的方式就能達到View的效果，而在Controller直接呼叫像是 $this->db->get('db_table_name')的語法就能取得資料庫的資料了，就像範例那樣。

雖說Controller似乎能控制一切，但使用MVC架構的目的本來就是不想全部的code都搞成一沱，所以我們先來看看一個簡單的MVC例子，M,V,C都用。現在請先確定已經把CodeIgniter抓下來，並且放在Server目錄內了。

好的，首先我們先建立資料庫的資料，一切從簡，以下是SQL script，我建了一個名為test的資料庫，執行以下SQL會建立一個名為entries的資料表，欄位有id, title, body，再建立兩筆記錄:

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- database: `test`
--

-- --------------------------------------------------------

--
-- table： `entries`
--

CREATE TABLE IF NOT EXISTS `entries` (
  `id` int(16) NOT NULL,
  `title` varchar(64) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `body` varchar(128) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- data： `entries`
--

INSERT INTO `entries` (`id`, `title`, `body`) VALUES
(1, 'mrmu1', 'HiHi!~'),
(2, 'mrmu2', 'HIHIHI~'); 

再來準備Controller的部份，請在system/application/controllers目錄下建立blog.php，內容如下:

class Blog extends Controller {
  function __construct() {
    parent::Controller();
  }

  function index() {
    $data['title'] = "TitleT";
    $data['heading'] = "My PageT";
    
    //$data['query'] = $this->db->get('entries'); // A
    $this->load->model('blog_model'); // B
    $data['query'] = $this->blog_model->getdata(); // C

    $this->load->view('blog_view', $data);
  }
}

其中標示A的那行，就是官網的教學影片使用的方式，直接在Controller取得資料庫的資料，我們先把它註解掉，以B,C行來取代它，即是使用load->model的方式，把載入資料的事交給blog_model這個類別，而接著再使用blog_model裡的getdata()來取得資料。

對了，要記得載入database函式庫，讓我們能使用db相關的函式。要載入database這個函式庫您可以在Controller裡面加上這行 $this->load->database();，可以加在呼叫$this->db->get('entries');之前，最好是放在建構子中，這樣可叫用的範圍比較廣，不過您也可以像這個範例一樣，直接到system/application/config/autoload.php 找到 $autoload['libraries'] = array();，改成$autoload['libraries'] = array('database'); 這樣一來，它就會自動載入，您也就不用在Controller裡面額外加上load database的指令了。

接下來我們就來看看blog_model這個類別要怎麼寫。

請在system/application/models目錄下建立blog_model.php，因為我們只是要驗證一下，所以內容非常簡潔，如下：

class Blog_model extends Model {
    function Blog_model() {
        parent::Model();
    }
       
    function getdata() {
        $query = $this->db->get('entries');
        return $query;
    }
}

很簡潔吧，好，接下來就是把View的部份也建立起來，請到system/application/views目錄建立blog_view.php，內容如下：

// 從Controller傳來的heading變數
[?php echo $heading; ?]
[?php foreach($query->result() as $row): ?]// 一筆一筆讀出資料
  
  
[?php echo $row->title ?]
// 讀出title欄位的資料

  
[? php echo $row->body ?]
// 讀出body欄位的資料
 
  
//分隔線 
[? php endforeach; ?]

基本上，View就是一堆Html語法加上輸出一些PHP的變數，如此就完成了我們的MVC架構簡單範例了。

輸出結果：

My PageT

mrmu1

HiHi!~

---

mrmu2

HIHIHI~

---

*注意，如果出現了 Message: Undefined property: Blog_model::$db 就表示您沒有載入database這個函式庫，請參考上述作法加載。


CodeIgniter官網：http://codeigniter.com/
CodeIgniter官方教學影片：http://codeigniter.com/tutorials/

閱讀全文

其實jQuery本身透過.load函式就簡化了非常多傳統統AJAX的使用步驟，而EZJax外掛更加簡化，讓幾乎不懂AJAX原理與細節的人也能很容易的達成動態載入內容的功能，除了有助於搜尋引擎最佳化(SEO)外，在載入內容時也能安排一些滑動或漸入漸出的特效。

另外根據官網的說明，此外掛支援 IE6以上, FireFox, Safari, 及 Opera。先到EZJax官網下載EZJax，然後就開始試用吧!

要使用EZJax外掛，首先當然是載入EZJax：

下一步就是呼叫ezjax，進行初始化，然後就可以用囉：

$(document).ready(function(){
  $('.ezjax').ezjax();
});

接下來的code，就是動態載入123.html的內容到指定的區域，首先放一個class為ezjax的連結：

載入

我們希望點下連結後，會動態載入另一個頁面的內容，在想要秀出內容的地方放一個id為ezjax_content的div標籤就大功告成了：

閱讀全文