月光林地的網頁技術部

網頁課程教材

0%

[技能檢定]題組一 步驟11 快速套用所有功能的新增

發表於 更新於 歸屬於 ， ，

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

  1. 我們整理了後台的頁面，其中每個功能的資料列表欄位不同，新增彈出視窗中的表單也不同，有些功能有更新圖片。
  2. 我們建立了add,edit,update三支api,每支api都可以依據table名來對應不只一個功能，
  3. 我們透過網址傳參數的方式讓表單可以取得隱藏的資料，比如資料表名稱或資料id

根據以上的描述，在製作其它功能時：

  • api可以不用重寫，因為三支api已經有考慮了不同功能表的差異了
  • 各個功能的顯示欄位及顯示的內容不同，所以前端畫面要各別製作
  • 新增功能的表單也是每個功能都不同，需要各別製作
  • 更新圖片的表單欄位其實相同，只有頁面需顯示的文字不同，可以各別製作，也可以考慮用別的方式來避免建立太多檔案

了解以上的要點後，我們開始逐一來套用後台的功能，先從新增功能來套用，新增功能的差異主要是文字描述的內容不一樣，因此我們可以直接複製 /modal/title.php 並改名為 ad.php 後進行相應的修改即可

AD-動態文字廣告管理

/modal/ad.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--文字的部份直接修改-->
<h3>新增動態文字廣告</h3>
<hr>
<form action="./api/add.php" method="post" enctype="multipart/form-data">
<table>
    <tr>
    <!--文字的部份直接修改-->
        <td>動態文字廣告</td>
        <td><input type="text" name="text" id=""></td>
    </tr>
</table>
<div>
                        <!--隱藏欄位的值，我們將會以網址傳參數的方式傳過來-->
    <input type="hidden" name="table" value="<?=$_GET['table'];?>">
    <input type="submit" value="新增">
    <input type="reset" value="重置">
</div>

</form>

MVIM-動畫圖片管理

/view/modal/mvim.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<h3>新增動畫圖片</h3>
<hr>
                                            <!--有圖片上傳功能的
                                            要檢查enctype有沒有正確設定-->
<form action="./api/add.php" method="post" enctype="multipart/form-data">
<table>
    <tr>
        <td>動畫圖片:</td>
        <td>
            <!--圖片上傳的type要記得設為file-->
            <input type="file" name="img" id="">
        </td>
    </tr>
</table>
<div>
    <input type="hidden" name="table" value="<?=$_GET['table'];?>">
    <input type="submit" value="新增">
    <input type="reset" value="重置">
</div>

</form>

IMAGE-校園映像資料管理

/view/modal/image.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<h3>新增校園映像圖片</h3>
<hr>
<form action="./api/add.php" method="post" enctype="multipart/form-data">
<table>
    <tr>
        <td>校園映像圖片:</td>
        <td><input type="file" name="img" id=""></td>
    </tr>
</table>
<div>
    <input type="hidden" name="table" value="<?=$_GET['table'];?>">
    <input type="submit" value="新增">
    <input type="reset" value="重置">
</div>

</form>

NEWS-最新消息管理

/view/modal/news.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<h3>新增最新消息資料</h3>
<hr>
<form action="./api/add.php" method="post" enctype="multipart/form-data">
<table>
    <tr>
        <td>最新消息資料</td>
        <td>
            <textarea type="text" name="text" style="width:300px;height:150px"></textarea>
        </td>
    </tr>
</table>
<div>
    <input type="hidden" name="table" value="<?=$_GET['table'];?>">
    <input type="submit" value="新增">
    <input type="reset" value="重置">
</div>

</form>

ADMIN-管理者管理

/view/modal/admin.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<h3>新增管理者帳號</h3>
<hr>
<form action="./api/add.php" method="post" enctype="multipart/form-data">
<table>
    <tr>
        <td>帳號:</td>
        <td><input type="text" name="acc" id=""></td>
    </tr>
    <tr>
        <td>密碼:</td>
        <td><input type="password" name="pw" id=""></td>
    </tr>
    <tr>
        <td>確認密碼:</td>
        <td><input type="password" name="pw2" id=""></td>
    </tr>
</table>
<div>
    <input type="hidden" name="table" value="<?=$_GET['table'];?>">
    <input type="submit" value="新增">
    <input type="reset" value="重置">
</div>

</form>

/view/modal/menu.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<h3>新增主選單</h3>
<hr>
<form action="./api/add.php" method="post" enctype="multipart/form-data">
<table>
    <tr>
        <td>主選單名稱:</td>
        <td><input type="text" name="text" id=""></td>
    </tr>
    <tr>
        <td>選單連結網址:</td>
        <td><input type="text" name="href" id=""></td>
    </tr>

</table>
<div>
    <input type="hidden" name="table" value="<?=$_GET['table'];?>">
    <input type="submit" value="新增">
    <input type="reset" value="重置">
</div>

</form>