Introduction to MVC of CodeIgniter 2.1.x

19,136 views
18,986 views

Published on

CodeIgniter 2.1.x MVC (Model, View and Controller)

Published in: Education, Technology

Introduction to MVC of CodeIgniter 2.1.x

  1. 1. CodeIgniter 基礎介紹 吳柏毅 Bo-Yi Wu 2012.02.11 http://blog.wu-boy.com/
  2. 2. 今天如果任何問題請直接打斷講課過程 2
  3. 3. 大家都會有個疑問 又不是 PHP 功能寫不出來為什麼要多學一套 Framework ( 都直接硬幹 ... 寫 Code) 3
  4. 4. 為什麼使用 PHP Framework● 團隊合作 ( 不管是公司或者是 Soho) – Coding Style (Code 不會亂寫 ) – 目錄結構 ( 檔案不會亂放 ?)● 快速開發 ( 站在巨人的肩膀上寫 Code) – 一堆內建功能模組 ● 分頁 , 驗證碼 , 多國語言 ... – 網路上一堆 Plugin( 大家很熱心 ) ● SMS,Twitter,Youtube,Template,Plurk .. API – 安全性高 (Open Source 好處 ) 4 – 程式碼更精短 ( 下一頁解說 )
  5. 5. 過去都是這樣$user = (isset($_GET[user])) ? $_GET[user]:$_POST[user]; Framework 寫法 $user = $this->input->get_post(user, true); 過慮 XSS 及 SQL Injection 5
  6. 6. 過去的網站 最新消息 最新消息 News.php 關於我們 關於我們 About.php公司網站公司網站 產品資訊 產品資訊 Product.php 聯絡我們 聯絡我們 Contact.php 6
  7. 7. 新聞模組設計 新增新聞 新增新聞 Add Delete 刪除新聞 刪除新聞 MySQL News.php Edit 修改新聞 修改新聞news.php?mode=[add|delete|edit]&news_id=xxxx 7
  8. 8. $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}
  9. 9. 以前的作法● CSS, Html, Javascript, PHP 全部寫在一起 – 系統漏洞 – 維護困難 – 擴充性差 – 多人開發 – 開發速度慢 9
  10. 10. 共同開發困難最大原因是每個人 Coding Style 不同 10
  11. 11. Why use PHP Framework?為了解決程式設計師共同問題 維護套件,快速閱讀程式碼 所以 PHP Framework 誕生 11
  12. 12. 使用 Framework 設計 12
  13. 13. PHP 物件導向class News { punlic function __construct() {} public function add() {} public function edit($news_id) {} public function delete($news_id) {}} 13
  14. 14. 太多 PHP Framework 14
  15. 15. 這麼多套 PHP Framework 為什麼最後選擇用 CodeIgniter 15
  16. 16. 初學者必用 CodeIgniter● 無敵懶人安裝 ( 好安裝 , 好移轉 )● 簡單目錄架構 ( 容易了解原始碼 )● 基礎 MVC 架構 ( 日後可跳其他 Framework)● 高效能 – 上網搜尋即可發現分數及評價都非常高 16
  17. 17. 最後還有最重要的一項 17
  18. 18. 台灣程式設計師最大問題 18
  19. 19. 不喜歡看英文文件 19
  20. 20. CodeIgniter 繁體中文教學文件 不必怕看不懂 ( 都是中文 )不必怕解決不了問題 ( 有論壇 ) 20
  21. 21. What is CodeIgniter ?Open Source Web Application FrameworkMVC (Model View Controller) Architecture 21
  22. 22. MVC ArchitectureDatabase LAYOUTMODEL View Controller ROUTES WEB SERVER 22 Client BROWSER
  23. 23. 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(); }
  24. 24. 安裝 CodeIgniter● Windows(5 分鐘安裝完成 ) – 下載 CI 原始 Zip 檔案 – 解壓縮到網頁根目錄● Linux – 安裝 Apache PHP MySQL ● Ubuntu, Debian 透過 apt ● FreeBSD 透過 ports 24
  25. 25. Windwos 安裝 懶人安裝包Windows+Appserv+CodeIgniter 2.1.0 下載 + 解壓縮 =100% 25
  26. 26. 完成畫面 26
  27. 27. 作業一● 在自己電腦架設 CodeIgniter 2.1.0● 設定 Virtual Host 對應 CI 目錄● 打開網址 http://ci.localhost/ 看到歡迎畫面● 進階作業 – 在 github 開新的 Repository – 將 CI 原始碼 push 到 github 27
  28. 28. Application Flow Of CodeIgniter 28
  29. 29. CodeIgniter 架構application – 網站所有資料system – CodeIgniter 核心目錄user_guide – 說明文件 index.php ( 網站 index) 29
  30. 30. 根目錄 index.php● $system_path – 核心目錄● $application_folder – 專案網站目錄 30
  31. 31. CodeIgniter application 目錄● cache( 快取檔案目錄 )● config( 網站設定檔 )● controllers( 控制器 )● core( 擴充核心目錄 )● errors(404,403 網頁 )● helpers( 擴充 helper 核心 )● libraries( 網站模組 )● models(Database 檔案 ) 31● views( 前端 js,html 檔案 )
  32. 32. CodeIgniter URL 介紹● example.com/index.php/class/function/ID – 控制器 (controller) 啟動的類別 (class) – 類別的函數 (function) 被呼叫使用 – 任何變數要傳遞給控制器 (controller) 所使用 example.com/news.php?mode=edit&id=10 32
  33. 33. 移除網址列 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
  34. 34. 加入副檔名 ( 小技巧 )example/index.php/products/view/shoes.htm修改設定檔 application/config/config.php$config[url_suffix] = .htm; 34
  35. 35. Controller( 控制器 )● 控制器 (Controller) 簡單來說就是 class 檔案● 放置目錄 application/controllers/ 35
  36. 36. 撰寫 Hello World<?phpclass Blog extends CI_Controller { public function index() { echo Hello World!; }} example.com/index.php/blog/index?> 36
  37. 37. 加入 URL 參數<?phpclass Blog extends CI_Controller { public function edit($blog_id) { echo $blog_id; }} example.com/index.php/blog/edit/14?> 37
  38. 38. 預設的控制器● 開啟 application/config/routes.php – $route[default_controller] = blog; 38
  39. 39. 物件導向基礎 ( 私有函數 )● Public● Protected● Private private function _utility() { // do some code } 大家可以透過瀏覽器看看 39
  40. 40. 類別建構子<?phpclass Blog extends CI_Controller { public function __construct() { parent::__construct(); // Your own constructor code $this->load->helper(url); $this->load->library(email); }}?> 40
  41. 41. Default Controller● example.com/index.php/welcome/index● example.com/● 修改設定檔 – application/config/routes.php – $route[default_controller] = welcome; 41
  42. 42. 作業二● 新增 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
  43. 43. CodeIgniter View● 目錄 application/views/● 可以任意將 html 放入上述目錄中 43
  44. 44. 如何載入 View● 格式 $this->load->view(file_name);● 格式 $this->load->view(folder/file_name);<?phpclass Blog extends CI_Controller { function index() { $this->load->view(blogview); }}?> 44
  45. 45. 新增動態資料到 View● 格式 $this->load->view(file_name,$data); $data = array( title => My Title, heading => My Heading, message => My Message ); $this->load->view(blogview, $data); 45
  46. 46. Views 顯示資料● 顯示格式如下 <html> <head> <title><?php echo $title;?></title> </head> <body> <h1><?php echo $heading;?></h1> <hr> <div><?php echo $message;?></div> </body> </html> 46
  47. 47. 迴圈用法● Controller 主程式 <?php class Blog extends CI_Controller { 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
  48. 48. <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
  49. 49. 將 views 內容存到變數● 格式 $this->load->view(file_name,$data, true);● 範例如下 : – $output = $this->load->view(myfile, $data, true); – echo $output; 49
  50. 50. 作業三● 將作業二輸出部份全部轉移到 views● 將網頁設計多重 view – 包含 header,footer,menu,content 50
  51. 51. CodeIgniter Library and helper● Library – 它就是 Class 集合● Helper – 它就是 function 集合● 載入 Library 類別 – $this->load->library(email);● 載入 Helper 輔助函數 – $this->load->helper(url); 51
  52. 52. 使用 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)
  53. 53. 使用 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
  54. 54. 作業四● 寫一個 Form 包含 title,author,comment 欄位● 送出後顯示在另外網頁或同一頁 54
  55. 55. CodeIgniter Models● 目錄 : application/models/● application/models/user_model.php class User_model extends CI_Model { public function __construct() { parent::__construct(); } } 55
  56. 56. 簡單 model 寫法class Blog_model extends CI_Model { function __construct() { // Model 建構函數 parent::__construct(); } function get_last_ten_entries() { …............ } function insert_entry() { …............... 56 }}
  57. 57. 載入 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
  58. 58. controller+model+viewclass 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
  59. 59. 連接資料庫● 修改 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
  60. 60. 快速入門$query = $this->db->query("YOUR QUERY");if ($query->num_rows() > 0){ foreach ($query->result() as $row) { echo $row->title; echo $row->name; }} 60
  61. 61. Database Active Record● 查詢資料 (Selecting)● 新增資料 (Inserting)● 更新資料 (Updating)● 刪除資料 (Deleting) 61
  62. 62. 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
  63. 63. 作業五● 請新增資料庫 your_database● 新增資料表 user – user_id, user_name, user_company● 新增資料表 news – news_id, user_id, news_title, news_message● 新增兩個 model, 利用 Form 傳職新增到資料庫 63
  64. 64. 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
  65. 65. ● 利用 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);
  66. 66. 回傳查詢值 (Result)● 多筆資料 ( 常用 ) – result() 物件 – result_array() 陣列● 單筆資料 – row() 物件 – row_array() 陣列 66
  67. 67. 資料顯示 ( 物件 )$query = $this->db->query("YOUR QUERY");if ($query->num_rows() > 0){ foreach ($query->result() as $row) { echo $row->title; echo $row->name; echo $row->body; }} 67
  68. 68. 顯示資料 ( 陣列 )$query = $this->db->query("YOUR QUERY");if ($query->num_rows() > 0){ foreach ($query->result_array() as $row) { echo $row[title]; echo $row[name]; echo $row[body]; }} 68
  69. 69. 作業六● 將 user 及 news 資料表內容顯示出來 – 新增 user_model 及 new_model 獨立 method – 將資料顯示在 view 69
  70. 70. 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
  71. 71. 作業七● user 及 news 資料表編輯功能 – 在 views 顯示編輯按鈕 – 點選後將該比資料帶入到 Form – 按下送出更新該筆資料後並回到 list 頁面 71
  72. 72. Active Record(Delete)● $this->db->where(id, $id);● $this->db->delete(mytable); – DELETE FROM mytable WHERE id = $id 72
  73. 73. 作業八● user 及 news 資料表刪除功能 – 在列表顯示刪除按鈕 – 點選後提示是否刪除該筆資料 – 按下確定後刪除資料並回到 list 頁面 73
  74. 74. 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 ONcomments.id = blogs.id 74
  75. 75. 作業九● Join 兩資料表 user 及 news 並顯示 – 左邊選單 : ● 發表新聞 ● 新增作者 ● 新聞列表 ( 檢視 , 更新 , 刪除 ) ● 作者列表 ( 檢視 , 更新 , 刪除 ) 75
  76. 76. CodeIgniter command line● 透過 command 去執行 cron-job● $this->input->is_cli_request() – 判斷瀏覽器是否可以執行● 動態改變權限、清除 cache 目錄、執行備份● 整合其他語言 (Perl,Python..) 76
  77. 77. 使用方式php index.php Controller function php index.php tools message 77
  78. 78. CodeIgniter Cache 快取● 在 controller 任何地方都可以加入 – $this->output->cache(n); – n 代表分鐘 – 只有在 $this->load->view(name); 做用● cache 目錄預設在 application/cache● 可以在 application/config/config.php 更改路徑● 更改 application/cache 權限 (Apache 使用者 ) 78
  79. 79. 今天課程就到這裡 大家有沒有任何問題http://www.codeigniter.org.tw/forum/ 79
  80. 80. 參考資料● CodeIgniter 使用手冊版本 2.1.0 – http://codeigniter.org.tw/user_guide/● 部落格技術教學 – http://blog.wu-boy.com/tag/codeigniter/ 80

×