CodeIgniter

2019/09/05

簡介

當系統越來越複雜的時候，就會需要利用一些現有的架構來協助我們開發，簡單的講，就是套用現成的開發方式來開發。如果利用Java進行web開發，常用的是Spring Framework，如果使用.net，常用的是.net MVC，而PHP也有一些架構，如Laravel及CodeIgniter。目前最多人採用的是Laravel，然而，我們選擇比較簡單容易安裝及上手的CodeIgniter，讓大家對架構有個初步的認識，未來，大家學其他架構時，就會覺得比較容易上手了。

CodeIgniter 繁體中文 / CodeIgniter
- 教學 (官方教學) / CodeIgniter Documentation
- 自學CodeIgniter跌跌撞撞30天系列 (2.2.6) (大部分內容是參考CodeIgniter官方教學)
- First Codeigniter 3 CRUD (Create,Read,Update,Delete) via Mysql

安裝

到CodeIgniter (官方網站)下載，目前4.0.0準備要正式發布了，不過，還沒發布前，先下載3.1.11 (2019/09/19 released)。

將內容解壓縮到網站的資料夾，以AppServ為例，就可以是: C:\AppServ\www\CodeIgniter

瀏覽器輸入網址:

http://localhost/CodeIgniter/

就可以看到預設的畫面了。也就是已經安裝好了!

事實上，CodeIgniter會先去檢查application/config/routes.php (詳參: URI 路由 / URI Routing)，省略裡面的註解，其實只有:

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

$route['default_controller'] = 'welcome';

$route['404_override'] = '';

$route['translate_uri_dashes'] = FALSE;

因為，設定了預設的controller，所以，會去執行application/controllers/Welcome.php。

這跟陽春的php很不一樣，陽春的php是靠資料夾的路徑來直接呼叫php，但是，為了簡化url，也避免使用存取沒必要的檔案，很多框架也都可以設定route。

另外，可能會發現，都只有"<?php"，沒有"?>"，這不是漏打了，除非底下有非php的內容，是可以不用"?>"。

** 請注意，在routes裡是welcome的第一個字母是小寫 (lowercase)的，但是php的檔名第一個字母是大寫(uppercase)的!! **

一樣，類別的名稱的第一個字母要大寫，然後，繼承一個CodeIgniter的類別CI_Controller。

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {

 public function index()

  $this->load->view('welcome_message');

CodeIgniter會先去找index()，目前裡面只有一行，就是去view裡面打開welcome_message

$this->load->view('welcome_message');

application/views/welcome_message.php

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

?><!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

 <title>Welcome to CodeIgniter</title>

 <style type="text/css">

 ::selection { background-color: #E13300; color: white; }

 ::-moz-selection { background-color: #E13300; color: white; }

 body {

  background-color: #fff;

  margin: 40px;

  font: 13px/20px normal Helvetica, Arial, sans-serif;

  color: #4F5155;

a {

  color: #003399;

  background-color: transparent;

  font-weight: normal;

 h1 {

  color: #444;

  background-color: transparent;

  border-bottom: 1px solid #D0D0D0;

  font-size: 19px;

  font-weight: normal;

  margin: 0 0 14px 0;

  padding: 14px 15px 10px 15px;

 code {

  font-family: Consolas, Monaco, Courier New, Courier, monospace;

  font-size: 12px;

  background-color: #f9f9f9;

  border: 1px solid #D0D0D0;

  color: #002166;

  display: block;

  margin: 14px 0 14px 0;

  padding: 12px 10px 12px 10px;

 #body {

  margin: 0 15px 0 15px;

 p.footer {

  text-align: right;

  font-size: 11px;

  border-top: 1px solid #D0D0D0;

  line-height: 32px;

  padding: 0 10px 0 10px;

  margin: 20px 0 0 0;

 #container {

  margin: 10px;

  border: 1px solid #D0D0D0;

  box-shadow: 0 0 8px #D0D0D0;

 </style>

</head>

<body>

<div id="container">

 <h1>Welcome to CodeIgniter!</h1>

 <div id="body">

  <p>The page you are looking at is being generated dynamically by CodeIgniter.</p>

  <p>If you would like to edit this page you'll find it located at:</p>

  <code>application/views/welcome_message.php</code>

  <p>The corresponding controller for this page is found at:</p>

  <code>application/controllers/Welcome.php</code>

  <p>If you are exploring CodeIgniter for the very first time, you should start by reading the <a href="user_guide/">User Guide</a>.</p>

 </div>

 <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds. <?php echo  (ENVIRONMENT === 'development') ?  'CodeIgniter Version <strong>' . CI_VERSION . '</strong>' : '' ?></p>

</div>

</body>

</html>

靜態頁面

我們來參考官方教學 (靜態頁面 / Static pages)來設定一個靜態頁面，首先，先從Controller開始，先新增一個檔案:

application/controllers/Pages.php

<?php

class Pages extends CI_Controller {

        public function view($page = 'home')

這個範例跟前一個Controller不一樣，沒有使用預設的index()，而是定義一個方法view，並且接受一個參數page，當參數page不存在時，會自動帶入'home'。

我們來新增一個view

application/views/home.php

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

來試試看:

http://localhost/CodeIgniter/index.php/pages/view

其實等同:

http://localhost/CodeIgniter/index.php/pages/view/home

我們來試試看，再新增一個view

application/views/about.php

<!DOCTYPE html>

<html>

<body>

<h1>Hello</h1>

<p>Ben Wu</p>

</body>

</html>

來試試看:

http://localhost/CodeIgniter/index.php/pages/view/about

因為html裡有很多內容會一直重複 (如:引用bootstrap)，官方教學 (靜態頁面 / Static pages)裡建議我們利用header.php及footer.php

application/views/templates/header.php

<html>

        <head>

                <title>CodeIgniter Tutorial</title>

        </head>

        <body>

application/views/templates/footer.php

                <em>&copy; 2015</em>

        </body>

</html>

這時候，我們就可以把view的內容精簡一下:

application/views/home.php

<h1>My First Heading</h1>

<p>My first paragraph.</p>

application/views/about.php

<h1>Hello</h1>

<p>Ben Wu</p>

有些架構會自動引用header及footer，不過，CodeIgniter不會這樣做，而是要在Controller裡定義。

  public function view($page = 'home') {

    $this->load->view('templates/header');

    $this->load->view('pages/'.$page);

    $this->load->view('templates/footer');

另外，除了呼叫view之外，也可以傳參數給view，例如，傳一個$data給view。

  public function view($page = 'home') {

    $data['title'] = ucfirst($page); // Capitalize the first letter

    $this->load->view('templates/header', $data);

    $this->load->view('pages/'.$page, $data);

    $this->load->view('templates/footer', $data);

application/views/templates/header.php

<html>

        <head>

                <title>CodeIgniter Tutorial</title>

        </head>

        <body>

                <h1><?php echo $title; ?></h1>

也要處理一下參數內容找不到的問題

完整的程式碼 application/controllers/Pages.php

<?php

class Pages extends CI_Controller {

  public function view($page = 'home') {

    if ( ! file_exists(APPPATH.'views/pages/'.$page.'.php')) {

      // Whoops, we don't have a page for that!

      show_404();

    $data['title'] = ucfirst($page); // Capitalize the first letter

    $this->load->view('templates/header', $data);

    $this->load->view('pages/'.$page, $data);

    $this->load->view('templates/footer', $data);

傳統的php是無法很容易的將php的資料處理跟html的展現切割，利用框架之後，乾淨多了!

如果要希望將這個controller設為預設的controller，那就要修改application/config/routes.php

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

$route['(:any)'] = 'pages/view/$1';

$route['default_controller'] = 'pages/view';

來試試看:

http://localhost/CodeIgniter/

及

http://localhost/CodeIgniter/index.php/about

我們把bootstrap所需要的style及js加到header.php

<html>

  <head>

  <title><?=$title?></title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  </head>

  <body>

改一下

application/views/home.php

<div class="container">

  <h2>Table</h2>

   <table class="table table-bordered table-striped">

    <tr>

      <th>Firstname</th>

      <th>Lastname</th>

      <th>Age</th>

    </tr>

    <tr>

      <td>Jill</td>

      <td>Smith</td>

      <td>50</td>

    </tr>

    <tr>

      <td>Eve</td>

      <td>Jackson</td>

      <td>94</td>

    </tr>

  </table>

</div>

application/views/about.php

<div class="container">

  <p class="text-muted">This text is muted.</p>

  <p class="text-primary">This text is important.</p>

  <p class="bg-primary text-white">This text is important.</p>

  <p class="bg-success text-white">This text indicates success.</p>

  <button type="button" class="btn">Basic</button>

  <button type="button" class="btn btn-primary">Primary</button>

</div>