月光林地的網頁技術部

更新圖片功能

modal/upload.php

在步驟6時，我們建立了一個更新圖片的彈出視窗檔案，同時在步10時，我們也預先建立了一個更新圖片的api．

因此，mvim及image的更新圖片功能等於都做好了，以下是完成功能的結果：

列表功能的部份除了欄位有差異外，程式的邏輯是一樣的，因此可以參考 ./back/title.php 中的程式碼片段來快速套用到其他的功能中，因此我們可以直接複製 ./back/title.php ，將檔名改成各個功能的名稱，再進行欄位的修改，即可快速套用。

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

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

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

由題組提供的參考圖，原題意是要求可以同時編輯更新多筆資料，因此我們將資料列表及可輸入資料的表單元件都放在同一個 <form> 表單中，這樣當按下送出按鈕時，所有的表單資料都會被送往後端去處理。
我們的設計希望一支api可以儘可能的處理更多的功能，因此我們設計了隱藏欄位來增加各種屬性，提供後端程式做為判斷的依據。

完成新增資料後，接下來就是要可以在畫面上看到新增資料的結果，也就是把資料表中存入的資料，在網頁上顯示出來，這邊我們採用直接在網頁上取用並echo 相關html標籤的方式來完成資料列表。

題組一中除了total和bottom沒有新增功能外，其它的功能都是能新增資料的，因此我們在設計後台儲存時，希望能使用一支程式就可以完成所有資料表的新增資料，所以我們要考慮如何判斷表單過來的資料是那一張資料表，同時有些功能可以上傳圖片，因此也要考慮是否有上傳圖片的情形。

除了 total及bottom，其他七項後台的功能版面都很像，我們先以網站標題管理這個功能來做示範，先完成這個功能後，相同的程式碼可以快速套用到其它功能去；

在開始製作後台的功能前，因為題組素材提供的版型並不全然是正確的，所以在正式開始製作前，我們要先把一些素材的內容再做一下調整。

由於第一題的前置作業較多，因此建議先把訪客計數器先完成，確認自訂函式及資料庫的存取正常，一來是先看到有個功能完成會比較心安，二來是確認一下前置作業的自訂函式部份有沒有問題。