CodeIgniter是一套小巧但功能强大的 PHP 框架，它有完整且清楚的使用說明、使用族群眾多、有完善的社群與討論支援、不需安裝（解壓到網站目錄下即可）、執行速度快效率高、具有標準的MVC架構等等，相當適合個人及中小企業在開發時使用；我推薦它的主要原因有三點：一是安裝容易、二是它的學習門檻低，三是它的架構相當清楚，這三項優點對於剛接觸PHP的新手或正在找尋適用的PHP框架人員來說，是相當值得列入考慮的。
我在本文將介紹怎麼設置Codeigniter的開發環境，如何與Bootstrap進行整合，並且怎麼樣利用一些免費的Bootstrap樣版，快速製作出適用於手持裝置及PC的跨平台網站。
PHP是目前最流行的伺服端語言
PHP是目前最流行的後端網頁開發語言，大多數初跨入IT領域的人若是想要學習後端開發立刻聯想到的語言就是PHP，這個語言看似歷史悠久，但其實它也算是年輕的程式語言，約20年前1995年的時候，由丹麥程式設計師由勒多夫（Rasmus Lerdorf）所開發，它屬於開源的程式碼，使用PHP完全是免費的。
依據w3techs.com最新的統計資料顯示(2014年八月)，全球有高達82.2%的網站是使用PHP開發，其次為ASP.NET，再依次為JAVA與ColdFusion。
但是這個統計並不是嚴格的統計，因為只要網站有一部份使用到了PHP語法，便會歸到PHP，而實際上，大部份的Linux web伺服器在預設安裝時便已把PHP作為預設安裝選項了，因此這個統計值可能包含了很多架設於Linux web server的純HTML的網站，所以比例會偏高。另一個比較客觀的比例應該是PHP與ASP.NET的比例約在2:1左右（來源：http://trends.builtwith.com/framework）
我在開頭指出PHP使用比例特高的原因，並不在於強調PHP有多麼流行，而在於說明PHP作為一個普遍廣為使用的網頁語言，它不僅適用於剛入門的程式開發者，也適用於個人、團體及至於企業的網站用途；大陸知名的網站掏寶網於2003年成立時，就是用$2000美元購買了一套PHPAuction的網站樣本加以修改後推出的，這個LAMP架構的掏寶網站系統(Linux+Apache+mySQL+PHP)用到2004年初，商品累積到四百多萬、每日的PageView四千多萬、註冊會員人數400萬個、成交金額達10億人民幣後，mySQL因逐漸支撐不住才改換為Oracle Database，而當時的後端開發語言則一併由PHP更改為JSP；另外，下表的資料來自於維基百科，是一些知名網站所使用的前端與後端及資料庫的統計表（http://en.wikipedia.org/wiki/Programming_languages_used_in_most_popular_websites），其中Facebook一開始是單純的PHP網站，後來才加入其它開發語言的支援。
JavaScript
| |||
Flash, JavaScript
|
C/C++, Python, Java[8]
|
MySQL, BigTable
| |
JavaScript
|
PHP
| ||
JavaScript
| |||
JavaScript
|
ASP.NET
|
Microsoft SQL Server
| |
JavaScript
|
PHP
| ||
JavaScript
|
Python
|
BigTable
| |
JavaScript
|
ASP.NET
|
Microsoft SQL Server
| |
JavaScript
|
MySQL[12]
| ||
JavaScript
|
PHP
|
MySQL
| |
JavaScript
| |||
JavaScript
|
Java[13]
| ||
JavaScript
|
Java, Scala, JavaScript (Node.js)
| ||
JavaScript
|
CODEIGNITER環境設置
在開始之前，請先準備好一個可以執行mySQL 和 PHP的環境，如果您有Linux平台，那麼應該知道怎麼去安裝設定一個LAMP的環境，如果您是使用Windows的系統，您也可以下載安裝這些已包裝好且容易安裝設定的Windwos版LAMP軟體，如WAMP、WinLamp、EasyPHP等等。
下載CodeIgniter並解壓縮
CodeIgniter的網站在https://ellislab.com/codeigniter，中文版的位址在http://www.codeigniter.org.tw/，在其下載頁面目前最新的版本是2.2.0；下載之後解壓縮，將全部的檔案放置於我們網站的根目錄之下（如下圖，我們將CodeIgniter_2.2.0目錄下的檔案除了user_guide和license.txt用不到以外，全部皆放到C:\Apache2\htdocs\的預設網站目錄下的myNewWebsite這個新增的資料夾）。
在mysql新增資料
請開啟phpMyAdmin（在您使用LAMP程式安裝後，此網頁版的資料庫工具應該也會一併安裝），我們先建立一個稱為myweb的資料庫，再於其下建立一個名稱為users的資料表。
users這個表格共有四個欄位，您可以參考下方的圖示來手動建立，或者直接執行下方的SQL程式碼來產生。
users資料表產後後，我們輸入二筆資料，當然，您也可以複製下方的SQL碼來執行：
或者執行下方的SQL也可以新增此兩筆資料。
設定Codeigniter的開發環境
剛下載的CodeIgniter檔案，我們只需要更改二個檔案的內容，就完成了CodeIgniter環境的設定，可以開始使用了。
- 編輯C:\Apache2\htdocs\myNewWebsite\application\config\ config.php，修改$config['base_url']的內容如下：
$config['base_url'] = 'http://localhost/myNewWebsite/';
- 編輯C:\Apache2\htdocs\myNewWebsite\application\config\ database.php，將相關資料庫的資訊輸入，如此一來，我們在操作DB時便可直接在程式中呼叫，CodeIgniter會替我們處理其餘的動作：
基本上，作完上述步驟，CodeIgniter的基本環境便已經完成了，可說是相當的簡單；我們作個測試，在瀏覽器輸入http://localhost/myNewWebsite/網址後，就應該出現如下圖的頁面，這是CodeIgniter成功運作的預設畫面：
CODEIGNITER是如何運作的？
在下方我將介紹CodeIgniter的資料夾配置及運作方式和流程，有了這基本概念後，您就會對於如何在CodeIgniter環境下撰寫PHP程式有初步的概念。
Codeigniter的檔案配置
在剛剛解壓後的目錄下,您應該會發現C:\Apache2\htdocs\myNewWebsite的根目錄下有一個index.php，另外，我們比較關心的還有在application目錄下的controllers、models、views等三個目錄，它們分別代表了MVC架構（Model / View / Controller）的三個目錄，也是我們程式以及頁面主要放置的地方。
Codeigniter的運作流程
下圖是CodeIgniter運作的流程，下面我會說明這些主要的步驟，但是您不需要完全瞭解，只需要知道CodeIgniter在接收到使用者需求並回傳網頁之前，會替您作這些動作。
- 當使用者存取網站時，最上層的index.php這個網頁是CodeIgniter最前端的控制器，它會啟始化所需的資源並執行CodeIgniter。
- CodeIgniter的Routing程序（C:\Apache2\htdocs\myNewWebsite\application\config\routes.php）檢查使用者呼叫的網址，決定如何處理或導向。
- 如果在Cache（快取）中有被呼叫的檔案，則直接回傳給使用者，不需要往後傳送。
- CodeIgniter security檢查機制：在往後傳送給CodeIgniter Controller前，會先針對該HTTP Rrequest以上傳的檔案(如果有的話)進行檢查。
- CodeIgniter Controller載入model（資料庫）、core libraries、 plugins、helper以及其它與該HTTP Request相關的資源。
- 最後產生的View（html頁面）會傳送給使用者端，如果有啟用cache功能，則會將該頁面保留在cache中。
Codeigniter的MVC流程
請參考下方的流程圖：
- 最左方的BROWSER代表使用者，他發出了一個HTTP Request，此Request會先由Controller來接收。
- 若有需要資料的提供，Controller會發出請求請Model執行，Model執行後將結果回傳給Controller
- Controller收到Model提供的資料後傳給VIEW，VIEW產生所需的頁面並將相關的資訊放入，再將此頁面回傳給Controller。
- Controller收到VIEW製作好的頁面，將此頁面傳給使用者觀看。
我們會發現，Controller是整個MVC流程的核心所在，所有的動作都是由Controller發出，而Model與View這兩者之間並不會直接聯繫，都必須透過Controller；另外，我們必須留意到，CodeIgniter所需要的網址格式是由Controller的名稱加上功能名稱及參數組合而成；例如，一個標準的CodeIgniter網址是：
http://example.com/class/function/ID
第一段代表的是控制器(controller)啟動的類別(class)。
第二段代表的是類別(class)的函數(function) 或者是 method 被呼叫使用。
第三段之後，代表的是 ID 或是任何變數準備要傳遞給控制器(controller)所使用。
在稍後進行的範例中，您就會看到我們使用的網址格式。
CODEIGNITER與Bootstrap的整合
將BootStrap整合到CodeIgniter之後，我們就可以套用眾多的BootStrap樣版主題或者利用相關的css、javascript等等資源，快速的將網站的外觀進行美化。
整合Bootstrap
- 下載Bootstrap檔案並解壓：
- 解壓後有三個目錄，直接放在網站的根目錄（C:\Apache2\htdocs\myNewWebsite）下。
- 修改網站根目錄下.htaccess的內容：如果沒有此檔案請新增一個，檔案內容如下
為什麼我們要作這個更改？
RewriteRule ^(.*)$ index.php/$1 [L,QSA]
→ 把index.php這個檔案從URL中隱藏，讓網站網址更簡捷且更安全，例如，原先的網址如果為http://localhost/myNewWebsite/index.php/update_pwd，就可以縮短為http://localhost/myNewWebsite/ update_pwd
RewriteCond $1 !^(index\.php|images|css|js|fonts|robots\.txt|$)
→ 在縮短了網址之後，CodeIgniter可能會找不到原先放置於根目錄下的css, js, fonts等等目錄（會跑到controller下找），所以我們必須加入此行以宣告這檔案或目錄不受影響。
套用Bootstrap網站主題樣本
在這裏我先選擇中間那個主題樣本，按下Preview&Download，我們發現Bootstrap的主題樣本就是一個完整的網站，包含了整個網站所需的Bootstrap、JQuery、css等相關檔案。
- 我們依照前述的整合BootStrap的方式，將整個樣本的目錄放到網站根目錄之下。
- 您還記得上個章節中我們有修改.htaccess這個檔案嗎？由於這個我們在根目錄下除了css、fonts之外，還多了font-awesome-4.1.0、img這兩個資料夾，因此，我們必須再將這兩個資料夾名稱，放在RewriteCond中，以避免CodeIgniter找不到。
- 複製網站樣本的index.html內容到C:\Apache2\htdocs\myNewWebsite\application\views\ welcome_message.php
將BootStrap範本拆分為三大部份
接下來，我們將此網頁拆分為header、content、footer三大部份，content是我們主要的、會變動的內容，header與footer為不會變動的固定內容用include的方式自動引入，這樣的好處是，我們只要更改content相關的網頁，footer與header由於都是固定不變的內容，只要用引入的方式就可以了，可以大大減少網頁的體積，並且讓整體架構更清楚簡單。
- 在C:\Apache2\htdocs\myNewWebsite\application\views下新增一個pages資料夾，並在此資料夾下新增2個檔案：header.php與footer.php
- 用文字編輯軟體打開C:\Apache2\htdocs\myNewWebsite\application\views\ welcome_message.php，找到<body>標籤，將此標籤（含）剪下放置到header.php中。（如下圖紅框部份）
- 繼續針對welcome_message.php操刀，找到<footer>標籤，從此標籤（含）一直到最後全部剪下放置到footer.php中。（如下圖紅框部份）
- 用文字編輯軟體打開C:\Apache2\htdocs\myNewWebsite\application\controllers\welcome.php，將index() function的內容，再增加兩行來引入header.php 和 footer.php。（紅色部份）
- 改好後，我們再試看看，應該會出現同樣的畫面，只是這個畫面是由三個部份組合而成的。
呼叫MODEL取得資料
直到目前，雖然網站可以運作了，但是只有Controller與View在工作，我們還沒有使用到Model的功能；現在，我們打算讓網站從資料庫中抓出使用者的姓名，並顯示在主頁上。
- 我們在model的目錄下（C:\Apache2\htdocs\myNewWebsite\application\models），新增一個名稱為user_model.php的檔案，內容如下：
get_users這個function會替我們抓出資料庫的users這個表格中所有的資料，如果有傳入account的值，則僅會抓出這筆account的資料。
- 接下來，我們要在Controller中去呼叫這個model，請打開welcome.php這個檔案（C:\Apache2\htdocs\myNewWebsite\application\controllers\welcome.php），修改index()這個function的內容如下：（紅色為增加的部份）
首先，我們先宣告了要使用user_model，當controller載入頁面時(index()為預設會觸發的頁面)，會呼叫user_model得到資料，然後放到$data[‘users’]變數中。
$this->load->view('welcome_message',$data);
→ 表示當controller從view要載入welcome_message.php時，則把放有資料的$data傳過去。
- 最後，我們要來處理view下的welcome_message.php這個檔案以便接收Controller傳過來的資料，請找到<div class="intro-message">標籤，參考下方紅字部份進行修改：
有一點要特別注意的是，我們從Controller那邊丟過來的資料變數名稱是$data，但是在View接收時，data這層要移除（因為$data是默認的），因此，如果我們從Controller那邊定義的是$data['title'] = 'MODEL測試，那麼在View這邊接收時，只要用$title就可以了，同理，我們在Controller那邊將Model所傳回的資料以陣列Array的形式都放在$data['users']，所以我們在View要使用時，就要用$users[1]['realname'];來取得第二筆，欄位為realname的資料。（您可以用print_r($users) 這個function來檢視全部array的內容）。
執行結果如下，我們可以看到，
最後
如果您有依照上述的步驟來進行練習，您會發現我所示範的順序是：
解壓CodeIgniter到網站目錄下 → 將BootStrap檔案整合到CodeIgniter → Controller透過Model讀取資料並經由View顯示。
如果仔細觀察的話，您會發現在示範中的Controller名稱是welcome.php，那麼，您應該會有一個疑問（如果您有仔細閱讀的話），依照http://example.com/class/function/ID這樣格式的定義，我們輸入的網址不是應該為http://localhost/myNewWebsite/welcome才能呼叫welcome.php這個controller才對不是嗎？但我們在示範中使用的卻都是http://localhost/myNewWebsite/沒有Controller class名稱的網址？
其實祕密叫在CodeIgniter的config資料夾下面的routes.php檔案中，請把這個檔案打開來看，您會看到下面這行：
$route['default_controller'] = "welcome";
這行的功用就是，告訴CodeIgniter網址中若沒有指定的Controller，預設就載入welcome controller，所以這是為什麼我們只要輸入http://localhost/myNewWebsite/ 就會直接開啟welcome.php的原因了！而且當CodeIgniter載入welcome.php之後，它預設就會開啟index()這個function，而我們已經在index() function當中定義了要先透過model取得資料，再將資料丟到view去顯示（請參考第18頁），所以這是CodeIgniter route的功用之一哦，它可以縮短並簡化網址。
$this->load->view('pages/footer');
}
沒有留言:
張貼留言