使用 CodeIgniter 建立一個簡單的 Web 站點

原文: 使用 CodeIgniter 建立一個簡單的 Web 站點

 

參考源自：

http://www.ibm.com/developerworks/cn/web/wa-codeigniter/index.html

個人第一個 CodeIgniter 項目（除HelloWorld外），現整理記錄下來。

 

相關環境：

　　系統：ubuntu-10.04.3

　　Apache：httpd-2.4.7

　　PHP：php-5.4.22

　　MySQL：mysql-5.6.16

　　CI：CodeIgniter-2.2.0

 

目標：

　　使用 CodeIgniter 建立一個簡單的 Web 站點。該站點將有一個主頁，顯示一些宣傳文本和一個表單，該表單將發佈到數據庫表中。

　　按照 CodeIgniter 的術語，可將這些需求轉換爲如下內容：

• 一個控制器，僅包含少數功能（也可以使用默認的 Welcome 控制器）
• 一個模型（以及一個數據庫表），用於存儲聯繫人信息
• 一個主視圖，包含一些支持

 

1、建立數據庫表和模型

　　從模型入手可幫助理解底層數據庫表，以後再開始佈設功能和 UI。若是對錶將存儲哪些內容認識不深，設計與表交互的表單將十分困難。

　　對於這個示例應用程序而言，但願存儲的是來自表單的聯繫人信息。那麼須要的是哪些類型的聯繫人信息？目前而言，僅存儲基本信息，要求提供姓名、電子郵件地址、電話號碼和簡短備註。還可能但願在後臺存儲時間戳和 IP 地址。

1. 建立數據庫表

cd /usr/local/mysql/bin
mysql -u root -p

而後輸入密碼（我這裏爲root），就進入了MySQL。

若要查看有哪些數據庫，可用命令: show databases;

若要建立數據庫，可用命令：create database Tina;（這裏我建立了一個名爲Tina的數據庫）
選擇要使用的數據庫：use Tina;（這裏使用名爲Tina的數據庫）

建立表contacts：

CREATE TABLE `contacts` (

  `id` int(11) NOT NULL auto_increment,

  `name` varchar(128) NOT NULL,

  `email` varchar(255) NOT NULL,

  `notes` text NOT NULL,

  `stamp` timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,

  `ipaddress` varchar(32) NOT NULL,

  PRIMARY KEY  (`id`)

) ENGINE=MyISAM;

 

查看當前數據庫下的全部表的名稱：show tables;

查看contacts的表結構：desc contacts; 或者 show columns from contacts; 

查看錶contacts中的數據：select * from contacts;

 

 配置：

application 文件夾中最重要的文件夾就是 config。該文件夾內有兩個須要關注的文件：config.php 和 database.php。

config.php 文件包含設置 CodeIgniter 所需的基本參數和自變量。database.php 文件包含鏈接數據庫所需的基本參數和自變量。

 

對於 config.php 文件，這裏只需設置 base_url 參數，例如設置爲 http://localhost/CodeIgniter_2.2.0/。

根據當前正在使用的服務器地址更改此設置爲：

$config['base_url']    = 'http://localhost/CodeIgniter_2.2.0/'

務必牢記添加最後的斜槓，即使是在子目錄中設置 CodeIgniter 應用程序時也是如此。

 

下面打開 database.php 文件，爲數據庫服務器設置 connection 參數：

$db['default']['hostname'] = "your-db-host";
$db['default']['username'] = "your-username";
$db['default']['password'] = "your-password";
$db['default']['database'] = "your-db-name";
$db['default']['dbdriver'] = "mysql";

例如：

     

2. 建立模型

　　在 application/models 文件夾內，建立一個 contacts_model.php 文件。

代碼以下：

<?php 
class Contacts_model extends CI_Model{
    function __construct()
    {
        parent::__construct ();
    }
    public function add_contact()
    {
        date_default_timezone_set('UTC');
        $now = date("Y-m-d H:i:s");

        $data = array( 
        'name' => $this->input->post('name'),
        'email' => $this->input->post('email'),
        'notes' => $this->input->post('notes'),
        'ipaddress' => $this->input->ip_address(),
        'stamp' => $now
        );

        $this->db->insert('contacts', $data);
    }
}
/* End of file contacts_model.php */
/* Location: ./application/controllers/contacts_model.php */

　　在上面代碼中，其實以前用到了$this->input->xss_clean() 來整理表單字段的數據，可是遇到了問題，即在提交表單後顯示了空白頁。目前還不清楚是什麼緣由，有待進一步研究。

2、初始化控制器

　　在 CodeIgniter 中，控制器用於組織項目。設想每一個函數都是站點或應用程序的一個頁面或目標。若是使用主頁，就須要一個 index() 函數。若是有一個 About us 頁面，就須要 about() 或 about_us() 函數—— 具體取決於您但願怎樣構造 URL。

　　甚至能夠將控制器組織到文件夾中，建立層次結構。例如，在 system/application/controllers 文件夾中，可能有一個 admin 文件夾，其中包含針對管理工具各主要部分的控制器。可按照以下方法訪問這些控制器（和函數）： http://www.example.com/admin/controller-name/function-name/。

　　進入application/controllers/ 文件夾，新建一個contacts.php文件。（固然也可使用默認控制器，即 Welcome 控制器。）

代碼以下：

<?php
/**
 * Contacts Class
 *
 * @author Tina
 */
class Contacts extends CI_Controller{

    function __construct()
    {
        parent::__construct();
    }

    function index()
    {
         $this->load->helper('form');
         $data['title'] = "Welcome to our Site";
         $data['headline'] = "Welcome!";
         $data['include'] = 'contacts_home';
         $this->load->vars($data);
         $this->load->view('contacts_view');
    }
};
/* End of file contacts.php */
/* Location: ./application/controllers/contacts.php */

設置可在視圖內部使用的多個變量——經過這種方法，便可更好地組織應用程序。例如，可能但願在控制器中設置標題和標題欄。若是要這樣作，就必須將變量載入視圖。所載入的變量之一就是所包含視圖的名稱。經過這種方法，便可設置包含全部外觀的主視圖，以及包含內容的各包含項。

上面代碼中$data 數組被傳入到一個視圖中（contacts_view）。數組內的信息可以使用鍵名訪問，若是但願輸出標題欄，經過 $headline 訪問它便可。

接下來，將建立視圖，並完成控制器。

3、建立視圖

　　在application/views 中的建立一個名爲contacts_view.php的文件。

代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php echo $title;?></title>
<style>label { display:block;}</style>
</head>
<body>
<h1><?php echo $headline;?></h1>
<?php $this->load->view($include);?>
</body>
</html>

上面代碼傳入了三個變量：$title、$headline 和 $include（一個包含項的名稱）。

在前兩條php語句中，將分別顯示在 $data['title'] 和 $data['headline'] 中找到的數據。隨後使用 $data['include'] 的值載入第二個視圖。在本例中爲一個名爲 contacts_home的視圖（添加了少量 CSS 代碼）。其中包含一個文本塊和一個從站點訪問者處收集信息的表單：

contacts_home.php

代碼以下：

<p>This is random text for the CodeIgniter article. 
There's nothing to see here folks, just move along!</p>
<h2>Contact Us</h2>
<?php 
echo form_open('contacts/contactus');
echo form_label('your name','name');
$ndata = array('name' => 'name', 'id' => 'id', 'size' => '25');
echo form_input($ndata);

echo form_label('your email','email');
$edata = array('name' => 'email', 'id' => 'email', 'size' => '25');
echo form_input($edata);

echo form_label('how can you help you?','notes');
$cdata = array('name' => 'notes', 'id' => 'notes', 'cols' => '40', 'rows' => '5');
echo form_textarea($cdata);

echo form_submit('submit','send us a note');
echo form_close();
?>

 

這裏使用的是 Form 幫助程序，將其載入控制器。form_open() 函數容許打開表單—— 它具備必要的自變量，即表單發佈的目標位置。接下來，將返回控制器並添加 contact() 函數來處理表單發佈數據。

在表單中，使用了 form_label() 來建立可訪問的標籤，使用 form_input() 和 form_textarea() 來構建表單字段和文本區，使用 form_submit() 來構建輸入按鈕。這裏，經過 form_input() 和 form_textarea()（以及其餘表單函數），就能夠傳入一個信息數組，幫助跟蹤字段名稱、id、大小和其餘信息。

最後，使用 form_close() 關閉表單。

 

再建立一個視圖文件contacts_thanks.php。

代碼以下：

<p>Thanks so much for contacting us. Someone will be in contact with you soon.</p>

4、完成控制器

　　如今須要從新回到控制器contacts.php，爲其添加兩個函數。

①處理主頁上的表單傳入的 POST 的 contactus() 函數。

②thankyou() 函數，它將用做該表單的最終確認頁面。

contactus() 函數很是簡單。載入 contacts_model 模型，運行該模型內的 add_contact() 函數，而後將用戶轉向 thanks 頁面。請注意，要使用 redirect() 函數，必須載入 URL 幫助程序。

函數代碼以下所示：

    function contactus()
    {
         $this->load->helper('url');$this->load->model('contacts_model','',TRUE);
         $this->contacts_model->add_contact();
         redirect('contacts/thankyou','refresh');
    }

    function thankyou()
    {
         $data['title'] = "Thank You!";
         $data['headline'] = "Thanks!";
         $data['include'] = 'contacts_thanks';
         $this->load->vars($data);
         $this->load->view('contacts_view');
    }

 

5、添加安全性

　　在控制器的 contactus() 函數中，有着在數據庫中建立多條空記錄的風險—— 這會致使某人連續將聯繫人目標載入其瀏覽器或使用某種類型的機器人。要避免此類狀況發生，最簡單的方法就是在控制器中添加簡單的測試。若是存在 POST 數據，則載入模型和函數。若是沒有，則將其返回主頁。

修改後的函數以下所示：

  function contactus()
   {
         $this->load->helper('url');
         if ($this->input->post('email'))
         {
               $this->load->model('contacts_model','',TRUE);
               $this->contacts_model->add_contact();
               redirect('contacts/thankyou','refresh');
         }
         else
         {
               redirect('contacts/index','refresh');
         }
    }

結束語

     

　　至此，就建立了一個包含主頁、將信息添加到數據庫的表單和 thanks頁面的 Web 站點。

　　固然，要學習的東西還有不少。例如，可自動加載所需的模型和任何幫助程序或庫；能夠爲應用程序調整緩存和性能；能夠爲視圖添加更多 CSS 內容；能夠添加在數據庫插入操做結束後發送電子郵件通知的功能。

　　加油！