[教學] CodeIgniter 4 快速上手 (三) 建立簡易最新消息-前臺顯示篇

本篇是接續[教學] CodeIgniter 4 快速上手 (二) 建議簡單的簡易最新消息-新增篇 的第三篇,我們做完了C (Creat,新增)接着我們要來學 R (Read,讀取) ! 到目前的進度,你的資料庫應該會有一些測試資料了,然後你的list 頁目前還沒串接資料,所以你現在news的首頁就就跟剛開始一樣,如下:

News 首頁列表

除了你點擊Add News 會到新增內容的表單頁,而表單頁也可以正常送出資料以外,上圖的列表是不會撈到資料的,確定我們的起始點一致,我們要開始進入本次的教學囉!

step1. 設定要撈出的資料

打開位於app > Model > NewsModel.php , 我們要擴展這隻Model 撈資料庫的功能,這篇我們要教的是「讀取 read」的部分,所以我們新增一個function 叫getNews(當然你也可以換個名字),然後在裡面撈出資料庫裡面全都的資料:

class NewsModel extends Model
{
    protected $table = 'news';
    protected $allowedFields = ['title', 'content', 'insertTime','updateTime'];

    // read
    public function getNews(){
        return $this->findAll();
    }

}

上面加粗 read 的那4行就是這次我們要用到的model 裡的 function,只要用fundAll()這個內建function就可以取得全部在news 資料表中的資料。

設定完 Model 我們要來調整我們的 Controllers,讓 Controller 可以使用我們剛剛設定好的 model 裡的 function getNews(),由於我們是要調整列表,所以打開app > Controllers > News.php, 然後調整 function index() :

public function index()
{
        $model = new NewsModel();
        $data['list'] = $model->getNews();
	return view('list',$data);
}

原本的index() 裡我們只有 return view (‘list’) , 現在我們建立了一個 $model 是使用 NewsModel(),接著我們建立一個陣列叫 $data,把 getNews() 取得的資料都塞進 $data[‘list’]裡面,接著在呼叫view的時候把 $data 丟到view裡,這就是上面這段程式在做的事。

step2. 確認資料有正確取出

不得不說CodeIgniter 4 真的方便很多,只要打開你本機的測試站,在開發模式下右下角會有一個小火焰🔥,點擊小火焰你會打開CodeIgniter 4 debug 視窗,在下方分頁切換到Vars ,然後你就會看到以下畫面:

切換Vars分頁觀察$data

我的畫面上寫著 list, 代表我們先前Controller 裡面的 $data[‘list’] 有正確丟到view 裡面, 然後 list 是一個 陣列(array) ,裡面共有 21 筆資料,如果你點擊 array 21 就會看到這 21 筆資料放在一個格子裡:

list 裡面的資料

如此一來我們的資料就成功從資料庫取出並將資料拋到view了。 如果你仔細看你發想我的資料跟你的不同,我的 id 是倒著排的,也就是最後新增的資料會在最上面,正常來說我們現在看的網頁都是這樣倒著排序,如果你也想要這樣,你只需要打開負責撈資料庫的model,調整 getNews() 如下:

public function getNews(){
        return $this->orderBy('id', 'desc')->findAll();
}

我們在findAll() 前面指定排序方式是以 id 為準,然後倒著排序(desc),一般預設值都會是順著排(asc)。

到這裡,我們就只剩下 view 要處理了!

step3. 調整View 讓資料顯示在畫面上

由於我們的資料是多筆陣列,所以我們來用foreach吧!處理多筆資料肯定是要用迴圈,而陣列也需要一筆一筆處理,所以foreach 是最佳選擇。我們先來看程式碼吧!然後我在慢慢解釋:

<h1>News List</h1>
<a href="<?= base_url();?>/news/create">Add News</a>
<ul>
    <?php foreach($list as $row):?>
        <li>
            <h3><?=$row['title'];?></h3>
            <p><?=$row['content'];?></p>
            <hr/>
            <p>
                <span>inset:<?=$row['insertTime'];?></span>
                <span>update:<?=$row['updateTime'];?></span>
                <a href="<?= base_url();?>/news/edit/<?=$row['id'];?>">Update</a> / 
                <a href="<?= base_url();?>/news/delete/<?=$row['id'];?>">Delete</a>
             </p>
         </li>
    <?php endforeach;?>
</ul>

上面是 views 裡的list.php 中 body 內的內容,我們在controller 裡的 $data[‘list’] ,到了view 就變身成為了 $list,就像你在debug Vars 裡看到的一樣。首先我們先用foreach 把 $list 裡的資料一筆一筆拆出來,每一筆我們都叫他 $row 然後因為我們要重複的是 li 的結構,所以 foreach 是包在這裡。 接著依照html 結構帶入資料, 例如h3標題的資料就是$row[‘title’],內容則是$row[‘content’] 以此類推,你可以發現我把新增資料的時間與更新時間都放上去了,然後要注意的是 update 跟 delete 這裡連結的 href 設定,是呼叫 function edit() 跟 delete ,然後在帶上ID,這樣之後我們要做編輯還是刪除才會有個唯一值,可以取得我們要哪一筆資料。

到這裡,你的 讀取 read 就都完成了! 恭喜你又往前邁了一大步!點擊以下連結可以下載這一篇的打包檔喔!

發佈留言

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

返回頂端