CodeIgniter 3 – 動態網頁
在上篇文章 CodeIgniter 3 — 環境安裝 中我們已經建立好一個CodeIgniter 3專案 –> ci，也在phpMyAdmin中的database –> test 下新建一張table –> news且匯入兩筆資料，如下圖。
今天我們就用CodeIgniter 3來實際製作一個動態新聞網頁吧！
再複習一次CodeIgniter的MVC放置位置：
Model：application/models
Controller：application/controllers
View ：application/views
記得檔案位置要放對，執行起來才不會出錯哦！
建立Model
一般來說，我們會將資料庫相關操作(CRUD)都放在Model(模型)裡面，方便使用及管理。
打開 application/models 資料夾，在裡面新增一個檔案 – news_model.php並寫入以下程式碼：
<?php
class News_model extends CI_Model
{
public function __construct()
{
$this->load->database();
}
}此部分主要是宣告一個News_model類別並繼承CI_Model，然後進行資料庫載入。
接著來寫個function從資料庫中撈取資料，讀者們先想像一個畫面：在新聞主頁時，我們會想要陳列出所有的新聞，但只會顯示標題而不會顯示內文，因為這樣會使得畫面過於冗長雜亂。當使用者點擊某則新聞下之「繼續閱讀」後，此時會導入該則新聞的專屬頁面，並將標題和內容完整呈現。
承上，鑑於這項需求，我們可以設計「以判斷是否帶有參數的方式來決定如何撈取資料」這樣的一個function並加入News_model內。
public function get_news($slug = FALSE)
{
if ($slug === FALSE)
{
$query = $this->db->get('news');
return $query->result_array();
}
$query = $this->db->get_where('news', array('slug' => $slug));
return $query->row_array();
}$slug就是判斷要執行全部查詢或是單筆查詢的參數。
建立Controller
處理好資料撈取後，接著就要來構築顯示畫面，讓我們先去 application/controllers下建立一個Controller – news.php，接著寫入以下程式碼：
PS. 類別命名字首需大寫(News)
<?php
class News extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->model('news_model');
} // 主頁面(顯示所有新聞)
public function index()
{
$data['news'] = $this->news_model->get_news();
}
// 次頁面(檢視單筆新聞)
public function view($slug)
{
$data['news'] = $this->news_model->get_news($slug);
}
}
__construct 這個function會呼叫父類別 (CI_Controller) 的建構子，並且載入news_model 模型， 讓它可以在這個Controller的其它function中被使用。
而index function負責取得所有新聞；view function則負責取得某一筆新聞。
現在Controller已經從Model中取回了資料，下一步就要將這些資料傳遞給View顯示給使用者。
我們來擴充一下index function吧！
public function index()
{
$data['news'] = $this->news_model->get_news();
$data['title'] = 'News archive';
$this->load->view('temp/header', $data);
$this->load->view('news/index', $data);
$this->load->view('temp/footer');
}$data['news']存取了由資料庫撈回來的資料，並帶入View中。
這邊的View共有「header」、「index(content)」、「footer」。
現在來構築一下這三個部分吧！
建立View
在 application/views 內建立temp資料夾，接著在temp中建立一個header.php檔案，寫入以下程式碼：
<html><head><title><?php echo $title ?> - CodeIgniter 3 Practice</title></head><body><h1>CodeIgniter 3 Practice - Header</h1><hr>
然後在temp中建立另一個檔案footer.php，寫入以下程式碼：
<hr><h1>© CodeIgniter 3 Practice - Footer</h1></body></html>
再來在application/views 內建立news資料夾，接著在news中建立一個index.php檔案，寫入以下程式碼：
<?php foreach ($news as $news_item): ?><h2><?php echo $news_item['title'] ?></h2><p><a href="news/view/<?php echo $news_item['slug'] ?>">(繼續閱讀...)</a></p><?php endforeach ?>
這部分用foreach迴圈把剛才存的新聞標題印出來。
先來看一下網頁畫面，確認目前步驟無問題(安心一下)。
很好，header、index(content)、footer都有如預期的顯示出來！接著來建構檢視單筆新聞(view)的部分。
先回到news Controller中，將view function寫完整：
public function view($slug)
{
$data['news_item'] = $this->news_model->get_news($slug);
if (empty($data['news_item']))
{
show_404();
}
$data['title'] = $data['news_item']['title'];
$this->load->view('temp/header', $data);
$this->load->view('news/view', $data);
$this->load->view('temp/footer');
}原理跟index function相同，多了以$slug變數來撈取某筆特定新聞。
此時 application/controllers/news.php 的完整程式碼如下：
接著回到 application/views/news 內建立一個view.php，寫入下列程式碼：
<?php
echo '<h2>'.$news_item['title'].'</h2>';
echo $news_item['text'];最後我們需在 application/config/routes.php 內將路由設定好，以確保網址導入正確頁面：
$route['news/(:any)'] = 'news/view/$1';
$route['news'] = 'news';
$route['(:any)'] = 'news/view/$1';
$route['default_controller'] = 'news/index';第一行的目的是將含有$ slug 的 URI 導向 news Controller的 view function。
現在進入 http://localhost/ci/news ，除了主頁面的顯示外，點擊「繼續閱讀」可進入該新聞的全文獨立檢視頁面：
如此一來這個以CodeIgniter 3構築的動態新聞網頁就完成了！希望經過這個實作練習也能讓大家對CodeIgniter 3更加了解，如果有任何問題歡迎在下方一起討論，那麼今天就先這樣囉，see you！
