審計資訊網架構設計

審計資訊網是由許多網頁組成，而網頁可由程式觀點(Code View)、設計觀點(Design View) 及應用觀點(Application View)三個角度來分析[10]。其中程式觀點主要使用超文字標示語言 (HyperText Markup Language, HTML)及 JSP 兩種撰碼模式。設計觀點著重於 HTML 模式的格 式化、排版及鏈結三部份。就格式化而言，網頁使用串流樣式單(Cascading Style Sheet, CSS) 來作樣式的控制，藉此分離網頁的格式(Format)與內容(Content)。對排版而言，在審計資訊網 的排版設計中，考量到對一個資料量龐大的網站而言，資訊的呈現是最重要的主角。因此網 頁視窗的分割與視窗捲軸對於網站的瀏覽具有相當程度的影響。倘若視窗的分割沒有經過完 善的設計規劃，每換一個單元就要再重新彈出或更換一次網頁，則會照成畫面散亂而混淆使 用者。因此本研究使用頁框(Frame)將網頁視窗分割為上下兩個獨立頁框，如圖 5.1 所示，將 功能選單固定於視窗中上頁框相同的位置，主要的網頁內容設計在視窗中下頁框的位置。

圖 5.1 審計資訊網頁框設計

如此一來網頁只需更換要呈現資訊的下頁框即可，使用者在使用視窗上方的頁框選單永 遠都存在。因此更能集中注意力，也不需再開啟新視窗。這樣的視窗安排也可以讓功能選單 永遠保持在同一頁面，即使使用者在操作不同的功能單元時，網頁上方的功能選單也會一直 在使用者的視線範圍內， 不會因為頁面的捲動而超出。就鏈結而言，此技術主要讓使用者能 銜接不同的網頁。

最後就應用觀點將網頁分為一般網頁(Regular Pages)及表單網頁(Form Pages)兩大類，兩 者的差異在於資訊的流向。由於階層式架構為目前最廣泛使用的網頁設計架構，其主要的單 元從首頁連接，而單元裡的項目再從中延伸出來。此架構特色為結構分明，為一種便利使用、

瀏覽的設計。因此審計資訊網的網站設計便是採用此架構將資訊呈現給使用者，在此分層結 構的網站組織下，可以讓使用者快速且更有系統的查詢。審計資訊網的網頁架構如圖 5.2 所 示，共由十七個網頁所組成。主要分為詳細資料查詢、計次資料查詢及計時資料查詢等三大 功能。由審計資訊網的首頁可以連結到七個查詢介面的網頁，其中 Auditing1-1a.jsp 是提供詳 細資料的查詢表單網頁；而 Auditing2-1a.jsp、Auditing2-2a.jsp 及 Auditing2-3a.jsp 則同屬於計 次資料的查詢表單網頁，三者相異點在於第一為市場的計次資料查詢；第二為使用者層級的 計次資料查詢；第三為使用者個別帳號的計次資料查詢。接著 Auditing3-1a.jsp、Auditing3-2a.jsp 及 Auditing3-3a.jsp 則同屬於計時資料的查詢表單網頁，其功能依序為市場的計時資料查詢、

使用者層級的計時資料查詢以及使用者個別帳號的計時資料查詢。

圖 5.2 審計資訊網的網頁架構

index.htm

審計資訊網首頁(Home Page)

Auditing1-1a.jsp 詳細資料查詢表單

Auditing2-1c.jsp 圖形報表輸出網頁 Auditing2-1b.jsp

市場計次輸出網頁 Auditing2-1a.jsp

市場計次查詢表單

Auditing2-2c.jsp 圖形報表輸出網頁 Auditing2-2b.jsp

層級計次輸出網頁

Auditing2-3b.jsp 使用者計次輸出網頁 Auditing2-2a.jsp

層級計次查詢表單

Auditing2-3a.jsp 帳號計次查詢表單

Auditing1-1b.jsp 詳細資料輸出網頁

Auditing3-1b.jsp 市場計時輸出網頁 Auditing3-1a.jsp

市場計時查詢表單

Auditing3-2b.jsp 層級計時輸出網頁 Auditing3-2a.jsp

層級計時查詢表單

Auditing3-3b.jsp 使用者計時輸出網頁 Auditing3-3a.jsp

帳號計時查詢表單

審計資訊網的程式設計原理為使用表單方式來傳遞資料。表單由表單物件、下拉選單 (Radio Group)、文字欄位(Text Field)及按鈕(Submit Button)等控制項所組成，其中每個選單的 值為個別獨立的字串，透過Post型態的傳遞方式將選單值傳送至各功能資料輸出網頁。輸出 網頁會利用變數記錄使用者在查詢表單所選取的值，並利用記錄下來的值以動態的方式組成 SQL查詢字串。最後透過連結審計資料庫程式執行此一查詢字串並輸出查詢的結果。審計資 訊網輸出的結果以表格加上報表方式呈現。在報表部份，目的在於將數據資料圖形化，以簡 單明瞭的方式呈現出數據資料所含的意義。因此報表輸出網頁是利用名為JFreeChart[19]的圖 表元件撰寫而成，是一個在Web上搭配Java繪製統計圖表(chart)的元件，而且是免費的(free)。

JFreeChart同時也是一套開放程式碼的Java類別程式庫，它能夠很簡單並快速的產生想要的圖 表。其結構是由資料集合(Dataset)、圖表工廠(ChartFactory)及繪圖員(Renderer)[15]三個圖形類 別的基本元件組成。首先根據圖表型別的差異準備不同型態的資料集合，例如市場計次報表 輸出網頁使用圓餅圖型別；而使用者層級計次報表輸出網頁使用直方圖型別。圖表工廠根據 資料集合的屬性產生圖表，接著繪圖員依據指定的圖表型別、資料屬性來繪製圖表。因此本 研究的資料輸出網頁接收到資料庫回傳的查詢結果數據時，會將查詢結果數據傳遞至報表輸 出網頁開始呼叫程式計算，並將產生的圖表回傳至輸出網頁。