[教學] CodeIgniter 4 快速上手 (二) 建立簡易最新消息-新增篇

在上一篇[教學] 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)的勾選。

News table 的 sql 設定
勾選id 設定主鍵

如果你真的對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 或你剛剛設定的資料庫名稱。請注意,這裡是填寫資料庫名稱,而不是資料表名稱喔!

database config

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的全部樣子,紅框部分為本步驟所新增的範圍。

News index 與 create 的 controller

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. 檢查資料庫與下載本文程式碼

如何檢查你是否有跟是本篇文章,完成教學的內容?你只需要前往資料庫,瀏覽資料庫裡面的資料即可!

News 資料表中的資料

你會在資料表中看到你在create form中輸入的內容,id會是流水編號,title、content 會是你輸入的資料,insertTime與updateTime會是資料庫自動產生的時間,只要這些欄位有正常儲存進資料庫,就代表你完成本篇教學的內容了。如果你想下載本篇文章的程式碼,請直接按下方下載按鈕即可。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

返回頂端