第二十五章 應用Internet Express的程式開發

Presentation on theme: "第二十五章 應用Internet Express的程式開發"— Presentation transcript:

1 第二十五章 應用Internet Express的程式開發
我們可以輕易的使用Web介面，在用戶端來取得伺服器裡資料庫的資訊，讓這些資訊顯示在網頁上面。但是如果想要將伺服器資料庫的資料先搬動到用戶端，然後在用戶端進行資料庫的修改存取，接著再搬回伺服器呢？感覺就複雜多了，而這就是本章所要介紹的InternetExpress所帶給我們強大神奇的功能。

2 大綱 25-1 InternetExpress導論 25-2 實作範例說明 25-3 建置多層存取架構 25-4 整合資料查詢 本章習題

3 25-1 InternetExpress導論 不同於一般Two-Tier的架構，InternetExpress提供了另外一種的資料庫存取方式。應用程式取得資料庫伺服器的資料，經由InternetExpress所提供的服務，將取得的資料轉換成XML格式的網頁，然後再傳送給用戶端去瀏覽這個網頁，並且提供了可以編輯的介面。對於使用者而言，他只需要去編輯者個網頁介面的內容，這個編輯完的內容將會被利用JavaScript以更新的方式將被修改過的資料再寫回資料庫。 所以說，等於是用戶端把資料庫資料般出來，改一改，再全部搬回去。這大概就是InternetExpress的精神所在了。C++ Builder開發環境下，在Internet Express這個元件面版分類裡有兩個元件，分別為：XMLBroker和InetXPageProducer。

4 InternetExpress和一般資料庫動作的差異
一般Two-Tier架構下，用戶端進行五個updata更新動作的示意圖。 在InternetExpress概念下，進行五個update更新動作的示意圖。 用戶端取得資料集 用戶端編輯取回的資料集 用戶端回存資料集到資料庫伺服器

5 25.1.1用戶端取得資料集 由於現在我們在用戶端所要使用的瀏覽工具，就是一般的網頁瀏覽器；對於網頁瀏覽器而言，根本不可能辨識ClientDataSet元件所提供的資料，所以我們可以知道，如果要使用這種方式來存取資料庫，一般的C++Builder所提供的方式是行不通的。所以這個時候，XMLBroker的出現就是為了要面對這個問題，這也是InternetExpress作為資訊傳遞最重要的概念。 XMLBroker所要處理的事情，跟ClientDataSet的作用是很類似的。由於現在用戶端所使用的應用程式是網頁的瀏覽器，所以最便利的資料結構的格式就是把所有的取得資訊轉換成為XML的格式。於是在把資料傳給用戶端之前，必須要先做轉換的動作，而這個動作就是由XMLBroker元件所負責的。 在internetExpress架構下，可以是兩層(Two-Tier)的或是多層(Multi-Tier)的存取結構。在兩層結構下，資料存取元件、資料提供者、和XMLBroker元件都和WEB應用程式放在一起；而多層的存取架構下，資料存取元件、資料集提供者則是放到應用程式伺服器裡，而在Web應用程式這邊，則包含了XMLBroker和DataSnap這兩個元件。

6 25.1.1用戶端取得資料集 XMLBroker元件主要用於處理兩件事
當用戶端使用瀏覽器將這些XML格式的資料做完更新以後，XMLBroker必須負責接收這些被更新的資料然後再傳給資料庫系統去做相對應的處理

7 XMLBroker的重要屬性 屬性名稱 說明 RemoteServer
指定建立連線到應用程式伺服器的元件名稱，這是在Multi-Tier多層架構下才需要指定的，一般兩層架構可以忽略。 ProviderName 指定資料集提供者，對於兩層式架構，可以直接從這個屬性選取資料集提供者，若是多層式的存取架構，則需要經由RemoteServer屬性指定應用程式伺服器了以後，才可以用選取的方式指定這個屬性。 MaxRecords 每次轉換的資料最多可以有多少筆，這可以避免過多的資料集一次傳給用戶端，這樣對於用戶端和網路頻寬都會造成很大的負擔。但是如果我們是針對小型的資料庫的話，就可以把這個值設定成為-1，這樣一次就會把伺服器所有的資料集一口氣傳給用戶端。 Params 當資料集透過動態查詢或呼叫預存程序取得時，可以使用這個屬性來指定條件參數值

8 XMLBroker的重要事件 事件名稱 說明 AfterDispatch 當XMLBroker處理完請求的對應動作時，此事件就會發生。
BeforeDispatch 元件收到資料更新的請求，這個事件就會發生，藉由這個事件的發生，來處理請求的對應動作。 OnGetErrorResponse 當資料的更新動作發生錯誤的回應，此時此件事就會發生。 OnGetResponse 當此事件發生時，表示資料順利的被更新了。 OnRequestRecords 當XMLBroker需要從資料提供者端取得新的資料時，此事件就會發生。 OnRequestUpdate 正在執行資料更新的時候，這個事件就會發生。

9 用戶端編輯取回的資料集 InternetExpress分類裡的另外一個元件InetXPageProducer了，此元件可以建立網頁畫面，利用這個元件，程式設計師可以連結到XMLBroker元件來取得資料集，然後藉由這些取得的資料集來產生相對應的編輯欄位。 要產生的網頁介面是由InetXPageProducer元件負責的，當我們要設定網頁內容的樣板格式時，就去設定該元件裡的HTMLDoc屬性，也就是說，我們可以先在HTMLDoc屬性裡指訂網頁的基本外觀和格式，如背景，插圖，或是題字等等(右圖為編輯畫面)。

10 用戶端編輯取回的資料集 除此之外，InetXPageProducer也提供了一個類似於FrontPage的編輯網頁介面Web Page Editor，在InetXPageProduce元件上面按下滑鼠右鍵就可以點選開啟了，其畫面有分兩個部分：HTML就是顯示HTML原始碼的畫面，Brower就是顯示瀏覽器處理這些HTML碼的時候，所會顯示的畫面，如右圖

11 25.1.3用戶端回存資料集到資料庫伺服器 當使用者編輯完了這些來自XML格式的網頁以後，將要回傳給資料庫伺服器做更新，在InetnetExpress裡，是利用JavaScript語言來整合網頁資料和資料庫資料，加上一些附加的功能。所以說，真正處理資料的是交給JavaScript語言來處理，而程式設計師並不需要真的會編輯JavaScript語言，因為這都是要交給C++Builder來做的。最後透過JavaScript就可以把更新的資料套到資料庫的資料，最後再統一格式送回給伺服器。

12 25-2 實作範例說明 本範例裡所使用的資料庫系統為MircoSoft Access，運用的資料庫存取元件為ADO系列元件。一開始先在Access環境裡編輯好一個簡單的通訊錄，如圖，名為AddressBook。這個資料表裡面有五筆資料，紀錄了簡單的個人資訊。

13 實作範例說明-1 但是在我們開始使用C++Builder開發之前，要先把網路伺服器的環境設定好。
由於InternetExpress技術是透過JavaScript來進行資料處理的動作，而這些JavaScript原始碼，都可以由InetXPageProducer來自動產生，而這些自動產生出來的原始碼將會呼叫一些C++Builder所提供的函式庫，所以我們必須要把這些函式庫放到IIS的有效目錄內。 這些函式庫是放在C++Builder安裝好的目錄下的Source\WebMidas子目錄內，我們可以把這個目錄的內容都搬到IIS的根目錄下。 本範例環境設定如下： IIS的根目錄為C:\wwwroot C++Builder的安裝目錄為E:\CBuilder6

14 實作範例說明-2 除了可以把E:\CBuilder6\Source\WebMidas下的檔案都搬到C:\wwwroot下的某個子目錄以外，我們也可以有以個比較技巧的做法, 只需要在IIS設定裡，設定一個虛擬目錄到E:\CBuilder6\Source\WebMidas就可以了。 因為InternetExpress服務是使用CGI的格式由伺服器發送資訊給用戶端，所以接下來就是要修改IIS的設定，使其可以執行CGI程式，進入預設網址的內容選單 將根目錄權限的Script Acess選項勾選，並且在執行權限的下拉選單選擇也可以執行執行檔。

15 實作範例說明-3 接著我們就可以開始專案開發的動作
在C++Builder環境下，新增一個專案。專案的類型為Web Server Application，型態為CGI Stand Alone Executable，我們將會有一個空白的專案。 接著開始要加入元件了，首先我們需要使用ADO元件來連結Access的mdb檔案資料庫，所以我們需要元件ADOConnection和ADOTable。 在ADOConnection的ConnectionString屬性裡連結到mdb檔案 當資料庫檔案連結成功，設定ADOTable的元件裡的Connection屬性為ADOConnection1。然後把TableName屬性指定為AddressBook，並且之後把Active屬性設定為True。 把Data Access分類標籤裡的DataSetProvider元件拉進專案裡。然後把DataSet屬性設定成ADOTable1。 把XMLBroker的ProviderName設定為DataSetProvider1了，別忘了這時要把Connected屬性改成True。

16 實作範例說明-4 下一步，就是要開始建構處理完的資料所要顯示的網頁介面，也就是InetXPageProducer元件此時要拉進專案的時候了。在 InetXPageProducer元件圖示上面按下右鍵，點選Web Page Editor就可以開啟編輯選單，如圖。 在左邊的分頁裡按下滑鼠右鍵，點選New Component，選取DataForm選項。接著點選左邊分頁裡新出現的DataForm1再按下選單裡的NewItem選項(選單圖示的第一項)。然後按下Ctrl鍵點選DataNavigator和FieldGroup，新增這兩個選項。

17 實作範例說明-5 在FieldGroup1的屬性XMLBroker裡設定成XMLBroker1，而DataNavigator1的XMLComponent屬性設定成FieldGroup1。

18 實作範例說明-6 接下來在InetXPageProducer1的IncludePathURL屬性，要設定函式庫目錄，也就是我們剛剛所設定的虛擬目錄WebMidas。如： 這個設定是給用戶端瀏覽器看的，也就是說如果設定如上是localhost的話，那麼只有伺服器本身的瀏覽器可以開啟，其他電腦的瀏覽器將無法找到，所以這裡如果是真的要透過網路來提供InternetExpress服務的話，就要設定實體位置。

19 實作範例說明-7 InternetExpress的架構已經完成了，現在要做的就是修飾的部分
在Web Page Editor的左上框裡，將滑鼠移到DataNavigator1上面，再按下右鍵選取New Component就可以選擇各式各樣的功能鈕的功能，如刪除，下一筆資料，更新…..等等。 把這些功能都選取然後新增，然後在Web Page Editor的下面框就可以點選按鈕，修改其屬性。如筆者如果修改了Apply Updatas按鈕的Caption屬性成為更新資料庫，結果如下\圖：

20 實作範例說明-8 最後，就是要測試cgi程式是否能夠順利執行。在Project選單裡Build好這個專案，然後把產生的執行檔案放到IIS的根目錄範圍下。如將執行檔ch26_001.exe放到C:\wwwroot\temp\子目錄中。 然後到另外一台有網路的電腦上面使用瀏覽器開啟這個執行檔 ,如果成功，如圖的畫面就會出現了。

21 25-3 建置多層存取架構 在比較大型的資料庫網路系統下面，我們會希望把伺服器端分開來，一是應用程式伺服器提供資料庫模組，另一是單純的Web應用程式伺服器用來放置InternetExpress的執行程式。 這個Web應用程式伺服器可以利用DataSnap的元件來和資料庫取得連線。這樣子的架構，就可以把資料庫和網頁處理的動作分開到兩台不同的機器了。

22 多層存取架構範例 本範例使用Access的mdb檔案作為資料庫,需要建立兩個BCB的專案:
一是應用程式伺服器，用來連結資料庫並且把資料庫的資訊提供給InternetExpress專案作為資料來源 另一個專案就是InternetExpress的專案，使用CGI的格式，讓用戶端使用瀏覽器來開啟。

23 多層存取架構範例- 應用程式伺服器的建立 1 首先建立一個example.mdb的範例資料庫，資料庫裡面有一個Person資料表，是個簡單的個人資料記錄，如下圖:

24 多層存取架構範例- 應用程式伺服器的建立 2 有了這個資料表以後，我們就開始建立BCB的專案了。首先我們可以先建立一個普通的Application專案，在Form1裡隨意編輯一個簡單的畫面，如下圖。

25 多層存取架構範例- 應用程式伺服器的建立 3 接下來就要開始重要的步驟了，我們在這個專案裡加入一個Remote Data Module模組，從工具列的File裡的New選項，選擇Other分類，然後再Multitier頁籤裡可以找到這個模組，這裡我們會被要求輸入這個模組物件的命名，筆者命名為RDMObj25_2。而這個專案就是要利用這個模組來提供給InternetExpress專案資料庫資源。 後我們就可以在這個模組上，加入連結資料庫必要的元件，首先我們先加入ADOConnection元件，在元件功能列的ADO頁籤裡。加入後在元件圖示上用滑鼠點選兩次，開啟資料庫連結的對話方塊。

26 多層存取架構範例- 應用程式伺服器的建立 4 選擇Jet 4.0 OLE DB Provider來連結mdb資料庫
多層存取架構範例- 應用程式伺服器的建立 4 選擇Jet 4.0 OLE DB Provider來連結mdb資料庫 指定mdb檔案的路徑和檔案

27 多層存取架構範例- 應用程式伺服器的建立 5 現在我們連結好資料庫了，下一步就是拉入ADO頁籤裡的ADOQuery元件，元件的Connection屬性當然就是指定為ADOConnection1。 編輯SQL屬性，這個屬性裡我們輸入SQL的語法，告訴ADOQuery元件我們需要的資料表和資料欄位。 如圖顯示 然後把Active屬性改成true，這樣查詢資料表的動作就告一段落。 最後一個我們需要的元件，就是Data Access頁籤的DataSetProvider元件了，將這個元件拉進專案裡，然後把其中的DataSet屬性設定為 ADOQuery，如此就完成了應用程式伺服器的所有動作了。

28 多層存取架構範例- InternetExpress伺服器建立 1
現在我們有了應用程式伺服器提供資料庫服務，就欠一個WEB伺服器來提供CGI服務了，在這裡我們必須要在另外開啟一個新的專案。這個專案的型態和上一節所介紹的相同，就是Web Server Application分類裡的CGI Stand-alone executable型態專案。 開啟好了新專案後，首先要做的就是跟剛剛完成的資料庫伺服器連結，這個時候就需要DataSnap頁籤裡的DCOMConnection元件了，當然我們也需要加入InternetExpress頁籤下的XMLBroker和InetXPageProducer兩個元件。

29 多層存取架構範例- InternetExpress伺服器建立 2
在DCOMConnection元件裡有一個屬性：ComputerName，這是用來指定網路上的電腦哪一台是應用程式伺服器，如果是在同一個網域下的話，可以直接指定該電腦在網路上的名稱，或者我們也可以直接指定IP 當這個指定動作無誤以後，在ServerName屬性，就能看到RDMObj25_2這個選項了，我們就指定這個選項。 把Connected選項設定成True了，這個時候本專案就會去做連結應用程式伺服器的動作了，如果連結成功，那麼在應用程式伺服器的主表單畫面就會出現

30 多層存取架構範例- InternetExpress伺服器建立 3
在XMLBorker1元件的RemoteServer屬性，選定為DCOMConnection1，然後在ProviderName屬性設定成DataSetProvider1，這個DataSetProvider1元件就是應用程式伺服器的元件。然後將Connected屬性設定成true 開始設定InetXPageProducer元件 選擇選單上的Web Page Editor，然後加入一個DataForm，並在此DataForm1裡再加入DataNavigator和DataGrid元件，把DataGrid的XMLBroker屬性選擇XMLBroker1，DataNavigator的XMLComponent屬性指定為DataGrid1 把這兩個元件的Field都加入到專案裡以方便修改

31 多層存取架構範例- InternetExpress伺服器建立 4
最後一個步驟，就是在工具列的Add New裡，新增一個WebActionItem元件，把該元件的default屬性設定成true,並且把Producer屬性設定成InetXPageProducer1元件。 把Build好的執行檔放到IIS的有效目錄範圍內。我們可以開始利用用戶端瀏覽器來觀看CGI執行的結果。

32 25-4 整合資料查詢 在資料庫裡面，某些重要欄位是可以有關聯的(relation)，這先關聯可以透過關鍵值(Key)來做連結。
這樣的連結和讀取的動作，可能會取出大量的資料庫資料造成讀取的負載提高 本節我們將要介紹，如何使用InternetExpress的架構來一次讀取不同的資料表單。

33 整合資料查詢範例 本節的範例先利用Access建立一個範例資料庫db1.mbd。這個資料庫裡將會有兩個資料表，一個是紀錄學生的基本資料Personal資料表，另外一個是學生的學期成績Grade資料表 所以我們現在有兩個資料表，這兩個資料表裡面共同擁有有具有單一性質的欄位就是姓名(Name)和學號(sn)，由於名字有可能再以後資料庫擴大的時候出現重複的情形，所以在此筆者選擇用學號來當做關鍵值。而建立關聯的動作，雖然Access本身也有提供，但我們留在BCB再作動作。

34 整合資料查詢範例- 應用程式伺服器的建立 1 本節的範例將會和前一節一樣，建立的是多層的存取架構，但是加入多表單整合的實作。
首先要做的就是先建立應用程式伺服器，做法和前一節的一樣，我們可以先新開一個普通的專案，然後加入一個Remote Data Module，命名為RDMObj25_3。然後加入ADOConnection元件用來連結資料庫。到這裡為止，動作都和上一節的範例是相同的。 加入ADO頁籤裡面的ADODataSet元件兩個到專案裡，每一個個別負責一個資料表的資料。所以這兩個元件的Connection屬性都設定成ADOConnection1。 因為有兩個資料表，一個是Personal，一個是Grade，在此讓ADODataSet1元件負責Personal資料表，而ADODataSet2元件負責Grade資料表。

35 整合資料查詢範例- 應用程式伺服器的建立 2 在ADODataSet1的CommandText屬性，在編輯框裡寫入：
Select * From Personal 另外在ADODataSet2的CommandText屬性寫入： Select * From Grade 如此一來ADODataSet1將會透過ADOConnection1連結到資料庫並取出資料表Personl的所有欄位，而ADODataSet2也同理取出Grade的所有欄位了。 把DataAccess頁籤裡的DataSource元件加入專案裡，我們需要這個元件來做資料表結合的動作(Join)。將DataSource的元件的DataSet屬性指向ADODataSet1，然後再把ADODataSet2的DataSource屬性指定成DataSource1，如此一來，我們就可以以ADODataSet1元件所處理的Personal資料表為基準，加入ADODataSet2元件所負責的Grade資料表的資料了。

36 整合資料查詢範例- 應用程式伺服器的建立 3 在ADODataSet2的MasterFields屬性開啟編輯窗，我們就可以看到如圖的畫面了，左邊為Detail Fields右邊為Master Fields，所謂的Master Fields就是主要的欄位，在這裡就是ADODataSet1所負責的Personal資料表的資料，而Detail Fields就是透過連結加入進來的欄位，就是ADODataSet2所負責的Grade資料表。 在MasterFields裡選擇sn，在Detail Fields裡也選擇sn，然後按下Add，那麼Joined Fields裡就會加入sn這個關鍵值連結關係了。

37 整合資料查詢範例- 應用程式伺服器的建立 4 完成了與資料庫的動作，我們需要把這些資料庫的資訊提供出去，就又需要加入DataAccess頁籤的DataSetProvider元件了。 在DataSetProvider1元件的DataSet屬性，指定為ADODataSet1(非ADODataSet2，因為ADODataSet1負責的才是Master Fields)。 應用程式伺服器已經完成了，接下來就是建立InternetExpress伺服器。

38 整合資料查詢範例- InternetExpress伺服器的建立 1
DCOMConnection，XMLBroker，InetXPageProducer DCOMConnection1元件的Computer Name屬性指定剛剛才完成的應用程式伺服器的網路名稱或網路位置，然後ServerName就設定為RDMObj25_3 (可用選的)。 將XMLBroker元件的RemoteServer屬性指向DCOMConnection1元件，完成這個動作以後，在Providername屬性設定就可以選擇DataSetProvider1了，最後將Connected屬性設定為True

39 整合資料查詢範例- InternetExpress伺服器的建立 2
根據25-2的範例，設定好InetXPageProducer元件的IncludePathURL函式庫位置，就在元件圖示上面點兩下進入頁面編輯視窗。 在InetXPageProducer的Web Page Editor編輯畫面，新增一個DataForm元件，然後在DataForm1元件裡我們在加入兩個DataNavigator和一個DataGrid，一個FieldGroup，這四個元件。 在FieldGroup所要顯示的就是Grade資料表的內容，所以在FieldGroup1元件的XMLBroker屬性為XMLBroker1，而且在XMLDataSetField屬性要特別指定為ADODataSet2，這樣這個FieldGroup就會連結到Grade資料表了 再把DataNavigator2的XMLComponent指定為FieldGroup。同樣的在DataGrid1元件裡，XMLBroker屬性也是設定為XMLBroker1，再把DataNavigator1的XMLComponent屬性指定到DataGrid。

40 整合資料查詢範例- InternetExpress伺服器的建立 3
這樣到目前我們就把所有功能的部分完成了

41 整合資料查詢範例- InternetExpress伺服器的建立 4
最後一個動作，就是設定預設動作，我們再用滑鼠點選WebModule1兩次，開啟Actions對話盒，然後按下Add New新增WebActionItem1元件，將Producer設定為InetXPageProducer1並把default屬性改為true。 把Build好的執行檔案放到IIS的有效範圍目錄下。然後就可以用遠端電腦的瀏覽器來測試了。 如圖畫面就是執行結果，在DataGrid的範圍下點選不同的人，在Field Group的顯示就會變成對應的人的資料了。

42 本章習題 請說明InternetExpress架構在大型資料庫系統下所扮演的角色