TWI524197B

TWI524197B - 從資料表欄位註解產生網頁程式與對應表單介面之方法

Info

Publication number: TWI524197B
Application number: TW103115702A
Authority: TW
Inventors: 陳世興
Original assignee: 正修科技大學
Priority date: 2014-05-01
Filing date: 2014-05-01
Publication date: 2016-03-01
Also published as: TW201543234A

Description

從資料表欄位註解產生網頁程式與對應表單介面之方法

本發明係有關於一種從資料表欄位註解產生網頁程式與對應表單介面之方法，尤其是指一種在資料表每個欄位的註解中，儲存預先定義的代碼，這些代碼係對應至各別功能函式；接著，利用關聯式資料庫之詮釋資料，獲得每一欄位之屬性資料與代碼，由這些屬性資料與代碼即可建立出對應的網頁程式碼檔案以產生該欄位對應功能函式的表單介面與網頁處理程式，如此可大幅加快網站應用程式的開發速度。

按，企業尤其是中小企業之資訊服務業，因商務電子化程度較低，在建置網站的工作上，為求整體效率並期望能達到專業水準的要求上，通常會採取委外專案開發的方法；然而，對於日趨複雜、競爭激烈、商品服務變化快速的網路環境下，即時性及彈性往往是各商家決勝於網路虛擬空間的重要關鍵，資訊服務業者在規劃開發上須盡可能快速的建置電子化平台，達到產業電子化的順利整合應用，因此如果每次網頁改版都必須簽約委外處理，不僅增加營運成本外，在網頁建置的討論與溝通上亦花費時間。

針對網站網頁的編輯製作軟體目前有例如微軟的Front Page、Visual Studio，以及Adobe推出的Dreamweaver等，其需具備相關操作與程式設計知識，因此並非每個人皆能熟練地進行網頁編輯；而當編輯網頁時，各網頁頁面係皆由設計者從現有之檔案資料中逐一產生，因此傳統之網頁編輯相當耗時，且一般人並無使用或撰寫超文字標記語言（HTML）之訓練；以製作網頁表單程式為例，表單中的欄位係需以至少一個資料表儲存，亦即資料表中的每個欄位係為儲存資料的來源，例如可為存放上傳檔案的名稱(如圖檔、影片、文件等)、網路位置資訊(如網址、電子郵件帳號等)、設定顯示數值的精確度、或是該欄位是否顯示等，這些都需要撰寫對應的前端界面與後端程式處理這些資料，開發過程相當繁瑣，舉例而言，當表單欲增加一管理圖片功能時，需新增一個資料表來記錄圖片內容，欲增加另一管理影片功能時，又需再新增另一資料表來記錄影片內容，既使由熟悉網頁程式語言與資料庫的相關人士進行，亦需花費諸多時間在網頁程式碼的編輯上，使得網站開發的流程往往無法符合在最短時間內滿足客戶或公司的需求。

請參閱中華民國發明專利公告第507142號所揭露之『模組化之網頁編輯與即時轉換之網頁顯示系統與方法』，其係提供一種應用於網際網路上之網頁編輯與顯示的系統與方法，使得商家的網頁編輯者或是美編人員可以於伺服器主機下載模組化的檔案，來製作與編輯示意性質的網頁，完成後上傳儲存於伺服器主機；然，由於資料庫係已建置於伺服器主機，使得資料的輸入被限定在由伺服器程式所設定的網站架構下，且亦無法製作資料庫無法定義的欄位內容，例如上述可為存放上傳檔案的名稱(如圖檔、影片、文件等)、網路位置資訊(如網址、電子郵件帳號等)、設定顯示數值的精確度、或是該欄位是否顯示等。

今，發明人即是鑑於上述之網頁程式開發方法仍具有多處之缺失，於是乃一本孜孜不倦之精神，並藉由其豐富之專業知識及多年之實務經驗所輔佐，而加以改善，並據此研創出本發明。

本發明主要目的為提供一種從資料表欄位註解產生網頁程式與對應表單介面之方法，尤其是指一種在資料表每個欄位的註解中，儲存預先定義的代碼，這些代碼係對應至各別功能函式；接著，利用關聯式資料庫之詮釋資料，獲得每一欄位之屬性資料與代碼，之後由這些屬性資料與代碼即可得知需產生何種可存取關聯式資料庫之程式，並建立出對應的網頁程式碼檔案，藉此以產生該欄位對應功能函式的表單介面與網頁處理程式，藉此大幅加快網站應用程式的開發速度。

為了達到上述實施目的，本發明人提出一種從資料表欄位註解產生網頁程式與對應表單介面之方法，其係適用於一具有關聯式資料庫之網頁編輯系統，網頁開發者首先建立一註解功能對應表並儲存於關聯式資料庫中，註解功能對應表包括至少一代碼，以及對應代碼之功能函式；接著，將代碼儲存於資料表對應欄位的註解中；再利用關聯式資料庫之詮釋資料(metadata)獲得每一欄位之屬性資料與代碼，並藉由屬性資料與代碼產生可存取關聯式資料庫之程式，以建立出對應的網頁程式碼檔案；最後，藉由上述之網頁程式碼檔案可於網頁編輯系統產生每一欄位對應功能函式的表單介面與網頁處理程式；藉此，解決傳統網站開發者於每個欄位欲儲存關聯式資料庫無法定義的資料來源時，需要撰寫對應的前端界面與後端程式來處理這些資料的麻煩，大幅加快網站應用程式的開發速度。

在本發明的一個實施例中，其中代碼可以數值方式儲存於資料表欄位的註解中，或以階層式語言（例如XML或JSON等）儲存於資料表欄位的註解中。

本發明之目的及其結構設計功能上的優點，將依據以下圖面所示之較佳實施例予以說明並清楚呈現，俾使審查委員能對本發明有更深入且具體之瞭解。

首先，請參閱第一、二圖所示，分別為本發明方法之步驟流程圖，以及適用於本發明方法之網頁編輯系統方塊示意圖，本發明之方法係適用於一具有關聯式資料庫（１）之網頁編輯系統（Ａ），其中網頁編輯系統（Ａ）可為習知具網頁編輯模組的網頁編輯系統（Ａ），網頁開發者（Ｂ）可以選擇其中的各種資料並進行編輯，網頁編輯系統（Ａ）則可依各種設定將資料以表格、圖表或其他型態的表示方法呈現於網頁，而關聯式資料庫（１）可例如但不限定為SQL Server、MySQL、DB2或Oracle其中之一，本發明之方法步驟包括有：

步驟一：網頁開發者（Ｂ）建立一註解功能對應表（１１）並儲存於關聯式資料庫（１）中，註解功能對應表（１１）如下表所示。可包括至少一代碼（１１１），以及對應代碼（１１１）之功能函式（１１２）；其中代碼（１１１）與功能函式（１１２）之具體實施例如下表所示；在此，本具體實施例中以代碼2為例係為了說明方便起見，而非以本例所舉為限，熟此技藝者當知道本發明之方法可與下表配合產生不同功能函式（１１２）的表單介面（４），因此，並不限定本具體實施例之代碼（１１１）；根據下表，代碼（１１１）為『2』的功能函式（１１２）為上傳圖片（Upload Photo），其功能不僅可讓使用者上傳爲JPG、PNG、GIF等圖檔，亦能在表單中的欄位（１２１）自動產生上傳圖片按鈕、檔案選擇對話框與上傳程式；值得注意的，代碼（１１１）為『13』的功能函式（１１２）可刪除藉由代碼（１１１）為『2』、『3』以及『4』分別上傳的圖檔、文件以及影片，以清除對應關聯式資料庫（１）中不需要的檔案。

代碼功能函式功能說明 0 Default 不設定任何內容時即為0 1 Infeasible 輸入表單不顯示欄位，在後端處理時寫入預設資料 2 Upload Photo 1. 預計讓使用者上傳爲JPG、PNG、GIF等圖檔。 2. 在表單中的欄位自動產生上傳圖片按鈕、檔案選擇對話框與上傳程式。此外，因欄位爲圖檔，在上傳圖片按鈕下方與在負責顯示資料的網頁程式，會自動顯示圖片而非圖檔之名稱。 3 Upload file 1. 文件可上傳的格式爲DOC/DOCX、XLS/XLSX、 PPT/PPTX、PDF、TXT等。 2. 自動產生上傳文件按鈕、檔案選擇與上傳程式，上傳完畢後於上傳按鈕下方立即顯示所上傳文件之下載超連結，也會在其他負責顯示資料的網頁程式會提供檔案下載的超連結。 4 Upload Video 上傳爲MP4格式之影片，功能內容與上傳圖片與文件相同，都包含了上傳按鈕、檔案選擇與影片上傳。影片上傳後在顯示的網頁程式中會嵌入播放影片的對應程式。 5 Web Address 針對所輸入的文字內容，轉成爲超連結之顯示模式，可供使用者點選至指定網址。 6 Email Address 針對所輸入的文字內容，轉成爲電子郵件超連結之顯示模式，使用者點選後可啓動電腦所預設電子郵件編輯軟體，並帶入所指定之電子郵件位址。 7 Youtube Video address 填入Youtube影片代碼，本系統自動產生嵌入影片之程式碼並嵌入於網頁程式中，之後使用者可自動播放影片。 8 Telephone address 在手機上點擊電話號碼連結網址，可直接啟動撥號程式。 9 Decimal Format short 顯示數值的精確度到小數點下第1位。 10 Decimal Format long 顯示數值的精確度到小數點下第6位。 11 Year/Month/Date Format (Timestamp)的內容，在此使用界面上僅顯示年份、月份與日期，而不會顯示時間。 12 QR Code 由紀錄資料顯示QR Code。 13 Data ownership 僅建立該筆資料之使用者能修改與刪除。

步驟二：將代碼（１１１）『2』儲存於資料表（１２）對應欄位（１２１）的註解（１２１２）中；請一併參閱第三圖所示，係為發明於網頁編輯系統建立資料表之使用者介面示意圖；其中儲存方式可例如以第三圖所示將代碼（１１１）以數值方式儲存於資料表（１２）Photo欄位（１２１）的註解（１２１２）中，或以階層式語言方式儲存，例如以XML（Extensible Markup Language）語言儲存代碼2時，於註解（１２１２）中則填入：＜root＞＜TypeID＞2＜/TypeID＞＜/root＞；若以JSON（JavaScript Object Notation）語言儲存代碼2時，則可於註解（１２１２）中填入： {{“TypeID”:2}} ；在此值得注意的，建立關聯式資料庫（１）之資料表（１２）的具體方法係為習知技術且亦可參考本案發明人於102年12月31日向　鈞局提出之發明專利申請案號第102149379號『互動式網頁程式自動產生方法』以及第102149383號『從資料集詮釋資料產生表單驗證程式與對應表單介面之方法』；因非本案重點，在此不詳細說明，特將其所有內容包含於此作為參考；

步驟三：利用關聯式資料庫（１）之詮釋資料（１３）獲得每一欄位（１２１）之屬性資料（１２１１）與代碼（１１１），並藉由每一欄位（１２１）之屬性資料（１２１１）與代碼（１１１）產生可存取關聯式資料庫之程式（２），以建立出對應的網頁程式碼檔案（３）；其中屬性資料（１２１１）可例如包括有一欄位名稱參數（Column Name）、一資料型態參數（Datatype）、一欄位長度參數（資料型態參數後之數值）、一主鍵參數（primary key，PK）、非無參數（not null，NN）、唯一參數（unique，UQ）、二位元參數（binary，BIN）、無正負號參數（unsigned，UN）、零填充參數（zero fill，ZF），以及自動增號參數（auto increment，AI）等適用於資料欄位之型別，而可存取關聯式資料庫之程式（２）則包括編譯器與直譯器程式，而編譯器程式可例如為C#語言、JAVA語言等，而直譯器程式可例如但不限定為PHP、JSP或ASP程式等；再者，上述之詮釋資料（１３）係用以描述資料的資料（Data about Data），指對數位資訊之內容、格式、結構、使用方式等之說明與描述，以作為電腦系統在存取、使用該數位資訊之依據，網頁開發者（Ｂ）藉此可以檢索到關聯式資料庫（１）適當的屬性資料（１２１１）（例如：欄位名稱參數、資料型態參數等）與註解（１２１２）中之代碼（１１１）；以及

步驟四：網頁程式碼檔案（３）於網頁編輯系統（Ａ）即產生每一欄位（１２１）對應功能函式（１１２）的表單介面（４）與網頁處理程式（５）；請參閱第四圖所示，係以本發明方法於前台網站所呈現表單介面之網頁示意圖；其中除了於photo欄位（１２１）之註解（１２１２）中儲存代碼2之外，本實施例更於docFile、UploadVideo、WebAddress與YoutubeVideo欄位（１２１）之註解（１２１２）中分別儲存代碼3、4、5與7，如此，使得上傳檔案(docFile)欄位（１２１）於前台網站可自動產生上傳文件按鈕、檔案選擇與上傳程式，上傳完畢後於上傳按鈕下方立即顯示所上傳文件之下載超連結，也會在其他負責顯示資料的網頁程式會提供檔案下載的超連結，其中文件可上傳的格式爲DOC/DOCX、XLS/XLSX、 PPT/PPTX、PDF、TXT等；而上傳影片(Upload Video) 欄位（１２１）於前台網站可上傳爲MP4格式之影片，功能內容與上傳圖片與文件相同，都包含了上傳按鈕、檔案選擇與影片上傳。影片上傳後在顯示的網頁程式中會嵌入播放影片的對應程式；WebAddress欄位（１２１）於前台網站可針對所輸入的文字內容，轉成爲超連結之顯示模式，可供使用者點選至指定網址；YoutubeVideo欄位（１２１）於前台網站則可填入Youtube影片代碼（１１１），本系統自動產生嵌入影片之程式碼並嵌入於網頁程式中，之後使用者可自動播放影片；據此，本發明從資料表欄位註解產生網頁程式與對應表單介面方法能以最迅速、簡單的方式，藉由儲存於每個資料欄位（１２１）註解（１２１２）中的代碼（１１１），產生該欄位（１２１）對應功能函式（１１２）的表單介面（４）與網頁處理程式（５），解決傳統網站開發者於每個欄位（１２１）欲儲存關聯式資料庫（１）無法定義的資料來源時，需要撰寫對應的前端界面與後端程式來處理這些資料的麻煩，藉此可大幅加快網站應用程式的開發速度。

綜上所述，本發明之從資料表欄位註解產生網頁程式與對應表單介面之方法，的確能藉由上述所揭露之實施例，達到所預期之使用功效，且本發明亦未曾公開於申請前，誠已完全符合專利法之規定與要求。爰依法提出發明專利之申請，懇請惠予審查，並賜准專利，則實感德便。

惟，上述所揭之圖示及說明，僅為本發明之較佳實施例，非為限定本發明之保護範圍；大凡熟悉該項技藝之人士，其所依本發明之特徵範疇，所作之其它等效變化或修飾，皆應視為不脫離本發明之設計範疇。

（Ａ）　　　　網頁編輯系統

（Ｂ）　　　　網頁開發者

（１）　　　　關聯式資料庫

（１１）　　　註解功能對應表

（１１１）　　代碼

（１１２）　　功能函式

（１２）　　　資料表

（１２１）　　欄位

（１２１１）　屬性資料

（１２１２）　註解

（１３）　　　詮釋資料

（２）　　　　可存取關聯式資料庫之程式

（３）　　　　網頁程式碼檔案

（４）　　　　表單介面

（５）　　　　網頁處理程式

（６）　　　　圖片

（Ｓ１）　　　步驟一

（Ｓ２）　　　步驟二

（Ｓ３）　　　步驟三

（Ｓ４）　　　步驟四

第一圖：本發明方法之步驟流程圖

第二圖：適用於本發明方法之網頁編輯系統方塊示意圖

第三圖：本發明於網頁編輯系統建立資料表之使用者介面示意圖

第四圖：以本發明方法於前台網站所呈現表單介面之網頁示意圖

第五圖：以本發明方法於前台網站點選上傳圖片、上傳檔案與上傳影片後所呈現表單介面之網頁示意圖

（Ａ）　　　　網頁編輯系統（Ｂ）　　　　網頁開發者（１）　　　　關聯式資料庫（１１）　　　註解功能對應表（１１１）　　代碼（１１２）　　功能函式（１２）　　　資料表（１２１）　　欄位（１２１１）　屬性資料（１２１２）　註解（１３）　　　詮釋資料（２）　　　　可存取關聯式資料庫之程式（３）　　　　網頁程式碼檔案（４）　　　　表單介面（５）　　　　網頁處理程式

Claims

一種從資料表欄位註解產生網頁程式與對應表單介面之方法，係適用於一具有關聯式資料庫之網頁編輯系統，其方法包括下列步驟：　　步驟一：網頁開發者建立一註解功能對應表並儲存於該關聯式資料庫中，該註解功能對應表包括至少一代碼，以及對應該代碼之功能函式；　　步驟二：將該代碼儲存於資料表對應欄位的註解中；　　步驟三：利用該關聯式資料庫之詮釋資料獲得每一欄位之屬性資料與該代碼，並藉由該屬性資料與該代碼產生可存取關聯式資料庫之程式，以建立出對應的網頁程式碼檔案；以及　　步驟四：該等網頁程式碼檔案於該網頁編輯系統即產生每一欄位對應功能函式的表單介面與網頁處理程式。
如申請專利範圍第1項所述之方法，其中該代碼係以數值方式儲存於資料表欄位的註解中。
如申請專利範圍第1項所述之方法，其中該代碼係以階層式語言儲存於資料表欄位的註解中。
如申請專利範圍第3項所述之方法，其中該階層式語言係為XML（Extensible Markup Language ）或JSON（JavaScript Object Notation）其中之一。
如申請專利範圍第1項所述之方法，其中該屬性資料包括有一欄位名稱參數、一欄位長度參數、一資料型態參數、一主鍵參數、非無參數、唯一參數、二位元參數、無正負號參數、零填充參數，以及自動增號參數。
如申請專利範圍第1項所述之方法，其中該關聯式資料庫係為SQL Server、MySQL、DB2或Oracle其中之一。
如申請專利範圍第1項所述之方法，其中該可存取該關聯式資料庫之程式包括有編譯器和直譯器程式。