今天接續昨天，帶解第二題的最新文章部份，我則是自己在做問卷調查的部份，昨晚試做用一張資料表做問卷，雖然理論上可行，但因為題目有要求編號，一張資料表要處理編號比較麻煩，所以今天改成兩張資料表來做，不過功能很快做完，但是在調整視覺上花了不少時間，這部份應該是只能靠熟練來強化了．

因為做完了第二題，所以除了昨天的注意事項外，今天可以來紀錄一下自己的心得：

1.網站標題區算是最簡單的部份，只要套用PHP的日期相關函數就可以了

2.瀏灠人數的部份需要資料庫來紀錄，我原本的做法是在資料表中新增當天的日期，然後去更新每日的瀏灠人數再加總，不過這樣做需要去判斷是否存在當日日期的資料，而老師的做法是直接新增一筆當次瀏灠的日期紀錄，直接加總就可以了，這做法比較簡單，也較適合考試搶時間的做法．

3.主選單區-題目沒要求資料庫功能，所以主選單區直接html寫死就可以了，不過各連結所link的頁面我是用js的lo()函式來載入各所需要的頁面，好處是我只需要一個首頁的頁面就夠了．不需要每個選單再連結一頁也不需要include各個php檔案進來．

4.動態文字廣告區-送分題，直接字打上去用<marquee>包起來就好了

5.會員登入登出區-本題有不少需要判斷會員登入狀況的地方，因此這邊我是做了SESSION來紀錄會員登入與否，然後再套用到需要的地方，比如登入後顯示歡迎語句及登出按鈕

6.登入檢查，這邊我開始使用jQuery來處理，檢查和回傳資料，都以jQuery來處理，可以省不少功夫

7.註冊及忘記密碼功能，不算難，尤其以jQuery來處理前端檢查後，直接送後端php去新增及查詢資料，不需要另外處理跳頁．

8.主內容顯示區-這邊開始題目的描述不太清楚，在沒有特別的要求的狀況下，首頁的頁籤效果可以直接使用dreamweaver來完成，我自己是使用資料庫的方式來處理，包括頁籤的效果也是使用css和js搭配而成，資料撈取的部份則是以撈取各分類的最新一筆文章為主．

9.分類網誌－這邊也沒說要使用資料庫來做，我看另一個解題是直接寫死在html碼中，我自己則是使用資料表來做，當成是練習，這邊需要對導覽列做參數化，在點選各頁面時，同時送出參數，再由各分頁接收後顯示在導覽列中，而各分頁內的再導覽則是使用js來抓值後把文字加到導覽列去，一般導覽列應該會要求做link，但這邊沒有，那就算了，僅做顯示之用；分類網誌的文章內容我是使用jQuery來取回文章內容再顯示在區塊中．

10.頁尾版權區-也是送分題，把字打上去，年份改一下就好了，版型檔案已經把QRcode設好了．

11.建置最新文章區-題目沒有要求說要新增文章的功能，所以文章可以直接用phpmyadmin塞進資料庫，我是有做時間紀錄，因此我做最新文章是以新增的時間來排序，如果只為了考試，其實用文章序號來排序也可以；這邊需要針對登入狀況來判斷要不要顯示按讚，而按讚的功能則是使用版型檔案附的一支js函式來處理，資料庫的部份需要多加一張表來紀錄每次按讚的log，然後再去文章資料表做加一減一的計算;分頁的功能不算難，用最簡單的方式做出來就可以了．

12.人氣文章區-排序改成按讚數由多到少排序，其餘的功能和最新文章區差不多，利用彈出頁面來顯示詳細內容的功能則是利用jQuery來完成．

13.問卷調查-這裏的問卷調查功能比之前練習的要簡單一些，就只是多了一個判斷登入與否的動作，但是沒有要求是否一人一票．

14.後台管理頁面-這邊也沒要求要過濾管理者帳號，所以可以登入後到管理頁面應該就可以了，我是單獨再做一頁admin.php，然後也只是改了主選單的文字而已．

15.帳號管理-也算是送分題，新增會員的功能和註冊會員是一模一樣的，刪除功能也很簡單可以完成

16.最新文章管理-這裏只要求做分頁及顯示 / 刪除功能，可以很簡單的完成

17.問卷後台管理-這邊只有要求做新增問卷的功能，算是半送分題，增加更多選項的功能使用js來做很簡單，然後送出之後再分兩張資料表來分別寫入就完成了．

整體來說第二題會花比較多時間在CSS的調整，主要是因為沒空去研究原本附的CSS，所以大多數的樣式都是自己加上去的；功能的部份，我使用了大量的jQuery，但是為了預防萬一，所以第一次做的時候，每個php的回傳功能我都獨立一個檔案來做，其實有點浪費時間，我考慮第二次解題時，統一寫一支php程式來處理會使用到的callback，比如，取出文章標題，取出全部文章內容，取出文章第一行，查詢帳號是否重覆，查詢密碼等等，都合在一個php中，然後用jQuery去送參數並取回值即可．

今天開始上第二題的解題，不過我完全沒在聽，只有針對題目有模糊不清的地方，詢問一下老師的意見，其它時間我則是繼續自己的進度，今天己經做完大半功能剩下最後問卷調查，估計明天能完成。

關於第二題，我有問了一下班導，因為在研究題目的時候發現題目內容很不統一，題目的描述和示意圖也有出入，老師說這大概是因為原始的題目太多，經測試後發現大多數人無法在四小時內解完，所以後來刪減了內容，但是沒有去做好校對的工作，就變成這樣子了，畢竟網乙開辦五年來，只發出了不到二十張證照。

依我自己做了大部份的內容來看這題，在解題上大概有幾點要注意的：

1.原始題意和第一題其實很類似，整個網站的內容都要以資料庫的方式來控制，但這樣做下來會太鎖碎，所以簡化後，變成很多部份其實不用資料庫，做假的也符合題目要求。

2.我自己試著大多數功能都使用資料庫來製作，在時間上我是覺得還可以，就是要熟練，但是不夠熟練或對資料庫沒把握的同學，我還是建議在考試時能偷就偷，畢竟以時間內符合要求為主，實務上的做法是另一回事。

3.就原始素材的內容來看，很明顯的使用了不少ajax的技巧來製作，所附的jquery函式也直接使用了$.axja()來調用php的callback，因此能善用ajax的話，可以省下不少跳頁的處理及簡化不少php程碼

4.後面三題都有使用到session或cookie的地方，這部份只能請同學們自行再加強，既然考試的四題都會用到，那就早點熟悉它吧。

今天從參考書的第七章開始上，主要是一個CD封面的製作，這邊有提到了工作區域的應用及管理，其它的則是之前學過的技巧的整合應用，難度不大，只是操作上比較花時間。

CD封面製作

接是第八章的活動DM製作，這裏只是圖樣及筆刷的應用，也沒什麼難度。

圖樣旳應用

下午講解第九章的信封，信紙及LOGO的製作，主要是關於字型的應用及實務上一些印刷物的製作細節。

LOGO製作

早上時間老師先開了個簡單的班會宣達一些事，然後就給大家時間繼續製作LOGO競賽的內容，因為中午要交件了，我是凌晨靠學妹幫忙調配色才做完的，也懶得再改了，簡單就好。

Logo競賽作品

下午老師做了數位排版的簡報，這部份我覺得滿受用的，因為自己沒有這方面的天份，有些方法可以依循的話，至少不會弄出太離譜的東西來。

排版原則介紹

最後是打掃時間及自習，我就開始做乙級術科第二題了，第二題的題目說明非常不清楚，後來老師說他問過鑑評委員，大意是說本來題目內容要求的製作項目很多，但找人來試解都無法在四小時內完成，於是只好刪減一些內容，但是題目的說明並沒有因此而改得很好，因此就造成有些模糊不清，這些模糊不清的地方就變成可以自由發揮的地方，如果只是為了考試，就可以有些取巧的做法出來；我個人是傾向先用比較符合實務製作的方式來解題一次，如果時間無法壓到四小時內，再來思考要不要取巧的問題。

今天老師說要介紹一下jQuery Mobile 不過完全沒講到語法之類的，只有和大家說要去那個網站找教學資料及如何匯入jQuery mobile的函式庫；

jQuery mobile官方網站

後來又介紹了EZoAPP這個jQuery mobile線上版型工具，算是滿實用的，可以用來應付小型或快速模版，不過老師只有教到如何套用而己，實做上需要用到的資料串接及js語法還是沒有提到，只能靠大自己去摸索。

EZoAPP 線上版型工具

最後老師介紹了google表單的製作，因為這是比較快的資料建置手段，而且可以快速套用在EZoAPP的一些版型中。

google 表單

作業是要大家用EZoAPP做一個個人的介紹網站，可以在手機上瀏灠用的，於是我就花了一個晚上，弄了一個簡易版的手機訂便當網站，加上google試算表的即時分析統計功能。

簡易線上訂便當

今天老師把第一題的前後台功能都做完了，到後面己經沒有什麼時間下來一個一個看問題了，第一題最麻煩的地方是選單管理和顯示的部份，關聯次選單的部份會比較亂一些，前台的部份在套js的部份可能需要點時間來理解，畢竟我們在js的部份實作比較少，兩位老師有關js的部份都只能算是介紹一下而已，整個js要學起來，要花的時間不輸給PHP。

我自己下午開始做第二題，發現第二題的題目說明非常不清楚，示意圖的東西和素材提供的內容也有些出入，真的令人頭大，但是在比對歷屆題目的過程中，其實我也有注意到每年的素材似乎都有一些變動，比如上一個版本使用的class名是mask，新版本改成了all，雖然是小小的改變，但這表示每年都有在維護對吧，那為什麼不順便把題目的說明也做個修改呢？

第一題我有90%的內容是使用PHP來解的，包括一些驗證的做法都是用PHP帶參數在各檔案間傳值來達成，但這樣的做法當檔案一多時就又亂了，而且URL的參數愈帶愈長也很礙眼，所以第二題開始我希望嘗試著把JS 和 AJAX的應用比例提高，今天小小的測試一下後感覺還不錯，而且也發現原本素材提供的js檔裏就有附一個ajax的函式在裏面，這表示原本的題目設計時就己經使用了ajax來解題了，不用白不用。

今天主要是繼續第一題的解題，老師的速度明顯加快，不過做法和我推測的差不多，就是把之前做過的內容複製一份來改，這樣速度才會快，不過我一整天精神都不是太好，不知道是不是被傳染了。

今天的進度幾乎己經做完八成了

到下課時己經講解到管理者帳號管理了，所以明天主要在選單管理和前端的所有顯示。

老師流感還沒有完全好，拖著病體來上課，精神可嘉，
今天正式上網頁乙級的術科解題，原本老師希望大家先當作業先練習一遍，但看起來只有我做完，所以今天老師的講解我在理解上就快很多了。
老師的解法主要是利用include的方式把php檔案整合進後台或前端頁面，這方法雖然還是會有檔案過多的問題，但比起iframe，我覺得還算是比較好掌握的，而且一個檔案一個功能的做法，對於大多數同學來說也是比較好理解的做法。
程式碼的內容我打算等全部做完一次後再另外打包提供下載，網誌的部份只說一下解題的重要觀念及一些可以利用的小技巧，重要的是要各自找到自己能掌握的解法及步驟，並且熟練它就可以了，照著老師或其他同學的做法做，就算背得下來，臨場時有個環境上的變化或出了點錯卻找不到問題，那就完了。

基本觀念的部份，老師把功能拆成不同的檔案來處理，相當於是一個一個小函式，需要的時候再inlude進來使用

完成後台的增刪修之後，前端的部份就看需要把資料叫出來，再放到需要的位置中去，可以利用SESSION或include的方式來達成

第一題雖然後台的部份有九個項目要做，但並不算難，同樣的動作一直重覆而己，所以到最後就只能說是在考驗打字速度和整合檔案的能力了。

今天是網丙課程的最後一天，老師一樣要大家複習上周的第五題，然後做完的同學就可以自習做其它的作業，接著老師就說了幾個她遇到名人卻不認識對方的事當笑話給大家聽，還滿可愛的。

我利用上午的時間把乙級第一題的實作心得打成文章，然後下午則是把資料表截圖出來後放上網誌做紀錄，希望大家可以先預習一下，其他同學大多是在做logo競賽的作品，為了一個運動手環，大家很拚呢！

課程過了一大半，暖身期己經過了，接著進入的下半場是一個衝刺期，要開始來準備更新履歷表及預熱找工作的溫度了。

上周完了成網頁乙級第一題的練習，自己實做一次的感想是題目雖然不難，但要在四小時內寫完除了多練習，還得有別的寫法來加速才行，我第一次的做法是完全用PHP來製作，一個系統寫一組PHP的程式來處理資料的寫入和讀取，然後用switch的方式來區分不同系統需要對應的程式區塊，前端的部份則用到少許的js，同時也利用了原本提供的素材檔案本身的jQuery程式來處理前端的工作，這樣的作業方式我只用上了五個php檔，就是原本版型的四個檔案加上一個用來處理資料庫資料的PHP檔，相較其它網路上的解題範例拆成一二十個檔案來製作，然後用iframe連來連去的，我覺得我的做法還是比較簡潔一些的，如果練熟，應該有機會在四小時內做完，因為有些系統的內容要求其實很類似，可以重覆使用程式碼，這也是我想換一個方式寫的原因，感覺要把時間壓到三小時內才比較有安全，以免現場考試有個意外會卡很久．

題目概述：
題目請看題庫的說明，這裏針對我實做過的每個系統要注意的地方做個心得分享：
1.版型檔案：題目本身提供的版型檔案有四個，但是關聯的css/jQuery/js檔卻分成四個目錄來放，我自己檢查後發現檔案內容根本是一樣的，差別只在有個目錄中多了icon目錄放一些小圖，這邊建議是可以把檔案整合起來放一個目錄就好，不然css或js要做修改時要改四個目錄也是很麻煩，另外原始html檔中有附一些js及jQuery小程式，分別是用來處理新聞的顯示，校園映象圖片的翻頁及彈出視窗內嵌網頁，這三個程式好好利用也是可以省下一些php的撰寫時間．

題目版型檔案提供的modal彈出視窗

2.網站標題管理：這邊主要是圖片上傳後要可以在各頁面的上方標題區顯示，後台則是可以做新增/修改/刪除，新增和刪除都算簡單，但修改有個要注意的地方是如果照老師之前教的只改檔名不更新資料庫的話，那麼更換後的圖片並不會立刻顯示出來，所以為了避免考試時被扣分，建議在更換圖片這個功能製作時，以新檔名的方式去更新一下資料庫，這樣header回後台時可以立刻看到新的圖片；另外由於同時間只能顯示一張標題圖片，因此，這裏的顯示要用radiu按鈕並且群組起來，這樣才能確保同時間只會有一個標題圖片被選取．

網頁標題資料表

3.動態文字廣告區：這個功能應該是最簡單的，文字新增後在前端把要顯示的文字讀取出來，串成一個以空白間隔的大字串，然後放在各頁面的<marquee></marquee>區塊內，如果要改樣式來美觀的話就直接加在行內就可以了，考試時求的是速度，另外去改css並不會比較快．在新增時，我會用上原本版型檔內提供的op()函式，這個函式是jQuery的程式，用來把外部網頁的HTML程式放到指定的區塊中，這樣就可以在一個網頁中同時處理php的程式了，但是我看其它的解題都是用iframe在處理後台的程式，感覺會亂掉．這邊要注意的是顯示的地方要改用checkbox，同時在修改時要一次處理多筆資料，所以要以陣列的方式來宣告表單欄位名稱，在處理表單資料時，我的做法則是顯示和刪除的欄位名都加上id，只有資料序號和文字內容是用陣列方式傳送，這樣在處理資料時，我只需要直接根據欄位名就可以判斷該筆資料是要刪除還是顯示．

文字廣告資料表

4.動畫圖片輪播：後台的部份跟前面的兩個系統差不多，只是前台本身有提供一個輪播程式ww()，只要把檔案叫出來放入js的陣列中就可以了，其它解題的做法怪怪的，可能不知道php和js可以搭配使用．

動畫輪播資料表

5.校園映像區：這裏有個製作縮圖的要求不是很清楚，是否真的要製作兩張縮圖還是前端頁面的顯示改大小就好？後台的部份要求做分頁功能，這部份不算難，但是分頁的原則要掌握清楚才能寫得快，我是打算改用jQuery的做法來處理分頁，這樣我可以一次撈出所有的資料，然後用分頁來控制顯示即可，如果用PHP的做法還要去算資料庫每頁的撈取筆數，其實有點沒效率．前端的部份也是有提供一個pp(x)函式可以用來做翻頁的效果，但是原始程式有點小bug，而且一次只能翻一張，所以我是改成了一次翻三頁，然後參數的部份則是用php語法先算好後寫到js的程式區塊去，其它的解題是用php去每次撈三張出來顯示，這樣還要去算每次select的張數，實在是很麻煩，我的做法則是一次撈出全部的圖片，然後用js去控制每次只顯示三張，這樣前端頁面就不用一次去呼叫資料庫，頁面也不會一直跳頁．

校園映象資料表

6.進站總人數區：這題也算簡單，感覺是送分喘口氣用的，不過為了方便，我在前端的部份是把呼叫出來的人數寫到SESSION中，然後各頁面只要呼叫SESSION就可以了，這樣不用每次換頁就要再撈一次資料庫，其實標題和跑馬燈文字應該也要用SESSION來製作會比較好，進站人數統計的部份用到SESSION來做統計，一次連線只記一次，除非關掉瀏灠器再重連，不然人數不會更新，題目沒有要求要驗證IP，所以就不紀錄IP了．

進站人數資料表

7.頁尾版權區也算是送分題，這邊我和進站人數一樣只開了一個只有一個欄位的資料表，然後也只存一筆資料，最後也是用SESSION的方式來存資料，然後各頁的頁尾直接echo SESSION就可以了．

頁尾版權資料表

8.最新消息區：後台的部份和前面的圖片動畫差不多的流程，所以程式碼的部份可以共用，比較省時間，前台的部份要求只顯示五筆，同時要有滑鼠移入後顯示全部的彈出視窗，這部份原始檔案已經提供了一個jQuery的程式可以把各新聞的完整內容顯示出來的功能，只要資料放對位置就可以了，比較有趣的地方在於顯示標題的部份，我是用字串函數來只取第一行的方式處理，但其他解題竟然是把第一行的資料另存一張資料表？再者是原題目的內容似乎只顯示了一部份的標題，後面的空間是用來給彈出視窗用的，但這樣的話，幾乎每則新聞標題都被截斷了，後來我知道原因了，因為原版型提供的js程式是在<li>上有移入動作時就顯示彈出視窗，但是彈出視窗的位置和<li>是重疊的，如果滑鼠這時是在彈出視窗的位置會造成<li>的移入事件消失，此時變成彈出視窗也要消失，但是彈出視窗一消失，滑鼠還停在<li>的上面時就又再發生了移入事件，於是就會看到彈出視窗一直在那閃的狀況，其他解題都沒有處理這個情形，但我不知道考試時會不會被問到這個狀況，似乎不處理也沒關係的感覺．

新聞資料表

我的解決方式是在<li>標籤內放置一個<div>，大小和<li>一樣，然後定位設relative，id則是js 會呼叫到的mask，z-index設高一些，透明度設全透明，這樣一來彈出視窗就會被放在mask層下面，而移入移出事件都在mask層，標題放在<li>裏，這樣就不會讓彈出視窗一直閃了，我想這也是原始程式會設一個”mask”的用意吧，其它解題大多把mask設在<li>裏，就會看到一直閃的狀況出現．
至於顯示更多新聞的做法需要先去計算總筆數，再做一個判斷要不要顯示”more”字串及連結．連結過去更多新聞的頁面有一個問題是標號的問題，原本的版型是用<ul>，但<ul>不能設啟始值，但顯示的list-type又偏偏是decimal的數字，不知道是不是故意設的陷阱，其他解題的做法是把list-type關掉，然後自己寫入標號，我覺得這樣也太累了，所以直接改成<ol>就可以了，分頁的時候加上start屬性就可以了．

9.管理登入按鈕：這裏要設一個user的資料表，然後後台的部份就是新增資料，需要另外做的只是驗證密碼的功能，因為題目沒說，所以我沒有做md5加密．把輸入的帳密和資料庫做比對就可以了，成功就導到管理後台去，這裏也有個不清楚的地方，就是後台需要限制只有管理者才能使用嗎？因為題目沒說，所以這邊就先不做SESSION的限制，如果考試時有多餘的時間再來做．

管理者資料表

10.選單管理功能：這個系統的功能描述並不是很清楚，可以自由發揮的地方也不少，前端的次選單顯示部份可以用css也可以用js來處理，而資料庫的部份，我是只開了一個資料表，然後用parent欄位來區分是不是主選單，0的話是主選單，有帶數字的則是次選單，數字代表所屬的主選單，其它解題是拆成兩張資料表，我覺得這樣會花額外的時間在處理資料表的關聯上，至於增加次選單的部份也是很不清楚，我的做法是按下”更多次選單”時，直接先在資料表新增一筆空白資料，然後再回到後台頁面叫出彈出視窗回到編輯次選單的畫面，這樣使用者就可以直接去做編輯次選單的工作，按下修改確定按鈕後就只要處理更新資料的動作就好，不用分成新增和修改兩個動作．次選單的統計部份我是在生成主選單表單時再去select一次資料庫計算該主選單有多少次選單，其它解題的做法是在主選單的資料表增加一個統計次選單的欄位，因此每次次選單有更新時就要再去更新一次次選單的總數．至於刪除主選單時，需要注意一併刪除次選單，否則資料庫會遺留很多沒有主選單的次選單資料．

選單管理資料表

以上就是我第一次實做的心得，第二次做應該會做一些改善，讓解題速度可以變快，同時也讓資料的取用效率變高，目前預想的方向如下：
1.性質類似的資料表可以考慮合併，像動畫和校園映象，動態文字廣告和新聞，頁尾版權和進站人數也可以合併，這樣就可以少掉至少三張資料表．
2.相同功能以函式來處理資料庫的存取，像是動畫和校園映象及新聞的後台功能幾乎都一樣，重覆寫三次程式也很花時間，改成函式的做法，只要傳入參數就可以了，也可以預防打錯字或漏打之類的狀況發生．
3.前端儘量以AJAX及SESSION來處理，由於原始的版型可以看到AJAX的痕跡，因此我想用AJAX來取用資料及更新前端會是比較方便有效率的．至於SESSION則是用來存放所有跳頁會再用的共同資訊，比如標題圖片，進站人數，頁尾標題等等．
本周會先看一次老師的解題，然後再來進行自己要做的修改．

雖然老師上課時己經把換圖片的方式說完了，但是我後來找到原始官網有釋出新的版本，而且用上了openGL，所以效果看起來更滑順一些，

onebook3d官網

除了換掉相本裏的圖，我還把說明文字從英文換成中文，同時把一個寫在原始碼裏的icon換掉，這個icon是用base64的方式直接放進js的檔案中，所以沒有額外的圖檔，老師也以開發者不讓人修改為理由跳過這部份，修改的方式其實也很簡單，只要把圖片做好，轉成base64再放回js中就可以了，這邊只簡單說一下把base64還原成圖檔的方式，

把檔案中base64後面的那一段看似亂碼的內容複製出來

找個可以轉碼的純文書處理軟體，個人是使用notepad++，使用解碼功能來還原

解碼後最上方會有格式名稱，把整個檔另存成png或gif,或jpg,記得副檔名要改,不可以是.txt

修改後就可以看到圖片改變了，這過程中我們只改了js原始碼，並沒有新增圖檔

然後用同樣的原理製作一張圖片，轉成base64，再放到js檔中的變數中，就可以把圖換掉了，然後這個外掛js很妙的地方在於幾乎把所有的icon和樣式表內容都寫在js程式碼中了，好處是執行效率比較高，但要改起來就有點累了。

今天主要在講解jQuery的套用方式，上周只是簡單講一下程式的基本架構及使用方式，其實大家對jQuery的撰寫還是不太熟悉，不過老師倒是講到一個實務的重點：”我們那來那麼多時間去把程式學到精深，很多程式碼都有人寫好公開給你用，會用會改就好了，不然要學到何時才能去賺錢？”，這觀念真是超～～～～棒～～～～ｄｅｒ～～～

輪播圖的套用

輪播圖的套用

相本套用

有翻頁效果的jQuery外掛套用

不過老師套用的速度比起有程式基礎的同學來說還是有差的，幾個同學很快套用好己經在改其他地方了，老師有時還是會卡到。

回家作業是把3Dbook的效果換成自己的圖就可以了，但我己經找到原始碼中一堆相關的程式關係，我想我可以改得很多。