Embed Size (px)
DESCRIPTION
Citation preview
網站設計 100 步
此案目的• 為估算開發一網站 life cycle 時，必需花費多少時
間；因此，必須先詳實紀錄其開發過程的項目，以期於未來可更精準地計算出專案的實程。– 項目整理完後，為每一項目估算時間。– 可進一步去思考，在時程儘可能縮短的情形下，最多
可以有多少人力去切割工作項目。• 此範本可作為未來類似專案豈動的提醒，並藉由
不斷修正項目之內容，使軟體品質提升，並建一SOP 開發流程。
計畫跟不上變化
• 軟工模式必須能彈性因應工程開發的需求– 軟工模式的調整，瀑布螺旋 RUP
瞭解自己• 開發團隊已具備何技能 ?
找到需求• 找到真正的需求 ( 目標 )
• Do right thing > Do thing right– 做對的事遠比把事情做好來的更重要
• 找適合自己的工作，遠比把工作做好重要• 找適合自己的領域，遠比把書唸好重要• 還可以有許多引申
需求、目標、問• 溝通機制的建立
– Mail 電話 Msn 連繫– 窗口、成員的溝通模式
• 一對多：窗口可對多個專案成員• 一對一：窗口直接對專案主管
– 缺點：• 多對一 () ：主要窗口是虛
• 驗證與授權的問題• form 欄位 metadata
– 格式、 dataType 、限制等– 為收斂或發散的資料
• 資料– 有現成資料供測試嗎– 新 table?no data?– 有 metadata(scheme) 無 data?
• 多
UI 架構 (Page flow)
• 編訂各個 web page 的編號
介面 1查詢
介面 1.1新增
介面 1.2修改
UI 規格
UI 藍圖製作• 各個藍圖的 Title ：
– 用 resourcebundle ，各種語言– 用 properties 僅限於 iso-8859-1 的字元– 用 (UI 編號， title 名稱 )
• UI 藍圖– 方式一用手工畫，– 方式二用 web html 去劃
• 如果是連流程都要加上，那就得等到”新建專案”後，才可能較順利的串起
UI 動態分析
決定是否導入新技術或Enhance 既有資源
• 如時程緊迫，可跳過 !• 導入新技術是活化工作的動力之一
– 用新的 framework ：如用 hibernate– 用它家的 ap_server ： jboss– 用它家的 database ： ms-sql– 前端網頁技術： ajax 、 JSON– IDE 開發平台新 plug-in 的引入： uml plug-in 等
• Enhance 既有資源：– 組織設定檔的格式– Evercitech.jar 的 enhance– Design pattern 的加入
• 計得得把”新技術”學習的時間估進專案裡。• 新技術必須考量是否已屬成熟的產品
– 如 ExtJs 僅 2~3 的版本，是否真有必要使用。– 建立一套新技術 Survey 、 Study 的流程與標準。
新建專案• 共享檔設定入專案： jsp, javascript, css, img 等• jar 設定入專案：先匯入必備 jar(另列：必須元件清單 )• 共享 Class+組態檔設定入專案
– 共享 Classes ：主要就是 evercitech.jar or 其 package– Properties ：考慮將 properties轉為 xml 以容納更多元的資料結
構，如樹狀結構等• Add framework
– Struts 、 hibernate 、 spring 等• 準備測試用的 AP_Server
– 網頁檔案之目錄可顯示• Tomcat 是在 web.xml 的 listings屬性
新建專案 (cont.)• 架構專案的目錄與 package
– 如使用 struts ，就先 create 出 action, module 等 package ，以方便管理。– 該專案的共用目錄： common 等 (common2 定位為跨專案的共用目錄 )
• 複製先前專案的樣本程式，以供改寫– view 網頁樣版製作： Jsp– Model ： module– controller ： action, command 等– 蠻花時間的 !!所以最好有樣版
• 專案組態檔設定 (web, framework 的 config file)– Web.xml ，幾個主要的 servlet 必須先加入，如驗證的 servlet 、檔案上傳的 servle
t 。– Framework 的 Struts-config.xml 等
• 測試資料庫連線– Datasource 的設定 ( 要先知曉”實體資料庫”位於何處 )
• Datasource 的設定乃於 ap_server層次作設定• 因為於 ap_server層次作設定，因此， DB 的 driver也必須置於 ap_server層次之 lib(jar)
or classes(class)檔 common forlder 。– 用 common2/dbtest/ 的程式作測試– 一切準備好後，就可開始專案的實作了。
網頁樣版製作• 在 <head> 之間加入 <base>
– String path = request.getContextPath();– String basePath = request.getScheme()+"://"+request.getServerName()+":"+requ
est.getServerPort()+path+"/";– <head><base href="<%=basePath%>"></head>– 即有路徑都相對於 basePath
<script type="text/javascript" src="js/web_params.js"></script>• 加入專屬 Include檔，
– 如 Skud.jsp 的專屬 include檔，即為 SkduInclude.jsp ，其語法：• <jsp:include page="/outsourcing/OSIRegisterInclude.jsp" flush="true“/>• 觸發事件相當的 Javascript 、 Ajax
• 加入共用 Include檔 (placed on common2)– 該 include檔可以放
• 共用頁首頁尾• 共用頁目錄 (hyperlink)• 排序分頁用 PageSortInclude.jsp
• 錯誤頁導向設定 (placed on common2)– <%@ page errorPage="/common2/exception/ErrorPageLoad.jsp" %>
網頁樣版製作 (cont.)
• 排序、分頁、預設值相關模組納入：
Action樣版製作• 我：一個 Action即是一個 Use Case
– Action 內包含了增刪修查流程，列印匯入上傳pages, sort 等功能。
– Ex~儀校系統的校驗維護是一個 use case 、版次更動是一個 use case 、儀設更廠是一個 use case 、紀錄表維護是一個 use case
• 雖然就 page flow而言，’版次更動’與’儀設更廠’、’紀錄表維護’都是掛在單一儀器下的功能；然而，校驗維護卻是預設主劃面。 於‘ page flow’的架構上似乎是父子層的關係，但實際’需求’的架構上卻都是獨立的功能。 (功能性需求 )
Action樣版製作 (cont.)Try{ // 使用 command return forward;}Catch(Exception e){
e.printStackTrace(); // 列印到 consolo// 寫訊息到 log 與 mailLoginLog.goThroughException( e,this.getClass().getName(),LoginBaseData.getUserId(request));// 跳至錯誤訊息顯示頁forward = mapping.findForward("exception");return forward;
}• 注意 catch 所寫內容有三：
– 列印到 consolo– 寫訊息到 log 與 mail– 跳至錯誤訊息顯示頁
驗證與授權• 掛入”驗證與授權”
– 新建專案大致都備妥之後，會發現少了個入口的機制，因此可考慮先掛入簡易的”驗證與授權”機制。• 非會員首頁 (Start)
– 不含任何驗證與授權– 首頁命名： Index.htm, default.jsp– 設置一處 hyperlink ，並加上如 intercode=22886455kksw參數接於”系統狀態 action” 之後，以避免直接 key
(?)• 系統狀態 action
– 判斷上線中、維護中、服務暫停– testUserId參數的設置
• 驗證 action– 登入 action判斷為”上線中”，即導入該 action– 如非為 basic ntlm 等而是自行設計的登入頁，會再導向– 驗證目前已有 LoginServlet ，但關於 NTLM相關仍須另外再學習 !!
• 授權 action– 給予驗證過關的人，適當的權限– 授權權限寫入 session ，使進入會員的任何功能 action 時，可供存取使用– 導向到會員首頁，這也是進入 domain flow 的第一頁– 授權模組設計需要再另外討論，目前此塊極缺 !!– Session 的初始設定，包括了 PMS( 權限 ) 、 dataload ， pages 的初始
• 會員首頁 (End)
驗證與授權 (cont.)
• 驗證與授權安全防護– 簡易作法
http://turtle.ee.ncku.edu.tw/~lok/notes/java/jsp/request%AA%AB%A5%F3.htm
– 用 Filter class
• 時間與空間的驗證功能• 時間： session 的登出 expired ： session 是有時間限制的，
一旦時間到，如果頁面依然存在，即由頁面發出 refresh 更新，而非讓 session 無窮盡地執行下去
• 空間： User 不得任意進入它頁，可能是必須先進入首頁之類的。可多點登入，一旦從某點登入是未經驗證的，即導回驗證頁，並且記憶該 user 的登入點
組態檔設定• 每一個 sample組態檔從它處 copy 過來，都要再 update 一次，以符合該專
案之需求• 必要組態檔：
– 資料庫組態： dbconfig.properties– 網站組態： webconfig.properties
• 驗證模式、使用的 ap_server• 排序、分頁• 網站名稱、編碼
– 輸出入相關• 資料匯出匯入組態： io.properties
– 匯出匯入目錄的建立• Log組態： log4j.properties
– Log 目錄的建立• Mail組態： mailconfig.properties
– Ldap組態：使用 ldapconfig.properties– Title組態：使用 titleconfig.properties
• 瀏覽器左上的標題、網頁內容父子標題• 網站導覽列的超聯結標題
UI版面設計• UI 每一功能區塊用 <div>區隔
– 查詢區塊• 最進更新查詢
– 查詢結果• Row data ：內含更動、刪除、匯出• Set ：匯出、分頁、排序• 訊息：總筆數
– 新增 ( 新增流程可三選一 )• Windows Open• <div>騰空圖層；騰空圖層可移動• <div> 下拉圖層
UI版面設計 -- 加入 CSS
表單欄位互動• 必填 ? 可否為空值 ? 有預設值嗎 ?• 欄寬、字數大小、 Selected/Checked• Form Check ：
– 搜尋類• 必須至少有多少欄位給填常給過
– 明細類• Event:onKeyDown,onKeyUp• 是否被更動• 中英文字混雜判斷字數• 格式判斷
表單欄位互動 (cont.)
• 前端 Event處理– 增
• newMe• addMe
– 刪• deleteMe
– 修• getMe ：參數由一個到多個• updMe
– 查• queryMe
– 匯– 印
• checkFormValidate
流程設計• 如果是用 Struts ，則重點就是 Struts-config.xml 的組態設
計• UserSessionManager
– 設計某單筆文件 Key 的 flowstatus物件• 監控某單筆文件 (Key) 之目前所處狀態
– 同時存取同 key文件的管控• key寫入 application物件，使作 Map(loginUser, [key1,key2,key3,…])
的對應• 同一 LoginUser 如開啟同 key 之多個 session ，可彈性決定是否可共用
開啟，還是 Luck• 一旦同筆 key文件被它人開啟，即 Lock住，直到釋放。• 此為應用程式 Level 的 lock ，而非 database level 的 lock ；因此，一旦該 Rowdata 是由其它應用程式所存取，將無法 lock ，所以應避免再給予有其它 User Interface 做增刪修的動作 ( 查詢沒差 ) 。
• Session
準備測試資料• 如無資料
– 為了取得資料，必須先完成資料新增與資料查詢 (關鍵字簡單查詢即可 ) 等功能
• 如有資料– 可不必優先完成資料新增功能
基礎資料的取得• Fields metadata( 需求階段要問 )
– 供取得 null, dataType, 欄位 size 等訊息等• Fields mapping data ( 需求階段要問 )
– Fields value• 需求欄位的資料非發散的 (UI即是以 textfield) ，而是收斂的 (UI即是
以 select, checkbox, radio 等 )• 且其存入 database 是以代碼寫入，而非存其實際資訊，頂多僅是在
metadata 加註列舉。• 因此，程式必須提供對應的程式供轉取。
– Fiedls displayName• displayName 一般指中文名稱，最好可用 jdbc 的介面程式動態抓取；
如無法，則可用 xml, properties, 或 java檔直接對應處理。• 目前發現 as400 的中文名稱，比如 COLHDG(“廠別” ) ，無法抓取
網站變數定義• 網站│流程變數
– WebParams
• 網站狀態 (常數 ) 定義– WebDef
• H2文副標
元件指引
From Amos
DOM
• 由於 Dom 介面是跨語言的，因此如要在 javascript 實作 dom 的程式時，可先在 java 先試作，因為 java 較好測試。
• 測試後移到 javascript 的環境– Java data-type 都改為 var– Mehtod 要去動詞 ( 如 get) 與括號，之後的第一個名詞
改小寫。– new String[Size] 改 new Array(Size)– System.out.println() 改為 alert()– Node.item(i)( 如 childNodes[0].item(0)) 改成 node[i]
抽象化、結構化、定義化三化• 類別抽象化：
– Class往上提– QueryCommand, ItfADQUModule 等
• 功能結構化：– Method往上提，其參數由少變多個，表可支援或考慮
到的因子變多。這個太多地方會用到 !!– EX~DBHandle
• 屬性狀態定義化：– 流程”狀態”的定義常數化
• Properties, WebDef– 流程”參數”的定義變數化
• WebParams
PSPVFactory物件• 史上超強物件• 負責建造 Pages, FieldsSort, PreValueObje
ct
• 亦提供 CachedRowSet及其 allCount
ResReqBar.jsp• 相依關係如下：
– ResReqBar.jsp **_include.jsp dom_form.js– Jsp 主頁則直接引用 ResReqBar.jsp 的 function– **_include.jsp 必須實作 ResReqBar.jsp 之 function 的參數 (參數是 functi
on)• Ajax get/post Submit
– 掛上 requestWithAjax(doUrlFunc, doContentFunc, isXML) method ，三個參數分別是：
• doUrlFunc ：客戶端的請求 method• doContentFunc ：客戶端的回應 method• isXML ： isXML 格式 ? True/False
– 範例 requestWithAjax('doSubKindListReq()','doSubKindListRes()',true)“
– doUrlFunc 與 doContentFunc兩method寫置於表單程式裡或其 include檔裡
– Dom_form.js 提供組串 QueryStr 的 method• hangQueryStrA(obj)• hangQueryStrB(obj)
系統整合的意義• “整合”的意思 : ( 收集整理 , 合理分配 )
收集所有資源 , 整理好之後 , 合理分配安排 ,達到充分利用的效果 .
• http://www.softworker.net/main/integration/integration.htm
• Google keyword ：系統整合產業
TextField
• Input type=text, password型 (即 TextField)– 之 Maxlength( 字數 ), Size( 欄寬 ) 以字數為寬度；
–中文亦算一個字；– 其餘的 Input type=radio,checkbox 等之 size則
是以 pixel 計算
不建議用的 html tag
• 不建議使用 <font> <center> 等，請轉換為<span style=””> or <span class=””> 的格式
• 用 <span style=”font-size:4; text-align:center”>
<table>固定使用格式<table border="1" datasrc="#cdcat"><thead><tr><th nowrap>Artist</th><th>Title</th></tr></thead><tfoot><tr><th colspan="2">This is my CD collection</th></tr></tfoot><tbody><tr><td><span datafld="artist"></span></td><td><span datafld="title"></span></td></tr></tbody></table>
<table>固定使用格式 (cont.)• ~~thead 、 tfoot 以及 tbody 的好 ~~• 順序要依序為 thead tfoot tbody 且要 同時存在• Thead( 內加 tr, th) ， tfoot( 內加 tr, th) ， tbody( 內加 tr, td)• thead 、 tfoot 以及 tbody 元素使您有能力對表格中的行進行分組。當您創建某個表格時，您也許希望擁有一個標題行，一些帶有資料的行，以及位於底部的一個總計行。這種劃分使流覽器有能力支援獨立於表格標題和頁腳的表格正文滾動。當長的表格被列印時，表格的表頭和頁腳可被列印在包含表格資料的每張頁面上。http://www.w3school.com.cn/tags/tag_thead.asp
• 用 TBODY這個標簽可以控製表格分行下載，可以讓其中的內容比網頁中別的東東（如圖片）先下載下來，這樣可以讓別人先看到網頁的實質性的內容，不用等那麼久了，在需要分行下載處加上 <tbody>和</tbody>
• http://big5.ce.cn/gate/big5/blog.ce.cn/html/61/106861-16771.html• 善用 取文字間距
系統設計• MVC 架構之系統設計： ( 可參閱 )
– url~http://www.javaworld.com.tw/jute/post/view?bid=11&id=2265
• 圖很豐富且漂亮 !mvc 的 model1,model2 等， design pattern 架構圖
DIV 的魅力
元件與物件的差異• Kenming’s 的鮮思維
– http://www.kenming.idv.tw/a_dao_ar_eofa_m_component_a_arp_if
• 物件導向以 DCOM 實踐一個簡單的聊天室 – http://www.dotspace.idv.tw/Jyemii/practice/Ch
atroombyDcom/ComponentBased.htm
上線測試的問題• 今天的案例特殊 ~~ 因為卡在 6/3~6/4存貨日變更，我的介面顯示事先說好必須配合變動，得在昨天與今天之間跟著變，不能提前也不能延後，所以正式機的測試，也得今天才做。
• 想想看有沒其它法子 !
![[網路星期二] 網站活動簡介](https://img.pdfslide.net/doc/110x75/5560ff77d8b42a91388b544b/-5560ff77d8b42a91388b544b.jpg)
