月光林地的網頁技術部

前台問卷調查雖然也有區分登入前和登入後的不同狀態，但是並沒有限制會員一人只能投一票，因此做完此功能後可以先多投幾票，讓長條圖的效果顯示出來，可以節省評閱的時間。

人氣文章區只更改文章排序方式，同時顯示全部內容的方式改為彈出視窗，最後是按讚時要同時改變人氣的數值：

最新文章區和人氣文章區的功能非常類似，只差在顯示文章內容和排序方式而，所以先做最新文章區，做完後可以直接複製到人氣文章區做修改即可，這邊比較麻煩的地方就在於登入前和登入後的顯示內容及功能會不同，而且同時會影響到三張資料表，因此在製作上要格外小心和細心：

後台的問卷管理功能只有做新增問卷而已，算是簡單的應用，唯一特別的要求是要前端可以直接點擊 更多 按鈕後在畫面上增加選項，而這個功能和題組一的 編輯次選單 一樣，所以我們只需要參照題組一的做法即可。

最新文章管理功能的步驟算是很簡單的應用，和題組一的後台幾乎一模一樣，只差在沒有內容編輯的要求而已，因此只要熟悉題組一的解法，這邊就照著做即可：

題組二的後台相較題組一簡單許多，甚至沒有新增文章的功能，所以我們需要手動先把文章匯入到資料庫去，也因此，所以題組二的後台容易拿分，可以安排在會員註冊登入完成後就先來製作後台的功能，確認這部份的分數是有先到手的。

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

建立分類網誌畫面

/view/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>                          <!--建立一個區塊，用來顯示當前的文章類別-->
    目前位置：首頁 > 分類網誌 > <span id='header'>健康新知</span>
</div>
<div style="display:flex">
    <fieldset style="width:150px;">
        <legend>分類網誌</legend>
        <!--建立分類項目，其中data-type為設定分類編號，和資料表中的type欄位一致-->
        <div><a class='cat' data-type='1' href="#">健康新知</a></div>
        <div><a class='cat' data-type='2' href="#">菸害防治</a></div>
        <div><a class='cat' data-type='3' href="#">癌症防治</a></div>
        <div><a class='cat' data-type='4' href="#">慢性病防治</a></div>
    </fieldset>
    <fieldset style="width:550px;">
        <legend>文章列表</legend>
        <!--建立一個區塊用來放置文章標題列表-->
        <div id="lists"></div>

        <!--建立一個區塊用來放置文章內容-->
        <div id="post"></div>
    </fieldset>
</div>

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

/view/front/po.php部份

1
2
3
4
5
6

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//先載入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)=>{
        $("#post").html("")
        $("#lists").html(list)
    })
}

建立取得單一文章函式

1
2
3
4
5
6
7

//取得指定文章內容函式
function getPost(id){
    $.get("./api/get_post.php",{id},(post)=>{
        $("#lists").html("");
        $("#post").html(post)
    })
}

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

/api/get_list.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

include_once "../base.php";

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

//使用迴圈來印出title文字及link內容
foreach($posts as $post){
    echo "<div>";
    
    //在點擊事件的函式中寫入此文章的id
    echo "<a href='Javascript:getPost({$post['id']})'>";
    echo $post['title'];
    echo "</a>";
    echo "</div>";
}

撰寫後端回傳文章程式

/api/get_post.php

1
2
3
4
5
6
7
8
9
10
11

include_once "../base.php";

//取得指定id的文章
$post=$News->find($_GET['id']);

//顯示文章標題
echo "<span style='font-weight:bolder'>".$post['title']."</span>";
echo "<br>";
 
//利用nl2br()函式把文章的斷行加上<br>
echo nl2br($post['text']);

主題內容區是以頁籤形式來呈現，在解題時，如果考場有附 DreamWeaver 的話，可以考慮使用 DreamWeaver 的頁籤功能來做就可以了，不用五分鐘可以搞定．
題目並沒有說明頁籤的內容是否要從資料庫來取得，從參考圖來看則感覺是純靜態的頁面，因此我們這裏嘗試使用另一種前端的方式來呈現頁籤功能，以防考場沒有 DreamWeaver。

在上一步時我們完成了會員登入相關的功能，題組二前後台共用的部份只剩下登入顯示，其中管理員的登入顯示又和一般會員的顯示不太一樣，在製作時要注意一下。

題組的密碼尋回功能是以明碼方式在前台顯示出來，實務上千萬不要這麼做，這裏只是在測驗應檢人知道資料庫的應用方式。

建立密碼尋回畫面

/view/front/forgot.php 畫面html碼

1
2
3
4
5
6
7

<fieldset>
    <legend>忘記密碼</legend>
    <div>請輸入信箱以查詢密碼</div>
    <input type="email" name="email" id="email">
    <div id="result"></div>
    <button onclick="find()">尋找</button>
</fieldset>

撰寫ajax取回結果函式

/view/front/forgot.php

1
2
3
4
5

function find(){
    $.get("./api/find.php",{email:$("#email").val()},(res)=>{
        $("#result").text(res)
    })
}