Đ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 Ngoài trang có danh mục tin theo chủ đề mục tin cha, link để liên kết tới trang khác 131 - Để 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 + Đố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ụ: "Item L '*produc Name "Item IKE Lt*'" '*produc Name "Item IKE Lt'" 'product Name IKE *'" 132 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}' 133 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 hồn tất việc đăng ký thông tin hiển thị đầy đủ trangASP.NET khác RegisteringComplete.aspx 134 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 toán hoá đơ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 135 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 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: 136 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 System.EventArgs) Session.Timeout = 50 Object, e As 137 Session.Contents("Counter") = _ Session.Contents("Counter") + 10 Response.Write("Khoi tao Session ASPX ") Response.Write("Counter: " & _ Session.Contents("Counter")) Session.Contents.Remove("Countner") Session.Remove("Countner") Session.RemoveAll() End sub Untitled Page 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: 138 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 = now.AddHours(1) Response.Cookies.Add(MyCookie) MyCookie1.Value = now.ToString() MyCookie1.Expires =now.AddHours(1) Response.Cookies.Add(MyCookie1) 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 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) 139 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: Giá trị b: 140 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 & "") Response.Write("Gia trị sau truyền ") Response.Write("a=" & a.ToString & "") Response.Write("b=" & b.ToString & "") End Sub End Class vào cho hàm 141 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ế: 142 Giao diện trang Dangnhap.aspx 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 143 + 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) + 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 144 TÀI LIỆU THAM KHẢO [1] Jason Butler and Tony, “ASP - Database”, Nhà xuất Trẻ, 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, 2003 [3] Hồng Hải , “Giáo trình tự học thiết kế Web động”, NXB Lao động Xã Hội, 2007 145 DANH SÁCH BAN BIÊN SOẠN GIÁO TRÌNH DẠY NGHỀ TRÌNH ĐỘ CAO ĐẲNG Tên giáo trình : Thiết kế web Tên nghề : Quản trị mạng máy tính Bà Võ Thị Vũ Chủ nhiệm Ông Dương Hiển Tú Uỷ viên Ông Nguyễn Trung Hiếu Ủy viên DANH SÁCH HỘI ĐỒNG NGHIỆM THU GIÁO TRÌNH DẠY NGHỀ TRÌNH ĐỘ CAO ĐẲNG Ông (bà) Chủ tịch Ông (bà) Phó chủ tịch Ơng (bà) Thư ký Ông (bà) Thành viên Ông (bà) Thành viên Ông (bà) Thành viên 10.Ông (bà) Thành viên 11.Ông (bà) Thành viên 12.Ông (bà) Thành viên ... đào tạo kỹ thiết kế lập trình web, cho trình độ cao đẳng nghề quản trị mạng máy tính MỤC TIÊU CỦA MƠ ĐUN: - Định hướng kết cách thiết kế Web site - Thiết kế giao diện - Lập trình website - Có... SOẠN GIÁO TRÌNH DẠY NGHỀ TRÌNH ĐỘ CAO ĐẲNG 145 DANH SÁCH HỘI ĐỒNG NGHIỆM THU GIÁO TRÌNH DẠY NGHỀ TRÌNH ĐỘ CAO ĐẲNG 145 MƠ ĐUN THIẾT KẾ WEB Mã số mơ đun: MĐ 38 VỊ TRÍ, TÍNH... Web Server gửi phản hồi Web Browser nhằm đáp ứng yêu cầu Web Browser - Kết thúc kết nối: Khi kết thúc trình trao đổi Web Browser Web Server kết nối chấm dứt Và mối liên hệ Client Server tồn trình