2021 年 9 月 10 日

[教學] 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會是資料庫自動產生的時間,只要這些欄位有正常儲存進資料庫,就代表你完成本篇教學的內容了。如果你想下載本篇文章的程式碼,請按此下載。

文章分類:

發佈留言

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

相關推薦文章

希望您會喜歡
2008 年 6 月 15 日
[思考] 低調的策略

我今天突然在某個折價資訊網站發現一個小我兩歲卻同天生日的會員,她是鮮文網的作家會員,我好奇著踏進他遺留的網址, […]

Read More
2009 年 4 月 10 日
[新聞]葉子如艾草 花像滿天星 - 國際毒草「銀膠菊」

菩提本無樹,明鏡亦非臺,本來無一物,何處惹塵埃。 銀膠菊的新聞最近真是不少,看到到篇幅都是希望大家一起來消滅銀 […]

Read More
2009 年 7 月 29 日
[活動]SARA SARA 城市正妹 票選活動

負責內容:企劃+設計+動畫+程式  SARASARA 城市正妹 負責內容:首頁flash頁面裁切製作 […]

Read More
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram