Bài giảng Đồ họa máy tính - Chương 7: Web Application - Phan Trọng Tiến

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 
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 
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ư : 
q Hỗ trợ nhiều ngôn ngữ lập trình 
q Có các điều khiển mới 
q Hỗ trợ XML 
q Nhiều khả năng bảo mật: chứng thực người sử dụng 
q Hiệu năng thực thi code cao 
q  Các phiên bản 
q ASP 1.0 năm 1996 
q Rồi phiên bản ASP 2.0 và 3.0 
q ASP.Net cung cấp một cách tiếp cận khác để phát triển ứng dụng 
Web. 
3 
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: 
q Tự động quản lý bộ nhớ 
q Hỗ trợ nhiều ngôn ngữ 
q Bảo đảm việc chứng thực người sử dụng 
q Dễ cấu hình 
q Dễ triển khai 
4 
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 
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 
Hai mô hình lập trình ASP.Net 
q  Web Forms 
q Cho phép bạn tạo các trang Web động. 
q Cũng có thể dùng các control để tạo các UI components 
q  Web Services 
q Mô 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. 
q Web 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ệ. 
q Web Services giúp bạn thay đổi dữ liệu trên client-server hoặc kiến 
trúc server-server. 
q Web Services dùng các chuẩn như HTTP và XML để trao đổi dữ 
liệu 
7 
Các yêu cầu nền ASP.Net 
q ASP.Net là một phần của .Net Framework 
SDK, được download 
q Cần cài IE 5.5 trở lên 
q Các hệ điều hành hỗ trợ .Net 
q Windows XP Professional 
q Windows 2000 
q Windows NT 4.0 with Service Pack 6a 
q Windows 98 
8 
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: 
q Dùng .Net Framework chạy trên Web Server để tạo 
các trang web động. 
q Dùng các đăc điểm của CLR như sự an toàn và có 
sự kế thừa. 
q Thiết kế và lập trình sử dụng Tool Rapid 
Application Development(RAD) của VS.Net. 
q Không phụ thuộc vào client 
q Tương thích với bất kỳ trình duyệt web và thiết bị 
mobile 
9 
Các thành phần Web Form 
q Giao diện người sử dụng 
q Diễ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 
q Logic lập trình(code) 
q Làm việc tương tác với người sử dụng với trang web form. 
q Bất kỳ ngôn ngữ lập trình .Net (Vb.Net,C#...) dùng để viết 
code logic cho trang Web. 
q Hai mô hình viết code: code-inline và code-behind 
q Code-inline: code được nhúng trực tiếp vào trang ASP.Net 
q Code-behind: code nằm ở một file riêng, và trang ASP.Net 
tham chiếu tới 
10 
Thiết kế Web Forms 
q B1: Start VS.Net vào File\New\Web Site 
 để mở hộp thoại New Project 
q B2: Chọn Template là ASP.NET Web Site 
q B3: Chọn nơi đặt Website ở Location 
q B4: Chọn ngôn ngữ cho trang ASP.Net ở 
Language 
q B5: Kích OK để hoàn thành việc 
11 
Thiết kế Web Forms 
12 
Cửa sổ VS.Net 
13 
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 
Thiết kế Web Forms 
q Trang .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ả. 
q Mặ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 
Thiết kế Web Forms 
q Cá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ế độ. 
q Khi 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. 
q Bạn cũng có thể viết code trên cùng trang 
HTML 
16 
Thiết kế Web Forms 
q Mộ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 đó. 
q Bạ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 
Thiết kế Web Forms 
q Trong chế độ hiển thị HTML 
<%@ Page Language="vb" AutoEventWireup="false“ CodeFile="default.aspx.vb“ 
Inherits="DemoWeb.WebForm1"%> 
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 
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 
Code-behind 
20 
Giải thích 
q  Public Class WebForm1 
 Inherits System.Web.UI.Page 
q Class WebForm1 kế thừa từ lớp Page 
q Lớp Page nằm trong namespace System.Web.UI 
q  Hai phương thức InitializeComponent và Page_Init 
q InitializeComponent: bao gồm code khởi tạo cho trang như các control. 
q Page_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 
Chạy ứng dụng Ấn Ctrl + F5 
22 
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 
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 
Server Controls khác gì HTML Controls 
thông thường? 
q HTML 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. 
q Cò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 
Các kiểu Server Control 
q .Net Framwork hỗ trợ HTML server 
controls và Web server controls. 
q HTML 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 
q Web server controls: nằm trong namespace 
 System.Web.UI.WebControls. Các control này cũng gọi là Web 
Controls. 
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 
Bảng HTML server control và thẻ tương ứng 
HTML server control Thẻ HTML 
HtmlForm 
HtmlInputText Và 
HtmlInputButton 
HtmlInputCheckBox 
HtmlInputRadioButton 
HtmlInputImage 
29 
Bảng HTML server control và thẻ tương 
ứng(tiếp) 
HTML server control Thẻ HTML 
HtmlAnchor 
HtmlButton 
HtmlTable 
HtmlTableRow 
HtmlTableCell 
30 
Sự khác nhau giữa HTML server controls 
và Web controls? 
q Khi tạo ứng dụng web, bạn phân vân nên 
chọn HTML server controls hay Web 
controls? 
q Phụ 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. 
q So sánh hai loại control: 
q HTML server controls và Web controls 
31 
Sự khác nhau giữa HTML server cotrols 
và Web controls? 
q Ánh xạ tới thẻ HTML(Mapping to HTML tags): 
q HTML 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”. 
q Web 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): 
q HTML 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. 
q Web control thiết lập theo chuẩn property. 
q Trình duyệt đích (Target browser): 
q HTML 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. 
q Web 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 
Thêm các web controls lên Form 
q Thêm các server control lúc thiết kế hoặc 
lúc chạy. 
q Thêm lúc thiết kế có thể dùng Toolbox 
hoặc ở chế độ HTML của trang .aspx 
q Có thể thêm lúc chạy bằng việc dùng thẻ 
 trong trang .aspx hoặc file code 
behind. 
33 
Dùng Toolbox 
q Toolbox phân loại các control thành các 
nhóm thuận tiện cho việc truy cập. 
34 
Dùng ở chế độ hiển thị HTML 
q Có 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. 
<asp:TextBox id = "MyTextBox" runat = "server" Text = 
"Greetings"> 
35 
Dùng trong code behind 
q ASP.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 
q Giả 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 
Thiết lập thuộc tính WebControl 
q Các server control có các thuộc tính 
thông dụng kế thừa từ lớp cơ sở 
WebControl. 
q Có thể thiết lập thuộc tính lúc thiết kế 
hoặc lúc chạy. 
q Thiết lập thuộc tính của control lúc thiết 
kế bạn dùng cửa sổ Properties 
q Hiể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 
Cửa sổ Properties của Textbox 
38 
Thiết lập thuộc tính WebControl 
q Cũ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. 
<asp:TextBox Id = "Text_Box" runat = "server" Enabled = 
False> 
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 
Các sự kiện điều khiển trong WebControl 
q Mỗi control có các sự kiện riêng có thể 
điều khiển trong code behind của 
trang .aspx 
q Ví 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 
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.  <asp:Button Id = “btnAccept" runat = "server" OnClick 
=“btnAccept_Click"> 
2.  Viết sự kiện trong trang Aspx 
Sub btnAccept_Click(sender as Object, e as 
EventArgs) 
‘Code comes here 
End Sub 
 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 
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 
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 
Các control validation 
q Dữ liệu người sử dụng phải được 
validation trước khi insert vào CSDL 
q ASP.Net, việc validate dùng các control 
validation -> bạn không cần phải viết 
code validation. 
q Ví 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 
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 
q RequiredFieldValidator: kiểm tra control là rỗng hay không. 
q CompareValidator: so sánh giá trị các control có khớp nhau 
hay không. 
q RangeValidator: kiểm tra giá trị control là trong khoảng text 
hay khoảng của số. 
q RegularExpressionValidator: kiểm tra giá trị control khớp 
biểu thức biểu thức chính qui. 
q CustomValidator: thi hành validate do người dùng tự định 
nghĩa. 
q ValidationSummary: hiển thị tất cả các lỗi trong nhóm 
46 
Các control validation 
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 
Cách dùng Validate control 
q Tham khảo ví dụ dùng validate control 
q Cá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. 
q Validation 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 
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 
RequiredFieldValidator 
q Dùng kiểm tra giá trị của control có hợp 
lệ hay không. Bảng thuộc tính 
51 
Property Value 
ID rfvUserName 
ControlToValidate txtUserName 
ErrMessage Nhập vào Username 
Display Dynamic 
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 
CompareValidator 
q Dù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. 
q Cá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 
Bảng thuộc tính CompareValidator 
Thuộc tính Mô tả 
ControlToValidate 
ControlToCompare 
Display 
ErrorMessage 
Operator 
Type 
ValueToCompare 
54 
Code HTML 
<asp:CompareValidator id="cpvPassword" style="Z-
INDEX: 116; LEFT: 392px; POSITION: absolute; TOP: 
64px" 
 runat="server" ErrorMessage="Please 
retype the password" ControlToValidate="txtConfirm" 
Display="Dynamic" 
 ControlToCompare="txtPassword"> 
55 
RangeValidator 
q Dù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. 
q Các thuộc tính khác: MaximumValue, 
MinimumValue, Type 
56 
RegularExpressionValidator 
q Dù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  
q Các thuộc tính thường sử dụng: 
ControlToValidate, ErrorMessage, 
Display, ValidationExpression. 
q Thuộ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 
Ví dụ RegularExpressionValidator 
q Thuộ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 
CustomValidator 
q Cho 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. 
q Thuộc tính ClientValidationFunction 
dùng để thiết lập hàm/thủ thục script. 
q Phía Server, control cung cấp sự kiện 
ServerValidate, bạn phải viết code ở đây. 
59 
ValidationSummary 
q Dùng control này để hiển thị tất cả các lỗi 
trên trang. 
q Bạ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. 
q Cung 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 
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 
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 
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