月光林地的網頁技術部

網頁課程教材

0%

[技能檢定]題組一 步驟16 製作後台訪客計數器及頁尾版權文字管理

發表於 更新於 歸屬於 ， ，

建立訪客計數器畫面

修改原本的後台頁面內容，整理成符合題意的畫面

撰寫表單內容

建立一個可供修改的表單
/back/total.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div style="width:99%; height:87%; margin:auto; overflow:auto; border:#666 1px solid;">
    <p class="t cent botli">進站總人數管理</p>
    <form method="post" action="/api/edit_info.php">
        <table style="width:50%;margin:auto">
            <tr class="yel">
                <td width="50%">網站標題</td>
                <td width="50%">
                    <input type="number" name="total" value="<?=$Total->find(1)['total'];?>">
                    <input type="hidden" name="table" value="<?=$do;?>">
                </td>
            </tr>
        </table>
        <table style="margin-top:40px; width:70%;">
            <tr>
                <td width="200px"></td>
                <td class="cent">
                    <input type="submit" value="修改確定">
                    <input type="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>
</div>

建立頁尾版權文字畫面

可以複製訪客計數器的頁面內容，修改成頁尾版權頁的內容

撰寫表單內容

建立一個可供修改的表單
/back/bottom.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div style="width:99%; height:87%; margin:auto; overflow:auto; border:#666 1px solid;">
    <p class="t cent botli">頁尾版權資料管理</p>
    <form method="post" action="/api/edit_info.php">
        <table style="width:50%;margin:auto">
            <tr class="yel">
                <td width="50%">頁尾版權資料</td>
                <td width="50%">
                    <input type="text" name="bottom" value="<?=$Bottom->find(1)['bottom'];?>">
                    <input type="hidden" name="table" value="<?=$do;?>">
                </td>
            </tr>
        </table>
        <table style="margin-top:40px; width:70%;">
            <tr>
                <td width="200px"></td>
                <td class="cent">
                    <input type="submit" value="修改確定">
                    <input type="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>
</div>

撰寫共用的編輯api

因為這兩個表單都是送到 api/edit_info.php ，我們的目的是希望用最少的程式來儘可能減少重覆程式碼的撰寫，所以透過表單中所隱藏的 table 欄位，我們可以很容易的在後端使用一支api來同時處理兩個功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
include_once "db.php";
//取得資料表名稱
$table=$_POST['table'];

//將資料表名稱轉成首字大寫的資料表物件變數
$DB=${ucfirst($table)};

//取得id為1的資料
$data=$DB->find(1);

//將資料中對應的欄位修改為post過來的值
$data[$table]=$_POST[$table];

//使用save更新至資料表
$DB->save($data);

//將頁面導回到原本的後台頁面
to("../back.php?do=$table");