MỤC LỤCfit.mta.edu.vn/files/DanhSach/BGLTWeb_TinChi_V01.pdfBài giảng Lập trình Web Biên...
Transcript of MỤC LỤCfit.mta.edu.vn/files/DanhSach/BGLTWeb_TinChi_V01.pdfBài giảng Lập trình Web Biên...
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
1
MỤC LỤC
MỤC LỤC ............................................................................................................................. 1
Chương 1: Tìm hiểu môi trường WEB ................................................................................... 3
1.1. Các khái niệm cơ bản trong môi trường web ............................................................... 3
1.2. Cấu trúc trang web ...................................................................................................... 6
1.3. Các thẻ HTML thông dụng .......................................................................................... 7
1.3.1. Thẻ <head></head> .............................................................................................. 7
1.3.2. Thẻ <title></title> ................................................................................................ 7
1.3.3. Thẻ <body></body> ............................................................................................. 8
1.3.4. Các thẻ định dạng: ................................................................................................ 8
1.3.5. Thẻ định dạng bảng: ........................................................................................... 11
1.3.6. Thẻ hình ảnh ....................................................................................................... 12
1.3.7. Thẻ liên kết ......................................................................................................... 13
1.3.8. Các thẻ Input ...................................................................................................... 14
1.3.9. Thẻ Textarea ....................................................................................................... 19
1.3.10. Thẻ Select ......................................................................................................... 19
1.3.11. Thẻ Form .......................................................................................................... 20
1.3.12. Thẻ Frame ........................................................................................................ 21
1. 3.13. Một số thẻ HTML đặc biệt ............................................................................... 23
1.3.13.1. Thẻ <meta> ................................................................................................... 23
1.3.13.2. Thẻ marque .................................................................................................... 25
1.3.13.3. Thẻ <style> .................................................................................................... 26
1.3.13.4. Thẻ <link> ..................................................................................................... 27
1.3.13.5. Thẻ <Script> .................................................................................................. 28
1.4. CSS (Cascading Style Sheets) ................................................................................... 28
1.4.1. Giới thiệu ........................................................................................................... 28
1.4.2. Khai báo ............................................................................................................. 29
1.4.3. Một số thuộc tính hay sử dụng ............................................................................ 30
1.5. JAVASCRIPT (JS) .................................................................................................... 38
1.5.1. Giới thiệu ........................................................................................................... 38
1.5.2. Khai báo biến ..................................................................................................... 39
1.5.3. Các toán tử trong JavaScript ............................................................................... 40
1.5.4. Cấu trúc các lệnh ................................................................................................ 41
1.5.5. Hàm trong JavaScript ......................................................................................... 43
Chương 2. NGÔN NGỮ PHÁT TRIỂN ỨNG DỤNG WEB ................................................ 45
2.1. Giới thiệu một số ngôn ngữ kịch bản phía server: ...................................................... 45
2.2.Tổng quan về ngôn ngữ ASP.NET(Active Server Page. Net): ..................................... 45
2.2.1. Giới thiệu ASP và ASP.NET .............................................................................. 45
2.2.2. Giới thiệu .NET FRAMEWORK ........................................................................ 47
2.2.3. Biên dịch trang ASPX ........................................................................................ 48
2.2.4. Giới thiệu công cụ lập trình ................................................................................ 50
2.3. Nền tảng của ASP.NET ............................................................................................. 54
2.3.1. Mô hình trang web .............................................................................................. 54
2.3.2. Các chỉ dẫn ......................................................................................................... 56
2.3.3. Điều khiển sự kiện trong Web page .................................................................... 58
2.3.4. POSTBACK ....................................................................................................... 60
2.4. Master Page ............................................................................................................... 60
2.5. HTML Controls và ASP.NET Web Server Controls ................................................. 67
2.5.1. Giới thiệu các controls ........................................................................................ 67
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
2
2.5.2. Web Server Controls .......................................................................................... 68
2.5.3. Nhóm điều khiển điều hướng trang và nâng cao .................................................. 80
2.5.4. HTML Server Controls ....................................................................................... 91
2.5.5. Các điều khiển kiểm tra tính hợp lệ ..................................................................... 92
2.6. Các đối tượng trong ASP.NET ................................................................................ 100
2.6.1. Đối tượng Request và lớp HtttRequest .............................................................. 100
2.6.2. Đối tượng Response và lớp HttpResponse ........................................................ 105
2.6.3. Đối tượng Server và lớp HttpServerUtility ........................................................ 111
2.6.4. Đối tượng Application và lớp HttpApplicationState .......................................... 113
2.6.5. Đối tượng Cookies ............................................................................................ 117
2.4.4. Đối tượng Session ............................................................................................ 119
2.7. Giới thiệu ngôn ngữ lập trình .NET ......................................................................... 124
Chương 3. LÀM VIỆC VỚI CƠ SỞ DỮ LIỆU .................................................................. 126
3.1. Các thao tác trên dữ liệu .......................................................................................... 126
3.1.1. Các lệnh cập nhật dữ liệu .................................................................................. 126
3.1.2. Truy vấn dữ liệu ............................................................................................... 127
3.1.3. Xây dựng hàm và thủ tục trong SQL server ...................................................... 128
3.2. Các điều khiển dữ liệu ASP.NET 2.0 ....................................................................... 131
3.2.1. Data Source Controls và Data-Bound Controls ................................................. 131
3.2.2. Các thao tác dữ liệu với Data Controls .............................................................. 153
3.3. Mô hình ADO.NET ................................................................................................. 176
3.3.1. Giới thiệu đối tượng ADO.NET ........................................................................ 176
3.3.2. Các đối tượng trong ADO.NET ........................................................................ 177
3.4. Các lớp SqlClient trong mô hình ADO.NET ........................................................... 181
3.4.1. Class SqlConnection ......................................................................................... 182
3.4.2. Class SqlCommand .......................................................................................... 187
3.4.3. Class SqlDataAdapter ....................................................................................... 191
3.4.4. Class DataSet ................................................................................................... 197
3.4.5.DataView .......................................................................................................... 197
Chương 4. Thiết kế ứng dựng web ..................................................................................... 204
4.1. Các mô hình ứng dụng ............................................................................................ 204
4.1.1. Giới thiệu mô hình đa lớp. ................................................................................ 204
4.1.2. Thiết kế ứng dụng web ..................................................................................... 205
4.2. Xử lý trang ASP.NET nâng cao ............................................................................... 208
4.2.1. Thiết kế User Control ....................................................................................... 208
4.2.2. Security Basics ................................................................................................. 211
4.3. Thiết kế một số chức năng web ............................................................................... 229
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
3
Chương 1: Tìm hiểu môi trường WEB
1.1. Các khái niệm cơ bản trong môi trường web
• Kiến trúc của dịch dụ World Wide Web: Dịch vụ World wide web
được xây dựng theo mô hình Client/Server, tức là người ta sẽ thiết lập
một máy phục vụ cho việc lưu trữ các tài liệu Hypertext gọi là Web
Server. Phía người sử dụng sẽ có một máy tính cùng với phần mềm có
khả năng hiểu được các tài liệu Hypertext và giao tiếp được với Web
Server gọi là Web Browser hay web client. Khi một người sử dụng có
một yêu cầu một tài liệu nào đó bằng cách gửi đến Web Server một
URL thì Web Server sẽ phục vụ tài liệu đó và Web Browser sẽ hiển thị
nó lên màn hình với khuôn dạng thích hợp.
• Khái niệm URL (Uniform Resource Locator) là một con trỏ được dùng với
mục địch đơn giản là xác định vị trí tài nguyên của môi trường Internet.
Thông qua các URL mà Web Browser có thể tham chiếu đến một Web
Server hoặc các dịch vụ khác trên Internet và ngược lại. URL có cấu trúc
chuỗi có định dạng như sau:
http: // <host> [: <port>] [ <path> [? <query>]]
+ Sau tiền tố http://, chuỗi URL sẽ chứa tên host hay địa chỉ IP của
máy server (có thể có số cổng đi kèm), tiếp theo là đường dẫn dẫn
đến tập tin server được yêu cầu. Tùy chọn sau cùng là tham số, còn
được gọi là query string (chuỗi tham số/chuỗi truy vấn).
+ Ví dụ: http://www.kls.vn/default.aspx?tabid=234
• Khái niệm về HTTP: Web Browser và Web Server giao tiếp với nhau
thông qua một giao thức được gọi là HTTP. Sự kết nối Http qua 4 giai
đoạn:
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
4
Hình 1.1. Sự kết nối HTTP
1. Tạo kết nối: Web Browser giao tiếp với Web Server nhờ địa chỉ
Internet và số cổng (ngầm định là 80) được đặc tả trong URL.
2. Thực hiện yêu cầu: Web Browser gửi thông tin tới Web Server
để yêu cầu phục vụ. Việc gửi thông tin ở đây là gửi phương
thức GET dùng cho việc lấy một đối tượng từ Server, hay
POST dùng cho việc gửi dữ liệu tới một đối tượng trên Server.
3. Phản hồi: Web Server gửi một phản hồi về Web Browser nhằm
đáp ứng yêu cầu của Web Browser.
4. Kết thúc kết nối: Khi kết thúc quá trình trao đổi giữa Web
Browser và Web Server thì sự kết nối chấm dứt. Và như vậy
mối liên hệ giữa Client và Server chỉ được tồn tại trong quá
trình troa đổi với nhau, điều này có lợi điểm rất lớn là giảm
được lưu thông trên mạng.
• Web Server: Là một phần mềm được sử dụng ở máy phục vụ và luôn
"lắng nghe" yêu cầu của người sử dụng từ một cổng truyền thông nào đó
(ngầm định là 80). Khi phía máy khách yêu cầu một trang web, web
server sẽ tìm tài nguyên của mình xem có đáp ứng được đòi hỏi đó
không, nếu có sẽ gửi kết quả về phía client. Hiểu một cách đơn giản
Web Server là máy tính lưu trữ các trang web.
Trong môi trường Windows, Web Server thường được sử dụng là IIS
(Internet Information Server). IIS sử dụng cho các Server Script như:
ASP (Active Server Page), ASP.NET, JSP (Java Server Page), PHP,
Servlet, Perl .v.v…
Trong môi trường Linux, Web Server thường sử dụng bao gồm Apache,
JRun, Web logic.v.v…
• Web Client: Máy tính dùng để truy cập các trang Web.
• Web Browser (hay còn gọi là trình duyệt Web): là một phần mềm
được dùng ở phía người sử dụng, nhiệm vụ của nó là khởi tạo các con
trỏ địa chỉ URL để gửi tới Web Server. Ðồng thời Web Browser sẽ diễn
dịch các tài liệucó nội dung dưới dạng HTML và trình bày cho người sử
dụng dưới nhiều hình thức phong phú.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
5
Ðể trang Web trình bày dữ liệu theo như ý trên trình duyệt, ta cần phai khai
báo các thẻ HTML và các Client Script phù hợp với chuẩn HTML và Client
Script. Ngoài ra, mỗi trình duyệt có thể hỗ trợ thêm những thẻ khác nhằm cho
phép người dùng phong phú hoá giao diện của trang Web.
Hai trình duyệt phổ biến hiện nay là IE (Internet Explorer của hãng Microsoft)
và NC (Netscape). Cả hai trình duyệt này đều cho phép ta duyệt các loại trang Web
được xây dựng trên ngôn ngữ lập trình bất kỳ có thể hỗ trợ trang Web.
Tuy nhiên, đối với trình duyệt IE thì dễ dàng hơn, bởi trình duyệt này hỗ
trợ hầu hết các thẻ HTML hiện nay và bỏ qua các khai báo mang tính chưa đầy
đủ. Ngược lại, với trình duyệt NC, ta cần phải khai báo và sử dụng đúng các thẻ
NC hỗ trợ.
• Web động và Web tĩnh: Trong thực tế, ứng dụng Web luôn tồn tại hai
loại là trang Web tĩnh và động. Trang Web tĩnh là trang HTML không
kết nối cơ sở dữ liệu. Ngược lại, trang Web động là trang Web có kết
nối cơ sở dữ liệu. Ðiều này có nghĩa là mỗi khi trang Web động được
làm tươi dữ liệu trình bày trên trang Web được đọc từ CSDL.
Hình 1.2. Quy trình triệu gọi các trang web
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
6
Nói cách khác, cho dù đó là trang Web tĩnh hay động, nếu ta muốn người
dùng sử dụng chúng để trình bày dữ liệu trên trình duyệt Web, ta cần phải khai
báo các thẻ HTML bên trong theo một quy định nhất định.
Ðể xây đựng một ứng dụng Web hoàn chỉnh và có tính thương mại ta cần
phải kết hợp cả Client Script (kịch bản trên trình khác) và Server Script (kịch
bản trên trình chủ) với một loại CSDL nào đó, chẳng hạn như MS Access, SQL
Server, MySQL, Oracle.v.v...
Tóm lại, cho dù ta sử dụng bất kỳ Server Script với Web Server nào, thì Client
Script không phụ thuộc vào chúng. Nghĩa là ta có thể sử dụng một trong hai loại
Client Script ở trên là VBScript và JavaScript đều có thể chấp nhận được.
1.2. Cấu trúc trang web
HTML (HyperText Markup Language - Ngôn ngữ đánh dấu siêu văn bản)
không phải là ngôn ngữ lập trình chỉ là một ngôn ngữ mô tả tài liệu.
Ngôn ngữ đánh dấu HTML sử dụng các ký hiệu quy định sẵn (được gọi là
tag) để trình bày nội dung văn bản.
Trang Web trình bày dữ liệu trên trình duyệt có cấu trúc HTML. Cấu trúc
này được bắt đầu thẻ mở <HTML> và kết thúc bằng thẻ đóng </HTML> . Trang
HTML có tên mở rộng là .htm, .html, .jhtm. phtm.v.v… nhưng tên mở rộng
chuẩn trong HTML là .htm, html.
Bên trong hai thẻ này có thể khai báo và sử dụng hầu hết các thẻ HTML.
Tuy nhiên, có một số thẻ HTML không được hỗ trợ trên trình duyệt NC, một số
thẻ khác phải được khai báo đầy đủ đầy đủ mới biên dịch được trên NC.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
7
Ðiều này có nghĩa là nếu người dùng sử dụng trình duyệt IE, ứng dụng
Web của ta sẽ dễ dàng hơn khi thiết kế cũng như khai báo các tiện ích khác
trong quá trình lập trình.
Chú ý:
- HTML quy định không phân biệt chữ hoa và chữ thường. Ví dụ, nếu thẻ
mở có tên là <head> thì các thẻ </Head> hay </HEAD> đều là thẻ đóng của nó.
Không được có khoảng trắng trong định nghĩa tên thẻ.
- Thẻ HTML có hai loại: Loại có thẻ mở kèm thẻ đóng, loại thứ hai là loại
chỉ có thẻ mở không có thẻ đóng.
Loại có thẻ đóng ta cần phải khai báo thẻ đóng sau khi có khai báo thẻ mở,
chẳng hạn như thẻ <html></html>. Thẻ đơn là thể không tồn tại thẻ đóng, ví dụ
như thẻ <br> hay thẻ <hr>.
Ví dụ 1.1: Cấu trúc trang HTML. <html> <head> <title> Welcome to My Web </title> <meta ...> <link ...> <script ...> </script> </head> <body> Here is Chapter 1 </body>
</html>
1.3. Các thẻ HTML thông dụng
1.3.1. Thẻ <head></head>
Tất cả các thông tin chứa trong thẻ này đều không xuất hiện trên trang
Web. Ðiều này có nghĩa là trong thẻ <head> ta có thể khai báo các thẻ như
<title> </title>, <meta>, <link>, <script>, như cấu trúc
trong ví dụ 1.1. ở trên.
1.3.2. Thẻ <title></title>
Thẻ <title> cho phép trình bày chuỗi ký tự trên thanh tựa đề của trang Web
mỗi khi trang Web đó được duyệt trên trình duyệt Web.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
8
Thông thường trong thẻ <title> chứa những thông tin tóm tắt liên quan đến
ứng dụng hay trang Web mà ta đang trình bày.
Trong ví dụ 1.1 ở trên dòng tiêu đề " Welcome to My Web " sẽ xuất
hiện trên dòng tiêu đề của trang Web.
1.3.3. Thẻ <body></body>
Tất cả thông tin được khai báo trong thẻ <body> đều có thể xuất hiện trên
trang Web. Chính vì vậy, để người dùng có thể nhìn thấy thông tin trên trang
Web, ta có thể khai báo các thẻ khác và nội dung muốn trình bày trong thẻ
<body>.
Tuy nhiên, ta cũng có thể sử dụng các thuộc tính hay phương thức của
Client Script để che dấu hay hiển thị chúng tuỳ theo mục đích của mình.
1.3.4. Các thẻ định dạng:
a) Thẻ <div></div>
Cho phép định dạng một đoạn văn bản bằng các thuộc tính của chúng.
Ví dụ 1.2. Căn lề đoạn văn bản bằng thẻ <div> <html> <head> <title> Welcome to My Web </title> <meta ...> <link ...></link> <script ...> </script> </head> <body>
<div align="justify"> An explanation of exactly what JavaScript is has to begin with Java. Java is a new kind of Web programming language developed by Sun Microsystems. A Java program, or applet, can be loaded by an HTML page and executed by the Java Interpreter, which is embedded into the browser.
</div> </body> </html>
Ta sử dụng thẻ <div> với align="justify" hay
align="center" để căn lề đoạn văn bản như ví dụ trên.
b) Thẻ <p></p>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
9
Có tác dụng tương tự như thẻ <div>, trong trường hợp ta muốn định dạng
một câu văn, ta có thể sử dụng thẻ <p>. Ðiều này có nghĩa là sau khi kết thúc
thẻ đóng </p>, dữ liệu trình bày sẽ tự động xuống dòng.
Ví dụ 1.3: Thẻ định dạng <p>
<html> <head> <title> Welcome to My Web </title> <meta ...> <link ...></link> <script ...> </script> </head> <body>
<p align="justify"> An explanation of exactly what JavaScript is has to begin with Java. Java is a new kind of Web programming language developed by Sun Microsystems. </p> <p align="justify">Typical Internet Connectivity Design With these security concerns now established, let's look at a typical Internet connectivity design and specifically at the way the DNS servers would be configured. </p>
</body> </html>
Chú ý: Khác với thẻ <div> ngay sau thẻ <p> thứ nhất là thẻ <p> thứ hai
không có dấu xuống hàng, đoạn văn thứ hai xuống dòng và cách đoạn văn thứ
nhất một khoảng cách nhất định.
c) Thẻ <font></font>
Thẻ <font> cho phép định dạng một chuỗi ký tự với một kiểu chữ nhất
định, cỡ chữ và màu chữ cũng được định nghĩa trong thẻ <font>.
Trong thẻ <font>, ta cần cung cấp:
- Từ khoá face với tên kiểu chữ như Arial, Tohamo, .v.v…
- Từ khoá color với tên của một loại màu: Trong trường hợp màu
thuộc hệ 16 màu chuẩn, ta có thể sử dụng từ khoá blue, red,
green,Tuy nhiên, trong trường hợp màu khác ngoài 16 màu trên
ta phải cung cấp chuỗi 6 số trong hệ 16, chẳng hạn như
#66CCFF.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
10
- Từ khoá size với con số cụ thể để định dạng kích thước của
chuỗi ký tự.
Ví dụ 1.4. Sử dụng thẻ <font> <html> <head> <title> Welcome to My Web </title> <meta ...> <link ...></link> <script ...> </script> </head> <body>
<p align="justify">An explanation of exactly what <font face="arial" color="red" size="3">JavaScript</font> is has to begin with Java.</p>
</body>
Trong ví dụ, ta khai báo thẻ <font> cho chữ " JavaScript " có cỡ chữ
là 3 và màu đỏ.
d) Thẻ <b></b>, <i></i>, <u></u>, <br>
- Thẻ <b> định dạng chuỗi ký tự in đậm (bold).
- Thẻ <i> định dạng chuỗi ký tự in nghiêng (italic).
- Thẻ <u> cho phép gạch chân chuỗi ký tự.
- Thẻ <br> cho phép xuống dòng
Ví dụ 1.5. Ðịnh dạng chuỗi bằng các thẻ <b>, <i> và <u> <html> <head> <title> Welcome to PHP and MySQL Book </title> <meta ...> <link ...></link> <script ...> </script> </head> <body>
<p align="justify">An explanation of exactly what <font face="arial" color="red" size="3"> <b>JavaScript</b></font> is has to begin with Java. Java is a new kind of <u>Web</u> programming language developed by <i>Sun Microsystems</i>. A Java program, or applet, can be loaded by an HTML page and executed
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
11
by the Java Interpreter, which is embedded into the browser.</p>
</body>
e) Thẻ <Hr> dùng để vẽ một đường thẳng nằm ngang. Sử dụng các thuộc
tính sau:
- size=n: xác định độ dày của đường thẳng
- Width=n xác định chiều dài của đường thẳng
- Align=Left/Right/Center: Canh lề đường thẳng
- NoShade: Không đổ bóng.
Ví dụ: <hr Width="50%" size="5" Align="Right" color="red">
Chú ý: Ngoài ra còn một số thẻ định dạng khác như thẻ phân đoạn <ul>,
<li>,.v.v…
1.3.5. Thẻ định dạng bảng:
Khi ta muốn thiết kế bảng dữ liệu trên trang Web, ta cần phải khai báo thẻ
<table>. Sau khi khai báo thẻ này ta tiếp tục khai báo hàng <tr> và thẻ cột
<td> cùng với các thuộc tính khác.
Ðể khai báo thẻ <table>, ta quan tâm đến đường viền (border), chiều rộng
và chiều cao của nó, màu nền (gbcolor) và khoảng cách giữa các hàng và cột
(cellspacing, celladding)
Tuy nhiên, khi thiết kế <table>, ta thường chỉ quan tâm đến chiều rộng
không quan tâm đến chiều cao bởi vì chiều cao phụ thuộc vào dữ liệu ta có.
Như vậy đối với thẻ <tr> ta quan tâm đến chiều cao. Thẻ <td> chỉ quan tâm
đến chiều rộng.
- Ðể kết hợp hai cột thành một cột ta dùng từ khoá colspan .
- Ðể hợp nhất hai hàng lại vào với nhau, ta sử dụng từ khoá rowspan.
Ví dụ 1.6: Tạo bảng như sau:
MaNV Hoten So DT
Ma vung So
A0001 Nguyen Van A 04 7543611
B0002 Tran Van B 0211 853540 <html>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
12
<head> <title> Welcome to my Website </title> <meta ...> <link ...></link> <script ...> </script> </head> <body> <TABLE BORDER="1" CELLSPACING=1 CELLPADDING=7 WIDTH=453> <TR> <TD WIDTH="66" VALIGN="TOP" ROWSPAN=2> MaNV</TD> <TD WIDTH="154" VALIGN="TOP" ROWSPAN=2> <P ALIGN="JUSTIFY">Hoten</TD> <TD WIDTH="133" VALIGN="TOP" COLSPAN=2> So DT</TD> </TR> <TR><TD WIDTH="104" VALIGN="TOP">Ma vung</TD> <TD WIDTH="59" VALIGN="TOP">So</TD> </TR> <TR> <TD WIDTH="66" VALIGN="TOP"> A0001</TD> <TD WIDTH="154" VALIGN="TOP"> <P ALIGN="JUSTIFY">Nguyen Van A</TD> <TD WIDTH="104" VALIGN="TOP"> 04</TD> <TD WIDTH="59" VALIGN="TOP">7543611</TD> </TR> <TR><TD WIDTH="66" VALIGN="TOP"> B0002</TD> <TD WIDTH="154" VALIGN="TOP"> <P ALIGN="JUSTIFY">Tran Van B</TD> <TD WIDTH="104" VALIGN="TOP">0211</TD> <TD WIDTH="59" VALIGN="TOP">853540</TD> </TR> </TABLE> </body>
1.3.6. Thẻ hình ảnh
Ðể chèn hình ảnh vào một trang Web, ta có thể sử dụng thẻ <img>, thẻ này
thuộc loại thẻ không có thẻ đóng. Trong thẻ, ta có thể thêm thuộc tính chiều cao,
rộng, border và địa chỉ của ảnh đó của nó.
Chú ý:
- Hình ảnh có kích thước cố định, khi ta điều chỉnh kích thước đó khác với
kích thước nguyên thuỷ thì hình đó sẽ bị bóp méo hoặc mờ đi. Ðể hình đó có
kích thước giống như thực mà ta thiết kế bằng các công cụ đồ hoạ, thì khi chèn
hình ảnh vào trang Web, ta không cần cung cấp từ khoá Height, và Width.
- Ngoài cách sử dụng thẻ <img> còn một cách chèn hình ảnh vào trang
Web bằng cách sử dụng thẻ input.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
13
Ví dụ 1.7. Chèn hình ảnh.
<html> <head> <title> Welcome to My Web </title> <meta ...> <link ...></link> <script ...> </script> </head> <body> <img src="intranetvietnam.gif" border=0 Alt=”Ten anh”>
<p align="justify">An explanation of exactly what <font face="arial" color="red" size="3"><b>JavaScript</b></font> is has to begin with Java. Java is a new kind of <u>Web</u> programming language developed by <i>Sun Microsystems</i>.</p>
</body>
1.3.7. Thẻ liên kết
Ðể liên kết giữa các trang Web với nhau hay liên kết đến địa chỉ Internet,
mail hay intranet (URL) ta có thể sử dụng thẻ liên kết <a>.
- Liên kết một địa chỉ Internet hay Intranet, ta khai báo thẻ <a> với từ
khoá href bằng với địa chỉ URL hay UNC mà ta cần trỏ đến.
Khi khai báo thẻ <a> để cho phép người dùng chọn liên kết đó, ta có thể
sử dụng nhãn hay hình ảnh như khái báo sau:
+ Sử dụng hình ảnh:
<a href="http:"//www.intranetvietnam.com"> <img src="intranetvietnam.gif" border=0> </a>
+ Sử dụng nhãn:
<a href="http://www.sun.com"> Welcome </a>
- Ðể liên kết với địa chỉ e-mail như là mở mail trong Microsoft Outlook,
ta khai báo như sau:
<a href="mailto:[email protected]"> <img src="intranetvietnam.gif" border=0> </a> <a href="mailto:[email protected]">
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
14
Welcome </a>
- Ðể liên kết đến một trang Web khác trong cùng Web site, ta có thể khai
báo thẻ <a> như sau:
<a href="../vidu1_6.htm "> Welcome </a>
- Ngoài ra thẻ <a> còn cho phép ta khai báo như một bookmark trong
chính trang Web. Khi khai báo thẻ báo thẻ <a> như vậy, người dùng có
thể nhảy tới vị trí chỉ định nào đó trong trang Web.
Ta khai báo thẻ <a> với tên là "top" như sau: <a name="top"></a>.
Khi đó trong một vị trí nào trong trang Web ta có thể khai báo thẻ <a> khác để
cho phép người dùng chọn vào liên kết để chuyển đến vị trí trên như sau:
<a href="top">Back to top</a>
Ví dụ 1.8. Thẻ <a> <html> <head> <title> Welcome to PHP and MySQL Book </title> </head> <body> <a name="#2"></a> .. <a href="#2">Back to top</a> </body>
1.3.8. Các thẻ Input
Thẻ Input cho phép người dùng nhập liệu hay chỉ thị thực thi một hành
động nào đó, thẻ Input bao gồm các loại thẻ như: text, password, submit, button,
reset, checkbox, radio, hidden, image.
a) Thẻ Input dạng text:
Thẻ input dạng text cho phép người dùng nhập liệu, với thẻ này ta có thể giới
hạn chiều dài lớn nhất (maxlenght) và chiều dài trình bày (size) trên trang Web.
Chiều dài lớn nhất để khống chế chiều dài chuỗi nhập trên thẻ input đó,
đồng thời phù hợp với chiều dài của kiểu chuỗi trong dữ liệu của cơ sở dữ liệu
dự trữ.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
15
Chẳng hạn, trong trường hợp cột dữ liệu trong Table có chiều dài 20, trên thẻ
text cho phép người dùng nhập liệu với chuỗi dài nhất là 20. Nếu ta không khai
báo chiều dài lớn nhất cho phép, ta cần phải viết chương trình để kiểm soát được
chiều dài phù hợp với chiều dài của cột dữ liệu đã khai báo trong cơ sở dữ liệu.
Ðối với thẻ input dạng cần cung cấp tên để tham chiếu trên Client và trên
Server side.
Trong trường hợp muốn gián giá trị mặc định, ta khai báo thêm thuộc tính
value với giá trị cụ thể như ví dụ sau:
<input type="text" name="txtUsername" size=20 maxlenght=50> <input type="text" name="txtFullname" value="Chu Thi Huong" size=20 maxlenght=50>
b) Thẻ Input dạng passwordt:
Cũng giống như thẻ Input dạng text, thẻ input dạng password cho phép
người dùng nhập liệu dạng mật khẩu, tức là khi người dùng nhập liệu tất cả các
ký tự chuyển thành dấu * hay dấu phụ thuộc vào phiên bản của trình duyệt.
Với thẻ này ta có thể giới hạn chiều dài lớn nhất (maxlenght) và chiều dài trình
bày (size) trên trang Web. Ta có thể khai báo thẻ input dạng password như sau:
<input type="password" name="txtPassword" size=20
maxlenght=10>
c) Thẻ Input dạng checkbox
Khi muốn cung cấp nhiều tuỳ chọn cho người dùng lựa chọn, ta phải sử
dụng thẻ input dạng checkbox.
- Trên trình khách, ta chỉ quan tâm đến trạng thái của thẻ checkbox bằng
thuộc tính checked. Khi sử dụng Client script, nếu chọn thẻ này có giá trị true
ngược lại có giá trị false.
- Khi sử dụng Server Script để tham chiếu đến giá trị này, tức là ta tham chiếu
đến giá trị thẻ: Ðiều này có nghĩa là khi tham chiếu đến thẻ input dạng checkbox ta
cần định nghĩa trước giá trị của nó. Nếu thẻ này được chọn, Server Script sẽ tham
chiếu và nhận được giá trị đó.
Khai báo thẻ input dạng checkbox như sau:
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
16
<input type="checkbox" value="P" name="chkHow" checked>Newspaper <input type="checkbox" value="T" name="chkTV" checked>Television <input type="checkbox" value="B" name="chkB">Bus
Ta khai báo thêm từ khoá checked, để thẻ này xuất hiện trên trang Web có
giá trị mặc định là đã chọn.
d) Thẻ input dạng Radio:
Thẻ input dạng Radio tương tự như thẻ Input dạng checkbox, nhưng cho
phép người dùng chỉ chọn một trong các tuỳ chọn cho phép. Có nghĩa là nếu ta
cung cấp hai tuỳ chọn ứng với hai thẻ input dạng Radio thì người dùng chỉ được
chọn duy nhất một tuỳ chọn.
Khai báo thẻ Input dạng Radio như sau: <input type="radio" value="M" name="rdGender" checked>Male <input type="radio" value="F" name="rdGender">Female
Ðể cho phép chọn một trong hai tuỳ chọn đó, ta phải khai báo chúng cùng
tên nhưng khác nhau về giá trị. Chính vì vậy, khi tham chiếu đến thẻ này bằng
Client Script, ta phải duyệt theo dạng mảng để biết tuỳ chọn nào được chọn. Còn
nếu tham chiếu bằng Server Script, ta sẽ nhận được một giá trị của tuỳ chọn
được chọn.
Chú ý: Nếu thẻ input dạng checkbox khai báo cùng tên, ta cũng sẽ nhận
được một chuỗi giá trị mà các phần tử được cách nhau bởi dấu phảy ","
e) Thẻ input dạng Submit
Thẻ submit cho phép ta chấp nhận những dữ liệu nhập trong các thẻ input
phía trình chủ Web. Có nghĩa là khi ta muốn chuyển dữ liệu lên phía trình chủ
bằng phương thức Post (sử dụng cho thẻ form) hay Get (trên QueryString).
Ðể truyền các dữ liệu nhập từ các thẻ input trong form, ta có thể cho phép
Server Script nhận giá trị đó bằng cách nhận từ QueryString hay từ Form.
Nếu muốn chuyển các giá trị nhập đó lên trên QueryString, ta khai báo thẻ
Form với phương thức là Get. Ngược lại, nếu muốn Server Script lấy dữ liệu từ
thẻ Form, ta khai báo thẻ form với phương thức Post.
Thẻ Submit thường được khai báo trong thẻ form, dùng để Submit dữ liệu
lên trên phía trình chủ Web. Ngoài ra khi khai báo thẻ Submit ta cũng cần cung
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
17
cấp tên và value, value của thẻ input dạng Submit xuất hiện như Caption trên
nút. Ðể khai báo thẻ input dạng submit ta khai báo như sau: <input type="submit" value="Save" name="submit">
f) Thẻ input dạng Button
Thẻ button cho phép ta chấp nhận những dữ liệu đã nhập trong các thẻ input lên
phía trình khách (nếu khai báo sử dụng phương thức submit(), nút này sẽ submit thẻ
form lên trình chủ Web). Có nghĩa là khi ta muốn tính toán trên trang Web ta có thể sử
dụng thẻ này.
Thẻ input thường được khai báo trong thẻ form, dùng để tính toán hay sử
dụng một số phương thức của Client Script. Ví dụ như ta thiết kế nút "Back" với
chức năng trở về trang Web trước đó hay tính toán trên trang Web.
Khai báo thẻ input dạng button với chức năng thực thi phương thức Client
Script trở về trang Web trước đó như sau: <input type="button" value="Back" name="back"
onclick="window.history.go(-1);">
g) Thẻ Input dạng Reset
Thẻ Reset cho phép phục hồi những dữ liệu nhập hay chọn trên các thẻ
Input và thẻ select, textarea. Ðiều này có nghĩa là khi ta muốn phục hồi dữ liệu
trang Web về trạng thái ban đầu, người dùng sẽ chọn nút reset như chỉ thị phục
hồi những gì họ đã thực hiện.
Thẻ reset thường được khái báo trong thẻ form, dùng để reset dữ liệu trên
trang Web. Ngoài ra, khi khai báo thẻ reset, ta cũng cần cung cấp tên và value,
value của thẻ input dạng reset xuất hiện như caption trên một nút. Ðể khai báo
báo thẻ input dạng reset, ta chỉ cần khai báo như sau: <input type="reset" value="reset" name="back">
h) Thẻ input dạng hidden
Thẻ input dạng hidden là một dạng thẻ input dạng text nhưng không hiển thị trên
trang Web, không cho phép người dùng nhập liệu, thay vào đó ta cần định nghĩa trước
một giá trị cụ thể cho thẻ này.
Với thẻ hidden ta có thể thực hiện những mục đích tiềm ẩn nào đó. Ví dụ như
trong một trường hợp thiết lập một tuỳ chọn cho phép nhận dạng từ trang Web này gọi
đến trang Web khác hay che dấu thông tin khi cần chuyển tiếp dữ liệu sang trang kế
tiếp.
Khai báo thể hidden, ta khai báo như sau:
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
18
<input type="hidden" name="txtFrom" value="N" > <input type="hidden" name="txtpage" value="1" >
Ví dụ 1.9. Các thẻ Input <html> <head> <title> Welcome to PHP and MySQL Book </title> </head> <body> <a name="#2"></a> <br><br> UserName: <input type="text" name="txtUsername" size=20 maxlenght=50><Br> Password: <input type="password" name="txtPassword" size=20 maxlenght=10><br> Fullname: <input type="text" name="txtFullname" value="Chu Thi Huong" size=20 maxlenght=50><br> Gender: <input type="radio" value="M" name="rdGender" checked>Male <input type="radio" value="F" name="rdGender">Female <br><Br> How can you know us: <input type="checkbox" value="P" name="chkHow" checked>Newspaper <input type="checkbox" value="T" name="chkTV" checked>Television <input type="checkbox" value="B" name="chkB">Bus <br><Br> <input type="submit" value="Save" name="submit"> <input type="button" value="Back" name="back" onclick="window.history.go(-1);"> <input type="reset" value="reset" name="back"> <br> <a href="#2">Back to top</a> </body>
i) Thẻ Input dạng Image
Ngoài việc chèn hình ảnh vào trang Web bằng thẻ <img>, ta có thể sử dụng
hình ảnh thực hiện chức năng tương tự như nút submit, reset hay button bằng
cách sử dụng thẻ Input dạng Image, khai báo như sau: <input type="image" src="gogo.gif" name="search">
Ví dụ 1.10. Input với Image
<html> <head> <title> Welcome to PHP and MySQL Book
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
19
</title> </head> <body> <img src="intranetvietnam.gif" border=0></a><br> Keyword: <input type="text" name="txtKey" size=20 maxlenght=50> <input type="image" src="gogo.gif" name="search"> </body>
1.3.9. Thẻ Textarea
Thẻ Textarea cho phép người dùng nhập liệu với nhiều dòng, với thẻ này ta
không thể giới hạn chiều dài lớn nhất trên trang Web.
Ðể giới hạn chiều cao và chiều rông trình bày trên trang Web của thẻ này ta
khai cols='số ký tự', rows='Số hàng'.
Chú ý: Nếu không khai báo được chiều dài lớn nhất cho phép thì ta nên
viết chương trình kiểm soát được chiều dài phù hợp với chiều dài đâc khai báo
trong CSDL.
Khai báo thẻ textarea như sau:
<textarea name=”txtDesc” cols=”20” rows=”3”></textarea>
Trong trường hợp muốn gán giá trị mặc định ta không cần khai báo thêm
thuộc tính value, thay vào đó giá trị cụ thể sẽ khai báo giữa thẻ mở và thẻ đống
của textarea.
<textarea name=”txtRequire” cols=”20”
rows=”3”>Please enter here …</textarea>
1.3.10. Thẻ Select
Thẻ Select cho phép người dùng chọn phần tử trong tập các phần tử được
định nghĩa trước. Thẻ Select có hai dạng tương tự như combo box và listbox.
Nếu thẻ select cho phép chọn một phần tử trong danh sách thì thẻ select đó
giống như combo box, ngược lại nếu cho phép chọn nhiều phần tử trong danh
sách thì nó có dạng listbox.
Ðối với hai loại thẻ này, nếu muốn phần tử nào được chọn mặc định thì ta
them từ khoá selected trong thẻ option.
- Khai báo thẻ select dạng combo box như sau: <select name="city" > <option value="" selected>..Select City ..</option>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
20
<option value="HCM">Ho Chi Minh</option> <option value="HAN">Ha Noi</option> <option value="HUE">Hue</option> </select>
- Khai báo thẻ select dạng listbox, ta khai báo bắt đầu từ select với tên là
multiple như sau: <select name="industry" multiple >
<option value="" selected>..Select Industry..</option> <option value="AUT">Auto</option> <option value="MED">Medical</option> <option value="ENG">Engineering</option> </select>
1.3.11. Thẻ Form
Khi muốn submit dữ liệu từ người dùng nhập từ trang Web phía Client lên
phía Server, có hai cách để làm điều này ứng với hai phương thức Post và Get
trong thẻ Form. Như vậy bằng cách khai báo phưng thức Post hay Get trong thẻ
Form, cho phép Server Script lấy giá trị từ các thẻ Input.
Ðể thực hiện quá trình sử dụng phương thức yêu cầu dữ liệu từ phía Client,
ta cần khai báo thẻ Form bao (bound) hết các thẻ nhập liệu cần đưa lên phía
Server.
Chú ý:
• Trong một trang Web có nhiều thẻ Form khác nhau, nhưng các thẻ form
này không được lồng nhau, mỗi thẻ form sẽ được khai báo một hành
động action để chỉ đến một trang Web khác.
• Nếu không chỉ định địa chỉ URL hay UNC cho action, trang Web được
chuyển đến chính là trang Web hiện tại.
• Ngoài ra trong thẻ form cũng phải khai báo tên và các biến cố của form.
Chẳng hạn như ví dụ sau:
Ví dụ 1.11. Thẻ Form <html> <head> <title> Welcome to PHP and MySQL Book </title> </head> <body> <img src="intranetvietnam.gif" border=0 width="93" height="45"><br>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
21
<form name="form1" action="doaction.php" method="post" onsubmit="alert('You are about submit');"> <table><tr><td>Keyword: </td> <td><input type="text" name="txtKey" size=20 maxlenght=50></td></tr> <tr><td>City: </td><td><select name="city" > <option value="" selected>..Select City ..</option> <option value="HCM">Ho Chi Minh</option> <option value="HAN">Ha Noi</option> <option value="HUE">Hue</option> </select></td></tr> <tr><td>Industry:</td><td><select name="industry" multiple > <option value="" selected>..Select Industry ..</option> <option value="AUT">Auto</option> <option value="MED">Medical</option> <option value="ENG">Engineering</option> </select></td></tr> <tr><td> </td><td><input type="image" src="gogo.gif" name="search"> </td></tr> </table> </form> </body>
Kết quả của ví dụ này trên trình duyệt như hình 1.2.
Hình 1.2. Duyệt trang vidu1_11.html
1.3.12. Thẻ Frame
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
22
Mục đích chính của Frame là nhằm chia cửa sổ của trình duyệt ra là hai hay
nhiều vùng nhỏ hơn, để khi đó có thể tải các tài liệu HTML khác nhau vào trong
các vùng giúp người sử dụng có thể theo dõi nhiều trang Web đồng thời. Mỗi
vùng nhỏ được gọi là một Frame, tập hợp các vùng này được gọi là Frameset.
Để tạo các Frame sử dụng thẻ <frameset> </framset>. Thẻ này có hai thuộc
tinh cơ bản là ROWS và COLS dùng để mô tả số hàng và số cột chia thành
frame. Được khai báo như sau <frameset border="False" frameboder="0" rows="80,*"> <frame name="frame1" src="frame1.htm" scolling="no" noresize> <frame name="frame2" src="frame2.htm" scolling="auto" noresize> <noframes>
Thẻ <frame> dùng để xác định các trang web sẽ được hiển thị trong mỗi
frame.
Ví dụ 1.12. Sử dụng thẻ frame <html> <head> <title> Tao Frame </title> </head> <frameset border="False" frameboder="0" rows="80,*"> <frame name="frame1" src="frame1.htm" scolling="no" noresize> <frameset border="False" frameboder="0" cols="80,*">
<frame name="frame2" src="frame2.htm" scolling="auto" noresize> <frame name="frame3" src="vidu1_11.html" scolling="auto" noresize>
</frameset> </frameset> <noframes> <body> </body> </noframes> </html>
- File frame1. htm <html> <head> <title> Frame t1</title> </head> <body> <font color="red">Frame 1</font></p> </body> </html>
File frame2. htm <html> <head> <title> Frame 22</title> </head>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
23
<body> <p><font color="red">Frame 2</font></p> </body> </html>
Kết quả chạy ví dụ 1.12. cho trong hình 1.3.
Hình 1.3. Duyệt trang vidu1_12.html
1. 3.13. Một số thẻ HTML đặc biệt
Ngoài các thẻ thông dụng trên, còn một số thẻ đặc biệt như: <Meta>,
<link>, <Script>, <Style>.
1.3.13.1. Thẻ <meta>
Thẻ <meta> được khai báo trong thẻ <head> thường dùng để khai báo loại
font sử dụng, tìm kiếm, xoá cache, chuyển trang.v.v…
a) Thẻ <meta> với font
Ðể sử dụng font Unicode đặc biệt là font Uncode cho tiếng Việt trên trang
Web ta cần khai báo thẻ <meta> như sau trong thẻ <head>:
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
24
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
Chú ý: Về phía Client, nếu muốn trình bày nội dung bằng tiếng Việt và cho
phép người dùng nhập dữ liệu trên các thẻ Input bằng tiếng Việt Unicode chuẩn
UTS-8 (sử dụng bộ gõ Unicode) ta phải khai báo thẻ <meta> như trên.
Ví dụ 1.12. Thẻ <meta> sử dụng font Unicode
<html> <head> <title> Welcome to PHP and MySQL Book </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <img src="intranetvietnam.gif" border=0><br> <form name="form1" action="doaction.php" method="post" onsubmit="alert('You are about submit');"> <table><tr><td>Keyword: </td> <td><input type="text" name="txtKey" size=20 maxlenght=50></td></tr> </table> </form> </body>
b) Thẻ <meta> dạng tự động chuyển đến URL
Ðể tự động chuyến đến địa chỉ URL (địa chỉ đến một trạn Internet hay
mạng cục bộ) hay UNC (địa chỉ đến một tập tin trên mạng cục bộ) kế tiếp sau
khi trang Web được nạp lên với thời gian nhất định ta có thể khai báo trong thẻ
<meta>. Ta thực hiện khai báo như trong ví dụ sau:
Ví dụ 1.13. Tự động chuyển đến trang SaiGonInfotech.com sau thời gian 8 giây.
<html> <head>
<title>Welcome to PHP and MySQL</title> <META http-equiv=refresh content="8;URL=http://www.saigoninfotech.com">
</head> This page automatic refresh in 8 second ! <br> I will be come <b>www.saigoninfotech.com</b> </html>
c) Thẻ <meta> dùng xoá cache
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
25
Thông thường sau khi nạp trang Web nào đó lên trình duyệt, nội dung của
trang Web có thể được lưu vào trong bộ nhớ truy cập nhanh (cache). Có nghĩa là
sau khi đã duyệt một vòng các trang Web khác, ta có thể quya lại trang Web đã
truy cập trước đó, trình duyệt Web nạp rất nhanh vì chúng đã được lưu trong bộ
nhớ cache.
Ðối với tình huống này, nếu trang Web đó có thay đổi về cấu trúc chẳng
hạn, đôi khi vì một lý do nào đó mà ta không tìm thấy sự thay đổi. Ðể giải quyết
việc này, trong mạng cục bộ thường sử dụng thêm Proxy Server, người sử dụng
có thể xoá cache cho IP hay máy của ta. Tuy nhiên, khi phát triển ứng dụng
Web, có những trang Web ta cần phải xoá cache mỗi khi người dùng gọi nó, khi
đó ta sử dụng thẻ <meta> như sau:
Ví dụ 1.14. Xoá cache: <html> <head>
<title>Welcome to PHP and MySQL</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="cache-control" content="no-cache">
</head> Xoa Cache </body> </html>
1.3.13.2. Thẻ marque
Thẻ marque cho phép ta khai báo một chuỗi chuyển động theo nhiều hướng
khác nhau trên trang Web. Có 4 chiều di chuyển chuỗi tuỳ thuộc vào tham số
hương là UP, DOWN, BACK, RIGHT. Ta có thẻ khai báo như ví dụ sau:
Ví dụ 1.15. Thẻ marque
<html> <head> <title>Welcome to My Web</title> </HEAD> <BODY> <MARQUEE DIRECTION=RIGHT SCROLLDELAY=2 SCROLLAMOUNT=1> <font face="arial" size="1" color=#ff33ff> <BR>Ashley- Ana -Chanthaly - Kathleen- Lena<br></font> </marquee>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
26
<MARQUEE DIRECTION=UP SCROLLDELAY=2 SCROLLAMOUNT=1 STYLE="filter:wave(add=5, phase=1, freq=5, strength=20);"><font face="arial" size="1" color=#ff33ff> <BR>Ashley<BR>Ana<BR>Chanthaly<BR>Kathleen<BR>Lena </font> </marquee>
</BODY></HTML>
1.3.13.3. Thẻ <style>
Thẻ <style> cho phép ta định dạnh tất cả các nội dung trình bày trên trang
Web theo một kiểu nhất định định nghĩa trong thẻ <style>.
Ðể khai báo một thẻ <style> trên trang Web, ta khai báo nó trong thẻ
<head>. Và khi khi khai báo thẻ trong trang Web, ta có thể sử dụng một phần tử
trong trong thẻ <Style> bằng tham số class.
Ví dụ 1.16. Khai báo thẻ <style>
<html> <head> <title> Welcome to PHP and MySQL Book </title> <style> .text_normal{ COLOR: #6666FF; FONT-SIZE: 12px; TEXT-DECORATION: none; } .topic{ COLOR: #FF66cc; TEXT-DECORATION: underline; } .bg{ COLOR: #000000; } </style> </head> <body> <p align="justify" class="text_normal">An explanation of exactly what JavaScript is has to begin with Java.</p> <p align="justify" class="topic"> Typical Internet Connectivity Design</p> <p align="justify" class="bg">
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
27
With these security concerns now established.</p> </body>
Trong thực tế ta không cần phải khai báo thẻ <style> trên từng trang Web,
thay vào đó ta khai báo một tập tin có tên mở rộng là *.css, sau đó ta khai báo để
chèn tập tin này vào mỗi trang Web và sau đó sử dụng chúng như trên.
Ví dụ 1.18. Trang style.css .text_normal{ COLOR: #6666FF; FONT-SIZE: 12px; TEXT-DECORATION: none; } .topic{ COLOR: #FF66cc; TEXT-DECORATION: underline; } .bg{ COLOR: #000000; }
1.3.13.4. Thẻ <link>
Thẻ <link> dùng để link các trang. Sau khi khai báo các phần tử trong
trang style.css, ta có thể khai báo chúng trong trang Web bằng thẻ <link> để sử
dụng như sau:
Ví dụ 1.19. Thẻ <link>
<html> <head> <title> Welcome to PHP and MySQL Book </title> <link rel="stylesheet" type="text/css" href="../style.css"> </head> <body> <p align="justify" class="text_normal">An explanation of exactly what JavaScript is has to begin with Java.</p> <p align="justify" class="topic"> Typical Internet Connectivity Design</p> <p align="justify" class="bg"> With these security concerns now established</p> </body>
Chú ý: trang style.css phải đặt ở cùng thư mục chứa trang này.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
28
1.3.13.5. Thẻ <Script>
Trong trang Web muốn kiểm soát tất cả các hành động của người dùng, ta
cần khai báo và sử dụng một số phương thức và thuộc tính của Client Script hay
các phương thức do ta định nghĩa.
Client Script bao gồm hailoại kịch bản chính như VBScript hay JavaScript.
Ðể khai báo kịch bản trên trang Web ta sử dụng thẻ <script> như sau:
<script language=Javascript> //code here </script> <script language=VBscript> //code here <script>
Ngoài ra, trong trường hợp có nhiều phương thức do ta định nghĩa được sử
dụng chung trong nhiều trang Web, ta cũng có thể khai báo chúng trong một tập
tin có tên mở rông *.js hoặc *.vb. Sau đó, trong trang Web, ta có thể khai báo
chèn tập tin này và sử dụng như cách sử dụng của các khai báo trực tiếp.
1.4. CSS (Cascading Style Sheets)
1.4.1. Giới thiệu
CSS là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng
HTML, XHTML, XML, hay UML,… Trong phạm vi của môn học, bài giảng sẽ
giới thiệu ngắn ngọn về CSS mang tính định hướng giúp sinh viên tự đọc tài liệu
và nghiên cứu.
Một số đặc tính cơ bản của CSS
1. CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các
thuộc tính của các thẻ đó (như là font chữ, màu sắc, đường viền, kích
thước,…). CSS nó phá vỡ giới hạn trong thiết kế Web, bởi chỉ cần một
file CSS có thể cho phép quản lí định dạng và layout trên nhiều trang khác
nhau. Các nhà phát triển Web có thể định nghĩa sẵn thuộc tính của một số
thẻ HTML nào đó và sau đó nó có thể dùng lại trên nhiều trang khác.
2. Có thể khai báo CSS bằng nhiều cách khác nhau. Ta có thể đặt đoạn CSS
phía trong thẻ <head>...</head>, hoặc ghi nó ra file riêng với phần mở
rộng ".css", ngoài ra bạn còn có thể đặt chúng trong từng thẻ HTML riêng
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
29
biệt. Tuy nhiên tùy từng cách đặt khác nhau mà độ ưu tiên của nó cũng
khác nhau. Mức độ ưu tiên của CSS sẽ theo thứ tự sau.
1. Style đặt trong từng thẻ HTML riêng biệt
2. Style đặt trong phần <head>
3. Style đặt trong file mở rộng .css
4. Style mặc định của trình duyệt
Mức độ ưu tiên sẽ giảm dần từ trên xuống dưới.
3. CSS có tính kế thừa: giả sử rằng bạn có một thẻ <div id="vidu"> đã
được khai báo ở đầu file css với các thuộc tính như sau:
#vidu
{ width: 200px;
height:300px;
}
Ở một chỗ nào đó trong file css bạn lại khai báo một lần nữa thẻ <div
id="vidu"> với các thuộc tính.
#vidu {
width: 400px;
background-color: #CC0000;
}
Sau đoạn khai báo này thì thẻ <div id="vidu"> sẽ có thuộc tính:
#vidu {
width: 400px; /* Đè lên khai báo cũ */
height: 300px;
background-color: #CC0000;
}
1.4.2. Khai báo
Cú pháp của CSS được chia làm 3 phần. phần thẻ chọn (selector), phần
thuộc tính (property), phần giá trị (value).
selector {property: value}
+ Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bày.
Nó có thể là các tag HTML, class hay id.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
30
+ Property: Chính là các thuộc tính quy định cách trình bày.
+ Value: Giá trị của thuộc tính.
Ví dụ 1.20. Định dạng trình bày cho thẻ <p>
p {
text-align: center;
color: black;
font-family: arial
}
1.4.3. Một số thuộc tính hay sử dụng
a. Background: Định dạng màu nền/ảnh nền cho các thành phần trong
trang web:
-Thuộc tính background-color: Định dạng màu nền cho các thành phần
trong trang web.
body { background-color:cyan }
h1 { background-color:red }
- Thuộc tính background-image: Chèn ảnh nền vào các thành phần trên
trang web.
- Thuộc tính background-repeat: Lặp lại ảnh nền trên các thành phần trên
trang web.
+ repeat-x: Chỉ lặp lại ảnh theo phương ngang.
+ repeat-y: Chỉ lặp lại ảnh theo phương dọc.
+ repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.
+ no-repeat: Không lặp lại ảnh.
body {
background-image:url(logo.png);
background-repeat:no-repeat; }
- Thuộc tính background-attachment: Dùng để xác định tính cố định của
ảnh nền so với với nội dung trang web. Thuộc tính này có 2 giá trị:
+ scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc
định.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
31
+ fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị
này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web.
- Thuộc tính background-position: Dùng một cặp 2 giá trị để biểu diễn tọa
độ đặt ảnh nền. Có khá nhiều kiểu giá trị cho thuộc tính position. Như đơn vị
chính xác như centimeters, pixels, inches,… hay các đơn vị qui đổi như %, hoặc
các vị trí đặt biệt như top, bottom, left, right.
#test{
background-position:bottom left; }
Các thuộc tính trong nhóm background có thể viết rút gọn theo cấu trúc:
background:<background-color>|<background-image>
<background-repeat>|<background-
attachment> | <background-position>
Các thuộc tính không được đề cập sẽ nhận các giá trị mặc định.
Ví dụ 1.21. Thuộc tính background rút gọn
#test{
background:transparent url(logo.png)
no-repeat fixed right bottom;}
b. Font: Định dạng font chữ, gồm các thuộc tính
- Thuộc tính font-family: Chỉ định tên các loại font.
- Thuộc tính font-style: Chỉ định các kiểu in thường (normal), in nghiêng
(italic) hay xiên (oblique) lên các thành phần trang web.
- Thuộc tính font-variant: được dùng để chọn giữa chế độ bình thường và
small-caps của một font chữ.
- Thuộc tính font-weight: cách thức thể hiện của font chữ là ở dạng bình
thường (normal) hay in đậm (bold).
- Thuộc tính font-size: Chỉ định kích thước font.
Cấu trúc rút gọn khi khai báo thuộc tính font:
font: <font-style>|< font-variant>|<font-weight>|
<font-size> |< font-family>
Ví dụ 1.22. Khai báo thuộc tính Font cho thẻ h1
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
32
h1 { font-style: italic;
font-variant:small-caps;
font-weight: bold;
font-size: 35px;
font-family: arial,verdana,sans-serif; }
Hoặc
h1 {
font:italic bold 35px arial,verdana,sans-serif;
}
c. Các thuộc tính đối với Text
- Thuộc tính Color: Định màu chữ cho một thành phần nào đó trên trang
web.
body { color:#000 }
h1 { color:#0000FF }
- Thuộc tính text-indent: Cung cấp khả năng tạo ra khoảng thụt đầu dòng
cho dòng đầu tiên trong đoạn văn bản.
p { text-indent:30px }
- Thuộc tính text-align: Dùng để canh chỉnh văn bản cho các thành phần
trong trang web: left (canh trái – mặc định), right (canh phải), center (canh giữa)
và justify (canh đều).
- Thuộc tính letter-spacing: Dùng để định khoảng cách giữa các ký tự trong
một đoạn văn bản.
- Thuộc tính text-decoration: Dùng để thêm các hiệu ứng gạch chân
(underline), gạch xiên (line-through), gạch đầu (overline), và một hiệu ứng đặc
biệt là văn bản nhấp nháy (blink).
d. Pseudo-classes cho các liên kết:
Pseudo-classes cho phép xác định các hiệu ứng định dạng cho một đối
tượng liên kết ở một trạng thái xác định như khi liên kết chưa được thăm
(a:link), khi rê chuột lên liên kết (a:hover), khi liên kết được thăm (a:visited) hay
khi liên kết đang được kích hoạt – đang giữ nhấn chuột (a:active).
Ví dụ 1.23. Tạo hiệu ứng đối với đối tượng liên kết.
a {border:1px solid #000; font-size:14px }
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
33
a:link {color:#00FF00; }
a:hover {background-color:#00BFF3; color:#FF00FF;
font-size:1.2em; text-decoration:blink }
a:visited {background-color:#FFF568;
color:#FF0000; text-decoration:none}
a:active {color:#662D91; font-variant:small-caps}
e. Box model:
Box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian
bao quanh một thành phần. Nó bao gồm padding (vùng đệm), border (viền) và
margin (canh lề) và các tùy chọn (Như hình minh họa).
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
34
Ví dụ 1.23. Khai báo hình hộp cho thẻ <p>
p {width:200px;
margin:30px 20px;
padding:20px 10px;
border:1px solid
#000;
text-align:justify
}
- Thuộc tính margin: trong CSS cũng được dùng để canh lề cho cả trang web hay một thành phần web.
+ margin-top: canh lề trên
+ margin-bottom: canh lề dưới
+ margin-left: canh lề trái
+ margin-right: canh lề phải hoặc margin:<margin-top> | <margin-right> | <margin-
bottom> | <margin-left>
hoặc: margin:<value1>|< value2> với value 1 là giá trị margin-
top và margin-bottom và value2 là giá trị margin-left và margin-right.
Ví dụ 1.24
a. Canh lề cho trang web.
body {
margin-top:80px;
margin-bottom:40px;
margin-left:50px;
margin-right:30px;
border:1px dotted #FF0000}
Hoặc: body{
margin:80px 30px 40px 50px;
border:1px dotted #FF0000 }
b. Trang web có độ rộng 600px, tự căn vào giữa.
#wrapper {
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
35
width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
background: #ffffff url(wrapper-background.gif) 0
100% repeat-x;
}
- Thuộc tính Padding: Quy định khoảng cách giữa phần nội dung và viền của một đối tượng. Nó không ảnh hưởng tới khoảng các giữa các các đối tượng như margin. Cú pháp tương tự như margin.
+ padding-top: trên
+ padding-right: phải
+ padding-bottom: dưới
+ padding-left: trái hoặc
padding:<padding-top> | <padding-right> | <padding-
bottom> | <padding-left>
- Thuộc tính Border: Được dùng trong trang trí, đóng khung cho một đối tượng cần nhấn mạnh, phân cách các đối tượng giúp trang web trông dễ nhìn hơn,…
+ Thuộc tính border-width: Quy định độ rộng cho viền: thin (mảnh), medium (vừa), thick (dày), hay là một giá trị đo cụ thể như pixels.
+ Thuộc tính border-color: Quy định màu viền cho một đối tượng web
+ Thuộc tính border-style: Quy định kiểu viền thể hiện của một đối tượng web.
hoặc
border:<border-width> |<border-color> |<border-style>
f. Height & Width
- Thuộc tính width: Quy định chiều rộng cho một thành phần web.
- Thuộc tính max-width: Quy định chiều rộng tối đa cho một thành phần web.
- Thuộc tính min-width: Quy định chiều rộng tối thiểu cho một thành phần web.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
36
- Thuộc tính height: Quy định chiều cao cho một thành phần web.
- Thuộc tính max-height: Quy định chiều cao tối đa cho một thành phần web.
- Thuộc tính min-height: Quy định chiều cao tối thiểu cho một thành phần web.
Chú ý: Các thuộc tính max/min-width/height được sử dụng trong những trường hợp không chắc giá trị chính xác cho width, height cả một thành phần. Ví dụ, vùng chứa bài post của một forum có bề ngang 500px, ta có thể định max-width:500px cho phần hình ảnh trong phần đó để tránh những ảnh lớn bị lệch ra ngoài.
g. Float & Clear:
- Thuộc tính float: Dùng để cố định một thành phần web về bên trái hay bên phải không gian bao quanh nó. Đây là một thuộc tính rất cần thiết khi dàn trang, hiển thị văn bản thành, hay thực hiện việc định vị trí ảnh và text. Thuộc tính float có 3 giá trị:
+ Left: Cố định phần tử về bên trái.
+ Right: Cố định phần tử về bên phải.
+ None: Bình thường.
Nhìn vào hình minh họa trên chúng ta thấy là ban đầu trong box lớn có hai thành phần là Box B và phần Content. Lúc
đầu Box B nằm bên trên và Content nằm bên dưới, nhưng khi chúng ta đặt thuộc tính float cho Box B thì Box B bị cố định về bên trái và chừa lại khoảng trống bên trái nó. Còn phần Content thì vốn nằm bên dưới sẽ tự động tràn lên để lắp đầy khoảng trống do Box B tạo ra.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
37
Ví dụ 1.24a. Thực hiện float ảnh logo sang trái để phần nội dung bên dưới
tràn lên nằm cạnh logo..
#logo { float:left; }
#content{
width:300px;
}
- Thuộc tính Clear: Đi cùng với thuộc tính float, trong CSS còn có một thuộc tính là clear. Thuộc tính clear là một thuộc tính thường được gán vào các phần tử liên quan tới phần tử đã được float để quyết định hướng xử sự của phần tử này. Gồm các giá trị:
+ left (tràn bên trái),
+ right (tràn bên phải),
+ both (không tràn) và
+ none.
Ví dụ 1.25b. Thử nghiệm thuộc tính clear không cho tràn nội dung lên trên.
#logo { float:left; }
#content{
width:300px;
clear: both;
}
g. Position: Cửa sổ trình duyệt có thể coi như một hệ tọa độ và với position
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
38
ta có thể đặt một đối tượng web ở bất cứ vị trí nào trên hệ tọa độ này. Thuộc tính
position nhận các giá trị: absolute, relative và none.
Ví dụ 1.26a. Định vị một ảnh ở vị trí 70px cách đỉnh và 90px từ bên trái tài
liệu, chúng ta sẽ viết CSS như sau:
img { position:absolute; top:70px; left:90px }.
- Định vị tuyệt đối absolute: Định vị tuyệt đối là sự định vị mà trong đó các thành phần được định vị không để lại bất cứ một khoảng trống nào trong tài liệu. Các đối tượng đã định vị tuyệt đối sẽ dùng kết hợp với các thuộc tính top, left, right, bottom để xác định tọa độ.
- Định vị tương đối: Sự định vị tương đối cho một thành phần là sự định vị được tính từ vị trí gốc trong tài liệu. Các thành phần đã được định vị tương đối sẽ để lại khoảng không trong tài liệu
Ví dụ 1.26b. Đặt bốn ảnh ở bốn góc tài liệu bằng định vị tuyệt đối.
#logo1 { position:absolute; top:50px; left:70px }
#logo2 { position:absolute; top:0; right:0 }
#logo3 { position:absolute; bottom:0; left:0 }
#logo4 { position:absolute; bottom:70px;
right:50px }
1.5. JAVASCRIPT (JS)
1.5.1. Giới thiệu
Javasript là một ngôn ngữ lập trình được xây dựng sẵn trong các trình duyệt
web, là một trong các cách thức tốt nhất để bổ sung tính tương tác cho website.
Javasript có các đặc điểm:
− JavaScript là ngôn ngữ dưới dạng script có thể được gắn vào các file
HTML. Nó không được biên dịch (compile) mà được trình duyệt diễn
dịch (interpret).
− JavaScript là ngôn ngữ dựa trên đối tượng, có nghĩa là bao gồm nhiều
kiểu đối tượng, ví dụ đối tượng Math với tất cả các chức năng toán học.
Tuy vậy JavaScript không là ngôn ngữ hướng đối tượng như C++ hay
Java do không hỗ trợ các lớp hay tính thừa kế.
− JavaScript có thể đáp ứng các sự kiện như tải hay loại bỏ các form. Khả
năng này cho phép JavaScript trở thành một ngôn ngữ script động.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
39
− Javasript có thể làm việc khác nhau trên các trình duyệt khác nhau
Có thể nhúng JavaScript vào một file HTML theo một trong các cách sau
đây:
+ Sử dụng các câu lệnh và các hàm trong cặp thẻ <SCRIPT>
+ Sử dụng các file nguồn JavaScript
+ Sử dụng một biểu thức JavaScript làm giá trị của một thuộc tính
HTML
+ Sử dụng thẻ sự kiện (event handlers) trong một thẻ HTML nào đó
Trong đó, sử dụng cặp thẻ <SCRIPT>...</SCRIPT> và nhúng một file
nguồn JavaScript là được sử dụng nhiều hơn cả.
1.5.2. Khai báo biến
Trong JavaScript, biến có thể được lưu trữ với những kiểu dữ liệu khác
nhau (Number, String, Boolean).
- Khai báo biến:
var tenBien;
var tenBien="giaTri"; ->biến khởi tạo giá trị
- Phạm vi của biến: Khi một biến khai báo có thể là Local hoặc là Global
Một biến gọi là biến cục bộ (Local variable) khi chúng được khai báo trong
một hàm để phục vụ cho hàm đó. Một biến gọi là biến toàn cục (Glocal variable)
khi chúng được khai báo bên ngoài các hàm mà vẫn được sử dụng trong hàm.
Ví dụ 1.27. Khai báo và sử dụng biến. <html> <head> <title>Hien Thi De Mo</title> <script language="JavaScript"> var a;//bien Glocal var b=2;//bien Glocal var result=0;//bien Glocal function myFunction1(){ var b=10;// bien local result=a+b; document.write("Ket Qua cua ham myFunction1 la : "+result+"<br>"); } ////// function myFunction2(){ result=a+b; document.write("Ket Qua cua ham myFunction2 la : "+result); }
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
40
/// function calculate(){ var inputText_a=document.getElementById("so_a"); a=parseInt(inputText_a.value); myFunction1(); myFunction2(); } function init(){ var btSum_a_b=document.getElementById("btSum_a_b"); btSum_a_b.onclick=calculate; } window.onload=init; </script> </head> <body> <h1>Hay Nhap Gia Tri cua a:</h1> <table border=1> <tr> <td><b><u>So a:</u></b> <input type="text" id="so_a" size="20"/></td> </tr> <tr> <td align="center"><b><input type="button" id="btSum_a_b" value="Submit"/></td> </tr> </table> </body> </html>
1.5.3. Các toán tử trong JavaScript
- Phép gán: Toán tử gán (=) nhằm thực hiện việc gán giá trị của toán hạng
bên phải cho toán hạng bên trái. Bên cạnh đó JavaScript còn hỗ trợ một số kiểu
toán tử gán rút gọn.
Kiểu gán thông thường Kiểu gán rút gọn
x = x + y x + = y
x = x – y x - = y
x = x * y x * = y
x = x / y x / = y
x = x % y x % = y
- Phép toán so sánh: ==(bằng), != (khác), >, >=, <, <=
- Phép toán số học: Bên cạnh các toán tử cộng (+), trừ (-), nhân (*), chia (/)
thông thường, JavaScript còn hỗ trợ các toán tử sau đây:
var1% var2 Toán tử phần dư, trả lại phần dư khi chia var1 cho var2
- Toán tử phủ định, có giá trị phủ định toán hạng
var++ Toán tử này tăng var lên 1 (có thể biểu diễn là ++var)
var-- Toán tử này giảm var đi 1 (có thể biểu diễn là --var)
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
41
- Ghép chuỗi: Toán tử + được coi là kết hợp hai chuỗi,
- Phép toán Logic: JavaScript hỗ trợ các toán tử logic sau đây:
expr1 && expr2 Là toán tử logic AND, trả lại giá trị đúng nếu cả
expr1 và expr2 cùng đúng.
expr1 || expr2 Là toán tử logic OR, trả lại giá trị đúng nếu ít
nhất một trong hai expr1 và expr2 đúng.
! expr Là toán tử logic NOT phủ định giá trị của expr.
- Phép toán Bitwise:
& Toán tử bitwise AND, trả lại giá trị 1 nếu cả hai bit cùng là 1.
| Toán tử bitwise OR, trả lại giá trị 1 nếu một trong hai bit là 1.
^ Toán tử bitwise XOR, trả lại giá trị 1 nếu hai bit có giá trị khác nhau
<< Toán tử dịch trái.
>> Toán tử dịch phải
Một số toán tử dịch chuyển bitwise rút gọn:
Kiểu bitwise thông thường Kiểu bitwise rút gọn
x = x << y x << = y
x = x >> y x - >> y
x = x >>> y x >>> = y
x = x & y x & = y
x = x ^ y x ^ = y
x = x | y x | = y
1.5.4. Cấu trúc các lệnh
- Cấu trúc rẽ nhánh: if ... else: Câu lệnh này cho phép bạn kiểm tra điều
kiện và thực hiện một nhóm lệnh nào đấy dựa trên kết quả của điều kiện vừa
kiểm tra
if ( <điều kiện> )
{
//Các câu lệnh với điều kiện đúng
}
else
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
42
{
//Các câu lệnh với điều kiện sai
}
- Cấu trúc lựa chọn switch ... case: Câu lệnh này cho phép kiểm tra điều
kiện và thực hiện một nhóm lệnh nào đấy dựa trên kết quả của điều kiện vừa
kiểm tra.
switch ( <biến> )
{
case value1:
statements1;
break;
case value2:
statements2;
break;
...
case value n-1:
statements(n-1);
break;
default:
statements(n);
}
- Vòng lặp for: Lặp khi điều kiện đúng
for (initExpr; <Điều kiện> ; incrExpr)
{
//Các lệnh thực hiện trong vòng lặp
}
- Vòng lặp while: Vòng lặp while lặp khối lệnh chừng nào <điều kiện> còn
được đánh giá là đúng
while (<điều kiện>)
{
//Các câu lệnh thực hiện trong khi lặp
}
- Lệnh Break: Dùng để thoát khỏi vòng lặp gần nhất.
- Lệnh continue: Dùng để bắt đầu một vòng lặp mới.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
43
- Vòng lặp for...in: Câu lệnh này thường được sử dụng để lặp tất cả các
thuộc tính (properties) của một đối tượng.
for (<variable> in <object>)
{
//Các câu lệnh
}
- Lệnh new: Để tạo ra một thể hiện mới của một đối tượng.
objectvar = new object_type ( param1
[,param2]... [,paramN])
Ví dụ 1.28.Ví dụ sau tạo đối tượng person có các thuộc tính firstname,
lastname, age, sex. Chú ý rằng từ khoá this được sử dụng để chỉ đối tượng trong
hàm person. Sau đó ba thể hiện của đối tượng person được tạo ra bằng lệnh new <html> <head> <TITLE>New Example </TITLE> <script language ="javascript" type="text/javascript"> function person(first_name, last_name, age, sex){ this.first_name=first_name; this.last_name=last_name; this.age=age; this.sex=sex; } person1= new person("Thuy", "Dau Bich", "23", "Nam"); person2= new person("Chung", "Nguyen Bao", "24", "Nam"); person3= new person("Binh", "Nguyen Nhat", "24", "Nữ"); person4= new person("Hoàn", "Đỗ Văn", "24", "Nam"); document.write("1. "+person1.last_name+" " + person1.first_name + "<BR>" ); document.write("2. "+person2.last_name +" "+ person2.first_name + "<BR>"); document.write("3. "+ person3.last_name +" "+ person3.first_name + "<BR>"); document.write("4. "+ person4.last_name +" "+ person4.first_name+"<BR>"); </script> </head> <body> </body>
</html>
1.5.5. Hàm trong JavaScript
Trong JavaScript ta dễ dàng nhận thấy có 2 loại Hàm
+ Các Hàm JavaScript đã hổ trợ sẳn (Built-in Functions)
+ Ngoài ra người dùng có thể định nghĩa ra các hàm để phục vụ cho
mục đích riêng (User-defined Functions).
- Một số hàm JavaScript (Built-in Functions):
+ isNaN(var): Kiểm tra một biến có phải là số hay không?
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
44
+ parseInt(var): Chuyển một chuổi sang số nguyên.
+ parseFloat(var): Chuyển một chuổi sang số Float
+ eval(""): Định giá trị cho các statement hoặc expression được lưu trữ.
+ alert(“…”): Dùng để gởi một thông báo cho User
+ prompt("string_a","string_b"): Dùng để tạo ra một dialog box tương
tác với User, có 2 nút là OK ,CANCEL
� string_a: ghi một nhãn lên dialog box
� string_b:giá trị mặc định trong text box
- Hàm do người dùng tự định nghĩa (User-defined Functions)
function TenHam(bien_1,bien_2,...)
{ // Thân hàm
…
return value;
}
Hàm có thể chứa hoặc không chứa tham số. Có 2 cách để các hàm khi cần
ta sẽ sử dụng chúng.
� Viết trực tiếp hàm vào cặp thẻ <script> function </script>.
� Viết riêng ra một file (lưu chúng dưới dạng file.js) để gọi chúng
khi cần.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
45
Chương 2. NGÔN NGỮ PHÁT TRIỂN ỨNG DỤNG WEB
2.1. Giới thiệu một số ngôn ngữ kịch bản phía server:
Lập trình web là xu thế phát triển của công nghệ phần mềm đang thu hút
rất nhiều nhà đầu tư cũng như người dùng web. Cùng với sự hỗ trợ của các hệ
quản trị ta có thể kết hợp chúng với một kịch bản trên trình chủ như PHP, JSP,
Perl, ASP.Net,…
PHP là một kịch bản trên phía trình chủ, có các phiên bản trên hệ điều
hành window và Linux. PHP thường kết hợp với hệ quản trị CSDL MySQL phù
hợp với các doanh nghiệp vừa và nhỏ.
JSP là một kịch bản trên trình chủ với nền tảng dựa trên ngôn ngã lập
trình Java. Còn ASP.Net dựa trên nền tảng ngôn ngữ lập trình .NET.
2.2.Tổng quan về ngôn ngữ ASP.NET(Active Server Page. Net):
2.2.1. Giới thiệu ASP và ASP.NET
ASP (Active Server Page) được Microsoft giới thiệu vào năm 1996 và trở
lên thông dụng từ ngày đó. ASP là một kịch bản trên trình chủ (Server Script) và
hai ngôn ngữ lập trình chính được sử dụng cho ASP là VB6.0 và Visual J++6.0
thuộc bộ Visual Studio 6.0.
Đến nay .Net Framework và các ứng dụng của nó đã và đang tạo ra cuộc
cách mạng kỹ thuật trong công nghệ tin học. ASP.NET là một nâng cấp tuyệt
vời của Microsoft nhằm thay thế công nghệ ASP. ASP.Net được thiết kế tương
thích với các phiên bản trước đó, ta chỉ cần thay đổi rất ít khi chuyển ứng dụng
từ ASP sang ASP.Net. Điểm đặc biệt là ta có thể cài đặt ASP.Net cùng với ASP
trên máy chủ Windows 2000 mà không cần thay đổi cấu hình của ứng dụng ASP
cũ, ASP.Net và ASP hoạt động độc lập với nhau.
Trước hết ta tìm hiểu về ASP, ASP là một mô hình tối ưu và dễ sử dụng
với nhiều ứng dụng Web trên nền Windows, kể cả các ứng dụng web có quy mô
lớn. Tuy nhiên, nó còn có một số điểm yếu như:
• Mã ASP viết trộn lẫn với mã HTML làm cho cấu trúc trang
không rõ ràng.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
46
• Trang ASP phải thông dịch lại toàn bộ khi người sử dụng triệu
gọi chúng.
• ASP sử dụng đối tượng ADO để kết nối tới CSDL của Microsoft
như Microsoft Access, Microsoft SQL Server, .v.v…tính bảo mật
chưa cao và không thể kết nối đến CSDL định dạng XML.
Xuất phát từ những đặc điểm trên Microsoft đã đưa ra một công nghệ mới
cho các lập trình viên trong môi trường web đó là ASP.NET. ASP.Net là kỹ
thuật lập trình và phát triển ứng dụng web ở phía Server (Server-side) dựa trên
nền tảng của Microsoft .Net Framework với các ưu điểm nổi bật so với ASP là:
• Tăng hiệu quả lập trình thông qua các đặc điểm:
o Dễ dàng lập trình: ASP.Net giúp ta phát triển và triển khai
các ứng dụng về mạng trong một thời gian rất ngắn vì nó
cung cấp cho ta một kiểu mẫu lập trình dễ dàng và gọn gàng
nhất. Ngoài ra, ASP.Net còn làm việc với mọi browser hiện
nay như Internet Explorer, Nestcape, Opera,.v.v… mà không
cần chuyển qua chuyển lại các mã nguồn như trước.
o Lựa chọn ngôn ngữ đơn giản: không giống như ASP kiểu cổ
điển chỉ giới hạn với VBScript và Jscript, ASP.Net cho phép
lựa chọn một trong các ngôn ngữ lập trình mà ta yêu thích:
Visual Basic.Net, J#, C#,…
o Hỗ trợ công cụ tuyệt vời: mặc dù ta có thể sử dụng Notepad
để triển khai các trang ASP.Net nhưng Visual Studio.Net
giúp năng suất triển khai mạng thêm phần hiệu quả ví dụ như
có thể quan sát các kế hoạch dễ dàng hơn khi phác hoạ các
thành phần của nền Windows. Thêm nữa còn hỗ trợ trong
việc phát hiện và loại bỏ các lỗi sai một cách rất thuận lợi
trong khi phát triển các ứng dụng về mạng.
o Nhờ nền tảng vững vàng và tài nguyên phong phú của .Net
Framework với hơn 5000 class (lớp) bao gồm XML, Data
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
47
access, File upload… nên việc thiết kế các đặc tính trong một
ứng dụng trở nên dễ dàng và nhẹ nhàng hơn.
• Tăng khả năng thực hiện và tính ổn định: ASP.Net chạy nhanh hơn
ASP cổ điển gấp 5 lần, hơn nữa ASP.Net có khả năng lưu trữ một
kết quả chung trong bộ nhớ của trang để gửi giải đáp cho cùng một
yêu cầu từ nhiều khách hàng khác nhau và nhờ đó tiết kiệm thời
gian và tăng hiệu suất làm việc.
• Dễ dàng triển khai: ASP.Net đơn giản hoá việc triển khai ứng dụng
mạng do đó biến việc triển khai ứng dụng trở nên dễ dàng và thuận
lợi hơn trước kia vì bây giờ chỉ cần sao chép và lưu trữ ở Server
chứ không phải chạy chương trình “regsrv32” để đăng ký bất kỳ
thành phần nào cả, khi lưu trữ những yếu tố phụ cần thiết cho việc
lập trình hay bố trí các ứng dụng ta chỉ cần lưu trữ nó vào trong hồ
sơ dưới dạng XML là đủ.
• ASP.Net cho phép ta tự động cập nhật các thành phần đã biên dịch
mà không cần phải khởi động lại các Web Server.
2.2.2. Giới thiệu .NET FRAMEWORK
.NET Framework là cơ sở hạ tầng bằng việc cung cấp cho người dùng cách
thức sử dụng đa ngôn ngữ lập trình để truy cập thông tin, file, hoặc các chương
trình của họ ở mọi lúc mọi nơi trên mọi cấu hình phần cứng và thiết bị.
Tâm điểm của .NET Framework là CLR (Common Language Runtime) và
tập phân cấp các bộ thư viện hợp nhất và ASP.NET. CLR quản lý sự thực thi
của đoạn mã .NET và cung cấp các dịch vụ tạo quá trình phát triển chương trình
ứng dụng dễ dàng hơn. Các trình biên dịch và các công cụ làm cho chức năng
của thư viện thực thi runtime trở nên phong phú và hiệu quả hơn.
Ngoài ra, dịch vụ Web trong .NET Framework cho phép ta phát triển ứng
dụng Internet hay Intranet trong hiện tại lẫn tương lai bằng bất cứ ngôn ngữ lập
trình và truy cập đến hệ thống bất kỳ. CLR cung cấp sự dễ dàng cho các nhà
phát triển Visual Basic .NET khi thiết kế và xây dựng ứng dụng mà những đối
tượng của chúng có thể tương tác với các đối tượng được viết bằng ngôn ngữ
khác.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
48
Sự tương tác này có thể bởi vì các trình biên dịch ngôn ngữ và các công cụ
phát triển hướng đến sử dụng CLR với một hệ thống kiểu dữ liệu chung định
nghĩa bởi thư viện runtime như hình2.1.
Ta có thể tham khảo tất cả những thành phần cấu thành trong .NET
Framework như hình 2.1, mức trên cùng là trình biên dịch Visual Basic hoặc các
trình biên dịch của các ngôn ngữ khác trong bộ Visual Studio .NET.
Trong hình 2.1, cũng cho biết ta có thể sử dụng Visual Studio.NET kết hợp
với môi trường phát triển (Intergrated Development Environment - IDE) để lập
trình ASP.NET. Visual Basic, C ++ , C # .v.v...
.NET Framework còn kết hợp mô hình lập trình đơn giản, dễ sử dụng với
các giao thức mở và biến đổi được của Internet.
Hình 2.1. Kiến trúc .NET Framework
2.2.3. Biên dịch trang ASPX
Trang ASP.Net được biên dịch trước. Thay vì phải đọc và thông dịch mỗi
khi trang web được yêu cầu, ASP.Net biên dịch những trang web động thành
những tập tin DLL mà Server có thể thi hành nhanh chóng và hiệu quả. Yếu tố
này là một bước nhảy vọt đáng kể so với kỹ thuật thông dịch của ASP.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
49
Các trang ASP.NET có đuôi là *.apsx. Khi người sử dụng lần đầu tiên triệu
gọi trang ASPX, thì IIS triệu gọi trình biên dịch dịch trang ASPX (trang Code-
behind) thành tập tin Class. Tiếp theo, tập tin Class này được biên dịch thành tập
tin DLL. Cuối cùng, trang DLL thực thi và trả về kết quả cho người sử dụng
(xem hình 2.2).
Trong trường hợp người sử dụng triệu gọi lại trang ASPX, thì tập tin DLL
sẽ được gọi và thực thi để trả kết quả về cho người sử dụng. Trang ASPX sẽ chỉ
biên dịch lại tập tin DLL khi chúng tìm thấy cấu trúc của nó thay đổi hoặc chúng
không tìm thấy tập tin DLL tương ứng.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
50
Hình 2.2. Quá trình biên dịch trang ASP.NET
2.2.4. Giới thiệu công cụ lập trình
Ta có thể sử dụng trình soạn thảo Notepad, các công cụ cho phép soạn thảo
dạng văn bản, Visual Studio.NET. Tuy nhiên, bằng việc sử dụng Visual Web
Developer trong bộ Visual Studio.NET, ta có thể tạo một Web site để hiển thị
giao diện người sử dụng, tiến trình dữ liệu, và cung cấp rất nhiều các câu lệnh,
các tính năng của một ứng dụng chuẩn với Microsoft Windows đưa ra.
Trước khi tạo một ASP.NET Web site đầu tiên, ta cần xem xét kiểu môi
trường mà ta muốn chạy Web site trên đó. Một sự cải tiến hữu dụng trong Visual
Studio 2005 là ta không cần phát triển Web site trên một máy tính được cấu hình
đầy đủ để hoạt động giống như một Web server. Trong Visual Studio .NET
2002 và 2003, hệ thống phát triển cần có máy chủ hoặc có truy xuất tới Web
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
51
server đang chạy trên Microsoft Windows 2000, Microsoft Windows XP
Professional, hoặc Microsoft Windows Server 2003 đã cài đặt Internet
Information Services (IIS), Microsoft FrontPage 2000 Server Extensions, và
.NET Framework libraries. Điều này có nghĩa là nếu ta chạy trên Microsoft
Windows XP Home Edition, ta không thực hiện được vì Windows XP Home
Edition không được cung cấp IIS và the FrontPage 2000 Server Extensions.
Trong Visual Studio 2005, ta có thể tạo và chạy Web site trên một trong 3 cách
sau:
• Trên chính máy tính của bạn (the local file system)
• Một HTTP server chứa IIS và các thành phần có liên quan
• An FTP site (a remote file server)
Lựa chọn thứ nhất sẽ rất đơn giản, bởi vì nó không cần phải thêm phần
cứng hay một phần mềm nào. Nếu có Visual Studio 2005 và .NET Framework,
ta có thể tạo Web sites. Thêm vào đó, khi ta phát triển Web site trên local file
system, tất cả các Web site files được lưu trữ trên một vị trí. Khi đã kết thúc quá
trình test ứng dụng ta có thể triển khai các file đó trên Web server ta lựa chọn.
Nếu muốn phát triển Web site trên Web server, sử dụng Control Panel kiểm
tra xem IIS và the FrontPage 2000 Server Extensions đã được cài trên hệ thống
hay chưa. (Click the Add Or Remove Programs category in Control Panel, click
Add/Remove Windows Components, và sau đó tìm các chương trình trên). Tiếp
theo đó bạn xây dựng một thư mục ảo ánh xạ đến website của bạn và thực hiện
triệu gọi các trang web thông qua thư mục ảo đó một cách bình thường.
a) Tạo một Web site:
1. Khởi động Visual studio, File\ New Web site.
Lệnh này dùng để khởi động Visual Web Developer và cho Visual Studio
sẵn sàng để xây dựng một Web site. Ta thấy hộp thoại New Web Site như
hình 2.3.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
52
Hình 2.3. Cửa sổ New web site
2. Trong hộp thoại New Web Site, chọn ASP.NET Web Site và ngôn ngữ
Visual Basic .
3. Click File System trong hộp Location, click Browse, và sau đó chỉ định
đường dẫn đến thư mục lưu trữ.
4. Click OK để hoàn thành các thay đổi.
Visual Studio nạp Visual Web Developer và tạo một Web page. Mỗi một
Web page chứa hai phần:
• Một Web Forms page, chứa HTML và các điều khiển để tạo giao
diện người sử dụng.
• file code-behind, chứa các module code, chứa program code trong
Web Forms page.
Tương ứng với nó là hai file được mặc định là: file Default.aspx chứa giao
diện người sử dụng và file Default.aspx.vb chứa phần code cho Web page này.
Ngoài web pages, web sites có thể chứa các modules (.vb files), HTML
pages (.htm files), configuration information (a Web.config file), global Web
application information (a Global.asax file),và các thành phần khác. Ta có thể sử
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
53
dụng Web Page Designer và Solution Explorer để chuyển đổi giữa các thành
phần này một các nhanh chóng và hữu hiệu.
Trong cửa sổ Web Page Designer, HTML source code cho Web page được
hiển thị trên tab Source. Tab Design dùng để hiển thị Web page như khi trên
Web browser. Khi tab Design được chọn thì một trang trắng xuất hiện đó là kết
quả của phần code khởi tạo. Ta có thể thiết kế thêm các điều khiển và điều chỉnh
các đối tượng trên trang. Ta sử dụng trang *.aspx.vb để viết mã code cho trang.
b) Thêm web page
Để thêm một trang vào web site ta thực hiện các bước sau
1. Click vào menu Website chọn Add New Item (Hoặc trong cửa sổ
Solution Explorer, right click, và chọn Add New Item). Xuất hiện cửa
sổ Add New Item như hình 2.4.
Hình 2.4. Cửa sổ Add New Item
2. Trong cửa sổ này ta thực hiện các lựa chọn
- Mục Templates: Chọn Web form
- Mục Name: Đặt tên cho trang
- Mục Language: Chọn ngôn ngữ lập trình
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
54
- Chọn: Place code in separate file mặc định là tách trang này ra làm 2 file
như đã mô tả trên. Trong trường hợp không tách ta có thể bỏ lựa chọn này.
Khi bỏ lựa chọn này thì HTML và các điều khiển để tạo giao diện người sử
dụng cùng với code nằm trên cùng một file.
2.3. Nền tảng của ASP.NET
2.3.1. Mô hình trang web
Một trang Web bao gồm hai phần MarkUp Code và Programming code.
Khi duyệt một trang ta thấy phần layout của nó trên trình duyệt. Phần layout
được thiết kế bởi các thẻ markup. Programming code được viết cho sự điều
khiển sự tương tác của người sử dụng và một số sự kiện.
MarkUp code và Programming code có thể ở trên cùng một trang hoặc trên
các trang khác nhau. Dựa vào đó người ta chia Web Page model ra làm hai dạng
mô hình:
� Single File Page:
� Code Behind Page:
Cấu trúc cơ bản của file .aspx cho cả hai mô hình bao gồm các chỉ dẫn
trang, script code và user interface code
a. Single File Page
� Ưu điểm:
o Dễ bảo trì khi MarkUp code và Programming trên cùng một
file.
o Dễ triển khai
o Dễ đổi tên
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
55
� Nhược điểm:
o Single file page không được tạo trực tiếp từ VS IDE
o Có nhiều hạn chế trong việc hỗ trợ Coding
o Các Event Handler không được tự động tạo khi double click
trên các điều khiển sự kiện.
b. Code Behind Page:
Trong môi trường lập trình ứng dụng Web, thường khó khăn để tách ra
nhiều phần của quá trình xử lý. Khi viết một trang Web, ta cũng phải quan tâm
đến giao diện, nội dung, quá trình xử lý, tốc độ truy cập và làm thế nào cho quá
trình bảo trì đơn giản và dễ cập nhật,...
Một trong bước tiến nổi bật của ASP.NET nội dung và mã tách ra thành hai
phần, phần mã được gọi là Code-Behind. Như vậy, nó yêu cầu nhà lập trình làm
việc trên hai tập tin khác nhau, nhưng sự sắp xếp và phân chia ra thành hai phần
như vậy giúp các nhà lập trình có cái nhìn chi tiết, rõ ràng,.v.v...
Mã Code-Behind được viết dưới dạng một lớp (Class) lưu trong một file
định dạng bởi .NET Framework, ví dụ như xây dựng lớp mycodebehind lưu
trong file mycodebehind.vb.
Khi tạo mới một trang, VS 2005 IDE cung cấp lựa chọn cho phép hai loại
Code trên hai trang khác nhau. Nếu lựa chọn này được chọn thì IDE sẽ tạo ra hai
file MarkUp file và Class file.
MarkUp file có đuôi mở rộng .aspx chứa các markUp code. Class file là
một file Code Behind chứa logic lập trình, có đuôi mở rộng .aspx.cs (hoặc
.aspx.vb,…). MarkUp file chứa tham chiếu đến Code Behind file, nên hai file
này được liên kết với nhau.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
56
Khi một web page được tạo thì nó được dẫn xuất từ lớp Page thuộc
namespace "System.Web.UI“, được kế thừa các thuộc tính, các phương thức và
các sự kiện của lớp này.
Page.Title = "Login"
Page.ErrorPage = "ErrorPage.aspx“
....
File Code Behind tự động tạo Partial Class. Từ khóa Partial chỉ định lớp
này không chứa đầy đủ các thành phần mà nó được kế thừa từ lớp Page.
2.3.2. Các chỉ dẫn
Các chỉ dẫn là các câu lệnh mô tả ứng dụng ASP.NET được biên dịch như
thế nào. Các chỉ dẫn được bao trong cặp <% %> và thuộc file .aspx.
Chỉ dẫn Mô tả Ví dụ
@Page Định nghĩa các thuộc tính cho Web page
<%@ Page Language="C#" Title=“My web Page" %>
@Import Import một không gian miền vào trang. Cho phép sử dụng tấ cả các Classes và interfaces của không gian miền này.
<%@ Import Namespace="System.Data" %>
@Assembly Liên kết đến một Assemply cho trang hoặc điều khiển nào đó.
<%@ Assembly Name=“MyAssembly" %>
@Master Định nghĩa các thuộc tính của trang Master.
<%@ Master Language="C#" %>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
57
@Reference Tham chiếu đến một trang khác. <%@ Reference Page="~/Home.aspx" %>
Khi tạo một trang, bạn có thể khai báo gán một số thuộc tính của Page. Một
trong số đó là một phần của chỉ dẫn @Page và @Import chỉ dẫn. Mỗi loại chỉ
dẫn này có một tập các thuộc tính mà sử dụng để điều khiển Page được khai báo
trên cùng một dòng.
a. Chỉ dẫn @Page
Chỉ dẫn @Page dùng để gán một thuộc tính (trong bảng 2.5) chỉ định của
trang Web Forms để truyền cho trình biên dịch và nó có hiệu lực trên trang được
tạo ra. Chỉ dẫn @Page cùng với các chỉ dẫn khác có thể khai báo ở vị trí bất kỳ
trên trang. Tuy nhiên, tốt nhất là nên khai báo đầu tiên của trang như sau: <%@ Page Language="VB" AutoEventWireup="false"
CodeFile="vidu2_8.aspx.vb" Inherits="vidu2_8" %>
Bảng 2.5. Các thuộc tính khai báo trong @Page
Biến cố Diễn giải Mô tả
ClassName Tên Class Kế thừa một Classname hợp lệ, ví dụ bạn
có thể khai báo sử dụng Class.
CodePage Số hợp lệ Gán CodePage của phúc đáp nếu nó khác
với Web Server.
EnableSessionState
Session
Boolean,
ReadOnly
Cho phép Page truy cập, ReadOnly cho
phép truy cập nhưng không thể thay đổi.
ErorrPage URL Trỏ đến URL khi không thể kiểm soát
ngoại lệ.
Language VB,C#,.v.v... ngôn ngữ hỗ trợ trong .NET Framework.
b) Chỉ dẫn @Import
Chỉ dẫn này cho phép bạn khai báo thêm các không gian tên miền vào
Page. Khi khai báo chỉ dẫn @Import, tất cả các Class của không gian tên sẽ có
sẵn trong khi lập trình.
Ðể khai báo chỉ dẫn @Import, bạn có thể sử dụng cú pháp sau: <%@ import Namespace="System.Threading" %> <%@ import Namespace="System.IO" %>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
58
Mỗi không gian tên bạn sử dụng một khai báo chỉ dẫn @Import. Nếu có
nhiều không gian tên cần thêm vào Page bạn sẽ sử dụng nhiều khai báo
@Import.
Tuy nhiên, bạn chỉ cần khai báo @Import với các không gian tên mà .NET
Framework tuỳ chọn. Ðiều này có nghĩa là những không gian tên sau đây tự
động thêm vào trang.
System
System.Collection.Specialized
System.IO
System.Text.RegularExpression
System.Collections
System.Configuration
System.Text
System.Web
System.Web.Security
System.Web.UI
System.Web.UI.WebControls
System.Web.SessionState
System.Web.UI.HtmlControls
2.3.3. Điều khiển sự kiện trong Web page
Sự kiện (Event) là một hành động được nổ trong khi ứng dụng đang chạy.
Ví dụ như Click lên nút lệnh hay nhấn một phím nào đấy là các sự kiện. Mỗi sự
kiện được điều khiển bởi một khối code được gọi là Event Handler.
ASP.NET là một mô hình lập trình sự kiện bởi vì mọi thứ xuất hiện trên
trang web là sự đáp lại của một số sự kiện. ASP.NET bao gồm các Event
Handler trong code lập trình phía server và cung cấp các kỹ thuật điều khiển các
sự kiện bằng tay hoặc tự động.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
59
Mỗi một Web page có một vòng đời, mỗi bước trong vòng đời xuất hiện
một sự kiện. Các sự kiện được xử lý tự động bởi các Event Handler tương ứng.
• Init: Là sự kiện đầu tiên trong vòng đời của trang web. Sự kiện init
thường dùng khởi tạo tất cả các điều khiển trong trang web. Sự kiện này
cũng còn được dùng đối với các biến cần được khai báo và khởi tạo trước
khi xử lý Web page.
Protected Sub Page_Init(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Me.Init
Response.Write("Page initialization event occur")
End Sub
• Load: Là sự kiện nổ ngay sau sự kiện Init. Thường dùng để đọc và
Update các điều khiển.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Me.Load
Response.Write("Page load event occur")
End Sub
• PreRender: Là sự kiện được kích nổ trước khi trang được submit (đệ
trình) cho người sử dụng.
Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
60
Response.Write("Page prerender event occur")
End Sub
• UnLoad: Là sự kiện nổ sau khi trang được submit cho người dùng.
2.3.4. POSTBACK
Trong tiến trình xử lý PostBack là thông tin được submit từ Browse đến
Server. Khi người dùng Submit thông tin bằng cách click vào một Button hoặc
chọn một item trên lưới thì Browse sẽ chuyển thông tin này đến server.
Khi người dùng tương tác với Web Page bằng cách phát sinh một sự kiện
thì trang đó được gửi quay trở lại Server. Server xử lý code hiện tại trong các
event handlers và sau đó trang này được tạo lại. Như vậy trang này lại trải qua
một vòng đời mới với các sự kiện Init() và Load ()
Thuộc tính IsPostBack dùng để kiểm tra Web Page được Request lần đầu tiên hay là kết
quả của một PostBack. Nếu trang đó được Request lần đầu tiên thì thuộc tính IsPostBack
nhận giá trị false. Nếu trang đó được submit quay trở lại từ Server thì thuộc tính IsPosstBack
nhanạ giá trị True.
Ví dụ minh họa:
Protected Sub txtSubmit_Click(ByVal sender As Object, ByVal
e As System.EventArgs) Handles txtSubmit.Click
txtName.Text = "Hello"
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e
As System.EventArgs) Handles Me.Load
If Not IsPostBack() Then
Response.Write("Welcome ...")
End If
End Sub
2.4. Master Page
Một tiện ích của website là sự nhất quán về trang, và hiếm khi ta tìm thấy
trên Internet mà các layout khá khác nhau. Chúng có các đặc điểm sau:
• Có chung một phần header và hệ thống menu cho toàn bộ site
• Thanh bar cạnh bên trái của trang thường dùng lựa chọn điều
hướng các trang trong site.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
61
• Cuối trang là thông tin copyright và menu phụ cho việc contacting
với webmaster
ASP.NET Master Pages giúp chúng ta tạo một template hoặc một layout
thống nhất cho nhiều trang trong một ứng dụng Web. Chúng ta có thể định nghĩa
các tính năng chuẩn của một ứng dụng web trong trang Master. Sau đó, các tính
năng này có thể được lặp lại trên tất cả hoặc một nhóm các trang bằng cách kế
thừa trang Master này.
Trang Master có đuôi mở rộng .master và được nhận dạng bằng dẫn xuất
@Master. Mỗi trang Master bao gồm hai phần:
+ Master Page
+ Content Pages
Hình 3.34. Master Page và Content Page
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
62
• Master page định nghĩa layout được sử dụng bởi tất cả các trang
dựa trên Master. Nó là gốc cho toàn bộ điều khiển trên layout, chỉ
định độ lớn của header như thế nào trên mọi trang, vị trí mà các
tính năng điều hướng được thay thế và text được hiển thị ở cuối
mỗi trang. Master page chứa một vài nội dung sẵn có của mỗi trang
trên site, vì vậy standard copyright footer text có thể được định
nghĩa ở đây, cùng với vị trí chính của site là logo tại vị trí đỉnh của
site. Chỉ một lần các tính năng chuẩn của Master được định nghĩa,
sau đó ta có thể add các placeholders - tên một phạm vi trên trang
mà định nghĩa vị trí mà nội dung thay đổi từ trang này đến trang
khác. Có 3 phần tử trong một trang Master:
+ Content Placeholders: Là vùng có thể thay đổi được trên trang
Master và ta có thể tùy biến được cho mỗi trang. Một trang
Master có thể có nhiều hơn một Content Placeholders. Điều
khiển ContentPlaceholders cho phép tùy biến nội dung.
+ Non editable regions: Cho phép chúng ta chèn các phần tử
chung cho các trang như Logos công ty, menu, copyright,…
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
63
+ HTML Elements: Chúng ta có thể dùng HTML table để thiết
kế Layout, thẻ img để hiển thị logo, các chuỗi tĩnh hiển thị
copyright và các điều khiển server,…
• Content page là một trang dựa trên Master, và là vị trí mà ta có thể
add thêm nội dung cho mỗi trang trên site mà thay đổi từ trang này
đến trang khác. Content page chứa text, HTML, và controls trong
thẻ <asp:content> tags. Khi Content page được Request, nội dung
của nó được phối hợp với một bản copy của Master page, với nội
dung riêng được định nghĩa trên vị trí Content page trong chỉ định
của placeholder trên Master page. Sau đó toàn bộ gói sẽ được
chuyển giao đến browser, như hình 3.34.
* Creating Master Page
Master page được tạo trong VWD’s Solution Explorer bằng việc right-click
lên gốc của site, chọn Add Item, và chỉ định kiểu là Master Page.Với mặc định,
tên của một Master page mới là MasterPage.master và được lưu trên vị trí gốc
của site. Master page có 3 phần:
- Phần thứ nhất là các thẻ cơ sở và chỉ định của trang (như là chỉ định
Master, DOCTYPE, xmlns, html, và head tags) mà được yêu cầu bởi
bất cứ diễn tả trang nào. Nội dung này được chèn chỉ một lần trên
Master page,để giảm sự lặp lại. DOCTYPE và xmlns đề cập đến vị
trí của server có thể tìm kiếm định nghĩa các thẻ sử dụng trong trang.
Chú ý rằng các thẻ này sẽ không xuất hiện trong Content pages:
<%@ master language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="PageHead" runat="server">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title> My Website </title>
<link rel="stylesheet" type="text/css" href="site.css" runat="server" />
</head>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
64
- Phần thứ hai của Master page là vị trí của các scripts sẽ được chạy
trên tất cả các trang (chẳng hạn như sự kiện Page_Load code, sẽ chạy
mỗi khi mỗi trang được loaded lên), ví dụ:
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) '...
End Sub
</script> - Phần thứ ba, Master page bào gồm một vài HTML cho layout, và thẻ
start/end <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder>. Phần tài liệu của Content page sẽ được thay thế trong thẻ này.
Tóm lại, mỗi Master page phải bao gồm các thành phần sau:
- Các thẻ cơ sở HTML và XML typing tags
- <%@ master ... %> ở trên dòng đầu tiên
- Một <asp:ContentPlaceHolder> tag với một ID
Master page có giá trị như một container chứa toàn bộ các trang khác. Ta sẽ
tạo Content pages trong phần tiếp theo.
* Creating Content Page
Trong ASP.NET 2.0, Visual Web Developer sẽ ghi lại những gì thatực
hiện. Để tạo Content Page, trong cửa sổ Solution Explorer, right-click vào gốc
và chọn Add New Item: Thông thường ta sẽ chọn template là Web Form và
không có chỉ định template đặc biệt cho Content page. Chú ý, dưới hộp thoại là
lựa chọn Select master page (như hình3.35). Khi hộp kiểm được chọn thì thì
xuất hiện hộp thoại chỉ dẫn xem ta chọn Master page sẽ được sử dụng cho
Content page mới.
Hộp thoại thứ 2 (hình 3.36) cho phép chúng ta chọn một Master page trong
danh sách để sử dụng. Ta chọn một Master page và chọn OK.
VWD thiết lập 2 giá trị trong Content page. Chúng không nhìn thấy được
trong Design View, nhưng chuyển tới Source View sẽ thấy chúng, như được
định nghĩa trong đoạn code sau. Đầu tiên, Master page sử dụng sẽ được khởi tạo
trong chỉ dẫn đầu tiên. Thứ hai, VWD sẽ bao hàm điều khiển <asp:content> với
thuộc tính chỉ định ID của placeholder trong Master page. Một Master page có
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
65
thể có nhiều vị trí cho Content pages chèn vào. Các nhận dạng placeholder cần
được định rõ để điền trang nội dung cụ thể này.
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> ' Nội dung của Content sẽ được định nghĩa ở đây
</asp:Content>
Hình 3.35. Cửa sổ Add New Item
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
66
Hình 3.36. Cửa sổ Select Master Page
Tổng kết, Content page chứa 3 đặc điểm sau:
- Không có đoạn khai báo thẻ HTML <!DOCTYPE HTML ... > và
XML <html xmlns=...>
- Khai báo chỉ dẫn <%@ page MasterPageFile= ... %> ở dòng đầu
tiên để chỉ ASP.NET 2.0 Master page sử dụng.
- Một thẻ <asp:content> tag
Ví dụ: Trong trang Master và contain có các thẻ <asp:Content ID=“Content1" ContentPlaceHolderID=“main" Runat="Server"> Main </asp:Content> <asp:Content ID=“Content2" ContentPlaceHolderID=“Footer" Runat="Server"> Footer </asp:Content>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
67
2.5. HTML Controls và ASP.NET Web Server Controls
2.5.1. Giới thiệu các controls
a) Server Controls và HTML Controls
Server Controls
Server controls có nhiều khả năng hơn HTML controls và chức năng của
nó trong một số cách giống như Windows Forms controls. Nhiều điều khiển
server controls có cùng tên như các điều khiển Windows Forms controls và cùng
cấp nhiều thuộc tính, phương thức và sự kiện giống nhau, thêm vào đó là các
điều khiển như FileUpload, LoginView, và RequiredFieldValidator.
HTML Controls
HTML controls là một tập hợp các điều khiển giao diện người dùng trước
đây mà được hỗ trợ bởi hầu hết các trình duyệt web và phù hợp với chuẩn
HTML phát triển cho việc quản lý các phần tử giao diện người dùng trên các
trang web điển hình. Chúng bao gồm: Button, Text Field, Checkbox và các điều
khiển cơ sở hữu ích cho việc quản lý thông tin trên một trang Web mà có thể
được trình bày hoàn toàn bằng mã code HTML.
b) ASP.NET Web Server Controls
Khi tạo trang ASP.NET Web pages, ta có thể sử dụng các kiểu controls:
- HTML server controls Các phần tử HTML có thêm tính năng
tương tác trên trình (server) vì vậy ta có thể lập trình chúng. HTML
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
68
server controls trưng bày một đối tượng mà ánh xạ rất gần tới các
phần tử HTML mà chúng hoàn trả.
- Web server controls Controls có nhiều tính năng cài sẵn hơn
HTML server controls. Web server controls không chỉ bao gồm các
điều khiển như buttons and text boxes, mà còn các điều khiển cho
mục địch đặc biệt như calendar, menus và tree view control. Web
server controls có nhiều tính năng trừu tượng hơn HTML server
controls.
- Validation controls Controls kết hợp logic cho phép ta kiểm soát
những gì mà người dùng chèn vào các điều khiển Input như điều
khiển TextBox. Validation controls cho phép ta kiểm tra quy định
của một trường, kiểm tra dựa vào một giá trị đặc biệt, hoặc một mẫu
ký tự, kiểm tra xem một giá trị nào đó có nằm trong một phạm vi hay
không, .v.v…
- User controls Controls mà được tạo như ASP.NET Web pages. Ta
có thể nhúng ASP.NET user controls trên các trang ASP.NET Web
pages khác. Đây là cách đơn giản để tạo toolbars và các phần tử
được sử dụng lại khác.
2.5.2. Web Server Controls
Web server controls bao gồm các điều khiển truyền thống như buttons và
text boxes cũng như các điều khiển phức tạp hơn như tables. Chúng cũng bao
gồm các điều khiển có các chức năng thông thường được sử dụng như hiển thị
dữ liệu trên grid, chọn ngày tháng, hiển thị menu, .v.v…
Web server controls có tất cả các tính năng được mô tả trong phần HTML
server controls trên (ngoại trừ ánh xạ 1-1 đến các phần tử HTML) và chúng có
các đặc tính mới thêm vào như:
- Một mô hình đối tượng đa năng (rich object model) cung cấp các khả
năng lập trình an toàn.
- Tự động dò tìm trình duyệt. Các điều khiển có thể có thể tự động dò
tìm các khả năng của trình duyệt và hoàn trả đánh dấu mã HTML
thích hợp.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
69
- Một vài controls, có khả năng định nghĩa layout của mình cho việc
sử dụng các Templates.
- Một vài điều khiển có khả năng chỉ định sự kiện của một điều khiển
là nguyên nhân trực tiếp gửi lên server hoặc thay vì lưa trữ hoặc và
nối khi trang được submit.
- Hỗ trợ các themes, cho phép định nghĩa nhất quán giao diện các điều
khiển trên toàn bộ site.
- Có khả năng chuyển các sự kiện từ một tổ hợp các điều khiển (như
một button trong một table) điều khiển chứa (container control).
- Các điều khiển này sử dụng cú pháp sau:
<asp:button attributes runat="server" id="Button1"/>
Namespace System.Web.UI.WebControls chứa các lớp cho phép tạo các
điều khiển Web Server. Khi các điều khiển được tạo, chúng sử dụng các lớp này
để chạy trên Server.
Các lớp thuộc không gian miền này như Textbox, ListBox, … hoàn trả các
thẻ HTML trên trang web. Một số lớp như SqlDataSource và ObjectDataSource
thao tác với dữ liệu không hoàn trên trang Web. Các lớp GridView, DetailtView
dùng để thao tác với các bản ghi dữ liệu.
Class WebControl thuộc không gian miền System.Web.UI.WebControls.
Nó đóng vai trò lớp cơ sở cho hầu hết các điều khiển Web Server.
Bảng sau là các thuộc tính, phương thức và các sự kiện thông thường được
kế thừa cho các điều khiển dẫn xuất từ lớp này
Tên Mô tả
BackColor
property
Chỉ định hoặc truy xuất màu nền của điều khiển
ForeColor
property
Chỉ định hoặc truy xuất Foreground của điều khiển
Height
property
Chỉ định hoặc truy xuất chiều cao của điều khiển
ID property Chỉ định hoặc truy xuất định danh gán cho điều khiển
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
70
Visible
property
Chỉ định hoặc truy xuất hoặc truy xuất giá trị boolean cho
phép điều khiển hiển thị hoặc không hiển thị trên trang
Width property Chỉ định hoặc truy xuất chiều rộng của điều khiển
Focus() method Thiết lập focus cho điều khiển
Load event Xuất hiện khi điều khiển được load trong bộ nhớ.
Sau đây là một số lớp thường được sử dụng:
a) Điều khiển Lable cho phép hiển thị nhãn trên Web Form. Điều khiển này
thường được sử dụng để hiển thị các chuỗi tĩnh. Tuy nhiên cũng có thể tạo
output động khi được điều khiển bởi các script.
Sau đây là cú pháp tạo điều khiển lable:
+ MarkUp code:
<asp:Label ID=“lblMyLable" runat="server"
Text="Label"></asp:Label>
+ Programming code: Label <tên điều khiển>= new Label();
lblObject.ID = "lblMy";
lblObject.Text = "MyLable";
Page.Controls.Add(lblObject);
Các thuộc tính hay sử dụng:
Tên Mô tả
Text property Chỉ định hoặc truy xuất chuỗi text trên nhãn
AccessKey property Chỉ định hoặc truy xuất Key short cut cho phép điều
hướng nhanh đến điều khiển.
AssociatedControlID
property
Chỉ định hoặc truy xuất ID của điều khiển có liên kết
đến điều khiển này.
b) Điều khiển TextBox cho phép hiển thị TextBox trên Web Form. Điều khiển
này thường được sử dụng để nhận input từ người sử dụng. Tuy nhiên cũng có
thể dùng để hiển thị output.
Sau đây là cú pháp tạo điều khiển TextBox:
� MarkUp code:
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
71
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
� Programming code:
TextBox txtObject= new TextBox();
txtObject.ID = "txtMyTextBox";
frmTest.Controls.Add(txtObject);
Sau đây là bảng các thuộc tính, phương thức và các sự kiện hay được sử
dụng:
Tên Mô tả
AccessKey property Chỉ định hoặc truy xuất Key short cut cho phép điều
hướng nhanh đến điều khiển.
AutoPostBack
property
Chỉ định hoặc truy xuất giá trị cho phép tự động tạo
PostBack khi người dùng dùng phím Enter hoặc Tab
MaxLenght property Chỉ định hoặc truy xuất độ dài ký tự lớn nhất có thể
trên điều khiển.
Text property Chỉ định hoặc truy xuất chuỗi text trên điều khiển
TextMode Chỉ định kiểu của điều khiển: Singe line, multi line hay
Password.
TextChanged event Xuất hiện khi nội dung của điều khiển thay đổi giữa
hai lần post.
c) Điều khiển Button cho phép thêm nút lệnh vào Web page. Điều khiển Button
chủ yếu được sử dụng để Submit thông tin lên Server.
Sau đây là cú pháp tạo điều khiển Button:
� MarkUp code:
<asp:Button ID=“btnSubmit" runat="server" Text=“Submit" />
� Programming code:
Button btnObject=new Button();
btnObject.ID = "txtMyButton";
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
72
btnObject.Text = "Submit";
frmTest.Controls.Add(btnObject) ;
Sau đây là bảng các thuộc tính, phương thức và các sự kiện hay được sử
dụng:
Tên Mô tả
AccessKey property Chỉ định hoặc truy xuất Key short cut cho phép điều
hướng nhanh đến điều khiển.
Enable property Chỉ định hoặc truy xuất giá trị Boolean cho phép điều
khiển được Enable hay không?
Text property Chỉ định hoặc truy xuất chuỗi text hiển thị trên điều
khiển
Click event Xuất hiện khi điều khiển được clicked
Command event Xuất hiện khi điều khiển được clicked
d) Điều khiển Image cho phép hiển thị ảnh trên Web page. Sau đây là cú pháp
tạo điều khiển Image:
� MarkUp code:
<asp:Image ID="imgHoa" runat="server" ImageUrl="~/Image/hoa.jpg" />
� Programming code:
Image imgObject=new Image() ;
imgObject.ID = "imgHoa";
imgObject.ImageUrl = "~\Image\Hoa.jpg";
imgObject.AlternateText = "Hoa cỏ may";
imgObject.ToolTip = "Một vị thuốc nam";
frmTest.Controls.Add(imgObject);
Sau đây là bảng các thuộc tính, phương thức và các sự kiện hay được sử
dụng:
Tên Mô tả
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
73
AlternateText
property
Chỉ định hoặc truy xuất chuỗi text hiển thị thay thế khi
ảnh không hiển thị.
ImageURL property Chỉ định hoặc truy xuất đường dẫn file ảnh.
e) Điều khiển ImageButton cho phép tạo Button dạng ảnh trên Web page. Sau
đây là cú pháp tạo điều khiển ImageButton:
� MarkUp code:
<asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl="~/Image/hoa.jpg" />
� Programming code:
ImageButton imgObject = new ImageButton();
imgObject.ID = "imgNext";
imgObject.ImageUrl = "~\Image\Next.jpg";
frmTest.Controls.Add(imgObject) ;
Tên Mô tả
AlternateText
property
Chỉ định hoặc truy xuất chuỗi text hiển thị thay thế khi
ảnh không hiển thị.
ImageURL property Chỉ định hoặc truy xuất đường dẫn file ảnh.
OnClientClick
property
Chỉ định hoặc truy xuất đến script client-side khi sự
kiện click xuất hiện trên điều khiển.
Click event Xuất hiện khi điều khiển được clicked
Command event Xuất hiện khi điều khiển được clicked
f) Điều khiển LinkButton cho phép hiển thị trên Web page một nút lệnh dưới
dạng HyperLink.
Điều khiển LinkButton không nên nhầm lẫn với điều khiển HyperLink.
Điều khiển HyperLink chỉ đơn thuần hiển thị các trang Web khi được click còn
LinkButton thực hiện các tác vụ giống như điều khiển Button.
Sau đây là cú pháp tạo điều khiển LinkButton:
� MarkUp code:
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
74
<asp:LinkButton ID="LinkButton1"
runat="server">ClickHere</asp:LinkButton>
� Programming code:
LinnkButton lnkbtnObject=new LinkButton();
lnkbtnObject.ID = "lnkbtnClickHere";
lnkbtnObject.Text = "Click here";
frmTest.Controls.Add(lnkbtnObject) ;
Các thuộc tính và phương thức hay sử dụng của điều khiển:
Tên Mô tả
PostBackURL
property
Chỉ định hoặc truy xuất địa chỉ cỉa trang được posted
khi điều khiển được click.
Click event Xuất hiện khi điều khiển được clicked
Command event Xuất hiện khi điều khiển được clicked
g) Điều khiển Panel được sử dụng giống như một container chứa các điều khiển
Web Server khác. Panel thường được sử dụng để hiển thị các thông tin tĩnh.
Sau đây là cú pháp tạo điều khiển Panel:
� MarkUp code:
<asp:Panel ID="Panel2" runat="server">
... Các điều khiển khác ...
</asp:Panel>
� Programming code:
Panel pnlObject = new Panel()
h) Điều khiển CheckBox: Các điều khiển chọn được sử dụng để chọn một hoặc
nhiều lựa chọn trong một danh sách. Các điều khiển này hoặc được dẫn xuất
từ lớp WebControls thuộc không gian miền System.Web.IU hoặc được dẫn
xuất từ một trong các lớp của lớp WebControls.
Sau đây là cú pháp tạo điều khiển CheckBox:
� MarkUp code:
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
75
<asp:CheckBox ID="CheckBox1" runat="server" Checked="True"
Text=“Tiếng Anh" />
� Programming code:
CheckBox ckbObject =new CheckBox();
ckbObject.ID = "ckbCheclBox";
ckbObject.Checked = False;
ckbObject.Text = “Tiếng Pháp";
frmTest.Controls.Add(ckbObject);
Các thuộc tính và phương thức hay sử dụng của điều khiển:
Tên Mô tả
AutoPostBack
property
Chỉ định hoặc truy xuất giá trị boolean xem có tự động
tạo postback khi điều khiển được click.
Checked property Truy xuất trạng thái của điều khiển
Text Property Chỉ định hoặc truy xuất đến giá trị gắn với điều khiển.
i) Điều khiển RadioButton được sử dụng để chọn một trong nhiều lựa chọn
khác nhau. Sau đây là cú pháp tạo điều khiển CheckBox:
� MarkUp code:
<asp:RadioButton ID="rdbNu" runat="server" Text="Nữ"
GroupName="Gioitinh" />
<asp:RadioButton ID="rdbNam" runat="server" Text="Nam"
GroupName="Gioitinh"/>
� Programming code:
RadioButton rdbObject =new RadioButton();
rdbObject.ID = "rdbGioi";
frmTest.Controls.Add(rdbObject) ;
Các thuộc tính và phương thức hay sử dụng của điều khiển:
Tên Mô tả
AutoPostBack Chỉ định hoặc truy xuất giá trị boolean xem có tự động
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
76
property tạo postback khi điều khiển được click.
Checked property Truy xuất trạng thái của điều khiển
GroupName
property
Chỉ định hoặc truy xuất tên nhóm mà điều khiển thuộc
vào.
Text Property Chỉ định hoặc truy xuất đến giá trị gắn với điều khiển.
j) Điều khiển CheckBoxList được xét như một nhóm các điều CheckBox có
liên quan với nhau. Và được sử dụng để chọn nhiều lựa chọn trong danh sách
các lựa chọn đã cho, các lựa chọn này không loại trừ nhau.
Sau đây là cú pháp tạo điều khiển CheckBoxList:
� MarkUp code:
<asp:CheckBoxList ID="cblNgoaiNgu" runat="server">
<asp:ListItem>Tiếng Anh</asp:ListItem>
<asp:ListItem>Tiếng Pháp</asp:ListItem>
<asp:ListItem>Tiếng Trung</asp:ListItem>
<asp:ListItem>Tiếng Nhật</asp:ListItem>
</asp:CheckBoxList>
� Programming code:
CheckBoxList cblObject =new CheckBoxList();
cblObject.ID = "cblNgNgu";
cblObject.Items.Add("Tiếng Anh");
cblObject.Items.Add("Tiếng Pháp");
cblObject.Items.Add("Tiếng Trung");
frmTest.Controls.Add(cblObject) ;
Các thuộc tính và phương thức hay sử dụng của điều khiển:
Tên Mô tả
AutoPostBack
property
Chỉ định hoặc truy xuất giá trị boolean xem có tự
động tạo postback khi điều khiển được click.
Items property Truy xuất đến các phần tử trong điều khiển
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
77
SelectedIndex
property
Chỉ định hoặc truy xuất đến Index của phần tử có giá
trị index nhỏ nhất trong danh sách các phần tử được
chọn.
SelectedValue
property
Chỉ định hoặc truy xuất đến giá trị của các phần tử
được chọn.
Text Property Chỉ định hoặc truy xuất đến giá trị gắn với điều
khiển.
ClearSelection()
Method
Xóa lựa chọn các phần tử hoặc thiết lập thuộc tính
Selected của tất cả các phần tử là false.
SelectedIndexChanged
event
Xuất hiện khi lựa chọn các phần tử giữa hai lần post
là khác nhau.
k) Các điều khiển RadioButton ít khi được sử dụng một mình mà chúng thường
được nhóm từ hai điều khiển trở lên. Điều khiển RadioButtonList là một cách
khác, nó tương tự như một nhóm các điều khiển RadioButton, được dẫn xuất
từ lớp
Sử dụng điều khiển RadioButtonList ta không cần kiểm tra từng nút riêng
biệt để xác định trạng thái chọn của nó. Rất đơn giản, ta chỉ cần truy xuất đến
chỉ số index của nút được chọn thông qua thuộc tính SelectedIndex.
Sau đây là cú pháp tạo điều khiển RadioButtonList:
� MarkUp code:
<asp:RadioButtonList ID=“rdblstGT" runat="server">
<asp:ListItem Value="1">Nam</asp:ListItem>
<asp:ListItem Value="0">Nữ</asp:ListItem>
</asp:RadioButtonList>
� Programming code:
RadioButtonList rdbObject =new RadioButtonList();
rdbObject.ID = "rdbGioi";
rdbObject.Items.Add("Nam");
rdbObject.Items.Add("Nữ");
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
78
frmTest.Controls.Add(rdbObject) ;
Các thuộc tính và phương thức hay sử dụng của điều khiển:
Tên Mô tả
AutoPostBack
property
Chỉ định hoặc truy xuất giá trị boolean xem có tự
động tạo postback khi điều khiển được click.
Items property Truy xuất đến các phần tử trong điều khiển
SelectedIndex
property
Chỉ định hoặc truy xuất đến Index của phần tử được
chọn.
SelectedValue
property
Chỉ định hoặc truy xuất đến giá trị của phần tử được
chọn.
Text Property Chỉ định hoặc truy xuất đến giá trị gắn với điều
khiển.
ClearSelection()
Method
Thiết lập thuộc tính selected của tất cả các phần tử là
false.
SelectedIndexChanged
event
Xuất hiện khi lựa chọn các phần tử giữa hai lần post
là khác nhau.
l) Điều khiển ListBox được sử dụng cho phép lựa chọn nhiều phần tử trong một
danh sách cho trước.
Sau đây là cú pháp tạo điều khiển ListBox:
� MarkUp code:
<asp:ListBox ID="lstboxNN" runat="server"
SelectionMode="Multiple">
<asp:ListItem>Anh</asp:ListItem>
<asp:ListItem>Pháp</asp:ListItem>
</asp:ListBox>
� Programming code:
ListBox lstboxObject =new ListBox();
lstboxObject.ID = "cblNgNgu";
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
79
lstboxObject.Items.Add("Tiếng Anh");
lstboxObject.Items.Add("Tiếng Pháp");
frmTest.Controls.Add(lstboxObject) ;
Các thuộc tính và phương thức hay sử dụng của điều khiển:
Tên Mô tả
AutoPostBack
property
Chỉ định hoặc truy xuất giá trị boolean xem có tự
động tạo postback khi điều khiển được click.
Items property Truy xuất đến các phần tử trong điều khiển
SelectedIndex
property
Chỉ định hoặc truy xuất đến Index của phần tử được
chọn có giá trị index nhỏ nhất.
SelectedItem property Truy xuất phần tử được chọn có giá trị index nhỏ
nhất.
SelectionMode
Property
Chỉ định hoặc truy xuất mode lựa chọn của điều
khiển.
ClearSelection()
Method
Xóa lựa chọn các phần tử hoặc thiết lập thuộc tính
Selected của tất cả các phần tử là false.
GetSelectedIndeis()
method
Truy xuất mảng index của các phần tử được chọn.
SelectedIndexChanged
event
Xuất hiện khi lựa chọn các phần tử giữa hai lần post
là khác nhau.
m) Điều khiển DropDownList là điều khiển cho phép chọn một phần tử trong
danh sách các phần tử thả xuống.
Sau đây là cú pháp tạo điều khiển DropDownList:
� MarkUp code:
<asp:DropDownList ID=“ddlNgNgu" runat="server">
<asp:ListItem >Tiếng Anh</asp:ListItem>
<asp:ListItem>Tiếng Pháp</asp:ListItem>
</asp:DropDownList>
� Programming code:
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
80
DropDownList ddlObject =new DropDownList();
ddlObject.ID = "cblNgNgu";
ddlObject.Items.Add("Tiếng Anh");
ddlObject.Items.Add("Tiếng Pháp");
ddlObject.Items.Add("Tiếng Trung");
frmTest.Controls.Add(ddlObject) ;
Các thuộc tính và phương thức hay sử dụng của điều khiển:
Tên Mô tả
AutoPostBack
property
Chỉ định hoặc truy xuất giá trị boolean xem có tự
động tạo postback một option được chọn.
Items property Truy xuất đến các phần tử trong điều khiển
SelectedIndex
property
Chỉ định hoặc truy xuất đến Index của phần tử được
chọn.
SelectedValue
property
Chỉ định hoặc truy xuất đến giá trị của phần tử được
chọn.
Text Property Chỉ định hoặc truy xuất đến thuộc tính selectedValue
của điều khiển.
SelectedIndexChanged
event
Xuất hiện khi lựa chọn các phần tử giữa hai lần post
là khác nhau.
2.5.3. Nhóm điều khiển điều hướng trang và nâng cao
a. Nhóm điều khiển điều hướng trang
Một Website có một hoặc nhiều Web pages. Các Web pages được link với
nhâu thông qua các HyperLink. Tuy nhiên, việc quản trị quá nhiều các
hyperlinks đôi khi là khó khăn. Đặc biệt đối với các hệ thống website lớn, nếu
chỉ có các hyperlink thì các trang sẽ rất lôn xộn với các link. ASP.NET cung cấp
các điều khiển điều hướng trang cho phép định nghĩa tất cả các đường link trên
một vị trí, thông thường sử dụng một file XML. Đó là các điều khiển:
+ Menu
+ TreeView
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
81
+ SiteMapPath
i. Điều khiển SiteMapData Source: Đối với các hệ thống website lớn, các
mục điều hướng thường được xây dựng trong một file XML mở rộng để
tiện cho việc bảo trì hệ thống. File XML này được link với điều khiển điều
hướng trang thông qua điều khiển SiteMapData Source. Điều khiển
SiteMapDataSource tìm kiếm một file đặc biệt chứa mã XML của điều
khiển điều hướng trang có tên là web.sitemap. Mọi thay đổi cấu trúc của
điều khiển điều hướng trang được thay đổi trên file web.sitemap này.
ii. Điều khiển Menu: Cho phép tạo menu trong hệ thống website. Sau đây là
cú pháp tạo điều khiển Menu:
� MarkUp code:
<asp:Menu ID="Menu2" runat="server">
<Items>
<asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
� Programming code:
Menu mnu =new Menu();
MenuItem mnuitem =new MenuItem("Home");
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
82
mnuitem.NavigateUrl = "Default.aspx";
mnu.Items.Add(mnuitem) ;
Lớp Menu thể hiện của điều khiển Menu thuộc không gian miền
System.Web.UI.WebControls. Lớp này được sử dụng để tạo và cấu hính Menu
trong các trang web tại thời điểm runtime.
Các thuộc tính, phương thức và sự kiện hay sử dụng:
+ Item property: Là thuộc tính dùng để truy xuất đối tượng
MenuItemCollection chứa tất cả các Menu Item biểu diễn trên điều
khiển Menu. Thuộc tính này thường được sử dụng để thêm hoặc xóa
các mục trên menu.
+ Orientation property: Là thuộc tính dùng để chỉ định hoặc truy xuất
đến hướng của menu.
+ PathSeparator property: Là thuộc tính dùng để chỉ định hoặc truy xuất
đến ký tự dùng để phân chia trong đường dẫn của một mục menu
item, mặc định là ký tự “/”.
+ StaticDisplayLevels property: Là thuộc tính dùng để chỉ định số mức
tĩnh của Menu.
+ Target property: Là thuộc tính dùng để chỉ định hoặc truy xuất
window hoặc frame đích mà nội dung trang web được hiển trị trên đó.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
83
Target Mô tả
_blank Hoàn trả nội dung trên một cửa sổ mới không có frames.
_parent Hoàn trả nội dung trực tiếp trên frameset parent.
_search Hoàn trả nội dung trên search pane.
_self Hoàn trả nội dung trên frame có focus.
_top Hoàn trả nội dung trên full window không có các frames
+ FindItem method: Là phương thức tìm kiếm một menu item theo giá
trị đường dẫn được chỉ định. Đường dẫn menu là một chuỗi được xác
định từ menu item gốc đến menu item hiện tại. Ví dụ sau minh họa sử
dụng phương thức FindMenu.
MenuItem menuitem =new MenuItem();
menuitem =
Me.Menu2.FindItem("Home\Product");
+ MenuItemClick event: Là sự kiện xuất hiện khi một mục trên menu
được click.
iii. Điều khiển TreeView được xem như một menu có thể mở rộng và thu hẹp
giống như thanh trái của cửa sổ Explorer. Điều khiển TreeView dùng để liên
kết các trang trong cấu trúc cây. Cấu trúc cây được hình thành từ nhiều mức
của các nodes, bao gồm các node gốc, node lá và các mức trung gian, được
thể hiện bởi đố tượng TreeNode. Đối tượng TreeNode có các phần tử UI là:
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
84
Tương tự như điều khiển Menu, điều khiển TreeView có thể buộc vào điều
khiển SiteMapData Source. Sau đây là cú pháp tạo điều khiển TreeView:
� MarkUp code:
<asp:TreeView>
<Nodes>
<asp:TreeNode> </asp:TreeNode>
<asp:TreeNode> </asp:TreeNode>
</Nodes>
</asp:TreeView>
� Programming code:
TreeView trv =new TreeView();
Dim trn As New TreeNode("Tin học");
trv.Nodes.Add(trn) ;
Lớp TreeView thuộc không gian miền System.Web.UI. WebControls.
TreeView được cấu thành từ một tập cây phân cấp các tree node, gồm các thuộc
tính, phương thức và sự kiện hay sử dụng sau:
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
85
+ Nodes property: Là thuộc tính dùng để truy xuất đến tập các Tree
Nodes cấu thành nên điều khiển TreeView. Thuộc tính này thường
dùng để thêm hoặc xóa các Node trên TreeView.
+ ShowCheckBoxes property: Là thuộc tính dùng để chỉ định hoặc truy
xuất đến giá trị quy định kiểu hiển thị của Node tương tự như
CheckBox
+ SelectedValue property: Là thuộc tính dùng trả về giá trị của Node
được chọn.
+ NodeStyle property: Là thuộc tính dùng để chỉ định hoặc truy xuất đến
Style mặc định của các Nodes.
+ ShowLines property: Là thuộc tính dùng để chỉ định hoặc truy xuất
đến giá trị chỉ định vẽ các dòng kẻ giữa các node.
+ FindNode Method: Là phương thức dùng để truy xuất một node trong
điều khiển TreeView theo đường dẫn chỉ định.
+ SelectedNodeChanged Event: Là sự kiện xuất hiện khi một Node
được chọn.
+ TreeNodeCollapsed Event: Là sự kiện xuất hiện khi một Node được
thu gọn.
+ TreeNodeExpanded Event: Là sự kiện xuất hiện khi một Node được
mở rộng.
+ TreeNodeCheckChanged Event: Sự kiện này xuất hiện nếu trạng thái
của check box thay đổi giữa các lần Post back tới Server.
iv. Điều khiển SiteMapPath: Cấu trúc Logic của một ứng dụng Web được lưu
trong file XML sitemap. File này định nghĩa layout và quan hệ giữa các
trang trong ứng dụng web. ASP.NET cung cấp điều khiển SiteMapPath để
làm việc với site map files và tạo một đường dẫn tuyến tính từ trang Home
đến trang hiện tại của người sử dụng. Các thuộc tính, phương thức hay sự
kiện hay sử dụng là:
+ PathSeparator Property
+ CurrentNodeStyle Property
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
86
+ PathDirection Property
+ RootNodeStyle Property
+ ItemCreated Event
b. Một số điều khiển nâng cao
i. Điều khiển ImageMap và lớp HotSpot: Con trỏ chuột có khả năng clickable
vào một số vùng nào đó của một hình ảnh trên trang web. Khi Click vào
các vùng đó, ta có thể điều hướng sang một trang khác và các vùng trên
được gọi là các điểm nóng (Hot Spots).
Điều khiển ImageMap cho phép tạo các điểm nóng ảnh có khả năng
clickable. Lớp ImageMap thuộc không gian miền
System.Web.IU.WebControls. Sau đây là cú pháp tạo điều khiển
ImageMap:
� MarkUp code:
<asp:ImageMap ID="imgmpWord" runat="server"
ImageUrl="~/Images/World_Map.jpg">
<asp:CircleHotSpot … />
<asp:RectangleHotSpot … />
<asp:PolygonHotSpot />
</asp:ImageMap>
� Programming code:
ImageMap imgmp =new ImageMap();
imgmp.ImageUrl = "images/World_Map.jpg";
imgmp.AlternateText = "This a image";
imgmp.HotSpots.Add(phspotUSA) ;
Gồm các thuộc tính và phương thức hay sử dụng sau:
+ HotSpotMode Property : Thuộc tính này dùng để truy xuất và chỉ định
hành vi (behavior) của đối tượng HotSpot.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
87
+ HotSpot Property : Là thuộc tính dùng để truy xuất tập các đối tượng
HotSpot, các đối tượng này dùng để định nghĩa các vùng điểm nóng
trên điều khiển ImageMap.
+ ImageURL Property : Thuộc tính này dùng để truy xuất và chỉ định vị
trí file ảnh được hiển thị trên điều khiển.
+ AlternateText Property : Là thuộc tính dùng để truy xuất và chỉ định
chuỗi text hiển thị thay thế khi ảnh không được hiển thị.
+ Click Event : Là sự kiện xuất hiện khi đối tượng HotSpot được
clicked.
Lớp HotSpot được sử dụng để tạo ra các vùng điểm nóng trên ảnh, các
vùng đó có thể là hình tròn, hình chữ nhật và đa giác. Nó thuộc không gian miền
System.Web.IU. WebControls. Các thuộc tính và phương thức hay được sử
dụng của lớp này là:
+ AccessKey Property : Là thuộc tính dùng để chỉ định hoặc truy xuất
Access Key. Access Key này cho phép điều hướng nhanh đến vùng
điểm nóng bằng cách sử dụng phím Alt+AccessKey
phspotUSA.AccessKey = "U"
+ PostBackValue Property : Là thuộc tính dùng để truy xuất và chỉ định
giá trị của đối tượng HotSpot được truyền thành dữ liệu khi đối tượng
đó được clicked.
phspotUSA.PostBackValue = "USA“
+ GetCoordinates Method : Là phương thức dùng để truy xuất chuỗi tọa
độ của vùng điểm nóng.
Lớp CircleHotspot được sử dụng để định nghĩa vùng điểm nóng dạng hình
tròn trên điều khiển ImageMap. Để xây dựng được điểm nóng này ta cần cung
cấp tọa độ tâm (x, y) và bán kính tính theo đơn vị pixel.
+ NavigateUrl Property: Thuộc tính này dùng để truy xuất và chỉ định
địa chỉ URL cho phép người dùng điều hướng trang khi clicked vào
vùng điểm nóng.
phspotUSA.NavigateUrl = "http://www.example.com"
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
88
+ x, y, Radius Properties: Là các thuộc tính dùng để chỉ định hoặc truy
xuất tọa độ tâm và bán kính (tính theo pixel) vùng điểm nóng.
Lớp PolygonHotspot được sử dụng để định nghĩa vùng điểm nóng đa giác
trên điều khiển ImageMap. Để định nghĩa đa giác ta cung cấp tập tọa độ đỉnh
x,y. Sau đây là các thuộc tính quan trọng của lớp này:
+ Coordinates Property : Là thuộc tính dùng để chỉ định chuỗi tọa độ x,y
của véc tơ các đỉnh của đa giác.
phspotUSA.Coordinates = "293,220,278,197,288,
188,310,210, 300,200“
Trong ví dụ trên chuỗi "293,220,278,197,288,188,310,210, 300,200“
thể hiện tương ứng các tọa độ đỉnh của đa giác là x1, y1, x2, y2, x3,
y3, x4, y4, x5 và y5.
+ Target Property : Là các thuộc tính dùng để chỉ định target của
Window và frame mà trang web linked đến sẽ được hiển thị.
Lớp RectangleHotspot được sử dụng để định nghĩa vùng điểm nóng dạng
hình chữ nhật trên điều khiển ImageMap. Để định nghĩa hình chữ nhật ta cung
cấp tọa độ góc dưới bên trái và góc trên bên phải.
+ Left Property : Là thuộc tính dùng để chỉ định tọa độ x của góc dưới
bên trái.
+ Bottom Property : Là thuộc tính dùng để chỉ định tọa độ y của góc
dưới bên trái.
+ Right Property : Là thuộc tính dùng để chỉ định tọa độ x của góc trên
bên phải.
+ Top Property : Là thuộc tính dùng để chỉ định tọa độ y của góc trên
bên phải.
ii. Điều khiển FileUpload cho phép định vị và Upload các file. Lớp
FileUpload thuộc không gian miền System.Web. IU.WebControls, có các
thuộc tính và phương thức quan trọng sau:
+ HasFile Property : Là thuộc tính dùng truy xuất giá trị xác định xem
có hay không file được chon trong input box.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
89
+ FileName Property : Là thuộc tính dùng để truy xuất tên của file được
chọn cho việc Upload.
+ PostedFile Property : Là thuộc tính tham chiếu đến file đang Upload
và thuộc tính ContentLength trả về kích thước của file tính theo đơn vị
byte. (Mặc định kích thước tối đa của file có thể Upload là 4MB)
+ SaveAS() Method : Là phương thức dùng để lưu file được Upload, để
lưu file ta cần chỉ định đường dẫn file trên Web Server.
if (fupAnh.HasFile)
{
fupAnh.SaveAs(Request.PhysicalApplicationPa
th + "Images\" + fupAnh.FileName);
}
iii. Điều khiển View: Nội dung của các trang Web đôi khi rất nhiều để có thể
trình bày đầy đủ trên một trang màn hình, do đó ta thường tách thành các
khúc. Mỗi khúc này được hiển thị tại một thời điểm. Ví dụ khi ta cần điền
vào một phiếu điều tra online, số các câu hỏi được gom thành từng nhóm
và nhóm này được hiển thị sau nhóm kia. Điều khiển View cho phép quản
lý các khúc dữ liệu như vậy. Điều khiển này thường được sử dụng giống
nhe một container chứa các điều khiển khác. Cú pháp để tạo điều khiển
View tại thời điểm runtime:
<asp:View> ….
</asp:View>
iv. Điều khiển MultiView: Điều khiển View giống như một container chứa các
điều khiển khác, còn điều khiển MultiView giống như container chứa các
điều khiển View. Một điều khiển MultiView chứa một hoặc nhiều View.
Cú pháp để tạo điều khiển View tại thời điểm runtime:
<asp:multiview> ….
</asp:multiview>
Các thuộc tính, phương thức và sự kiện hay sử dụng của điều khiển là:
+ ActiveViewIndex Property: Là thuộc tính dùng để truy xuất hoặc chỉ
định giá trị Index của active View control.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
90
Sau đây là đoạn code minh họa sử dụng thuộc tính ActiveViewIndex
kích hoạt điều khiển View đầu tiên.
mvwBookList.ActiveViewIndex = 0
+ Views Property: Là thuộc tính dùng để truy xuất tập các điều khiển
View control.
mvwBookList.Views.Add(vwNovel)
mvwBookList.Views.Add(vwStory)
+ SetActiveView Method: Là phương thức thiết lập điều khiển View chỉ
định thành Active View.
mvwBookList.SetActiveView(vwStory)
+ ActiveViewChanged Event: Là sự kiện xuất hiện khi điều khiển
Active View của điều khiển MultiView thay đổi.
v. Sử dụng control AdRotator: Quảng cáo là một trong những cách tạo ra
những lợi nhuận cho nhà sở hữu website. AdRotator cho phép chọn ngẫu
nhiên các ảnh đặt lên trang web quản cáo, để làm được điều này trước tiên
ta phải tạo danh sách các file ảnh cần đưa lên trang web quảng cáo. Danh
sách này được đặt trong một file XML (vào menu Website\Add New Item\
và chọn Template là XML file – ads.XML) theo cấu trúc sau:
Ví dụ 2.2. Sử dụng control AdRotator
a) file ads.XML <?xml version="1.0" encoding="utf-8" ?> <Advertisements > <Ad> <ImageUrl>~/ads/yahooCall.gif</ImageUrl> <NavigateUrl>Vidu2_5.aspx</NavigateUrl> <AlternateText> Click here to visit our sponsor.</AlternateText> <Impressions>1</Impressions> <Keyword> A </Keyword> </Ad> <Ad> <ImageUrl>~/ads/yahooCall.png</ImageUrl> <NavigateUrl>//www.gotdotnet.com</NavigateUrl> <AlternateText> ASP.NET tutorials and more.</AlternateText> <Impressions>5</Impressions> <Keyword> B </Keyword> </Ad>
</Advertisements>
Trong đó các thẻ được sử dụng cho trong bảng sau:
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
91
Tag Ý nghĩa
<Ad> Bắt đầu thẻ Ad
<ImageUrl> Địa chỉ của Ad để hiển thị (địa chỉ file ảnh)
<NavigateUrl> Địa chỉ điều hướng nếu người sử dụng click vào Ad
<AlternateText>
Text để hiển thị như là ToolTip nếu người sử dụng di chuột
trên Ad. Và nếu địa chỉ ImageUrl không thể hiển thị thì
dòng text này sẽ hiển thị thay thế.
<Keyword> Một tên category sử dụng cho việc lọc các Ads khi hiển thị.
<Impressions> Một số thể hiện khả năng một Ad sẽ được hiển thị. Các
Ads với số càng cao thì khả năng hiển thị càng nhiều.
b) file vidu2_2.aspx
<%@ Page Language="VB" %>
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title> Hello My web</title> </head> <body> <form id="form1" runat="server"> <div> <asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="~/ads.xml" /> </div> </form> </body>
</html>
2.5.4. HTML Server Controls
HTML server controls là các phần tử HTML chứa các thuộc tính tương tác
giúp chúng có khả năng lập trình trên server code. Theo mặc định, các phần tử
HTML trong trang ASP.NET Web không sẵn có trên server. Thay vì đó, chúng
được xem xét như một văn bản và được chuyển qua trình duyệt. Tuy nhiên, bằng
việc chuyển đổi các phần tử HTML sang HTML server controls, ta có thể biểu
diễn chúng như các phần tử mà có thể lập trình trên server.
Đối tượng mẫu cho các HTML server controls ánh xạ gần với các phần tử
HHML tương ứng. Ví dụ, các thuộc tính (attributes) của HTML được trưng bày
trên HTML server controls là các đặc tính (properties).
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
92
Bất cứ một phần tử HTML trên một trang có thể chuyển thành một HTML
server control bằng việc thêm thuộc tính runat="server".Trong suốt quá trình
chuyển đổi, ASP.NET page framework tạo các thể hiện của tất cả các phần tử
có thuộc tính runat="server". Ví dụ:
<input id="Text1" type="text" runat="server"/></div>
HTML server controls cung cấp các tính năng sau:
- Một mô hình đối tượng mà ta có thể lập trình trên server sử dụng các
kỹ thuật hướng đối tượng. Mỗi server control trưng bày các thuộc
tính mà ta có thể thao tác trên server code.
- Một tập các sự kiện mà ta có thể viết các điều khiển sự kiện như cách
trên client, trừ các sự kiện điều khiển trên server code.
- Có khả năng điều khiển các sự kiện trong client script.
- Tự động duy trì các trạng thái của điều khiển. Khi một trang thi hành
quay trở lại server, các giá trị mà người sử dụng nhập vào sẽ tự động
được duy trì và gửi quay lại trình duyệt.
- Tương tác với các điều khiển ASP.NET validation, do vậy ta có thể
kiểm tra được thông tin phù hợp được chèn vào trong điều khiển.
- Dữ liệu kết nối tới một hoặc nhiều thuộc tính của điều khiển.
2.5.5. Các điều khiển kiểm tra tính hợp lệ
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
93
a. Giới thiệu:
Xác nhận tính hợp lệ (Validation) là tiến trình xác định sự đúng đắn của
thực thể được cung cấp. Trong các ứng dụng Web, các dữ liệu input cần được
kiểm tra tính hợp lệ để đảm bảo các tiến trình chạy một cách trôi chảy.
Dữ liệu trước khi được chấp nhận từ phía người dùng cần được kiểm tra
tính hợp lệ. Tính hợp lệ của dữ liệu cần được kiểm tra ở các khía cạnh như kiểu,
giá trị, định dạng.
b. Class BaseValidator
Các điều khiển Validation được bao gồm trong namespace
System.Web.UI.WebControls. Lớp BaseValidtor cung cấp như là một
lớp cơ sở cho tất cả các điều khiển Validation. Sau đây là bảng cung cấp các
thuộc tính và phương thức của lớp này:
Tên Mô tả
ControlToValidate
Property
Chỉ định hoặc truy xuất đến ID của điều khiển Web
Server cần kiểm tra tính hợp lệ.
Display Property Chỉ định hoặc truy xuất đến cách thức hiển thị chuỗi
thông báo lỗi trên điều kiển Validation. Có thể nhận các
giá trị: None, Static, Dynamic
ErrorMessage
Property
Chỉ định hoặc truy xuất chuỗi thông báo lỗi trên điều
khiển Validtion khi tính hợp lệ không thỏa mãn.
c. Các điều khiển
i. RequiredFieldValidator là điều khiển đảm bảo người dùng nhập dữ liệu
trên các điều khiển Input. Nếu người dùng không nhập dữ liệu trên điều
khiển Input mà liên kết với điều khiển RequiredFieldValidator thì tiến
trình của trang sẽ bị dừng lại cho đến khi dữ liệu được nhập vào. Sau
đây là cú pháp :
� MarkUp code:
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
94
<asp:RequiredFieldValidator ID="vldLastName"
runat="server" ControlToValidate="txtLastName"
SetFocusOnError="True"> *
</asp:RequiredFieldValidator>
� Programming code:
RequiredFieldValidator valLastN =new
RequiredFieldValidator();
valLastN.ControlToValidate = "txtLastName";
valLastN.Text = "Nhập họ đệm:";
valLastN.InitialValue = "";
Các thuộc tính, phương thức và sự kiện hay sử dụng của điều khiển là:
+ InitialValue Property: Chỉ định hoặc truy xuất giá trị khởi tạo cho
điều khiển được kiểm tra tính hợp lệ, mặc định là “”.
+ SetFocusOnError Property: Chỉ định hoặc truy xuất điều khiển nhận
focus khi điều khiển input không hợp lệ.
+ Text Property: Chỉ định hoặc truy xuất hiển thị khi điều khiển input
không hợp lệ.
ii. CompareValidator là điều khiển dùng để so sách giá trị của một điều
khiển Input với một điều khiển Input khác hoặc với một giá trị hằng. Ta
có thể sử dụng thuộc tính Type quy định kiểu dữ liệu của các giá trị
nhập vào để so sánh như: String (mặc định), Integer, Double, Date và
Currency. Sau đây là cú pháp:
+ MarkUp code:
<asp:CompareValidator ID=“valConf"
runat="server" ControlToCompare="txtPass"
ControlToValidate="txtConf"
SetFocusOnError="True" ErrorMessage="*"
Display="Dynamic"> * </asp:CompareValidator>
+ Programming code:
CompareValidator vldComp =new CompareValidator();
Các thuộc tính, phương thức và sự kiện hay sử dụng của điều khiển là:
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
95
+ Operator Property: Chỉ định hoặc truy xuất toán tử dùng để so sánh.
+ ValueToCompare Property: Chỉ định hoặc truy xuất giá trị hằng dùng
để kiểm tra tính hợp lệ.
+ Text Property: Chỉ định hoặc truy xuất hiển thị khi điều khiển input
không hợp lệ.
iii. RangeValidator là điều khiển được ASP.NET cung cấp để kiểm tra giá
trị người dùng nhập vào có nằm trong phạm vi được chỉ định hay
không? Điều khiển này kiểm tra tính hợp lệ của các giá trị dạng
numeric, character và date. Sau đây là cú pháp:
� MarkUp code:
<asp:RangeValidator ID="valrTuoi"
runat="server" ControlToValidate="txtTuoi"
ErrorMessage="Tuổi từ 18 - 55“
MaximumValue="55" MinimumValue="18"> *
</asp:RangeValidator>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
96
� Programming code:
RangeValidator valTuoi =new RangeValidator();
Các thuộc tính, phương thức và sự kiện hay sử dụng của điều khiển là:
+ ErrorMessage Property: Truy xuất và chỉ định chuỗi thông báo lỗi
hiển thị trên điều khiển Validation Summary khi tính hợp lệ bị vi
phạm. Thuộc tính này cũng dùng để thông báo lỗi trên điều khiển
RangeValidator khi tính hợp lệ bị vi phạm nếu thuộc tính Text của
điều khiển không được chỉ định.
+ IsValid Property: Truy xuất hoặc chỉ định giá trị (true, false) chỉ định xem dữ liệu Input có thỏa điều kiện hợp lệ hay không.
+ MaximumValue Property: Chỉ định giá trị lớn nhất của phạm vi hợp lệ
+ MinimumValue Property: Chỉ định giá trị nhỏ nhất của phạm vi hợp lệ
+ Text Property: Chỉ định hoặc truy xuất chuỗi hiển thị trên điều khiển
RangeValidator khi tính hợp lệ bị vi phạm.
+ Type Property: Chỉ định kiểu dữ liệu đề kiểm tra tính hợp lệ.
iv. RegularExpressionValidator là điều khiển dùng để kiểm tra tính hợp
lệ của giá trị trên điều khiển Input theo một khuôn mẫu của biểu thức.
Ví dụ, expression có thể là pattern của phone number, mail
Address,… Sau đây là cú pháp :
+ MarkUp code:
<asp:RegularExpressionValidator ID="valDate“
runat="server“ ControlToValidate="txtDate“
ErrorMessage="mm/dd/yy“ ValidationExpression
=“^((0[1-9]|[12][0-9]|3[01])/(0[1-9] | 1[012])
/ (?:19|20) \d \d)$">*
</asp:RegularExpressionValidator>
+ Programming code:
RegularExpressionValidator valDate = new
RegularExpressionValidator()
Các thuộc tính hay sử dụng:
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
97
+ ControlToValidate Property: Chỉ định hoặc truy xuất đến ID của điều
khiển Input cần kiểm tra tính hợp lệ.
+ Display Property: Chỉ định hoặc truy xuất hành vi của chuỗi thông báo
lỗi trên điều khiển Validation. Có thể nhận các giá trị None, Static,
Dynamic.
+ ErrorMessage Property: Truy xuất và chỉ định chuỗi thông báo lỗi
hiển thị trên điều khiển Validation Summary khi tính hợp lệ bị vi
phạm. Thuộc tính này cũng dùng để thông báo lỗi trên điều khiển
RangeValidator khi tính hợp lệ bị vi phạm nếu thuộc tính Text của
điều khiển không được chỉ định.
+ IsValid Property: Truy xuất hoặc chỉ định giá trị (true, false) chỉ định
xem dữ liệu Input có thỏa điều kiện hợp lệ hay không.
+ ValidationExpression Property: Chỉ định pattern của dữ liệu nhập vào.
Ví du: vldPhone. ValidationExpression=“[0-9]{3}-[0-9]{3}-[0-9]{4}”
v. CustomValidator là điều khiển dùng để kiểm tra tính hợp lệ của giá trị
nhập trên điều khiển Input có hợp lệ theo một logic đã chỉ định hay
không. Ta có thể dùng điều khiển này để kiểm tra số chẵn, lẻ, nguyên
tố, …
+ ClientValidationFunction property: Là thuộc tính dùng để chỉ định tên
hàm ở client – side được sử dụng để kiểm tra tính hợp lệ.
valSo.ClientValidationFunction="ClientValidat“
Ví dụ hàm kiểm tra số chia hết cho 5.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
98
<script language="javascript">
<!--
function ClientValidate(source, args)
{ if ((args.Value % 5) == 0)
args.IsValid=true;
else
args.IsValid=false;}
</script>
Chú ý: Để tạo client-side validation function cho đơn giản: Ta có thể
tạo server-side validation function được mô tả rất đơn giản (sử dụng
sự kiện ServerValidate). Sau đó, add client-side validation script
function tới trang .aspx.
+ ControlToValidate property: Chỉ định hoặc truy xuất ID của điều
khiển Input cần kiểm tra tính hợp lệ.
+ ErrorMessage property: Truy xuất và chỉ định chuỗi thông báo lỗi
hiển thị trên điều khiển Validation Summary khi tính hợp lệ bị vi
phạm. Thuộc tính này cũng dùng để thông báo lỗi trên điều khiển
RangeValidator khi tính hợp lệ bị vi phạm nếu thuộc tính Text của
điều khiển không được chỉ định.
+ ValidateEmptyText: Chỉ định hoặc truy xuất giá trị Boolean để chỉ ra
chuỗi Text rổng có là hợp lệ hay không. Nếu thuộc tính này nhận giá
trị True có nghĩa là chuỗi rồng là hợp lệ, ngược lại nhận giá trị False.
+ ServerValidate Event : Là sự kiện xuất hiện khi CustomValidator xác
nhận tính hợp lệ của thuộc tính ControlToValidate.
vi. ValidationSummary là điều khiển dùng để xem lại các thông báo lỗi
xuất hiện trên các điều khiển Validation khác. Điều khiển
ValidationSummary tổng hợp và hiển thị tất cả các thông báo lỗi trên
một trang.
Các thuộc tính hay sử dụng của lớp này gồm:
+ DisplayMode property: Chỉ định hoặc truy xuất đến cách thức hiển thị
Validation Summary.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
99
+ HeaderText property: Chỉ định hoặc truy xuất chuỗi tiêu đề của
Validation Summary.
+ ShowMessageBox property: Chỉ định hoặc truy xuất đến giá trị
Boolean chỉ dẫn các thông báo của Validation Summary có được hiển
thị trên MessageBox hay không (Mặc định là false - không)
+ ShowSummary property: Chỉ định hoặc truy xuất đến giá trị Boolean
chỉ dẫn các thông báo của Validation Summary có được hiển thị hay
không?
d. Thuộc tính Page.IsValid
Thuộc tính Page.IsValid thuộc lớp Page dùng để truy xuất đến giá trị chỉ
định sự kiểm tra tính hợp lệ của trang có thành công hay không. Thuộc tính
này nhận giá trị True khi tất cả các điều khiển Validation trên trang đều xác
nhận thành công tính hợp lệ.
Dựa trên giá trị trả về của thuộc tính Page.IsValid ta có thể quyết
định có tiếp tục hay không tiến trình Post Back tới Server. Nếu nó trả
về giá trị True, ta có thể tiếp tục Post Back. Tuy nhiên, nếu nó trả về
giá trị false, có nghĩa là tồn tại điều khiển Validation kiểm tra tính
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
100
hợp lệ không thành công, do đó tiến trình gửi Post back tới server bi
dừng. Với cung cấp này, thêm vào khả năng bảo mật cho Website.
2.6. Các đối tượng trong ASP.NET
2.6.1. Đối tượng Request và lớp HtttRequest
Một Request (yêu cầu) là sự tương tác giữa browse và server trong đó
browse “hỏi” server cho web page. Browse gửi URL để nhận dạng trang được
yêu cầu. Cùng với nó, URL chứa thông tin source của yêu cầu và đường dẫn của
trang yêu cầu. Các thông tin này được lưu trữ trong tập thuộc tính của đối tượng
Request.
Ðối tượng Request dùng để nhận thông tin yêu cầu được gửi từ Client Side
đến Server Side. Nó được cài đặt trong lớp HttpRequest thuộc tên miền
System.Web. Khi sử dụng đối tượng Request ta có thể sử dụng các thành phần
(collection) và thuộc tính của nó cho trong bảng 2.1.
Bảng 2.1. Các thuộc tính và phương thức của Request
Thuộc tính/Phương thức Mô tả
FilePath Trả về đường dẫn ảo của yêu cầu, thuộc tính này
tương đương vơi SCRIPT_NAME trong ASP.
Files Trả về HttpFileCollection của tập nhiều tập tin
được tải lên Server (sử dụng cho dạng multi-
part/forms).
Form Trả về một tập dữ liệu của nội dung từ
Form(NameValueCollection). Tham khảo
Request Collection trong phần kế tiếp.
Params Thuộc tính này sử dụng để lấy giá trị của phương
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
101
thức trong Form, QueryString, ServerVariable
hay Cookie
Path Ðường dẫn ảo của yêu cầu, tương đương với
PATH_INFO trong ASP.
PathInfo Ðường dẫn ảo của yêu cầu, tương đương với
PATH_INFO trong ASP.
PhysicalApplicationPath Ðường dẫn vật lý của thư mục gốc, tương đương
với APPL_PHYSICAL_PATH
PhysicalPath Ðường dẫn vật lý của yêu cầu, tương đương với
PATH_TRANSLATED trong ASP.
QueryString Trả về một tập dữ liệu của nội dung từ
QueryString (NameValueCollection). Cách truy
cập tập dữ liệu này khác với truy cập tập dữ liệu
từ Form của ASP.
TotalBytes Dung lượng của Stream trong luồng dữ liệu.
Url Ðối tượng Url chứa đựng chi tiết của yêu cầu.
Ðối tượng Url (từ không gian tên System) bao
gồm các thông tin chi tiết như Port, DNS,...
UserHostAddress Ðịa chỉ IP của người sử dụng, tương đương với
REMOTE_ADDR trong ASP.
UserHostName Tên DNS của người sử dụng, tương đương với
REMOTE_NAME trong ASP.
MapPath Chuyển đổi đường dẫn ảo thành đường dẫn vật
lý.
SaveAS Lưu yêu cầu HTTP vào đĩa.
+ ApplicationPath: Là thuộc tính trả về đường dẫn ảo của ứng dụng trên
Server.
public string ApplicationPath { get; }
Response.Write("Application Path is:" +
Request.ApplicationPath)
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
102
+ Browse: Là thuộc tính trả về các thuộc tính của client’s Browse.
public System.Web.HttpBrowserCapabilities Browser { get; set; }
HttpBrowserCapabilities = Request.Browser;
Response.Write("Name:" + browseInfo.Browser +
"</br> Version:" + browseInfo.Version) ;
+ PhysicalApplicationPath: Trả về đường dẫn vật lý của ứng dụng.
+ ContentLength: Là thuộc tính trả về độ dài nội dung client request
(tính bằng bytes)
public int ContentLength { get; }
+ FilePath: Là thuộc tính trả về đường dẫn ảo của trang trên server.
public string FilePath { get; }
+ RequestType: Thuộc tính QueryString dùng để nhận loại phương thức
truyền HTTP data là POST hay GET được sử dụng bởi client.
public string RequestType { get; set; }
Response.Write("Request type is:" +
Request.RequestType)
+ QueryString: QueryString được định nghĩa là một chuỗi nằm sau dấu
? trong chuỗi URL (Uniform Resource Locator) trên phần Address
của trình duyệt khi triệu gọi đến một trang Web.
Ví dụ: Ta gọi triệu địa chỉ sau:
http://192.168.10.12/Chapter-03/ex5.asp?al=A&page=cust
Trong đó, QueryString bao gồm các cặp tham số và giá trị sau:
al=A&page=cust
Các tham số được khai báo cách nhau bằng ký tự & và giá trị của mỗi tham
số được khai báo sau dấu = của mỗi tham số.
- Nếu tham số không có dấu bằng theo sau, giá trị của tham số đó sẽ
được trả về khi sử dụng Request.QueryString là null.
- Trong trường hợp có dấu bằng nhưng không tồn tại giá trị thì kết quả
trả về khi sử dụng Request.String là rỗng.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
103
Ví dụ:
foreach(string varName in Request.QueryString)
{
Response.Write("</br>" + varName +
"=" + Request.QueryString[varName]);
}
Ðối tượng Request cho phép truy cập đến nội dung của Form hay
QueryString, trong đó bao gồm các phần tử cùng tên như trong các trình bày
chúng ta sử dụng thẻ checkbox, radio,.v.v... cùng tên và khác giá trị như ví dụ
2.3 và ví dụ 2.4.
Ví dụ 2.3. Sử dụng đối tượng Request.Form (Vidu2_3.aspx).
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Well come to ASP.NET</title> </head> <body> <form action="vidu2_4.aspx?chon=ABC" method="post" > <div> Industry: <br /> <select name="listindu" multiple="multiple" > <option selected="selected" value="1">Chon</option> <option value="AUT"> Auto</option> <option value="ENG"> Engineering</option> <option value="FOO"> Foods</option> <option value="GAR"> Garment</option> </select> <input id="Submit1" type="submit" value="submit" /></div> </form> </body> </html>
Ví dụ 2.4. Sử dụng đối tượng Request.Form (Vidu2_4.aspx).
<%@ Page Language="C#" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { string st; st = ""; foreach (string st0 in Request.Form.GetValues("listindu")) { st = st + Server.HtmlEncode(st0); } lblListIndu.Text = st; lblQuerystring.Text = Request.QueryString["chon"]; } </script> <html xmlns="http://www.w3.org/1999/xhtml" >
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
104
<head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> Giá trị đã chọn: <asp:Label ID="lblListIndu" runat="server" Width="312px"></asp:Label> Query string: <asp:Label ID="lblQuerystring" runat="server" Text="Label"></asp:Label><br /> </div> </form> </body> </html>
Triệu gọi trang Vidu2_3.aspx ta được kết quả trên trình duyệt như hình 2.5.
Hình 2.5. Triệu gọi trang vidu2_3.aspx
Sau khi người sử dụng chọn một hay nhiều Industry, nếu nhấn nút Submit,
lập tức trang kế tiếp sẽ được triệu gọi, bằng cách sử dụng đối tượng Request
cùng với các phương thức và thuộc tính của nó, chúng ta sẽ lấy các giá trị mà
người sử dụng chọn như hình 2.6.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
105
Hình 2.6. Triệu gọi trang vidu2_4.aspx
+ SaveAs(): Là phương thức lưu toàn bộ yêu cầu lên đĩa. Cú pháp:
public void SaveAs(string filename, bool includeHeaders)
Ví dụ:
Request.SaveAs("C:\\HttpRequest.txt", True)
+ MapImageCoordinates(): Là phương thức ánh xạ tọa độ (x,y) trường
ảnh.
public int[ ] MapImageCoordinates(string imageFieldName)
Ví dụ: int[] coodinaters = Request.MapImageCoordinates("imgLogo");
Response.Write(coodinaters[0].ToString()+":"+
coodinaters[1].ToString());
+ MapPath(): Là phương thức ánh xạ đường dẫn ảo sang đường dẫn vật
lý.
public string MapPath(string virtualPath)
Ví dụ: Response.Write("MapPath:" + Request.MapPath("Test_QueryString.aspx"));
2.6.2. Đối tượng Response và lớp HttpResponse
Ðối tượng Respose dùng để gửi thông tin ngược trở lại Client Side từ
Server Side. Nó được cài đặt trong lớp HttpResponse thuộc tên miền
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
106
System.Web. Các thuộc tính của lớp này dùng để chỉ định và lấy các trạng thái
HTTP, kiểm tra client có kết nối đến server hay không, thông tin về cookies,…
Bảng 2.2. Các thuộc tính và phương thức của Response
Thuộc tính/Phương thức Mô tả
Expires Thuộc tính này chỉ định thời gian trước khi trang
đó được lưu trong bộ nhớ Catch của trình duyệt.
Người sử dụng có thể trở lại các trang trước đó
khi khoảng thời gian này chưa hết.
Redirect Chuyển hướng đến địa chỉ file trong cùng ứng
dụng hay URL khác trong lúc thi hành.
Write Ghi thông tin từ các kiểu dữ liệu như Char,
Object, String, Array ra trang Web.
WriteFile Ghi một luồng dữ liệu ra tập tin chỉ định.
ContentType Chỉ định nội dung phúc đáp.
Flush() Phương thức này gửi Buffer của Response đến client.
Các thuộc tính:
+ BufferOutput: Thuộc tính BufferOutput là thuộc tính dùng để chỉ định
Output của HTTP Request được chứa trong Buffer và sau đó được gửi
toàn bộ khi trang kết thúc tiến trình xử lý.
public bool BufferOutput{get; set}
Thuộc tính nhận giá trị true (mặc định) nếu Output tới client chứa trong
Buffer, ngược lại nhận giá trị false.
Ví dụ: if(Response.BufferOutput == true)
+ Charset : Thuộc tính cho phép nhận và thiết lập tập character set của
Response.
public string Charset { get; set; }
Ví dụ: Response.Write("CharSet:" + Response.Charset)
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
107
+ ContentEncoding: Thuộc tính cho phép nhận và thiết lập HTTP
character set của Response
public System.Text.Encoding ContentEncoding {get;
set; }
Ví dụ: Response.Write("Content Encoding:" +
Response.ContentEncoding.EncodingName)
+ ContentType : Thuộc tính cho phép nhận và thiết lập kiểu
Multipurpose Internet Mail Extension (MIME) của Response (mặc
định là “text/html”).
public string ContentType { get; set; }
Ví dụ: Response.Write("Content type:" +
Response.ContentType)
+ Cookies: Thuộc tính cho phép nhận tập hợp các cookies được truyền
tới client trong Response
public System.Web.HttpCookieCollection Cookies {
get; }
Ví dụ sau minh họa tạo một cookie mới tên là ‘name’, thiết lập giá trị cho cookie
và ghi cookie vào tập cookies hiện tại.
HttpCookie MyCookie = new HttpCookie(“name");
MyCookie.Value =“Chu Hường”;
MyCookie.Expires = now.AddMinutes(1);
Response.Cookies.Add(MyCookie);
+ IsClientConnected: Thuộc tính kiểm tran xem client có đang kết nối
với server hay không?
public bool IsClientConnected { get; }
Ví dụ:
if Response.IsClientConnected == True
{Response.Write("Client đang kết nối đến
Server");}
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
108
Một số phương thức hay được sử dụng:
+ Clear: Xóa tất cả nội dung của buffer streame hiện tại.
public void Clear()
+ ClearContent: Xóa tất cả nội dung của buffer streame.
public void ClearContent()
+ Close: Là phương thức dùng để đóng kết nối tới client
public void Close()
+ End: Là phương thức gửi tất cả buffered output tới client và thực thi
Response hiện tại.
public void End()
+ Redirect: Là phương thức gửi tới client một URL mới
public void Redirect(string url)
+ Write: Là phương thức viết thông tin tới HTTP Response
public void Write(string s)
Ví dụ 2.6. Sử dụng các thuộc tính của đối tượng Response (Vidu2_6.aspx).
<script runat="server"> Private Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Dim MyCookie As New HttpCookie("LastVisit") Dim now As DateTime = DateTime.Now
' Ghi giá trị xuống Cookies Response.Cookies.Clear() MyCookie.Value = now.ToString() MyCookie.Expires = now.AddHours(1) Response.Cookies.Add(MyCookie) Response.Write("Number cookie:" & Request.Cookies.Count & "<BR>")
' Đọc cookie For Each strKey As String In Request.Cookies Response.Write(strKey & " = " & _ Request.Cookies(strKey).Value & "<BR>") Next End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> </div>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
109
</form> </body>
</html>
Kết quả trên trình duyệt cho trong hình 2.9.
Hình 2.9. Triệu gọi trang vidu2_6.aspx
Ví dụ 2.7. Sử dụng các thuộc tính của đối tượng Response (Vidu2_7.aspx).
Trong ví dụ sẽ vẽ 3 hình chữ nhật thành khi trang được triệu gọi. Kết quả của
trang cho trong hình 2.10. <%@ Page Language="VB" %> <%@ import Namespace="System.Drawing" %> <%@ import Namespace="System.Drawing.Imaging" %> <%@ import Namespace="System.Drawing.Drawing2D" %> <script runat="server"> Private Sub Page_Load(sender As Object, e As EventArgs) ' Set the page's content type to JPEG files ' and clear all response headers. Response.ContentType = "image/jpeg" Response.Clear() ' Buffer response so that page is sent ' after processing is complete. Response.BufferOutput = True ' Create a font style. Dim rectangleFont As New Font( _ "Arial", 10, FontStyle.Bold) ' Create integer variables. Dim height As Integer = 100 Dim width As Integer = 200 ' Create a random number generator and create ' variable values based on it. Dim r As New Random() Dim x As Integer = r.Next(75) Dim a As Integer = r.Next(155) Dim x1 As Integer = r.Next(100)
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
110
' Create a bitmap and use it to create a ' Graphics object. Dim bmp As New Bitmap( _ width, height, PixelFormat.Format24bppRgb) Dim g As Graphics = Graphics.FromImage(bmp) g.SmoothingMode = SmoothingMode.AntiAlias g.Clear(Color.LightGray) ' Use the Graphics object to draw three rectangles. g.DrawRectangle(Pens.White, 1, 1, width - 3, height - 3) g.DrawRectangle(Pens.Aquamarine, 2, 2, width - 3, height - 3) g.DrawRectangle(Pens.Black, 0, 0, width, height) ' Use the Graphics object to write a string ' on the rectangles. g.DrawString("ASP.NET Samples", rectangleFont, SystemBrushes.WindowText, New PointF(10, 40)) ' Apply color to two of the rectangles. g.FillRectangle( _ New SolidBrush( _ Color.FromArgb(a, 255, 128, 255)), _ x, 20, 100, 50) g.FillRectangle( _ New LinearGradientBrush( _ New Point(x, 10), _ New Point(x1 + 75, 50 + 30), _ Color.FromArgb(128, 0, 0, 128), _ Color.FromArgb(255, 255, 255, 240)), _ x1, 50, 75, 30) ' Save the bitmap to the response stream and ' convert it to JPEG format. bmp.Save(Response.OutputStream, ImageFormat.Jpeg) ' Release memory used by the Graphics object ' and the bitmap. g.Dispose() bmp.Dispose() ' Send the output to the client. Response.Flush() End Sub 'Page_Load </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Wellcome to ASP.NET</title> </head> <body> <form id="Form1" runat="server"> </form> </body>
</html>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
111
Hình 2.10. Triệu gọi trang vidu2_7.aspx
2.6.3. Đối tượng Server và lớp HttpServerUtility
Đối tượng Server thể hiện các phương thức tiện ích đa dạng để truyển đổi
điều khiển giữa các trang, giải mã HTML text, nhận thông tin lỗi, … Đối tượng
Server thuộc lớp HttpServerUtility thuộc không gian miền System.Web
Lớp HttpServerUtility cung cấp các phương thức cho các tác vụ như tiến
trình xử lý các yêu cầu, mã hóa và giải mã các chuỗi URL, truy cập các thông
tin lỗi,…
Lớp HttpServerUtility cung cấp hai thuộc tính:
+ MachineName: Trả về tên Server mà ứng dụng đang chạy.
public string MachineName { get; }
+ ScriptTimeout: Lấy hoặc thiết lập thời gian (tính bằng giây) mà một
Request timeout.
public int ScriptTimeout { get; set; }
Một số phương thức của lớp HttpServerUtility thường được sử dụng đó là:
+ Execute: Là phương thức xử lý trang Web được chỉ định trên ngữ
cảnh (context) của current Request.
public void Execute(string path)
path: Là URL path cần được thực thi.
Ví dụ: Server. Execute(“www.example.com.login.aspx”);
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
112
+ HtmlEncode: Là phương thức mã hóa chuỗi ký tự để hiển thị trên
trình duyệt. Có hai dạng hàm:
� public string HtmlEncode(string s); Dùng để mã
chuỗi s và trả về chuỗi đã mã hóa.
Ví dụ:
str = "Xin chào </br>“;
strE = Server.HtmlEncode(str);
Response.Write("Bản gốc:" + str);
Response.Write("Bản mã:" + strE);
� public void HtmlEncode(string s,
System.IO.TextWriter output); Dùng để mã chuỗi s và
trả về chuỗi đã mã hóa cho output.
Ví dụ:
System.IO.StreamWriter out=new;
System.IO.StreamWriter("E:\Test.txt");
Server.HtmlEncode("Xin chao <Message>", out);
Server.HtmlDecode("Xin chao <Message>", out);
out.Flush();
+ MapPath: Là một hàm trả về đường dẫn vật lý.
public string MapPath(string path)
Ví dụ: Response.Write(Server.MapPath("\Testing")) ;
+ UrlEncode: Là phương thức mã hóa chuỗi URL:
public string UrlEncode(string s)
public void UrlEncode(string s,
System.IO.TextWriter output)
+ UrlDecode: Là phương thức giải mã chuỗi URL:
public string UrlDecode(string s)
public void UrlDecode(string s,
System.IO.TextWriter output)
Ví dụ: Chuỗi MyURL được mã hóa trước khi gửi đi Browse.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
113
String MyURL;
MyURL = "http://www.example.com" ;
Response.Write("<a href = " +
Server.UrlEncode(MyURL) + "> Example </a>");
Response.Write("<a href = " + MyURL + "> Example
</a>");
Response.Write("<a href = " +
Server.UrlDecode(Server.UrlEncode(MyURL)) + ">
Example </a>");
2.6.4. Đối tượng Application và lớp HttpApplicationState
Đối tượng Application được sử dụng để tham chiếu đến thể hiện của lớp
HttpApplicationState. Một Application State (trạng thái ứng dụng) lưu trữ toàn
bộ thông tin sử dụng qua lại nhiều phiên giao dịch (Session) và các yêu cầu
(request). Đối tượng Application nắm hầu hết các thông tin được sử dụng cho
nhiều trang của ứng dụng.
Lớp HtttpApplicationState thuộc không gian miền System.Web. Lần đầu
tiên Client yêu cầu tài nguyên URL từ thư mục ảo của ứng dụng ASP.NET thì
một thể hiện của lớp HttpApplicationState được tạo.
Các thuộc tính mới thêm vào của đối tượng Application được cho trong
bảng 2.3.
Bảng 2.3. Các thuộc tính và phương thức của Application
Thuộc tính/Phương thức Mô tả
AllKeys Trả về một mảng dạng chuỗi chứa đựng tên của
các phần tử trạng thái ứng dụng.
Count Trả về số phần tử trong ứng dụng.
Add Thêm phần tử vào ứng dụng.
Remove Xóa phần tử chỉ định.
Clear Xoá tất cả các phần tử trong ứng dụng.
Get Trả về một phần tử chỉ định.
GetKey Trả về khoá của phần tử chỉ định.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
114
Set Cập nhật giá trị của phần tử trong ứng dụng.
Mặc dù, ASP.NET hỗ trợ hầu hết các chức năng của ASP bằng Contents và
StaticObjects Collections, nhưng chúng cũng có một số khác nhau mà chúng ta
cần tìm hiểu. Chẳng hạn, hai phát biểu như sau là tương đương.
Application.Contents.Remove("Counter")
Application.Remove("Counter")
Thuộc tính của lớp “HttpApplicationState”:
+ AllKeys property: Truy xuất các Access Keys từ tập các trạng thái ứng
dụng.
string[] strKeys = new string[Application.Count];
strKeys = Application.AllKeys;
+ Contents property: Truy xuất tham chiếu đến đối tượng
HttpApplicationState.
protected void Page_Load(object sender, EventArgs e)
{ Application.Contents.RemoveAll();
Response.Write("Remove all items from current
application");
}
+ Count property: Đếm và truy xuất số các đối tượng.
int intObj=Application.Count;
+ Item property: Truy xuất đến từng đối tượng HttpApplicationState.
Sau đây là một số phương thức quan trọng của lớp HttpApplicationState:
+ Add Method: Là phương thức thêm một đối tượng mới vào tập trạng thái
ứng dụng.
public void Add(string name, Object value);
Đoạn code sau minh họa cách sử dụng phương thức Add
Application.Add(“UserName”, “Huongct”);
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
115
+ Clear Method: Là phương thức xóa tất cả đối tượng trong tập trạng thái
ứng dụng. Cú pháp (C#) của phương thức Clear là:
public void Clear();
Đoạn code sau minh họa cách sử dụng phương thức:
Application.Clear();
+ Remove Method: Là phương thức xóa một đối tượng chỉ định trong tập
trạng thái ứng dụng. Cú pháp (C#) của phương thức là:
public void Remove(string name);
Đoạn code sau minh họa cách sử dụng phương thức:
Application.Remove(“UserName”);
+ RemoveAll Method: Là phương thức xóa tất cả đối tượng trong tập trạng
thái ứng dụng. Cú pháp (C#) của phương thức là:
public void RemoveAll();
Đoạn code sau minh họa cách sử dụng phương thức:
Application.RemoveAll();
+ RemoveAt Method: Là phương thức xóa một đối tượng chỉ định trong tập
trạng thái ứng dụng. Cú pháp (C#) của phương thức là:
public void RemoveAt(int index);
Đoạn code sau minh họa cách sử dụng phương thức:
Application.RemoveAt(0);
Phương thức “Lock”:
Khi nhiều người dùng cùng truy cập vào
một ứng dụng ASP.NET, ứng dụng không thể
cho phép họ đồng thời truy cập thay đổi cùng
một dữ liệu. Để làm được điều này, ta cần khóa
các biến dữ liệu. Phương thức Lock(), thuộc lớp
HttpApplicationState, ngăn cản người dùng
khác thay đổi các biến lưu trữ trong đối tượng
Application. Cú pháp của phương thức Lock():
public void Lock()
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
116
Phương thức “UnLock”:
Phương thức UnLock(), thuộc lớp
HttpApplicationState, được sử dụng để mở khóa
cho các biến lưu trữ trong đối tượng Application.
Các biến khi đã được mở khóa thì các người dùng
khác có thể thay đổi chúng.
Phương thức Lock() được mở tương ứng bởi
phương thức UnLock(). Trong trường hợp không
gọi phương thức UnLock(), .NET Framework tự
động xóa Lock() khi Request được hoàn thành,
hoặc Request đến thời gian TimeOut, hoặc khi
xuất hiện ngoại lệ (Request fail).
Cú pháp của phương thức UnLock():
public void UnLock()
Ví dụ:
Application.Lock();
Application["VisitorsCount"] =
(int)Application["VisitorsCount"]+1;
Application.UnLock();
Ví dụ 2.8. Sử dụng các thuộc tính của đối tượng Application
(Vidu2_8.aspx). Kết quả trong hình 2.11. <%@ Page Language="VB" %> <script runat="server"> Private Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) If Application("Counter") = "" Then Application("Counter") = 1 Else Application("Counter") = Application("Counter") + 1 End If Response.Write(Application("Counter")) Response.Write("<br>") Application.Contents.Remove("Counter") If Application("Counter") = "" Then Application("Counter") = 10 Else Application("Counter") = Application("Counter") + 1 End If Response.Write(Application("Counter")) Application.Remove("Counter") End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" >
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
117
<head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html>
Hình 2.11. Triệu gọi trang vidu2_8.aspx
2.6.5. Đối tượng Cookies
a. Tạo và đọc Session Cookies
Một Session được định nghĩa là một khoảng thời gian bắt đầu và kết thúc
tương tác của người dùng với ứng dụng. Các thông tin của Session như Login,
Logout và các trang được viếng thăm được lưu trữ trên file temporary, được gọi
là Session Cookies.
Một Cookie là một file temporary (tạm) hoặc file permanent (thường
xuyên) được sử dụng bởi ứng dụng Web để lưu trữ thông tin người sử dụng. Các
Session Cookies có một khoảng thời gian giới hạn, quá thời hạn đó người dùng
phải Login lại.
Một Session Cookie có thể xem như là một cookie tạm thời. Session
Cookies được lư trữ tạm trên bộ nhớ. Khi trình duyệt bị đóng, các session
cookies này không được giữ lại. Do đó, lần tiếp theo, người dùng này viếng
thăm cùng một site thì anh ta được đối sử giống như một người khách mới.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
118
Thay vì tập hợp các thông tin từ máy tính của người sử dụng, session
cookies thường được sử dụng cho các ứng dụng Web mà trong đó các người
dùng cần được nhận dạng để họ có thể di chuyển từ trang này sang trang khác.
Ví dụ sau minh họa cách tạo và đọc Session Cookie: protected void btnAdd_Click(object sender, EventArgs e)
{
Response.Cookies["Login"]["User"] = txtUser.Text;
}
protected void btnView_Click(object sender, EventArgs e)
{
if (Request.Cookies["Login"] == null)
{
Response.Write("Không Cookies");
}
else
{
Response.Write("Thông tin Cookies:" +
Request.Cookies["Login"]["User"]);
}
}
b. “Persistent” Cookies
Xét các trang Login của các dịnh
vụ e-mail phổ biến như Hotmail và
Yahoo mail. Khi bạn Login vào mail
thì bạn được nhắc có lưu thông tin
login trên máy tính không, nếu bạn
chọn Yes thì các thông tin này được
lưu trữ trên Cookie. Lần Login tiếp
theo thì các thông tin này sẽ được tự
động xuất hiện tương ứng đúng vị trí.
Các Cookies lưu trữ thông tin
mà được ghi nhớ thông qua nhiều
phiên giao dịch được gọi là Persistent Cookies (Cookie bền).
Persistent Cookies được xem như là các cookies thường xuyên hay các
cookies lưu trữ. Các Persistent Cookies có thời gian sống (Expiry date) và được
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
119
lưu trữ trên đĩa cứng của người sử dụng cho đến khi hết thời gian sống hoặc cho
đến khi được xóa thủ công.
Ví dụ sau minh họa cách tạo Persitent Cookie: HttpCookie userInfoCookie = new HttpCookie("UserInfo");
userInfoCookie.Values["UserName"]="Huongct";
userInfoCookie.Values["LastVisit"] =
DateTime.Now.ToString();
userInfoCookie.Expires = DateTime.Now.AddDays(15);
Response.Cookies.Add(userInfoCookie);
// Đọc Cookies
if (Request.Cookies["UserInfo"] == null)
{
Response.Write("Không Persitent Cookies ");
}
else
{
Response.Write("Persitent Cookies :" +
Request.Cookies["UserInfo"]["UserName"]);
}
2.4.4. Đối tượng Session
Khi có nhu cầu truyền giá trị từ trang này sang trang khác trong một phiên
làm việc, ta sử dụng đối tượng Session. Bằng các sử dụng phương thức và thuộc
tính của đối tượng này. Ta có thể khởi tạo, gán giá trị, truy cập và huỷ đối tượng
này trong một phiên làm việc nhằm quản lý người sử dụng khi họ truy cập vào
Web Site. Web Server sẽ tự động tạo ra đối tượng Session khi chúng chưa tạo
ra, đối tượng này sẽ có chu trình sống cho đến khi một trong các điều kiện sau
xảy ra:
- Người sử dụng đóng trình duyệt, tức là đóng cửa sổ cuối cùng của
cùng một trình duyệt.
- Khi thời gian sống (expiry) của chúng hết hạn.
- Chúng ta khai báo huỷ bỏ đối tượng Session bằng các phương thức
của chúng.
Ðối tượng Session được cài đặt trong lớp HttpSessionState thuộc không
gian tên System.Web.SessionState. Hai thuộc tính Contents và StaticObjects
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
120
tương tự như trong đối tượng Application nhưng chỉ tính trong một phiên giao
dịch. Các thuộc tính và phương thức hay dùng của nó được cho trong bảng 2.4.
Bảng 2.4. Các thuộc tính và phương thức của Session
Thuộc tính/Phương thức Mô tả
Count Trả về số phần tử trong Session (phiên làm việc).
Clear Xoá tất cả các phần tử trong Session.
SessionID Trả về một giá trị là 1 chuỗi mà trình chủ cấp
cho Session
Remove Ðối với ASP.NET, bạn có thể xoá Session bằng
cách chỉ định tên. Trong trường hợp bạn muốn
xoá một phần tử trong Session theo chỉ mục, bạn
phải sử dụng phương thức RemoveAt(i).
RemoveAll() Xóa tất cả.
RemoveAt Khi bạn muốn xoá một phần tử trong Session
theo chỉ mục, bạn phải sử dụng phương thức
RemoveAt(i).
a. Session Variables
Session Variables được được sử dụng để lưu trữ thông tin về phiên làm
việc của một người sử dụng. Các thông tin này có thể sử dụng cho tất cả các
trang trong ứng dụng. Thông thường, thông tin được lưu trữ trong các biến
Session là UserName, Password,… Các Session Variables được xóa ngay khi
phiên làm việc của người dùng với Site kết thúc.
Session Variables được lưu trữ trong lớp SessionStateItemCollection thuộc
không gian miền System.Web.SessionState. Các biến này được trưng bày thông
qua thuộc tính System.Web.HttpContext.Session.
Ví dụ sau minh họa cách thiết lập Session Variable như thế nào: Session["UserID"] = "10011001";
if (Session["UserID"] == null)
{
Response.Write("Page has expired ");
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
121
}
else
{
Response.Write("Session User
ID:" +
Session["UserID"]);
}
b. Session State Events
ASP.NET cung cấp 2 sự kiện cho phép quản trị
Session đó là:
� Session_OnStart Event
� Session_OnEnd Event
+ Session_OnStart Event: Là sự kiện được điều
khiển bởi thủ tục Session_OnStart trên file
Global.asax. Sự kiện này nổ tại thời điểm bắt đầu
một Session. Một Session bắt đầu nếu request
tham chiếu đến một session có thuộc tính SessionID mà đã hết hiệu lực.
Sau đây là đoạn code minh họa:
void Session_Start(object sender, EventArgs e)
{
// Code that runs when a new session is
started
Application.Lock();
Application["VisitorsCount"] =
(int)Application["VisitorsCount"]+1;
Application.UnLock();
}
+ Session_OnEnd Event: Là sự kiện được điều khiển bởi thủ tục
Session_OnEnd trên file Global.asax. Sự kiện này nổ tại thời điểm
Session timeout.
Đoạn code sau minh họa sử dụng sự kiện:
void Session_End(object sender, EventArgs e)
{
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
122
// Code that runs when a session ends.
Response.Write(“Kết thúc phiên giao
dịch");
}
c. Session Identifiers
Sessions được nhận dạng bởi Session Identifiers, với giá trị duy nhất.
Session Identifiers được đọc thông qua thuộc tính SessionID. Khi trạng thái của
Session được Enable, mỗi request một trang trong ứng dụng đều được kiểm tra
giá trị SessionID. Nếu giá trị SessionID không được cung cấp thì một Session
mới được khởi tạo. Sau đó SessionID được gửi cho Session tới Browse cùng với
Response.
Theo mặc định, giá trị của SessionID được lưu trữ trên một Cookie. Đoạn
code sau minh họa sử dụng thuộc tính SessionID protected void Page_Load(object sender,EventArgs e)
{
Response.Write(“SessionID:“+Session.SessionID);
}
d. File “Global.asax”
Global.asax file được xem như là file ứng dụng ASP.NET. File này chứa
code cho việc trả lời ứng dụng hoặc các modul sự kiện trong một vị trí trung
tâm. File Global.asax là file lựa chọn, nó được tạo chỉ khi nếu cần điều điều các
sự kiện của ứng dụng hoặc Session.
Mỗi một ứng dụng ASP.NET chỉ có một và chỉ một file Global.asax. File
này không được Request và sử dụng bởi người sử dụng.
Trong file tự động khởi tạo 4 sự kiện liên quan đến việc khởi tạo và kết
thúc ứng dụng hoặc phiên làm việc.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
123
Ví dụ 2.9. Sử dụng các thuộc tính của đối tượng Session (Vidu2_9.aspx).
Kết quả trong hình 2.12. <%@ Page Language="VB" %> <script runat="server">
Private Sub Page_Load(sender As Object, e As System.EventArgs) Session.Timeout = 50 Session.Contents("Counter") = _ Session.Contents("Counter") + 10
Response.Write("Khoi tao Session trong ASPX <br>") Response.Write("Counter: " & _ Session.Contents("Counter")) Session.Contents.Remove("Countner") Session.Remove("Countner") Session.RemoveAll() End sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> </div>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
124
</form> </body> </html>
Hình 2.12. Triệu gọi trang vidu2_9.aspx
2.7. Giới thiệu ngôn ngữ lập trình .NET
.NET Framework cung cấp nhiều ngôn ngữ lập trình khác nhau, mỗi một
ngôn ngữ có cách khai báo biến và cấu trúc điều khiển khác nhau.
Trong một Project web sinh viên có thể sử dụng các ngôn ngữ lập trình
khác nhau trên mỗi trang. Sinh viên tự lựa chọn sử dụng một trong các ngôn ngữ
lập trình trong .NET để thực hiện lập trình ứng dụng Web của mình như C#,
VB,… Bảng 2.6 thể hiện sự tương ứng các kiểu dữ liệu trên các ngôn ngữ lập
trình khác nhau.
Bảng 2.6. Các kiểu dữ liệu
CLR (Common Language
Runtime) Type Visual Basic Type C# Type
Boolean Boolean bool
Byte Byte byte
Char Char char
DateTime Date DateTime
Decimal Decimal decimal
Double Double double
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
125
Int32 Integer int
Int64 Long long
Object Object Object
SByte SByte sbyte
Int16 Short short
Single Single float
String String string
UInt32 UInteger uint
UInt64 ULong ulong
UInt16 UShort ushort
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
126
Chương 3. LÀM VIỆC VỚI CƠ SỞ DỮ LIỆU
3.1. Các thao tác trên dữ liệu
Để xây dựng các trang web động ta cần thực hiện kết nối với dữ liệu. Trong
mục này củng cố giúp sinh viên ôn tập lại các lệnh SQL cơ bản và thực hiện kết
nối đến dữ liệu cài đặt trên hệ quản trị SQL Server.
3.1.1. Các lệnh cập nhật dữ liệu
a. Lệnh Insert
- Ý nghĩa: Dùng để chèn một hàng hoặc một số hàng cho bảng.
- Cú pháp:
+ INSERT INTO <Tên bảng> (Danh sách các cột) VALUES (Danh
sách các giá trị) hoặc
+ INSERT INTO <Tên bảng> (Danh sách các cột) (Các câu hỏi
con);
Ví dụ 2.4. Chèn dữ liệu vào bảng S.
INSERT INTO S (S#, SNAME, STATUS)
VALUES (s1, Smith, 20, Paris);
INSERT INTO S
SELECT * FROM W WHERE CITY="Paris";
b. Lệnh Update
- Ý nghĩa: Dùng để sửa đổi dữ liệu.
- Cú pháp:
UPDATE <Tên bảng>
SET <Tên_cột_1=Biểu_thức_1, Tên_cột_2=Biểu_thức_2,… >
[WHERE <điều kiện>]
Ví dụ 2.5. Sử dụng lệnh Update
UPDATE SINHVIEN SET TenSV="Nguyễn Thị Hạnh"
Where MaSV="20042390"
UPDATE HangHoa SET Dongia=Dongia*1.1
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
127
Where TenHH IS LIKE 'Bia %' and Dongia<3500
c. Lệnh Delete
- Ý nghĩa: Xoá một số hàng trong bảng.
- Cú pháp:
DELETE FROM <Tên bảng> WHERE <Điều kiện>
Ví dụ 2.6. Xoá tất cả các hàng trong bảng KETQUA có trường Diem<5
DELETE FROM KETQUA WHERE Diem<5;
3.1.2. Truy vấn dữ liệu
Khối câu lệnh phổ dụng: SELECT - FROM – WHERE. Ta có thể sử dụng
theo cú pháp chung như sau:
SELECT [*| DISTINCT] <Danh sách các cột [AS <Bí danh>]>
FROM <Danh sách Tên bảng/Tên View>
[WHERE <Biểu thức điều kiện>]
[GROUP BY <Danh sách cột>]
[HAVING <Điều kiện>]
[ORDER BY <Tên cột/ Số thứ tự cột/Biểu thức> [ASC/DESC]]
Trong đó:
+ Dấu * đại điện cho toàn bộ các cột của bảng.
+ DISTINCT: Dùng để lấy đại diện
+ AS: Đặt bí danh cho các trường (thường dùng đối với các biểu thức
tính toán).
+ Mệnh đề WHERE dùng để lọc các bản ghi.
+ Mệnh đề GROUP BY được sử dụng để tạo hiệu quả sắp xếp và tính
toán theo từng phân nhóm.
+ Mệnh đề HAVING dùng để đặt điều kiện lọc cho các phân nhóm
con.
+ Mệnh đề ORDER BY được sử dụng để tạo hiệu quả sắp xếp dữ liệu.
Ví dụ 1. Giả sử ta có bảng SANPHAM(MaSP, TenSP, Mota, AnhSP,
MaNhom)
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
128
Select MaSP, TenSP, Mota, AnhSP From SANPHAM Where
MaNhom=@MaNhom
Ví dụ 2. Cho bảng mặt hàng đã được cung cấp SP(S#, P#, QTY). Tìm mã
những nhà cung cấp cung cấp ít nhất 2 mặt hàng:
Select S# From SP
Group By S#
Having Count(Distinct P#)>=2;
Trong quá trình thực hiện truy vấn dữ liệu ta sử dụng một số toán tử và các
hàm thư viện sau:
- Xử lý xâu: dùng toán tử [NOT] LIKE <Mẫu so sánh>
+ Dùng dấu gạch dưới để thay cho một ký tự.
+ Dùng dấu % để thay cho một dãy các ký tự tuỳ ý.
- Sử dụng Between và IN để xác định phạm vi.
- Sử dụng các lượng từ: EXISTS, ANY, ALL,…
- Sử dụng các hàm thống kê dữ liệu.
+ Count(): Dùng để đếm các bảng ghi,
+ Max(): Trả về giá trị lớn nhất của một tập hợp các giá trị,
+ Min(): Trả về giá trị lớn nhất của một tập hợp các giá trị,
+ Sum(): Trả về tổng giá trị của một tập hợp các giá trị,
+ Avg():Trả về giá trị trung bình của một tập hợp các giá trị,
3.1.3. Xây dựng hàm và thủ tục trong SQL server
a. Xây dựng thủ tục
Một thủ tục (Store Procedure) là một tập các phát biểu T-SQL mà SQL
Server biên dịch thành một kế hoạch thực thi đơn. Lần đầu tiên khi SQL Server
thực thi store procedure thì nó biên dịch store procedure thành kế hoạch và lưu
trong bộ nhớ đệm. Mỗi khi gọi thực hiện store procedure này thì nó sử dụng lại
kế hoạch này mà không phải biên dịch lại lần nữa.
CREATE {PROC|PROCEDURE}[schema_name.] procedure_name [ ; number ] [{@parameter [type_schema_name.] data_type }
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
129
[VARYING][= default ][[ OUT|OUTPUT ] [,...n ]
[ WITH <procedure_option> [ ,...n ] AS { [ BEGIN ] statements [ END ] } [;] <procedure_option> ::=
[ ENCRYPTION ] [ RECOMPILE ]
Trong đó:
+ procedure_name: là tên của store procedure sẽ được tạo.
+ parameter: Là các tham số truyền vào store procedure, ta phải
định nghĩa chúng trong phần khai báo của store procedure. Khai
báo báo gồm tên của tham số (trước tên tham số sử dụng tiền tố @),
kiểu dữ liệu của tham số và một số chỉ định đặc biệt phụ thuộc vào
mục đích sử dụng của tham số đó.
+ ; number: Là số nguyên tùy chọn được sử dụng trong nhóm
các thủ tục có cùng tên.
+ data type: Kiểu của tham số trong phần khai báo.
+ [VARYING]: Đây là tùy chọn được chỉ định khi cursor trả về
như một tham số.
+ [= default] : Gán giá trị mặc định cho tham số. Nếu không
gán giá trị mặc định thì tham số nhận giá trị NULL.
+ OUTPUT: Đây là từ khóa chỉ định tham số đó là tham số xuất.
Tham số xuất không dùng được với kiểu dữ liệu Text và image.
+ [,...n]: Chỉ định rằng có thể khai báo nhiều tham số.
+ RECOMPILE:Chỉ định Database Engine không xây dựng kế
hoạch cho thủ tục này và thủ tục sẽ được biên dịch tại thời điểm
thực thi thủ tục.
+ ENCRYPTION:Chỉ định SQL Server sẽ mã hóa bản text lệnh
CREATE PROCEDURE. Users không thể truy cập vào các bảng hệ
thống hoặc file dữ liệu để truy xuất bản text đã mã hóa.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
130
b. Xây dựng hàm.
Một hàm do người dùng định nghĩa được tạo bằng cách sử dụng câu lệnh
CREATE FUNCTION theo cú pháp sau:
CREATE FUNCTION [owner_name.]function_name
(
[ {@parameter_name scalar_data_type [= default]}
[,...n] ]
)
RETURNS scalar_data_type |
TABLE(column_definition | table_constraint
[,...n])
[WITH ENCRYPTION | SCHEMABINDING [,...n] ]
[AS]
[BEGIN function_body END] | RETURN [(]
select_statement [)]
Trong đó:
+ [owner_name.]: Chỉ định tên đối tượng sẽ sở hữu. Ta không
phải bắt buộc chỉ định tên người sẽ tạo đối tượng sở hữu nó.
+ function_name: tên của hàm ta sẽ tạo.
+ parameter_name: Là các tham số Input cho hàm. Các tham
số này xây dựng cũng tương tự như trong stored procedure.
+ scalar_data_type: Là kiểu dữ liệu vô hướng của tham số.
Một hàm có thể nhận bất kỳ kiểu dữ liệu nào như là tham số trừ
các kiểu timestamp, cursor, text, ntext, image.
+ default: Chỉ định giá trị mặc định cho tham số, tương tự như
trong stored procedure.
+ [,...n]: Chỉ định một hàm có thể tạo nhiều tham số. Một
hàm trong SQL Server có thể chứa tới 1024 tham số.
+ RETURNS: từ khóa này chỉ định kiểu dữ liệu hàm sẽ trả về. Kiểu
dữ liệu của hàm có thể là một kiểu dữ liệu vô hướng hoặc một
bảng.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
131
+ scalar_data_type: Ta sẽ chỉ định kiểu dữ liệu nếu như hàm
trả về một giá trị vô hướng. Ở đây ta phải chỉ định kiểu độ dài dữ
liệu.
+ TABLE: Đây là kiểu dữ liệu cho phép hàm có thể trả về nhiều
dòng dữ liệu.
+ column_definition: Định nghĩa các cột cho kiểu dữ liệu
TABLE. Các cột này được định nghĩa tương tự như định nghĩa
các cột trong bảng.
+ table_constraint: Định nghĩa các ràng buộc trong kiểu
dữ liệu TABLE này.
+ [,...n]: Chỉ định có thể có nhiều cột và nhiều ràng buộc
trong bảng.
+ WITH ENCRYPTION: Từ khóa chỉ định code của hàm sẽ được
mã hóa trong bảng syscomments.
+ SCHEMABINDING: Từ khóa này chỉ định hàm được tạo để
buộc vào tất cả các đối tượng mà nó tham chiếu.
+ [,...n]: Chỉ dịnh có thể có nhiều từ khóa khác ngoài hai từ
khóa trên.
+ AS: Từ khóa cho biết code của hàm bắt đầu.
+ BEGIN: Đi cùng với END để tạo thành bao khối bao các câu
lệnh trong thân hàm.
+ function_body: thân của hàm.
+ END: Đi cùng với BEGIN để tạo thành bao khối bao các câu
lệnh trong thân hàm.
+ RETURN: Từ khóa này sẽ gửi giá trị tới thủ tục gọi hàm.
+ select_statement: đi kèm với RETURN để gửi giá trị
tới thủ tục gọi hàm.
3.2. Các điều khiển dữ liệu ASP.NET 2.0
3.2.1. Data Source Controls và Data-Bound Controls
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
132
a) Giới thiệu các điều khiển dữ liệu ASP.NET 2.0
* Giới thiệu Data Source Controls
ASP.NET 2.0 cung cấp một vài kiểu điều khiển Data Source Controls làm
việc tương thích với các kiểu Data Sources khác nhau, chúng bao gồm:
+ Điều khiển SqlDataSource control cho phép connections đến hầu
hết các CSDL quan hệ. Chú ý:
• Từ SQL trong tên điều khiển ám chỉ các Database hiểu
được ngôn ngữ SQL, bao gồm các CSDL xây dựng dữ
liệu theo mô hình quan hệ.
• Từ SQL không chỉ ám chỉ hệ quản trị CSDL SQL Server,
mà SqlDataSource control sử dụng cho một vài providers
được chỉ định cho các kiểu Database khác nhau. Provider
mặc định là cho CSDL SQL Server, ngoài ra còn cho
Oracle, OLEDB,.v.v…
+ Điều khiển AccessDataSource control là trường hợp đặc biệt của
của điều khiển SqlDataSource control chứa provider được tối ưu
cho CSDL Microsoft Access.
+ Điều khiển XMLDataSource control cho phép connection tới XML
sources.
+ Điều khiển SiteMapDataSource control là mẫu được thiết kế riêng
cho điều khiển XMLDataSource control.
+ Điều khiển ObjectDataSource control connects tới các đối tượng
business.
* Giới thiệu Data-Bound Controls
Data-bound controls là các điều khiển buộc dữ liệu, cung cấp kết nối giữa
các điều khiển data source controls với người sử dụng. Chúng có thể được phân
loại theo cách hiển thị như sau:
+ Tabular Controls: Là các điều khiển hiển thị một danh sách dữ liệu
của các bản ghi. Các điều khiển này hiển thị nhiều bản nghi trên
một dòng và một hoặc nhiều trường từ mỗi bản ghi là các cột, gồm
các điều khiển GridView, DataList, Repeater.v.v…
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
133
+ Single Record Display Controls: Như các điều khiển DetailsView,
và FormView hiển thị từng bản ghi ở tại mỗi thời điểm.
+ Selection List Controls: Là điều khiển cho phép người sử dụng lựa
chọn. Có 2 điều khiển hiển thị một trường dữ liệu đó là ListBox
controls và DropDownList controls.
+ Tree Controls: Là các điều khiển dữ liệu lưu trữ trên các nút.
Điểm khác nhau giữa các điều khiển buộc dữ liệu được cho trong bảng 3.5.
Điều khiển Cấu trúc
dữ liệu
chính
Các khả
năng Mô tả và ý nghĩa sử dụng chính
GridView
Table
Read and edit
Chia thành các cột cho mỗi trường,
mỗi giá trị của trường được hiển thị
trên một cell. Hiển thị nhiều bản ghi
trên lưới.
Edit các bản ghi đang tồn tại.
DataList Table or Tree
Read and edit
Tất cả các trường trên một cell. Một
cell chứa một record. Hiển thị nhiều
records trên một lưới.
Tạo bản ghi mới cho GridView
Repeater Table or
Tree
Read only Tất cả các trường trên một cell. Một
cell chứa một record. Hiển thị nhiều
records trên một lưới.
Tạo bản ghi mới cho GridView
DetailsView Table or
Tree
Read,
edit,
create
Hiển thị single records. Được cung
cấp cấu trúc mặc định.
Edit các bản ghi đang tồn tại
records
Tạo mới các records.
FormView Table or Read, edit,
Hiển thị single records. Không cấu
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
134
Tree create trúc mặc định.
Edit các bản ghi đang tồn tại
records
Tạo mới các records.
DropDownList
and ListBox
Table or
Tree
Read only List một vài trường. Gợi ý người sử
dụng lựa chọn.
Hiển thị dữ liệu cho người sử dụng
chọn.
SiteMapPath Tree Read only List tên trang từ home và trang hiện tại. Được sử dụng để định vị vị trí hiện
tại trong site.
Menu Tree Read only Hiển thị từng nút cho các lựa chọn. Được sử dụng để hiển thị Menu.
TreeView Tree Read only Hiển thị từng nút cho các lựa chọn theo cấu trúc cây. Được sử dụng để hiển thị nhiều nút
con tại một vị trí.
b) Sử dụng các điều khiển dữ liệu (Data controls)
i. Điều khiển SqlDataSource control: Ta sử dụng điều khiển
SqlDataSource control theo các bước cơ bản sau:
o Trong cửa sổ thiết kế trang Design View, kéo điều khiển
SqlDataSource control vào vùng thiết kế (hình 3.9).
o Mở smart task panel và click Configure Data Source. Xuất
hiện cửa sổ Choose your Data connection hình 3.10. Chọn
New Connection.
o Trong cửa sổ Cửa sổ Add connection (hình 3.11) ta nhập các
thông tin kết nối và click OK để quay về cửa sổ 3.10 và chọn
Next để tiếp tục.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
135
o Trong cửa sổ Save connection string to the Application
Configuration file (hình 12). Cho phép có lựa chọn save chuỗi
kết nối này trong file web config hay không?
o Trong cửa sổ Configure the Select Statement (hình 3.13) ta
chọn các trường cho câu lệnh Select. Chú ý, trong cửa sổ này
có các nút Where để thiết lập cho mệnh đề Where cho câu
lệnh Select (hình 3.14); nút Order By để sắp xếp dữ liệu.
o Chọn Next, xuất hiện cửa sổ Test Query (hình 3.15) để Test
truy vấn vừa tạo. Chọn Finsh để kết thúc.
Các bước trên tương ứng với khai báo thẻ như sau: <asp:SqlDataSource ID=”SqlDataSource1” runat=”server”
ConnectionString=”<%$ ConnectionStrings:MyConn %>”
SelectCommand=”SELECT [ProductID], [ProductType],
[ProductName], [ProductDescription], [ProductSize],
[ProductImageURL], [UnitPrice] FROM [Products]”>
</asp:SqlDataSource>
Chuỗi kết nối được khai báo trong tệp web config như sau: <connectionStrings>
<add name=”MyConn” connectionString=”Data Source=.;Initial
Catalog=QLBanHang;User ID=sa;Password=12102006”
providerName=”System.Data.SqlClient” />
</connectionStrings>
Chú ý:
- Khi không Save chuỗi kết nối trong tệp web config thì chuỗi kết nối
đó sẽ được khai báo tường minh trong source như sau.
- Trong lập trình người ta thường kết hợp hai cách thiết kế: Dùng chỉ
dẫn của Design View sau đó chuyển sang Source để hiệu chỉnh lại.
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="Data Source=.;Initial
Catalog=QLBanHang;User ID=sa;Password=12102006"
ProviderName="System.Data.SqlClient"
SelectCommand="SELECT [ProductID], [ProductType],
[ProductName], [ProductDescription], [ProductSize],
[ProductImageURL], [UnitPrice] FROM [Products]">
</asp:SqlDataSource>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
136
Hình 3.9. Cửa sổ thiết kế Web Page Designer
Hình 3.10. Cửa sổ Choose your Data connection
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
137
Hình 3.11. Cửa sổ Add connection
Hình 3.12. Cửa sổ Save connection string
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
138
Hình 3.13. Cửa sổ Configure the Select Statement
Hình 3.14. Cửa sổ thiết lập cho mệnh đề Where.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
139
Hình 3.15. Cửa sổ Test Query.
ii. Điều khiển ListBox controls và DropDownList controls: Ta minh họa
buộc các điều khiển trên vào dữ liệu thông qua ví dụ 3.3.
Ví dụ 3.3. Minh họa buộc điều khiển ListBox vào một mảng dữ liệu và
điều khiển DropDownList vào điều khiển Data Source (vidu3_4.aspx) <%@ Page Language="VB" %> <script runat="server"> Protected ListOfMonths() As Integer = {1,2,3,4,5,6,7,8,9,10,11,12} Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Me.MyListBox.DataBind() End Sub Protected Sub MyDropDownList_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Me.MyLabel.Text = "ProductID: " & Me.MyDropDownList.Text End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title> Select Controls</title> </head> <body> <form id="form1" runat="server"> <div>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
140
Buộc điều khiển List Box vào một mảng:<br/> <br/> <asp:ListBox ID="MyListBox" runat="server" DataSource="<%#
ListOfMonths%>" Height="160px" Width="80px"> </asp:ListBox><br /> <br /> Buộc điều khiển DropDownList vào Data Source Control<br /> <asp:DropDownList ID="MyDropDownList" runat="server"
DataSourceID="SqlDataSource1" DataTextField="ProductName" AutoPostBack="true" DataValueField="ProductID" OnTextChanged="MyDropDownList_TextChanged">
</asp:DropDownList><br /> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>"
SelectCommand="SELECT [ProductID], [ProductName] FROM [Products]"></asp:SqlDataSource>
<br /> <asp:Label ID="MyLabel" runat="server"></asp:Label> </div> </form> </body> </html>
Ta có thể sử dụng cửa sổ thuộc tính để khai báo cho các điều khiển, chẳng
hạn điều khiển DropDownList như hình 3.15.
Hình 3.16. Cửa sổ Properties
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
141
Chạy duyệt trang ví dụ trên cho ta kết quả như hình 3.17.
Hình 3.16. Kết quả duyệt ví dụ 3.3.
iii. Điều khiển Grid View: Điều khiển Grid View là điều khiển phát triển
từ điều khiển Data Grid (ASP.NET 1.0). Giống như Data Grid, Grid
view được sử dụng để hiển thị dữ liệu như một bảng dữ liệu. Sử dụng
Grid view để hiển thị, edit, delete, sort, và phân trang.
Grid View và DataGrid có thể buộc vào một điều khiển
DataSourceControl, nhưng Data Grid chỉ cho chọn dữ liệu. Việc Sort,
paging, updates, và delete phải được code bằng tay. Thì GridView
control supports thuộc tính DataSourceID làm cho điều khiển có thể tích
hợp được các khả năng sorting, paging, updating, và deleting của điều
khiển data source.
Ví dụ 3.4. Sử dụng Grid View để hiển thị dữ liệu, sorting và paging
(vidu3_5.aspx) <%@ Page Language="VB" %> <script runat="server"> </script>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
142
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [ProductDescription], [ProductSize], [ProductImageURL], [UnitPrice] FROM [Products]">
</asp:SqlDataSource> <asp:GridView ID="MyGridView" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" PageSize="2" DataSourceID="SqlDataSource1" DataKeyNames="ProductID"> <Columns> <asp:BoundField DataField="ProductID"
HeaderText="ProductID" SortExpression="ProductID"/>
<asp:BoundField DataField="ProductType" HeaderText="ProductType"/> <asp:BoundField DataField="ProductName" HeaderText="ProductName" /> <asp:BoundField DataField="ProductDescription" HeaderText="ProductDescription" /> <asp:BoundField DataField="ProductSize" HeaderText="ProductSize" /> <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" /> <asp:TemplateField HeaderText="Image"> <ItemTemplate> <asp:Image ID="Image1" runat="server"
ImageUrl='<%# Eval("ProductImageURL")%>'/> </ItemTemplate> </asp:TemplateField> </Columns> <PagerSettings FirstPageText="First" LastPageText="Last"
PageButtonCount="4" Position="TopAndBottom" FirstPageImageUrl="~/Images/btnFirst.gif" LastPageImageUrl="~/Images/btnLast.gif" NextPageImageUrl="~/Images/btn_next.gif" NextPageText="Next" PreviousPageImageUrl="~/Images/btn_previous.gif" PreviousPageText="Previous" />
</asp:GridView> </form> </body> </html>
Ta thực hiện thiết kế trong tab Design của cửa sổ Web Page Designer:
o Kéo điều khiển GridView vào cửa sổ thiết kế. Sau đó mở
Smart Task và chọn: DataSource, Paging để phân trang và
Sorting dùng để sắp xếp dữ liệu (Hình 3.17).
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
143
o Chọn Add New Column để thêm một cột thể hiện hình ảnh các
sản phẩm. Xuất hiện hình 3.18. Chọn kiểu trường là
TemplateFile và Header Text là Image. Sau đó click OK.
o Chọn Edit Template và chọn Template vừa tạo để hiệu chỉnh
xuất hiện cửa sổ hình 3.19. Trong cửa sổ này ta thêm thẻ
<Image> và uộc điều khiển này vào trường ProductImageURL
như hình 3.19.
o Thực hiện phân trang hiển thị. Trong cửa sổ Properties mở
rộng thuộc tính PagerSetting và Page size để định dạng phân
trang (hình 3.20):
• Mode: Kiểu duyệt trang (NextPreviousFirstLast,
Numeric, NextPrevious, NumericFirstLast).
• NextPageImagerURL: Địa chỉ ảnh của nút Next.
• NextPageText: Chuỗi Text của nút Next
• Tương tự cho các nút còn lại,…
• Pagesize: Số bản ghi trên một trang
Kết quả duyệt ví dụ 3.4 trong hình 3.21.
Hình 3.17. Cửa sổ Web Page Designer
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
144
Hình 3.18. Cửa sổ Add File
Hình 3.19. Cửa sổ Edit Template
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
145
Hình 3.20. Cửa sổ Properties
Hình 3.21. Duyệt ví dụ 3.4.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
146
iv. Điều khiển DataList và Repeater Controls: Là các điều khiển mà toàn
bộ thông tin của bản ghi sẽ được hiển thị trên một cell. Điểm khác nhau
giữa hai điều khiển này là DataList có định dạng và template mặc định
còn Repeater không có mà phải tự thiết kế. Cách tạo DataList tương tự
như Grid View.
Ví dụ 3.5. Sử dụng điều khiển DataList (vidu3_6.aspx) <%@ Page Language="VB" %> <script runat="server"> </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [ProductDescription], [ProductSize], [ProductImageURL], [UnitPrice] FROM [Products]">
</asp:SqlDataSource> <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" RepeatColumns="2"> <ItemTemplate> <asp:Image ID="Image1" runat="server"
ImageUrl='<%# Eval("ProductImageURL") %>' /><br /> Mã sản phẩm: <asp:Label ID="ProductIDLabel" runat="server"
Text='<%# Eval("ProductID") %>'></asp:Label><br /> Tên sản phẩm: <asp:Label ID="ProductNameLabel" runat="server"
Text='<%# Eval("ProductName") %>'></asp:Label><br /> Kiểu sản phầm: <asp:Label ID="ProductTypeLabel" runat="server"
Text='<%# Eval("ProductType")%>'></asp:Label><br /> Mô tả: <asp:Label ID="ProductDescriptionLabel" runat="server"
Text='<%# Eval("ProductDescription") %>'></asp:Label> Kích thước sản phẩm: <asp:Label ID="ProductSizeLabel" runat="server"
Text='<%# Eval("ProductSize")%>'></asp:Label><br /> Giá sản phẩm (USD): <asp:Label ID="UnitPriceLabel" runat="server"
Text='<%# Eval("UnitPrice") %>'></asp:Label><br /> </ItemTemplate> </asp:DataList> </form> </body> </html>
Kết quả triệu gọi ví dụ 3.5. cho trong hình 3.22.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
147
Hình 3.22. Duyệt ví dụ 3.5.
Ví dụ 3.6. Sử dụng điều khiển Repeater (vidu3_7.aspx) <%@ Page Language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [ProductDescription], [ProductSize], [ProductImageURL], [UnitPrice] FROM [Products]"> </asp:SqlDataSource> </div> <asp:Repeater ID="Repeater1" runat="server"
DataSourceID="SqlDataSource1"> <ItemTemplate> <asp:Image ID="Image1" runat="server"
ImageUrl='<%# Eval("ProductImageURL") %>' /><br /> Mã sản phẩm: <asp:Label ID="ProductIDLabel" runat="server"
Text='<%# Eval("ProductID") %>'></asp:Label><br /> Tên sản phẩm: <asp:Label ID="ProductNameLabel" runat="server"
Text='<%# Eval("ProductName") %>'></asp:Label><br /> Kiểu sản phầm: <asp:Label ID="ProductTypeLabel" runat="server"
Text='<%# Eval("ProductType")%>'></asp:Label><br /> Mô tả: <asp:Label ID="ProductDescriptionLabel" runat="server"
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
148
Text='<%# Eval("ProductDescription") %>'></asp:Label> Kích thước sản phẩm: <asp:Label ID="ProductSizeLabel" runat="server"
Text='<%# Eval("ProductSize")%>'></asp:Label><br /> Giá sản phẩm (USD): <asp:Label ID="UnitPriceLabel" runat="server"
Text='<%# Eval("UnitPrice") %>'></asp:Label><br /> </ItemTemplate> </asp:Repeater> </form> </body> </html>
Kết quả triệu gọi ví dụ 3.6. cho trong hình 3.23.
Hình 3.23. Duyệt ví dụ 3.6.
v. Điều khiển DetailsView và FormView Controls: Đây là hai điều khiển
buộc dữ liệu, tại một thời điểm chỉ hiển thị một bản ghi. Khi buộc dữ
liệu, điều khiển DetailsView tự động tạo các template FormView chỉ tạo
ra thẻ trắng và người thiết kế phải tự thiết kế các template.
Ví dụ 3.7. Sử dụng điều khiển DetailView (vidu3_8.aspx)
<%@ Page Language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>Untitled Page</title> </head> <body> <form id="form1" runat="server">
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
149
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductName], [ProductType], [ProductDescription], [ProductSize], [ProductImageURL], [UnitPrice] FROM [Products]">
</asp:SqlDataSource>
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataSourceID="SqlDataSource1" Height="50px" Width="440px" AllowPaging="True" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Horizontal">
<Fields> <asp:TemplateField HeaderText="Ảnh"> <ItemTemplate> <asp:Image ID="Image1" runat="server"
ImageUrl='<%# Eval("ProductImageURL") %>' /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="ProductID" HeaderText="Mã sản phẩm" SortExpression="ProductID" /> <asp:BoundField DataField="ProductName"
HeaderText="Tên sản phẩm" SortExpression="ProductName" />
<asp:BoundField DataField="ProductType" HeaderText="Kiểu sản phẩm" SortExpression="ProductType" />
<asp:BoundField DataField="ProductDescription" HeaderText="Mô tả sản phẩm:" SortExpression="ProductDescription" />
<asp:BoundField DataField="ProductSize" HeaderText="Kích thước sản phẩm" SortExpression="ProductSize" />
<asp:BoundField DataField="UnitPrice" HeaderText="Đơn giá (USD):" SortExpression="UnitPrice" />
</Fields> <PagerSettings PageButtonCount="4" /> <FooterTemplate> <span style="color: #ff0000"></span> </FooterTemplate> <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" /> <EditRowStyle BackColor="#738A9C" Font-Bold="True"
ForeColor="#F7F7F7" /> <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" /> <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" /> <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" /> <AlternatingRowStyle BackColor="#F7F7F7" /> </asp:DetailsView> </form> </body> </html>
Kết que triệu gọi ví dụ 3.7 như hình 3.24.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
150
Hình 3.24. Duyệt ví dụ 3.7.
Ví dụ 3.8. Minh họa việc sử dụng kết hợp điều khiển GridView và điều
khiển DetailView. Điều khiển GridView hiển thị danh sách các sản phầm còn
điều khiển DetailView hiển thị thông tin chi tiết sản phẩm mà người dùng chọn
trên điều khiển GridView. <%@ Page Language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [UnitPrice] FROM [Products]">
</asp:SqlDataSource>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
151
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" AllowPaging="True" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" DataKeyNames="ProductID" PageSize="5" GridLines="Horizontal">
<Columns> <asp:CommandField ShowSelectButton="True" ButtonType="Image"
SelectImageUrl="~/Images/dn.gif" /> <asp:BoundField DataField="ProductID" HeaderText="Mã sản phẩm"
SortExpression="ProductID" /> <asp:BoundField DataField="ProductType"
HeaderText="Kiểu sản phẩm"SortExpression="ProductType"/> <asp:BoundField DataField="ProductName"
HeaderText="Tên sản phẩm" SortExpression="ProductName"/> <asp:BoundField DataField="UnitPrice"
HeaderText="Giá(USD)" SortExpression="UnitPrice" /> </Columns> <PagerSettings PageButtonCount="4" /> <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" /> <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
<PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" /> <AlternatingRowStyle BackColor="#F7F7F7"/> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>"
SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [ProductDescription], [ProductSize], [ProductImageURL], [UnitPrice] FROM [Products] WHERE ([ProductID] = @ProductID)">
<SelectParameters> <asp:ControlParameter ControlID="GridView1" DefaultValue="2" Name="ProductID" PropertyName="SelectedValue" Type="Int32" /> </SelectParameters> </asp:SqlDataSource> Thông tin chi tiết<br /> <asp:DetailsView ID="DetailsView1" runat="server"
AutoGenerateRows="False" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" DataSourceID="SqlDataSource2"
GridLines="Horizontal" Height="50px" Width="440px"> <PagerSettings PageButtonCount="4" /> <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" /> <EditRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" /> <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" /> <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C"
HorizontalAlign="Right" />
<Fields> <asp:TemplateField HeaderText="Ảnh"> <ItemTemplate> <asp:Image ID="Image1" runat="server"
ImageUrl='<%# Eval("ProductImageURL") %>' /> </ItemTemplate> </asp:TemplateField>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
152
<asp:BoundField DataField="ProductName" HeaderText="Tên sản phẩm" SortExpression="ProductName" />
<asp:BoundField DataField="ProductID" HeaderText="Mã sản phẩm" SortExpression="ProductID" /> <asp:BoundField DataField="ProductType"HeaderText="Kiểu sản phẩm"
SortExpression="ProductType" /> <asp:BoundField DataField="ProductDescription" HeaderText="Mô tả:"/> <asp:BoundField DataField="ProductSize" HeaderText="Kích thước"
SortExpression="ProductSize" /> <asp:BoundField DataField="UnitPrice" HeaderText="Đơn giá:" /> </Fields> <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" /> <AlternatingRowStyle BackColor="#F7F7F7" /> </asp:DetailsView> </form> </body> </html>
Chú ý: Xây dựng mệnh đề Where cho điều khiển SqlDataSource2 để kết
nối dữ liệu giữa hai điều khiển như hình 3.25.
Kết quả duyệt ví dụ 3.8. cho trong hình 3.26.
Hình 3.25. Xây dựng mệnh đề Where.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
153
Hình 3.26. Duyệt ví dụ 3.8.
3.2.2. Các thao tác dữ liệu với Data Controls
a) Giới thiệu các thao tác ghi dữ liệu
Không phải tất cả các điều khiển dữ liệu đều support cho việc ghi dữ liệu.
Đối với các điều khiển data source controls, tất cả đều support cho việc ghi dữ
liệu trừ điều khiển SiteMapDataSource.
Nhưng giữa các điều khiển buộc dữ liệu (data-binding controls) còn có khá
nhiều các hạn chế. Các điều khiển chọn danh sách dữ liệu (DropDownList và
ListBox) không support cho việc ghi dữ liệu. Các điều khiển buộc dữ liệu trong
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
154
phiên bản mới ASP.NET 2.0 support cung cấp các phương thức tốt nhất cho
việc ghi dữ liệu là: GridView, DetailsView, và FormView.
Tuy nhiên, GridView chỉ có thể update các bản ghi đã tồn tại, không tạo
mới bản ghi đã tồn tại, không tạo mới các bản ghi. DataList và Repeater có thể
sử dụng cho việc ghi dữ liệu, nhưng chúng là các điều khiển trong các phiên bản
cũ nên trong một số trường chúng ta phải sử dụng các công nghệ cũ trong
ASP.NET 1.1.
b) Updating các bản ghi
Trước khi đi vào các thao tác ghi dữ liệu ta xét thuộc tính DataKeyNames
của điều khiển buộc dữ liệu liên quan đến các thao tác đó.
Thuộc tính DataKeyNames:
Tại cùng một thời điểm ta có thể có cùng một vài kiểu ghi dữ liệu cho một
trường, do đó Visual Web Developer thêm thuộc tính DataKeyNames cho điều
khiển buộc dữ liệu với mục đích giữ cả hai giá trị cũ và mới của một trường nào
đó làm cho việc ghi dữ liệu được thực hiện một cách chính xác.
Để hiểu vai trò của thuộc tính DataKeyNames, ta hình dung trong hệ thống
web site có một bảng ghi thông tin các ý kiến phản hổi từ khách hàng gọi là
Comments. Trong bảng ta có một trường đầu tiên là trường kiểu số
CommentsID nhận giá trị duy nhất cho mỗi dòng. Khách hàng sẽ gửi các ý kiến
kiến phản hồi của mình và được lưu trong bảng. Đến một lúc nào đó các thông
tin được sắp xếp lộn xộn và nhà quản trị phải thay đổi các ID cho các ý kiến đó,
ví dụ từ 20 chuyển sang 19. Để làm điều này, người quản trị sẽ chọn bản ghi
muốn thay đổi (chẳng hạn dùng điều khiển Grid view) và ASP.NET 2.0 sẽ lưu
giá trị ID đó vào một tham số. Người quản trị sẽ gửi câu lệnh như sau đến
database:
UPDATE Comments SET Comment =19 WHERE Comment =@CommentID
Lưu ý là trong câu lệnh trên tên trường đã thay đổi (CommentsID) để câu
lệnh nhận dạng bản ghi cần thay đổi giá trị. Đúng ra phải là WHERE
CommentsID=@CommentsID nhưng sẽ bị xảy ra xung đột bởi vì
@CommentsID nhận hai giá trị: Một giá trị cũ được lưu trên GridView (giá trị
20) và một giá trị mới do người quản trị nhập vào (19).
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
155
DataKeyNames giải quyết vấn đề này bằng cách tạo một từ điển giữ hai giá
trị này cho các trường trong danh sách của chúng: Một giá trị cũ và một giá trị
mới. Khi câu lệnh được gửi đến Database, ASP.NET sử dụng khả năng thông
minh của mình để cung cấp giá trị mới từ DataKeyNames cho mệnh đề SET của
câu lệnh và sử dụng giá trị cũ từ DataKeyNames cho mệnh của câu lệnh.
Thật là lãng phí và chậm khi load up từ điển DataKeyNames với mọi
trường, đặc biệt là bởi vì hầu hết các trường không gây ra sự xung đột như trên.
Visual Web Developer tự động adds các trường mà cấu trúc của nó duy nhất
trong database.
Ta sử dụng thuộc tính DataKeyNames để thiết lập một danh sách các
trường (cách nhau bởi dấu phẩy) thể hiện khóa chính của data source. Khi thuộc
tính DataKeyNames được thiết lập thì các điều khiển buộc dữ liệu (DetailsView,
FormView, GridView) tự động tạo đối tượng DataKey thể hiện trường hoặc các
trường khóa của bản ghi hiện tại và lưu trữ trong thuộc tính DataKey của nó.
Khi thuộc tính AutoGenerateColumns của các đối tượng buộc dữ liệu thiết lập là
True thì các trường chỉ định trong DataKeyNames tự động thiết lập là Read
Only.
Chú ý: Ta phải thiết lập cho thuộc tính DataKeyNames cho các thao tác tự
động Update, Delete và Insert cho điều khiển DetailsView và FormView;
Update và Delete cho điều khiển GridView.
Thực hiện Update dữ liệu:
Để thực hiện Update các bản ghi ta thực hiện thông qua hai bước cơ bản:
1. Khai báo thuộc tính UpdateCommand và thuộc tính
UpdateCommandType của điều khiển DataSource được khai báo
như sau:
o Trường hợp ta trực tiếp sử dụng câu lệnh SQL Update
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ...
UpdateCommand =”UPDATE [MyTable] SET [Field1] = @Field1,... [Field2] = @Field2 WHERE [Field1] = @Field1”> ...
</asp:SqlDataSource>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
156
o Hoặc sử dụng thủ tục StoredProcedure:
<asp:SqlDataSource ID="SqlDataSource1" runat="server" … UpdateCommandType="StoredProcedure" UpdateCommand="Update_storedProcedureName"> …
</asp:SqlDataSource>
Trong trường hợp này ta cần phải khai báo thuộc tính
UpdateCommandType="StoredProcedure" mặc định thuộc tính này
nhận giá trị UpdateCommandType="Text"
2. Khai báo các tham số <UpdateParameters> cho câu lệnh Update
trên. Các điều khiển data source của ASP.NET chấp nhận các tham
số vào (input parameters) để mà có thể chuyển các giá trị cho chúng
tại thời điểm thực hiện. Ta sử dụng tham số parameters để cung cấp
điều kiện tìm kiếm cho việc truy xuất dữ liệu, cung cấp giá trị cho
các thao tác dữ liệu như inserted, updated, hoặc deleted trong kho
lưu trữ dữ liệu; và để cung cấp các giá trị cho việc sorting, paging,
và filtering.
Ta có thể sử dụng tham số để tùy chỉnh các giá trị gửi đến data
source bởi các điều khiển buộc dữ liệu, chẳng hạn như GridView,
DetailView, hoặc FormView, mà được supports tự động các thao tác
update, insert, và delete.
Các giá trị Parameter có thể thu được từ nhiều nguồn khác nhau.
Các đối tượng tham số cho phép ta có thể lấy các giá trị các thao tác
dữ liệu từ các thuộc tính của các điều khiển Web server, cookies,
session state, QueryString fields, user profile properties,.v.v…
Ta thực hiện khai báo như sau:
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [ProductDescription], [ProductSize], [ProductImageURL], [UnitPrice] FROM [Products]" UpdateCommandType="StoredProcedure" UpdateCommand="Update_Products">
<UpdateParameters> <asp:Parameter Direction="ReturnValue" Name="RETURN_VALUE"
Type="Int32" />
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
157
<asp:Parameter Name="ProductID" Type="Int32" /> <asp:Parameter Name="ProductType" Type="String" /> <asp:Parameter Name="ProductName" Type="String" /> <asp:Parameter Name="ProductDescription" Type="String" /> <asp:Parameter Name="ProductSize" Type="String" /> <asp:Parameter Name="ProductImageURL" Type="String" /> <asp:Parameter Name="UnitPrice" Type="Double" /> </UpdateParameters>
</asp:SqlDataSource>
Ví dụ 3.9. Thực hiện thao tác cập nhật dữ liệu với các điều khiển
sqlDataSource và GridView (trang vidu3_10.aspx).
<%@ Page Language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>"
ProviderName="<%$ ConnectionStrings:MyConn.ProviderName %>" UpdateCommand="UPDATE Products SET ProductType = @ProductType, ProductName = @ProductName, ProductDescription = @ProductDescription, ProductSize = @ProductSize, ProductImageURL = @ProductImageURL, UnitPrice = @UnitPrice WHERE (ProductID = @ProductID)" SelectCommand="SELECT * FROM [Products]">
</asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="ProductID">
<Columns> <asp:CommandField ShowEditButton="true"
EditText="<IMG SRC='Images/icon_edit.gif' border=0/>" UpdateText="Update" CancelText="Cancel" />
</Columns> </asp:GridView> </form> </body> </html>
Ví dụ 3.10. Thực hiện thao tác cập nhật dữ liệu với các điều khiển
sqlDataSource và GridView sử dụng storeprocedure (trang vidu3_11.aspx). <%@ Page Language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductType],
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
158
[ProductName],[ProductDescription], [ProductSize], [ProductImageURL],[UnitPrice] FROM [Products]" UpdateCommandType="StoredProcedure" UpdateCommand="Update_Products"> <UpdateParameters> <asp:Parameter Name="ProductID" Type="Int32" /> <asp:Parameter Name="ProductType" Type="String" /> <asp:Parameter Name="ProductName" Type="String" /> <asp:Parameter Name="ProductDescription" Type="String"/> <asp:Parameter Name="ProductSize" Type="String" /> <asp:Parameter Name="ProductImageURL" Type="String" /> <asp:Parameter Name="UnitPrice" Type="Double" /> </UpdateParameters> </asp:SqlDataSource> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"> <Columns> <asp:CommandField ShowEditButton="true" EditText="<IMG SRC='Images/icon_edit.gif' border=0/>" UpdateText="Update" CancelText="Cancel" /> <asp:BoundField DataField="ProductID" HeaderText="ProductID"SortExpression="ProductID"/> <asp:BoundField DataField="ProductType" HeaderText="ProductType" /> <asp:BoundField DataField="ProductName" HeaderText="ProductName" /> <asp:BoundField DataField="ProductDescription" HeaderText="ProductDescription" /> <asp:BoundField DataField="ProductSize" HeaderText="ProductSize" /> <asp:BoundField DataField="ProductImageURL" HeaderText="ProductImageURL" /> <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" /> </Columns> </asp:GridView> </form> </body> </html>
Kết quả duyệt ví dụ 3.10 và ví dụ 3.11. được cho trong hình 2.27.
Chú ý: Khi thiết kế trong Visual Web Developer ta nên kết hợp giữa hai cửa
sổ Design và Source. Trong cửa sổ Design ta chọn cửa sổ thuộc tính của
SqlDataSource như hình 3.28. và thực hiện thiết lập giá trị cho các thuộc tính:
o Thuộc tính UpdateCommandType: Text hoặc StoreProcedure
o Thuộc tính UpdateCommand: Ta click vào nút … để tạo truy
vấn trên cửa sổ Command and Paramater Editer hình 2.29.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
159
Hình 3.27. Duyệt ví dụ 3.9.
Hình 3.28.Cửa sổ thuộc tính của sqlDataSource.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
160
Hình 3.29.Cửa sổ Command and Paramater Editer.
Ví dụ 3.11. Minh họa việc sử dụng SqlDataSource để hiển thị dữ liệu trên
điều khiển DropDownList và thực hiện Update dữ liệu khi nút Submit được click.
Các tham số trong câu lệnh Update được cung cấp từ hai điều khiển (trang
vidu3_12.aspx). <%@Page Language="VB" %> <SCRIPT runat="server"> Sub On_Click(ByVal source As Object, ByVal e As EventArgs) Try Me.SqlDataSource1.Update() Catch except As Exception ' Handle the Exception. End Try Label2.Text="The record was updated successfully!" End Sub 'On_Click </SCRIPT> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Updating</title> </head> <body> <form id="FORM1" runat="server"> <asp:SqlDataSource id="SqlDataSource1" runat="server"
ConnectionString="server=HP520-9B01514BF;database=NorthWind; user id=sa;password=12102006"
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
161
SelectCommand="SELECT EmployeeID, LastName, Address FROM Employees" UpdateCommand="UPDATE Employees SET Address=@Address WHERE EmployeeID=@EmployeeID"> <UpdateParameters>
<asp:ControlParameter Name="Address" ControlId="TextBox1" PropertyName="Text"/>
<asp:ControlParameter Name="EmployeeID" ControlId="DropDownList1" PropertyName="SelectedValue"/>
</UpdateParameters> </asp:SqlDataSource>
<asp:DropDownList
id="DropDownList1" runat="server" DataTextField="LastName" DataValueField="EmployeeID" DataSourceID="SqlDataSource1">
</asp:DropDownList><br /><br />
<asp:Label id="Label1" runat="server" Text="Enter a new address for the selected user." /><br />
<asp:TextBox id="TextBox1" runat="server" /> <asp:Button id="Submit" runat="server" Text="Submit" OnClick="On_Click" />
<asp:Label id="Label2" runat="server" Text="" /> </form> </body> </html>
Sử dụng thuộc tính OldValuesParameterFormatString của điều khiển
Data Source: Thuộc tính này là một chuỗi String định dạng áp dụng cho tên của
các tham số nhận giá trị cũ oldValuesParameters để chuyển sang cho các phương
thức Update và Delete.
Chuỗi định dạng OldValuesParameterFormatString chỉ được áp dụng cho
primary keys, như là các trường định danh được định nghĩa trong thuộc tính
DataKeyNames liên quan đến các điều khiển buộc dữ liệu, hoặc là trong các tình
huống Update và Delete mà thuộc tính ConflictDetection được thiết lập là
CompareAllValues và tập các giá trị cũ được chuyển qua các phương thức tương
ứng. Trong trường hợp này, chuỗi định dạng được áp dụng cho tên các tham số
chứa tập các giá trị cũ. Mặc định chuỗi này nhận giá trị là "{0}" (ví dụ, nếu ta
thiết lập thuộc tính OldValuesParameterFormatString= "old_{0}" thì các
tham số chứa giá trị nguyên thủy sẽ nhận tiền tố là old_; như vậy nếu ta có một
trường LastModifiedDate thì tham số tên là @LastModifiedDate sẽ
được tạo để chuyển giá trị hiện tại và tham số @old_LastModifiedDate
được tạo để chuyển giá trị nguyên thủy.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
162
Ví dụ 3.12. Minh họa sử dụng thuộc tính OldValuesParameterFormatString
dùng để cập nhật dữ liệu cho bảng Customers trong CSDL NorthWind (trang
vidu3_13.aspx). <%@ Page language="VB" %> <script runat="server"> Sub CustomersGridView_RowUpdating(ByVal sender As Object, ByVal e As GridViewUpdateEventArgs) Me.CustomersSqlDataSource.OldValuesParameterFormatString = "oldCustomserID" End Sub </script> <html xmlns ="http://www.w3.org/1999/xhtml"> <head> <title>Updating</title> </head> <body> <form id="Form1" runat="server"> <h3>GridView RowUpdating Example</h3> <asp:gridview id="CustomersGridView" runat="server" datasourceid="CustomersSqlDataSource" autogeneratecolumns="false" autogenerateeditbutton="true" allowpaging="true" DataKeyNames="CustomerID" onrowupdating="CustomersGridView_RowUpdating"> <Columns> <asp:BoundField DataField="CustomerID" HeaderText="CustomerID"/> <asp:BoundField DataField="CompanyName" HeaderText="CompanyName"/> <asp:BoundField DataField="Address" HeaderText="CompanyName" /> </Columns> </asp:gridview> <asp:sqldatasource id="CustomersSqlDataSource" selectcommand="Select [CustomerID], [CompanyName], [Address] From [Customers]" updatecommand="Update Customers SET CustomerID = @CustomerID,CompanyName=@CompanyName, Address=@Address Where (CustomerID = @oldCustomserID)" connectionstring="server=HP520-9B01514BF;database=NorthWind; user id=sa;password=12102006" runat="server"> <UpdateParameters> <asp:Parameter Name="CustomerID" Type="String" /> <asp:Parameter Name="CompanyName" Type="String"/> <asp:Parameter Name="Address" Type="string"/> <asp:Parameter Name="oldCustomerID" Type="string" /> </UpdateParameters> </asp:sqldatasource> <asp:Label ID="Label1" runat="server"Text="Label"> </asp:Label> </form> </body> </html>
Trong chuỗi UpdateCommand trên ta thấy mệnh đề SET
CustomerID=@CustomerID thuộc tính CustomerID nhận giá trị mới, còn
trong mệnh đề WHERE CustomerID = @oldCustomserID thuộc tính
CustomerID nhận giá trị cũ để định vị bản ghi cần thay đổi trong CSDL.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
163
Ví dụ 3.13. Minh họa sử dụng thuộc tính OldValuesParameterFormatString
dùng để cập nhật dữ liệu cho bảng Customers trong CSDL NorthWind (trang
vidu3_14.aspx). Trong ví dụ này để thử nghiệm các trường CustomerID,
CompanyName nhận giá trị mới còn trường Address nhận giá trị cũ. <%@ Page language="VB" %> <script runat="server"> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Me.CustomersSqlDataSource.OldValuesParameterFormatString = "old_{0}" End Sub </script> <html xmlns ="http://www.w3.org/1999/xhtml"> <head> <title>gfgfg</title> </head> <body> <form id="Form1" runat="server"> <h3>GridView RowUpdating Example</h3> <asp:gridview id="CustomersGridView" datasourceid="CustomersSqlDataSource" autogeneratecolumns="false" autogenerateeditbutton="true" allowpaging="true" DataKeyNames="CustomerID" runat="server"> <Columns> <asp:BoundField DataField="CustomerID" HeaderText="CustomerID"/> <asp:BoundField DataField="CompanyName"HeaderText="CompanyName" /> <asp:BoundField DataField="Address" HeaderText="Address" /> </Columns> </asp:gridview> <asp:sqldatasource id="CustomersSqlDataSource" selectcommand="Select [CustomerID],[CompanyName],[Address]From [Customers]" updatecommand="Update Customers SET CustomerID = @CustomerID,CompanyName=@CompanyName, Address=@old_Address Where (CustomerID = @old_CustomerID)" connectionstring="server=HP520-9B01514BF;database=NorthWind; user id=sa;password=12102006" runat="server" ConflictDetection="CompareAllValues"> <UpdateParameters> <asp:Parameter Name="CustomerID" Type="String" /> <asp:Parameter Name="CompanyName" Type="String"/> <asp:Parameter Name="Address" Type="String"/> <asp:Parameter Name="old_Address" Type="String"/> <asp:Parameter Name="old_CustomerID" Type="String" /> </UpdateParameters> </asp:sqldatasource> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </form> </body> </html>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
164
c) Xóa các bản ghi
Các kỹ thuật thực hiện xóa các bản ghi tương tự như Update các ghi.
Tương tự đối với điều khiển data source ta thực hiện khai báo:
1. Khai báo hai thuộc tính DeleteCommand và DeleteCommandType
DeleteCommand="DELETE FROM Products WHERE
(ProductID = @ProductID)"
2. Khai báo các tham số <DeleteParameters>
<DeleteParameters> <asp:Parameter Name="ProductID" /> </DeleteParameters> Ví dụ 3.14. Thực hiện xóa dữ liệu từ điều khiển Grid View (vidu3_15.aspx) <%@ Page Language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> </div> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" ProviderName="<%$ ConnectionStrings:MyConn.ProviderName %>" UpdateCommand="UPDATE Products SET ProductType = @ProductType, ProductName = @ProductName, ProductDescription = @ProductDescription, ProductSize = @ProductSize,ProductImageURL = @ProductImageURL, UnitPrice = @UnitPrice WHERE (ProductID = @ProductID)" SelectCommand="SELECT * FROM [Products]" DeleteCommand="DELETE FROM Products WHERE (ProductID = @ProductID)"> <DeleteParameters> <asp:Parameter Name="ProductID" /> </DeleteParameters> </asp:SqlDataSource> <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="ProductID"> <Columns> <asp:CommandField ShowEditButton="True" EditText="<IMG SRC='Images/icon_edit.gif' border=0/>"/> <asp:CommandField ShowDeleteButton="True" DeleteText="<img src='Images/icon_delete.gif' border=0/>"/> <asp:TemplateField HeaderText="Image"> <ItemTemplate> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("ProductImageURL") %>' /> </ItemTemplate> </asp:TemplateField> </Columns>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
165
</asp:GridView> </form> </body> </html>
d) Chèn các bản ghi
Để chèn bản ghi ta sử dụng kỹ thuật tương tự như trên, thông qua khai báo:
1. Khai báo hai thuộc tính InsertCommand và InsertCommandType InsertCommand="INSERT INTO Products(ProductID, ProductType, ProductName, ProductDescription, ProductSize, ProductImageURL, UnitPrice) VALUES (@ProductID, @ProductType, @ProductName, @ProductDescription, @ProductSize, @ProductImageURL, @UnitPrice)">
2. Khai báo các tham số <InsertParameters> <InsertParameters> <asp:Parameter Name="ProductID" Type="Int16"/> <asp:Parameter Name="ProductType" Type="String"/> <asp:Parameter Name="ProductName" Type="String"/> <asp:Parameter Name="ProductDescription" Type="String"/> <asp:Parameter Name="ProductSize" Type="String"/> <asp:Parameter Name="ProductImageURL" Type="String" /> <asp:Parameter Name="UnitPrice" Type="Decimal" /> </InsertParameters>
Ví dụ 3.15. Trong ví dụ dùng GridView để hiển thị và thực hiện các thao
tác Update, Delete; sử dụng DetailView để hiển thị chi tiết từng bản ghi được
chọn trong GridView đồng thời cho phép cập nhật dữ liệu(vidu3_16.aspx) <%@ Page Language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" ProviderName="<%$ ConnectionStrings:MyConn.ProviderName %>" UpdateCommand="UPDATE Products SET ProductType = @ProductType, ProductName = @ProductName, ProductDescription = @ProductDescription, ProductSize = @ProductSize, ProductImageURL =@ProductImageURL, UnitPrice = @UnitPrice WHERE (ProductID = @ProductID)" SelectCommand="SELECT * FROM [Products]" DeleteCommand="DELETE FROM Products WHERE(ProductID= @ProductID)"> <DeleteParameters> <asp:Parameter Name="ProductID" /> </DeleteParameters> </asp:SqlDataSource> <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="ProductID">
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
166
<Columns> <asp:CommandField ShowEditButton="True" EditText="<IMG SRC='Images/icon_edit.gif' border=0/>" /> <asp:CommandField ShowDeleteButton="True" DeleteText=" <img src='Images/icon_delete.gif' border=0 />"/> <asp:TemplateField HeaderText="Image"> <ItemTemplate> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("ProductImageURL") %>' /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </form> </body> </html>
Kết quả cho trong hình 2.30.
Hình 3.30. Duyệt ví dụ 3.15.
Ví dụ 3.16. Trong ví dụ sẽ xây dựng hai trang
- Trang vidu3_17.aspx sẽ thực hiện hiển thị thông tin của bảng
Products đồng thời cho phép Update và Delete dữ liệu. Người quản
trị click vào nút “Thêm mới sản phẩm” để chuyển sang trang
vidu3_18.aspx để cập nhật dữ liệu (hình 3.31).
- Trang vidu3_18.aspx cho phép thực hiện cập nhật dữ liệu (hình 3.32)
+ Trang vidu3_17.aspx <%@ Page Language="VB" %> <script runat="server"> </script>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
167
<html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> </div> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" ProviderName="<%$ ConnectionStrings:MyConn.ProviderName %>" UpdateCommand="UPDATE Products SET ProductType = @ProductType, ProductName = @ProductName, ProductDescription = @ProductDescription, ProductSize = @ProductSize, ProductImageURL = @ProductImageURL, UnitPrice = @UnitPrice WHERE (ProductID = @ProductID)" SelectCommand="SELECT * FROM [Products]" DeleteCommand="DELETE FROM Products WHERE (ProductID = @ProductID)" InsertCommand="INSERT INTO Products(ProductID, ProductType, ProductName, ProductDescription, ProductSize, ProductImageURL, UnitPrice) VALUES (@ProductID, @ProductType, @ProductName, @ProductDescription, @ProductSize, @ProductImageURL, @UnitPrice)"> <DeleteParameters> <asp:Parameter Name="ProductID" /> </DeleteParameters> <InsertParameters> <asp:ControlParameter ControlID="txtProductID" Name="ProductID" PropertyName="Text" /> <asp:ControlParameter ControlID="txtProductType" Name="ProductType" PropertyName="Text" /> <asp:ControlParameter ControlID="txtProductName" Name="ProductName" PropertyName="Text" /> <asp:ControlParameter ControlID="lblProductDescription" Name="ProductDescription" PropertyName="Text" /> <asp:ControlParameter ControlID="txtProductSize" Name="ProductSize" PropertyName="Text" /> <asp:ControlParameter ControlID="lblProductImageURL" Name="ProductImageURL" PropertyName="Text" /> <asp:ControlParameter ControlID="txtUnitPrice" Name="UnitPrice" PropertyName="Text" /> </InsertParameters> </asp:SqlDataSource> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" DataKeyNames="ProductID" AllowPaging="True" CellPadding="4" ForeColor="#333333" GridLines="None" PageSize="3"> <Columns> <asp:ImageField DataImageUrlField="ProductImageURL" HeaderText="Ảnh"> </asp:ImageField> <asp:CommandField ShowEditButton="True" EditText="<IMG SRC='Images/icon_edit.gif' border=0/>" /> <asp:CommandField ShowDeleteButton="True" DeleteText="<img src='Images/icon_delete.gif' border=0 >"/> <asp:BoundField DataField="ProductID" HeaderText="Mã sản phẩm" SortExpression="ProductID" /> <asp:BoundField DataField="ProductType" HeaderText="Kiểu sản phẩm" SortExpression="ProductType" /> <asp:BoundField DataField="ProductName" HeaderText="Tên sản phẩm" SortExpression="ProductName" />
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
168
<asp:BoundField DataField="UnitPrice" HeaderText="Giá (USD)" SortExpression="UnitPrice" /> <asp:BoundField DataField="ProductDescription" HeaderText="Mô tả sản phẩm" /> </Columns> <PagerSettings PageButtonCount="3" /> <FooterStyle BackColor="#507CD1"Font-Bold="True"ForeColor="White"/> <RowStyle BackColor="#EFF3FB" /> <EditRowStyle BackColor="#2461BF" /> <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333"/> <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> <HeaderStyleBackColor="#507CD1"Font-Bold="True" ForeColor="White"/> <AlternatingRowStyle BackColor="White" /> </asp:GridView> <asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="~/vidu3_18.aspx" >Thêm mới sản phẩm </asp:LinkButton><br /> </form> </body> </html>
Hình 3.31. Duyệt ví dụ 3.16(vidu3_17.aspx).
+ Trang vidu3_18.aspx <%@ Page Language="VB" %> <script runat="server"> Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUpload.Click Dim Path As String Path = Request.PhysicalApplicationPath If FileUpload1.HasFile Then Try FileUpload1.SaveAs(Path & "\Images\" & FileUpload1.FileName)
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
169
Me.lblProductImageURL.Text = "~\Images\" & FileUpload1.FileName Me.imgProductImageURL.ImageUrl = Me.lblProductImageURL.Text Catch ex As Exception Me.lblProductImageURL.Text = "Failed because: <br/>" & ex.Message End Try End If Me.imgInsert.Enabled = True End Sub Protected Sub imgInsert_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Me.SqlDataSource1.Insert() Me.imgNew.Enabled = True Me.imgInsert.Enabled = False Me.lblTB.Text = "Một bản ghi đã được cập nhật! Tiếp tục click New, kết thúc click Cancel <br>" End Sub Protected Sub imgCancel_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Response.Redirect("vidu3_17.aspx") End Sub Protected Sub imgNew_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Me.txtProductID.Text = "" Me.txtProductType.Text = "" Me.txtProductName.Text = "" Me.txtProductDescription.Text = "" Me.txtProductSize.Text = "" Me.txtUnitPrice.Text = "" Me.lblProductImageURL.Text = "" Me.lblTB.Text = "" Me.btnUpload.Enabled = True Me.imgCancel.Enabled = True Me.imgInsert.Enabled = False Me.imgNew.Enabled = False End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" ProviderName="<%$ ConnectionStrings:MyConn.ProviderName %>" SelectCommand="SELECT * FROM [Products]" InsertCommand="INSERT INTO Products(ProductID, ProductType, ProductName, ProductDescription, ProductSize, ProductImageURL, UnitPrice) VALUES (@ProductID, @ProductType, @ProductName, @ProductDescription, @ProductSize, @ProductImageURL, @UnitPrice)"> <InsertParameters> <asp:ControlParameter ControlID="txtProductID" Name="ProductID" PropertyName="Text" /> <asp:ControlParameter ControlID="txtProductType" Name="ProductType" PropertyName="Text" /> <asp:ControlParameter ControlID="txtProductName" Name="ProductName" PropertyName="Text" /> <asp:ControlParameter ControlID="txtProductDescription" Name="ProductDescription" PropertyName="Text" />
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
170
<asp:ControlParameter ControlID="txtProductSize" Name="ProductSize" PropertyName="Text" /> <asp:ControlParameter ControlID="lblProductImageURL" Name="ProductImageURL" PropertyName="Text" /> <asp:ControlParameter ControlID="txtUnitPrice" Name="UnitPrice" PropertyName="Text" /> </InsertParameters> </asp:SqlDataSource> <asp:Label ID="lblTB" runat="server" ForeColor="#FF00FF"></asp:Label> <asp:ImageButton ID="imgNew" runat="server" ImageUrl="~/Images/AddNew.GIF" OnClick="imgNew_Click" /> <asp:ImageButton ID="imgCancel" runat="server" ImageUrl="~/Images/Cancel.GIF" OnClick="imgCancel_Click" /><br /> CẬP NHẬT DỮ LIỆU <asp:Label ID="lblProductID" runat="server" Text="Mã sản phẩm: " ForeColor="#0000FF"></asp:Label> <asp:TextBox ID="txtProductID" runat="server" MaxLength="4"></asp:TextBox> <asp:Label ID="lblProductType" runat="server" ForeColor="Blue" Text="Loại sản phẩm: "></asp:Label> <asp:TextBox ID="txtProductType" runat="server" Width="160px" MaxLength="20"></asp:TextBox> <br /> <br /> <asp:Label ID="lblProductName" runat="server" ForeColor="Blue" Text="Tên sản phẩm: "></asp:Label> <asp:TextBox ID="txtProductName" runat="server" MaxLength="50"></asp:TextBox> <asp:Label ID="lblUnitPrice" runat="server" ForeColor="Blue" Text="Đơn giá (USD):"></asp:Label> <asp:TextBox ID="txtUnitPrice" runat="server"></asp:TextBox><br/><br/> <asp:Label ID="lblProductSize" runat="server" ForeColor="Blue" Text="Kích thước sản phẩm: "></asp:Label> <asp:TextBoxID="txtProductSize" runat="server" Width="384px"> </asp:TextBox><br /> <br /> <asp:FileUpload ID="FileUpload1" runat="server" Width="520px" /><br /> <table style="width: 520px"> <tr> <td style="width: 183px"> <asp:Label ID="lblProductImag" runat="server" ForeColor="Blue" Text="Upload File ảnh: "> </asp:Label> <asp:Button ID="btnUpload" runat="server" Text="Upload" Width="72px" OnClick="btnUpload_Click" /> </td> <td style="width: 92px"> <asp:Image ID="imgProductImageURL" runat="server" ImageUrl="~/Images/DTDD.gif" /><br /> <asp:Label ID="lblProductImageURL" runat="server"> </asp:Label> </td> </tr> </table> <asp:Label ID="lblProductDescription" runat="server" ForeColor="Blue" Text="Mô tả sản phẩm:"></asp:Label><br /> <asp:TextBox ID="txtProductDescription" runat="server" Height="112px" TextMode="MultiLine" Width="520px"></asp:TextBox><br /> <table style="width: 512px"> <tr> <td style="width: 185px; height: 24px" valign="middle"> </td> <td style="width: 126px; height: 24px" valign="middle"> <asp:ImageButton ID="imgInsert" runat="server" ImageUrl="~/Images/Insert.GIF" OnClick="imgInsert_Click" /></td> <td style="height: 24px" valign="middle"> </td>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
171
</tr> </table> </form> </body> </html>
Hình 3.32. Duyệt ví dụ 3.16(vidu3_18.aspx).
Chú ý:
- Để Upload một file lên Server ta dùng điều khiển FileUpload (Như trang
Vidu3_18.aspx).
- Để tạo Download một file và mở chúng ta sử dụng thẻ Hyperlink <a>,
địa chỉ URL phải bao gồm server path và file name bao gồm cả tên mở rộng. <a href="Images/BG_LTWeb.doc">Download Baigiang Web </a>
<a href="Images/backblue.gif"> Mở file ảnh </a></div>
e) Lọc dữ liệu sử dụng Data Source controls
Data source controls cung cấp một số dịch vụ dữ liệu để dễ dàng có thể có
thêm các khả năng tiên tiến cho các ứng dụng. Nó bao gồm việc lọc dữ liệu dựa
trên điều kiện tìm kiếm mà ta chỉ định.
Việc lọc dữ liệu thuận lợi nhất là khi làm việc với cached data, bởi vì ta có
thể cung cấp các khả năng tìm kiếm không cần phải chạy lại các truy vấn hoặc
gọi lại các phương thức đọc dữ liệu.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
172
Để lọc dữ liệu, data source control phải được cấu hình như sau:
+ Đối với các điều khiển SqlDataSource và AccessDataSource, thuộc
tính DataSourceMode phải được thiết lập tới DataSet.
+ Đối với điều khiển ObjectDataSource, đối tượng source object phải
trả về DataSet hoặc DataTable.
* Thiết lập biểu thức lọc (Filter Expression): Ta chỉ định lọc áp dụng cho
dữ liệu được trả về bởi các điều khiển ObjectDataSource, SqlDataSource, hoặc
AccessDataSource bằng việc thiết lập thuộc tính FilterExpression của data
source. Biểu thức lọc sẽ được áp dụng khi phương thức select của data source
control được gọi. Cú pháp của biểu thức lọc phụ thuộc vào cú pháp thuộc tính
Expression của lớp DataColumn.
FilterExpression="Country LIKE '{0}' AND LastName LIKE '{1}'"
Chú ý: Cả hai ký tự % và * đều được sử dụng làm ký tự thay thế trong toán
tử so sánh LIKE. Ký tự thay thế được cho phép ở vị trí bắt đầu và kết thúc của
mẫu. Ví dụ:
"ItemName LIKE '*product*'"
"ItemName LIKE '*product'"
"ItemName LIKE 'product*'"
Ký tự thay thế không được phép nằm giữa chuỗi mẫu.Ví dụ , 'te*xt'
không được phép.
*Cung cấp tham số lọc (Filter Parameters): Ta có thể cung cấp tham số
biểu thức lọc cho các điều khiển ObjectDataSource, SqlDataSource, hoặc
AccessDataSource. Các tham số này cho phép ta cung cấp các giá trị lọc tại thời
điểm chạy không cần viết code để thiết lập thuộc tính FilterExpression.
Ta có thể chỉ định các tham số biểu thức lọc sử dụng collection
FilterParameters của điều khiển data source. Các tham số này có thể truy xuất
dữ liệu từ các điều khiển, đối tượng QueryString, session state, user
profile,.v.v…
<FilterParameters> <asp:ControlParameter ControlID="CountryListBox" PropertyName="SelectedValue" /> <asp:ControlParameter ControlID="LastNameTextBox" PropertyName="Text" /> </FilterParameters>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
173
Trong biểu thức lọc (Filter Expression), ta tạo các placeholders tương ứng
tới các items trong collection FilterParameters của điều khiển data source. Các
Placeholders được số hóa, với 0 thể hiện tham số đầu tiên trong collection. Ta
chỉ định một placeholder trong biểu thức lọc bằng cách thay thế số của tham số
lọc trong các ký tự '{' và '}' như ví dụ sau:
Country = '{0}' AND LastName LIKE '{1}'
Ví dụ 3.17. Thực hiện lọc dữ liệu dữ liệu trong CSDL Northwind thông qua
các phương thức lọc dữ liệu của điều khiển dữ liệu SqlDataSource
(vidu3_19.aspx). <%@ Page language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Filter</title> </head> <body> <form id="Form1" runat="server"> <h3>Northwind Employees</h3> <table cellspacing="10"> <tr> <td valign="top"> <table border='0'> <tr> <td valign="top">Country</td> <td> <asp:DropDownList runat="server" id="CountryListBox" AppendDataBoundItems="True" DataSourceID="CountrySqlDataSource" DataTextField="Country" DataValueField="Country" > <asp:ListItem Selected="True" Value=""> (Show All)</asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td>Last Name</td> <td> <asp:TextBox runat="server" id="LastNameTextBox" Text="*" /></td> </tr> <tr> <td></td> <td> <asp:Button runat="server" id="FilterButton" Text="Filter Results" /></td> </tr> </table> </td> <td valign="top"> <asp:GridView ID="EmployeesGridView" DataSourceID="EmployeeDetailsSqlDataSource" AutoGenerateColumns="False" AllowSort="True" DataKeyNames="EmployeeID"
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
174
RunAt="server"> <HeaderStyle backcolor="Navy" forecolor="White"/> <RowStyle backcolor="White"/> <AlternatingRowStyle backcolor="LightGray"/> <EditRowStyle backcolor="LightCyan"/> <Columns> <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" ReadOnly="True"/> <asp:BoundField DataField="FirstName" HeaderText="First Name"/> <asp:BoundField DataField="LastName" HeaderText="Last Name"/> <asp:BoundField DataField="Country" HeaderText="Country"/> </Columns> </asp:GridView> </td> </tr> </table> <asp:SqlDataSource ID="CountrySqlDataSource" SelectCommand="SELECT DISTINCT Country FROM Employees" EnableCaching="True" CacheDuration="60" ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>" RunAt="server" /> <asp:SqlDataSource ID="EmployeeDetailsSqlDataSource" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Country] FROM [Employees]" EnableCaching="True" CacheDuration="60" ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>" FilterExpression="Country LIKE '{0}' AND LastName LIKE '{1}'" RunAt="server"> <FilterParameters> <asp:ControlParameter ControlID="CountryListBox" PropertyName="SelectedValue" /> <asp:ControlParameter ControlID="LastNameTextBox" PropertyName="Text" /> </FilterParameters> </asp:SqlDataSource> </form> </body> </html>
Kết quả triệu gọi trang như hình
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
175
Hình 3.33. Duyệt ví dụ 3.17 (vidu3_19.aspx).
Chú ý: Ta có thể sử dụng phương thức thức lọc bằng cách đọc lại dữ liệu
trong phương thức Select của điều khiển DataSource (như ví dụ 3.18)
Ví dụ 3.18. Thực hiện lọc dữ liệu dữ liệu trong CSDL Northwind tương tự
như ví dụ 3.17 nhưng thông qua các phương thức Select dữ liệu của điều khiển
dữ liệu SqlDataSource (vidu3_20.aspx). <%@ Page language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Filter</title> </head> <body> <form id="Form1" runat="server"> <h3>Northwind Employees</h3> <table cellspacing="10"> <tr> <td valign="top"> <table border='0'> <tr> <td valign="top">Country</td> <td><asp:DropDownList runat="server" id="CountryListBox" AppendDataBoundItems="True" DataSourceID="CountrySqlDataSource" DataTextField="Country" DataValueField="Country" > <asp:ListItem Selected="True" Value="" > (Show All)</asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td>Last Name</td> <td><asp:TextBox runat="server" id="LastNameTextBox" Text="%" /></td>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
176
</tr> <tr> <td></td> <td><asp:Button runat="server" id="FilterButton" Text="Filter Results" /></td> </tr> </table> </td> <td valign="top"> <asp:GridView ID="EmployeesGridView" DataSourceID="EmployeeDetailsSqlDataSource" AutoGenerateColumns="True" RunAt="server"> <HeaderStyle backcolor="Navy" forecolor="White"/> <RowStyle backcolor="White"/> <AlternatingRowStyle backcolor="LightGray"/> <EditRowStyle backcolor="LightCyan"/> </asp:GridView> </td> </tr> </table> <asp:SqlDataSource ID="CountrySqlDataSource" SelectCommand="SELECT DISTINCT Country FROM Employees" EnableCaching="True" CacheDuration="60" ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>" RunAt="server" /> <asp:SqlDataSource ID="EmployeeDetailsSqlDataSource" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Country] FROM [Employees] WHERE (([Country] LIKE '%' + @Country +'%') AND ([LastName] LIKE '%' + @LastName +'%'))" RunAt="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>"> <SelectParameters> <asp:ControlParameter ControlID="CountryListBox" DefaultValue="%" Name="Country" PropertyName="SelectedValue" Type="String" /> <asp:ControlParameter ControlID="LastNameTextBox" DefaultValue="%" Name="LastName" PropertyName="Text" Type="String" /> </SelectParameters> </asp:SqlDataSource> </form> </body> </html>
3.3. Mô hình ADO.NET
3.3.1. Giới thiệu đối tượng ADO.NET
ADO là phương thức truy xuất dữ liệu cũ của Microsoft, và nó đã trở thành
chuẩn cho các môi trường Office, Web, và Visual Basic trước .NET. Sau đây là
các sản phẩm phát triển của ADO:
+ Microsoft Office 200x
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
177
+ Visual Studio 6.0 (bao gồm tất cả các ngôn ngữ trong đó)
+ SQL Server 7.0, 2000
Data Access Objects (DAO), là chuẩn trước ADO, được sử dụng trong
Office và Visual Basic, nhưng nó không được thiết kế để sử dụng trong các môi
trường Web như Visual InterDev và các dữ liệu servers khác. Do đó ADO cho
đến bây giờ đang là chuẩn để phát triển các ứng dụng. Công nghệ này sử dụng
để truy cập cơ sở dữ liệu Client/Server (trình chủ và trình khách), cho phép truy
cập dữ liệu với mô hình đa lớp (n-tier). Tiếp đó, các thành phần ADO.NET,
được thiết kế nhằm tăng tốc độ truy cập và thao tác dữ liệu trong môi trường đa
lớp (n-tier).
ADO.NET được thiết kế để cung cấp kiến trúc rời rạc (disconnected
architecture). Có nghĩa là các ứng dụng connect tới database truy nạp dữ liệu và
lưu trữ trong memory. Sau đó disconnect với database và sử dụng bộ nhớ sao
chép (memory copy) của dữ liệu đó. Nếu như database cần phải được update với
các thay đổi trên memory copy, một kết nối mới (connection) được hình thành
và database được update. Bộ nhớ chính lưu trữ dữ liệu là DataSet, nơi mà chứa
các bộ nhớ lưu trữ dữ liệu khác, như là: Các đối tượng DataTable; ta có thể lọc
và sắp xếp dữ liệu trên DataSet bằng việc sử dụng các đối tượng DataView.
Việc sử dụng kiến trúc disconnected architecture cung cấp rất nhiều lợi ích,
trong đó, quan trọng nhất là cho phép ứng dụng trở lên scale up. Nghĩa là
database của ta sẽ thực thi tốt như hỗ trợ hàng trăm users tuy nó chỉ hỗ trợ vài
chục users. Điều đó có thể bởi vì ứng dụng connects tới database chỉ đủ để truy
nạp hoặc update dữ liệu, bằng cách đó giải phóng các connections database sẵn
có cho các thể hiện khác của ứng dụng hoặc các ứng dụng khác sử dụng cùng
database.
3.3.2. Các đối tượng trong ADO.NET
Đối tượng chính được sử dụng trong ADO.NET là đối tượng DataSet. Ta
có thể thấy đối tượng DataSet và các thuộc tính, các phương thức, và các đối
tượng của nó trong hình 3.1 dưới đây.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
178
Xét bảng 3.1 để tìm hiểu các mô tả ngắn ngọn về các đối tượng hay dùng.
Bảng 3.1. ADO.NET Data Objects hay được dùng để thao tác dữ liệu
Object Mục đích
DataSet
Đối tượng này được sử dụng cùng với các điều khiển dữ liệu
khác, lưu trữ các kết quả được trả về bởi các đối tượng commands
và data adapters. Không như recordset của ADO và DAO, Data
set thực sự mang lại một view phân cấp của dữ liệu. Bằng việc sử
Hình 3.1. Mô hình ADO.NET
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
179
dụng các thuộc tính và các collections trong đối tượng
DataSet, ta có thể nhận được toàn bộ các quan hệ (relations),
các tables riêng biệt, rows, và columns.
DataTable Một trong đối tượng của data set, là đối tượng DataTable
cho phép ta có thể thao tác dữ liệu trong một table riêng biệt. Data
table tương tự như đối tượng recordset trong ADO.
DataView
Bằng việc sử dụng đối tượng này, ta có thể lọc và sắp xếp dữ
liệu, duy trì các views khác nhau của dữ liệu. Mỗi data table có
một default view, nó là nơi khởi động data view mà có thể được
sửa dổi và lưu trữ trong data view khác.
DataRow
Đối tượng này cho phép ta thao tác các rows của dữ liệu trong
data tables. Nó có thể được xét như một cache của dữ liệu mà ta có
thể thực hiện các thao tác adding, deleting, và modifying records.
Ta có thể quay trở lại recordset, nơi mà ta sẽ chạy các câu lệnh
SQL để update dữ liệu về server.
DataColumn
Như tên đề nghị, ta có thể nhận các thông tin tại các cột bằng
việc sử dụng đối tượng DataColumn. Ta có thể lấy thông tin
lược đồ như là dữ liệu bằng việc sử dụng đối tượng này. Ví dụ: nếu
ta muốn tạo một list box của tên các trường, ta có thể lặp thông
qua tập DataColumn của các dòng dữ liệu và truy lục tất cả các tên
trường.
PrimaryKey Đối tượng này cho phép ta chỉ định primary key cho table dữ
liệu. Cách khác, khi ta sử dụng phương thức Find của data table.
.NET cũng cung cấp các classes, được gọi data providers, và sử dụng tên
miền (Namespaces) để làm việc với các đối tượng ADO.NET và cung cấp các
truy xuất với dữ liệu. Lõi của các lớp ADO.NET tồn tại trong namespace
System.Data. Namespace này chứa chứa một vài namespaces con. Phần quan
trọng nhất của chúng là các tên miền System.Data.SqlClient và
System.Data.OleDb. Chúng cung cấp các classes sử dụng cho việc truy cập SQL
Server databases và OLE (Object Linking and Embedding) DB- compliant
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
180
databases (phục hồi dữ liệu). Các lớp của OleDb và SqlClient cho trong hình
3.2. và Bảng 3.2. mô tả vắn tắt các đối tượng thường được sử dụng để thao tác
với dữ liệu.
Bảng 3.2. .NET Data Provider Classes thường được sử dụng để thao tác dữ liệu
Object Mục đích
Command Tương tự như đối tượng ADO Command, cho phép ta thực
hiện các stored procedures trong code. Khác với phiên bản ADO,
ta có thể tạo đối tượng DataReader bằng việc sử dụng phương
thức ExecuteReader.
Connection Đây là đối tượng mở kết nối tới server và database mà ta
muốn làm việc. Khác với đối tượng ADO Connection, cách
thức kết nối phụ thuộc vào đối tượng mà ta muốn làm việc, như là
đối tượng DataReader hay DataSet.
DataAdapter Đối tượng DataAdapter cho phép ta tạo các câu lệnh SQL
và điền dữ liệu vào datasets. Nó cũng cho phép tạo các action
Hình 3.2. OleDb và SqlClient classes ADO.NET
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
181
queries cần thiết, như là Insert, Update, và Delete.
DataReader Đối tượng này tạo một read-only, forward-only stream của
dữ liệu mà cho phép chúng đặt trên các điều khiển, như ListBox
và ComboBox.
Parameter Đây là đối tượng cho phép chỉ định các tham số mà các đối
tượng DataAdapter có thể chỉ định và sử dụng
Ngoài ra, hai tên miền con khác cũng tồn tại trong tên miền System.Data,
đó là: System.Data.OracleClient và System.Data.Odbc. Trong đó, namespace
System.Data.OracleClient được sử dụng dành cho các CSDL Oracle. Các lớp
SqlClient cung cấp các kết quả tốt nhất khi làm việc với các SQL Server
databases; OracleClient cung cấp thực thi tối ưu khi truy cập vào Oracle
databases. Namespace System.Data.Odbc cung cấp truy cập tới ODBC (Open
Database Connectivity) data sources cũ mà không được support bởi công nghệ
OleDb.
Như vậy, các tên miền System.Data.SqlClient, System.Data.OleDb,
System.Data.OracleClient, và System.Data.Odbc được biết như là data
providers trong ADO.NET.
Trong ADO.NET, các data providers khác nhau làm việc theo một cách
thức tương tự nhau. Vì vậy ta không cần thiết phải học tất cả các interface mới,
bởi vì tất cả các data providers làm việc theo một cách thức tương tự nhau.
Trong phần này trọng tâm tìm hiểu lớp System.Data.SqlClient để làm việc với
Database xây dựng trên SQL Server. Với ADO.NET, ta sử dụng data provider
này là phù hợp nhất cho data source của ta. Các kỹ xảo ta sử dụng ở đây có thể
được dễ dàng chuyển giao cho các lớp với nhau, chẳng hạn như giữa SQL
Server.NET data provider và OLE DB.NET data provider chỉ khác nhau bởi hai
từ SQL server và OLEDB.
3.4. Các lớp SqlClient trong mô hình ADO.NET
Danh sách sau chứa các classes ADO.NET mà chúng sẽ được sử dụng
trong quá trình xây dựng ứng dụng sử dụng SQL Server Databases:
� SqlConnection
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
182
� SqlDataAdapter
� SqlCommand
� SqlParameter
� SqlDataReader
Chú ý: Chúng là các SqlClient cụ thể, trừ namespace OleDb có rất nhiều
close tương đương. Mỗi khi ta muốn sử dụng lớp classes này, ta phải add một
tham chiếu tới tên miền System.Data. Để đơn giản, ta có thể sử dụng từ khóa
Imports, và lúc đó ta không cần phải điền đầy đủ các thành phần tên miền của
SqlClient trong code, như đoạn code sau:
<%@ Import Namespace="System.Data.SqlClient" %>
Nếu ta muốn sử dụng lõi của classes ADO.NET, như là DataSet và DataView
không cần gõ đầy đủ tên miền, ta cần phải Import the tên miền System.Data, như
đoạn code tiếp theo:
<%@ Import Namespace="System.Data" %>
Ta nên quen thuộc với việc import các tên miền khác nhau trong project
của ta. Tuy nhiên, để tìm hiểu được một cách toàn diện ta sẽ phủ chúng khi thực
hành các ví dụ. Bây giờ, ta xem xét các classes chính tồn tại trong namespace
System.Data.SqlClient.
3.4.1. Class SqlConnection
Class SqlConnection có thể coi là “trái tim” của các classes mà ta sẽ thảo
luận trong phần này, bởi vì nó cung cấp một connection tới SQL Server
database.
Khi xây dựng một đối tượng SqlConnection, ta có thể chọn để chỉ định một
chuỗi kết nối (connection strings) như một tham số. Chuỗi connection chứa tất
cả các thông tin cần thiết để mở một connection tới your database. Nếu ta không
chỉ định chuỗi kết nối trong khi xây dựng, ta có thể thiết lập nó bằng việc sử
dụng thuộc tính SqlConnection.ConnectionString.
Ta xem xét các chuỗi connection strings làm việc như thế nào?
* Các tham số của chuỗi kết nối (Connection String Parameters)
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
183
Phương thức để chuỗi connection string được xây dựng sẽ phụ thuộc vào
data provider gì ta đang sử dụng. Khi truy xuất SQL Server, ta thường cung
cấp Server và Database, được chỉ dẫn theo bảng 3.3. sau:
Bảng 3.3. Tham số của chuỗi kết nối.
Tham số Mô tả
Server
Tên của SQL Server mà ta muốn truy xuất. Nó thường
là tên của máy tính đang chạy SQL Server. Ta có thể sử
dụng (local) hoặc localhost nếu SQL Server trên cùng một
máy đang chạy ứng dụng. Nếu bạn sử dụng các thể hiện tên
của SQL Server, thì tham số nên chứa tên của máy tính theo
sau là đấu gạch chéo ngược và tiếp đó là thể hiện tên của
SQL Server.
Database Là tên của database mà ta muốn connect tới.
Ta cũng cần một vài thông tin về authentication và thực hiện theo hai cách:
bằng cách cung cấp username và password trong chuỗi kết nối (connection
strings) hoặc bằng cách kết nối tới SQL Server sử dụng NT account mà ứng
dụng đang chạy trong đó.
Nếu ta muốn connect tới server bằng việc chỉ định username và password,
ta cần tính đến các parameters đó trong chuỗi kết nối connection, được cho trong
bảng 3.4. sau:
Bảng 3.4. Tham số của chuỗi kết nối.
Tham số Mô tả
User ID
Username sử dụng để connect tới database. account với
user ID này phải tồn tại trong SQL Server và được phép truy
cập đến database chỉ định.
Password Là password của user đã chỉ định.
Tuy nhiên, SQL Server có thể được thiết lập sử dụng Windows NT account
của user người đang chạy chương trình để mở connection. Trong trường hợp
này, ta không cần chỉ định username và password. Ta chỉ cần phải chỉ định nó
khi ta đang sử dụng integrated security (security kết hợp - Phương thức này
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
184
được gọi là security kết hợp bởi vì SQL Server đang được kết hợp với Windows
NT’s security system và cung cấp connection an toàn nhất bởi vì các tham số
User ID và Password parameters phải được chỉ định trong code). Ta sử dụng
tham số Integrated Security này, và thiết lập là True khi ta muốn connect SQL
Server đang sử dụng user’s NT account hiện tại. Tất nhiên, với các làm việc này,
user của ứng dụng phải được cho phép sử dụng SQL Server database. Giả dụ
như là đang sử dụng SQL Server Enterprise Manager.
Để hiểu chức năng của các tham số này trong chuỗi kết nối ta khởi tạo một
đối tượng connection, xét đoạn code sau. Nó sử dụng lớp SqlConnection để khởi
tạo một đối connection mà được sử dụng chỉ định user ID và password trong
chuỗi kết nối:
‘VB Dim strconn As String="server=THUHUONG;database=QLDiemSV;
user id=sa;password=pass2008"
Dim objConnection As New SqlConnection(strconn)
// C#
string strconn="server=THUHUONG;database=QLDiemSV; user id=sa;password=pass2008";
SqlConnection objConnection = new
SqlConnection(strconn);
Chuỗi kết nối này sẽ connects tới SQL Server database. Tham số Server chỉ
định là database nằm trên máy THUHUONG. Tham số Database chỉ định
database mà ta muốn truy cập, trong trường hợp này là database QLDiemSV.
Cuối cùng, các tham số User ID và Password chỉ định User ID và password của
user định nghĩa trên database. Ta thấy rằng, mỗi một tham số được gán một giá
trị qua dấu =, và mỗi cặp parameter - value được phân cách nhau nhau bởi dấu
chấm phảy. Hoặc
‘VB
Dim objConnection As SqlConnection = New _
SqlConnection(“Server=localhost;Database=pubs;” & _
“User ID=sa;Password=vbdotnet;”)
/// C#
SqlConnection objConnection = new
SqlConnection((“Server=localhost;Database=pubs;” & _
“User ID=sa;Password=vbdotnet;”);
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
185
Chuỗi kết nối này sẽ connects tới SQL Server database. Tham số Server chỉ
định là database nằm trên máy local. Tham số Database chỉ định database mà ta
muốn truy cập là database pubs. Cuối cùng, các tham số User ID và Password
chỉ định User ID và password của user định nghĩa trên database.
Ta nên khai báo chuỗi kết nối trong tệp web.config như sau:
- Sử dụng <appSettings> <appSettings> <add key="conn" value="server=HP520-9B01514BF;database=QLBanHang; user id=sa;password=Pass2008" />
</appSettings>
Sau đó sử dụng hàm ConfigurationManager.AppSettings("Conn") để
lấy chuỗi kết nối đó:
‘ VB
Dim strConn As String
'Lấy chuỗi kết nối CSDL
strConn = ConfigurationManager.AppSettings("Conn")
Dim myConn As New SqlConnection(strConn)
//C#
string strconn= ConfigurationManager.AppSettings["Conn"].ToString();
SqlConnection objConnection = new
SqlConnection(strconn);
- Sử dụng <appSettings> <connectionStrings> <add name="MyConn" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=QLBanHang;User ID=sa;Password=12102006"
</connectionStrings>
Sau đó sử dụng hàm ConfigurationManager. ConnectionStrings
("MyConn").ToString để lấy chuỗi kết nối đó:
‘VB
Dim strConn As String
'Lấy chuỗi kết nối CSDL
strConn=ConfigurationManager.ConnectionStrings("MyConn").To
String
Dim myConn As New SqlConnection(strConn)
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
186
‘C# string strConn;
strConn =
ConfigurationManager.ConnectionStrings["TestABCConnectionString"].ToSt
ring();
* Mở và đóng Connection
Sau khi khởi tạo đối tượng connection với một chuỗi connection như đã
trình bày ở phần trước, ta có thể gọi các phương thức của đối tượng
SqlConnection như là Open và Close, thậm chí open và close một
connection tới database được chỉ định trong chuỗi kết nối connection. Ví dụ,
cho đoạn code sau:
' Open the database connection objConnection.Open() ' ... Use the connection ' Close the connection...
objConnection.Close()
Chú ý rằng, SqlConnection chỉ thuần tuý sử dụng cho cơ sở dữ liệu SQL
Server 7.0 hay các phiên bản SQL sau này, trong lúc đó OleDbConnection sử
dụng cho hầu hết các cơ sở dữ liệu SQL Server phiên bản 6.5 về trước,
Microsoft Accesss và tập tin văn bản, bảng tính,.v.v...
Như đã trình bày ở trên, cả hai lớp kết nối SqlConnection và
OleDbConnection đều có mục đích như nhau. Tuy nhiên, đối với
OleDbConnection phụ thuộc vào nguồn dữ liệu kết nối, bởi lẽ đối tượng này cho
phép kết nối nhiều loại dữ liệu. Như vậy, để kết nối CSDL Access ta dùng lớp
OleDbConnection, OleDbCommand và OleDbDataReader. Chuỗi kết nối
CSDL Access như sau:
<appSettings> <add key="accessconn" value="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="/>
</appSettings>
Và kết nối với CSDL như sau:
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
Dim strConn As String
'Lấy chuỗi kết nối CSDL
strConn = ConfigurationManager.AppSettings("accesscon")
strConn+= Request.ServerVariables("APPL_PHYSICAL_PATH")
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
187
strConn += "mydb.mdb" myConn = New OleDbConnection(strConn) myConn.Open()
End Sub
3.4.2. Class SqlCommand
Lớp SqlCommand đại diện cho các câu lệnh SQL để thực hiện truy vấn dữ
liệu lưu trữ. Các câu lệnh là truy vấn select, insert, update, hoặc delete,.v.v… Có
thể là các chuỗi SQL hoặc gọi một stored procedure. Và truy vấn được thực
hiện có thể chứa các tham số hoặc không chứa các tham số.
Kiến trúc của lớp SqlCommand có một vài biến số, nhưng phương thức
đơn giản nhất để khởi tạo một đối tượng SqlCommand với không tham số
(parameters). Tiếp theo, sau khi đối tượng đã được khởi tạo, ta có thể thiết lập
các thuộc tính ta cần để thực hiện các thao tác sắp tới. Đoạn code sau cho phép
khởi tạo một đối tượng SqlCommand:
‘VB
Dim objCommand As SqlCommand = New SqlCommand()
‘C#
SqlCommand objCommand =new SqlCommand()
Khi sử dụng các data adapters (bộ điều hợp dữ liệu) và datasets, không cần
gọi nhiều các đối tượng của chúng. Chúng có thể chủ yếu được sử dụng cho việc
thực thi một câu lệnh select, delete, insert, hoặc update, mà đó là những gì ta đề
cập trong chương này. Ta cũng có thể sử dụng các đối tượng command với data
reader. Một data reader là một lựa chọn khác với DataSet mà nó sử dụng một
vài tài nguyên hệ thống nhưng kém mềm dẻo.
* Thuộc tính Connection
Một vài thuộc tính phải được thiết lập trên đối tượng SqlCommand trước
khi ta có thể thực hiện một câu truy vấn. Thuộc tính đầu tiên trong các thuộc
tính này đó là thuộc tính Connection. Thuộc tính này thiết lập tới đối tượng
SqlConnection như trong đoạn code sau:
objCommand.Connection = objConnection
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
188
Chú ý: Để câu lệnh được thực hiện thành công, thì connection phải được
mở ở thời điểm thực hiện.
* Thuộc tính CommandText
Thuộc tính tiếp theo phải được thiết lập đó là thuộc tính CommandText.
Thuộc tính này chỉ định chuỗi SQL hoặc stored procedure sẽ được thực hiện.
Hầu hết các databases quy định đặt các các giá trị của chuỗi trong cặp dấu “ các
giá trị của chuỗi “, ví dụ:
Dim objConnection As New SqlConnection _
("server=THUHUONG;database=QLDiemSV;" &_
"user id=sa;password=pass2008")
Dim objCommand As SqlCommand = New SqlCommand() ' Open the connection, execute the command objConnection.Open() ' Set the SqlCommand object properties... objCommand.Connection = objConnection objCommand.CommandText = "INSERT INTO HOSOSV " & _ "(MaSV, HoDem, TenSV, NgaySinh, MaLop) " & _ "VALUES(‘SV001’,’Nguyen Thi’,’Hoa’,’12/8/1988’,’TH05’)"
Câu lệnh INSERT chỉ đơn giản nghĩa là “chèn một hàng mớí vào bảng
HOSOSV. Trong đó cột MaSV nhận giá trị ‘SV001’, HoDem nhận giá trị
’Nguyen Thi’, TenSV nhận giá trị ’Hoa’, NgaySinh nhận giá trị
’12/8/1988’ và cột MaLop nhận giá trị ’ TH05’.”
Với cách cơ bản này các câu lệnh INSERT làm việc trong SQL. Ta có theo
sau INSERT INTO là tên của bảng. Tiếp là một danh sách tên các cột trong cặp
dấu ngoặc đơn. Tiếp theo nữa là từ khóa VALUES là danh sách các giá trị được
chèn vào cột theo đúng thứ tự.
Trong ví dụ trên, với các giả thiết là ta biết các giá trị để chèn trong khi
thực hiện chương trình, thường là không có thực trên hầu hết các ứng dụng.
Cũng may, ta cũng có thể tạo các câu lệnh với các tham số và thiết lập giá trị
cho các tham số đó một cách độc lập. Ta sẽ tìm hiểu cách sử dụng các tham số
đó như thế nào trong phần Parameters Collection.
* Parameters Collection
Placeholders, ký hiệu @, là tiền tố các biến trong các câu lệnh SQL; Chúng
được điền vào trước các tham số. Như vậy, nếu ta muốn cập nhật bảng HOSOSV
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
189
được mô tả trong ví dụ trước nhưng không biết các giá trị tại thời điểm thiết kế,
ta chỉ cần viết:
Dim objConnection As New SqlConnection _
("server=THUHUONG;database=QLDiemSV;" &_
"user id=sa;password=pass2008")
Dim objCommand As SqlCommand = New SqlCommand() ' Open the connection, execute the command objConnection.Open() ' Set the SqlCommand object properties... objCommand.Connection = objConnection objCommand.CommandText = "INSERT INTO HOSOSV " & _ "(MaSV, HoDem, TenSV, NgaySinh, MaLop) " & _ "VALUES(@MaSV,@Hodem,@TenSV,@NgaySinh,@MaLop)"
Ở đây, thay vì cung cấp các giá trị cụ thể, ta cung cấp các placeholders.
Placeholders, như đã đề cập, luôn xuất hiện với ký hiệu @. Chúng không cần
được đặt trước tên các trường trong các bảng của database mà chúng thể hiện,
nhưng thường đơn giản hơn nếu ta sử dụng tên tham số trùng với tên trường dữ
liệu, vì nó thường tốt hơn cho chính các văn bản code của ta.
Tiếp theo, ta cần tạo các tham số mà sẽ được sử dụng để truyền giá trị cho
các placeholders khi câu lệnh SQL được thực hiện. Ta cần phải create và add
các tham số vào Parameters collection của đối tượng SqlCommand. Thuật ngữ
parameters chỉ các tham số cần thiết cho câu lệnh SQL hoặc stored procedure,
không chỉ các tham số được quy định chuyển để chuyển sang các phương thức
của Visual Basic 2005.
Ta có thể truy cập vào tập Parameters collection của đối tượng
SqlCommand bằng việc chỉ định thuộc tính Parameters. Sau khi truy cập vào
tập Parameters collection, ta có thể sử dụng các thuộc tính và các phương thức
của nó để tạo một hoặc nhiều hơn các tham số trong collection. Cách tốt nhất để
add một tham số tới câu lệnh được mô tả trong ví dụ sau:
Dim objConnection As New SqlConnection _
("server=THUHUONG;database=QLDiemSV;" &_
"user id=sa;password=pass2008")
Dim objCommand As SqlCommand = New SqlCommand() ' Open the connection, execute the command objConnection.Open() ' Set the SqlCommand object properties... objCommand.Connection = objConnection objCommand.CommandText = "INSERT INTO HOSOSV " & _
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
190
"(MaSV, HoDem, TenSV, NgaySinh, MaLop) " & _ "VALUES(@MaSV,@Hodem,@TenSV,@NgaySinh,@MaLop)" ' Add parameters for the placeholders in the SQL in the objCommand.Parameters.AddWithValue("@MaSV", txtMaSV.Text) objCommand.Parameters.AddWithValue("@Hodem", txtHodem.Text) objCommand.Parameters.AddWithValue("@TenSV", txtTenSV.Text) objCommand.Parameters.AddWithValue("@NgaySinh",_
txtNgaySinh.Text).DbType = DbType.Date
objCommand.Parameters.AddWithValue("@MaLop", cboMaLop.Text)
- Phương thức AddWithValue thừa nhận tên của tham số và giá trị ta muốn
truyền cho tham số. Trong trường hợp này, ta sử dụng thuộc tính Text của đối
tượng Text box trên cùng một Form.
- Phương thức Add được sử dụng để khai báo tham số và truyền giá trị cho
tham số sử dụng thuộc tính Value của tham số đó. objCommand.Parameters.Add("@Address", Data.SqlDbType.NVarChar, 255) objCommand.Parameters("@Address").Value = txtAddress.Text
* Phương thức ExecuteNonQuery
Cuối cùng, ta có thể thực hiện các câu lệnh. Để làm điều này, connection
cần phải được mở. Ta có thể gọi phương thức ExecuteNonQuery của đối tượng
SqlCommand. Phương thức này thực hiện câu lệnh SQL và là nguyên nhân dữ
liệu được chèn vào database. Để hoàn thành đoạn code, ta phải mở connection,
thực hiện query, và đóng connection trở lại:
Dim objConnection As New SqlConnection _
("server=THUHUONG;database=QLDiemSV;" &_
"user id=sa;password=pass2008")
Dim objCommand As SqlCommand = New SqlCommand() ' Set the SqlCommand object properties... objCommand.Connection = objConnection objCommand.CommandText = "INSERT INTO HOSOSV " & _ "(MaSV, HoDem, TenSV, NgaySinh, MaLop) " & _ "VALUES(@MaSV,@Hodem,@TenSV,@NgaySinh,@MaLop)" ' Add parameters for the placeholders in the SQL in the objCommand.Parameters.AddWithValue("@MaSV", txtMaSV.Text) objCommand.Parameters.AddWithValue("@Hodem", txtHodem.Text) objCommand.Parameters.AddWithValue("@TenSV", txtTenSV.Text) objCommand.Parameters.AddWithValue("@NgaySinh",_
txtNgaySinh.Text).DbType = DbType.Date
objCommand.Parameters.AddWithValue("@MaLop", cboMaLop.Text)
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
191
' Open the connection, execute the command objConnection.Open() ' Execute the SqlCommand object to insert the new data... Try
objCommand.ExecuteNonQuery() Catch SqlExceptionErr As SqlException
MessageBox.Show(SqlExceptionErr.Message) End Try ' Close the connection... objConnection.Close()
* Phương thức ExecuteReader
Trái với phương thức ExecuteNonQuery, phương thức ExecuteReader của
đối tượng SqlCommand sẽ thực hiện truy vấn trả về kết quả trên đối tượng
DataReader. Và dữ liệu trên DataReader thường được đổ sang
các điều khiển ListBox, ComboBox trên form ứng dụng.
' Declare local variables and objects... Dim objCommand As SqlCommand = New SqlCommand() Dim objDataReader As SqlDataReader ' Open the connection, execute the command objConnection.Open() ' Set the SqlCommand object properties... objCommand.Connection = objConnection objCommand.CommandText = "Select MaLop, TenLop From Lop" ' Execute the SqlCommand object to insert the new data... objDataReader = objCommand.ExecuteReader cboMaLop.Items.Clear() Do While (objDataReader.Read()) cboMaLop.Items.Add(objDataReader.Item(0)) Loop ' Close the connection... objConnection.Close()
* Phương thức ExecuteScalar
Là phương thức trả về một giá trị vô hướng. cmd.CommandText = " Select OrderID From Orders " & _ "Where(MemberName=@MemberName) and (OrderDate=@OrderDate) and (CustomerName=@CustomerName)and (Address=@Address) and (County=@County) and (PostCode=@PostCode) and (Country=@Country) and (SubTotal=@SubTotal) and (Discount=@Discount) and ( Total=@Total)" Dim OrderID As Integer OrderID = Convert.ToInt32(cmd.ExecuteScalar())
3.4.3. Class SqlDataAdapter
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
192
Lớp SqlDataAdapter tương tự như lớp OleDbDataAdapter. Điểm khác
nhau chính là OleDbDataAdapter có thể truy cập vào bất cứ data source được
supports OLE DB, trong khi SqlDataAdapter chỉ supports cho SQL Server
databases. Ta có thể sử dụng trong cùng một cách như nhau; ta có thể cấu hình
SqlDataAdapter sử dụng wizards, giống như là cấu hình cho OleDbDataAdapter
(được cung để ta đang truy xuất vào SQL Server data source), ta sẽ trình bày
trong ví dụ minh họa cụ thể ở phần sau. Trong phần này, ta tìm hiểu cách cấu
hình và sử dụng SqlDataAdapter trong code, những nguyên tắc này cũng có thể
áp dụng cho OleDbDataAdapter.
Data adapters hoạt động như một cầu nối giữa data source và các đối
tượng lưu dữ liệu trong bộ nhớ, như là DataSet. Để truy xuất data source, chúng
sử dụng các đối tượng command, ta đã xem xét ở trên. Các đối tượng command
này liên quan đến các connections, vì vậy data adapter này dựa vào các đối
tượng command và connection để truy xuất và điều khiển data source.
Thuộc tính SelectCommand của lớp SqlDataAdapter được sử dụng nắm giữ
một SqlCommand để gọi dữ liệu từ data source. Sau đó data adapter đẩy kết
quả của truy vấn vào DataSet hoặc DataTable.
SqlDataAdapter cũng có các thuộc tính UpdateCommand,
DeleteCommand, and InsertCommand. Chúng cũng là các đối tượng
SqlCommand, được sử dụng để ghi các thay đổi với DataSet hoặc DataTable
quay trở lại data source. Vấn đề này có thể thấy phức tạp, nhưng các tools thực
tế rất dễ sử dụng. Ta đã học các câu lệnh SQL trong chương trước để viết
SelectCommand, và các tools được gọi command builders mà ta có thể tạo một
cách tự động các câu lệnh khác dựa trên chúng.
Xét thuộc tính SelectCommand và xét xem ta có thể tạo các câu lệnh cho
việc updating, deleting, và inserting records như thế nào.
* Thuộc tính SelectCommand
Thuộc tính SelectCommand của lớp SqlDataAdapter được dùng để đẩy dữ
liệu vào từ SQL Server database DataSet, như hình vẽ Hình 3.3.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
193
Khi ta muốn đọc dữ liệu từ kho dữ liệu, đầu tiên ta phải thiết lập thuộc tính
SelectCommand của lớp SqlDataAdapter. Thuộc tính này là đối tượng
SqlCommand và nó được dùng để chỉ định dữ liệu được select và select dữ liệu
như thế nào. Vì vậy, thuộc tính SelectCommand cũng có các thuộc tính của nó,
và ta cần thiết lập chúng như là thiết lập các thuộc tính trên các câu lệnh thông
thường. Ta đã xem xét các thuộc tính sau của đối tượng SqlCommand:
� Connection: Thiết lập đối tượng SqlConnection để truy xuất vào
data store.
� CommandText: Thiết lập các câu lệnh SQL hoặc tên stored
procedure được sử dụng để selectdữ liệu.
Trong các ví dụ trước của các đối tượng SqlCommand, ta đã sử dụng trực
tiếp các câu lệnh SQL. Nếu ta muốn sử dụng các stored procedures, ta cần phải
sử dụng thêm thuộc tính CommandType, thuộc tính này thiết lập một giá trị xác
định xem thuộc tính CommandText được biên dịch như thế nào.
Trong chương này, ta tập trung vào các câu lệnh SQL, nhưng các stored
procedures thường cũng rất hữu dụng, đặc biệt là nếu chúng đã tồn tại trên
database. Nếu ta muốn sử dụng chúng, thì thiết lập thuộc tính CommandText với
tên của stored procedure (chú ý là phải được đóng trong cặp dấu ngoặc kép “tên
Hình 3.3. Thuộc tính Select Command
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
194
của stored procedure hoặc chuỗi SQL “ bởi trình trình biên dịch biên dịch chúng
như là một string), và thiết lập thuộc tính CommandType thành
CommandType.StoredProcedure.
� Thiết lập SelectCommand với một chuỗi SQL
Xét xem làm thế nào, ta có thể thiết lập các thuộc tính trên trong code.
Đoạn code sau cho ta thấy các cách thiết lập điển hình khi thực hiện chuỗi SQL
string:
‘ Declare a SqlDataAdapter object... Dim objDataAdapter As New SqlDataAdapter() ‘ Assign a new SqlCommand to the SelectCommand property objDataAdapter.SelectCommand = New SqlCommand() ‘ Set the SelectCommand properties... objDataAdapter.SelectCommand.Connection = objConnection objDataAdapter.SelectCommand.CommandText = _ “SELECT MaSV, HoDem, TenSV, FROM HOSOSV ORDER BY TenSV, Hodem”
Đầu tiên trong đoạn code trên khai báo đối tượng SqlDataAdapter. Đối
tượng này có thuộc tính SelectCommand được thiết lập bằng SqlCommand; Ta
chỉ cần thiết lập các thuộc tính của command. Ta thiết lập các thuộc tính bằng
việc thiết lập thuộc tính Connection, để đối tượng connection được hợp lệ thì nó
phải được tạo trước đoạn code trên. Tiếp theo, ta thiết lập các thuộc tính của
thuộc tính CommandText bằng các câu lệnh SQL SELECT.
� Thiết lập SelectCommand với một Stored Procedure
Trong đoạn code tiếp theo, ta tìm hiểu cách thiết lập các thuộc tính trên khi
sử dụng để thực hiện một stored procedure. Một stored procedure là một nhóm
các câu lệnh SQL và đã được lưu trữ trong database dưới một tên duy nhất và
được thực hiện như một unit. stored procedure trong ví dụ này
(usp_select_DSSV) sử dụng cùng câu lệnh SQL ta đã sử dụng trong phần trước:
‘ Declare a SqlDataAdapter object... Dim objDataAdapter As New SqlDataAdapter() ‘ Assign a new SqlCommand to the SelectCommand property objDataAdapter.SelectCommand = New SqlCommand() ‘ Set the SelectCommand properties... objDataAdapter.SelectCommand.Connection = objConnection objDataAdapter.SelectCommand.CommandText = “usp_select_DSSV” objDataAdapter.SelectCommand.CommandType = CommandType.StoredProcedure
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
195
Thuộc tính CommandText bây giờ được chỉ định bằng tên của stored
procedure mà ta muốn thực hiện thay vì chuỗi SQL đã được chỉ định trong ví dụ
trước. Cũng phải chú ý đến thuộc tính CommandType. Trong ví dụ trước ta
không cần phải chuyển đổi thuộc tính này, bởi vì nó được mặc định là
CommandType.Text, mà ta cần thiết lập để thực hiện các câu lệnh SQL. Trong
ví dụ này, ta phải thiết lập giá trị CommandType.StoredProcedure, để chỉ dẫn
rằngthuộc tính CommandText chứa tên của stored procedure để thực hiện.
Sử dụng Command Builders để tạo các Commands khác
SelectCommand là tất cả những gì ta cần thiết để chuyển dữ liệu từ
database vào DataSet. Sau khi ta cho phép các users thay đổi đối với DataSet, ta
muốn ghi những thay đổi đó trở lại database. Ta có thể làm điều này bằng việc
điều chỉnh các đối tượng câu lệnh SQL cho các công việc inserting, deleting,
and updating. Một lựa chọn khác, ta có thể sử dụng các stored procedures. Cả
hai giải pháp phụ thuộc vào sự am hiểu về SQL. Rất may là, có một cách đơn
giản hơn, ta có thể sử dụng command builders để tạo các câu lệnh này. Nó chỉ
có một dòng trong các dòng sau:
‘ Declare a SqlDataAdapter object... Dim objDataAdapter As New SqlDataAdapter() ‘ Assign a new SqlCommand to the SelectCommand property objDataAdapter.SelectCommand = New SqlCommand() ‘ Set the SelectCommand properties... objDataAdapter.SelectCommand.Connection = objConnection objDataAdapter.SelectCommand.CommandText = “usp_select_DSSV” objDataAdapter.SelectCommand.CommandType = CommandType.StoredProcedure
‘ automatically create update/delete/insert commands Dim objCommandBuilder As SqlCommandBuilder = New _ SqlCommandBuilder(objDataAdapter)
Như vậy, ta có thể sử dụng SqlDataAdapter để ghi những thay đổi dữ liệu
trở lại database. Ta tìm hiểu kỹ hơn về vấn đề này trong phần ví dụ minh họa.
Để hiểu, ta xét các phương thức mà lấy dữ liệu từ database đẩy vào
DataSet:Phương thức Fill .
* Phương thức Fill
Ta dùng phương thức Fill để dữ liệu đẩy dữ liệu mà đối tượng
SqlDataAdapter sử dụng SelectCommand của nó lấy từ kho lưu trữ dữ liệu vào
đối tượng DataSet. Tuy nhiên, trước khi làm điều đó, ta phải khởi tạo đối tượng
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
196
DataSet. Để sử dụng đối tượng DataSet trong project của ta, ta phải add một
tham chiếu tới System.Xml.
‘ Declare a SqlDataAdapter object... Dim objDataAdapter As New SqlDataAdapter()
‘ Assign a new SqlCommand to the SelectCommand property objDataAdapter.SelectCommand = New SqlCommand()
‘ Set the SelectCommand properties... objDataAdapter.SelectCommand.Connection = objConnection objDataAdapter.SelectCommand.CommandText = “usp_select_DSSV” objDataAdapter.SelectCommand.CommandType = CommandType.StoredProcedure Dim objDataSet as DataSet = New DataSet()
Ta có hai đối tượng DataSet và SqlDataAdapter, có thể điền dữ liệu vào
DataSet. Phương thức Fill có nhiều phiên bản, nhưng ta sẽ chỉ xét thảo luận một
phiên bản hay được sử dụng nhiều nhất. Cú pháp của phương thức Fill được cho
như sau:
SqlDataAdapter.Fill(DataSet, string)
Đối số DataSet chỉ định một đối tượng DataSet hợp lệ mà dữ liệu được lưu
trữ ở trong đó. Đối số string gán với tên mà ta muốn bảng có trong DataSet. Chú
ý rằng, một DataSet có thể chứa nhiều bảng. Ta có thể sử dụng bất cứ tên nào ta
muốn, nhưng thường tốt nhất là sử dụng tên của các bảng nơi mà dữ liệu trong
database đến. Nó giúp cho văn bản code của ta và làm cho code dễ bảo trì.
Đoạn code sau gọi phương thức Fill. Chuỗi “authors” được chỉ định là đối
số string. Nó là tên ta muốn sử dụng khi đang thao tác trong các phiên bản nhớ
của bảng này; nó cũng là tên của bảng trong data source.
‘ Declare a SqlDataAdapter object... Dim objDataAdapter As New SqlDataAdapter()
‘Create an instance of a new select command object objDataAdapter.SelectCommand = New SqlCommand()
‘ Set the SelectCommand properties... objDataAdapter.SelectCommand.Connection = objConnection objDataAdapter.SelectCommand.CommandText = “usp_select_DSSV” objDataAdapter.SelectCommand.CommandType = CommandType.StoredProcedure Dim objDataSet as DataSet = New DataSet()
‘ Fill the DataSet object with data... objDataAdapter.Fill(objDataSet, “DSSV”)
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
197
Phương thức Fill sử dụng thuộc tính SelectCommand.Connection để
connect tới database. Nếu connection đã được mở, data adapter sẽ sử dụng nó để
thực hiện SelectCommand. Và nếu như connection đã đóng thì data adapter sẽ
mở nó, thực hiện SelectCommand, và sau đó đóng trở trở lại. Bây giờ ta đã có
dữ liệu trong bộ nhớ, và có thể bắt đầu thao tác nó không phụ thuộc vào data
source.
Chú ý: Lớp DataSet không có Sql tại vị trí bắt dầu tên lớp của nó. Bởi vì
DataSet không trong namespace System.Data.SqlClient, nó nằm trong lớp cha
namespace System.Data. Các lớp trong tên miền này có liên quan căn bản với
thao các dữ liệu trong bộ nhớ.
Một lần nữa, ta đã có dữ liệu được load vào DataSet, không có tính chất
quan trọng nữa là data source đến từ gì (trừ khi ta muốn ghi trở lại). Ta hãy xét
hai trong các lớp trong namespace: DataSet và DataView.
3.4.4. Class DataSet
Lớp DataSet được dùng để lưu trữ dữ liệu được lấy từ một kho dữ liệu và
lưu trữ dữ liệu trong bộ nhớ trên client. Đối tượng DataSet chứa một tập các
tables, relationships, và các ràng buộc constraints thích hợp với dữ liệu đọc từ
kho dữ liệu. Nó hoạt động như một bộ máy database gọn nhẹ, cho phép ta lưu
trữ tables, edit data, và chạy các queries dựa vào việc sử dụng đối tượng
DataView.
Dữ liệu trong DataSet không được connect từ kho dữ liệu, và ta có thể làm
việc với dữ liệu độc lập với kho dữ liệu. Ta có thể thao tác dữ liệu trong đối
tượng DataSet bằng việc adding, updating, và deleting the records. Ta có thể áp
các thay đổi này quay trở lại kho dữ liệu gốc sau đó sử dụng data adapter.
Dữ liệu trong đối tượng DataSet được duy trì trong Extensible Markup
Language (XML), nghĩa là ta có thể save DataSet như là một file hoặc đơn giản
chuyển nó trên network. XML được bảo vệ từ ta, những người phát triển, và
chúng không bao giờ nên edit trực tiếp XML. Tất cả các thao tác editing XML
được thực hiện thông qua các thuộc tính và các phương thức của lớp DataSet.
Nhiều nhà phát triển thích sử dụng XML và lựa chọn để thao tác XML biểu diễn
trực tiếp DataSet, nhưng điều này không cần thiết.
3.4.5.DataView
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
198
Lớp DataView được sử dụng tiêu biểu cho việc sorting, filtering, searching,
editing, và navigating dữ liệu từ DataSet. Một DataView là bindable, nghĩa là nó
có thể bị buộc vào các điều khiển giống như cách DataSet bị buộc vào các điều
khiển. Hơn nữa, ta sẽ tìm hiểu nhiều hơn về cách buộc dữ liệu trong code trong
phần tiếp theo của chương.
Một DataSet có thể chứa một số các đối tượng DataTable; khi ta sử dụng
phương thức Fill của lớp SqlDataAdapter để add dữ liệu vào DataSet, như vậy ta
đã thực sự đang tạo một đối tượng DataTable bên trong DataSet này. DataView
cung cấp view thông dụng của DataTable; ta có thể sắp xếp và lọc dữ liệu, như
ta thực hiện trên truy vấn SQL.
Ta có thể tạo một DataView từ dữ liệu được chứa trong DataTable mà đang
chỉ chứa dữ liệu mà ta muốn hiển thị. Ví dụ, nếu dữ liệu trong DataTable chứa
tất cả các Sinh viên được sắp xếp bởi Tên và Họ đệm, ta có thể tạo một
DataView chứa tất cả Sinh viên được sắp xếp bở Tên và sau đó là Họ đêm.
Hoặc, nếu muốn, ta có thể tạo một DataView chỉ chứa một vài sinh viên chứa
tên nào đó.
Mặc dù ta có thể view dữ liệu trong DataView trong nhiều cách khác nhau
từ DataTable cơ bản, nó vẫn là cùng dữ liệu. Các thay đổi với DataView ảnh
hưởng tới DataTable cơ bản một cách tự động và các thay đổi với DataTable cơ
bản tự động ảnh hưởng bất kỳ đối tượng DataView mà đang hiển thị DataTable
đó.
Kiến trúc cho lớp DataView khởi tạo một thể hiện mới của lớp DataView
và lấy DataTable là một đối số. Đoạn code sau khai báo một đối tượng
DataView và khởi tạo nó đang sử dụng bảng HosoSV từ DataSet có tên là
objDataSet. Chú ý rằng code đó truy cập vào tập hợp Tables của đối tượng
DataSet, bằng việc chỉ định thuộctính Tables và tên bảng:
‘ Set the DataView object to the DataSet object... Dim objDataView = New DataView(objDataSet.Tables(“HosoSV”))
* Thuộc tính Sort
Khi DataView đã được khởi tạo và hiển thị dữ liệu, ta có thể thay đổi view
của dữ liệu đó. Ví dụ, giả sử ta muốn sắp xếp dữ liệu khác với thứ tự trong
DataSet. Để sắp xếp dữ liệu trong DataView, ta thiết lập thuộc tính Sort và chỉ
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
199
định cột hoặc các cột mà ta muốn sắp xếp. Đoạn code sau sẽ sắp xếp dữ liệu
trong DataView theo Tên và sau đó theo Họ đệm của danh sách Sinh viên: objDataView.Sort = “TenSV, Hodem”
Chú ý: Thuộc tính Sort giống như cú pháp của mệnh đề ORDER BY trong
câu lệnh SQL. Như trong SQL mệnh đề ORDER BY, thao tác sắp xếp trên
DataView thường sắp xếp theo thứ tự mặc định là tăng dần. Nếu ta muốn thay
đổi theo thứ tự sắp xếp giảm, ta cần phải có chỉ định từ khóa DESC: objDataView.Sort = “TenSV, Hodem DESC”
* Thuộc tính RowFilter
Khi đã khởi tạo DataView, ta có thể lọc các dòng dữ liệu mà chúng sẽ
chứa. Nó tương tự như chỉ định trong mệnh đề WHERE của câu lệnh SQL
SELECT; chỉ những hàng thỏa mãn điều kiện sẽ được giữ lại trên view. Dữ liệu
cơ bản không bị ảnh hưởng. Thuộc tính RowFilter chỉ định một điều kiện lọc mà
có thể áp dụng được trên DataView. Cú pháp này cũng tương tự như mệnh đề
SQL WHERE. Nó chứa ít nhất tên một cột, theo sau là một toán tử và giá trị.
Nếu giá trị là string thì nó phải được bao trong cặp dấu ‘nháy đơn’, ví dụ:
‘ Set the DataView object to the DataSet object... objDataView = New DataView(objDataSet.Tables(“HosoSV”)) objDataView.RowFilter = “TenSV = ‘Hoa’”
Nếu bạn muốn lấy lại các ròng trừ các dòng có Tên là =’Hoa’
‘ Set the DataView object to the DataSet object...
objDataView = New DataView(objDataSet.Tables(“authors”))
objDataView.RowFilter = “TenSV <> ‘Hoa’”
Ta cũng có thể chỉ định điều kiện lọc phức tạp hơn như trong SQL. Ví dụ,
sử dụng toán tử AND:
objDataView.RowFilter = “TenSV <> ‘Hoa’ AND Hodem LIKE ‘N*’”
* Phương thức Find
Nếu ta muốn tìm kiếm cho một hàng dữ liệu trong DataView, ta gọi
phương thức Find. Phương thức Find tìm kiếm dữ liệu trong cột khóa sắp xếp
của DataView. Do đó, trước khi gọi phương thức Find, ta trước hết hãy sắp xếp
DataView trên cột chứa dữ liệu mà ta muốn tìm kiếm. Cột trong DataView đã
được sắp xếp trở thành cột khóa sắp xếp trong đối tượng DataView object.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
200
Ví dụ, giả sử ta muốn tìm kiếm Sinh viên có TenSV là ‘Anh’. Ta cần sắp
xếp dữ liệu trong DataView theo TenSV và thiết lập cột này thành cột khóa sắp
xếp trong DataView, và sau đó gọi phương thức Find, như đoạn code sau:
Dim intPosition as Integer
objDataView.Sort = “TenSV”
intPosition = objDataView.Find(“Ann”)
Phương thức Find tìm kiếm và trả về vị trí của bản ghi trong DataView.
Trong trường hợp ngược lại, DataView trả về giá trị null nếu không tìm thấy.
Nếu phương thức Find tìm thấy một bản khớp thì nó sẽ dừng tìm kiếm và trả về
vị trí của bản ghi đầu tiên tìm thấy. Nếu ta muốn có nhiều hơn một bản ghi trong
data store, ta phải lọc dữ liệu trong DataView, dữ liệu của ta sẽ được hiển thị.
Phương thức Find không phân biệt dạng chữ, nghĩa là khi tìm Sinh viên có
tên là ‘Hoa’, ta có thể nhập là ‘hoa’.
Phương thức Find tìm chính xác từng cụm từ, nghĩa là ta phải nhập toàn bộ
cụm từ đó. Ví dụ, giả sử ta muốn tìm kiếm Sinh viên có Họ đệm là ‘Đinh
Thanh’ thì ta phải nhập đầy đủ cụm đó.
objDataView.Sort = “Hodem”
intPosition = objDataView.Find(“Đinh Thanh”)
Ta thấy DataView có thể được sắp xếp trên nhiều hơn một cột tại cùng một
thời điểm. Nếu ta muốn sắp xếp nhiều hơn một cột, ta cần cung cấp một mảng
các giá trị để phương thức Find thay cho chỉ một giá trị đơn. Ví dụ, ta muốn tìm
kiếm ‘Đinh Thanh Hoa’ xuất hiện trong DataView:
Dim intPosition As Integer Dim arrValues(1) As Object objDataView.Sort = “Hodem, TenSV” ‘ Find the author named “Simon Watts”. arrValues(0)= “Đinh Thanh” arrValues(1) = “Hoa” intPosition = objDataView.Find(arrValues)
Ví dụ 3.1. Minh họa các đối tượng trong mô hình ADO.NET (vidu3_1.aspx)
<%@ Page Language="VB" %> <%@ Import Namespace="System.Data"%> <%@ Import Namespace="System.Data.SqlClient" %> <script runat="server"> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
201
' Khai báo các đối tượng Dim myDataSet As New DataSet() Dim myDataview As DataView Dim strConn As String Dim strSQL As String ' Lấy chuỗi kết nối dữ liệu strConn = ConfigurationManager.AppSettings("Conn") Dim myConn As New SqlConnection(strConn) ' Khai báo chuỗi câu lệnh Select strSQL = "SELECT * From Accounts" ' Khai báo đối tượng SqlDataAdapter Dim myDataAdapter As New SqlDataAdapter() myDataAdapter.SelectCommand = New SqlCommand() myDataAdapter.SelectCommand.Connection = myConn myDataAdapter.SelectCommand.CommandText = strSQL myDataAdapter.SelectCommand.CommandType = CommandType.Text ' Mở kết nối myConn.Open() myDataAdapter.Fill(myDataSet, "tblAccounts") myConn.Close() ' Điền dữ liệu từ DataSet vào ASP:DataGrid Control dgrResult.DataSource = myDataSet dgrResult.DataBind() Me.MyGridView.DataSource =myDataSet.Tables("tblAccounts") Me.MyGridView.DataBind() myDataview = New DataView(myDataSet.Tables("tblAccounts"))
myDataview.Sort = "UserName" Me.grvMyDataview.DataSource = myDataview Me.grvMyDataview.DataBind() End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:DataGrid ID="dgrResult" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None"> <Columns>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
202
<asp:BoundColumn DataField="UserName" HeaderText=" Tên NSD" ReadOnly="True"> </asp:BoundColumn>
<asp:BoundColumn DataField="Password" HeaderText=" Mật khẩu" ReadOnly="True">
</asp:BoundColumn> <asp:BoundColumn DataField="Address" HeaderText=" Địa chỉ ">
</asp:BoundColumn> </Columns> <FooterStyle BackColor="#507CD1" Font-Bold="True"
ForeColor="White" /> <EditItemStyle BackColor="#2461BF" /> <SelectedItemStyle BackColor="#D1DDF1"
Font-Bold="True" ForeColor="#333333" /> <PagerStyle BackColor="#2461BF" ForeColor="White"
HorizontalAlign="Center" /> <AlternatingItemStyle BackColor="White" /> <ItemStyle BackColor="#EFF3FB" /> <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> </asp:DataGrid><br /> <span style="color: #0000ff">
Thể hiện GidView dùng Dataset.Table </span> <span style="color: #ff00ff"></span><br />
<asp:GridView ID="MyGridView" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" /> <EditRowStyle BackColor="#2461BF" /> <SelectedRowStyle BackColor="#D1DDF1"
Font-Bold="True" ForeColor="#333333" /> <PagerStyle BackColor="#2461BF" ForeColor="White"
HorizontalAlign="Center" /> <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="White" /> </asp:GridView> <span style="color: #0000ff">
Thể hiện Đối tượng DataView<br /> </span> <asp:GridView ID="grvMyDataview" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" > <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <RowStyle BackColor="#EFF3FB" /> <EditRowStyle BackColor="#2461BF" /> <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" /> <PagerStyle BackColor="#2461BF" ForeColor="White"
HorizontalAlign="Center" />
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
203
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="White" /> </asp:GridView> </div> </form> </body> </html>
Kết quả thực hiện trên trình duyệt cho trong hình 3.4.
Hình 3.4. Kết quả thực hiện trang vidu3_1.aspx
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
204
Chương 4. Thiết kế ứng dựng web
4.1. Các mô hình ứng dụng
4.1.1. Giới thiệu mô hình đa lớp.
a. Mô hình ứng dụng 2 lớp:
- Đây là một dạng mô hình đơn giản, khá phổ biến của một ứng dụng phân
tán. Trong mô hình này, việc xử lý dữ liệu được thực hiện trên Database
Server, việc nhận và hiển thị dữ liệu được thực hiện ở Client.
- Ưu điểm:
o Dữ liệu tập trung Î đảm bảo dữ liệu được nhất quán.
o Dữ liệu được chia sẻ cho nhiều người dùng.
- Khuyết điểm
o Các xử lý tra cứu và cập nhật dữ liệu được thực hiện ở Database
Server, việc nhận kết quả và hiển thị phải được thực hiện ở Client Î
Khó khăn trong vấn đề bảo trì và nâng cấp.
o Khối lượng dữ liệu truyền trên mạng lớn Î chiếm dụng đường
truyền, thêm gánh nặng cho Database Server.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
205
Mô hình ứng dụng 3 lớp:
- Mô hình 2 lớp phần nào đáp ứng được các yêu cầu khắc khe của một ứng
dụng phân tán, tuy nhiên, khi khối lượng dữ liệu lớn, ứng dụng đòi hỏi
nhiều xử lý phức tạp, số người dùng tăng, mô hình 2 lớp không thể đáp
ứng được.
- Mô hình 3 lớp sử dụng thêm Application Server giữ nhiệm vụ tương tác
giữa Client và Database server, giảm bớt các xử lý trên Database server,
tập trung các xử lý nhận và hiển thị dữ liệu tại Application server.
- Ưu điểm
o Hỗ trợ nhiều người dùng
o Giảm bớt xử lý cho Client nên không yêu cầu máy tính ở Client có
cấu hình mạnh.
o Xử lý nhận và hiển thị dữ liệu tập trung tại Application Server nên
dễ quản lý, bảo trì và nâng cấp.
o Xử lý truy cập dữ liệu tập trung tại Database Server.
- Khuyết điểm
o Phải sử dụng thêm một Application Server Î Tăng chi phí.
4.1.2. Thiết kế ứng dụng web
a) Tổ chức website chặt chẽ và dễ sử dụng.
Website cần có cấu trúc càng rõ ràng dễ hiểu càng tốt. Điều quan trọng ở
đây là phải làm sao để khách hàng thấy được ngay các thông tin mà họ hi vọng
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
206
có thể thu được từ website của bạn. Nếu website có quá nhiều thông tin, ta có
thể làm cho trang chủ đơn giản bằng cách thiết kế bảng nội dung, bảng này cũng
nên hết sức đơn giản và dễ sử dụng. Đồng thời sử dụng những từ và đoạn ngắn
gọn dễ hiểu để thu hút người đọc.
b) Sử dụng từ ngữ dễ hiểu.
Một ai đó sẽ không thể theo dõi được quảng cáo bán hàng của ta cũng như
mua những mặt hàng mà ta đang cung cấp nếu như họ không thể hiểu được
những gì ta đang nói. Sử dụng những lời lẽ hoa mỹ để tán dương những sản
phẩm ta cung cấp thì rất dễ nhưng sẽ không thể biết được có bao nhiêu người tới
website và dự định của họ như thế nào?
Có thể chúng ta cung cấp những sản phẩm dịch vụ chất lượng thật tốt
nhưng sẽ không ai mua nếu như họ không biết chúng ta đang chào bán những gì,
hay không thể hiểu được lợi ích mà sản phẩm dịch vụ của bạn mang đến cho
khách hàng. Hãy nhớ rằng khi một người đến thăm website, có thể anh ta chưa
biết chúng ta là ai?. chúng ta đang chào bán sản phẩm gì?. Ta phải giúp khách
hàng hiểu rõ những vấn đề này trong thời gian ngắn nhất. Hãy dùng các câu
ngắn gọn, cô đọng và giữ kiểu thiết kế cố định đối với tất cả các trang con.
c) Dễ dàng khám phá các đường link.
Bạn hãy tạo các đường link bằng chữ hay biểu tượng ở tất cả các trang con
để mọi người có thể xem lại hoặc xem tiếp mà không phải sử dụng đến nút
"Back" hay "Forward" của trình duyệt.
d) Thời gian tải về nhanh.
Nhân tố thời gian là vô cùng quan trọng vì mọi người thường không kiên
nhẫn khi vào mạng. Nếu trang của bạn phải mất thời gian quá lâu để tải về thì
khách hàng có thể nhấn chuột và bỏ đi. Đừng để mất khách hàng chỉ vì trang
web của bạn tải về quá chậm.
Sử dụng đồ hoạ để trang trí là rất tốt nhưng đừng lạm dụng. Nếu cần nhiều
hình ảnh và đồ hoạ lớn thì nên có một biểu tượng nhỏ sẽ liên kết với hình ảnh
đồng thời nhắc nhở người xem cần phải đợi. Sử dụng video và audio trong trang
như một công cụ để bán hàng là ý tưởng khá hay, tuy nhiên bạn không nên sử
dụng bởi hiện tại trừ các tỉnh thành lớn có đường truyền tốc độ cao ADSL hay
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
207
cáp quang, vẫn còn đa số người vẫn đang sử dụng đường truyền Dial-Up với
modem 28.8, 33.6 và 56.6.
e) Nội dung không có hình ảnh.
Nhiều người sử dụng ảnh "GIFS" và JavaScripts để tạo các logo và ký tự
chạy ngang màn hình hay những gì tương tự. Điều này không chỉ làm tăng thời
gian tải về mà còn làm người xem xao lãng nội dung bán hàng của bạn. Những
người trên Internet là những con người của thông tin vì vậy bạn hãy chắc chắn
rằng mình đang dành thời gian cho những thông tin có chất lượng chứ không
phải là những hình ảnh vô bổ.
Nếu bạn có một nội dung vô giá trong trang web, hãy làm cho nó dễ đọc.
Hãy chia thành những đoạn quan trọng, gạch chân hoặc bôi đậm những câu quan
trọng trong từng đoạn và bạn đừng ngại trang trí với một số màu.
Tô màu văn bản thay thế file đồ hoạ nếu có thể. Nói cách khác thay vì sử
dụng một file đồ họa để gây sự chú ý, bạn có thể sử dụng văn bản có màu sắc
khác nhau.
Có thể bạn muốn cung cấpthông tin miễn phí duới dạng bài báo hay bài
phóng sự, và sau đó cố gắng bán hàng. Nếu bạn muốn cung cấp cho người sử
dụng những thông tin bổ ích (với mục đích thu hút khách hàng), hãy thêm những
nội dung có chất lượng chứ không phải là những hình ảnh bên ngoài. Trong
truờng hợp đó một chữ đáng giá hàng nghìn hình ảnh.
Thậm chí bạn muốn trang của mình sinh động hơn một chút (có những biểu
tượng biến hình, các dòng chữ bôi đậm...) nhằm thu hút mọi người tiếp tục quan
tâm tới sản phẩm và dịch vụ của bạn. Công việc của bạn chính là kiểm tra những
kết quả mà khách hàng xem đem lại.
Tất cả sẽ phụ thuộc vào những sản phẩm và dịch vụ bạn đang bán cũng như
đối tượng khách hàng bạn cần tiếp thị hay thị truờng mục tiêu của bạn. Nếu bạn
đang tiếp thị cho lớp trẻ thì sự sinh động của website sẽ làm tăng doanh số bán
hàng. Nhưng nếu đối tượng khách hàng của bạn chủ yếu là những nhà kinh
doanh có trình độ thì yếu tố sinh động đó có thể làm bạn giống như một hoạ sĩ
nửa mùa. Đối với đối tượng các khách hàng này bạn cần thu hút họ bằng những
sự kiện, con số, sự trung thực và những lợi ích rõ ràng.
f) Dễ theo dõi "quá trình bán hàng".
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
208
Bạn phải tạo điều kiện để khách hàng hiểu rõ những lợi ích của sản phẩm
và dịch vụ của bạn đem lại cũng như cung cấp cho khách hàng phương thức đặt
hàng thuận tiện nhất. Liệu bạn đã xây dựng được uy tín đối với khách hàng
trước khi bạn yêu cầu họ đặt hàng chưa? Bạn đã tạo cho khách hàng sự yêu thích
và hứng thú trước khi bạn mời họ đặt hàng chưa?. Bạn đã cung cấp cho khách
hàng một số cách đặt hàng thuận tiện cả trên mạng và ngoài mạng chưa?. Và
liệu bạn đã huớng dẫn khách xem tất cả từng buớc một chưa?.
g) Tương thích với đa số trình duyệt web.
Nếu bạn sử dụng bảng biểu hãy xem xét cẩn thận việc nó sẽ hiển thị như
thế nào ở các trình duyệt khác nhau (ví dụ Internet Explorer, Netscape) và ở tất
cả các cấp độ phân giải (ví dụ 800 x 600, 1024 x 768, 1280 x 1024, 1400 x
1050).
4.2. Xử lý trang ASP.NET nâng cao
4.2.1. Thiết kế User Control
- Thiết kế User Control: Trong quá trình thiết kế ta có thể cần các chức
năng trong một điều khiển nhưng không được hỗ trợ bởi các điều khiển
ASP.NET Web server, trong trường hợp này ta cần tạo điều khiển của riêng
mình, được gọi là User Controls.
User Controls: Là các containers, trong đó chứa các web server controls. Ta
có thể xử lý điều khiển này như một đơn vị điều khiển và có thể định nghĩa các
thuộc tính và các phương thức cho điều khiển đó.
Cấu trúc của User controls: ASP.NET Web user control tương tự như việc
tạo ASP.NET Web page (.aspx file), chúng cùng có hai phần user interface page
và code. Ta tạo user control như cách tạo trang ASP.NET và sau đó thực hiện
thiết kế các điều khiển con và các chức năng cần thiết. Điểm khác nhau giữa
User controls và Web page là:
+ Tên file mở rộng của user control là .ascx.
+ Thay vì chỉ dẫn @ Page, user control chứa chỉ dẫn @ Control để định
nghĩa cấu hình và các thuộc tính khác.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
209
+ User controls không thể chạy như một stand-alone files. Để sử dụng ta
add chúng vào các trang SP.NET như việc sử dụng đối với bất cứ điều
khiển nào.
+ User control không chứa các thẻ html, body, hoặc form
- Sử dụng User Control: Để include một user control vào một Web Forms
page ta tiến hành khai báo chỉ dẫn @ Register với các thuộc tính sau:
+ Thuộc tính TagPrefix, liên quan đến prefix của user control. Prefix
này sẽ được bao gồm trong thẻ mở của phần tử user control.
+ Thuộc tính TagName, chỉ tên của user control. Tên này sẽ được bao
gồm trong thẻ mở của phần tử user control.
+ Thuộc tính Src, dùng để định nghĩa đường dẫn động đến file user
control mà chúng ta đang including.
Ví dụ 3.21. Tạo và sử dụng User controls (vidu3_25.aspx).
- Tạo file Mycontrol.ascx: Vào Website\Add New Item chọn tempates Web
User Control (hình 3.39) và xây dựng nội dung file:
Hình 3.39. Xây dựng file Mycontrol.ascx
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
210
<%@ Control Language="VB" ClassName="Spinner" %> <script runat="server"> Private m_minValue As Integer = 0 Private m_maxValue As Integer = 100 Private m_currentNumber As Integer = 0 Public Property MinValue() As Integer Get Return m_minValue End Get Set(ByVal value As Integer) If value >= Me.MaxValue Then Throw New Exception _ ("MinValue must be less than MaxValue.") Else m_minValue = value End If End Set End Property Public Property MaxValue() As Integer Get Return m_maxValue End Get Set(ByVal value As Integer) If value <= Me.MinValue Then Throw New Exception _ ("MaxValue must be greater than MinValue.") Else m_maxValue = value End If End Set End Property Public ReadOnly Property CurrentNumber() As Integer Get Return m_currentNumber End Get End Property Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) If IsPostBack Then m_currentNumber = CInt(ViewState("currentNumber")) Else m_currentNumber = Me.MinValue End If DisplayNumber() End Sub Protected Sub DisplayNumber() textNumber.Text = Me.CurrentNumber.ToString() ViewState("currentNumber") = Me.CurrentNumber.ToString() End Sub Protected Sub buttonUp_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) If m_currentNumber = Me.MaxValue Then m_currentNumber = Me.MinValue Else m_currentNumber += 1 End If DisplayNumber() End Sub
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
211
Protected Sub buttonDown_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) If m_currentNumber = Me.MinValue Then m_currentNumber = Me.MaxValue Else m_currentNumber -= 1 End If DisplayNumber() End Sub </script>
<asp:TextBox ID="textNumber" runat="server" ReadOnly="True" Width="32px" Enabled="False" /> <asp:Button Font-Bold="True" ID="buttonUp" runat="server"
Text="^" OnClick="buttonUp_Click" /> <asp:Button Font-Bold="True" ID="buttonDown" runat="server"
Text="v" OnClick="buttonDown_Click" />
- Sử dụng Web User Control: Trong cửa sổ thiết kế của Vidu3_25.aspx, ta
có thể kéo file Mycontrol.ascx vào cửa sổ thiết kế.
<%@ Page Language="VB" %> <%@ Register Src="MyControl.ascx" TagName="MyControl" TagPrefix="uc1" %> <script runat="server"> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Me.MyControl1.MinValue = 1 Me.MyControl1.MaxValue = 10 End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <uc1:MyControl ID="MyControl1" runat="server" /> </div> </form> </body> </html>
4.2.2. Security Basics
* Các khái niệm cơ bản về Security: Đó là các khái niệm như identity
(Nhận dạng), authentication (Xác thực), và authorization (Quyền hạn)
+ Identity: Thể hiện tôi là ai? (Who Am I?). Để nhận dạng một người nào
đó ta thường sử dụng tính chất đặc trưng duy nhất để mô tả chính mình.
Ví dụ như tôi là phụ nữ, có mái tóc vàng, thích nghe ca nhạc, lập trình
máy tính, … Thông tin Identity được lưu trữ trên một web site sẽ tương
thích với một vài khía cạnh nào đó của con người. Ví dụ web site
shopping có thể lưa trữ name, telephone number, e-mail address, và
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
212
home address, chúng là tất cả các thông tin chính xác giúp cho việc
thanh toán được tốt.
+ Authentication (This is Who I am): Khi cố gắng log in vào một web site,
ta phải chuyển thông tin xác thực đi; ví dụ như tổ hợp e-mail address và
password. Sau đó, web site phải xác định bạn là ai ? vì vậy tổ hợp e-
mail address và password chúng ta nhập vào phải được so khớp với tổ
hợp lưu trữ trên file được lưu trữ trên server. Tiến trình của
authentication chứng minh bạn đúng là người mà bạn đang nói đến. Có
hai kiểu chiến lược xác thực Web authentication đó là: windows và
forms authentication:
o Windows Authentication: Kiểu đơn giản nhất của authentication là
windows authentication. Với kiểu authentication lý tưởng nhất đối
với các sites intranet. Trên thực tế nó được cài đặt bởi IIS và được
lưu trữ trên các bộ máy authentication. IIS phụ thuộc vào user hoặc
là log in vào server’s domain hoặc là log in domain account hợp lệ.
Nếu người dùng được xác thực là một valid domain account, thì sẽ
được truy cập thẳng vào website. Khi user không logged into vào
server’s domain, thì valid login được yêu cầu. Phương thức
authentication này được thiết lập qua IIS Management Console.
o Forms Authentication: Đối với public Web site, forms
authentication là giải pháp đơn giản để cài đặt. Các users mà thăm
site phải chứng tỏ được các quyền trên site. Khi một unauthorized
user requests Web page, thì user đó thường được điều hướng đến
trang login hoặc cho phép tạo một User Acount mới.
+ Authorization (This is What I Can do): Authorization là bước tiếp theo
của authentication. Khi người dùng chuyển username và password đến
một web site, web server không chỉ kiểm tra password so khớp với
username, mà còn xem xét các quyền (permissions) mà người dùng đó
được trao bởi webmaster.
* ASP.NET Security: ASP.NET 2.0 có một số tools mạnh sẵn có cho việc
cài đặt các framework login-authentication-authorization.
- Web Site Administration Tool (WAT): ASP .NET 2.0 được điều khiển bởi
files web.config. Trước đây, các nhà phát triển thường phải code tay các file
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
213
XML configuration để thiết lập cho các chức năng như debugging, security,
hoặc tracing. Bây giờ đã có giao diện để thiết lập các files configuration này cho
các ứng dụng Web: đó là Web Site Administration Tool (WAT).
- Login Controls: Nhóm Microsoft ASP đã đóng gói hầu hết các chức năng
phổ biến đối với việc xác thực (authentication) trong nhóm các điều khiển login
controls làm cho công việc của các nhà lập trình trở lên đơn giản hơn. Ta có thể
lấy các hành vi (behavior) mặc định của các điều khiển này hoặc tùy chỉnh mọi
khía cạnh của chức năng và thiết kế. Sau đây là bảng thể hiện danh sách các
điều khiển sẵn có:
Tên điều khiển Mô tả
Login Chứa tất cả các phần tử cần thiết cung cấp các vùng cho
phép login vào một website.
LoginView Cho phép xây dựng các templates để hiển thị các thông
tin chính xác về user dựa trên authentication và roles.
LoginStatus Hiển thị một link để login hoặc logout dựa trên các trạng
thái của người sử dụng.
LoginName Hiển thị tên người sử dụng hiện tại.
ChangePassword Cho phép các users thay đổi Password của mình.
CreateUserWizard Tạo các vùng cho các user mới để tạo một new acount
trên website.
PasswordRecovery Gửi các thông tin bị quên của người sử dụng hoặc
Password mới qua đường email.
Chú ý: Khi sử dụng SQL Developer cần đăng ký CSDL bằng cách vào
C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727 và chạy file
aspnet_regsql.exe.
Ví dụ 3.22. Minh họa về Security và sử dụng các điều khiển Login. Để tiến hành
minh họa cho viếc cấu hình Forms Authentication ta tiến hành xây dựng một hệ
thống website mới. Qua các bước sau:
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
214
1. Xây dựng một website mới có tên là MyClub với lựa chọn file
system là location.
2. Trong cửa sổ Solution Explorer ta thực hiện thêm các thư mục và
các template sau:
+ Tại thư mục gốc thêm file master: Main.master với nội dung
<%@ Master Language="VB" CodeFile="Main.master.vb" Inherits="Main" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <table cellpadding="5" cellspacing="0" width="600" border="1" > <tr> <td width="150" valign="top"> <!-- Menu Column --> <asp:Menu ID="Menu1" Runat="server"> <Items> <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"></asp:MenuItem> <asp:MenuItem Text="Members">
<asp:MenuItem NavigateUrl="Members/ViewAuthors.aspx" Text="View Authors">
</asp:MenuItem> <asp:MenuItem NavigateUrl="Members/ViewTitles.aspx" Text="View Titles"></asp:MenuItem> </asp:MenuItem> <asp:MenuItem Text="Admin">
<asp:MenuItem NavigateUrl="Admin/ViewUser.aspx" Text="View Users"></asp:MenuItem>
</asp:MenuItem> </Items> </asp:Menu> <br /><br /><br /> <asp:LoginView ID="LoginView1" Runat="server"> <AnonymousTemplate> <asp:Menu ID="Menu2" Runat="server"> <Items> <asp:MenuItem NavigateUrl="~/CreateNewUser.aspx"
Text="Create Account"> </asp:MenuItem> </Items> </asp:Menu> </AnonymousTemplate>
<LoggedInTemplate> <asp:Menu ID="Menu3" Runat="server">
<Items> <asp:MenuItem NavigateUrl="~/ChangePassword.aspx" Text="Change Password">
</asp:MenuItem> </Items>
</asp:Menu> </LoggedInTemplate> </asp:LoginView>
</td> <td valign="top">
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
215
<table cellpadding="0" cellspacing="0" width="100%" border="0"> <tr> <td width="85%"> <asp:Label ID="Label1" Runat="server" Text="My First Company Site" Font-Bold="true" Font-Size="24px"></asp:Label> </td> <td width="15%"> <!-- Login Status Area --> <asp:LoginStatus ID="LoginStatus1" Runat="server" /> </td></tr><tr> <td colspan="2"> </td> </tr> <tr> <td colspan="2"> User: <asp:LoginView ID="LoginView2" Runat="server"> <AnonymousTemplate>Guest, Please log in</AnonymousTemplate> <LoggedInTemplate> <asp:LoginName ID="LoginName1" Runat="server" /> </LoggedInTemplate> </asp:LoginView> </td></tr> <tr> <td colspan="2"> </td> </tr> <tr> <td colspan="2" valign="top" height="100%"> <asp:contentplaceholder id="cphMain" runat="server"> </asp:contentplaceholder> </td></tr> </table> </td> </tr> </table> </div> </form> </body> </html>
+ Tại thư mục gốc thêm các web form:
o Login.aspx
<%@ Page Language="VB" MasterPageFile="~/Main.master" Title="Login" %> <asp:content ContentPlaceHolderID="cphMain" runat="server"> <asp:Login ID="Login1" runat="server"> </asp:Login> </asp:content>
o ChangePassword.aspx
<%@ Page Language="VB" MasterPageFile="~/Main.master" Title="Change Password" %> <asp:Content ContentPlaceHolderID="cphMain" runat="server"> <asp:ChangePassword ID="ChangePassword1" Runat="server"> </asp:ChangePassword>
</asp:Content>
o CreateNewUser.aspx
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
216
<%@ Page Language="VB" MasterPageFile="~/Main.master" Title="Create New User" %> <asp:Content ContentPlaceHolderID="cphMain" runat="server"> <asp:CreateUserWizard ID="CreateUserWizard1" Runat="server"> </asp:CreateUserWizard> </asp:Content>
+ Thêm thư mục Admin gồm các trang:
o Default.aspx
<%@ Page Language="VB" MasterPageFile="~/Main.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Admin_Default" title="Untitled Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="cphMain" Runat="Server"> </asp:Content>
o ViewUsers.aspx
<%@ Page Language="VB" MasterPageFile="~/Main.master" Title="View Users" %> <asp:Content ContentPlaceHolderID="cphMain" Runat="server"> <asp:Label ID="Label1" Runat="server" Text="Add Code to View User Info Later-In Admin"></asp:Label>
</asp:Content>
+ Thêm thư mục Member gồm các trang:
o Default.aspx
<%@ Page Language="VB" MasterPageFile="~/Main.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Members_Default" title="Untitled Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="cphMain" Runat="Server"> </asp:Content>
o ViewAuthors.aspx
<%@ Page Language="VB" MasterPageFile="~/Main.master" Title="View Authors" %> <asp:Content ID="Content1" ContentPlaceHolderID="cphMain" Runat="server"> <asp:Label ID="Label1" Runat="server" Text="Add Code to View Author Info Later - In Member"></asp:Label>
</asp:Content>
o ViewTitles.aspx
<%@ Page Language="VB" MasterPageFile="~/Main.master" Title="View Titles" %> <asp:Content ID="Content1" ContentPlaceHolderID="cphMain" runat="server"> <asp:Label ID="Label1" Runat="server" Text="Add Code to View Title Info Later - In Member"></asp:Label> </asp:Content>
Kết quả cho hình dưới đây:
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
217
Hình 3.40. Website MyClub
3. Thực hiện cấu hình: Website\ ASP.NET Configuration xuất hiện
cửa sổ ASP.NET Application Administration.
Hình 3.41. ASP.NET Application Administration
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
218
4. Chọn tab Security hình 3.42.
Hình 3.42. ASP.NET Application Administration
5. Ta sử dụng Wizard để cấu hình: Chọn ‘Use the security Setup
wizard to configure security step by step’ xuất hiện cửa sổ hình
4.23. Thông qua các bước sau:
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
219
+ Bước 1: Cửa sổ Welcome to the Security Setup Wizard (Hình
3.43). Chọn Next
Hình 3.43. Welcome to the Security Setup Wizard
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
220
+ Bước 2: Cửa sổ Select Access Method (Hình 3.44). Chọn
From the internet và chọn Next.
Hình 3.44. Select Access Method
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
221
+ Bước 3: Ở bước thứ 3 đưa thông tin cho việc lưu trữ dữ liệu
trong Cửa sổ Advanced provider settings (Hình 3.45). Ta sẽ
thấy data provider mặc định cho site, data provider mặc định
là SQL Server. Để thay đổi ta sẽ thực hiện kết thúc wizard
quay trở lại tab Provider để cấu hình. Ở đây ta chọn Next.
Hình 3.45. Cửa sổ Advanced provider settings
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
222
+ Bước 4: Ta có thể thực hiện enable roles-based security (Hình
3.46) tại bước 4. Với roles-based security ta có thể thực hiện
quản trị truy cập site đối với những người sử dụng thuộc role
một cách nhanh chóng. Chọn check box Enable roles for this
Web site và chọn Next để xuất hiện Cửa sổ định nghĩa Role
Create New Role screen (Hình 3.47). Trong cửa sổ này ta
thực hiện thêm một nhóm quản trị Admin và click Add Role
và chọn Next.
Hình 3.46. Cửa sổ Defined Roles
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
223
Hình 3.47. Cửa sổ Create New Role
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
224
+ Bước 5: Ở bước này ta thực hiện tạo các User mới. Để tạo
người sử dụng mới ta nhập các thông tin và sau đó Click nút
Create User (Hình 3.48). Ta không cần phải tạo tất cả các
User ở bước này bời vì ta sẽ có giao diện rất dễ sử dụng cho
việc tạo các User.
Hình 3.48. Cửa sổ Create User
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
225
+ Bước 6: Ở bước này ta thực hiện Add New Access Rules. Ở
đây ta thực hiện thiết lập người sử dụng sẽ được truy cập vào
từng vùng của website. Trong ví dụ này ta thiết lập ba quy tắc.
Các quy tắc được áp dụng cho từng thư mục của Web. Chú ý
là thư mục đó phải được chọn.
i. Mặc định Rule cho phép tất cả các Users được truy
cập vào website (Hình 3.49).
ii. Xây dựng các rule trên thư mục Admin. Chọn thư
mục Admin và xây dựng các rules như hình (3.50).
iii. Xây dựng các rule trên thư mục Members. Chọn thư
mục Member và xây dựng các rules như hình (3.51).
Hình 3.49. Cửa sổ Add New Access Rule
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
226
Hình 3.50. Cửa sổ Add New Access Rule
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
227
Hình 3.51. Cửa sổ Add New Access Rule
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
228
+ Bước 7: Cửa sổ Completing the Security Setup Wizard.
Hình 3.52. Cửa sổ Completing the Security Setup Wizard
6. Thực hiện thử nghiệm.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
229
4.3. Thiết kế một số chức năng web
Giỏ hàng, đặt hàng và thanh toán qua mạng:
Khi người sử dụng xem các thông tin chi tiết của sản phẩm, ta phải thiết lập
một quy trình cho phép khách hàng chọn một sản phẩm để thêm vào giỏ hàng
(shopping cart). Tiếp theo, ta yêu cầu khách hàng cung cấp các thông tin để giao
hàng. Các thông tin này bao gồm: Họ và tên, địa chỉ giao hàng, điện thoại,
email, phương thức thanh toán,.v.v...
Trong cơ sở dữ liệu ứng dụng, chúng ta có hai loại khách hàng chính, đó là
khách hàng vãng lai và khách hàng thường xuyên. Với khách hàng thường
xuyên ta có thể có các chế ưu đãi về giá cả. Sau khi người sử dụng cung cấp các
thông tin chi tiết theo yêu cầu để đăng nhập vào hệ thống, người dùng tiếp tục
chọn một số phương thức thanh toán (để thu tiền mua hàng từ khách hàng).
Trong phần này sẽ hướng dẫn xây dựng các trang ví dụ theo quy trình sử
dụng trên.
- Trang MyShop.aspx: Là trang đầu tiên mà người sử dụng duyệt các
sản phẩm trên Website.
Hình 3.53. Trang MyShop
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
230
* Nội dung trang: <%@ Page Language="VB" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %> <script runat="server"> </script> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [ProductDescription], [ProductSize], [ProductImageURL], [UnitPrice] FROM [Products]"> </asp:SqlDataSource> <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" RepeatColumns="3" RepeatDirection="Horizontal"> <ItemTemplate> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("ProductImageURL") %>' PostBackUrl='<%# Eval("ProductID", "ShopItems.aspx?ProductID={0}")%>'/><br /> <asp:Label ID="ProductImageURLLabel" runat="server" Text='<%# Eval("ProductImageURL") %>'></asp:Label><br /> ProductType: <asp:Label ID="ProductTypeLabel" runat="server" Text='<%# Eval("ProductType") %>'></asp:Label><br /> ProductName: <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label><br /> ProductSize: <asp:Label ID="ProductSizeLabel" runat="server" Text='<%# Eval("ProductSize") %>'></asp:Label><br /> UnitPrice: <asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label><br /> <br /> </ItemTemplate> </asp:DataList> <asp:HyperLink ID="ShoppingCartLink" runat="server" NavigateUrl="~/ShoppingCart.aspx">View Shopping Card</asp:HyperLink> </asp:Content>
- Trang ShopItems.aspx: Là trang thể hiện thông tin chi tiết về một sản
phẩm đầu khi người sử dụng duyệt trên trang MyShop.aspx và muốn
xem thông tin chi tiết về sản phẩm mình đã chọn.
Khi người sử dụng click vào ảnh một sản phẩm nào đó nào đó trên
trang Myshop.aspx thì website điều hướng chuyển sang trang
ShopItems.aspx cùng với ProductID thông qua QueryString
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
231
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("ProductImageURL") %>' PostBackUrl='<%# Eval("ProductID", "ShopItems.aspx?ProductID={0}")%>'/><br />
Hình 3.55. Trang ShopItems.aspx
* Nội dung trang: <%@ Page Language="VB" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %> <script runat="server"> Protected Sub ImageButton1_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Dim Price As String = Double.Parse(CType(DataList1.Controls(0).FindControl("UnitPriceLabel"), Label).Text) Dim ProductName As String = CType(DataList1.Controls(0).FindControl("ProductNameLabel"), Label).Text Dim PictureURL As String = CType(DataList1.Controls(0).FindControl("ProductImageURLLabel"), Label).Text Dim ProductID As Integer = CInt(Request.QueryString("ProductID")) If Profile.Cart Is Nothing Then Profile.Cart = New MyShop.Commerce.MyShoppingCart() End If Profile.Cart.Insert(ProductID, Price, 1, ProductName, PictureURL) Server.Transfer("MyShop.aspx") End Sub </script> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [ProductDescription], [ProductSize], [ProductImageURL], [UnitPrice] FROM [Products] WHERE ([ProductID] = @ProductID)"> <SelectParameters>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
232
<asp:QueryStringParameter Name="ProductID" QueryStringField="ProductID" Type="Int32" /> </SelectParameters> </asp:SqlDataSource> <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1"> <ItemTemplate> <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ProductImageURL") %>' /><br /> <asp:Label ID="ProductImageURLLabel" runat="server" Text='<%# Eval("ProductImageURL") %>' Visible="false"></asp:Label><br /> <asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label><br /> <asp:Label ID="ProductTypeLabel" runat="server" Text='<%# Eval("ProductType") %>'></asp:Label><br /> <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label><br /> <asp:Label ID="ProductDescriptionLabel" runat="server" Text='<%# Eval("ProductDescription") %>'></asp:Label><br /> <asp:Label ID="ProductSizeLabel" runat="server" Text='<%# Eval("ProductSize") %>'></asp:Label><br /> <asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label><br /> <br /> </ItemTemplate> </asp:DataList> <asp:ImageButton ID="btnAddToCart" runat="server" OnClick="ImageButton1_Click" ImageUrl="~/Images/cart.gif" /><br /> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/MyShop.aspx">Return To Shop</asp:HyperLink><br /> </asp:Content>
- Đối tượng Shopping: Có hai đối tượng là CartItem và ShoppingCart
(Giỏ hàng).
+ Xây dựng các lớp thể hiện hai đối tượng này (trang Shopping.vb): Imports Microsoft.VisualBasic Imports System.Data Imports System.Data.SqlClient Imports System.Collections.Generic Namespace MyShop.Commerce ''' <summary> ''' Shopping cart item ''' </summary> ''' <remarks>Stores a single item in the shopping cart</remarks> <Serializable()> _ Public Class CartItem #Region "Private Member Variables" ' private member variables: the private storage for the properties Private _productID As Integer Private _productName As String Private _productImageUrl As String Private _quantity As Integer Private _price As Double Private _lineTotal As Double #End Region #Region "Constructors"
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
233
''' <summary> ''' Create a new cart item ''' </summary> ''' <remarks></remarks> Public Sub New() ' no initialization End Sub Public Sub New(ByVal ProductID As Integer, ByVal ProductName As String, ByVal ProductImageUrl As String, ByVal Quantity As Integer, ByVal Price As Double) _productID = ProductID _productName = ProductName _productImageUrl = ProductImageUrl _quantity = Quantity _price = Price _lineTotal = Quantity * Price End Sub #End Region #Region "Properties" ''' <summary> ''' Product ID ''' </summary> ''' <value></value> ''' <remarks></remarks> Public Property ProductID() As Integer Get Return _productID End Get Set(ByVal value As Integer) _productID = value End Set End Property Public Property ProductName() As String Get Return _productName End Get Set(ByVal value As String) _productName = value End Set End Property Public Property ProductImageUrl() As String Get Return _productImageUrl End Get Set(ByVal value As String) _productImageUrl = value End Set End Property Public Property Quantity() As Integer Get Return _quantity End Get Set(ByVal value As Integer) _quantity = value End Set
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
234
End Property Public Property Price() As Double Get Return _price End Get Set(ByVal value As Double) _price = value End Set End Property Public ReadOnly Property LineTotal() As Double Get Return _quantity * _price End Get End Property #End Region End Class ''' <summary> ''' The shopping cart ''' </summary> ''' <remarks></remarks> <Serializable()> _ Public Class MyShoppingCart ' percentage discount given to members Private Const MemberDiscountPercentage As Single = 0.1 #Region "Private Member Variables" Private _dateCreated As DateTime Private _lastUpdate As DateTime Private _items As List(Of CartItem) #End Region #Region "Constructors" ''' <summary> ''' Createa new instance of the cart ''' </summary> ''' <remarks></remarks> Public Sub New() _items = New List(Of CartItem) _dateCreated = DateTime.Now End Sub #End Region #Region "Properties" ''' <summary> ''' The items contained within the cart ''' </summary> ''' <value></value> ''' <remarks>Contains a <see cref="System.Collections.Generic.List(Of CartItem)">List</see> of <paramref name="CartItem">CartItem</paramref> objects</remarks> Public Property Items() As List(Of CartItem) Get Return _items End Get Set(ByVal value As List(Of CartItem)) _items = value End Set End Property
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
235
''' <summary> ''' Returns the amount of the member discount ''' </summary> ''' <value></value> ''' <remarks>0 if the user is not a member. Read only</remarks> Public ReadOnly Property MemberDiscount() As Double Get If HttpContext.Current.User.IsInRole("FriendlyCustomers") Then Return SubTotal * MemberDiscountPercentage Else Return 0 End If End Get End Property ''' <summary> ''' Returns the subtotal of the order ''' </summary> ''' <value></value> ''' <remarks>Read only</remarks> Public ReadOnly Property SubTotal() As Double Get Dim t As Double If _items Is Nothing Then Return 0 End If For Each Item As CartItem In _items t += Item.LineTotal Next Return t End Get End Property ''' <summary> ''' Returns the total order value, including member discount ''' </summary> ''' <value></value> ''' <remarks></remarks> Public ReadOnly Property Total() As Double Get Return SubTotal - MemberDiscount End Get End Property #End Region Public Sub Insert(ByVal ProductID As Integer, ByVal Price As Double, ByVal Quantity As Integer, ByVal ProductName As String, ByVal ProductImageUrl As String) Dim ItemIndex As Integer = ItemIndexOfID(ProductID) If ItemIndex = -1 Then Dim NewItem As New CartItem() NewItem.ProductID = ProductID NewItem.Quantity = Quantity NewItem.Price = Price NewItem.ProductName = ProductName NewItem.ProductImageUrl = ProductImageUrl
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
236
_items.Add(NewItem) Else _items(ItemIndex).Quantity += 1 End If _lastUpdate = DateTime.Now() End Sub Public Sub Update(ByVal RowID As Integer, ByVal ProductID As Integer, ByVal Quantity As Integer, ByVal Price As Double) Dim Item As CartItem = _items(RowID) Item.ProductID = ProductID Item.Quantity = Quantity Item.Price = Price _lastUpdate = DateTime.Now() End Sub Private Function ItemIndexOfID(ByVal ProductID As Integer) As Integer Dim index As Integer For Each item As CartItem In _items If item.ProductID = ProductID Then Return index End If index += 1 Next Return -1 End Function Public Sub DeleteItem(ByVal rowID As Integer) _items.RemoveAt(rowID) _lastUpdate = DateTime.Now() End Sub End Class End Namespace
+ Profile: Trong phần xây dựng này sẽ sử dụng các thuộc tính profile
để xây dựng Shopping Cart. Các thuộc tính profile cho phép theo dõi
và lưu trữ thường xuyên thông tin user chỉ định. ASP.NET tự động so
khớp người sử dụng hiện tại, có thể user là anonymous (nặc danh)
hoặc user loggon với thông tin được lưu trữ. Với việc sử dụng cơ chế
profile, cho phép người sử dụng có thể lưu trữ thông tin về giỏ hàng
của mình trong lần duyệt tiếp theo. Ta khai báo Profile trong tệp
Web.config như sau:
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
237
<anonymousIdentification enabled="true" /> <profile enabled="true"> <properties> <add name="MemberName"/> <add name="Name"/> <add name="Address"/> <add name="City"/> <add name="County"/> <add name="PostCode"/> <add name="Country"/> <add name="Mailings" type="System.Boolean"/> <add name="Email"/>
<add name="Cart" serializeAs="Binary" type="MyShop.Commerce.MyShoppingCart" allowAnonymous="true"/>
</properties> </profile>
Thực hiện MigrateAnonymous thông tin của người sử dụng trong tệp
Global.asax để xác định người sử dụng hiện tại. Public Sub Profile_OnMigrateAnonymous(ByVal Sender As Object, ByVal e As ProfileMigrateEventArgs) ' get the profile for the anonymous user Dim anonProfile As ProfileCommon = Profile.GetProfile(e.AnonymousID) ' if they have a shopping cart, then migrate that to the authenticated user If anonProfile.Cart IsNot Nothing Then If Profile.Cart Is Nothing Then Profile.Cart = New MyShop.Commerce.MyShoppingCart() profile.Cart.Items.AddRange(anonProfile.Cart.Items) End If anonProfile.Cart = Nothing End If ProfileManager.DeleteProfile(e.AnonymousID) AnonymousIdentificationModule.ClearAnonymousIdentifier()
End Sub
- Điều khiển Shopping Cart (MyShoppingCart.ascx): <%@ Control Language="VB" ClassName="MyShoppingCart" %> <%@ Import Namespace="MyShop.Commerce" %> <script runat="server"> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) If Profile.Cart Is Nothing Then Return End If If Not Page.IsPostBack Then BindGrid() End If If Profile.Cart.Items.Count = 0 Then
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
238
TotalLabel.Visible = False End If TotalLabel.Text = String.Format("Total:{0,19:C}", Profile.Cart.Total) End Sub Protected Sub CartGrid_RowCancelingEdit(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCancelEditEventArgs) CartGrid.EditIndex = -1 BindGrid() End Sub Protected Sub CartGrid_RowUpdating(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewUpdateEventArgs) Dim QuantityTextBox As TextBox = CType(CartGrid.Rows(e.RowIndex).Cells(2).Controls(0), TextBox) Dim Quantity As Integer = Convert.ToInt32(QuantityTextBox.Text) If Quantity = 0 Then Profile.Cart.Items.RemoveAt(e.RowIndex) Else Profile.Cart.Items(e.RowIndex).Quantity = Quantity End If CartGrid.EditIndex = -1 BindGrid() End Sub Protected Sub CartGrid_RowEditing(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewEditEventArgs) CartGrid.EditIndex = e.NewEditIndex BindGrid() End Sub Private Sub BindGrid() ' bind to the items in the cart CartGrid.DataSource = Profile.Cart.Items DataBind() End Sub Protected Sub CartGrid_RowDeleting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewDeleteEventArgs) Profile.Cart.Items.RemoveAt(e.RowIndex) BindGrid() End Sub </script> <asp:GridView ID="CartGrid" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID" OnRowEditing="CartGrid_RowEditing" OnRowUpdating="CartGrid_RowUpdating" OnRowDeleting="CartGrid_RowDeleting" OnRowCancelingEdit="CartGrid_RowCancelingEdit"> <Columns> <asp:TemplateField> <ItemTemplate> <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ProductImageURL") %>' /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="ProductName" HeaderText="Product" ReadOnly="True" /> <asp:BoundField DataField="Quantity" HeaderText="Quantity" ReadOnly="False" />
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
239
<asp:BoundField DataField="Price" HeaderText="Price" ReadOnly="True" /> <asp:BoundField DataField="LineTotal" HeaderText="Total" ReadOnly="True" /> <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" /> </Columns> <EmptyDataTemplate> There is nothing in your shopping cart. You can buy items from the <a href="Myshop.aspx">Shop</a>. </EmptyDataTemplate> </asp:GridView> <asp:Label ID="TotalLabel" runat="server"></asp:Label>
Quay trở lại trang ShoppingItems.aspx, tại nút btnAddToCart thì thông
tin về sản phẩm đó sẽ được lưu trong profile. <asp:ImageButton ID="btnAddToCart" runat="server" OnClick="ImageButton1_Click" ImageUrl="~/Images/cart.gif" /><br /> Protected Sub ImageButton1_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Dim Price As String = Double.Parse(CType(DataList1.Controls(0).FindControl("UnitPriceLabel"), Label).Text) Dim ProductName As String = CType(DataList1.Controls(0).FindControl("ProductNameLabel"), Label).Text Dim PictureURL As String = CType(DataList1.Controls(0).FindControl("ProductImageURLLabel"), Label).Text Dim ProductID As Integer = CInt(Request.QueryString("ProductID")) If Profile.Cart Is Nothing Then Profile.Cart = New MyShop.Commerce.MyShoppingCart() End If Profile.Cart.Insert(ProductID, Price, 1, ProductName, PictureURL) Server.Transfer("MyShop.aspx") End Sub
- Trang ShoppingCart.aspx: Hiển thị thông tin đã có trong giỏ hàng.
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
240
Hình 3.56. Trang ShoppingCart.aspx
* Nội dung trang: <%@ Page Language="VB" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %> <%@ Register Src="MyShoppingCart.ascx" TagName="MyShoppingCart" TagPrefix="uc1" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <uc1:MyShoppingCart ID="MyShoppingCart1" runat="server" /> <br /> <asp:HyperLink ID="CheckOut" runat="server" NavigateUrl="~/CheckOut.aspx">CheckOut</asp:HyperLink> </asp:Content>
- CheckOut: Ta sẽ thực hiện CheckOut thông qua 5 bước.
+ Login
+ Delivery address (Địa chỉ phát hàng)
+ Payment (Hình thức thanh toán)
+ Xác nhận đơn hàng
+ Kết thúc
* Trang Checkout.aspx <%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" codefile="Checkout.aspx.vb" Inherits="Checkout" title="Checkout" %> <%@ Register TagPrefix="wu" TagName="ShoppingCart" Src="MyShoppingCart.ascx" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="server"> <asp:Label id="NoCartlabel" runat="server" visible="false"> There are no items in your cart. Visit the shop to buy items. </asp:Label> <div style="float:right"> <asp:LoginView ID="LoginView1" Runat="server"> <AnonymousTemplate> <asp:passwordrecovery id="PasswordRecovery1" runat="server"/>
</AnonymousTemplate> </asp:LoginView> </div> <asp:wizard id="Wizard1" runat="server" activestepindex="0" OnFinishButtonClick="Wizard1_FinishButtonClick" OnNextButtonClick="Wizard1_NextButtonClick"> <WizardSteps> <asp:WizardStep runat="server" Title="Login" AllowReturn="False"> <asp:login id="Login1" runat="server" CreateUserText="Not a member? Create an account" CreateUserUrl="~/createaccount.aspx"></asp:login> </asp:WizardStep> <asp:WizardStep runat="server" Title="Delivery Address">
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
241
<asp:checkbox id="chkUseProfileAddress" runat="server" autopostback="True" text="Use membership address" OnCheckedChanged="chkUseProfileAddress_CheckedChanged"> </asp:checkbox><br />
<table border="0"> <tr><td>Name</td><td><asp:textbox id="txtName" runat="server" /></td></tr> <tr><td>Address</td><td><asp:textbox id="txtAddress" runat="server" /></td></tr> <tr><td>City</td><td><asp:textbox id="txtCity" runat="server" /></td></tr> <tr><td>County</td><td><asp:textbox id="txtCounty" runat="server" /></td></tr> <tr><td>Postcode</td><td><asp:textbox id="txtPostCode" runat="server" /></td></tr> <tr><td>Country</td><td><asp:textbox id="txtCountry" runat="server" /></td></tr> </table> </asp:WizardStep> <asp:WizardStep runat="server" Title="Payment"> Card Type: <asp:DropDownList id="lstCardType" runat="server"> <asp:ListItem>MasterCard</asp:ListItem> <asp:ListItem>Visa</asp:ListItem> </asp:DropDownList> <br /> Card Number: <asp:Textbox id="txtNumber" runat="server" Text="0123456789" ReadOnly="True"/> <br /> Expires: <asp:textbox id="txtExpiresMonth" runat="server" columns="2" /> / <asp:textbox id="txtExpiresYear" runat="server" columns="4" /> </asp:WizardStep> <asp:WizardStep runat="server" Title="Finish"> <wu:ShoppingCart runat="server" ID="ShoppingCart1"></wu:ShoppingCart> <br /> Please confirm you wish to have deducted from your credit card. </asp:WizardStep> <asp:WizardStep runat="server" StepType="Complete" Title="Order Complete"> Thank you for your order. </asp:WizardStep> </WizardSteps> <SideBarStyle VerticalAlign="Top"></SideBarStyle> </asp:wizard> <asp:Label ID="CreateOrderErrorLabel" runat="server" visible="false"> We are sorry but there was an error creating you order.<br /><br /> </asp:Label> </asp:Content>
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
242
* Trang Checkout.aspx.vb Imports System Imports System.Data.SqlClient Imports MyShop.Commerce Partial Class Checkout Inherits System.Web.UI.Page Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Trace.Write("In Page_Load") If Not Page.IsPostBack Then If Profile.Cart Is Nothing Then NoCartlabel.Visible = True Wizard1.Visible = False End If Trace.Write("In Page_Load", User.Identity.IsAuthenticated.ToString()) If User.Identity.IsAuthenticated Then Wizard1.ActiveStepIndex = 1 Else Wizard1.ActiveStepIndex = 0 End If End If End Sub Sub chkUseProfileAddress_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) ' fill the delivery address from the profile, but only if it's empty ' we don't want to overwrite the values If chkUseProfileAddress.Checked AndAlso txtName.Text.Trim() = "" Then txtName.Text = Profile.Name txtAddress.Text = Profile.Address txtCity.Text = Profile.City txtCounty.Text = Profile.County txtPostCode.Text = Profile.PostCode txtCountry.Text = Profile.Country End If End Sub Sub Wizard1_FinishButtonClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) ' Insert the order and order lines into the database Dim conn As SqlConnection = Nothing Dim trans As SqlTransaction = Nothing Dim cmd As SqlCommand Try conn = New SqlConnection(ConfigurationManager.ConnectionStrings("MyConn").ConnectionString) conn.Open()
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
243
trans = conn.BeginTransaction cmd = New SqlCommand() cmd.Connection = conn cmd.Transaction = trans ' set the order details cmd.CommandText = "INSERT INTO Orders(MemberName, OrderDate, CustomerName, Address, County, PostCode, Country, SubTotal, Discount, Total) " & _ "VALUES (@MemberName, @OrderDate, @CustomerName, @Address, @County, @PostCode, @Country, @SubTotal, @Discount, @Total)" cmd.Parameters.Add("@MemberName", Data.SqlDbType.VarChar, 50) cmd.Parameters.Add("@OrderDate", Data.SqlDbType.DateTime) cmd.Parameters.Add("@CustomerName", Data.SqlDbType.NVarChar, 50) cmd.Parameters.Add("@Address", Data.SqlDbType.NVarChar, 255) cmd.Parameters.Add("@County", Data.SqlDbType.NVarChar, 50) cmd.Parameters.Add("@PostCode", Data.SqlDbType.VarChar, 15) cmd.Parameters.Add("@Country", Data.SqlDbType.VarChar, 50) cmd.Parameters.Add("@SubTotal", Data.SqlDbType.Money) cmd.Parameters.Add("@Discount", Data.SqlDbType.Money) cmd.Parameters.Add("@Total", Data.SqlDbType.Money) cmd.Parameters("@MemberName").Value = User.Identity.Name cmd.Parameters("@OrderDate").Value = DateTime.Now() cmd.Parameters("@CustomerName").Value = CType(Wizard1.FindControl("txtName"), TextBox).Text cmd.Parameters("@Address").Value = CType(Wizard1.FindControl("txtAddress"), TextBox).Text cmd.Parameters("@County").Value = CType(Wizard1.FindControl("txtCounty"), TextBox).Text cmd.Parameters("@PostCode").Value = CType(Wizard1.FindControl("txtPostCode"), TextBox).Text cmd.Parameters("@Country").Value = CType(Wizard1.FindControl("txtCountry"), TextBox).Text cmd.Parameters("@SubTotal").Value = Profile.Cart.SubTotal cmd.Parameters("@Discount").Value = Profile.Cart.MemberDiscount cmd.Parameters("@Total").Value = Profile.Cart.Total cmd.ExecuteNonQuery() cmd.CommandText = " Select OrderID From Orders " & _ "Where(MemberName=@MemberName) and (OrderDate=@OrderDate) and (CustomerName=@CustomerName)and (Address=@Address) and (County=@County) and (PostCode=@PostCode) and (Country=@Country) and (SubTotal=@SubTotal) and (Discount=@Discount) and ( Total=@Total)" Dim OrderID As Integer OrderID = Convert.ToInt32(cmd.ExecuteScalar()) ' change the query and parameters for the order lines cmd.CommandText = "INSERT INTO Order_Details(OrderID, ProductID, Quantity, Price) " & _ "VALUES (@OrderID, @ProductID, @Quantity, @Price)" cmd.Parameters.Clear() cmd.Parameters.Add("@OrderID", Data.SqlDbType.Int) cmd.Parameters.Add("@ProductID", Data.SqlDbType.Int) cmd.Parameters.Add("@Quantity", Data.SqlDbType.Int) cmd.Parameters.Add("@Price", Data.SqlDbType.Money)
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
244
cmd.Parameters("@OrderID").Value = OrderID For Each item As CartItem In Profile.Cart.Items cmd.Parameters("@ProductID").Value = item.ProductID cmd.Parameters("@Quantity").Value = item.Quantity cmd.Parameters("@Price").Value = item.Price cmd.ExecuteNonQuery() Next ' commit the transaction trans.Commit() Catch SqlEx As SqlException ' some form of error - rollback the transaction ' and rethrow the exception If trans IsNot Nothing Then trans.Rollback() End If ' Log the exception 'Tools.log("An error occurred while creating the order", SqlEx) Throw New Exception("An error occurred while creating the order", SqlEx) CreateOrderErrorLabel.Visible = True Return Finally If conn IsNot Nothing Then conn.Close() End If End Try ' we will only reach here if the order has been created sucessfully ' so clear the cart Profile.Cart.Items.Clear() End Sub Sub Wizard1_NextButtonClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) Trace.Write("next: CurrentStep", e.CurrentStepIndex.ToString()) If e.CurrentStepIndex = 0 Then Dim l As System.Web.UI.WebControls.Login = CType(Wizard1.FindControl("Login1"), Login) If Membership.ValidateUser(l.UserName, l.Password) Then FormsAuthentication.SetAuthCookie(l.UserName, l.RememberMeSet) e.Cancel = False Else Trace.Write(l.UserName, l.Password) l.InstructionText = "Your login attempt was not successful. Please try again." l.InstructionTextStyle.ForeColor = System.Drawing.Color.Red e.Cancel = True End If
Bài giảng Lập trình Web
Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin
245
Else If Not User.Identity.IsAuthenticated Then e.Cancel = True Wizard1.ActiveStepIndex = 0 End If End If End Sub Protected Sub Wizard1_ActiveStepChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles Wizard1.ActiveStepChanged If Not User.Identity.IsAuthenticated Then Trace.Write("step changed", "not authenticated, returning to step 0") Wizard1.ActiveStepIndex = 0 End If End Sub End Class