上周完了成網頁乙級第一題的練習,自己實做一次的感想是題目雖然不難,但要在四小時內寫完除了多練習,還得有別的寫法來加速才行,我第一次的做法是完全用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則是用來存放所有跳頁會再用的共同資訊,比如標題圖片,進站人數,頁尾標題等等.
本周會先看一次老師的解題,然後再來進行自己要做的修改.
留言