1 / 41

軟體開發概論 第四章、 Web 應用系統

軟體開發概論 第四章、 Web 應用系統. Understanding Web Applications. Objective Domain Matrix. Client-Server 網路模型. HTML. Hypertext Markup Language (HTML) 給瀏覽器看的排版指令 HTML 網頁組成 document Header Body Tag 標籤 成對標籤 <html> </html> 不 成對標籤 < hr />. HTML 範例. HTML 輸出. Cascading Style Sheets （ CSS ）.

bozica
Download Presentation

軟體開發概論 第四章、 Web 應用系統

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 軟體開發概論第四章、Web 應用系統 Understanding Web Applications

  2. Objective Domain Matrix

  3. Client-Server網路模型

  4. HTML • Hypertext Markup Language (HTML) • 給瀏覽器看的排版指令 • HTML 網頁組成 • document • Header • Body • Tag 標籤 • 成對標籤 <html> </html> • 不成對標籤 <hr />

  5. HTML 範例

  6. HTML 輸出

  7. Cascading Style Sheets（CSS） 樣式表：佈景主題 把文章的內容和頁面風格分離 HTML 定義文章的內容與結構 CSS 定義色系、字型、版面

  8. CSS 範例

  9. 使用 CSS 檔案

  10. JavaScript • Client-side scripting language • 在瀏覽器內執行 • 控制網頁內的物件 • DOM：Document Object Model 文件物件模型 • 將網頁內的每一項元素都視為物件 • AJAX • Asynchronous JavaScript and XML

  11. JavaScript 範例

  12. Client-Side vs. Server-Side Programming • Client-Side 程式只在使用者的電腦上執行. • JavaScript 程式在瀏覽器內執行，有更嚴格的安全性限制 • Server-Side 程式在 Web Server 上執行 • 可以作任何事，包括存取檔案、存取資料庫、建立網路連線等 • Ajax 以 JavaScript 撰寫，屬於 Client-Side 程式，但是透過特殊的 API 連接伺服器，可以間接存取伺服器端的資源

  13. ASP.NET • ASP.NET 是 .NET Framework 中提供開發 Web 應用程式（Web Application）和 Web 服務（Web Service）的框架 • 構成要素 • System.Web命名空間裡的類別庫 • 支持瀏覽器與伺服器之間的通訊 • ASP.NET 工作行程（Worker Process）aspnet_wp.exe • 處理存取 ASP.NET 資源的 Web 請求（Web Request）

  14. ASP.NET • 伺服器控制項（Server Control） • 按鈕 <asp:Button /> • 文字方塊 <asp:TextBox /> • 文字標籤 <asp:Label /> • WebForm：網頁表單 • PostBack：使用者填妥網頁表單之後，提交（Submit）送到伺服器 • 在 Page Load 事件處理常式之中，應以 Page.IsPostBack判斷目前狀態『是 PostBack』或『非 PostBack』

  15. 執行 ASP.NET Page • 完全由 aspnet_wp.exe 負責 • 編譯（Compile）.aspx檔案 • 產生組件（Assembly） .DLL 檔案 • 指示 CLR（Common Language Runtime）執行該組件 • 組件執行期間，提供其他的 .NET Framework 類別庫 • 彙整回應訊息（Response Message），建立封包（Packet），將回應傳送給需求端

  16. ASP.NET Page 生命週期

  17. 狀態管理State Management • 網頁在瀏覽器和伺服器來來去去許多回 • 保存網頁的狀態資訊 • 主要技術 • 客戶端狀態管理 • Client-side state management • 伺服器端狀態管理 • Server-side state management

  18. 客戶端狀態管理Client-Side State Management • 使用 HTML 標籤保存狀態資訊 • 主要手法： • 查詢字串（Query Strings） • Cookies • 隱藏欄位（Hidden Fields） • View State

  19. 查詢字串Query Strings • 格式 ?key1=value1&key2=value2&… • http://www.bing.com/search?q=television • 在 ASP.NET 網頁中取回鍵值 q 的資料值： • Request.QueryString["q"]

  20. Cookies • 餅乾？ • 儲存在使用者電腦瀏覽器資料目錄裡的檔案 • 通常用來儲存使用者的偏好

  21. 存取 Cookie HttpCookie cookie = new HttpCookie("Name", "Bob"); cookie.Expires = DateTime.Now.AddMinutes(10); Response.Cookies.Add(cookie); if (Request.Cookies["Name"] != null) { name = Request.Cookies["Name"].Value; } 建立 Cookie 讀取 Cookie

  22. 隱藏欄位Hidden Fields <input type='hidden' name='cart' value='P001,1,P012,20' /> • 確實存在於網頁裡，畫面上卻看不到的資料欄位 • HTML 標籤 • <input type="hidden"> • ASP.NET HTML 伺服器控制項HtmlInputHidden與此對應

  23. View State ASP.NET 使用 View State 維護網頁多次 PostBack之間的狀態 以各控制項的資料值組成一個編碼字串，儲存在一個名為 __VIEWSTATE的隱藏欄位之中 太多 View State 會讓網頁資料量快速膨脹 控制項的 View State 預設為 enabled

  24. 伺服器端狀態管理Server-Side State Management • 以伺服器端的資源儲存狀態 • 兩層機制 • Session State • 從使用者進入網站，到使用者離開網站 • Application State • 從 Web 應用程式開始執行，到 Web 應用程式停止執行

  25. Session State • 每一個使用者都有一個獨一無二的Session ID • 用 Session 儲存資料 • 會員登入（Logon） • 購物車（Shopping Cart）

  26. Session State if (Session["Name"] != null) { /* additional code here */ } Session.Add("Name", txtName.Text); 讀取 Session 內的資料 將資料寫入 Session

  27. Application State 每一個 Web 應用程式有自己的 Application 物件，和使用者無關 屬性名稱：HttpApplicationState

  28. Internet Information Services IIS Server 為 Windows 作業系統最主要的網站伺服器

  29. 網站 & 虛擬目錄 • IIS 伺服器的管理單位 • 網站（Site） • 應用程式（Application） • 虛擬目錄（Virtual Directory）

  30. 網站 & 虛擬目錄 • 網站是應用程式和虛擬目錄的容器 • 例如www.northwind.com • 虛擬目錄是網址 URL 裡的目錄結構 • 例如 www.northwind.com/orders 其中的 orders 便是虛擬目錄 • 虛擬目錄對應到實體目錄，例如c:\inetpub\wwwroot\northwind\orders

  31. IIS 建立虛擬目錄

  32. 佈署 Web 應用程式 • XCOPY 或 FTP • 把檔案複製到一個實體目錄裡面 • 建立虛擬目錄，對應到實體目錄 • 適合簡單的網站 • Windows Installer 安裝程式 • 適合複雜的網站 • Windows Installer 可以在安裝過程中建立虛擬目錄、重新啟動服務、註冊元件

  33. Web Services • 呼叫遠端副程式 • 關鍵技術： • Hypertext Transmission Protocol (HTTP) • Extensible Markup Language (XML) • Simple Object Access Protocol (SOAP) • Web Services Description Language (WSDL)

  34. SOAP • 肥皂？ • SOAP 定義遠端電腦如何透過 Web Service 交換訊息 • 傳輸協定： HTTP • 最適合在網際網路上傳輸 • 訊息格式： XML • XML 比 HTML 嚴謹，更適合以程式處理

  35. WSDL • Web Services 描述語言 • WSDL 提供 Web Service 的公開介面資訊： • 資料型態（Data Type） • 方法（Method） • URL

  36. 建立 Web Services 繼承 System.Web.Services.WebService 註明 WebService屬性 註明 WebMethod屬性

  37. 建立 Web Services [WebService(Namespace = "http://northwindtraders.com/")] [WebServiceBinding(ConformsTo= WsiProfiles.BasicProfile1_1)] public class TextWebService : System.Web.Services.WebService { [WebMethod] public string ToUpper(string inputString) { return inputString.ToUpper(); } }

  38. 調用 Web Services 在 VisualStudio專案之中『加入服務參考』（Add Web Reference）

  39. 調用 Web Services protected void Button1_Click(object sender, EventArgs e) { varwebService = new textWebService.TextWebService(); toLowerLabel.Text = webService.ToLower(TextBox1.Text); toUpperLabel.Text = webService.ToUpper(TextBox1.Text); } 透過 Proxy Object 調用 Web Service 裡面的 Methods

  40. 總結 • 網頁開發 • HTML, CSS, JavaScript • Client-Side 程式 vs. Server-Side 程式 • ASP.NET 網頁生命週期 • PreInit, Init, Load, PreRender, Unload • 網頁狀態管理 • Query strings, cookies, hidden fields, viewstate • Session state, application state • IIS 網站伺服器 • Web Sites, Virtual directories • Web Services • SOAP, WSDL • WebService屬性, WebMethod屬性

More Related