Đoạn cho kết là: Đoạn Đoạn - Về quy tắc thẻ lồng lẫn phải đảm bảo cú pháp thẻ Trang văn trang Mục tiêu: Biết cách tổ chức thông tin trang chủ bố trí văn trang; Thực thiết kế giao diện Trang web có hai đặc trưng bản: - Siêu văn (hypertext): bao gồm văn bản, hình ảnh tĩnh, hình ảnh động, âm thanh, màu sắ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 trang thành phần khác website phạm vi toàn cầu Website tập hợp nhiều webpage có chủ đề địa định Trong website, người ta “đi lại” webpage đường hyperlink Các loại trang chủ yếu website: - Trang chủ, trang gốc (Master page): với website có trang chủ Là nơi thể rõ chủ đề site thơng qua cách bố trí danh mục tin, cách trang trí mỹ thuật bật… - Trang nội dung (content page): trang chứa nội dung mục tin Ngồi trang có danh mục tin theo chủ đề mục tin cha, link để liên kết tới trang khác - Trang đầu (home page, start page): trang xuất sau khởi động trình duyệt Có thể trang chủ không trang đặc biệt - Trang đặc biệt (special page): trang xuất trang đầu khởi động trình duyệt web Trang có khơng, có thời gian tồn ngắn với nội dung thơng báo, đưa tin đặc biệt, muốn người quan tâm trước tiên Một trang web thường gồm vài trang hình Ngơn ngữ đặc tả Script Mục tiêu: Ghi nhớ lệnh điều khiển ngôn ngữ đặc tả Script Script hay kịch bản, theo thuật ngữ lập trình, chương trình chạy với chế độ thông dịch máy khách (client) hay máy chủ (server) nhằm tạo ứng dụng web (web base application) Xét phương diện: - Client-side : script bổ sung vào trang web cho phép tạo trang web tương tác, có 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 đối tượng liên quan để chạy script server Có nhiều loại ngơn ngữ đặc tả JavaScript, VBScript, Jscript, , tài liệu giới thiệu sơ lược ngôn ngữ đặc tả VBScript nhằm giúp học viên tham khảo thêm thực lập trình chức 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 VBScript khơng cần xác định kiểu, biến không cấu trúc xem biến vơ hướng, chứa tự chuyển đổi hầu hết kiểu liệu Hằng khai báo từ khóa Const Ví dụ: Const p = 3.14 Mảng định nghĩa truy xuất thông qua số - Dim x,y,z - Dim a(10) ‘Khai báo mảng 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ử giữ lại giá trị 10 phần tử đầu’ 4.2 Toán tử: VBScript cho phép sử dụng toán tử xử lý chuỗi, so sánh phép gán, tính tốn số học sau: Tốn tử Tên gọi Ví dụ ^ Mũ 2^3 = + Cộng x+y trừ * Nhân / Chia \ Chia phần nguyên 7\3 (kết quả: 2) Mod Chia lấy dư mod (kết quả: 1) & + Cộng chuỗi “he” & “llo” (kết quả: “hello”) = > lớn < nhỏ 10 DeleteText= 119 = Kết cho hình 3.26 Hình 3.26 Duyệt ví dụ 3.15 Chú ý: - Để Upload file lên Server ta dùng điều khiển FileUpload - Để tạo Download file mở sử dụng thẻ Hyperlink , địa URL phải bao gồm server path file name bao gồm tên mở rộng Download Baigiang Web Mở file ảnh e) Lọc liệu sử dụng Data Source controls Data source controls cung cấp số dịch vụ liệu để dễ dàng có thêm khả tiên tiến cho ứng dụng Nó bao gồm việc lọc liệu dựa điều kiện tìm kiếm mà ta định Việc lọc liệu thuận lợi làm việc với cached data, ta cung cấp khả tìm kiếm khơng cần phải chạy lại truy vấn gọi lại phương thức đọc liệu Để lọc liệu, data source control phải cấu sau: + Đối với điều khiển SqlDataSource AccessDataSource, thuộc tính DataSourceMode phải thiết lập tới DataSet 120 + Đối với điều khiển ObjectDataSource, đối tượng source object phải trả DataSet DataTable Thiết lập biểu thức lọc (Filter Expression): Ta định lọc áp dụng cho liệu trả điều khiển ObjectDataSource, SqlDataSource, AccessDataSource việc thiết lập thuộc tính FilterExpression data source Biểu thức lọc áp dụng phương thức select data source control gọi Cú pháp biểu thức lọc phụ thuộc vào cú pháp thuộc tính Expression lớp DataColumn FilterExpression="Country LIKE '{0}' AND LastName LIKE '{1}'" Chú ý: Cả hai ký tự % * sử dụng làm ký tự thay toán tử so sánh LIKE Ký tự thay cho phép vị trí bắt đầu kết thúc mẫu Ví dụ: "ItemNa me me "ItemNa "ItemNa IKE IKE L '*product*'" L '*product'" L 'product*'" me IKE Ký tự thay khơng phép nằm chuỗi mẫu Ví dụ, 'te*xt'không phép Cung cấp tham số lọc (Filter Parameters): Ta cung cấp tham số biểu thức lọc cho điều khiển ObjectDataSource, SqlDataSource, AccessDataSource Các tham số cho phép ta cung cấp giá trị lọc thời điểm chạy không cần viết code để thiết lập thuộc tính FilterExpression Ta định tham số biểu thức lọc sử dụng collection FilterParameters điều khiển data source Các tham số truy xuất liệu từ điều khiển, đối tượng QueryString, session state, user profile,.v.v… Trong biểu thức lọc (Filter Expression), ta tạo placeholders tương ứng tới items collection FilterParameters điều khiển data source Các Placeholders số hóa, với thể tham số collection Ta định placeholder biểu thức lọc cách thay số tham số lọc ký tự '{' '}' ví dụ sau: Country = '{0}' AND LastName LIKE '{1}' 121 Bài tập thực hành học viên: Bài tập 3.1: Câu 1: Trình bày khác ASP.NET Server Control phần từ HTML Câu 2: Validation control gì? Trình bày mục đích sử dụng validation control thiết kế web động Câu 3: Giải thích ý nghĩa thuật ngữ dùng validation controls sau: RequiredFieldValidator, CompareValidator, RangeValidator, RegularExpressionValidator, ValidationSummary Câu 4: Tạo Web Form đăng ký thông tin tuyển dụng Mục tiêu: Giúp sinh viên biết cách vận dụng ASP.NET Server Control Web HTML Server Control xây dựng trang web Hướng dẫn: - Sinh viên viết ngôn ngữ C# VB.NET - Trong phần tập sinh viên tạo ASP.NET Web Form có tên JobRegister.aspx Form chứa server control dạng Web Control HTML Server control Form cho phép user nhập thông tin cá nhân kỹ chuyên môn - Giao diện Form minh họa hình bên dưới: - Sau hoàn tất việc đăng ký thông tin hiển thị đầy đủ trangASP.NET khác RegisteringComplete.aspx 122 Câu 5: Sử dụng Validation Control để thiết kế trang web: Kiểm tra thông tin đầu vào cho trang đăng nhập Thanh tốn hố đơn, form điền thơng tin sử dụng kiểm tra thông tin người dùng nhập liệu Mục tiêu: - Giúp sinh viên áp dụng điều khiển RequiredFieldValidator, CompareValidator, RangeValidator, RegularExpressionValidator, ValidationSummary… để tạo ràng buộc liệu cho trang web Hướng dẫn: Tạo ứng dụng web ASP.NET Thêm trang vào dự án Đặt tên Dangnhap.aspx Thiết kế form đăng nhập (theo gợi ý mẫu đây: người dung kích chuột vào button Login chuyển sang trang Thanhtoanhoadon.aspx, kích chuột vào button Reset xố trắng liệu ô textbox 123 Bấm chuột phải lên dự án thêm WebForm đặt tên Thanhtoanhoadon.aspx Thiết kế form với ràng buột liệu cho trường textbox với giao diện minh hoạ hình đây: Khi người dùng kích chuột vào button Submit chuyển sang trang Camon.aspx sau: 124 Bài tập 3.2 Câu 1: Trình bày chức đối tượng Application ASP.NET? Câu 2: Đối tượng Session gì? Trình bày chức đối tượng Session ứng dụng web? Câu 3: Đối tượng Request gì? Trình bày chức đối tượng Request ứng dụng web? Câu 4: Sử dụng đối tượng Response & Request Asp.Net để thực trang web cho phép nhập hai số a,b Sau tính cộng, trừ nhân chia hai số cho Hướng dẫn: - Bước 1: Thiết kế giao diện trang nhập liệu - Bước 2: Viết mã lệnh + Lấy giá trị số a & b sử dụng phương thức Request.Form["Tên Điều Khiển"] + Tính tổng, hiệu, tích, thương a&b + Hiển thị kết Câu 5: Sử dụng đối tượng Application để tính số lần truy cập vào trang web Câu 6: Cho đoạn chương trình sau, thực thi kết giải thích ý nghĩa chương trình 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 Response.Write("Counter: " & _ Session ASPX ") Session.Contents("Counter")) Session.Contents.Remove("Countner") Session.Remove("Countner") Session.RemoveAll() End sub Untitled Page 125 Bài tập 3.3 Câu 1: Trình bày cú pháp cấu trúc rẽ nhánh If…then, Select Case Asp.Net? Câu 2: Trình bày cú pháp lặp Do…Loop Asp.Net? Câu 3: Trình bày cú pháp cấu trúc lặp For Each …Next For …Next? Câu 4: Viết chương trình cho phép người dùng nhập vào tháng bất kỳ, in tháng thuộc mùa năm Hướng dẫn: Sử dụng cấu trúc Select Case Câu 5: Giải thích ý nghĩa đoạn chương trình sau: Private Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Dim MyCookie As New HttpCookie("LastVisit") Dim MyCookie1 As New HttpCookie("New") Dim now As DateTime = DateTime.Now ' Ghi giá trị xuống Cookies Response.Cookies.Clear() MyCookie.Value = now.ToString() MyCookie.Expires = Response.Cookies.Add(MyCookie) MyCookie1.Value now.AddHours(1) = now.ToString() MyCookie1.Expires Response.Cookies.Add(MyCookie1) =now.AddHours(1) Response.Write("Number cookie:" & Request.Cookies.Count & "") ' Đọc cookie For Each strKey As String In Request.Cookies Response.Write(strKey & " = " & _ Request.Cookies(strKey).Value & "") Next 126 End Sub Bài tập 3.4 Câu 1: Trình bày thủ tục cách khai báo thủ tục Asp.Net? Câu 2: Trình bày hàm cách khai báo hàm Asp.Net? Câu 3: Phân biệt tham biến tham trị Asp.Net? Câu 4: Viết thủ tục tính tổng hai số a,b Xây dựng trang web sử dụng thủ tục vừa tạo Hướng dẫn: Bước 1: Viết thủ tục tính tổng hai số, khai báo sau Sub Tong(ByVal a As Integer, ByVal b As Integer) Bước 2: Xây dựng trang web có sử dụng thủ tục vừa tạo Giao diện Mã nguồn tham khảo: Untitled Page Giá trị a: 127 Giá trị b: Câu 5: Xây dựng lại chương trình thay thủ tục hàm Câu 6: Giải thích ý nghĩa hai tham số a,b chương trình sau, cho biết kết trả chương trình Partial Class vidu2_20 Inherits System.Web.UI.Page 'Khai báo a tham trị b tham biến Function Tong(ByVal a As Integer, ByRef b As Integer) As Integer a += 100 b -= 10 Return (a + b) End Function Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim a, b As Integer a = 100 b = 100 Response.Write("Gia trị trước truyền vào cho hàm ") Response.Write("a=" & a.ToString & "") Response.Write("b=" & b.ToString & "") Response.Write("Gọi hàm tong(a,b):" & Tong(a, b).ToString & "") 128 Response.Write("Gia trị sau truyền vào cho hàm ") Response.Write("a=" & a.ToString & "") Response.Write("b=" & b.ToString & "") End Sub End Class 129 Bài tập 3.5 Câu Thực hành lại ví dụ chương để ôn lại nội dung vừa học Câu Thiết kế giao diện trang EditorData.aspx sau: Giao diện thiết kế Giao diện thực thi Gợi ý: - Thiết kế giao diện theo mẫu - Cấu hình SqlDataSource với database mặc định Northwind (hoặc sử dụng database người dùng) - Khi người dùng chọn ProductName DropdownList, nội dung DetailView cập nhật Câu 3: Xây dựng ứng dụng web gồm trang asp.net sau: Dangnhap.aspx, DanhsachLoaimathang.aspx, Capnhatloaimathang.aspx Các trang web có cấu trúc sau: - Giao diện thiết kế: Giao diện trang Dangnhap.aspx 130 Giao diện trang CapnhatLoaimathang.aspx - Cấu hình phần ……… tập tin web.config sau:Trong đó: + loginUrl: rõ trang người dùng đăng nhập + defaultUrl: rõ trang chuyển đến đăng nhập thành công + name: rõ tên Cookie tạo + Timeout: thời gian cookie tồn (tính phút) 131 + passwordFormat: khơng mã hóa mật Trong ví dụ ta khai báo người dung “tom” “jerry” Lưu ý: lưu user vào sở liệu để kiểm tra đăng nhập - Viết kiện xử lý cho trang + Khi người dùng truy cập vào trang CapnhatLoaimathang.aspx mà chưa đăng nhập tự động chuyển qua trang Dangnhap.aspx + Nhập vào tên đăng nhập “tom”, mật “tom”, nhấn nút Đăng nhập để vào trang CapnhatLoiamathang.aspx Nếu người dung chọn Nhớ thông tin sau 30 phút sau khơng cần đăng nhập truy cập + Sau người dùng cập nhật xong thông tin, chọn Đăng xuất để trang Dangnhap.aspx, thông tin session hay cookie hủy để kết thúc phiên làm việc 132 TÀI LIỆU THAM KHẢO [1] Jason Butler and Tony, ASP – DATABASE , NHÀ XUẤT BẢN TRẺ, năm 2001 [2] Kỹ sư Phạm Quang Huy , Giáo trình thiết kế Web làm hoạt hình, NXB Giao thơng vận tải, năm 2003 [3] Hồng Hải , Giáo trình tự học thiết kế Web động , NXB Lao động Xã Hội , Tháng năm 2007 133