1、網頁制作與設計數據庫與動態數據 第9章 數據庫與動態數據 9.1 動態網站技術 9.2 配置Web服務器 9.3 定義動態站點連接遠程服務器 9.4 數據庫配置與ODBC連接 9.5 創建動態網頁 本章習題 教學目標了解數據庫與動態數據的基本知識，明確數據庫與動態數據的流程及網站設計的要求與方法，為動態網頁的制作打下基礎。第9章 數據庫與動態數據 本章重點 動態網站技術 數據庫配置與ODBC連接 動態網頁的創建第9章 數據庫與動態數據 9.1 動態網站執行流程 9.1.1 什么是動態網站動態頁面的概念有以下幾條規則： “交互性”即網頁會根據用戶的要求和選擇而動態改變和響應，將瀏覽器作為客戶端界

2、面，這將是今后WEB發展的大勢所趨。 “自動更新”即無須手動地更新HTML文檔，便會自動生成新的頁面，可以大大節省工作量。 “因時因人而變”即當不同的時間、不同的人訪問同一網址時會產生不同的頁面。第9章 數據庫與動態數據 9.1 動態網站執行流程 9.1.2 動態網站原理及開發流程動態網站的開發需要三個步驟：(1) 架設并配置好Web服務器，構造互動網站的執行環境。(2) 根據需要，設計出數據庫。(3) 編寫服務器端的執行程序。第9章 數據庫與動態數據 動態網站執行流程圖 9.2 配置Web服務器 9.2.1 選擇Web服務器軟件由于每個人的工作平臺都可以因為需求不同而有所差別，所以我們也就需

3、要學習如何在不同的平臺上創造一個執行ASP程序的環境。各種適用于微軟Windows系列操作系統的Web服務器軟件第9章 數據庫與動態數據 電腦操作系統適用Web服務器軟件Windows98 SE/98/95PWS4.0WindowsNT4.0 WorkstationPWS4.0（For NT4.0 Workstation）WindowsNT4.0 ServerIIS 4.0Windows2000 ServerIIS 5.0WindowsXP ProfessionalIIS 5.1Windows2003 ServerIIS 6 9.2 配置Web服務器 9.2.2 安裝IIS （1）執行【開始】

4、【控制面板】菜單命令,打開【控制面板】窗口，雙擊其中的【添加或刪除程序】圖標，打開【添加或刪除程序】對話框，單擊【添加/刪除Windows組件】選項，如圖 第9章 數據庫與動態數據 9.2 配置Web服務器 9.2.2 安裝IIS 2）出現【Windows組件向導】對話框（這個過程可能要花一段時間），在【組件】列表中詳細列出了Windows操作系統的各個組件，其中帶有“”勾的表示已經安裝了。如果【Internet信息服務（IIS）】選項前沒有“”勾，單擊選中它；如果該項前已經有了“”勾，那么就不需要進行如下操作了，直接單擊【取消】按鈕退出安裝過程。這里單擊選擇【Internet信息服務（IIS

5、）】選項，如圖 第9章 數據庫與動態數據 9.2 配置Web服務器 9.2.2 安裝IIS （3）單擊【下一步】按鈕，根據提示操作，其間可能會要求插入WindowsXP的安裝光盤，插入光盤后安裝過程如圖 第9章 數據庫與動態數據 9.2 配置Web服務器 9.2.2 安裝IIS （4）經過了一段時間等待后，屏幕上出現【完成“Windows組件向導”】對話框，單擊【完成】按鈕，完成IIS的安裝，如圖 第9章 數據庫與動態數據 9.2 配置Web服務器 9.2.2 安裝IIS 安裝好IIS之后，就可以對其進行測試，看看安裝是否成功，是否能夠作為Web服務器。先讓我們打開瀏覽器（比如我們常用的Int

6、ernet Explorer），在瀏覽器的地址中輸入http:/localhost或者，并按Enter鍵。如果IIS安裝成功，就可以看到如圖 第9章 數據庫與動態數據 9.2.3定義根目錄 在安裝IIS這樣的Web服務器軟件之后，要在運行該Web服務器的計算機上為Web應用程序創建一個根文件夾。首先，應確保該文件夾已由Web服務器發布，即Web服務器可以根據Web瀏覽器的HTTP請求，提供此文件夾中的任何文件或其子文件夾中的任何文件。常用Web服務器的默認根文件夾 第9章 數據庫與動態數據 Web服務器默認根文件夾ColdFusion MXCfusionMXwwwrootIIS或PWSInet

7、pubwwwrootApacheapachehtdocs 9.2.3定義根目錄 如果要測試Web服務器，應將一個要測試HTML頁置于默認根文件中，然后嘗試通過在瀏覽器中輸入該頁的URL，打開該頁。URL由域名和HTML頁的文件名組成，如：/testpage.htm如果該Web服務器運行在本地計算機上，則可以使用localhost代替域名。使用Web服務器的不同，本地主機URL也不同。 第9章 數據庫與動態數據 Web服務器本地主機URLColdFusion MXhttp：/localhost：8500/IIS或PWShttp：/localhost/Apachehttp：/localhost：8

8、0/常用Web服務器的本地主機URL 9.2.4 配置IIS IIS安裝并測試成功后，接下來的工作是對它進行配置，來滿足實際使用的需要。（1）安裝在WindowsXP中的是IIS的5.1版本，打開【控制面板】，雙擊【管理工具】圖標，可以在【管理工具】對話框中看到剛才安裝的IIS服務器（即Internet信息服務），如圖 第9章 數據庫與動態數據 9.2.4 配置IIS （2）雙擊【Internet信息服務】圖標，打開如圖所示的【Internet信息服務】對話框。第9章 數據庫與動態數據 9.2.4 配置IIS （3）從左邊窗格中選擇【默認網站】，右擊，在圖中從上下文菜單中選擇【屬性】命令，打開

9、【默認網站屬性】對話框。 第9章 數據庫與動態數據 9.2.4 配置IIS （4）單擊對話框中的【主目錄】標簽，在【連接到資源時的內容來源】選項中選擇【此計算機上的目錄】單選按鈕，然后在【本地路徑】文本框中輸入本地目錄或單擊【瀏覽】按鈕定位并選擇一個本地目錄。如圖 第9章 數據庫與動態數據 9.2.4 配置IIS （5）選擇【文檔】標簽，單擊【啟用默認文檔】域中的【添加】按鈕，在【添加默認文檔】對話框中，按圖設定輸入默認文檔名，單擊【確定】按鈕關閉該對話框。第9章 數據庫與動態數據 9.2.4 配置IIS （6）回到【默認網站屬性】對話框，單擊【上移】按鈕，將剛才添加的文（index.asp）

10、移動到最上面。如圖 （7）還可以根據需要設置其它標簽的屬性，設置完成后單擊【確定】按鈕時，設置生效并關閉對話框。第9章 數據庫與動態數據 9.3定義動態站點連接遠程服務器 在配置完用來開發Web應用程序的Web服務器后，需要定義一個Dreamweaver站點管理文件。在定義站點開始之前，應滿足以下基本要求： 具有訪問Web服務器的權限。Web服務器可以在本地計算機上運行，或者在遠程服務器上運行。 應用程序服務器安裝并運行在運行的Web服務器的系統上。 已經運行Web服務器的系統上為Web應用程序創建了根文件夾。第9章 數據庫與動態數據 9.3定義動態站點連接遠程服務器 為Web應用程序定義Dr

11、eamweaver站點需要執行以下三個步驟：（1）將位于硬盤上的文件夾定義為用來存儲站點文件工作副本的Dreamweaver本地文件夾。（2）將位于正運行Web服務器的計算機上的文件夾定義為Dreamweaver遠程文件夾。（3）指定好Dreamweaver在工作時要處理的動態頁所發送到的具體路徑。在定義了Dreamweaver站點后，就可以開始生成Web應用程序了。第9章 數據庫與動態數據 9.3定義動態站點連接遠程服務器 9.3.1 定義本地和遠程站點 定義Dreamweaver本地文件夾和遠程文件夾的操作過程見“2.5.1 定義站點”一節中的內容，此處 “本地文件夾”的設置見圖【本地信息

12、】類別設置 ，“遠程文件夾”的設置見圖【遠端文件夾】設置 。第9章 數據庫與動態數據 第9章 數據庫與動態數據 【本地信息】類別設置 【遠端文件夾】設置 9.3定義動態站點連接遠程服務器 9.3.2指定測試服務器 定義好遠程文件夾后，需要指定測試服務器，即在其中處理動態頁的文件夾。Dreamweawer使用此文件夾生成動態內容并連接到數據庫。通常情況下，可以指定在Web服務器上創建的根文件夾，因此該服務器可能還運行處理動態頁的應用程序服務器。 第9章 數據庫與動態數據 9.3定義動態站點連接遠程服務器 9.3.3連接遠程服務器 連接遠程服務器，執行如下操作：（1）單擊【確定】按鈕，關閉【站點定

13、義】對話框。如果【文件】面板沒有打開，執行【窗口】【文件】命令（快捷鍵為F8）打開【文件】面板，單擊面板中的【擴展/折疊】按鈕，將【文件】面板切換到擴展模式（站點窗口），如圖第9章 數據庫與動態數據 第9章 數據庫與動態數據 【文件】面板擴展模式 9.3定義動態站點連接遠程服務器 9.3.3連接遠程服務器 （2）因為是第一次連接服務器，單擊工具欄中的【與遠程主機鏈接】按鈕，系統會自動與遠程服務器連接，當 鍵變為綠色時，表示登陸成功。再次單擊這個按鈕，可以與遠程服務器斷開。 第9章 數據庫與動態數據 9.4數據庫配置與ODBC連接從左面開始，動態網頁中的ASP程序通過ADO組件來調用ODBC驅動

14、程序或者OLEDB（嵌入式數據庫）提供程序。 第9章 數據庫與動態數據 9.4數據庫配置與ODBC連接 9.4.1創建數據庫要創建數據庫，需在Microsoft Access中進行以下操作：（1）打開Access軟件，選擇菜單【文件】【新建】【空數據庫】命令，打開【文件新建數據庫】對話框，在對話框中選擇路徑和文件名，如圖所示。然后單擊【創建】按鈕，新建數據庫。 第9章 數據庫與動態數據 9.4數據庫配置與ODBC連接 9.4.1創建數據庫（2）在彈出的如圖所示的【Access：數據庫】對話框中雙擊【使用設計器創建表】。第9章 數據庫與動態數據 9.4數據庫配置與ODBC連接 9.4.1創建數據

15、庫（3）在表設計框中輸入各個字段。注意在建好第一個ID字段后，單擊工具欄中的【主鍵】按鈕，將ID設置為主鍵值，【數據類型】一欄選擇“自動編號”，按照如圖所示填好。 第9章 數據庫與動態數據 9.4數據庫配置與ODBC連接 9.4.1創建數據庫（4）單擊工具欄中的【保存】按鈕保存表單，在彈出的【另存為】對話框指定表名稱，如圖所示。這樣，一個可以記錄人員檔案的數據庫就建好了。 第9章 數據庫與動態數據 9.4數據庫配置與ODBC連接 9.4.2創建數據源 添加ODBC數據源 （1）選擇【開始】【控制面板】命令打開【控制面板】對話框，雙擊其中的【管理工具】圖標，如圖 第9章 數據庫與動態數據 9.4

16、數據庫配置與ODBC連接 9.4.2創建數據源 添加ODBC數據源 （2）在打開【管理工具】對話框中雙擊【數據源（ODBC）】圖標，如圖 第9章 數據庫與動態數據 9.4數據庫配置與ODBC連接 9.4.2創建數據源 添加ODBC數據源 （3）在打開的【ODBC數據源管理器】對話框中，單擊【系統DSN】標簽，如圖 第9章 數據庫與動態數據 9.4數據庫配置與ODBC連接 9.4.2創建數據源 添加ODBC數據源 （4）單擊【添加】按鈕，選擇驅動程序Driver do Microsoft Access（*.mdb），添加系統數據源，如圖 第9章 數據庫與動態數據 9.4數據庫配置與ODBC連接

17、9.4.2創建數據源 添加ODBC數據源 （5）單擊【完成】按鈕，彈出的【安裝】對話框，在【數據源名】文本框中輸入數據源的名稱；在【說明】文本框中輸入數據庫相關的說明性文字；然后單擊【數據庫】域中的【選擇】按鈕，選擇前面創建的數據庫，如圖 第9章 數據庫與動態數據 9.4數據庫配置與ODBC連接 9.4.2創建數據源 添加ODBC數據源 （6）單擊【確定】按鈕，回到【ODBC數據源管理器】對話框，可以看到剛才新建的數據源，如圖 （7）單擊【確定】按鈕，完成數據源的創建。 第9章 數據庫與動態數據 9.4數據庫配置與ODBC連接 9.4.3連接數據庫在Dreamweaver中創建數據庫連接的步驟

18、如下：（1）Dreamweaver中，使用【文件】【新建】命令打開【新建文檔】對話框，按圖所示選擇建立一個動態網頁。比如在【類別】列表中選擇【動態頁】選項，然后在【動態頁】列表框中選擇ASP VBScript。 第9章 數據庫與動態數據 9.4數據庫配置與ODBC連接 9.4.3連接數據庫在Dreamweaver中創建數據庫連接的步驟如下：（2）單擊【創建】按鈕，Dreamweaver將創建一個動態網頁。選擇【窗口】【數據庫】菜單命令（快捷鍵為Ctrl+Shift+F10），打開【數據庫】面板，如圖 第9章 數據庫與動態數據 9.4數據庫配置與ODBC連接 9.4.3連接數據庫在Dreamwe

19、aver中創建數據庫連接的步驟如下：（3）單擊按鈕，從下拉菜單中選擇【數據源名稱（DSN）】對話框。在【連接名稱】文本框中為連接起一個名字，然后從【數據源名稱（DSN）】彈出菜單中選擇在前面創建的數據源userinfo，如圖 第9章 數據庫與動態數據 9.4數據庫配置與ODBC連接 9.4.3連接數據庫在Dreamweaver中創建數據庫連接的步驟如下：（4）單擊【測試】按鈕，Dreamweaver嘗試連接到數據庫。如果連接失敗，應復查該DSN。如果連接仍失敗，應檢查Dreamweaver用來處理動態頁的文件夾的設置。如果連接成功，會出現如圖 第9章 數據庫與動態數據 9.4數據庫配置與ODB

20、C連接 9.4.3連接數據庫在Dreamweaver中創建數據庫連接的步驟如下：（5）單擊【確定】按鈕，回到【數據源名稱（DSN）】對話框，在單擊【確定】按鈕，完成數據源的連接。此時新連接出現在【數據庫】面板上，如圖 第9章 數據庫與動態數據 9.5創建動態網頁 9.5.1創建記錄集（1）在【應用程序】面板中單擊【綁定】標簽，切換到【綁定】類別；或者選擇【窗口】【綁定】菜單命令（快捷鍵為Ctrl +F10）切換到【綁定】類別。單擊按鈕，從彈出菜單中選擇【記錄集（查詢）】命令，如圖 第9章 數據庫與動態數據 9.5創建動態網頁 9.5.1創建記錄集（2）在彈出的【記錄集】對話框中，在【連續】彈出

21、菜單中選擇剛才新建的連接testdata；在【表格】彈出菜單中將出現該連接中的表格；在【列】選項中如果選擇【全部】單選按鈕，則會在列表中顯示表中所有的列，如圖 第9章 數據庫與動態數據 9.5創建動態網頁 9.5.1創建記錄集（3）如果對SQL語言比較熟悉，單擊對話框中【高級】按鈕，出現對話框如圖所示。在SQL列表中可以輸入SQL語言進行記錄集查詢。第9章 數據庫與動態數據 9.5創建動態網頁 9.5.1創建記錄集（4）單擊【確定】按鈕回到【綁定】面板，面板中列出了所有綁定的記錄集，如圖 第9章 數據庫與動態數據 9.5創建動態網頁 9.5.2添加記錄集 （1）新建一個HTML網頁，并將其保存

22、在IIS的根文件夾C：Inetpubwwwroot中，命名為index.asp。因為在9.1.4小節中已經將index.asp設置為IIS的默認文檔，所以當在瀏覽器的地址欄中輸入http：/localhost或 時應該打開該頁面。第9章 數據庫與動態數據 9.5創建動態網頁 9.5.2添加記錄集 （2）單擊輸入欄【應用程序】類別中的【插入記錄】按鈕右側的箭頭，從彈出菜單中選擇【插入記錄表單向導】命令，打開【插入記錄表單記錄】對話框，選擇正確的連接與表格，如圖 第9章 數據庫與動態數據 9.5創建動態網頁 9.5.2添加記錄集 （3）在列表中選擇ID字段，單擊按鈕，這個字段將不顯示；依次修改每個

23、字段的【標簽】設置；在【插入后，轉到】文本框中輸入ASP腳本文件的名稱，或者單擊【瀏覽】按鈕定位并選擇腳本文件，如圖 第9章 數據庫與動態數據 9.5創建動態網頁 9.5.2添加記錄集 （4）單擊【確定】按鈕，這時可以看到在網頁中出現了一個表單，按F12預覽可以看到效果。通過這個表單，填寫相應的信息，按“插入記錄”按鈕就可以將一組數據提交到與之相連的userinfo數據庫了。如圖 第9章 數據庫與動態數據 9.5創建動態網頁 9.5.3顯示記錄 （1）在剛才生成的菜單前面單擊鼠標，將插入點定位，然后單擊插入欄【應用程序】類別中的【動態數據】按鈕右邊的箭頭，從彈出菜單中選擇【動態表格】命令，出現

24、【動態表格】對話框，并按圖9.40所示進行設置，以生成一個表格。 第9章 數據庫與動態數據 9.5創建動態網頁 9.5.3顯示記錄 （2）將表格中表頭的文本都更改為漢字，效果如圖 （3）對網頁稍加修飾，完成這個示例的操作 第9章 數據庫與動態數據 9.5創建動態網頁 9.5.3顯示記錄 （4）按Ctrl+S鍵保存文件，然后啟動瀏覽器Internet Explorer，然后在【地址】欄中輸入，按Enter鍵，出現的結果如圖 第9章 數據庫與動態數據 9.5創建動態網頁 9.5.3顯示記錄 （5）在“添加人員檔案”的各個文本框中輸入向關信息，單擊【插入記錄】即可將記錄添加到上邊的“人員檔案”中，如

25、圖 第9章 數據庫與動態數據 9.5創建動態網頁 9.5.4分頁顯示多條記錄 （1）將插入點移動到剛才我們編輯的頁面的最下方，也就是整個顯示文本框的下方，然后單擊插入欄【應用程序】類別中的【記錄導航條】按鈕 來插入記錄導航條,如圖 第9章 數據庫與動態數據 9.5創建動態網頁 9.5.4分頁顯示多條記錄 （2）在彈出的【記錄導航條】對話框中【記錄集】設定要加入導航的記錄集，其中導航條的形式我們可以選擇文本或是圖像模式。在這里我們選擇【文本】，按【確定】提交，如圖 第9章 數據庫與動態數據 9.5創建動態網頁 9.5.4分頁顯示多條記錄 （3）在編輯頁面的下方出現了記錄集導航條，如圖所示，這就是Dreamweaver MX 2004預置好的分頁顯示方案第9章 數據庫與動態數據 9.5創建動態網頁 9.5.4分頁顯示多條記錄 預覽執行這個頁面，如圖所示，單擊相應的鏈接，就可以翻頁查看數據庫中的大量記錄了 第9章 數據庫與動態數據 9.6 習題 9.6.1.判斷題1. 所謂“動態網頁”，就是指那在網頁上有動態圖片。2. ASP不能在Windows98的環境下使用，一定要架設專業的服務器才能執行。3. 如果要寫ASP程序，就絕對不能使用Wi