月光林地的網頁技術部

網頁課程教材

0%

發表於 更新於 歸屬於 ， ，

根據版型的提示，前台有一個登理登入的按鈕可以連到登入畫面，登入後到後台時有一個按鈕可以登出，而如果在登入的狀態下停在前台時，原本的管理登入按鈕會變成是可以跳到後台的按鈕，這表示我們需要有一個機制來記錄管理員的登入狀態，才能根據這個狀態對按鈕做出不同的功能，而後台的管理登出按鈕，題目只要求可以跳到管理登入的畫面，並沒有要求要做出真正的登出功能，比如清除session來登出，因此如果時間來不及，可以做成連結跳轉到登入畫面就可以了。時間足夠的話，可以把清除session的真正登出功能也做上。

閱讀全文 »

發表於 更新於 歸屬於 ， ，

版型檔案己經有提供了js程式來做圖片輪播的功能，不過程式本身有點小BUG，最後三張圖片有可能不會出現，這個問題可修可不修，現場評核時只看功能有沒有做出來，不會去驗證程式的小問題，所以我們要做的就是把圖片讀出來，然後讓JS程式去控制要顯示那幾張圖片。

閱讀全文 »

發表於 更新於 歸屬於 ， ，
  • 首頁的動畫及最新消息只需要修改 /front/main.php
  • 搬移動畫 <script> 的位置到動畫區塊後面，不然會發生畫面先空白三秒才開始輪播的問題
  • 要在網頁載入後先寫入第一張動畫圖片，不然動畫區塊會先呈現空白
  • 最新消息區要先判斷需要顯示的筆數是否超過五筆，決定是否會出現”more…”文字連結
  • 處理最新消息的字串以配合內建JS的彈出視窗功能
閱讀全文 »

發表於 更新於 歸屬於 ， ，

建立訪客計數器畫面

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

撰寫表單內容

建立一個可供修改的表單
/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");

發表於 更新於 歸屬於 ， ，

本題組一共有三個地方會使用到分頁功能， 校園映像圖片、最新消息資料、更多消息，其中兩個在後台，一個在前台，在撰寫校園映像功能的後台時，已經先製作過一次分頁的功能了，只要將相關的變數設定好，其他的分頁功能就只需複製程式碼就可以套用了。

在乙級的四個題組中，分頁功能的使用有三題，因此一定要熟悉分頁的製作方式。
請參考 前置作業-程式功能整合測試

閱讀全文 »