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

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

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則是用來存放所有跳頁會再用的共同資訊，比如標題圖片，進站人數，頁尾標題等等．
本周會先看一次老師的解題，然後再來進行自己要做的修改．

 

迴圈在程式語言中是一種重覆結構的流程控制，用來處理需要大量重覆執行的工作，而迴圈中又可以套迴圈，叫做巢狀迴圈，也可以加入判斷式來增加迴圈的可用性，以下以印星星這個常出現的練習題來做迴圈的練習與說明．

(一)for迴圈結構與遞增關係

for迴圈在大多數的狀況下是以定量的方式來重覆執行一項工作，定量的意思就是有一定的執行次數，因此在FOR迴圈的結構上，會需要一個起始值，一個執行條件，和一個遞增條件：像這樣

FOR( 起始值 ; 執行條件 ; 遞增條件 ){

要執行的工作

}；

起始值可以是任意值，也可以直接放運算式來產生一個起始值；

執行條件可以不只一個執行條件，但重點在於必須是一個可以讓迴圈結束的條件，不然會變成無窮迴圈就麻煩了．

遞增條件也可以用運算式來產生遞增條件，只是大多時候都會用簡單點的方式來呈現．

以下以單一迴圈來說明遞增關係，雖然大多數都會看到$i++這樣的遞增，但實際上看需求可以增加不同的值來產生跳號的效果．以下分別為+1,+2及+4的執行結果。

(二)巢狀迴圈

接下來我們來試試巢狀迴圈，巢狀迴圈因為有兩層以上的迴圈在控制，所以在設計上要特別注意內外圈的關係和執行工作的層次關係，比如在製作HTML的表格時<tr>標籤通常會在外圈時執行，而內圈則是執行<td>標籤．

以下我們用印星星來說明巢狀迴圈的應用與變化：

執行的結果會是

 

執行的結果會是

 

(三)複合條件迴圈

實務上會遇到的迴圈應用不會只是單純的執行一項工作，而且要在重覆的作業中再判斷一些工作是否執行或額外執行其它工作，這時就要增加判斷式或其它運算式來協助處理，比如大樓管理員在分信的時候不只是把同一住戶的信放在一起，還同時要判斷有沒有廣告信要挑出來，這樣的作業在”分信”這個重覆的動作還加入了”判斷是否同一住戶”及”判斷是否有廣告信”，

我們以一個方型星星的變化來說明：

執行結果會是：

執行結果會是：

執行結果會是：

 

今天又有位同學退訓了，原因是前公司出更高的薪水請他回去上班，這招感覺不錯！

上午的課主要在重覆上周的工作環境介紹，老師一再的強調工具的重要性，網頁設計師不能只會網頁設計，所以一些基本的電腦知識，工作環境的維持等等都很重要，因此也介紹了商用虛擬主機的申請，老師自己則是提供了班上同學一人一組商用虛擬主機的帳號，可以使用到結訓為止，主要也是用來交作業用的；然後測試了一下虛擬空間的FTP帳號，順帶的也介紹了CPANEL的界面和使用．

下午的課先是解釋了RWD設計的規範，然後也提到了BOOTSTRAP的設計風格，這些都是未來上課的重點，也是我參訓的期待，先前民間補習班開的職訓課教的東西都太基礎，離業界實用的做法差距太大了，去面試都被打搶，所以我對這800小時的課是很期待的，希望能真的學到新的東西．

不過老師在講解設計規範和原則時步調很快，但是到了實際操作卻有點慢，步驟細到我一直打哈欠，不過對沒接觸過的同學來說似乎還是有點跟不上，最後有帶到CSS的設定，並且看到區塊的差異出來，下周應該重點在版型的設計上吧．

今天自己的研究就是解決了課表上一周下一周的換頁功能，然後想做欄位統計的查詢時遇到問題，主要是資料表的設計方式不適合，但是打算再找找資料看能不能硬幹．