在上一篇[教學] CodeIgniter 4 快速上手 (ㄧ) 下載與安裝裡有提到,CodeIgniter 4 是採用PHP7重寫整個架構,根據測試PHP7的執行效率,PHP7是PHP5至少兩倍快,這是許多PHP開源系統所以公開的訊息,而CodeIgniter是一個輕量級的PHP框架,意思是簡單易上手,而且說明書也算簡單易懂。雖然說CodeIgniter是一個輕量級PHP框架,內建function與功能當然沒有Laravel來得多,但Laravel最令人詬病就是他不夠輕巧、檔案過多,如果你只是需要一些常見功能與MVC架構做前後端分離,那CodeIgniter絕對會是你的首選。
所以CodeIgniter對我來說就像瑞士刀一樣,你需要的基本功能CodeIgniter都有,本篇我們就來試試程式設計的基本4大功能,也就是新增(create)、刪除(delete)、查詢(read,也譯作讀取)、修改(Update),中文簡稱增刪查改,英文簡稱為CRUD,而一次可以練習到這四項功能的部分就是最新消息這個常見功能了!為了避免篇幅過長,本篇就以最簡單的純文字最新消息作為一個基本練習,為了篇幅過長,這一篇我們先來講解新增create功能吧!
Step1. 基本開發環境建置
架設基本CodeIgniter 4基本環境,詳細步驟請參考上一篇[教學] CodeIgniter 4 快速上手 (ㄧ) 下載與安裝
Step2. 新增MVC的V
在專案根目錄/app/view 裡面新增一頁list.php,貼上以下HTML Code
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>News List</title>
<style>
body{
margin: 0 auto;
padding: 0;
text-align: center;
}
ul{
width: 50%;
margin: 0 auto;
padding-inline-start: 0px;
}
li{
list-style: none;
border:#333 1px solid;
margin: 10px 0;
}
hr{
border: none;
border-top: #666 1px solid;
}
@media (max-width:750px){
ul{
width: 90%;
}
}
</style>
</head>
<body>
<h1>News List</h1>
<a href="#">Add News</a>
<ul>
<li>
<h3>News title</h3>
<p>News content</p>
<hr/>
<p>
<span>2021-05-03 00:00:00</span>
<a href="#">Update</a> /
<a href="#">Delete</a>
</p>
</li>
</ul>
</body>
</html>
再同樣的資料夾位置再新增一頁form.php 貼上以下HTML Code
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add News</title>
<style>
form{
display: flex;
flex-direction:column;
width: 50%;
margin: 0 auto;
}
@media (max-width:750px){
form{
width: 90%;
}
}
input,textarea{
margin: 10px 0;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
}
input[type='submit']{
background: cornflowerblue;
border: #333 1px solid;
padding: 10px;
}
input[type='submit']:hover{
background-color: deepskyblue;
}
</style>
</head>
<body>
<form action="" method="post">
<label for="title">title:</label>
<input type="text" name="title">
<label for="content">content:</label>
<textarea name="content" id="" cols="30" rows="10"></textarea>
<input type="submit" value="submit">
</form>
</body>
</html>
以上的list.php 為本次最新消息的列表頁,而form.php 則為本次負責新增最新消息的表單頁。我已經有做好一個很基本的前台頁面畫面,包含一個非常簡單的RWD,建議採用Chrome瀏覽器瀏覽,讓你可以專心在學習CodeIgniter上,因為CodeIgniter採用MVC架構,即Model、View、Controller 分離式架構,所以這兩頁前台的靜態頁就隸屬於View的範疇,故需要放在app/view 之下。
Step3. Mysql或MariaDB資料庫
為了可以讓你專注在CodeIgniter學習上,我們先把資料庫處理好,所以麻煩你開啟你的資料庫管理介面,通常是使用 phpmyadmin,你可以使用你熟悉的界面。
建立一個新資料庫,取名news(或你喜歡的名字),編碼採用utf8mb4_general_ci,然後按下新增。新增完資料庫之後我們需要接著新增資料表,資料表的命名也可以叫做news(或你喜歡的名字),欄位數為5欄,第一欄為id int(11)並勾選AUTO_INCREMENT(A_I),主要放置文章編號,採用數字最多11碼,勾選AUTO_INCREMENT會自動以流水號方式產生,並且記得將id設定成主鍵。第二欄為title varchar(255) ,放置文章標題,採用變動型字元串最多255個字元。第三欄是content text,為放置文章內容之欄位採用純文字欄位。第四欄是insertTime datetime,設定CURRENT_TIMESTAMP,放置文章建立的年月日時分秒。第五欄是update-time datetime,設定CURRENT_TIMESTAMP,放置更新文章的年月日時分秒。如果你採用phpmyadmin,那你設定的方式會與下圖相同,然後既然按下右下角的Save。
如果你在這裡儲存遇到問題,可以先取消第一欄為id int(11)的AUTO_INCREMENT(A_I)的勾選,先儲存並將id int(11) 設定爲主鍵之後在回來設定id int(11)的AUTO_INCREMENT(A_I)的勾選。
如果你真的對sql設定有很大的困擾,在phpmyadmin後台找到sql指令頁,然後透過複製以下sql指令到sql指令頁上執行,可以幫助你暫時跳過這一個環節。
CREATE TABLE `news` (
`id` int(11) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
`title` varchar(255) NOT NULL,
`content` text NOT NULL,
`insertTime` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
`updateTime` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
Step4. 設定連接資料庫
連接資料庫設定請打開app/datebase.php,填上資料庫的hostname、username、password與database。hostname通常都是localhost,而username與password通常本機環境預設值都是root,或是username是root但密碼保留空白,而database就是指資料庫名稱,這裡請填上news 或你剛剛設定的資料庫名稱。請注意,這裡是填寫資料庫名稱,而不是資料表名稱喔!
Step5. 建立MVC的C,create的部分
前往app/Controllers,打開Home.php複製裡面的程式碼,接著在app/Controllers資料夾中新增一頁News.php,貼上剛剛複製的程式碼,然後將第五行的Home改成News後儲存。請注意,這裡的檔名與function名稱的News的N一定要大寫,也就是首字要大寫,不然程式會出錯,至於為什麼要大寫,我只能說這是CodeIgniter的規定,我如果沒有記錯是為了區分class與function名稱的緣故,所以無論如何請記得大寫,後續Model的部分也是同樣的首字要大寫喔。
在News.php中,複製一個function index()並貼在function index() 下方,並把index改成create,然後回到function index(),將裡面的「return view(‘welcome_message’);」改成「return view(‘list’);」,如此一來當我們打開 http://localhoat/news/ 時,預設就會執行function index() 的內容,程式就會回傳 list 這個view 給瀏覽器,於是你就會看到列表頁的內容了,瞭解基本的function index()結構後,我們要從新增文章內容做起,之後在Read階段時我們會在回來這裡。
將function create() 裡面的內容「return view(‘welcome_message’);」刪除,改成以下內容:
//if form submit
if($_POST){
$model = new NewsModel();
$model->save([
'title' => $this->request->getVar('title'),
'content' => $this->request->getVar('content')
]);
return redirect()->to(base_url('news'));
}else{
return view('form.php');
}
上面的程式碼是在說,如果表單有用post的方式送資料過來,那要調用NewsModel(),然後將title、content的資料存到model裡,存好返回list列表頁,如果表單沒有用post的方式送資料則顯示form.php的頁面內容。這裡我們有調用NewsModel(),所以我們要在整個class News()之前招喚NewsModel(),所以要寫上「use App\Models\NewsModel;」,以下是我目前News.php的全部樣子,紅框部分為本步驟所新增的範圍。
Step6. 建立MVC的M
由於我們剛剛招喚了NewsModel(),但我們還沒有建立這個Model,所以前往資料夾app/Model,建立NewsModel.php,輸入以下程式碼:
<?php
namespace App\Models;
use CodeIgniter\Model;
class NewsModel extends Model
{
protected $table = 'news';
protected $allowedFields = ['title', 'content', 'insertTime','updateTime'];
}
以上程式碼的大意是,namespace命名空間採用App的Models,使用CodeIgniter的Model功能,建立一個class叫NewsModel作為Model功能的延伸,資料表名稱是news,要使用的欄位有title、content、insertTime與updateTime四個欄位。
Step7. 測試Create 新增功能
到這裡你就可以開啟你的網站,例如http://localhost/news/create,你就可以測試你的表單資料有沒有正常送出到資料庫了,因為送出後沒有做提示訊息,所以麻煩請到資料庫確認你的資料有進去news資料表中。
然後由於我們新增的部分已經做好了,所以你可以前往view將list.php中,第37行改成以下程式:
<a href="<?= base_url();?>/news/create">Add News</a>
如此一來就可以從列表頁連到表單頁了。
Step8. 檢查資料庫與下載本文程式碼
如何檢查你是否有跟是本篇文章,完成教學的內容?你只需要前往資料庫,瀏覽資料庫裡面的資料即可!
你會在資料表中看到你在create form中輸入的內容,id會是流水編號,title、content 會是你輸入的資料,insertTime與updateTime會是資料庫自動產生的時間,只要這些欄位有正常儲存進資料庫,就代表你完成本篇教學的內容了。如果你想下載本篇文章的程式碼,請直接按下方下載按鈕即可。