Đ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… Hình 3.25.Cửa sổ Command and Paramater Editer c) Xóa ghi Các kỹ thuật thực xóa ghi tương tự Update ghi Tương tự điều khiển data source ta thực khai báo: Khai báo hai thuộc tính DeleteCommand DeleteCommandType DeleteCommand="DELETE FROM Products WHERE (ProductID = @ProductID)" Khai báo tham số Ví dụ 3.14 Thực xóa liệu từ điều khiển Grid View (vidu3_15.aspx) 97 d) Chèn ghi Để chèn ghi ta sử dụng kỹ thuật tương tự thông qua khai báo: Khai báo hai thuộc tính InsertCommand InsertCommandType InsertCommand="INSERT INTO Products(ProductID, ProductType, ProductName, ProductDescription, ProductSize, ProductImageURL, UnitPrice) VALUES (@ProductID, @ProductType, @ProductName, @ProductDescription, @ProductSize, @ProductImageURL, @UnitPrice)"> Khai báo tham số Ví dụ 3.15 Trong ví dụ dùng GridView để hiển thị thực thao tác Update, Delete; sử dụng DetailView để hiển thị chi tiết ghi chọn GridView đồng thời cho phép cập nhật liệu(vidu3_16.aspx) 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 99 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ụ: "ItemNa L '*product*'" me IKE "ItemNa L '*product'" me IKE "ItemNa 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 100 đị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}' 101 Bài tập thực hành học sinh, sinh 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 102 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 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 103 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: Bài tập 3.2 Câu 1: Trình bày chức đối tượng Application ASP.NET? 104 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 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: 105 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) 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 106 Giá trị a: 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 & "") 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 107 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 108 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) + 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 109 + 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 110 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 111 ... 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Ế WEB NGHỀ: QUẢN TRỊ MẠNG MÁY TÍNH TRÌNH ĐỘ: CAO ĐẲNG (Ban hành kèm theo Quyết định... liệu, Cơ sở liệu, Lập trình trực quan - Tính chất: mơ đun đào tạo nghề - Ý nghĩa vai trò: dùng đà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 mơ đun:... 111 GIÁO TRÌNH MƠ ĐUN Tên mô đun: Thiết kế web Mã số mô đun: MĐQTM23 Vị trí, tính chất, ý nghĩa vai trị mơ đun: - Vị trí: Mơ đun Thiết kế web bố trí sau học xong mơn học Hệ quản trị Cơ sở