網站應用程式開發流程

在本節我們分別分析網站應用程式之傳統開發方式以及採用視覺化建 構方式之開發流程。

3.1.1 傳統開發方式

網站應用程式傳統開發方式如下圖所示：

圖 6 傳統網站應用程式開發流程圖

由上圖可以清楚的看到，傳統之網站應用程式開發，多是根據需求由 UI 設計人員先製作 HTML 檔案，即瀏覽器呈現之畫面，再由程式設計人員 修改後，產生網站應用程式。

但是一個網站的畫面是需要經常的修改更新的，此時 UI 設計人員直接 用網頁編輯軟體修改含有程式碼的檔案，是非常危險的，可能在修改的當中 造成網站的運作問題。

3.1.2 使用 視覺化 軟體建構方法來開發網站應用程式之流 程

使用視覺化軟體建構方法來開發網站應用程式之流程，如圖 7 所示：

圖 7 使用視覺化軟體建構方法開發網站應用程式之流程

上圖為使用視覺化網站應用程式產生器之開發流程，程式設計人員先用 視覺化編輯工具建構程式以及最基本之軟體介面，再整合程式碼產生器後，

產生最後的網站應用程式。

網站應用程式包含兩部份，一為程式碼，可由程式設計人員修改，二為 HTML 樣版可由 UI 設計人員處理，二者不會有共同維護相同檔案的困擾。

3.1.3 ^系統 架構說明

如下圖說明整個開發系統之架構，在 Client 端之開發環境有：

Visual Authoring Tool：以視覺化之元件建構網站之介面

Target Code Generator：又分為產生網頁畫面的 UI Generator 及產生程式碼之 PHP Generator

在伺服端之為：

1. Server File System：存放開發系統所產生之網頁畫面+程式碼及伺服端流 程控制之 XML 設定檔(phpmvc-config.xml)

2. PHP Engine：為執行 PHP 程式之直譯器

3. Server Module：為搭配執行 PHP 程式之網頁伺服器，例如：Apache 或 微軟之 Internet Information Server

Visual Web Application Development

EBS->XForms

Upload Target Code Generator

XML Parser &

Analysizer

Code Generator UI Generator

PHP Generator Visual Authoring Tool

EBS script

Web Server

Server Module

PHP Engine

Server File System phpMVC-config.xm

*.html

*.php

圖 8 視覺化網站應用程式開發系統架構

四個模組的詳細功能，以下分別說明，並舉例之：

1. 視覺化編輯模組(Visual Authoring Tool)：

以編輯手之 Drag&Drop UI 編輯網頁基本畫面並設定各元件對應之事件及屬 性，最後以 EBS 儲存，其中元件包含 HTML 畫面元件、網站模組元件等，如圖 9 所示：

圖 9 視覺化建構程式畫面

下圖為視覺化建構與視覺化語言之對映，我們用視覺化系統建構網站，各視 覺化之元件皆會對映到 EBS 之 Script 描述。

圖 10 視覺化編輯與 EBS 之對映

2. EBS->XForms 轉換器：

將 EBS Script 分析並依據 EBS 之各元件，產生對應之 XML 描述之使用者介 面元件(XForms)，提供 UI Generator 模組運用。

圖 11 EBS 轉換成 XForms 之對映 3. 程式碼產生模組(Code Generator)：

分析各元件之事件、屬性，並轉換成對應之伺服端程式碼(PHP)及 HTML 樣 版(Template)，再整合 phpMVC-config.xml 上傳至伺服器執行。

此模組分別產生：

HTML 檔：

圖 12 程式碼產生器產生對映之 HTML 樣版檔

相關之 PHP 程式檔：

以使用者登入系統為例，則有顯示登入畫面之 loginAction.php，顯示登 入完成之 loginCheckAction.php，以及負責進行驗證使用者帳號、密碼 之 loginCheckForm.php

圖 13 程式碼產生器產生對映之 PHP 程式