Introduction to MVC of CodeIgniter 2.1.x

CodeIgniter 基礎介紹

吳柏毅 Bo-Yi Wu
2012.02.11
http://blog.wu-boy.com/

今天如果任何問題

請直接打斷講課過程

2

大家都會有個疑問
又不是 PHP 功能寫不出來
為什麼要多學一套 Framework
( 都直接硬幹 ... 寫 Code)

3

為什麼使用 PHP Framework
● 團隊合作 ( 不管是公司或者是 Soho)
– Coding Style (Code 不會亂寫 )
– 目錄結構 ( 檔案不會亂放 ?)
● 快速開發 ( 站在巨人的肩膀上寫 Code)
– 一堆內建功能模組
● 分頁 , 驗證碼 , 多國語言 ...
– 網路上一堆 Plugin( 大家很熱心 )
● SMS,Twitter,Youtube,Template,Plurk .. API
– 安全性高 (Open Source 好處 )
4
– 程式碼更精短 ( 下一頁解說 )

過去都是這樣

$user = (isset($_GET['user'])) ? $_GET['user']:$_POST['user'];

Framework 寫法
$user = $this->input->get_post('user', true);

過慮 XSS 及 SQL Injection 5

過去的網站

最新消息
最新消息 News.php

關於我們
關於我們 About.php
公司網站
公司網站

產品資訊
產品資訊 Product.php

聯絡我們
聯絡我們 Contact.php
6

新聞模組設計

新增新聞
新增新聞
Add

Delete 刪除新聞
刪除新聞 MySQL
News.php
Edit 修改新聞
修改新聞

news.php?mode=[add|delete|edit]&news_id=xxxx 7

$action = (isset($_GET['mode'])) ? $_GET['mode'] : 'add';
switch($action)
{
case 'add':
echo 'add news';
$sql = “insert into xxxx values('aa', 'bb')”;
case 'edit':
echo 'edit news';
$sql = 'update xxx set xxxx where id = “1”';
case 'delete':
echo 'delete news';
$sql = 'delete xxx where id = “1”'; 8

}

以前的作法

● CSS, Html, Javascript, PHP 全部寫在一起
– 系統漏洞
– 維護困難
– 擴充性差
– 多人開發
– 開發速度慢

9

共同開發困難最大原因是

每個人 Coding Style 不同

10

Why use PHP Framework?

為了解決程式設計師共同問題
維護套件，快速閱讀程式碼
所以 PHP Framework 誕生

11

使用 Framework 設計

12

PHP 物件導向

class News {
punlic function __construct() {}
public function add() {}
public function edit($news_id) {}
public function delete($news_id) {}
}

13

太多 PHP Framework

14

這麼多套 PHP Framework
為什麼最後選擇用
CodeIgniter

15

初學者必用 CodeIgniter

● 無敵懶人安裝 ( 好安裝 , 好移轉 )
● 簡單目錄架構 ( 容易了解原始碼 )
● 基礎 MVC 架構 ( 日後可跳其他 Framework)
● 高效能
– 上網搜尋即可發現分數及評價都非常高

16

最後還有最重要的一項

17

台灣程式設計師最大問題

18

不喜歡看英文文件

19

CodeIgniter 繁體中文教學文件
不必怕看不懂 ( 都是中文 )
不必怕解決不了問題 ( 有論壇 )

20

What is CodeIgniter ?

Open Source Web Application Framework

MVC (Model View Controller) Architecture

21

MVC Architecture
Database LAYOUT

MODEL View

Controller

ROUTES

WEB SERVER

22
Client BROWSER

MVC
View (views/product.php)
<html>
View <body>
<p>Product Count:<?=$count?></p>
</body>
</html>
Controller (controllers/product.php)
function showProduct($id) {
$this->load->model(“product”);
Controller $count = $this->product->getCount($id);
$data[‘count’] = $count;
$this->load->view(“product”, $data);
}
Model (controllers/product.php)
function getCount($id) {
$this->db->where(“id”, $id);
$this->db->from(“my_product”);
Model $query = $this->db->get();
23
return $this->num_rows();
}

安裝 CodeIgniter

● Windows(5 分鐘安裝完成 )
– 下載 CI 原始 Zip 檔案
– 解壓縮到網頁根目錄
● Linux
– 安裝 Apache PHP MySQL
● Ubuntu, Debian 透過 apt
● FreeBSD 透過 ports

24

Windwos 安裝

懶人安裝包

Windows+Appserv+CodeIgniter 2.1.0

下載 + 解壓縮 =100%
25

作業一
● 在自己電腦架設 CodeIgniter 2.1.0
● 設定 Virtual Host 對應 CI 目錄
● 打開網址 http://ci.localhost/ 看到歡迎畫面
● 進階作業
– 在 github 開新的 Repository
– 將 CI 原始碼 push 到 github

27

Application Flow Of CodeIgniter

28

CodeIgniter 架構

application
– 網站所有資料
system
– CodeIgniter 核心目錄
user_guide
– 說明文件
index.php ( 網站 index)
29

根目錄 index.php

● $system_path
– 核心目錄
● $application_folder
– 專案網站目錄

30

CodeIgniter application 目錄
● cache( 快取檔案目錄 )
● config( 網站設定檔 )
● controllers( 控制器 )
● core( 擴充核心目錄 )
● errors(404,403 網頁 )
● helpers( 擴充 helper 核心 )
● libraries( 網站模組 )
● models(Database 檔案 )
31
● views( 前端 js,html 檔案 )

CodeIgniter URL 介紹

● example.com/index.php/class/function/ID
– 控制器 (controller) 啟動的類別 (class)
– 類別的函數 (function) 被呼叫使用
– 任何變數要傳遞給控制器 (controller) 所使用

example.com/news.php?mode=edit&id=10

32

移除網址列 index.php

● Apache mod_rewrite module
– 利用 .htaccess 移除 URL 包含的 index.php

RewriteEngine on
RewriteBase /
RewriteCond $1 !^(index.php|assets|robots.txt|$)
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

33

加入副檔名 ( 小技巧 )

example/index.php/products/view/shoes.htm

修改設定檔 application/config/config.php
$config['url_suffix'] = '.htm';

34

Controller( 控制器 )

● 控制器 (Controller) 簡單來說就是 class 檔案
● 放置目錄 application/controllers/

35

撰寫 Hello World
<?php
class Blog extends CI_Controller {
public function index()
{
echo 'Hello World!';
}
}
example.com/index.php/blog/index
?>
36

加入 URL 參數
<?php
public function edit($blog_id)
{
echo $blog_id;
}
} example.com/index.php/blog/edit/14
?>
37

預設的控制器

● 開啟 application/config/routes.php
– $route['default_controller'] = 'blog';

38

物件導向基礎 ( 私有函數 )

● Public
● Protected
● Private

private function _utility()
{
// do some code
}
大家可以透過瀏覽器看看 39

類別建構子
<?php

public function __construct()
{
parent::__construct();
// Your own constructor code
$this->load->helper('url');
$this->load->library('email');
}
}
?>
40

Default Controller
● example.com/index.php/welcome/index
● example.com/

● 修改設定檔
– application/config/routes.php
– $route['default_controller'] = 'welcome';

41

作業二
● 新增 Controller News
– 包含 3 個 method: add, delete, edit
– 將預設 controller 改成 news
● 移除網址 index.php
● add method
– 傳入 $title,$comment
● delete method
– 傳入 $news_id
● edit method
42
– 傳入 $news_id,$title,$comment
● 加分作業 : 開新 git branch 並且 push

CodeIgniter View

● 目錄 application/views/
● 可以任意將 html 放入上述目錄中

43

如何載入 View

● 格式 $this->load->view('file_name');
● 格式 $this->load->view('folder/file_name');
<?php

function index()
{
$this->load->view('blogview');
}
}
?>
44

新增動態資料到 View

● 格式 $this->load->view('file_name',$data);

$data = array(
'title' => 'My Title',
'heading' => 'My Heading',
'message' => 'My Message'
);

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

45

Views 顯示資料
● 顯示格式如下
<html>
<head>
<title><?php echo $title;?></title>
</head>
<body>
<h1><?php echo $heading;?></h1>
<hr>
<div><?php echo $message;?></div>
</body>
</html>
46

迴圈用法
● Controller 主程式
<?php

function index()
{
$data['todo_list'] = array('1', '2', '3', '4');
$data['title'] = "My Real Title";
$data['heading'] = "My Real Heading";
$this->load->view('blogview', $data);
}
}
?>
47

<html>
<head>
<title><?php echo $title;?></title>
</head>
<body>
<h1><?php echo $heading;?></h1>
<h3>My Todo List</h3>
<ul>
<?php foreach($todo_list as $item):?>
<li><?php echo $item;?></li>
<?php endforeach;?>
</ul>
</body>
</html>
48

將 views 內容存到變數

● 格式 $this->load->view('file_name',$data, true);
● 範例如下 :
– $output = $this->load->view('myfile', $data, true);
– echo $output;

49

作業三

● 將作業二輸出部份全部轉移到 views
● 將網頁設計多重 view
– 包含 header,footer,menu,content

50

CodeIgniter Library and helper

● Library
– 它就是 Class 集合
● Helper
– 它就是 function 集合
● 載入 Library 類別
– $this->load->library('email');
● 載入 Helper 輔助函數
– $this->load->helper('url');
51

使用 Input Library

● POST, GET,COOKIE, 或 SERVER 資料
– $this->input->post('name')
– $this->input->get('name')
– $this->input->cookie('name')
– $this->input->server('name')
● 取得 POST 或 GET 資料
– $this->input->get_post('name')
● 第 2 參數設定為 true 防止 xss 攻擊 ( 過濾 )
52
– $this->input->get_post('name',true)

使用 Input Library

● $this->input->ip_address()
– 目前使用者 IP Address
● $this->input->valid_ip($ip)
– 驗證 IP 是否合法
● $this->input->user_agent()
– 目前使用者瀏覽器資訊
● $this->input->is_ajax_request()
– 判斷是否是 AJAX request
53

作業四

● 寫一個 Form 包含 title,author,comment 欄位
● 送出後顯示在另外網頁或同一頁

54

CodeIgniter Models

● 目錄 : application/models/
● application/models/user_model.php

class User_model extends CI_Model {

public function __construct()
{
}
}
55

簡單 model 寫法
class Blog_model extends CI_Model {
function __construct()
{
// Model 建構函數
}
function get_last_ten_entries()
{
…............
}
function insert_entry()
{
…............... 56
}
}

載入 Model

● 格式 $this->load->model('Model_name');
● 範例
– $this->load->model('Model_name');
– $this->Model_name->function();
● 重新命名物件
– $this->load->model('Model_name','fubar');
– $this->fubar->function();

57

controller+model+view
class Blog_controller extends CI_Controller {
function index()
{
$this->load->model('blog_model');
$data['query'] = $this->blog_model->get_news();
$this->load->view('blog',$data);
}
}

58

連接資料庫
● 修改 application/config/database.php
– $db['default']['hostname'] = 'localhost';
– $db['default']['username'] = 'XXXXXX';
– $db['default']['password'] = 'XXXXXX';
– $db['default']['database'] = 'XXXXXX';
– $db['default']['dbdriver'] = 'mysql';

59

快速入門
$query = $this->db->query("YOUR QUERY");
if ($query->num_rows() > 0)
{
foreach ($query->result() as $row)
{
echo $row->title;
echo $row->name;
}
}
60

Database Active Record
● 查詢資料 (Selecting)
● 新增資料 (Inserting)
● 更新資料 (Updating)
● 刪除資料 (Deleting)

61

Active Record(Insert)
$data = array(
'title' => 'my title' ,
'name' => 'my name' ,
'date' => '2011.04.16'
);

$this->db->insert('table_name', $data);

產生 :INSERT INTO table_name (title, name, date)
VALUES ('my title', 'my name', '2011.04.16')
62

作業五

● 請新增資料庫 your_database
● 新增資料表 user
– user_id, user_name, user_company
● 新增資料表 news
– news_id, user_id, news_title, news_message
● 新增兩個 model, 利用 Form 傳職新增到資料庫

63

Active Record(Select)
● $query = $this->db->get('table_name');
– 產生 :SELECT * FROM mytable
● $query = $this->db->get('mytable', 10, 20);
– 產生 :SELECT * FROM mytable LIMIT 20, 10

64

● 利用 select + get 查詢
– $this->db->select('title, content, date');
– $query = $this->db->get('mytable');
● 利用 select + from + get 查詢
– $this->db->select('title, content, date');
– $this->db->from('mytable');
– $query = $this->db->get();
● SELECT title, content, date FROM mytable
● 加上判斷條件 where
– $this->db->where('name', $name);
– $this->db->where('title', $title);
65
– $this->db->where('status', $status);

回傳查詢值 (Result)

● 多筆資料 ( 常用 )
– result() 物件
– result_array() 陣列
● 單筆資料
– row() 物件
– row_array() 陣列

66

資料顯示 ( 物件 )
{
foreach ($query->result() as $row)
{
echo $row->title;
echo $row->name;
echo $row->body;
}
}
67

顯示資料 ( 陣列 )

{
foreach ($query->result_array() as $row)
{
echo $row['title'];
echo $row['name'];
echo $row['body'];
}
} 68

作業六

● 將 user 及 news 資料表內容顯示出來
– 新增 user_model 及 new_model 獨立 method
– 將資料顯示在 view

69

Active Record(Update)
$data = array(
'title' => $title,
'name' => $name,
'date' => $date
);

$this->db->where('id', $id);
$this->db->update('mytable', $data);

產生 : UPDATE mytable SET title = '{$title}', name =
'{$name}', date = '{$date}' WHERE id = $id

70

作業七

● user 及 news 資料表編輯功能
– 在 views 顯示編輯按鈕
– 點選後將該比資料帶入到 Form
– 按下送出更新該筆資料後並回到 list 頁面

71

Active Record(Delete)

● $this->db->where('id', $id);
● $this->db->delete('mytable');
– DELETE FROM mytable WHERE id = $id

72

作業八

● user 及 news 資料表刪除功能
– 在列表顯示刪除按鈕
– 點選後提示是否刪除該筆資料
– 按下確定後刪除資料並回到 list 頁面

73

Active Record(join 表格 )
$this->db->select('*');
$this->db->from('blogs');
$this->db->join('comments', 'comments.id = blogs.id', 'left');
$query = $this->db->get();

產生 :SELECT * FROM blogs LEFT JOIN comments ON
comments.id = blogs.id

74

作業九

● Join 兩資料表 user 及 news 並顯示
– 左邊選單 :
● 發表新聞
● 新增作者
● 新聞列表 ( 檢視 , 更新 , 刪除 )
● 作者列表 ( 檢視 , 更新 , 刪除 )

75

CodeIgniter command line

● 透過 command 去執行 cron-job
● $this->input->is_cli_request()
– 判斷瀏覽器是否可以執行
● 動態改變權限、清除 cache 目錄、執行備份
● 整合其他語言 (Perl,Python..)

76

使用方式

php index.php Controller function

php index.php tools message

77

CodeIgniter Cache 快取

● 在 controller 任何地方都可以加入
– $this->output->cache(n);
– n 代表分鐘
– 只有在 $this->load->view('name'); 做用
● cache 目錄預設在 application/cache
● 可以在 application/config/config.php 更改路徑
● 更改 application/cache 權限 (Apache 使用者 )
78

今天課程就到這裡

大家有沒有任何問題

http://www.codeigniter.org.tw/forum/

79

參考資料

● CodeIgniter 使用手冊版本 2.1.0
– http://codeigniter.org.tw/user_guide/
● 部落格技術教學
– http://blog.wu-boy.com/tag/codeigniter/

80

Introduction to MVC of CodeIgniter 2.1.x

More Related Content

What's hot (20)

Similar to Introduction to MVC of CodeIgniter 2.1.x (20)

More from Bo-Yi Wu (20)

Recently uploaded (20)

Introduction to MVC of CodeIgniter 2.1.x