Bài giảng lập trình ứng dụng web

TẬP BÀI GIẢNG LẬP TRÌNH ỨNG DỤNG WEB GV: Nguyễn Thị Thanh Thuận Nguyễn Bá Phúc TP HCM, tháng 5/2010 MỤC LỤC Chương 1: Giới thiệu ASP.NET 1.1 Giới thiệu 1.2 Xây dựng ứng dụng web đơn giản 1.2.1 Tạo ứng dụng web 1.2.1.1 Thiết kế giao diện 1.2.1.2 Mã nguồn xử lý 1.2.2 Lưu lại trang web 1.2.3 Biên dịch chạy ứng dụng web 1.2.4 Mở ứng dụng Web 10 1.2.5 Thêm trang web 11 1.3 IsPostBack 12 Chương 2: Web Control 13 2.1 Giới thiệu 13 2.2 HTML Server Control 13 2.3 ASP.NET Web Control 13 2.4 ASP.NET List Control 16 2.6 ASP.NET Validation Control 20 2.6.1 RequiredFieldValidator 20 2.6.2 RangeValidator 20 2.6.3 CompareValidator 20 2.6.4 RegularExpressionValidator 21 2.6.5 CustomValidator 21 2.6.6 ValidationSummary 21 Chương 3: Master Page, CSS, User Control 22 3.1 Master Page Style Sheet 22 3.1.2 Tạo trang Master page 22 3.1.2.1 Tạo thư mục cho trang Master Page 22 3.1.2.3 Thiết kế trang layout 23 3.1.3 Cascading Style Sheets (CSS) 24 3.1.3.1 Dùng Style cho Master Page 24 3.1.3.2 Dùng Style cho ContentPlaceHolder 25 3.1.4 Sử dụng trang Master Page 25 3.2 Web User Control 27 3.2.1 Tạo Web User Control 27 3.2.2 Sử dụng Web User Control 28 Chương 4: Các đối tượng ASP.NET 29 4.1 ViewState 29 4.2 Response 29 4.3 Request 29 4.4 Application 30 4.5 Session 30 4.6 Cookies 31 4.7 Server 32 4.8 Exception 34 Chương 5: Kết nối liệu với ADO.NET 36 5.1 Giới thiệu 36 5.2 Các đối tượng ADO.NET 36 5.2.1 Connection 36 5.2.2 Command 36 5.2.2.1 Thuộc tính 36 5.2.2.2 Phương thức 37 5.2.3 DataReader 37 5.2.4 DataAdapter 38 5.2.5 DataSet 38 5.2.6 DataTable 38 5.2.7 DataView 38 5.3 Kết nối liệu ASP.NET 38 5.3.1 Thêm 38 5.3.2 Xoá 39 5.3.3 Hiệu chỉnh 40 Chương 6: Điều khiển liên kết liệu 43 6.1 Giới thiệu 43 6.2 GridView 43 6.3 DataList 45 6.3.1 Các thành phần DataList 46 6.3.2 Tạo điều khiển DataList 46 6.3.3 Tạo nguồn liệu cho DataList dùng AccessDataSource 47 6.3.4 Thiết kế giao diện cho thành phần DataList 48 6.3.5 Liên kết liệu cho thành phần DataList 49 6.3.6 Lập trình sử dụng DataList 52 6.5 DetailView 58 6.5.1 Các thành phần DetailsView 58 6.5.2 Tạo điều khiển DetailsView 59 6.5.3 Tạo nguồn liệu cho DetailsView dùng AccessDataSource 59 6.5.4 Thiết kế giao diện cho thành phần DetailsView 61 Chương 7: Khác 64 7.1 IIS 64 7.1.1 Hướng dẫn cài đặt IIS cho windows 2000, XP 64 7.1.3 Trang Web đầu tay 68 7.1.4 Quản lý trình chủ Web Server 70 7.2 Javascript ASP.NET 73 7.3 AJAX 84 7.3.1 Giới thiệu 84 7.3.1.1 Tổng quan mơ hình ứng dụng Web 84 7.3.1.2 Giới thiệu AJAX 85 7.3.2 Kỹ thuật lập trình AJAX 86 7.3.2.1 Xử lý hệ khách (Client) 86 7.3.2.2 Xử lý hệ phục vụ (Server) 88 7.3.3 Ví dụ 89 7.4 Web Service 94 7.4.1 Giới thiệu 94 7.4.2 Đặc điểm 95 7.4.3 Kiến trúc Web Services 95 7.4.4 Các thành phần Web Service 95 7.4.5 Ví dụ xây dựng web service đơn giản 96 Chương 1: Giới thiệu ASP.NET 1.1 Giới thiệu ASP.NET cơng nghệ xử lý web phía máy chủ, độc lập với mọi trình duyệt, Kỹ thuật áp dụng cho phép mọi thực thi thực trình chủ, tức trình chủ phải xử lý nhiều vấn đề lúc cho nhiều người dùng  trình chủ phải có cấu hình mạnh băng thơng tốt Tương thích với asp 3.0 1.2 Xây dựng ứng dụng web đơn giản 1.2.1 Tạo ứng dụng web - Vào menu Start -> Programs -> Microsoft Visual Studio 2005 -> Microsoft Visual Studio 2005 - Giao diện Visual Studio 2005 có dạng sau: - Vào menu File->New->Website - Chọn ASP.NET Web Site Templates Cuối click chuột vào nút OK để tiến hành tạo Web Site 1.2.1.1 Thiết kế giao diện * Thiết kế giao diện chế độ Source - Sử dụng thẻ HTML để thiết kế - Trong thị @Page thuộc tính: + Language: ngơn ngữ sử dụng + CodeFile: tập tin mã nguồn xử lý + Inherits: lớp * Thiết kế giao diện chế độ Design - Sử dụng control công cụ Toolbox để thiết kế - Thanh công cụ Toolbox bao gồm tập hợp điều khiển web (web control) dùng để xây dựng ứng dụng web chia thành nhóm control sau: + Standard: điều khiển chuẩn web form như: Label, Button, TextBox + Data: điều khiển cho phép thao tác với liệu + Validation: điều khiển cho phép kiểm tra tính hợp lệ điều khiển nhập liệu web form + Navigation: điều khiển cho phép di chuyển trang website + Login: điều khiển liên quan đến bảo mật ứng dụng web đăng nhập, thay đổi mật khẩu,… + HTML: điều khiển tài liệu HTML có thể chuyển thành điều khiển làm việc server (HTML Server Control) 1.2.1.2 Mã nguồn xử lý - Phương thức Page_Load gọi trang aspx tải (load) - Giao diện mã nguồn chế độ Code C#: 1.2.2 Lưu lại trang web Để lưu lại trang web tạo website, vào menu File -> Save All nhấn tổ hợp phím Ctrl+Shift+S Nếu số trang web có sử dụng chữ Tiếng Việt Unicode trình lưu trang web, Visual Studio yêu cầu lưu lại trang web với kiểu mã hoá Unicode Chọn Save With Other Encoding Trong Encoding chọn Unicode (UTF-8 with signature) – Codepage 65001 1.2.3 Biên dịch chạy ứng dụng web Để biên dịch chạy ứng dụng web vào menu Debug -> Start Debugging nhấn phím F5 1.2.4 Mở ứng dụng Web Để mở ứng dụng web, vào menu File -> Open -> Website 10 XuatThongBaoChao.aspx XuatThongBaoChao.aspx.cs using using using using using using using using using using System; System.Data; System.Configuration; System.Collections; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts; System.Web.UI.HtmlControls; public partial class clsXuatThongBaoChao : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string sTen; string sThongBao; sTen = Request["Ten"]; sThongBao = "Xin chào bạn " + sTen; //tạo chuỗi string sXML sXML = sXML sXML = sXML sXML = sXML XML = ""; + ""; Response.ContentType = "text/xml"; Response.Write(sXML); } } Ví dụ 2: Nhập vào số nguyên a b Tính tổng số nguyên a b 91 Mã nguồn: * Xử lý hệ khách: Bai2_TinhTong2SoNguyen.htm Untitled Page var xmlhttp function { var var var TinhTong() a, b = new Number(); S = new Number(); Chuoi = new String(); Chuoi = document.getElementById("txt_a").value; a = parseInt(Chuoi); Chuoi = document.getElementById("txt_b").value; b = parseInt(Chuoi); //gui ket qua ve server var ThamSo = "a=" + a + "&b=" + b; var URL = "./TinhTong2SoNguyen.aspx" + "?" + ThamSo; xmlhttp=GetXmlHttpObject(); if (xmlhttp==null) { alert ("Your browser does not support AJAX!"); return; } xmlhttp.onreadystatechange=stateChanged; xmlhttp.open("GET",URL,true); xmlhttp.send(null); 92 } function stateChanged() { if (xmlhttp.readyState==4) { var xmlDoc=xmlhttp.responseXML.documentElement; S = xmlDoc.getAttribute("Tong"); Chuoi = "Tổng: " + S; var newChild = document.createTextNode(Chuoi); var oldChild = document.getElementById("KetQua").childNodes[0]; document.getElementById("KetQua").replaceChild(newChild, oldChild); } } function GetXmlHttpObject() { if (window.XMLHttpRequest) { // dùng cho IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // dùng cho IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } Tổng số nguyên a: b:   93 * Xử lý hệ phục vụ TinhTong2SoNguyen.aspx TinhTong2SoNguyen.aspx.cs using using using using using using using using using using System; System.Data; System.Configuration; System.Collections; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts; System.Web.UI.HtmlControls; public partial class clsTinhTong2SoNguyen : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { int a; int b; int S; string chuoi; chuoi = Request["a"]; a = int.Parse(chuoi); chuoi = Request["b"]; b = int.Parse(chuoi); S = a + b; //tạo chuỗi string sXML sXML = sXML sXML = sXML sXML = sXML XML = ""; + ""; Response.ContentType = "text/xml"; Response.Write(sXML); } } 7.4 Web Service 7.4.1 Giới thiệu Web service hệ thống phần mềm thiết kế để hỗ trợ khả tương tác ứng dụng máy tính khác thơng qua mạng Internet, giao diện chung gắn kết nó 94 mô tả XML Web service cung cấp phương thức chuẩn việc gọi truy cập đến hệ thống đóng gói hệ thống kế thừa Các phần mềm viết ngôn ngữ lập trình khác chạy tảng khác có thể sử dụng dịch vụ web (web service) để chuyển đổi liệu thông qua mạng Internet theo cách giao tiếp tương tự bên máy tính Nó bao gồm module độc lập cho hoạt động khách hàng doanh nghiệp thân nó thực thi server Web service giúp giảm chi phí độ phức tạp tích hợp phát triển hệ thống 7.4.2 Đặc điểm Web service cho phép client server tương tác với mơi trường khác Ví dụ: đặt Web server cho ứng dụng máy chủ chạy hệ điều hành Linux người dùng sử dụng máy tính chạy hệ điều hành Windows, ứng dụng có thể chạy xử lý bình thường mà khơng cần thêm yêu cầu đặc biệt để tương thích hai hệ điều hành Phần lớn kĩ thuật web service xây dựng dựa mã nguồn mở phát triển từ chuẩn công nhận chẳng hạn XML Một web service bao gồm có nhiều module có thể công bố lên mạng Internet 7.4.3 Kiến trúc Web Services Web service gồm có chuẩn chính: SOAP (Simple Object Access Protocol), WSDL (Web Service Description Language) UDDI (Universal Description, Discovery, and Integration) Trong đó UDDI sử dụng để đăng ký khám phá dịch vụ Web miêu tả cụ thể WSDL Giao tác UDDI sử dụng SOAP để liên lạc với UDDI server Sau đó ứng dụng SOAP yêu cầu dịch vụ Web Các thông điệp SOAP gửi HTTP TCP/IP 7.4.4 Các thành phần Web Service a) XML (eXtensible Markup Language) XML chuẩn mở W3C đưa cho cách thức mô tả liệu, nó sử dụng để định nghĩa thành phần liệu trang web cho tài liệu B2B Về hình thức, XML hồn tồn có cấu trúc thẻ giống ngơn ngữ HTML HTML định nghĩa thành phần hiển thị XML lại định nghĩa thành phần liệu chứa bên Với XML, thẻ có thể lập trình viên tự tạo trang web chọn định dạng thông điệp chuẩn tính phổ biến hiệu mã nguồn mở Web service kết hợp nhiều thành phần khác nên nó sử dụng tính đặc trưng thành phần đó để giao tiếp XML kiến trúc tảng cho việc xây dựng dịch vụ Web, tất liệu chuyển sang định dạng thẻ XML b) WSDL (Web Service Description Language) WSDL định nghĩa cách mô tả dịch vụ Web theo cú pháp tổng quát XML, bao gồm thông tin: + Tên dịch vụ + Giao thức kiểu mã hóa sử dụng gọi hàm web service + Loại thông tin: thao tác, tham số, kiểu liệu 95 WSDL thường sử dụng kết hợp với XML schema SOAP để cung cấp web service qua Internet Một client kết nối tới web service có thể đọc WSDL để xác định hàm (phương thức) sẵn có server Sau đó, client có thể sử dụng SOAP để lấy chức có WSDL c) UDDI (Universal Description, Discovery, and Integration) Để có thể sử dụng dịch vụ, trước tiên client phải tìm dịch vụ, ghi nhận thông tin cách sử dụng biết đối tượng cung cấp dịch vụ UDDI định nghĩa số thành phần cho biết thông tin này, cho phép client truy tìm nhận thơng tin yêu cầu sử dụng dịch vụ Web Cấu trúc UDDI : + White pages (Trang trắng): chứa thơng tin liên hệ định dạng yếu web service, chẳng hạn tên giao dịch, địa chỉ, thông tin nhận dạng… Những thông tin cho phép đối tượng khác xác định dịch vụ + Yellow pages (Trang vàng): chứa thông tin mô tả web service theo loại khác Những thông tin cho phép đối tượng thấy web service theo loại với nó + Green pages (Trang xanh): chứa thông tin kỹ thuật mô tả hành vi chức web service + tModel (Loại dịch vụ): chứa thông tin loại dịch vụ sử dụng Những thông tin web service sử dụng công bố lên mạng sử dụng giao thức Nó kích hoạt ứng dụng để tìm kiếm thông tin web service khác nhằm xác định xem dịch vụ cần đến nó d) SOAP (Simple Object Access Protocol) SOAP giao thức giao tiếp có cấu trúc XML Nó xem cấu trúc xương sống ứng dụng phân tán xây dựng từ nhiều ngôn ngữ hệ điều hành khác SOAP giao thức thay đổi thơng điệp dựa XML qua mạng máy tính, thông thường sử dụng giao thức HTTP Một client gửi thông điệp yêu cầu tới server server gửi thông điệp trả lời tới client Cả SMTP HTTP giao thức lớp ứng dụng SOAP HTTP sử dụng chấp nhận rộng rãi ngày nó có thể làm việc rất tốt với sở hạ tầng Internet 7.4.5 Ví dụ xây dựng web service đơn giản a) Xây dựng ứng dụng web service cho phép: - X́t thơng báo chào - Tính tổng số nguyên a b b) Client truy xuất vào ứng dụng web service viết dạng: - Windows Application - ASP.NET Web Application - HTML page (sử dụng JavaScript để gọi) Thực hiện: a) Xây dựng ứng dụng Web Service Trong Visual Studio 2005, vào menu File -> New -> Web site Chọn ASP.NET Web Service 96 Xây dựng lớp Service gồm phương thức Web: public string XuatThongBaoChao() public int TinhTong(int a, int b) 97 - Biên dịch thực thi (Nhấp phím F5) 98 b) Xây dựng ứng dụng Client truy xuất ứng dụng Web Service * Windows Application 99 Thêm tham chiếu đến Web service 100 Nhập địa URL Web Service, sau đó nhập tên vào Web reference name click vào Add Reference 101 Xây dựng mã nguồn: using using using using using using using System; System.Collections.Generic; System.ComponentModel; System.Data; System.Drawing; System.Text; System.Windows.Forms; namespace test_WS { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void btn_XuatTBChao_Click(object sender, EventArgs e) { MyWebService.Service ws = new MyWebService.Service(); string sThongBao; sThongBao = ws.XuatThongBaoChao(); MessageBox.Show(sThongBao); } private void btn_TinhTong_Click(object sender, EventArgs e) { MyWebService.Service ws = new MyWebService.Service(); int a = int.Parse(txt_a.Text); int b = int.Parse(txt_b.Text); int s = ws.TinhTong(a, b); MessageBox.Show(s.ToString()); } } } Kết thực hiện: 102 * ASP.NET Web Application Thực tương tự Windows Application * HTML page 103 Mã nguồn: test_WS.htm Vi du web service function InitializeService() { service.useService("http://localhost:61076/ViDu_WebService/Service.asmx?ws dl","Service"); } function Check() { var a = document.getElementById("txt_a").value; var b = document.getElementById("txt_b").value; service.Service.callService("TinhTong", a, b); } function ShowResult() { var kq; kq = event.result.value; alert(kq); } 104 a: b: Tinh Tong Lưu ý: tập tin webservice.htc đặt thư mục với tập tin test_WS.htm webservice.htc gồm hệ thống hàm viết Javascript dùng để tương tác với ứng dụng Web service 105 ... 1.2.4 Mở ứng dụng Web Để mở ứng dụng web, vào menu File -> Open -> Website 10 1.2.5 Thêm trang web Trong Solution Explorer, click phải vào Website, chọn Add New Item… Trong Templates, chọn Web Form,... website với trang web 33 4.8 Exception - Exception lớp đối tượng dùng để bẩy lỗi suốt trình thực thi ứng dụng (Windows, Web) - Khi lỗi xuất thực thi ứng dụng, hệ thống ứng dụng thực thi thông... 1.2.3 Biên dịch chạy ứng dụng web 1.2.4 Mở ứng dụng Web 10 1.2.5 Thêm trang web 11 1.3 IsPostBack 12 Chương 2: Web Control