這周花了三天在做三四題的第二次解題練習 ，雖然目前的解法己經固定下來，但是明顯的熟練度還不太夠，總是會需要時間再回想一下要怎麼解，這造成了三四題在解題時間上的延長，距離術考應考大概還有一個半月時間，希望能在應考前把解法記熟。

這周在解題時特別在每一個步驟的段落做一下紀錄，原本只是想當做重新寫解題網頁時的參考，同時提醒自己每個步驟會用到的一些關鍵語法，但是到了第四題時，索性把每一個段落的時間也記錄上去，這會比之前直接看倒數計器要來得有價值，可以更徹底的分析自己的速度卡在那些地方；

第三題解題紀錄：

1. 搬移檔案及整理目錄
　　PHP.ini->[Date]->"Asia/Taipei"
2. 開資料表手動塞資料
　　分類資料表增加count欄位
3. 撰寫base.php
　　pdo連接語法 / session_start() / $today
　　建立分級陣列
　　建立常用自訂函式
　　getRow($table,$data)->單一條件單筆資料
　　allData($table,$type,$data)->單一條件全部資料或全資料表資料
　　delData($table,$data)->單一條件資料刪除
　　upData($table,$seq,$data)->單一條件更新資料
　　newData($table,$data)->新增資料
4. 建立前後台版面架構
　　主要內容拆離成單獨立檔案，以include方式載入主內容區
5. 建立後台版型
　　css建構
　　三個頁面版型先建構完成
　　新增及編輯院線片頁面先拉好
6. 建立前台版型
　　院線片清單先完成並做好分頁功能
　　預告片先建好div分層，採固定數字即可
7. 院線片簡介頁面完成
8. 建構訂票功能選擇畫面
9. 建構劃位功能畫面
10.建構訂票完成畫面
11.製作後台登入功能
12.製作預告片海報後台列表
　　製作新增預告片海報功能
　　製作刪除及編輯資料功能
　　製作更換排序功能
13.製作院線片後台列表
　　製作刪除資料功能
　　製作更換排序功能
　　製作新增/編輯院線片的按鈕連結
　　製作顯示/隱藏功能
14.製作訂票管理列表
15.製作訂票選擇畫面功能
　　selMovie()/selDate()/selSession()
　　以ajax方式來和api.php做溝通
　　日期的計算以$today和ondate +2days的日期差來計算
　　各項選擇的結果都存入SESSION備用
　　場次的計算要加算是否為當天，非當天一律是五場，
　　當天的話則要計算時間是否在下午兩點後，若在下午兩點前一律為五場。
　　增加判斷是否已經有在session中存在己選擇的項目(上一步的記憶功能)
16.製作劃位功能
　　先以array_fill()來產生一個冇20個0的陣列
　　利用array_merge()來合併己訂的位置，
　　將己訂的位置改為1
　　產生劃位畫位
　　以prop("checked")來驗證座位是否被點選
　　array.push->在陣列中增加元素
　　array.splice(index,1)->在陣列中移除一個元素
　　array.indexOf()->回傳陣列中某值的索引值
17.訂單編號直接以文字格式來儲存，
　　產生方式為從資料表中取最大的序號值來加1(max(seq)+1)，
　　再以sprintf()來格式化輸出(sprintf("%04d",$s))
18.訂票功能完成後接著做訂單管理功能的快速刪除及單筆刪除功能
19.製作預告海報的下方按鈕顯示及移動功能
20.製作預告片海報上方顯示功能
21.製作按鈕切換海報功能
22.回頭製作後台院線片管理的新增院線片及編輯院線片功能
23.最後製作預告片海報轉場動畫及自動播放功能
　　以json格式產生一個id=>ani對應的陣列，
　　使用Object.keys(array)[x]來取key值
　　淡入淡出->現有的fadeOut，下一張fadeIn
　　滑入滑出->現有的先定位，下一張定位在右側可視區外，兩張同時向左移動同等寬度
　　縮放->現有的先定位，下一張先縮小到零高度及零寬度並定位在中間位置，
　　現有的先往中間縮小到零高度及零寬度後，
　　下一張開始放大到容器的高度及寬度並定位到容器的左上角，
　　現有的記得要先隱藏並恢復大小。
24.時間夠就多加一個滑入按鈕區時暫停自動播放的功能，免得動div的計算會出錯

第四題解題紀錄：

1.整理版型及搬移相關目錄及檔案(10分鐘)
2.建構base.php(20分鐘)
3.建構前後台需要include的switch語法(10分鐘)
4.製作最新消息頁面及後台頁尾版權管理(20分鐘)
5.手動塞入分類及商品資料(20分鐘)
6.製作分類選單(15分鐘)
7.製作主頁商品清單(20分鐘)
8.製作會員登入及管理員登入頁面(5分鐘)
9.製作會員註冊頁面(5分鐘)
10.製作購物車/結帳/訂單詳情頁面(15分鐘)
11.製作商品詳情頁面(5分鐘)
12.製作管理員頁面(3分鐘)
13.製作會員管理/編輯會員/訂單管理頁面(10分鐘)
14.製作新增管理員/修改管理員權限頁面(7分鐘)
15.製作新增商品/修改商品頁面(6分鐘)
16.製作商品分類與管理頁面(5分鐘)
17.製作商品分類與管理功能(35分鐘)
18.製作新增商品與修改商品功能(30分鐘)
19.製作會員註冊功能包括api檢測帳號功能(20分鐘)
20.製作會員及管理登入功能(15分鐘)
21.製作新增管理員功能(4分鐘)
22.製作管理員清單及修改/刪除管理員功能(15分鐘)
23.製作後台管理員權限功能(10分鐘)
24.製作會員管理清單功能(3分鐘)
25.製作編輯會員功能(5分鐘)
26.製作訂單管理清單功能(5分鐘)
27.製作訂單詳情功能(10分鐘)
28.製作購物車功能(25分鐘)
29.製作結帳功能(15分鐘)
30.修正後台訂單管理功能(5分鐘)
31.補做商品詳細資料功能(3分鐘)
32.補做首頁會員登入及管理登後的連結變化(5分鐘)
合計381分鐘

即使已經有了優化過的解法，我也沒把握三，四題可以在四小時內完整做完，但是追求及格應該還是可以的。

重新解第四題花了大概八九個小時，這次比較不趕時間，所以重新檢視一下題目的要求及改善解題方式，雖然PDO及自訂函式己經幫忙省了不少功夫，但是第四題有很多畫面需要刻，雖然第一題也很多畫面要刻，但大多可以用複製貼上來完成，第四題的畫面差異比較大，所以刻畫面的部份浪費了不少時間，這部份的工作也沒有什麼好的解決方式，所以最終要靠PHP的部份來省時間。

這次比較大的突破是在選單的部份，由於選單除了要呈現大分類和中分類之外，還要統計各類別的商品數，之前的做法是在秀出選單時再各別去撈商品數出來，這個做法除了sql語法麻煩之外，有幾個選單就要去資料表query幾次的做法，其實效能很差，現在改善的做法是在選單的table加一個count欄位，然後寫一個函式去更新各類別的商品數，接下來就是在有任何影響到商品增減的動作上執行一次這個函式來同步計數的變化就可以了，這樣在做選單時只要一次存取就可以完成選單功能了；不過目前題目的設計上還是存在著問題，由於後台是可以刪除分類的，這會造成己經有分類紀錄的商品找不到對應的分類，也會造成統計上的錯誤，目前無解，除非題目做出修正。

另外在購物車的部份，之前大概花了三十多行在做登入狀態及購物車是否有商品的判斷，現在也換了一個做法，把購物車的陣列改成key-value的型態來分別儲存商品序號(key)及數量(value)，同時也把購物車的判斷流程單獨包成一個函式，這樣一來整個程式碼少了一半，而且也簡潔許多，至於存儲的部份，之前使用兩個陣列來儲存商品及數量，現在改成只要一個陣列就夠了，資料表也少了一欄。

修改後的做法

修改前的做法

後台的部份，原本最麻煩的分類及商品部份是做成兩個檔案來呈現，但看示意圖怎麼看都覺得應該是同一畫面的東西，所以索性改成在一個檔案中分為上下兩個功能的方式來呈現，這樣也少了一個跳頁的處理，同時也可以共用相同的js函式，比如刪除資料的功能，只要傳入資料表名及序號，就可以透過ajax功能去刪除對應的資料，類似的處理方式也可以減少不少js程式碼的工作。

最後是刻畫面的問題，目前能稍微加快作業的方式就是儘可能先把需要刻畫面的部份都先刻好，同時也把檔案都準備好，第四題我用上了二十多個檔案，這樣象購物車和後台訂票詳情的地方畫面都類似，就可以先用複製的方式先做好，然後再統一來處理程式碼的部份，這樣在解題上會比較順手一些。

最近因為工作上的需要，花了點時間研究一下Canvas的使用，目前許多工作職缺強調HTML5的，大多指的是對Canvas或video這類新標籤的熟悉，Canvas是一個畫布系統，採點陣圖的方式來呈現，搭配javascript後，除了簡單的平面圖形之外，也可以拿來做成動畫或遊戲。

我的練習是從做一個網頁小畫家開始的，一開始的功能還算簡單，畫畫線條，改改顏色什麼的都還不難，後來想到選顏色這件事是否能直接用Canvas來做一個時，花了我不少時間，一開始採用計算顏色然後畫出來的方式，感覺顏色怪怪的，研究後發現無法單畫一個點，內建函式提供的指令中沒有單獨畫一個點的功能，至少是兩點一線或是矩形，後來一路研究下去，發現要直接去操作Canvas的象素單位陣列，這牽涉到Canvas的原理是把一張畫布上的每個點的色彩資訊以一維陣列的方式展開的，為了製作這個陣列，我得把原本用來算色盤的HSL色系再改成RGB的色系再寫回去陣列才可以，所以我又花了時間研究色彩系統的轉換公式，最後是stackoverflow上找現成的來套用，做出來的成果如下圖，差異在於色彩的準確度上，使用畫線的方式來製作的色盤因為計算出來的hsl數值存在著一些誤差，在函式的自行進位後有許多相鄰坐標的顏色其實是同一色，所以看起來漸層模糊比較嚴重，而使用轉換公式再轉回rgb後，色彩的數值範圍變大，因此重覆的色彩數值減少，色盤看起來的顏色就比較飽滿一些。

色盤差異

後面有時間會再繼續研究一些比較實務的操作，象是圖表的製作或是小遊戲的製作。