月光林地的網頁技術部

網頁課程教材

0%

發表於 更新於 歸屬於 ， ，

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

閱讀全文 »

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

發表於 更新於 歸屬於 ， ，

建立訪客計數器畫面

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

撰寫表單內容

在類別中建立後台頁面需要的參數
/Controller/Total.php

1
2
3
4
5
6
7
function backend(){
    $view=['header'=>'進站總人數管理',
            'table'=>$this->table,
            'total'=>$this->find(1)['total'],
    ];
    return $this->view('./view/backend/total.php',$view);
}

建立一個可供修改的表單
/view/backend/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"><?=$header;?></p>
    <form method="post" action="./api/update_single.php">
        <table width="50%" style="margin:auto">
            <tr class="yel">
                <td width="50%">進站總人數：</td>
                <td width="50%">
                    <input type="number" name="total" value="<?=$total;?>">
                </td>
            </tr>
        </table>
        <table style="margin-top:40px; width:70%;">
            <tr>
                <td width="200px"></td>
                <td class="cent">
                    <input type="hidden" name='table' value='<?=$table;?>'>
                    <input type="submit" value="修改確定">
                    <input type="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>
</div>

建立頁尾版權文字畫面

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

撰寫表單內容

在類別中建立後台頁面需要的參數
/Controller/Bottom.php

1
2
3
4
5
6
7
function backend(){
    $view=['header'=>'頁尾版權資料管理',
            'table'=>$this->table,
            'bottom'=>$this->find(1)['bottom'],
    ];
    return $this->view('./view/backend/bottom.php',$view);
}

建立一個可供修改的表單
/view/backend/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"><?=$header;?></p>
    <form method="post" action="./api/update_single.php">
        <table width="50%" style="margin:auto">
            <tr class="yel">
                <td width="50%">頁尾版權資料：</td>
                <td width="50%">
                    <input type="text" name="bottom" value="<?=$bottom;?>">
                </td>
            </tr>
        </table>
        <table style="margin-top:40px; width:70%;">
            <tr>
                <td width="200px"></td>
                <td class="cent">
                    <input type="hidden" name='table' value='<?=$table;?>'>
                    <input type="submit" value="修改確定">
                    <input type="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>
</div>

發表於 更新於 歸屬於 ， ，

本題組一共有三個地方會使用到分頁功能， 校園映像圖片、最新消息資料、更多消息，其中兩個在後台，一個在前台，我們選擇把分頁功能做在父類別 DB 中，這樣所有繼承的類別都可以快速的引用分頁的功能，而不需要再個別去撰寫分頁的功能。

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

閱讀全文 »

發表於 更新於 歸屬於 ， ，

更新圖片功能

modal/upload.php
在步驟6時，我們建立了一個更新圖片的彈出視窗檔案，同時在步10時，我們也預先建立了一個更新圖片的api，接下來我們把會用到更新圖片的三個功能的頁面給完成；

/view/modal/upload_title.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<h3 class="cent">更新網站標題圖片</h3>
<hr>
<form action="./api/upload.php" method='post' enctype="multipart/form-data">
    <table style="width:70%;margin:auto">
        <tr>
            <td>標題區圖片：</td>
            <td><input type="file" name="img" ></td>
        </tr>
    </table>
<div class="cent">
    <!--附上傳遞過來的table，才會知道要更新的圖片是那一張資料表-->
    <input type="hidden" name="table" value="<?=$_GET['table'];?>">

    <!--附上傳遞過來的id，才會知道要更新的圖片是那一筆資料-->
    <input type="hidden" name="id" value="<?=$_GET['id'];?>">
    <input type="submit" value="更新">
    <input type="reset" value="重置">
</div>    
</form>

/view/modal/upload_mvim.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<h3 class="cent">更新動畫圖片</h3>
<hr>
<form action="./api/upload.php" method='post' enctype="multipart/form-data">
    <table style="width:70%;margin:auto">
        <tr>
            <td>動畫圖片：</td>
            <td><input type="file" name="img" ></td>
        </tr>
    </table>
<div class="cent">
    <!--附上傳遞過來的table，才會知道要更新的圖片是那一張資料表-->
    <input type="hidden" name="table" value="<?=$_GET['table'];?>">

    <!--附上傳遞過來的id，才會知道要更新的圖片是那一筆資料-->
    <input type="hidden" name="id" value="<?=$_GET['id'];?>">
    <input type="submit" value="更新">
    <input type="reset" value="重置">
</div>    
</form>

/view/modal/upload_image.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<h3 class="cent">更新校園映像圖片</h3>
<hr>
<form action="./api/upload.php" method='post' enctype="multipart/form-data">
    <table style="width:70%;margin:auto">
        <tr>
            <td>校園映像圖片：</td>
            <td><input type="file" name="img" ></td>
        </tr>
    </table>
<div class="cent">
    <!--附上傳遞過來的table，才會知道要更新的圖片是那一張資料表-->
    <input type="hidden" name="table" value="<?=$_GET['table'];?>">

    <!--附上傳遞過來的id，才會知道要更新的圖片是那一筆資料-->
    <input type="hidden" name="id" value="<?=$_GET['id'];?>">
    <input type="submit" value="更新">
    <input type="reset" value="重置">
</div>    
</form>

發表於 更新於 歸屬於 ， ，

完成網站標題圖片管理的功能後，其它六個後台項目的畫面及功能都差不多，所以可以使用相同的模式來快速的套用到其它功能去，在套用之前，我們先來快速回想一下，我們做了那些事來完成網站標題管理的功能，這樣我們在套用的時候才會有效率，而不是複製貼上而已：

  1. 我們整理了後台的頁面，其中每個功能的資料列表欄位不同，新增彈出視窗中的表單也不同，有些功能有更新圖片。
  2. 我們建立了add,edit,upload三支api,每支api都可以依據table名來對應不只一個功能，
  3. 我們在類別中建立了backend()這個方法，後台頁面需要的資料都可以在這個方法中先產生好，再交由view()去產生頁面內容
  4. 我們透過網址傳參數的方式讓表單可以取得隱藏的資料，比如資料表名稱或資料id
閱讀全文 »

發表於 更新於 歸屬於 ， ，

更新圖片的表單我們在步驟6時已經建立好了，但是更新圖片的按鈕是到步驟8時列出資料才看到，我們在按下按鈕時會同時發出table及id兩個參數供表單放入隱蔵欄位中；
一共有三個功能會使用到類似的表單，而我們的設計方便讓我們只需要專注在表單中文字差異的部份即可。

閱讀全文 »