這篇教學主要會專注在:
- Model-View-Controller 基礎知識
- 路由(Routing)基礎知識
- 表單驗證
- 使用”Query Builder“來做簡單的資料庫查詢
每一部份解釋 CodeIgniter 框架的一小部份功能
- 靜態頁面 ,將會教你關於控制器(Controller),視圖(View)與路由的基礎知識
- 模組 ,這邊你將開始使用模型(Model),並且進行一些簡單的資料庫操作
- 新增項目 ,將會進行更進階的資料庫操作以及表單驗證
- 結論 ,將會指引你一些未來的學習方向以及其它資源
教學 - 靜態頁面
設置一個 控制器(Controller) 來處理靜態頁面
- 控制器是一個簡單的類別來幫助委派工作
瀏覽器發出一個請求給:
- http://example.com/news/latest/10
- http://example.com/[controller-class]/[controller-method]/[arguments]
※ 解釋 ※
controller 為news,而 news 控制器將會被呼叫的方法(method)為 “latest” 。
這個 latest 方法的工作可能是抓取10個項目,並顯示在頁面上。
教學 - 模組介紹
1. 設定你的模型(Model)
資料庫操作放在模型裡面,而不是控制器當中,這樣子方便我們之後重用這些程式。
模型是你用來讀取、新增以及更新資訊的地方,不論是從資料庫或其它存放資料處。
打開 application/models 資料夾,新增一個檔案名為 News_model.php 並加上下列程式碼
<?php
class News_model extends CI_Model {
public function __construct()
{
$this->load->database();
}
}
?>
它建立了一個新的模型,繼承自 CI_Model ,並載入了資料庫程式庫。
這使得我們可以使用$this->db 這個物件來存取資料庫類別。
2. 開啟XAMPP > 執行MySQL > 即可開啟資料庫網址
http://localhost/phpmyadmin/index.php
3. 建立資料庫:
CREATE database News;
4. 資料庫結構:
CREATE TABLE news (
id int(11) NOT NULL AUTO_INCREMENT,
title varchar(128) NOT NULL,
slug varchar(128) NOT NULL,
text text NOT NULL,
PRIMARY KEY (id),
KEY slug (slug)
);
5. 新增資料:
INSERT INTO `News`.`news` (`id`, `title`, `slug`, `text`) VALUES (NULL, 'Write Like You Talk', 'false', 'Here\'s a simple trick for getting more people to read what you write: write in spoken language. Something comes over most people when they start writing. They write in a different language than they\'d use if they were talking to a friend. The sentence structure and even the words are different. No one uses "pen" as a verb in spoken English. You\'d feel like an idiot using "pen" instead of "write" in a conversation with a friend.’);
INSERT INTO `News`.`news` (`id`, `title`, `slug`, `text`) VALUES (NULL, 'A decade at google', 'true', 'One of the key challenges you face in an industrial research lab is how to choose your projects. You want your projects to be interesting research but also contribute to your company. As a junior researcher, you’re typically in the situation of choosing a project to join, while later in your career you are expected to come up with and lead your own projects. Regardless of your age, you have to make an educated decision.’);
6. 取得資料庫中的所有資料
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();
}
7. 定義一個新的 “news” 控制器。
在 application/controllers/News.php 建立新的控制器
<?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();
$data['title'] = 'News archive';
$this->load->view('templates/header', $data);
$this->load->view('news/index', $data);
$this->load->view(‘templates/footer');
}
public function view($slug = NULL) {
$data['news_item'] = $this->news_model->get_news($slug);
}
}
8. 建立 application/views/news/index.php 並加入下一段程式碼
<h2><?php echo $title ?></h2>
<?php foreach ($news as $news_item): ?>
<h3><?php echo $news_item['title'] ?></h3>
<div class="main">
<?php echo $news_item['text'] ?>
</div>
<p><a href="news/<?php echo $news_item['slug'] ?>">View article</a></p>
<?php endforeach ?>
9. news 控制器並更新方法 view() 加入下列程式碼
public function view($slug = NULL)
{
$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('templates/header', $data);
$this->load->view('news/view', $data);
$this->load->view('templates/footer');
}
10. application/views/news/view.php 建立對應的檢視檔案,並輸入下列代碼
<?php
echo '<h2>'.$news_item['title'].'</h2>';
echo $news_item['text'];
11. 路由(Routing)
打開你的路由檔案(application/config/routes.php)並修改成像下面的代碼
$route['news/(:any)'] = 'news/view/$1';
$route['news'] = 'news';
$route['(:any)'] = 'pages/view/$1';
$route['default_controller'] = 'pages/view';
12.記得要修改連結database的設定
'username'=> 'root'
'password'=> 'sky1017'
'database'=> 'News'
因為我localhost的資料庫有設定
帳號密碼,所以要輸入username和
password,database要輸入資料庫名稱
13. 在網址列輸入
http://localhost/codeigniter/index.php/news
教學 - 動態新增資料
1. 建立一個表單
建立一個表單需要一個有兩個欄位的表單,一個用來輸入標題,另一個輸入內文。
將標題製成 slug,現在到 application/views/news/create.php 建立。
<h2><?php echo $title ?></h2>
<?php echo validation_errors(); ?>
<?php echo form_open('news/create') ?>
<label for="title">Title</label>
<input type="input" name="title" /><br />
<label for="text">Text</label>
<textarea name="text"></textarea><br />
<input type="submit" name="submit" value="Create news item" />
</form>
``form_open()`` 函式: 第一個函式是由 Form 輔助函式 所提供的,它將會顯示表單元素並增加一些額外功能。例如增加一個隱藏的 CSRF 預防欄位 。
validation_errors() 函式:當表單驗證錯誤時,用來顯示錯誤訊息。
2. 檢查是否有表單被送出,以及送出的資料是否通過驗證規則。 使用 Form 驗證 程式庫。
開啟application/controllers/News.php
public function create() {
$this->load->helper('form');
$this->load->library('form_validation');
$data['title'] = 'Create a news item';
$this->form_validation->set_rules('title', 'Title', 'required');
$this->form_validation->set_rules('text', 'text', 'required');
if ($this->form_validation->run() === FALSE) {
$this->load->view('templates/header', $data);
$this->load->view('news/create');
$this->load->view('templates/footer');
} else {
$this->news_model->set_news();
$this->load->view('news/success');
}
}
前幾行用來載入 Form 輔助函式以及 Form Validation 程式庫。 接著是設定表單驗證的規則。
set_rules() 方法需要三個參數,輸入欄位的名稱,用來顯示在錯誤訊息中的名稱,以及規則。 在這個例子中使用的規則,用來表示標題及內文都是必要的欄位。
如上面的範例, CodeIgniter 有一個強力的表單驗證程式庫。 你可以在這邊閱讀 更多關於表單驗證的資訊 。
3. 看到一個條件式用來檢查表單驗證是否成功。 若是沒有,就會顯示表單,若是表單已被送出 並且 通過了驗證,模型就會被呼叫。 接著一個檢視會被載入並顯示成功訊息。 請在 application/views/news/success.php 建立一個檢視並寫入成功訊息。
4. 模型(Model)
最後一件事就是寫一個方法來將資料存進資料庫。
你將會使用 Active Record 類別來新增這資訊,並使用 Input 程式庫來取得表單送出的資料。
打開之前建立的application/models/News_model.php 模型,並加入下列程式碼:
public function set_news()
{
$this->load->helper('url');
$slug = url_title($this->input->post('title'), 'dash', TRUE);
$data = array(
'title' => $this->input->post('title'),
'slug' => $slug,
'text' => $this->input->post('text')
);
return $this->db->insert('news', $data);
}
在第三行有個新的 url_title() 函式 - 由 URL 輔助函式 提供 - 會讀取你傳入的字串,
使用破折號 (-) 來替換掉空白,並將所有字串轉為小寫。
最後會產生一個很好的 slug ,非常適合用來建立 URI 。
待會要存入的資料放進 $data 陣列中。 陣列中的每個元素都對應到資料庫中的欄位。
post()函式:來自 Input 函式庫 。 用來確保資料已經被過濾避免受到攻擊,
而程式庫預設就會被自動載入,最後將 $data 存入資料庫當中。
5. 在網址列輸入(新增資料)
http://localhost/codeigniter/index.php/news/create
在網址列輸入(檢視畫面)
http://localhost/codeigniter/index.php/news
留言列表