›
›

Giáo trình Thiết kế và lập trình web - Trình độ: Cao đẳng - Trường Cao đẳng nghề kỹ thuật công nghệ

pdf 115 trang Gia Huy 17/05/2022 5080
Download
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Thiết kế và lập trình web - Trình độ: Cao đẳng - Trường Cao đẳng nghề kỹ thuật công nghệ", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

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

  • pdfgiao_trinh_thiet_ke_va_lap_trinh_web_trinh_do_cao_dang_truon.pdf

Nội dung text: Giáo trình Thiết kế và lập trình web - Trình độ: Cao đẳng - Trường Cao đẳng nghề kỹ thuật công nghệ

  1. BỘ LAO ĐỘNG -THƯƠNG BINH VÀ XÃ HỘI TRƯỜNG CAO ĐẲNG NGHỀ KỸ THUẬT CÔNG NGHỆ š› & š› GIÁO TRÌNH MÔ ĐUN: THIẾT KẾ VÀ LẬP TRÌNH WEB NGHỀ: CÔNG NGHỆ THÔNG TIN TRÌNH ĐỘ: CAO ĐẲNG Ban hành kèm theo Quyết định số: 245/QĐ-CĐNKTCN ngày 23 tháng 10 năm 2020 của Hiệu trưởng Trường Cao đẳng nghề Kỹ thuật Công nghệ Hà Nội, năm 2021 (Lưu hành nội bộ)
  2. TUYÊN BỐ BẢN QUYỀN Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể được phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo. Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cấm. MÃ TÀI LIỆU: MĐCNTT 26 1
  3. LỜI GIỚI THIỆU Chương trình khung quốc gia nghề Công nghệ thông tin đã được xây dựng trên cơ sở phân tích nghề, phần kỹ thuật nghề được kết cấu theo các môđun, môn học. Để tạo điều kiện thuận lợi cho các cơ sở dạy nghề trong quá trình thực hiện, việc biên soạn giáo trình kỹ thuật nghề theo các môđun, môn học đào tạo nghề là cấp thiết hiện nay. Mô đun MĐCNTT 26: Thiết kế và lập trình web là mô đun đào tạo nghề được biên soạn theo hình thức tích hợp lý thuyết và thực hành. Trong quá trình thực hiện, nhóm biên soạn đã tham khảo nhiều tài liệu thiết kế và lập trình web trong và ngoài nước, kết hợp với kinh nghiệm trong thực tế sản xuất. Mặc dầu có rất nhiều cố gắng, nhưng không tránh khỏi những khiếm khuyết, rất mong nhận được sự đóng góp ý kiến của độc giả để giáo trình được hoàn thiện hơn. Xin chân thành cảm ơn! Hà Nội, ngày 25 tháng 04 năm 2021 Tham gia biên soạn 1. Chủ biên : Phùng Quốc Cảnh 2. Tập thể Giảng viên khoa CNTT Mọi thông tin đóng góp chia sẻ xin gửi về hòm thư: canhdhtn86@gmail.com, hoặc liên hệ số điện thoại: 0359300585 2
  4. MỤC LỤC GIÁO TRÌNH MÔ ĐUN 6 BÀI 1: TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML 8 1. Lịch sử World Wide Web (www) 8 1.1. Giới thiệu về World Wide Web (www) 8 1.2. Giới thiệu về URL: 8 1.3. Giới thiệu về HTTP 9 2. Nhập môn ngôn ngữ HTML (Hyper Text Markup Language) 10 3. Trang và văn bản trên trang 10 4. Ngôn ngữ đặc tả Script 11 4.1. Khai báo biến: 11 4.2. Toán tử: 11 4.3. Các cấu trúc điều kiện 12 4.4. Các cấu trúc lặp 13 4.5. Khai báo hàm và thủ tục: 13 4.6. Một số hàm thông dụng trong ASP: 13 5. CSS (Cascading Style Sheets) 14 5.1. Cú pháp CSS 14 5.2. Các thuộc tính trong CSS 14 5.3. Sử dụng CSS trong trang HTML 15 BÀI 2: THIẾT KẾ WEB TĨNH 18 1. Tổng quan: 18 2. Trang và văn bản trên trang 18 2.1. Tạo tiêu đề 18 2.2. Một số thẻ trình bày và định dạng văn bản: 19 2.3. Các thuộc tính của thẻ trình bày trang 19 3. Bảng biểu (Table) và trang khung (Frame) 20 3.1. Bảng biểu 20 3.2. Khung – Frames 21 4. Multimedia trên trang Web 25 4.1. Đặt màu nền 25 4.2. Màu chữ của văn bản 25 4.3. Màu của đầu mối liên kết - Thuộc tính LINK, VLINK và ALINK 25 4.4. Thuộc tính và mã màu 25 3
  5. 4.5. Nạp hình ảnh làm nền cho trang văn bản 25 4.6. Chèn ảnh - thẻ 26 5. Các yếu tố động trên trang 27 5.1. Đưa âm thanh vào tài liệu 27 5.2. Đưa Video vào tài liệu 28 6. Khung nhập (Form) 29 6.1. Form 29 6.2. Các thành phần trong FORM 29 7. Liên kết – Link 33 7.1. Thẻ neo và mối liên kết 33 7.2. Thuộc tính HREF 33 7.3. Liên kết ra ngoài – External Links 33 7.4. Địa chỉ tuyệt đối 34 7.5. Địa chỉ tương đối 34 7.6. Liên kết nội tại – Internal Link 34 7.7. Siêu liên kết – Hyperlink 34 BÀI 3: XÂY DỰNG WEB ĐỘNG 38 1.Tổng quan về ASP.Net và ADO.Net: 38 1.1. Tổng quan về ngôn ngữ ASP.Net: 38 1.2 Mô hình ADO.Net 46 2. Các đối tượng ASP.Net: 47 2.1. ASP.Net Web Server Controls: 47 2.2. Các đối tượng trong ASP.NET 53 2.3. Biến và các cấu trúc điều khiển: 60 2.4. Thủ tục và hàm 65 3. Các đối tượng ADO.Net: 66 3.1. Các đối tượng trong ADO.Net 67 3.2. Các lớp SqlClient trong mô hình ADO.Net 68 3.3. Các điều khiển dữ liệu ASP.Net 81 BÀI 4: NGÔN NGỮ LẬP TRÌNH WEB 115 1.2. Cài đặt và thiết lập môi trường làm việc phát triển ứng dụng web 118 2. Cấu trúc cú pháp và ngôn ngữ lập trình web 121 2.1. Các cấu trúc lệnh cơ bản 121 4
  6. 2.2. Các sự kiện và xử lý sự kiện 130 3. Lập trình kết nối dữ liệu 136 3.1. Quy trình lập trình kết nối dữ liệu 136 3.2. Các xử lý dữ liệu cơ bản: hiển thị, thêm, sửa, xóa, tìm kiếm, thống kê 139 4. Framework hỗ trợ phát riển ứng dụng web 143 BÀI 5: CÁC ĐỐI TƯỢNG VÀ QUẢN LÝ TRẠNG THÁI 147 1. Đối tượng Request 147 2. Đối tượng Response 149 3. Đối tượng Server 152 4. ViewState 154 5. Session 156 6. Cookie 159 7. Application 162 BÀI 6: TRIỂN KHAI ỨNG DỤNG WEB 167 1. Giới thiệu 167 1.1. Sự ra đời của web services 167 1.2. Vai trò và đặc điểm của web services 168 2. Quy trình triển khai và quản lý ứng dụng web 168 2.2. SOAP - Simple Object Access Protocol 168 2.3. VVSDL - Web Services Description Language 169 2.4. UDDI - Universal Description, Discovery, and Integration 169 3. Xây dựng và quản lý các services 169 TÀI LIỆU THAM KHẢO 177 5
  7. GIÁO TRÌNH MÔ ĐUN Tên mô đun: Thiết kế và lập trình web Mã số mô đun: MĐCNTT 26 Vị trí, tính chất, ý nghĩa và vai trò của mô đun: - Vị trí: Mô đun Thiết kế và lập trình web được bố trí sau khi sau khi sinh viên học xong các mô đun/môn học Tin học cơ bản I, HTML+CSS, JAVASCRIPT, Lập trình cơ bản, lập trình hướng đối tượng, hệ quản trị cơ sở dữ liệu. - Tính chất: Mô đun Lập trình web giúp cung cấp cho người học kiến thức cơ bản về lập trình web phía Server (Back End). Mô đun giúp người học xây dựng ứng dụng web tương đối hoàn chình bằng cách kết hợp kiến thức của mô đun/môn học HTML &CSS, Javascript cho phần Front Page; - Vai trò và ý nghĩa: Mô đun là một trong những mô đun nghề quan trọng định hướng nghề cho sinh viên khi ra trường. Mục tiêu của mô đun: - Về kiến thức: + Hiểu và trình bày được đặc trưng của ứng dụng Web + Trình bày được quy trình xây dựng website cách cấu hình ứng dụng Web và triển khai một website + Trình bày được cấu trúc cơ bản của một trong các ngôn ngữ lập trình web (PHP, ASP.NET, JSP) + Trình bày được các nội dung, các chức năng cơ bản cần xây dựng cho các ứng dụng web + Hiểu và trình bày được quy trình xử lý dữ liệu giữa các WebPage trong các Website. - Về kỹ năng: + Sử dụng được ngôn ngữ lập trình web để xây dựng ứng dụng web kết nối và xử lý dữ liệu phía server. + Sử dụng được Framework phát triển ứng dụng web để hỗ trợ xây dựng ứng dụng web. + Sử dụng và quản lý được các đối tượng cơ bản của website như Request, Response, Cookie, Session, ViewSate, Application + Hiểu và xây dựng được ứng dụng web theo mô hình MVC - Về năng lực tự chủ và trách nhiệm: + Tham gia các dự án lập trình web trong thực tế. + Khả năng tìm tài liệu, đọc hiểu tài liệu + Khả năng làm việc nhóm Nội dung của mô đun: Thời gian Số Tên các bài trong mô đun Tổng Lý Thực Kiểm TT số thuyết hành tra* 1 Bài 1: Tổng quan về www – ngôn ngữ HTML 1. Lịch sử www 2. Nhập môn ngôn ngữ HTML 10 2 8 3. Trang và văn bản trên trang 4. Ngôn ngữ đặc tả Script 5. CSS 2 Bài 2: Thiết kế Web tĩnh 20 3 16 6
  8. 1. Tổng quan 1 2. Trang và văn bản trên trang 3. Bảng biểu (Table) và trang khung (Frame) 4. Multimedia trên trang Web 5. Các yếu tố động trên trang 6. Khung nhập-Form 7. Liên kết 3 Bài 3: Xây dựng Web động 1. Tổng quan về ASP.Net và ADO.Net 2. Các đối tượng ASP.Net 25 4 21 3. Biến và cấu trúc điều khiển 4. Thủ tục và hàm 5. Các đối tượng ADO.Net 4 Bài 4: Ngôn ngữ lập trình Web 1. Giới thiệu 2. Cấu trúc cú pháp và ngôn ngữ 10 3 7 3. Lập trình kết nối dữ liệu 4. Framework hỗ trợ phát riển ứng dụng web 5 Bài 5: Các đối tượng và quản lý trạng thái 1. Đối tượng Request 2. Đối tượng Response 3. Đối tượng Server 18 2 15 1 4. ViewState 5. Session 6. Cookie 7. Application 6 Bài 6: Triển khai ứng dụng Web 1. Giới thiệu 2. Quy trình triển khai và quản lý ứng dụng 6 1 4 1 web 3. Xây dựng và quản lý các services Thi kết thúc mô đun 1 1 Cộng 90 15 71 4 7
  9. BÀI 1: TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML Mã bài: MĐCNTT26-01 Giới thiệu: Bài học này nhằm giới thiệu sơ lược về lịch sử của World Wide Web (www), URL, về giao thức HTTP và ngôn ngữ phổ biến được dùng bởi World Wide Web là HTML (Hyper Text Markup Language). Mục tiêu: - Trình bày được lịch sử của WWW; - Trình bày được cấu trúc của một trang HTML và các thẻ HTML cơ bản, cách bố trí, xử lý và ứng dụng file CSS; - Thực hiện thiết kế được giao diện; - Biết cách tổ chức được thông tin trong trang chủ và bố trí văn bản trên trang. - Ghi nhớ các lệnh điều khiển của ngôn ngữ đặc tả Script. - Thực hiện các thao tác an toàn với máy tính. Nội dung chính: 1. Lịch sử World Wide Web (www) Mục tiêu: Trình bày được lịch sử của WWW. 1.1. Giới thiệu về World Wide Web (www) Ngày nay người ta dùng máy tính như một công cụ rất hữu ích để truy cập Internet, chủ yếu là tìm kiếm thông tin. Thông tin này có thể là văn bản, hình ảnh, âm thanh hay thông tin đa phương tiện Nhu cầu tìm kiếm thông tin ngày càng nhiều đã đưa ra vấn đề: làm thế nào dễ dàng sử dụng máy tính truy cập Internet như một công cụ phục vụ đắc lực cho việc tra cứu, tìm kiếm thông tin trên mạng thông tin rộng lớn nhất toàn cục. Vấn đề trên trở nên dễ dàng hơn bởi ý tưởng siêu văn bản (Hypertext) – văn bản thông minh nhà tin học Ted Nelson đề xuất vào năm 1965. Đến 1989, dự án chính thức được thực hiện bởi một kỹ sư trẻ người Anh tên là Tim Berners – Lee. World Wide Web (www) là một mạng các tài nguyên thông tin. WWW dựa trên 3 cơ chế để các tài nguyên trở nên sẵn dùng cho người xem càng rộng rãi nhất càng tốt, đó là: - Cơ chế đặt tên cùng dạng đối với việc định dạng các tài nguyên trên WWW (như các URL). - Các giao thức, để truy cập tới các tài nguyên qua WWW (như HTTP). - Siêu văn bản, để dễ dàng chuyển đổi giữa các tài nguyên (như HTML). 1.2. Giới thiệu về URL: Mọi tài nguyên sẵn dùng trên WWW – tài liệu HTML, ảnh, video clip, chương trình v v - có một địa chỉ mà có thể được mã hóa bởi một URL. URL được xem là một con trỏ 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. Các URL thường gồm 3 phần: - Việc đặt tên của các cơ chế dùng để truy cập tài nguyên. - Tên của máy tính lưu trữ (tổ chức) tài nguyên. - Tên của bản thân tài nguyên, như một đường dẫn. Ví dụ: URL xác định trang W3C Technical Reports là 8
  10. URL này có thể được đọc như sau: Có một tài liệu sẵn dùng theo giao thức HTTP, đang lưu trong máy www.w3.org, có thể truy cập theo đường dẫn “/TR”. Các cơ chế khác ta có thể thấy trong các tài liệu HTML bao gồm “mailto” đối với thư điện tử và “ftp” đối với FTP. Ví dụ sau đây chỉ tới hộp thư (mailbox) của người dùng: Mọi góp ý, xin gửi thư tới Các định danh đoạn (fragment identifiers): Một số URL chỉ tới việc định vị một tài nguyên. Kiểu này của URL kết thúc với “#” theo sau bởi một dấu hiệu kết nối (gọi là các định danh đoạn). Ví dụ, đây là một URL đánh dấu một móc tên là section_2: Các URL tương đối: không theo cơ chế đặt tên. Đường dẫn của nó thường tham chiếu tới một tài nguyên trên cùng một máy chứa tài liệu hiện tại. Các URL tương đối có thể gồm các thành phần đường dẫn tương đối (như “ ” nghĩa là một mức trên trong cấu trúc được định nghĩa bởi đường dẫn), và có thể bao gồm các dấu hiệu đoạn. Ví dụ của giải pháp URL tương đối, giả sử chúng ta có URL gốc: “ ”. URL tương đối trong đánh dấu dưới đây cho một liên kết siêu văn bản: sẽ mở rộng thành URL đầy đủ “ ” trong khi URL tương đối trong việc đánh dấu cho một ảnh dưới đây sẽ mở rộng thành URL đầy đủ “ ” Các URL được dùng để: - Liên kết tới tài liệu hoặc tài nguyên khác. - Liên kết tới kiểu dạng bên ngoài hoặc kịch bản (script). 1.3. Giới thiệu 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: Hình 1.1: Sự kết nối HTTP - Tạo kết nối: Web Browser giao tiếp với Web Server nhờ địa chỉ URL. - Internet và số cổng (ngầm định là 80) được đặc tả trong URL. - 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. - 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. 9
  11. - 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 trao đổ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. 2. Nhập môn ngôn ngữ HTML (Hyper Text Markup Language) Mục tiêu: Trình bày được cấu trúc của một trang HTML và các thẻ HTML cơ bản. Ngôn ngữ phổ biến dùng bởi World Wide Web là HTML (Hyper Text Markup Language). Nó được dùng cho các mục đích sau: - Phổ biến các tài liệu trực tuyến với các heading, văn bản, bảng, danh sách, ảnh, v.v - Truy tìm thông tin trực tuyến theo các liên kết siêu văn bản bằng việc kích vào một nút. - Thiết kế các định dạng cho việc kiểm soát các giao dịch (transaction) với các thiết bị từ xa, đối với người dùng trong việc tìm kiếm thông tin, tạo các sản phẩm, đặt hàng,.v.v - Bao gồm spread-sheets, video clips, sound clips, và các ứng dụng trực tiếp khác trong các tài liệu của họ. HTML đánh dấu văn bản dưới dạng các thẻ (Tag). Cấu trúc thẻ HTML có dạng như sau: - Thẻ đóng: văn bản chịu tác động Trong đó: + : bắt đầu hiệu ứng thẻ. + : kết thúc hiệu ứng thẻ. Ví dụ: văn bản này được in đậm sẽ cho kết quả ở trình duyệt là: văn bản này được in đậm - Thẻ mở: văn bản chịu tác động Ví dụ: Đoạn 1 Đoạn 2 sẽ cho kết quả là: Đoạn 1 Đoạn 2 - Về quy tắc các thẻ có thể lồng lẫn nhau nhưng vẫn phải đảm bảo đúng cú pháp của thẻ đó. 3. Trang và văn bản trên trang Mục tiêu: Biết cách tổ chức được thông tin trong trang chủ và bố trí văn bản trên trang; Thực hiện thiết kế được giao diện. Trang web có hai đặc trưng cơ bản: - Siêu văn bản (hypertext): bao gồm các văn bản, hình ảnh tĩnh, hình ảnh động, âm thanh, màu sắc và các thành phần khác. - Siêu liên kết (hyperlink): có nhiều mối liên kết đa dạng với các trang và các thành phần khác ở bất cứ một website nào trên phạm vi toàn cầu. Website là tập hợp của rất nhiều webpage có cùng chủ đề tại một địa chỉ nhất định. Trong một website, người ta có thể “đi lại” giữa các webpage bằng con đường hyperlink. Các loại trang chủ yếu của website: - Trang chủ, trang gốc (Master page): với mỗi website có một trang chủ. Là nơi thể hiện rõ chủ đề của site thông qua cách bố trí danh mục tin, cách trang trí mỹ thuật nổi bật 10
  12. - Trang nội dung (content page): là trang chứa nội dung của một mục tin. Ngoài ra trên trang cũng có các danh mục tin con theo chủ đề của mục tin cha, các link để liên kết tới các trang khác. - Trang đầu (home page, start page): là trang xuất hiện ngay sau khi khởi động trình duyệt. Có thể là trang chủ hoặc không nhưng không phải là trang đặc biệt. - Trang đặc biệt (special page): là trang xuất hiện trên nền trang đầu ngay khi khởi động trình duyệt web. Trang này có thể có hoặc không, có thời gian tồn tại ngắn với nội dung thông báo, đưa những tin đặc biệt, muốn mọi người quan tâm trước tiên. Một trang web thường gồm một vài trang màn hình. 4. Ngôn ngữ đặc tả Script Mục tiêu: Ghi nhớ các lệnh điều khiển của ngôn ngữ đặc tả Script. Script hay kịch bản, theo thuật ngữ lập trình, là chương trình chạy với chế độ thông dịch trên máy khách (client) hay máy chủ (server) nhằm tạo ra các ứng dụng web (web base application). Xét trên phương diện: - Client-side : các script bổ sung vào trang web cho phép tạo ra các trang web tương tác, có những hiệu ứng động dựa vào mô hình đối tượng trình duyệt (BOM: browser object model) - Server-side: sử dụng các đối tượng liên quan để chạy các script trên server. Có nhiều loại ngôn ngữ đặc tả như JavaScript, VBScript, Jscript, , trong tài liệu này chỉ giới thiệu sơ lược về ngôn ngữ đặc tả VBScript nhằm giúp các học viên tham khảo thêm khi thực hiện lập trình chức năng cho web. 4.1. Khai báo biến: VB Script khai báo biến thông qua từ khóa dim, biến trong VBScript không cần xác định kiểu, các biến không cấu trúc được xem là biến vô hướng, có thể chứa và tự chuyển đổi hầu hết các kiểu dữ liệu. Hằng được khai báo bằng từ khóa Const. Ví dụ: Const p = 3.14 Mảng được định nghĩa và truy xuất thông qua chỉ số - Dim x,y,z - Dim a(10) ‘Khai báo mảng một chiều a có 10 phần tử’ - Dim b(5,10) ‘Khai báo mảng hai chiều b’ - Redim a(20) ‘Khai báo lại mảng a tăng thêm 10 phần tử vẫn giữ lại giá trị 10 phần tử đầu’ 4.2. Toán tử: VBScript cho phép sử dụng các toán tử xử lý chuỗi, so sánh và các phép gán, tính toán số học như sau: Toán tử Tên gọi Ví dụ ^ Mũ 2^3 = 8 + Cộng x+y - trừ * Nhân / Chia \ Chia phần nguyên 7\3 (kết quả: 2) Mod Chia lấy dư 7 mod 3 (kết quả: 1) & hoặc + Cộng chuỗi “he” & “llo” (kết quả: “hello”) = bằng 11
  13. > lớn hơn khác >= lớn hơn hoặc bằng 2)and(y x)then 4.3. Các cấu trúc điều kiện 4.3.1. Lệnh If then và If then else Cú pháp: If1 then If2 then End if Else End if Chức năng: - Ở lệnh 1 khối lệnh 1 được thực hiện nếu trả về giá trị True. - Ở lệnh 2 khối lệnh 1 được thực hiện nếu trả về giá trị True, ngược lại khối lệnh 2 sẽ được thực hiện. Ví dụ: 4.3.2. Lệnh Select case Cú pháp: Select Case Case Case Else End select Chức năng: lệnh này cho phép lựa chọn nhiều trường hợp để ra quyết định thực thi. Mệnh đề Case Else trong cú pháp dùng cho trường hợp tất cả các phép so sánh của mệnh đề Case là không xảy ra. Ví dụ: <% Select Case tuoi Case 1,2,3,4,5 Msgbox “bạn là nhi đồng” Case 6,7,8,9,10 Msgbox “bạn là thiếu nhi” Case Else Msgbox “bạn là người lớn” 12
  14. End select %> 4.4. Các cấu trúc lặp 4.4.1. Lệnh Do Loop Until Cú pháp: Do Exit Do Loop Until Chức năng: thực hiện trong khi đúng hoặc cho đến khi điều kiện trở nên đúng. Lưu ý là điều kiện có thể kiểm tra tại điểm bắt đầu hoặc kết thúc của vòng lặp, điều khác biệt ở đây là sẽ thực hiện ít nhất một lần nếu điều kiện kiểm tra được đặt ở cuối. Có thể thoát khỏi Do Loop bằng lệnh Exit Do. Ví dụ: 4.4.2. For next: Cú pháp: For gán-biến-chạy = giá trị đầu To giá trị cuối Next Chức năng: thực hiện khối lệnh với số lần lặp xác định. 4.4.3. For Each .next: Cú pháp: For Each phần-tử In Tập-hợp Next Chức năng: lặp lại một đoạn mã cho mỗi phần tử trong mảng hay tập hợp. 4.4.4 While Wend: Cú pháp: While Wend Chức năng: thực hiện khối lệnh trong khi biểu thức điều kiện còn đúng. 4.5. Khai báo hàm và thủ tục: Bạn dùng cú pháp Sub End Sub để khai báo thủ tục trong VBScript. Cú pháp Funtion End Funtion để khai báo hàm. Để thực hiện triệu gọi 1 thủ tục, sử dụng lệnh Call. 4.6. Một số hàm thông dụng trong ASP: 4.6.1. Hàm xử lý văn bản: 13
  15. - TRIM(xâu as string): Bỏ khoảng trắng hai đầu kí tự - LEFT(Xâu as string, n as interger): Lấy bên trái xâu n kí tự. - RIGHT(Xâu as string, n as interger): Lấy bên phải xâu n kí tự. - LCASE(Xâu as string) : Chuyển xâu về chữ thường - UCASE(Xâu as string) : Chuyển xâu về chữ hoa - MID(xâu as string, n1, n2): Lấy n2 kí tự trong xâu bắt đầu từ vị trí n1. - CSTR(Biến): Hàm chuyển đổi biến thành kiểu string Hàm JOIN/SPLIT(Xâu as string, kí tự ngăn cách): Sẽ Nối/Cắt xâu thành một/nhiều đoạn bằng cách xác định kí tự ngăn cách ở trên và cho các đoạn đó lần lượt vào một mảng. Ví dụ: 4.6.2. Các hàm xử lý số: - SQR (n): Căn bậc 2 của n. - INT (n): Lấy phần nguyên n - MOD : phép chia lấy dư. - Round (số, n): Làm tròn số với n chữ số thập phân. - RND (): Trả về số ngẫu nhiên bất kì trong khoảng [0,1] 5. CSS (Cascading Style Sheets) Mục tiêu: Biết cách tạo, bố trí, xử lý và ứng dụng file CSS. CSS là các Style dùng định nghĩa cách trình duyệt hiển thị các đối tượng HTML. Các Style này được lưu trong Style. Nhiều định nghĩa Style cho cùng một loại đối tượng sẽ được sử dụng theo lớp. 5.1. Cú pháp CSS Cú pháp của CSS gồm 3 phần: đối tượng, thuộc tính và giá trị: Đối tượng {thuộc tính: giá trị} Trong đó: + Đối tượng thường là các tag HTML cần định nghĩa cách hiển thị. + Thuộc tính là thuộc tính hiển thị của đối tượng đó. + Giá trị là cách mà bạn muốn một thuộc tính hiển thị như thế nào. + Các cặp thuộc tính: giá trị sẽ được phân cách nhau bởi dấu “;” Ví dụ: Để định nghĩa Style cho thẻ p p { text-align: center; color: black; font-family: arial } 5.2. Các thuộc tính trong CSS 5.2.1. Thuộc tính Class Với thuộc tính Class, bạn có thể định nghĩa nhiều Style khác nhau cho cùng một đối tượng. Ví dụ, bạn muốn có hai Style cho cùng một tag , nếu tag nào có class=right sẽ canh lề bên phải, class=center sẽ canh giữa: p.right {text-align: right} p.center {text-align: center} 14
  16. Trong trang HTML: Đoạn này sẽ được canh phải. Bạn cũng có thể bỏ qua tên đối tượng để định nghĩa kiểu Style cho tất cả các thành phần có Class mà bạn định nghĩa. Ví dụ: .center { text-align: center; color: red} Trong trang HTML sau, cả H1 và đoạn văn bản đều được canh giữa: Tiêu đề này sẽ được canh giữa. 5.2.2. Thuộc tính ID Thuộc tính ID có thể dùng định nghĩa Style theo hai cách: - Tất cả các thành phần HTML có cùng một ID. - Chỉ một thành phần HTML nào đó có ID được định nghĩa. Ví dụ: Style dùng cho tất cả các thành phần HTML có ID là "intro". #intro { font-size:110%; font-weight:bold; color:#0000ff;} Ví dụ: Style chỉ dùng cho thành phần nào có ID là "intro" trong trang Web. p#intro { font-size:110%; font-weight:bold; color:#0000ff;} 5.3. Sử dụng CSS trong trang HTML 5.3.1. Dùng file CSS riêng File CSS độc lập nên dùng khi Style được áp dụng cho nhiều trang. Mỗi trang sử dụng Style định nghĩa trong file CSS sẽ phải liên kết đến file đó bằng tag đặt trong phần HEAD: Ví dụ: một file CSS – Style.css hr {color: sienna} p {margin-left: 20px} 5.3.2. Định nghĩa các style trong phần HEAD Các Style định nghĩa trong phần HEAD có thể dùng cho nhiều thành phần HTML trong trang Web đó. Bạn sử dụng tag để định nghĩa Style: hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif”)} Ghi chú: Trình duyệt thường bỏ qua các tag HTML mà nó không biết, do đó để các trình duyệt không hỗ trợ CSS không hiển thị phần định nghĩa Style, bạn nên đặt trong tag ghi chú của HTML: 15
  17. 5.3.3. Dùng Style cho một thành phần HTML cụ thể Style cho một tag HTML cụ thể gần như không tận dụng được các lợi điểm của CSS ngoại trừ cách hiển thị đối tượng. Bạn dùng thuộc tính Style để định nghĩa Style cho thành phần HTML. Đây là đoạn văn bản 16
  18. Câu hỏi ôn tập Câu 1: URL là gì? Trình bày chức năng của giao thức HTTP? Câu 2: Nêu đặc điểm của siêu văn bản (HTML). Câu 3: Định nghĩa CSS và trình bày các cách chèn CSS vào một trang. Cho ví dụ minh họa. Gợi ý trả lời: Câu 1: Tham khảo mục 1 (1.2, 1.3) trong bài. Câu 2: Tham khảo mục 2 trong bài. Câu 3: Tham khảo mục 5 trong bài. 17
  19. BÀI 2: THIẾT KẾ WEB TĨNH Mã bài: MĐCNTT26-02 Giới thiệu: Ngày nay, việc thiết kế một trang web là khá đơn giản, công việc này được hỗ trợ bởi rất nhiều công cụ đồ họa, môi trường thiết kế khác nhau. Chúng ta có thể tìm hiểu thêm về cách thiết kế, tạo giao diện cho một trang web bằng cách tìm kiếm tài liệu hướng dẫn cũng như phần mềm hỗ trợ trên mạng internet. Trong bài học này giới thiệu, hướng dẫn một số kỹ năng thiết kế giao diện cho trang web sử dụng các thẻ đánh dấu định dạng chuẩn HTML. Mục tiêu: - Mô tả được các chế độ hiển thị một trang Web; - Có khả năng đưa một File vào Web; - Có khả năng tạo được các bảng biểu và các Frame; - Tạo được ứng dụng bảng liên kết trang Web; - Xây dựng được các ứng dụng Multimedia; - Sử dụng tốt các công cụ hỗ trợ thiết kế Web; - Thực hiện các thao tác an toàn với máy tính Nội dung chính: 1. Tổng quan: Mục tiêu: Mô tả được các chế độ hiển thị một trang Web. Ngôn ngữ đánh dấu siêu văn bản HTML chỉ rõ một trang web được hiển thị như thế nào trong một trình duyệt. Sử dụng các thẻ và các phần tử HTML, ta có thể: - Điều khiển hình thức và nội dung của trang. - Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách sử dụng các liên kết được chèn vào tài liệu HTML. - Tạo các biểu mẫu trực tuyến để thu thập thông tin về người dùng, quản lý giao dịch, - Chèn các đối tượng multimedia, các thành phần ActiveX khác, Trong chương này đề cập đến các yếu tố về trang văn bản, cách trình bày trang khung, cách nhúng, chèn một đối tượng multimedia, hướng dẫn cách định dạng trang web bằng css, đó là các yếu tố căn bản để hình thành nên một webpage dạng tĩnh (trang web không kết nối với cơ sở dữ liệu). 2. Trang và văn bản trên trang Mục tiêu: Đề cập đến cách trình bày văn bản, đánh dấu, định dạng văn bản trên trang web. 2.1. Tạo tiêu đề Mở đầu các trang văn bản thường là các tiêu đề cần làm nổi bật từng phần của văn bản như Chương, Mục, cũng cần có đề mục rõ ràng khác với phần thân để người đọc theo dõi cho thuận tiện. Có 6 mức tiêu đề trong HTML. Cách thể hiện các tiêu đề phụ thuộc vào trình duyệt nhưng thông thường thì: 〈 Tiêu đề mức 1 Thẻ định nghĩa có dạng: Ví dụ: Tiêu đề 1 cho ta tiêu đề tương ứng Tiêu đề 1 . 〈 Tiêu đề mức 6 Thẻ định nghĩa có dạng: Ví dụ: Tiêu đề 6 cho ta tiêu đề tương ứng Tiêu đề 6 18
  20. 2.2. Một số thẻ trình bày và định dạng văn bản: Các thành phần trình bày trang để định dạng cả một đoạn văn bản và phải nằm trong phần thân của tài liệu. Có nhiều thẻ được sử dụng nhưng trong tài liệu này chỉ trình bày một số thẻ chính: định dạng phần địa chỉ ( ), đoạn văn bản ( ), xuống dòng ( ), căn chính giữa ( ), đường kẻ ngang ( ), đoạn văn bản đã định dạng sẵn ( ), trích dẫn nguồn tài liệu ( ) Đoạn văn bản Thẻ này dùng để xác định một đoạn văn bản. Thẻ (Paragraph) có thể dùng kèm thuộc tính để ấn định cách trình bày đoạn văn bản. Một đoạn văn bản rỗng là một dòng trắng. Chú ý: một số thẻ khác như các thẻ tiêu đề , , , dòng kẻ ngang , danh sách, bảng biểu, đã kèm luôn việc xuống dòng thành một đoạn văn bản mới. Không cần dùng thêm thẻ trước và sau các thẻ này. Xuống dòng Thẻ này dùng để xuống dòng mới. Bắt buộc xuống dòng tại vị trí gặp từ khóa này. Dòng mới được căn lề như dòng được bẻ tự động khi dòng đó quá dài Thẻ định nghĩa dạng: Nếu không muốn chèn một dòng trắng mà chỉ đơn thuần muốn xuống dòng mới thì cần sử dụng thẻ (Break). Thẻ Break không cần có thẻ đóng kèm theo. Đường kẻ ngang Thẻ này tạo ra đường kẻ ngang (Horizontal Rule) ngăn cách giữa các phần trong tài liệu. Thẻ định nghĩa dạng: Ví dụ: February 8, 1995, CERN Kết quả thu được: Căn chính giữa Thẻ dùng để căn chỉnh đoạn văn bản ở giữa chiều rộng trang văn bản. Thẻ định nghĩa dạng: Thẻ này cũng có tác dụng xuống dòng khi kết thúc đoạn văn bản. 2.3. Các thuộc tính của thẻ trình bày trang Thuộc tính ALIGN của thẻ Paragraph Thẻ dùng để xác định một đoạn văn bản (như trình bày ở phần trước). Dưới đây ta tìm hiểu kỹ thêm một số các thuộc tính kèm theo (ALIGN) của nó. Có thể căn lề trái (left - mặc định), căn giữa (center) hoặc căn lề phải (right). 〈 Căn lề trái: 〈 Căn giữa: 〈 Căn lề phải: Thuộc tính Clear của thẻ xuống dòng Thẻ xuống dòng cũng có 3 thuộc tính kèm theo như sau: 19
  21. Các thẻ được sử dụng khi chèn hình ảnh, để các dòng chữ xuất hiện bên dưới, bên trái hay bên phải của hình. Các kiểu đường kẻ ngang khác nhau Như ở phần trên đã giới thiệu, thẻ tạo một đường kẻ ngang chạy suốt chiều rộng cửa sổ màn hình. Các đường kẻ này có thể được thay đổi độ đậm (mảnh), ngắn, dài, căn lề trái, căn lề phải, bằng cách sử dụng các thuộc tính của chúng. Trong đó: Thẻ, thuộc tính Miêu tả Chèn dòng kẻ ngang suốt chiều rộng cửa sổ màn hình Thay đổi độ dài của đường kẻ, chiếm n% độ rộng cửa sổ WIDTH = n% màn hình. Nếu không có % đằng sau thì độ dài tính theo đơn vị pixcel SIZE = n Thay đổi độ đậm hay mảnh của đường kẻ. n là số pixcel Căn lề trái|phải. Đường kẻ ngang mặc định được căn chính ALIGN=LEFT|RIGHT giữa NOSHADE Không có bóng mờ, đường kẻ thành màu đen 3. Bảng biểu (Table) và trang khung (Frame) Mục tiêu: Có khả năng tạo được các bảng biểu và các Frame. 3.1. Bảng biểu Mã lệnh tạo bảng Giới hạn bảng: Định nghĩa một hàng: Định nghĩa một ô: Các thuộc tính về bảng Thẻ/Thuộc tính Ý nghĩa TABLE - Bắt đầu bảng BORDER - Đặt khung nổi 3D xung quanh bảng. Đặt BackImageUrl="URL" - Đặt ảnh nền của bảng. “URL” - địa chỉ ảnh nền Bắt đầu một dòng của bảng – Table row. Bắt đầu một ô của bảng (bắt đầu cột trong một bảng). Caption Tạo tiêu đề cho bảng CaptionAlign Căn lề cho tiêu đề của bảng Tạo khoảng cách giữa các ô và nội dung của ô trong CellPadding bảng CellSpacing Tạo khoảng cách giữa các ô trong bảng GridLines Tạo viền kẻ theo khung của bảng. 20
  22. None / Horizontal/ Vertical/Both HorizontalAlign Center/Justify/ Left/NotSet Căn lề cho bảng (Default)/Right Rows Tập hợp nhiều hàng trong bảng Kết thúc bảng Ví dụ: CellPadding, GridLines, HorizontalAlign 1 2 3 4 Kết quả thu được bảng như sau: 3.2. Khung – Frames HTML có các thẻ trình bày cho phép chia vùng hi ển thị c ủa cửa sổ trình duy ệt thành nhiều khung, mỗi khung là một cửa sổ độc lập, hiển thị một tài liệu HTML khác nhau. Khung cho phép người thiết kế hiển thị đồng bộ nhiều tài liệu HTML khác nhau để tiện theo dõi, so sánh. Ví dụ, trong khung bên trái hiển thị các nút bấm, còn khung bên phải hiển thị tài liệu tương ứng. 3.2.1. Trang trí khung Trang HTML thực hiện bày trí các khung (gọi là frameset document) có cấu trúc khác trang thông thường, không có khung. Trang thường có 2 phần, HEAD và BODY. Trang bày trí khung có HEAD và FRAMESET thay cho BODY. Thành phần FRAMESET tổ chức các khung trong cửa sổ trình duyệt. Nó cũng có thể chứa thẻ NOFRAMES để xử lí trường hợp trình duyệt không hỗ trợ frame. Các thành phần thông thường khác vốn nằm trong BODY không được xuất hiện trước thẻ mở FRAMESET. Nếu không, thành phần FRAMESET sẽ bị bỏ qua. Ví dụ: Dưới đây là một ví dụ đơn giản. 21
  23. This frameset document contains: Đoạn mã trên sẽ tạo 3 khung, được bài trí như dưới đây. Hình 2.1. Kết quả chạy đoạn code ví dụ Khi trình duyệt khách không hỗ trợ khung thì các khung sẽ không được hiển thị mà thành phần NOFRAMES sẽ được xử lí. 3.2.2. Các thuộc tính FRAMESET Thẻ FRAMESET dùng để phân chia vùng hiển thị trong cửa sổ trình duyệt thành các khung hình chữ nhật. Mỗi khung hình chữ nhật gọi là một frame, được định nghĩa bằng thẻ FRAME. rows = Danh sách các độ cao của các khung Danh sách gồm nhiều phần tử, cách nhau dấu phẩy. Mỗi phần tử xác định độ cao (số dòng) của một khung. Chia chiều đứng thành bao nhiêu khung thì danh sách có bấy nhiêu phần tử. Chiều cao thể hiện bằng - Số pixel - Tỷ lệ phần trăm chiều cao màn hình - Tỷ lệ phần chiều cao còn lại. Giá trị mặc định là 100%, tức chỉ có một khung theo chiều ngang. cols = Danh sách các độ rộng của các khung. 22
  24. Giá trị mặc định là 100%, tức chỉ có một khung theo chiều dọc. Thuộc tính rows thiết lập việc chia khung theo chiều ngang trong một frameset. Nếu không định nghĩa, thì các cột trong khung sẽ chiếm toàn bộ chiều cao vùng hiển thị. Thuộc tính cols thiết lập việc chia khung theo chiều đứng trong một frameset. Nếu không định nghĩa, thì các dòng trong khung sẽ chiếm toàn bộ chiều rộng vùng hiển thị. Phối hợp hai thuộc tính sẽ tạo ra ô lưới các khung. Các ví dụ. 1- Chia màn hình thành hai nửa: nửa trên và nửa dưới: the rest of the definition 2- Chia màn hình thành 3 cột. Cột giữa rộng 250 pixels. Cột đầu chiếm 25% của phần còn lại và cột thứ 3 chiếm 75% của phần độ rộng còn lại. the rest of the definition 3- Tạo lưới gồm 2 x 3 = 6 khung. the rest of the definition 4- Chia chiều đứng màn hình thành 4 khung. Khung thứ nhất chiếm 30% của chiều cao vùng hiển thị. Khung thứ hai có chiều cao cố định 400 pixel. Dấu sao có nghĩa là hai khung thứ 3, thứ 4 chia nhau phần còn lại. Khung thứ 4 có chiều cao là "2*", gấp đôi khung thứ 3 (vì "*" tương đương với 1*). Nếu chiều cao vùng hiển thị là 1000 pixel thì độ cao của các khung 1,2,3,4 lần lượt là: 300, 400, 100, 200 pixel !. the rest of the definition Chia khung lồng nhau và thành phần FRAME Việc chia khung có thể lồng nhau nhiều mức. Ví dụ: chia chiều rộng thành 3 khung đứng, sau đó khung ở giữa lại được chia thành 2 phần trên và dưới. contents of first frame contents of second frame, first row contents of second frame, second row contents of third frame Thẻ FRAME định nghĩa một khung hình cụ thể (trong nhiều khung hình của frameset). Các thuộc tính: name = Tên của khung: Có thể dùng tên này để làm đích của mối siêu liên kết. src = URI : Trỏ đến trang tài liệu sẽ hiển thị trong khung. 23
  25. noresize : Không cho phép co giãn lại kích thước scrolling = auto|yes|no : Thiết lập thanh cuộn. 〈 auto: Xuất hiện thanh cuộn khi cần thiết. Đây là giá trị mặc định. 〈 yes: Luôn có thanh cuộn. 〈 no: Luôn không có thanh cuộn. frameborder = 1|0 Thiết lập đường biên. 〈 1: Có đường biên giữa khung đang xét với các khung kề nó. Đây là giá trị mặc định. 〈 0: Không có đường biên giữa khung đang xét với các khung kề nó. marginwidth = số pixel Thiết lập độ rộng lề chiều rộng = khoảng trống giữa phần hiển thị nội dung và biên trái, biên phải. Giá trị mặc định tuỳ theo bộ duyệt. marginheight = số pixel Thiết lập độ rộng lề chiều cao = khoảng trống giữa phần hiển thị nội dung và biên trên, biên dưới. Giá trị mặc định tuỳ theo trình duyệt. Lưu ý: Nội dung trong một frame không được thuộc về chính trang tài liệu định nghĩa frameset. 3.2.3. Thiết lập Target, thẻ NOFRAME và IFRAME Thiết lập Target Thuộc tính target là để xác định tệp tài liệu HTML sẽ hiển thị trong khung. target = tên khung đích. Thiết lập tên của khung mà tài liệu sẽ mở ra trong khung đó. Thuộc tính này dùng với các thành phần tạo mối liên kết: (A, LINK), image map (AREA), và FORM. Thẻ NOFRAMES Thành phần NOFRAMES thiết lập nội dung cần hiển thị khi trình khách không hỗ trợ frame hoặc đã tắt chức năng hiển thị frame. Thành phần NOFRAMES đặt ở phần cuối của thành phần FRAMESET. Nhúng frame - thẻ IFRAME Thành phần IFRAME cho phép người thiết kế chèn một frame vào giữa một khối văn bản text và hiển thị một tài liệu HTML khác bên trong. Thuộc tính SRC thiết lập tài liệu nguồn để hiển thị trong frame. Các thuộc tính: name = tên. để tham chiếu trong tài liệu width = Độ rộng của inline frame. height = Độ cao của inline frame. Ví dụ: [Your user agent does not support frames or is currently configured not to display frames. However, you may visit ] Inline frames mặc định là không co giãn được, không cần phải nêu rõ noresize. 24
  26. 4. Multimedia trên trang Web Mục tiêu: Xây dựng được các ứng dụng Multimedia; 4.1. Đặt màu nền Dùng Thuộc tính BGCOLOR (Background Color) kèm thẻ để đặt màu nền cho văn bản. Cú pháp như sau: Nội dung của tài liệu trong đó "#rrggbb" là red-green-blue, bộ ba số hai chữ số hệ đếm 16, xác định mã màu. 4.2. Màu chữ của văn bản Thuộc tính TEXT. Thuộc tính này để thiết lập màu cho các con chữ trong văn bản, trừ các đầu mối liên kết phải có màu khác đi. Nội dung của tài liệu ́ 4.3. Màu của đầu mối liên kết - Thuộc tính LINK, VLINK và ALINK Ba thuộc tính trên để đặt màu của các đầu mối siêu liên kết. - LINK - đặt màu hiển thị trước khi nhấn chuột vào để đến thăm đích liên kết. - VLINK - Đặt màu sau khi đích liên kết đã được đến thăm (visited) - ALINK - đặt màu khi bạn kích hoạt, đang nhấn chuột vào (active) Các màu mặc định là: LINK=blue, VLINK=purple and ALINK=red Nội dung của tài liệu 4.4. Thuộc tính và mã màu Thuộc tính Mô tả BGCOLOR Đặt màu nền TEXT Đặt màu các con chữ, trừ các mối nối. LINK Đặt màu ban đầu của đầu mối liên kết khi chưa kích hoạt VLINK Đặt màu đầu mối liên kết khi đã thăm đích ALINK Đặt màu đầu mối liên kết khi kích hoạt 4.5. Nạp hình ảnh làm nền cho trang văn bản Thuộc tính BACKGROUND Có thể dùng thuộc tính này để tạo một ảnh nền cho trang tài liệu siêu văn bản. Thay cho xác định màu ta cần chỉ ra tên tệp hình ảnh kèm đường dẫn. Nội dung tài liệu ́ Ví dụ: Thuộc tính bgproperties 25
  27. Nhiều trang web có nền trang trí gắn chặt cố định, còn phần văn bản sẽ cuộn trôi bên trên mỗi khi ta di chuyển thanh trượt. Hiệu ứng này được tạo ra nhờ thiết lập thêm thuộc tính cho ảnh nền là bgproperties="fixed" Ví dụ: 4.6. Chèn ảnh - thẻ Cú pháp chèn ảnh vào trang Web: IMG (Image), thuộc tính SRC (Source) là đường dẫn đến nơi lấy tệp ảnh. Giá trị của thuộc tính SRC được gán bằng URL là một địa chỉ trên máy tính địa phương hay trên Internet. Nó chỉ ra nơi lưu trữ tệp ảnh cần chèn vào. Địa chỉ URL báo cho trình duyệt biết cần lấy tệp ảnh ở đâu. Nếu tệp ảnh nằm ngay trên máy tính địa phương thì cần ghi rõ đường dẫn Nếu tệp ảnh lấy từ một nơi khác trên Internet thì phải ghi đầy đủ địa chỉ URL Ví dụ: Các thuộc tính của thẻ chèn hình ảnh Trong thẻ IMG còn có m ột số thuộc tính khác như: ALT, WIDTH, HEIGHT, ALIGN, VSPACE, HSPACE, BORDER - Thuộc tính ALT Thuộc tính ALT – ALTernative cho phép ta chèn một đoạn chữ thay thế vào chỗ có hình và hiện lên xâu chú thích khi đưa trỏ chuột vào ảnh. Nên luôn sử dụng thuộc tính này khi đưa hình ảnh vào trang Web vì nhiều người muốn có tốc độ cao, lướt nhanh qua các thông tin là chính đã tắt chức năng đọc ảnh của trình duyệt vẫn có thể biết được ảnh đó mang nội dung gì. Ví dụ: Hiện ảnh Ảnh (không hiện lên) khi có và không sử dụng thuộc tính ALT. Nếu không sử dụng thuộc tính ALT thì tại chỗ có hình sẽ hiện từ IMAGE hoặc biểu tượng ảnh bị khuyết. - Thuộc tính WIDTH và HEIGHT Thuộc tính WIDTH và HEIGHT dùng để xác định chiều rộng và chiều cao của ảnh. Giá trị này có thể tính theo phần trăm (%) hoặc pixel. Chú ý: Nếu đặt chiều rộng và chiều cao không chuẩn sẽ làm hình trong ảnh bị co giãn méo đi. Để khắc phục nhược điểm này, ta nên xử lý ảnh để kích thước phù hợp Thuộc tính ALIGN Thuộc tính ALIGN cho phép ch ỉnh lại vị trí c ủa ảnh theo cả hai chi ều ngang và chiều dọc. Theochi ềud ọc: ALIGN=MIDDLE,ALIGN=TOP, ALIGN=BOTTOM 26
  28. ALIGN=TOP ALIGN=MIDDLE ALIGN=BOTTOM Theo chiều ngang: ALIGN=LEFT, ALIGN=RIGHT ALIGN=LEFT ALIGN=RIGHT Nếu như không có thuộc tính này thì mặc định ảnh được đặt tại đúng nơi đặt thẻ IMG dóng trên cùng dòng chữ, theo cạnh dưới của khung nhìn. Thuộc tính VSPACE và HSPACE Khi sử dụng thuộc tính ALIGN, ảnh được chèn vào dòng văn bản với các chữ dính sát liền. Thuộc tính VSPACE và HSPACE dùng để tạo khoảng trống nhỏ viền xung quanh ảnh (tính theo đơn vị pixel). VSPACE=n Thêm khoảng trống theo chiều dọc HSPACE=n Thêm khoảng trống theo chiều ngang Ví dụ: 5. Các yếu tố động trên trang Mục tiêu: Xây dựng được các ứng dụng Multimedia trên web; 5.1. Đưa âm thanh vào tài liệu 5.1.1. Liên kết đến tệp âm thanh Để chèn một đoạn âm thành vào tài liệu HTML ta cũng theo đúng quy tắc tạo mối liên kết thông thường. Trong thẻ neo, t ại địa điểm URL bây giờ là địa chỉ c ủa tệp âm thanh. Dưới đây là một ví dụ về việc chèn âm thành vào tài liệu. Khi nhấn chuột vào mối liên kết này, tệp âm thanh sẽ được phát lại. 5.1.2. Tạo âm thanh nền Không những có thể chèn tệp âm thanh vào tài liệu HTML mà còn có thể nhúng âm thanh vào tài liệu, nghĩa là âm thanh nền phát ra khi trang tài liệu bắt đầu hiển thị. Để nhúng âm thanh vào tài liệu ta dùng thẻ Trong đó: Thuộc tính Mô tả SRC=”URL” Đường dẫn đến tệp âm thanh Chiều cao của khung nhìn cho giao diện điều khiển HEIGHT=n của phần mềm phát âm thanh Chiều rộng của khung nhìn cho giao diện điều WIDTH=n khiển của phần mềm phát âm thanh Âm thanh tự động được kích hoạt khi bắt đầu nạp AUTOSTART=true|false tài liệu hiện thị (nên đặt là true) 27
  29. LOOP=true|false Thiết lập việc lặp lại nhiều lần hay chỉ một lần Đặt thẻ ở đâu thì khung nhìn của giao diện điều khiển việc phát tệp âm thanh xuất hiện ở đó. Ví dụ: 5.2. Đưa Video vào tài liệu 5.2.1. Chèn tệp Video Việc chèn tệp video vào tài liệu HTML cũng giống như chèn tệp âm thanh. Ví dụ đoạn mã sau đây sẽ chèn một đoạn phim video vào tài liệu. Nó sẽ tạo ra một mối liên kết tới tệp video đã chọn và khi ta nhấn chuột vào mối liên kết thì sẽ được xem lại tệp video đó. Chú ý: Các tệp video đều có kích thước khá lớn nên hãy cân nhắc về tốc độ đường truyền của người dùng. 5.2.2. Nhúng tệp video Trong đó: Thuộc tính Mô tả SRC=”URL” Đường dẫn đến tệp âm video Chiều cao của khung nhìn cho giao diện điều khiển HEIGHT=n của phần mềm phát âm thanh Chiều rộng của khung nhìn cho giao diện điều WIDTH=n khiển của phần mềm phát âm thanh Âm thanh tự động được kích hoạt khi bắt đầu nạp AUTOSTART=true|false tài liệu hiện thị (nên đặt là true) LOOP=true|false Thiết lập việc lặp lại nhiều lần hay chỉ một lần Đặt thẻ ở đâu thì khung nhìn của giao diện điều khiển việc phát tệp video xuất hiện ở đó. 5.2.3. Nhúng Flash vào tài liệu Sử dụng thẻ "> Ví dụ Ví dụ 28
  30. 6. Khung nhập (Form) Mục tiêu: Trình bày cú pháp, chức năng Form và các thành phần trong Form. 6.1. Form Chức năng của Form Form là một cách để chuyển dữ liệu từ người sử dụng đến cho Web Server xử lý. Forms được sử dụng rộng rãi trên WWW. Các forms rất tiện lợi cho người dùng điền các yêu cầu tìm kiếm, các biểu mẫu điều tra, nhập dữ liệu đầu vào cho các ứng dụng Có nhiều thành phần khác nhau (gọi là các điều khiển control) trong một form. Tuỳ theo yêu cầu giao tiếp với người sử dụng cần chọn thành phần thích hợp nhất. Khi tạo form bạn cũng cần phải chỉ rõ cho máy chủ dịch vụ biết cách xử lý form. Có nhiều loại chương trình ứng dụng khác nhau trong máy chủ dịch vụ để làm việc này: các chương trình CGI, ISAPI, các script ASP, JSP, Java Bean, Servlet Thành phần của Form Cặp thẻ để tạo Form là . Mọi thành phần của form như sẽ trình bày dưới đây đều phải nằm trong phạm vi giới hạn bởi cặp thẻ này. Công thức tạo form là: Toàn bộ các thành phần khác bên trong form nằm ở đây Thuộc tính METHOD chỉ ra phương thức trao đổi dữ liệu giữa trình duyệt Web và máy chủ Web. Có 2 ph ương thức là POST, GET. Đối với form phương thức thường là POST. Thuộc tính ACTION để thiết lập địa chỉ URL của chương trình sẽ nhận và xử lý dữ liệu gửi từ form. Ví dụ: Your name: "" Then Response.Write("Hello " & fname & "!") End If %> Kết quả: Khi nhấn nút Submit ta có được kết quả sau 6.2. Các thành phần trong FORM Như đã nêu trên, có nhiều loại thành phần khác nhau trong một Form. Dưới đây sẽ trình bày lần lượt những điểm cơ bản nhất. Hộp văn bản – TextBox Hộp văn bản là nơi để gõ vào một dữ liệu kiểu xâu kí tự. Hộp văn bản sẽ được hiển thị như sau: 29
  31. Mã lệnh khởi tạo: Trong đó id là tên của hộp văn bản này. Textboxid phải duy nhất trong trang, không được trùng nhau. TextMode: là thuộc tính của hộp văn bản có thể là dạng văn bản (text), mật khẩu (password), vùng văn bản (multiline) v v. Ví dụ: A basic TextBox: A password TextBox: A TextBox with text: A multiline TextBox: A TextBox with height: A TextBox with width: Kết quả: Các lựa chọn – Radio Button Các nút chọn radio là một nhóm nút tròn, chỉ cho phép bạn được chọn một trong nhiều nút. Mã lệnh khởi tạo: Trong đó 30
  32. Radiobutton là từ khoá ứng với kiểu nút chọn Radio, Text là nhãn nút sẽ xuất hiện cạnh nút. Groupname là tên nhóm nút. Checked là giá trị mặc định có được chọn (True) hay không chọn (False) khi trang web được mở lên. AutoPostBack cho phép tự động phản hồi khi có sự kiện lựa chọn xảy ra Ví dụ: Select your favorite color: Ô đánh dấu – CheckBoxes Mã lệnh khởi tạo: Trong đó Checkbox là từ khoá ứng với kiểu nút chọn CheckBox, Text là nhãn nút sẽ xuất hiện cạnh nút chọn. TextAlign canh lề cho đoạn text OnCheckedChanged: giá trị cho phép thực thi mã lệnh khi có sự thay đổi AutoPostBack cho phép tự động phản hồi khi có sự kiện lựa chọn xảy ra Ví dụ: Sub Check(sender As Object, e As EventArgs) if check1.Checked then work.Text=home.Text else work.Text="" end if End Sub 31
  33. Home Phone: Work Phone: Danh sách lựa chọn – ListBox Mã lệnh khởi tạo: Ví dụ: Mã: HTML Select Mã lệnh khởi tạo: text1 text2 . textN Nút nhấn – Button Mã lệnh khởi tạo: Trong đó: buttonid để tham chiếu, còn textbutton là nhãn sẽ hiển thị trên nút. Nếu muốn trang trí một biểu tượng hay hình ảnh trên nút chỉ cần thay thế phần nhãn nút bằng hình ảnh. Ví dụ: 32
  34. Kết quả: Nhãn - Label Mã lệnh khởi tạo: Ví dụ: Sub submit(sender As Object, e As EventArgs) lbl1.Text="Your name is " & txt1.Text End Sub Enter your name: Kết quả: 7. Liên kết – Link Mục tiêu: tạo ứng dụng bảng liên kết trang Web. 7.1. Thẻ neo và mối liên kết Các liên kết siêu văn bản trong một tài liệu HTML là để tham chiếu đến một tài liệu khác hay một phần tài liệu khác nằm trong tài liệu đó. Liên kết siêu văn bản gồm có ba phần: giao thức, neo và địa chỉ hay URL. Để tạo một mối liên kết thì việc đầu tiên cần làm là thiết lập cái neo. Cặp thẻ tạo neo là (Anchor). Thẻ này có nhiều thuộc tính bắt buộc phải xác định rõ, ta sẽ tìm hiểu kỹ hơn ở phần sau. 7.2. Thuộc tính HREF HREF (Hypertext REFerence – tham chiếu siêu văn bản) được dùng để liên kết đến: Một tài liệu khác (external link) hay một phần khác nằm trong chính tài liệu đang đọc (internal link). Giao thức để tham chiếu HREF là HTTP. Nếu là liên kết nội tại – internal link thì không cần phải có phần giao thức. 7.3. Liên kết ra ngoài – External Links Để liên kết đến một tài liệu khác, ta cần phải biết địa chỉ URL của tài liệu đích. Cũng cần phải chỉ chỗ, thường là một nhóm vài từ để làm đầu mối liên kết. Nhóm từ này sẽ đổi màu để phân biệt, con chuột trỏ vào sẽ có hình bàn tay và khi nhấn chuột thì trang siêu văn bản đích sẽ được hiển thị. Cú pháp để tạo ra một mối liên kết tới tài liệu khác - liên kết ra ngoài - là như sau: 33
  35. 7.4. Địa chỉ tuyệt đối Khi liên kết tới một tệp nằm ở ngoài máy tính cục bộ ta phải nêu rõ giao thức và đầy đủ địa chỉ URL của tệp đích. Ví dụ: 7.5. Địa chỉ tương đối Nếu liên kết đến một tệp ở ngay trên máy chủ của bạn thì không cần dùng địa chỉ URL tuyệt đối mà dùng địa chỉ tương đối. Thay cho URL là tên tệp cùng với đường đẫn đến thư mục nơi chứa tệp đích. Ví dụ: 7.6. Liên kết nội tại – Internal Link Cũng có thể tạo mối liên kết trong bản thân tài liệu siêu văn bản, từ phần này đến phần khác. Điều này rất có ích khi tài liệu có kích thước lớn. Ta có thể tạo mục lục toàn bộ nội dung trên phần đầu trang gồm tên các chương và liên kết từng tên chương đến phần nội dung tương ứng. Để làm điều này, cần đánh dấu điểm đích -book mark- của liên kết bằng thẻ neo. 7.7. Siêu liên kết – Hyperlink Mã lệnh khởi tạo: Trong đó: HyperLink là khai báo cho biết dùng siêu liên kết. ImageUrl là khai báo hình ảnh hiển thị cho đường liên kết. NavigateUrl khai báo địa chỉ đích Target khung của địa chỉ đích. Ví dụ: Kết quả: 34
  36. Bài tập thực hành của học sinh, sinh viên: Câu 1: Thiết kế trang web theo mẫu sau đây: Câu 2: Thiết kế trang web theo mẫu sau đây Hướng dẫn thực hành: 36
  37. Câu 1: trọng tâm bài thực hành này là các siêu liên kết, hình nền và cách phối màu. Vận dụng các kiến thức đã học trong bài 1, 2 để hoàn thành bài tập. Câu 2: trong bài này, chú ý đến cách tạo khung trang (có thể dùng bảng biểu kết hợp với CSS hoặc sử dụng Frame), cách chèn, nhúng hình ảnh, cách tạo các siêu liên kết đơn giản hoặc tạo và sử dụng các nút nhấn liên kết (Link Button). 37
  38. BÀI 3: XÂY DỰNG WEB ĐỘNG Mã bài: MĐCNTT26-03 Giới thiệu: Bài học này giới thiệu một trong các cách lập trình tạo web động (web có tương tác với cơ sở dữ liệu động) sử dụng đối tượng ASP.Net, ADO.Net trên môi trường Visual Studio.Net. Mục tiêu: - Cài đặt, cấu hình được IIS và ngôn ngữ lập trình Web. - Sử dụng thành thạo môi trường phát triển và lập trình web động. - Sử dụng tốt các đối tượng ASP.Net, ADO.Net, tiện ích của ngôn ngữ lập trình. - Có khả năng kết nối với cơ sở dữ liệu. - Thực hiện tốt công tác an toàn lao động và vệ sinh phân xưởng. Nội dung chính: 1.Tổng quan về ASP.Net và ADO.Net: Mục tiêu: Giới thiệu tổng quan về công nghệ phát triển web động bằng Asp.Net và Ado.Net, giới thiệu về nền tảng .Net Framework, cách cài đặt, cấu hình máy chủ web ảo IIS. Giới thiệu môi trường lập trình web – bộ Visual Studio .Net. 1.1. Tổng quan về ngôn ngữ ASP.Net: 1.1.1. Giới thiệu ASP.Net (Active Server Page. Net): a) Các mô hình code trong trang ASP.NET 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 file chỉ dẫn cho trình biên dịch cách biên dịch và xử lý trang ASP.NET. - Programming code bao gồm các kỹ thuật xử lý sự kiện khác nhau. 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 ra làm hai dạng: - Single File Page: chứa cả MarkUp code và Programming code trên cùng một trang. - Code Behind Page: IDE sẽ tạo ra hai file MarkUp (có phần mở rộng là .aspx chứa markup code) và Class (phần mở rộng là .aspx.cs, .aspx.vb, chứa logic lập trình. Markup file chứa tham chiếu đến Code Behind file nên 2 file này được liên kết với nhau. 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. 38
  39. Lớp Page: 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. Thuộc tính Mô tả ID Chỉ định hoặc truy xuất định danh đối tượng của lớp Page. Title Chỉ định hoặc truy xuất tiêu đề của trang Server Truy xuất đến thể hiện của lớp Server Session Truy xuất đến thể hiện của lớp Session đối với Session hiện tại. Truy xuất đến thể hiện của lớp ControlCollection cho tất cả các Controls điều khiển Server Controls. Chỉ định hoặc truy xuất đến trang Error mà trang này được điều hướng ErrorPage đến khi có lỗi xảy ra. Phương thức Mô tả HasControls Kiểm tra xem có tồn tại các controls trên trang hay không. LoadControl Load một thể hiện của lớp Control GetValidators Trả về tập các đối tượng Validator liên quan đến nhóm Validation chỉ định. MapPath Trả về đường dẫn ảo ánh xạ đến. Trong đó cấu trúc cơ b ản của file .aspx cho cả hai d ạng bao gồm các chỉ d ẫn trang, script code và user interface code. b) Các chỉ dẫn (Directives) 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. Các chỉ d ẫn tốt nhất nên khai báo ở vị trí đầu tiên trên trang. Sau đây là một số chỉ dẫn: Chỉ dẫn Mô tả @Page Định nghĩa các thuộc tính cho Web Page @Import Import một tên miền cho trang @Assembly Liên kết một Assembly với trang hoặc với một điều khiển @Master Định nghĩa các thuộc tính của Master. @Reference Liên kết một trang, một điều khiển tới trang hiện tại @Register Khai báo một điều khiển của người dùng. 39
  40. - Chỉ dẫn @Page: Page là chỉ dẫn các thuộc tính của trang. Mỗi thuộc tính được gán một giá trị, theo đó mà trang ASP.NET sẽ được biên dịch. Thuộc tính Diễn giải Ví dụ Là thuộc tính chỉ định đường dẫn CodeFile file Code Behind. là true Tổng quát: Ta có cách khai báo chỉ định @Page: =“ ” %> - Chỉ dẫn @Import: 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ẽ sẵn sàng trong khi lập trình. Ðể khai báo chỉ dẫn @Import, bạn có thể sử dụng cú pháp sau: 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 c) Điều khiển các sự kiện trong Web pages: 40
  41. 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. Sau đây là một số sự kiện tự động điều khiển trong Webpages: Init -> Load ->PreRender->UnLoad. - Init: Là sự kiện đầu tiên trong vòng đời của trang web. T hường dùng khởi tạo tất cả các điều khiển trong trang web. Init 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. - Load: Là sự kiện xảy ra sau sự kiện Init. Thực hiện bất cứ khi nào Web Page được Request. Khi một người dùng Request một trang Web thì các biến và các điều khiển trong trang được khởi tạo và sau đó trang đó được load lên. - PreRender: Là sự kiện được thực hiện trước khi trang được submit (đệ trình) cho người sử dụng. - UnLoad: Là sự kiện xảy ra sau khi trang được submit cho người dùng. Chú ý: Trong tiến trình xử lý các sự kiện của trang liên quan đến một khái niệm đó là PostBack. - 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 nút lệnh 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 nhận giá trị True 1.1.2. Giới thiệu .Net Framework: .NET Framework là cơ sở hạ tầng 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ỳ. 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 dưới đây, 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. 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. 41
  42. 1.1.2. Giới thiệu môi trường lập trình Ta có thể sử dụng Microsoft Visual Studio 20xx IDE (Integrated Development Environment ) tạo các ứng dụng web ASP.NET. IDE bao gồm các tools cho việc phát triển, gỡ rối và triển khai ứng dụng. Web Page Designing: Visual Studio 20xx IDE cung cấp bộ thiết kế (Design Editor) theo hiệu ứng “What you see is What you get”, do đó rất đơn giản để tạo một web page layout. Cung cấp khả năng keó thả các thành phần vào Web Form và sinh mã code HTML tương ứng. a) Cấu hình ứng dụng với IIS: Internet Information Services (IIS) là một Web Server được phát triển bởi Microsoft để tạo host cho các websites trên một server đơn dùng để quảng bá và quản trị website trên Internet hoặc Intranet. Làm việc IIS với các ứng dụng ASP.NET: Các ứng dụng ASP.NET được lưu trữ trên một thư mục ảo của IIS. Các bước truyền thông giữa ASP.NET và IIS như sau: 42
  43. 1. Browse gửi Request đến IIS 2. IIS nhận request, tìm kiếm file tương ứng và gửi file này đến ASP.NET Script Engine. 3. Script Engine thực hiện các Server - Side Script, sinh HTML page và gửi cho IIS. 4. IIS nhận và gửi cho Browse Cấu hình IIS - Mở IIS. - Right click lên Default Web Site chọn: New\Vitual Directory và làm theo các chỉ dẫn. - Chỉ định IIS Web Project: Chỉ định trong Location là HTTP Xem các hình minh họa sau dùng để cấu hình cho thư mục web có tên Sieuthi. 43
  44. b) Biên dịch trang .Aspx: 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. 44
  45. 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. c) Tạo ứng dụng ban đầu: 1. Khởi động Visual studio, File\ New Web site. Ta thấy hộp thoại New Web Site như hình sau: 2. Trong hộp thoại New Web Site, chọn ASP.NET Web Site và ngôn ngữ Visual Basic (hoặc C#, ) . 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, .cs files), HTML pages (.htm files), configuration information (Web.config file), global Web application information (Global.asax file),và các thành phần khác. Ta có thể sử 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 hoặc *.aspx.cs để viết mã code cho trang. 45
  46. d) 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 sau: 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. - 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. 1.2 Mô hình ADO.Net Khi làm việc với .NET để phát triển các ứng dụng web thì sự nỗ lực của bạn để điều khiển dữ liệu sẽ là nhỏ nhất. Bởi vì, ASP.NET cung cấp các đối tượng ActiveX Data Objects cho .NET (ADO.NET), một tập hợp các công nghệ truy xuất dữ liệu là một phấn của .NET Framework, giúp cho việc điều khiển và làm việc với dữ liệu trở lên dễ dàng hơn. 46
  47. 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, Chúng ta sẽ tìm hiểu về ADO.net sâu hơn ở phần sau. 2. Các đối tượng ASP.Net: Mục tiêu: Sử dụng tốt các đối tượng ASP.Net hỗ trợ lập trình. 2.1. ASP.Net Web Server Controls: 2.1.1. Giới thiệu các điều khiển web a) Server Controls và HTML 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: 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: - 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. - HTML server controls Các phần tử HTML có thêm tính năng tương tác trên trình chủ (server) vì vậy ta có thể lập trình chúng. HTML 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ả. - 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 47
  48. - 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. - Và một số nhóm điều khiển khác như: Data, Navigation, login, 2.1.2. Web Server controls Các điều khiển Web Server cung cấp giao diện đồ họa (Graphical User Interface). Các điều khiển này được sử dụng để cung cấp giao diện và chức năng cho web form. Sau đây là danh sách các điều khiển Web server hay sử dụng: Tên Một số thuộc tính, phương Mô tả điều khiển thức và sự kiện Cho phép hiển thị nhãn trên Lable Text Property Web Form Properties: AccessKey, Điều khiển này thường được sử dụngAutoPostBack, MaxLength, TextBox để nhận input từ người sử dụng Text, TextMode Event: TextChanged Properties: AccessKey, Text, Điều khiển Button chủ yếu được sử Button Enable dụng để Submit thông tin lên Server Event: Click, Command Properties: ImageUrl, Điều khiển Image cho phép hiển thị Image AlternateText, ImageAlign, ảnh trên Web page ToolTip Properties: ImageUrl, Điều khiển ImageButton cho phépAlternateText, ImageAlign, ImageButton tạo Button dạng ảnh trên Web page OnClientClick Event: Click, Command Properties: PostBackURL, Điều khiển LinkButton cho phép hiển Text, LinkButton thị trên Web page một nút lệnh dưới OnClientClick, dạng HyperLink Event: Click, Command Điều khiển Panel được sử dụng giống Properties: Controls, Pannel như một container chứa các điều GroupingText, khiển Web Server khác. Properties: AutoPostBack, Điều khiển cho phép chọn hay CheckBox Checked, Text. không chọn. Event: CheckedChanged Điều khiển RadioButton được sửProperties: AutoPostBack, RadioButton dụng để chọn một trong nhiều lựaChecked, Text, GroupName chọn khác nhau. Event: CheckedChanged 48
  49. Properties: AutoPostBack, Điều khiển CheckBoxList được xétItems, Text, SelectedIndex, CheckBoxList như một nhóm các điều CheckBoxSelectedValue có liên quan với nhau. Method: ClearSelection Properties:Event: SelectedIndexChangedAutoPostBack, Tương tự như một nhóm các Items, Text, SelectedIndex, RadioButtonList điều khiển RadioButton SelectedValue Method: ClearSelection Event: SelectedIndexChanged Properties: AutoPostBack, Items, SelectedIndex, Điều khiển ListBox được sử SelectedValue, SelectionMode ListBox dụng cho phép lựa chọn nhiều phần Method: ClearSelection(), tử trong một danh sách cho trước. GetSelectedIndices() Event: SelectedIndexChanged Điều khiển DropDownList là điềuProperties: AutoPostBack, khiển cho phép chọn một phần tử Items, DropDownList trong danh sách các phần tử thảSelectedIndex, SelectedItem, xuống. Text Properties:Method: ClearSelection() DayHeaderStyle, Điều khiển Calendar là điều khiển Calendar DayNameFormat, SelectedDate, cho phép hiển thị lịch trên Browse SelectionMode. là điều khiển đặc biệt của ASP.NET AdRotator cho phép hiển thị các banner quảng cáo. Properties: Items, Orientation, PathSeparator, Là điều khiển dùng để điều Menu StaticDisplayLevels hướng các trang trong WebSite Method:: FindItem() Event: MenuItemClick Properties: Nodes, ShowCheckBoxes, SelectedValue,NodeStyle, Điều khiển TreeView được xem như ShowLines, SelectedNode một menu có thể mở rộng TreeView Method:: FindNode() và thu hẹp giống như thanh trái Event: SelectedNodeChanged, của cửa sổ Explorer. TreeNodeCollapsed, TreeNodeExpanded, TreeNodeCheckChanged Properties: HotSpotMode, ImageMap cho phép tạo cácHotSpot, ImageURL, ImageMap điểm nóng ảnh có khả năng clickable.AlternateText. Event: Click 49
  50. Properties: HasFile, FileUpload cho phép định vị và Upload các file FileName, PostedFile, Method: SaveAs() Điều khiển này thường được sử dụng View giống như một container chứa các điều khiển khác. Properties: ActiveViewIndex, Một điều khiển MultiView chứa một MultiView Views. Method: SetActiveView hoặc nhiều View Event: ActiveViewChanged 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ảng 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ụ. Sử dụng control AdRotator: a) file ads.XML ~/ads/yahooCall.gif Vidu2_5.aspx Click here to visit our sponsor. 1 A ~/ads/yahooCall.png //www.gotdotnet.com ASP.NET tutorials and more. 5 B Trong đó các thẻ được sử dụng cho trong bảng sau. Bảng các thẻ của Advertisements Tag Ý nghĩa Bắt đầu thẻ Ad Địa chỉ của Ad để hiển thị (địa chỉ file ảnh) Địa chỉ điều hướng nếu người sử dụng click vào Ad 50
  51. 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ế. Một tên category sử dụng cho việc lọc các Ads khi hiển thị. 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 title> Hello My web 2.1.3. Web HTML Server Control: Theo mặc định các thẻ HTML được sử dụng để tạo các điều khiển HTML tương ứng trên các ứng dụng ASP.NET và được xét như là plain text, không thể code bên server –side. HTML Server Controls cung cấp để truy xuất vào các thuộc tính và tính chất của các thẻ HTML. HTML Server Controls trong ASP.NET là tập các điều khiển tương ứng các thẻ HTML, chúng được khai báo trên Web page bằng cách thêm thuộc tính runat=“Server”. Sau đây là một số class hay sử dụng của nhóm điều khiển HTML Server: Class Mô tả HtmlButton Cho phép lập trình sử dụng thẻ HTML trên Server HtmlForm Cho phép lập trình sử dụng thẻ HTML trên Server Cho phép lập trình sử dụng thẻ HTML HtmlInputButton , trên Server Cho phép lập trình sử dụng thẻ HTML HtmlInputText trên Server HtmlTable Cho phép lập trình sử dụng thẻ HTML trên Server HtmlSelect Cho phép lập trình sử dụng thẻ HTML trên Server 51
  52. Một câu hỏi đặt ra là ta nên sử dụng HTML Controls hay ASP.NET Server Controls? Cả hai loại đều sinh ra mã ánh xạ vào các phần tử HTML như nhau. Câu hỏi này liên quan đến các phần tử đơn trên một trang, như thẻ text box, the button, tables, .v v Và được các nhà phát triển kiến trúc ASP.NET của Microsoft trả lời rằng: Mục đích là sử uyển chuyển, sử dụng loại điều khiển nào tùy thuộc vào mục đích, tình huống sử dụng, và thói quen của người sử dụng. Server controls và HTML controls đưa ra các chức năng chồng chéo lên nhau. Tổng quát, làm việc với Server controls thường dễ dàng hơn. Bảng sau đưa ra danh sách các Server controls và HTML controls với các task lập trình. Task Server controls HTML controls Label, Text Field, Text Hiển thị text Label, TextBox, Literal Area, Password Field Hiển thị tables Table, DataGrid Table DropDownList, ListBox, Chọn từ danh sách List Box, Dropdown DataList, Repeater Button, Reset Button, Submit Thực thi lệnh Button, LinkButton, ImageButton Button CheckBox, CheckBoxList, Set values Checkbox, Radio Button RadioButton, RadioButtonList Hiển thị images Image, ImageButton Image Navigation Hyperlink none (use tags in text) Group controls Panel, Placeholder Flow Layout, Grid Layout Làm việc với dates Work with dates none Hiển thị ads AdRotator none (Quảng cáo) Hiển thị horizontal Literal Horizontal Rule rules Lấy filenames từ None File Field client (provided by state Store data on page Input Hidden management) RequiredFieldValidator, CompareValidator, RangeValidator, Validate data none (use page- level scripts) RegularExpressionValidator, CustomValidator,ValidationS ummary 2.1.4. Validation Controls: 52
  53. Validation Controls là các điều khiển đảm bảo sự xác nhận tính hợp lệ của dữ liệu được nhập vào. Một số điều khiển kiểm tra tính hợp lệ - RequiredFieldValidator: 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. - 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. - 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. - 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, - 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ố, - 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. 2.2. Các đối tượng trong ASP.NET 2.2.1. Đố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 sau: Thuộc tính/ Mô tả Phương thức Trả về đường dẫn ảo của yêu cầu, thuộc tính này tương đương vơi FilePath SCRIPT_NAME trong ASP. Trả về HttpFileCollection của tập nhiều tập tin được tải lên Files Server (sử dụng cho dạng multi- part/forms). Trả về một tập dữ liệu của nội dung từ Form Form(NameValueCollection). Tham khảo Request Collection trong phần kế tiếp. Thuộc tính này sử dụng để lấy giá trị của phương thức trong Params Form, QueryString, ServerVariable hay Cookie Ðường dẫn ảo của yêu cầu, tương đương với Path PATH_INFO trong ASP. 53
  54. Ðường dẫn ảo của yêu cầu, tương đương với PathInfo PATH_INFO trong ASP. PhysicalApplicat Ðường dẫn vật lý của thư mục gốc, tương đương với ionPath APPL_PHYSICAL_PATH Ðường dẫn vật lý của yêu cầu, tương đương với PhysicalPath PATH_TRANSLATED trong ASP. Trả về một tập dữ liệu của nội dung từ QueryString 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. Ðối tượng Url chứa đựng chi tiết của yêu cầu. Ðối tượng Url (từ Url không gian tên System) bao gồm các thông tin chi tiết như Port, DNS, Ðịa chỉ IP của người sử dụng, tương đương với UserHostAddress REMOTE_ADDR trong ASP. Tên DNS của người sử dụng, tương đương với UserHostName 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. 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: 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. Ðố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ị. 2.2.2. Đối tượng Response: Ðố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 System.Web. Các thuộc tính và phương thức hay sử dụng đối với đối tương này cho trong bảng sau: 54
  55. Thuộc tính/ Mô tả Phương thức Thuộc tính này chỉ định thời gian trước khi trang đó được lưu Expires 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. Chỉ định nội dung phúc đáp. Thuộc tính cho phép nhận và ContentType thiết lập kiểu Multipurpose Internet Mail Extension (MIME) của Response (mặc định là “text/html”). Thuộc tính cho phép nhận tập hợp các cookies dược truyền tới client trong Response Cookies Public ReadOnly Property Cookies() As System.Web.HttpCookieCollection Chuyển hướng đến địa chỉ file trong cùng ứng dụng hay URL Redirect() khác trong lúc thi hành. Ghi thông tin từ các kiểu dữ liệu như Char, Object, String, Write() Array ra trang Web. Flush() Phương thức này gửi Buffer của Response đến client. 2.2.3. Đối tượng Server: Đối tượng Server thể hiện các phương thức tiện ích đa dạng để chuyể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 ReadOnly Property MachineName() As String + ScriptTimeout: Lấy hoặc thiết lập thời gian (tính bằng giây) mà một Request timeout đã xác định. Public Property ScriptTimeout() As Integer Ví dụ: Response.Write("Time Out:" + Server.ScriptTimeout.ToString) 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 Sub Execute(ByVal path As String) path: Là URL path cần được thực thi. + 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 Function HtmlEncode(ByVal s As String) As String Dùng để mã hoá chuỗi s và trả về chuỗi đã mã hóa. Ví dụ: 55
  56. str = "Xin chào " strE = Server.HtmlEncode(str) Response.Write("Bản gốc:" + str) Response.Write("Bản mã:" + strE) Public Sub HtmlEncode(ByVal s As String, ByVal output As System.IO.TextWriter)>> Dùng để mã chuỗi s và trả về chuỗi đã mã hóa cho output. Ví dụ: Dim out As New System.IO.StreamWriter("E:\Test.txt") Server.HtmlEncode("Xin chao ", out) Server.HtmlDecode("Xin chao ", out) out.Flush() + MapPath: Là một hàm trả về đường dẫn vật lý. Public Shared Function MapPath(ByVal virtualPath As String) As String Ví dụ: Response.Write(Server.MapPath("\Testing")) + UrlEncode: Là phương thức mã hóa chuỗi URL: Public Function UrlEncode(ByVal s As String) As String Public Sub UrlEncode(ByVal s As String, ByVal output As System.IO.TextWriter) 2.2.4. Đối tượng Application Đối tượng Application được sử dụng để tham chiếu đến thể hiện của lớp HttpApplicationState. Application State (trạng thái ứng dụng) lưu trữ toàn bộ thông tin sử dụng qua lại giữa 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. a) Các thuộc tính của đối tượng Application: Đối tượng Application sẽ thể hiện các thuộc tính của lớp HtttpApplicationState. Một vài các thuộc tính quan trọng của lớp này là: - AllKeys: Truy xuất các Access Keys từ tập các trạng thái ứng dụng. Đoạn code sau minh họa cách sử dụng thuộc tính AllKeys. Dim strKeys(Application.Count)As String strKeys = Application.AllKeys - Contents: truy xuất tham chiếu đến đối tượng HttpApplicationState. Application.Contents.RemoveAll() - Count: đếm và truy xuất số các đối tượng. intObj=Application.Count - Item: Truy xuất đến một đối tượng cụ thể trong tập hợp HttpApplicationState. Application.Item("User") = "Huongct" Response.Write(Application("User") & " ") Response.Write(Application(0) & " ") Chú ý: Cách truy xuất Application.Item("User") tương đương với Application("User") và tương đương với Application(0) trong đó 0 là chỉ số Index của đối tượng đầu tiên trong tập hợp. b) Phương thức của lớp “HttpApplicationState: Sau đây là một số phương thức quan trọng của lớp HttpApplicationState: - Add: 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 Sub Add(ByVal name As String, ByVal value As Object) Đoạn code sau minh họa cách sử dụng phương thức Add Application.Add(“UserName”, “Huongct”) 56
  57. - Clear: 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ủa phương thức Clear là: Public Sub Clear() Đoạn code sau minh họa cách sử dụng phương thức: Application.Clear() - Remove: 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ủa phương thức là: Public Sub Remove(ByVal name As String) Đ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ủa phương thức là: Public Sub 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ủa phương thức là: Public Sub RemoveAt(ByVal index As Integer) Đoạn code sau minh họa cách sử dụng phương thức: Application.RemoveAt(0); c) Phương thức “Lock” và “UnLock” 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 Sub Lock() 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 Sub UnLock() Ví dụ: Sử dụng các phương thức trên. Application.Lock() Application("VisitorsCount")= Application("VisitorsCount")+1 Application.UnLock() 2.2.5. Đố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 57
  58. 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. a) Session Variables (Các biến Session) Các biến Session được được sử dụng để lưu trữ thông tin về phiên làm việc của một người 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 biến Session được xóa ngay khi phiên làm việc với Website của người dùng 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 thể hiện thông qua thuộc tính System.Web.HttpContext.Session. - Thuộc tính SessionID: 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 Response.Write(“SessionID:“+Session.SessionID) - Phương thức Clear: Là phương thức xóa tất cả đối tượng trong tập Session State. Cú pháp của phương thức Clear là: Public Sub Clear() Đoạn code sau minh họa cách sử dụng phương thức: Session.Clear() - Phương thức Remove: Là phương thức xóa một đối tượng chỉ định trong tập Session State. Cú pháp của phương thức là: Public Sub Remove(ByVal name As String) Đoạn code sau minh họa cách sử dụng phương thức: Session.Remove(“UserName”); - RemoveAll: Là phương thức xóa tất cả đối tượng trong tập Session State. Cú pháp của phương thức là: Public Sub RemoveAll() Đoạn code sau minh họa cách sử dụng phương thức: Session.RemoveAll(); - RemoveAt: Là phương thức xóa một đối tượng chỉ định trong tập Session State. Cú pháp của phương thức là: Public Sub RemoveAt(ByVal index As Integer) Đoạn code sau minh họa cách sử dụng phương thức: Session.RemoveAt(0); 58
  59. c) Session State Events ASP.NET 2.0 cung cấp 2 sự kiện cho phép quản trị Session đó là: - Session_OnStart Event - Session_OnEnd Event 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. 2.2.6. 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. 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 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. 59
  60. 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.3. Biến và các cấu trúc điều khiển: .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 giáo trình này ta sử dụng Visual Basic.NET để minh họa. 2.3.1. Khai báo biến Ta thực hiện khai báo biến theo cú pháp sau: Dim AS Trong trang ASP.NET, theo mặc định biến phải được khai báo trước khi được sử dụng. Ta có thể không khai báo biến mà vẫn sử dụng chúng trong trang ASP.NET bằng cách gán giá trị false (mặc định là true) cho Page Explicit theo cú pháp sau: Các kiểu biến được cho trong bảng sau: CLR (Common Language Visual Basic Type C# Type Runtime) Type Boolean Boolean bool Byte Byte byte Char Char char DateTime Date DateTime Decimal Decimal decimal Double Double double Int32 Integer int Int64 Long long Object Object Object SByte SByte sbyte Int16 Short short Single Single float String String string 60
  61. UInt32 UInteger uint UInt64 ULong ulong UInt16 UShort ushort Để chuyển đổi kiểu dữ liệu ta sử dụng: - Hàm Ctype theo có pháp sau: CType(expression, typename) Trong đó expression là biểu thức cần chuyển đổi sang kiểu typename. - Sử dụng phương thức Parse của hầu hết các kiểu dữ liệu: Dim Age As Integer Age = Integer.Parse(AgeTextBox.Text) - Trong trường hợp chuyển đổi sang kiểu chuỗi ta sử dụng theo phương thức ToString() theo cú pháp sau: Dim instance As AppDomain Dim returnValue As String returnValue = instance.ToString 2.3.2. Các cấu trúc điều khiển a) Cấu trúc rẽ nhánh If Then Ta sử dụng cấu trúc If Then theo một trong các cú pháp sau: - If condition Then [statement] -If condition Then [statements] End If -If condition Then [statements] [ElseIf elseifcondition Then [elseIfStatements]] [Else [elseStatements]] End If Trong đó: + condition: Là biểu thức điều kiện, trả về giá trị True hoặc False. + statement: Là một câu lệnh được thực hiện khi biểu thức điều kiện condition nhận giá trị True. + statements: Là một câu lệnh, hoặc nhiều câu lệnh được thực hiện khi biểu thức điều kiện condition nhận giá trị True. + elseifcondition: Tương tự như condition. + elseifstatements: Là một câu lệnh được thực hiện khi biểu thức điều kiện elseifcondition nhận giá trị True. + elsestatements: Là các câu lệnh được thực hiện khi tất cả các biểu thức điều kiện là false. Chú ý: Ta có thể sử dụng khối các câu lệnh if lồng nhau. Ví dụ. Sử dụng cấu trúc rẽ nhánh If Then Protected Sub Page_Load(ByVal sender As Object,ByVal e As System.EventArgs) Dim x, y, a As Integer x = 25 y = 5 If x < y Then a = y - x Else a = x - y 61
  62. End If Response.Write("Trị tuyệt đối của x-y: " & a) End Sub b) Cấu trúc rẽ nhánh Select Case Select [ Case ] testexpression [ Case expressionlist [ statements ] ] [ Case Else [ elsestatements ] ] End Select Trong đó: + testexpression: Là biểu thức giá trị có thể liệt kê được, giá trị thuộc một trong các loại dữ liệu sau: Boolean, Byte, Char, Date, Double, Decimal, Integer, Long, Object, Short, Single, String. + expressionlist: Là danh sách các giá trị mà testexpression có thể nhận, có thể là hằng hoặc biểu thức, chúng cách nhau dấu. Biểu thức trong Case có nhận một trong các dạng sau: expression1 To expression2 [ Is ] comparisonoperator expression expression Từ khóa To để chỉ một khoảng giá trị, Is dùng để so sánh. Ví dụ như: Case 1 To 4,5,6,7 To 9,11,13, Is > MaxNumber + statements: Một hay nhiều câu lệnh trong Case. + elsestatements: Một hay nhiều câu lệnh trong Case Else. c) Cấu trúc lặp Do Loop Lặp lại một khối câu lệnh trong khi biểu thức điều kiện là True hoặc cho đến khi điều kiện đạt giá trị True. Ta sử dụng cú pháp sau: Do { While | Until } condition [ statements ] [ Exit Do ] [ statements ] Loop hoặc Do [ statements ] [ Exit Do ] [ statements ] Loop { While | Until } condition Trong đó: + While : được khai báo trừ khi Until được sử dụng. Lặp cho đến khi condition là False. + Until: được khai báo trừ khi While được sử dụng. Lặp cho đến khi condition là True. + condition : Là biểu thức Boolean. + statements : Là một câu lệnh hoặc khối câu lệnh lặp lại. + Exit Do: Là câu lệnh thoát khỏi vòng lặp Do loop. 62