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

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

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

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

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

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

AD-動態文字廣告管理

/view/modal/ad.php

<!--文字的部份直接修改-->
<h3>新增動態文字廣告</h3>
<hr>
<form action="api/add.php" method="post" enctype="multipart/form-data">
    <table>
        <tr>
            <!--文字的部份直接修改-->
            <td>動態文字廣告：</td>
            <td><input type="text" name="text" ></td>
        </tr>
    </table>
    <div>
        <input type="submit" value="新增">
        <!--隱藏欄位的值，我們將會以網址傳參數的方式傳過來-->
        <input type="hidden" name="table" value="<?=$_GET['table'];?>">        
        <input type="reset" value="重置">
    </div>
</form>

MVIM-動畫圖片管理

/view/modal/mvim.php

<h3>新增動畫圖片</h3>
<hr>
                        <!--有圖片上傳功能的要檢查enctype有沒有正確設定-->
<form action="api/add.php" method="post" enctype="multipart/form-data">
    <table>
        <tr>
            <td>動畫圖片：</td>
            <!--圖片上傳的type要記得設為file-->
            <td><input type="file" name="img" ></td>
        </tr>
    </table>
    <div>
        <input type="submit" value="新增">
        <input type="hidden" name="table" value="<?=$_GET['table'];?>">
        <input type="reset" value="重置">
    </div>
</form>

IMAGE-校園映像資料管理

/view/modal/image.php

<h3>新增校園映像圖片</h3>
<hr>
<form action="api/add.php" method="post" enctype="multipart/form-data">
    <table>
        <tr>
            <td>校園映像資料圖片：</td>
            <td><input type="file" name="img" ></td>
        </tr>
    </table>
    <div>
        <input type="submit" value="新增">
        <input type="hidden" name="table" value="<?=$_GET['table'];?>">        
        <input type="reset" value="重置">
    </div>
</form>

NEWS-最新消息管理

/view/modal/news.php

<h3>新增最新消息資料</h3>
<hr>
<form action="api/add.php" method="post" enctype="multipart/form-data">
    <table>
        <tr>
            <td>最新消息資料：</td>
            <td>
                <textarea name="text" cols="30" rows="10"></textarea>
            </td>
        </tr>
    </table>
    <div>
        <input type="submit" value="新增">
        <input type="hidden" name="table" value="<?=$_GET['table'];?>">        
        <input type="reset" value="重置">
    </div>
</form>

ADMIN-管理者管理

/view/modal/admin.php

<h3>新增管理者帳號</h3>
<hr>
<form action="api/add.php" method="post" enctype="multipart/form-data">
    <table>
        <tr>
            <td>帳號</td>
            <td><input type="text" name="acc" ></td>
        </tr>
        <tr>
            <td>密碼：</td>
            <td><input type="password" name="pw" ></td>
        </tr>
        <tr>
            <td>確認密碼：</td>
            <td>
                <input type="password" name="pw2">
            </td>
        </tr>        
    </table>
    <div>
        <input type="submit" value="新增">
        <input type="hidden" name="table" value="<?=$_GET['table'];?>">        
        <input type="reset" value="重置">
    </div>
</form>

/view/modal/menu.php

<h3>新增主選單</h3>
<hr>
<form action="api/add.php" method="post" enctype="multipart/form-data">
    <table>
        <tr>
            <td>主選單名稱:</td>
            <td><input type="text" name="name" ></td>
        </tr>
        <tr>
            <td>主選單連結網址：</td>
            <td><input type="text" name="href" ></td>
        </tr>
    </table>
    <div>
        <input type="submit" value="新增">
        <input type="hidden" name="table" value="<?=$_GET['table'];?>">        
        <input type="reset" value="重置">
    </div>
</form>

月光林地的網頁技術部