月光林地的網頁技術部

網頁課程教材

0%

[技能檢定]題組二 步驟11 建置分類網誌功能

發表於 更新於 歸屬於 ， ，

依據題目描述，分類網誌不使用資料表也是可以的，但是因為我想節省一直開檔複製貼上的工作，所以我的做法是先把文章都匯入到資料庫，這樣後台的文章管理和前台的分類網誌、最新文章、人氣文章的功能都用得到
。

建立分類網誌畫面

./front/po.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!--建立一個麵包屑區塊，用來顯示當前的文章類別-->
<div class="nav">
    目前位置:首頁 > 分類網誌 > <span class="type">健康新知</span>
</div>
<!--建立分類項目區塊，其中data-type為設定分類編號，和資料表中的type欄位一致-->
        <fieldset class='types'>
    <legend>分類網誌</legend>
<a class='type-item' data-type="1">健康新知</a>
<a class='type-item' data-type="2">菸害防治</a>
<a class='type-item' data-type="3">癌症防治</a>
<a class='type-item' data-type="4">慢性病防治</a>
</fieldset>

<fieldset class='news-list'>
    <legend>文章列表</legend>
    <!--建立一個區塊用來放置文章標題列表-->
    <div class="list-items" style="display:none"></div>
    <!--建立一個區塊用來放置文章內容-->
    <div class="article" ></div>
</fieldset>

建立分類項目點擊置換上方導引文字功能

./front/po.php部份

1
2
3
4
5
6
7
8
9
10
11
12
//註冊class type-item的點擊事件
$(".type-item").on('click',function(){
    //取出點擊的文字並放入導航列中
    $(".type").text($(this).text())

    //點擊同時取得分類項目的代號
    let type=$(this).data('type')
    
    //執行取得分類文章列表函式
    getList(type)

})

建立取得分類項目文章標題列表功能

這裏我們使用ajax來取得分類項目的文章標題

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//先載入type=1的文章列表
getList(1);

//註冊class cat的點擊事件
$(".cat").on("click",function(){

    //取出點擊的文字並放入導航列中
    $("#header").text($(this).text());

    //執行取得分類列表函式
    let type=$(this).data('type')
    getList(type)
})

//取得分類列表函式
function getList(type){
    $.get("./api/get_list.php",{type},(list)=>{
        $(".list-items").html(list)
        $(".article").hide();
        $(".list-items").show();
    })
}

建立取得單一文章函式

1
2
3
4
5
6
7
8
//取得指定文章內容函式
function getNews(id){
    $.get("./api/get_news.php",{id},(news)=>{
        $(".article").html(news)
        $(".article").show();
        $(".list-items").hide();
    })
}

撰寫後端回傳文章標題列表程式

/api/get_list.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
include_once "db.php";

//取得所有指定分類的文章
$rows=$News->all(['type'=>$_GET['type'],'sh'=>1]);

//使用迴圈來印出title文字及link內容
foreach($rows as $row){
    echo "<div>";
    //在點擊title連結時的執行取得文章內容的函式，並傳入文章id
    echo    "<a href='Javascript:getNews({$row['id']})'>";
    echo    $row['title'];
    echo    "</a>";
    echo "</div>";
}

撰寫後端回傳文章程式

/api/get_news.php

1
2
3
4
5
6
7
8
9
10
include_once "db.php";
//取得指定id的文章
$news=$News->find($_GET['id']);

//顯示文章標題
echo "<span style='font-weight:bolder'>".$news['title']."</span>";
echo "<br>";

//利用nl2br()函式把文章的斷行加上<br>
echo nl2br($news['news']);