›

Giáo trình Công nghệ thông tin - Chương 7: Web Application - Phan Trọng Tiến

pdf 63 trang huongle 5590
Download
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Công nghệ thông tin - Chương 7: Web Application - Phan Trọng Tiến", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfgiao_trinh_cong_nghe_thong_tin_chuong_7_web_application_phan.pdf

Nội dung text: Giáo trình Công nghệ thông tin - Chương 7: Web Application - Phan Trọng Tiến

  1. CHƯƠNG 7: WEB APPLICATION Phan Trọng Tiến BM Công nghệ phần mềm Khoa Công nghệ thông tin, VNUA Email: phantien84@gmail.com Website: 1
  2. Nội dung chính I. Giới thiệu ASP.Net II. Tạo Web Forms III. Các Control Server của ASP.Net IV. Các Control Validation 2
  3. I. Giới thiệu ASP.Net q ASP.Net không giống phiên bản ASP. ASP.Net có các đặc điểm mới như : qH ỗ trợ nhiều ngôn ngữ lập trình qCó các điều khiển mới qH ỗ trợ XML qNhi ều khả năng bảo mật: chứng thực người sử dụng qHi ệu năng thực thi code cao q Các phiên bản qASP 1.0 năm 1996 qR ồi phiên bản ASP 2.0 và 3.0 qASP.Net cung cấp một cách tiếp cận khác để phát triển ứng dụng Web. 3
  4. Giới thiệu ASP.Net q ASP.Net là một cuộc cách mạng trong phát triển ứng dụng Web q ASP.Net dựa trên cơ sở .Net Framework q .Net Framework chạy trên CLR. q CLR có các ưu điểm: qT ự động quản lý bộ nhớ qH ỗ trợ nhiều ngôn ngữ qB ảo đảm việc chứng thực người sử dụng qD ễ cấu hình qD ễ triển khai 4
  5. Các lợi ích mà ASP.Net cung cấp q Hỗ trợ nhiều ngôn ngữ lập trình q Phát triển qua nhiều ngôn ngữ q Phần giao diện và phần code tách riêng biệt. q Chứng thực người sử dụng q Kiến trúc xử lý mới trên server q Cải tiến chức năng gỡ rối và lần vết q Cấu hình ứng dụng với nhiều điều khiển q Dễ triển khai q Cải tiến các tính năng caching như caching mức trang, caching mức đoạn, caching API. Dùng các tính năng caching trong ASP.Net sẽ tăng tốc độ và hiệu năng cho trang Web của bạn. 5
  6. Các mô hình lập trình ASP.Net q.Net Framework Software development Kit (SDK) được sử dụng để phát triển các ứng dụng Web. Nó chạy trên nền .Net Framework SDK cùng với IIS. 6
  7. Hai mô hình lập trình ASP.Net q Web Forms qCho phép bạn tạo các trang Web động. qC ũng có thể dùng các control để tạo các UI components q Web Services qMô hình lập trình này cho phép bạn thi hành một số các chức năng trên server. qWeb Services đóng vai trò quan trọng trong tích hợp các ứng dụng trên các nền khác nhau vì nó không giới hạn công nghệ. qWeb Services giúp bạn thay đổi dữ liệu trên client-server hoặc kiến trúc server-server. qWeb Services dùng các chuẩn như HTTP và XML để trao đổi dữ liệu 7
  8. Các yêu cầu nền ASP.Net qASP.Net là một phần của .Net Framework SDK, được download qC ần cài IE 5.5 trở lên qCác hệ điều hành hỗ trợ .Net qWindows XP Professional qWindows 2000 qWindows NT 4.0 with Service Pack 6a qWindows 98 8
  9. II. Tạo Web Forms q ASP.Net cho phép bạn tạo các trang web động nhanh hơn. q Các đặc điểm Web Form: qDùng .Net Framework chạy trên Web Server để tạo các trang web động. qDùng các đăc điểm của CLR như sự an toàn và có sự kế thừa. qThi ết kế và lập trình sử dụng Tool Rapid Application Development(RAD) của VS.Net. qKhông phụ thuộc vào client qT ương thích với bất kỳ trình duyệt web và thiết bị mobile 9
  10. Các thành phần Web Form qGiao diện người sử dụng qDi ễn tả nội dung tới người sử dụng. Nó bao gồm một file gồm code HTML hoặc code XML và các controls Server. qĐượ c lưu trữ trong file với đuôi mở rộng là .aspx qLogic lập trình(code) qLàm việc tương tác với người sử dụng với trang web form. qB ất kỳ ngôn ngữ lập trình .Net (Vb.Net,C# ) dùng để viết code logic cho trang Web. qHai mô hình viết code: code-inline và code-behind qCode-inline: code được nhúng trực tiếp vào trang ASP.Net qCode-behind: code nằm ở một file riêng, và trang ASP.Net tham chiếu tới 10
  11. Thiết kế Web Forms qB1: Start VS.Net vào File\New\Web Site để mở hộp thoại New Project qB2: Chọn Template là ASP.NET Web Site qB3: Chọn nơi đặt Website ở Location qB4: Chọn ngôn ngữ cho trang ASP.Net ở Language qB5: Kích OK để hoàn thành việc 11
  12. Thiết kế Web Forms 12
  13. Cửa sổ VS.Net 13
  14. ASP.Net tự tạo các file Tên file Mục đích Web.Config Thông tin cấu hình ứng dụng Default.aspx Các điều khiển sự kiện mức ứng dụng App_Data Thư mục chứa dữ liệu 14
  15. Thiết kế Web Forms qTrang .aspx cho phép bạn đặt các control ở Toolbox trực tiếp lên form bằng cách kéo thả. qM ặc định trang hiển thị ở chế độ lưới (grid layout) cho phép bạn đặt control trên Form đúng vị trí. Bạn có thể chuyển sang chế độ Flow layout thì sẽ cho phép bạn đánh trực tiếp lên form. 15
  16. Thiết kế Web Forms qCách thay đổi: Trên form thiết kế, ấn phím F4, cửa sổ Property được chọn. Bạn tìm đến thuộc tính Layout để thay đổi giữa hai chế độ. qKhi thiết kế trong chế độ Design, code HTML phát sinh tự động. Bạn có thể xem code HTML bằng cách ấn nút Source dưới cuối của trang. qB ạn cũng có thể viết code trên cùng trang HTML 16
  17. Thiết kế Web Forms qM ột file code – behind cũng tồn tại với trang này và không hiển thị trong cửa sổ Solution Explorer. Để hiện thị click vào icon Show All File trong cửa sổ Solution Explorer hoặc ấn F7 để xem code của trang đó. qB ạn cần tìm hiểu các đoạn code tự động phát sinh khi thiết kế form có những gì trước khi bạn sửa nó: 17
  18. Thiết kế Web Forms qTrong chế độ hiển thị HTML q @Page chỉ dẫn các thuộc tính của Form và để các thuộc tính này có tác động lên trang của bạn. q Thuộc tính Language: ngôn ngữ .Net hỗ trợ trên trang của bạn. q Thuộc tính AutoEventWireup: là giá trị Boolean chỉ định các sự kiện của trang có tự động phát sinh sự kiện hay không, mặc định là False. q Thuộc tính CodeFile: chỉ định file code-behind q Thuộc tính Inherit: chỉ định tên trang mà class code-behide kế thừa 18
  19. Thiết kế Web Forms q Trong thẻ của code HTML bạn cũng có thể viết code cho trang của bạn 'Code statements q Các controls hoặc text được add trong thẻ , được nằm trong khối 19
  20. Code-behind 20
  21. Giải thích q Public Class WebForm1 Inherits System.Web.UI.Page qClass WebForm1 kế thừa từ lớp Page qL ớp Page nằm trong namespace System.Web.UI q Hai phương thức InitializeComponent và Page_Init qInitializeComponent : bao gồm code khởi tạo cho trang như các control. qPage_Init là sự kiện trang cho sự kiện Init của trang. q Phương thức Page_Load dùng điều khiển sự kiện Load của trang. Bạn cũng có thể thêm các sự kiện khác trên trang. 21
  22. Chạy ứng dụng Ấn Ctrl + F5 22
  23. Thư mục gốc ứng dụng IIS q VS.Net khi tạo ứng dụng ASP.Net bạn cần chỉ định tên project và vị trí đặt ứng dụng như: hoặc http:// . q Vị trí đặt ứng dụng là tên máy tính và tham chiếu đến đường dẫn thư mục q Khi phát triển ứng dụng ASP.Net thư mục gốc của ứng dụng được tạo trong Default Web Site của IIS q Thư mục ứng dụng nằm tại: :\inetpub\wwwroot\ . 23
  24. III. Các Control Server của ASP.Net q ASP.Net cung cấp cho bạn nhiều control tạo các trang web động và tương tác với người sử dụng. q Các control chấp nhận mô hình lập trình phía server mà người sử dụng ở phía client tương tác với control server để phát sinh các sự kiện sẽ xử lý phía server. q Trang này được biên dịch -> đối tượng gọi là Page q Khi trang được yêu cầu các control server được biên dịch và thực thi trên server. 25
  25. Server Controls khác gì HTML Controls thông thường? qHTML Controls không có bất kỳ tương tác nào với server sau khi chúng hiển thị trên trang. qCòn Server Controls cho phép truy cập các phương thức, các thuộc tính, các sự kiện tại phía Server. 26
  26. Các kiểu Server Control q.Net Framwork hỗ trợ HTML server controls và Web server controls. qHTML server controls: là các thẻ HTML bạn có thể sử dụng code phía server. Nẳm trong namespace System.Web.UI.HtmlControls được lấy từ lớp cơ sở HtmlControl qWeb server controls: nằm trong namespace System.Web.UI.WebControls. Các control này cũng gọi là Web Controls. 27
  27. Web control cũng bao gồm: q List controls: là các control tạo các danh sách(list). Ví dụ có thể sử dụng ListBox và DropDrawList q Validation controls: là các control kiểm tra và validate giá trị được nhập vào các control khác trên trang. Ví dụ RequiredFieldValidator và CustomValidator q Rich controls: là các control đặc biệt được sử dụng tạo đầu ra cho các công việc đặc biệt. Ví dụ: Calendar và AdRotator q User controls: bạn có thể tạo các control như các trang Web form và nhúng các control vào trang web khác. 28
  28. Bảng HTML server control và thẻ tương ứng HTML server control Thẻ HTML HtmlForm HtmlInputText Và HtmlInputButton HtmlInputCheckBox HtmlInputRadioButton HtmlInputImage 29
  29. Bảng HTML server control và thẻ tương ứng(tiếp) HTML server control Thẻ HTML HtmlAnchor HtmlButton HtmlTable HtmlTableRow HtmlTableCell 30
  30. Sự khác nhau giữa HTML server controls và Web controls? qKhi tạo ứng dụng web, bạn phân vân nên chọn HTML server controls hay Web controls? qPh ụ thuộc vào yêu cầu của bạn và chức năng của mỗi control. Bạn phải hiểu chức năng của cả hai loại server control. qSo sánh hai loại control: qHTML server controls và Web controls 31
  31. Sự khác nhau giữa HTML server cotrols và Web controls? q Ánh xạ tới thẻ HTML(Mapping to HTML tags): qHTML server controls ánh xạ trực tiếp tới thẻ HTML, nó được chuyển đổi thành server control bằng việc dùng thuộc tính runat = “server”. qWeb control không ánh xạ trực tiếp tới thẻ HTML. Do đó bạn phải gọi (include) control từ bên thứ ba. q Mô hình hướng đối tượng(Object Model): qHTML server control thiết lập các thuộc tính dùng cặp chuỗi tên/giá trị không định kiểu mạnh. qWeb control thiết lập theo chuẩn property. q Trình duyệt đích (Target browser): qHTML server control không thay đổi, phụ thuộc vào trình duyệt đích-> cần đẳm bảo control trả về đúng với trình duyệt. qWeb control trả về kết quả đầu ra, tự động điều chỉnh kết quả dựa vào trình duyệt đích-> chắc chắn control trả vể đúng với trình duyệt 32
  32. Thêm các web controls lên Form qThêm các server control lúc thiết kế hoặc lúc chạy. qThêm lúc thiết kế có thể dùng Toolbox hoặc ở chế độ HTML của trang .aspx qCó thể thêm lúc chạy bằng việc dùng thẻ trong trang .aspx hoặc file code behind. 33
  33. Dùng Toolbox qToolbox phân loại các control thành các nhóm thuận tiện cho việc truy cập. 34
  34. Dùng ở chế độ hiển thị HTML qCó thể thêm server control bằng cách chỉ định code ASP.Net trực tiếp trong chế độ hiển thị HTML của file .aspx. 35
  35. Dùng trong code behind qASP.Net cho phép bạn thêm các server control lúc chạy. Bạn có thể tạo một instance của lớp Control thừa kế từ lớp cơ sở WebControl qGi ả sử bạn muốn tạo một textbox lúc chạy: Dim txt As New TextBox txt.ID = "txtTest" txt.Text = "ABC" Panel1.Controls.Add(txt) 36
  36. Thiết lập thuộc tính WebControl qCác server control có các thuộc tính thông dụng kế thừa từ lớp cơ sở WebControl. qCó thể thiết lập thuộc tính lúc thiết kế hoặc lúc chạy. qThi ết lập thuộc tính của control lúc thiết kế bạn dùng cửa sổ Properties qHi ển thị của sổ Property của control, kích chuột phải trên control rồi chọn Properties từ context menu hoặc ấn F4.37
  37. Cửa sổ Properties của Textbox 38
  38. Thiết lập thuộc tính WebControl qC ũng có thể thiết lập các thuộc tính của WebControl trực tiếp trong chế độ hiển thị HTML. qĐ ôi khi cần thiết lập thuộc tính lúc chạy. Cú pháp sử dụng trong lập trình: ControlID.PropertyName = Value Ví dụ: txtTest.Enabled = True 39
  39. Các sự kiện điều khiển trong WebControl qM ỗi control có các sự kiện riêng có thể điều khiển trong code behind của trang .aspx qVí dụ: nút button có sự kiện click Private Sub btnAccept_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles AcceptButton.Click 'Code statements End Sub q Để mở file code behind có thể dùng cửa sổ Solution Explorer hoặc ấn F7 40
  40. Các sự kiện điều khiển trong WebControl q Cũng có thể tạo các sự kiện server control trong file .aspx 1. 2. Viết sự kiện trong trang Aspx Sub btnAccept_Click(sender as Object, e as EventArgs) ‘Code comes here End Sub 41
  41. Các thuộc tính, phương thức, sự kiện hay sử dụng trong WebControl Property/Method/Event Mô tả AccessKey property Get hoặc Set shortcut để truy cập tới control BackColor property Get hoặc Set màu nền BorderColor property Get hoặc Set Border màu border BorderStyle property Get hoặc Set Border style Controls property Trả về một đối tượng của lớp ControlCollection DataBind method Gắn data từ nguồn dữ liệu tới server control 42
  42. Các thuộc tính, phương thức, sự kiện hay sử dụng trong webcontrols Property/Method/Event Mô tả DataBinding event Phát sinh khi control chuẩn bị tương tác với DataSource Enabled property Chấp nhận gt Bool chỉ định khi nào control được enabled EnableViewState property Chấp nhận gt Bool chỉ định control có duy trì trạng thái khi hiển thị Font property Get hoặc Set Font ForeColor property Get hoặc Set màu chữ Height property Get hoặc Set chiều cao control 43
  43. Các thuộc tính, phương thức, sự kiện hay sử dụng trong webcontrols Property/Method/Event Mô tả ID property Get hoặc Set nhận biết control TabIndex property Get hoặc Set TabIndex ToolTip property Get hoặc Set ToolTip Visible property Chỉ định control hiển thị hoặc không hiển thị trên UI Width property Get hoặc Set độ rộng 44
  44. Các control validation qD ữ liệu người sử dụng phải được validation trước khi insert vào CSDL qASP.Net, việc validate dùng các control validation -> bạn không cần phải viết code validation. qVí dụ: bạn muốn validation dữ liệu nhập vào textbox bạn có thể add control validation và kết hợp với control bạn cần validate. 45
  45. Các control validate gì? q ASP.Net cung cấp 6 control validate, tất cả đều kế thừa từ lớp cơ sở BaseValidator qRequiredFieldValidator : kiểm tra control là rỗng hay không. qCompareValidator : so sánh giá trị các control có khớp nhau hay không. qRangeValidator : kiểm tra giá trị control là trong khoảng text hay khoảng của số. qRegularExpressionValidator : kiểm tra giá trị control khớp biểu thức biểu thức chính qui. qCustomValidator : thi hành validate do người dùng tự định nghĩa. qValidationSummary : hiển thị tất cả các lỗi trong nhóm 46
  46. Các control validation 47
  47. Cách làm để validation: 4 bước q Add control validation. Kết hợp nó với control cần validation. Đặt thuộc tính ControlToValidate là control này. q Gắn các control validations và các control cần valiadate. Các control validation gắn vào control cần validation tương ứng giá trị nhập vào control này. q Các control validation hợp lệ khi các giá trị thỏa mãn yêu cầu control. q Khi kết thúc validation, giá trị trả về qua thuộc tính IsValid bằng True hoặc False. Sau khi validation thành công, trang gửi dữ liệu lên server. 48
  48. Cách dùng Validate control qTham khảo ví dụ dùng validate control qCách dùng các control validation sẽ kiểm tra tại server. Một cách khác bạn có thể validation tại client bằng việc dùng script. qValidation tại client sẽ giảm thời gian quay vòng và cải thiện hiệu năng. Các lỗi sẽ hiển thị ngay khi người sử dữ liệu không hợp lệ. 49
  49. Thiết kế DemoWeb Control Text ID Button Accept btnAccept Label Message lblMessage Text box Confirm Password txtConfirm Text box Customer ID txtCusID Text box Number Of CDs txtNumCDs Text box Password txtPassword Text box Telephone Number txtTelNumber Text box Username txtUserName 50
  50. RequiredFieldValidator qDùng kiểm tra giá trị của control có hợp lệ hay không. Bảng thuộc tính Property Value ID rfvUserName ControlToValidate txtUserName ErrMessage Nhập vào Username Display Dynamic 51
  51. Code Private Sub btnAcept_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnAcept.Click If Page.IsValid = True Then 'Specify a message to be displayed on the label lblMessage.Text = "Welcome " + txtUserName.Text 'Make the label visible lblMessage.Visible = True End If End Sub 52
  52. CompareValidator qDùng để so sánh giá trị nhập bởi control này với một control khác hoặc một giá trị có sẵn. qCác toán tử: Equal, NotEqual, GreaterThan và LessThan cho phép so sánh các kiểu: String, Integer, Double, Date và Currency 53
  53. Bảng thuộc tính CompareValidator Thuộc tính Mô tả ControlToValidate ControlToCompare Display ErrorMessage Operator Type ValueToCompare 54
  54. Code HTML 55
  55. RangeValidator qDùng để kiểm tra giá trị nằm trong một khoảng xác định. Bạn có thể thiết lập giá trị max và min cho cho control. Cũng có thể giá trị hằng từ các control khác. Các thuộc tính thông dụng ControlToValidate, ErrorMessage và Display. qCác thuộc tính khác: MaximumValue, MinimumValue, Type 56
  56. RegularExpressionValidator qDùng để validate giá trị nhập vào control tuân theo một chuẩn nào đó ví dụ như số điện thoại, địa chỉ email, Zip codes qCác thuộc tính thường sử dụng: ControlToValidate, ErrorMessage, Display, ValidationExpression. qThu ộc tính ValidationExpression được dùng nhập vào mẫu định dạng biểu thức cần kiểm tra xem có đúng định dạng không. 57
  57. Ví dụ RegularExpressionValidator qThu ộc tính: ValidationExpression = [0-9] {3}-[0-9]{3}\s[0-9]{4} q[0-9] nhận tất cả các số 0-9 q{3} yêu cầu 3 số được nhập cho phần đầu tiên q- là dấu bắt nhập q\s chỉ định một khoảng trắng 58
  58. CustomValidator qCho phép bạn validate một control theo kiểu người dùng tự định nghĩa. qĐ ây là một control cho phép bạn validation ở phía client hoặc server. qThu ộc tính ClientValidationFunction dùng để thiết lập hàm/thủ thục script. qPhía Server, control cung cấp sự kiện ServerValidate, bạn phải viết code ở đây. 59
  59. ValidationSummary qDùng control này để hiển thị tất cả các lỗi trên trang. qB ạn có thể hiển thị lỗi trong 1 list, dạng chỉ mục hoặc định dạng một đoạn văn. qCung cấp tùy chọn để hiển thị các lỗi trong một dòng hoặc dạng pop-up. 60
  60. Các thuộc tính CustomerValidator Thuộc tính Mô tả DisplayMode List, BulletList, SingleParagraph HeaderText Text hiển thị ở title validation ShowSummary Chỉ định khi validation hiển thị ở dạng dòng. Mặc định là True. ShowSummaryBox Chỉ định validation hiển thị ở dạng Pop-up. Mặc định là False. 61
  61. Dùng nhiều control validation q Bạn có thể kết hợp nhiều control validation cho nhiều điều kiện. q Ví dụ: Bạn cần dùng control validation để kiểm tra độ dài của Password xem người dùng có nhập đúng độ dài hay không, và bạn cũng muốn kiểm tra Password vừa chữ lại vừa có số thì bạn có thể kết hợp cả hai control validation: RangeValidator, RegularExpressionValidator 62
  62. Tổng kết q Chương này bao gồm cơ sở ASP.Net và các yêu cầu platform cho ứng dụng ASP.Net. q Giới thiệu chi tiết về kiến trúc ASP.Net và giới thiệu các ứng dụng Web. q Các kiểu server control và validation control mà bạn có thể sử dụng trên trang q ASP.Net cung cấp cấu trúc framework cho bạn hoàn thành các ứng dụng Web 63