38 giao trinh mo dun web

v BỘ LAO ĐỘNG - THƯƠNG BINH VÀ XÃ HỘI TỔNG CỤC DẠY NGHỀ -o0o - GIÁO TRÌNH Mô đun: THIẾT KẾ WEB NGHỀ QUẢN TRỊ MẠNG MÁY TÍNH Trình độ: CAO ĐẲNG NGHỀ (Ban hành kèm theo Quyết định số: 120/QĐ-TCDN ngày 25 tháng 02 năm 2013 Tổng cục trưởng Tổng cục dạy nghề) Hà Nội, năm 2013 TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thông tin phép dùng nguyên trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm MÃ TÀI LIỆU: MĐ38 LỜI GIỚI THIỆU Chương trình khung quốc gia nghề Quản trị mạng máy tính xây dựng sở phân tích nghề, phần kỹ thuật nghề kết cấu theo môđun, môn học Để tạo điều kiện thuận lợi cho sở dạy nghề trình thực hiện, việc biên soạn giáo trình kỹ thuật nghề theo môđun, môn học đào tạo nghề cấp thiết Mô đun 38: Thiết kế web mô đun đào tạo nghề biên soạn theo hình thức tích hợp lý thuyết thực hành Trong trình thực hiện, nhóm biên soạn tham khảo nhiều tài liệu thiết kế lập trình web nước, kết hợp với kinh nghiệm thực tế sản xuất Mặc dầu có nhiều cố gắng, không tránh khỏi khiếm khuyết, mong nhận đóng góp ý kiến độc giả để giáo trình hoàn thiện Xin chân thành cảm ơn! Hà Nội, ngày 25 tháng 02 năm 2013 Nhóm biên soạn Chủ biên ThS Võ Thị Vũ Dương Hiển Tú Nguyễn Trung Hiếu MỤC LỤC TUYÊN BỐ BẢN QUYỀN LỜI GIỚI THIỆU .4 MỤC LỤC MÔ ĐUN THIẾT KẾ WEB - Định hướng kết cách thiết kế Web site - Thiết kế giao diện - Lập trình website - Có khả sử dụng thẻ HTML - Biết cách tổ chức thông tin trang chủ - Sử dụng thành thạo công cụ thiết kế Web - Xây dựng ứng dụng web động .7 - Cài đặt, cấu hình dịch vụ IIS .7 - Có khả kết hợp với sở liệu để tạo trang Web động - Bố trí học tập làm việc khoa học BÀI 1: TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML Lịch sử World Wide Web (www) 1.1 Giới thiệu World Wide Web (www) 1.2 Giới thiệu URL: 1.3 Giới thiệu HTTP 10 Nhập môn ngôn ngữ HTML (Hyper Text Markup Language) 11 Trang văn trang 12 Ngôn ngữ đặc tả Script 13 4.1 Khai báo biến: 13 4.2 Toán tử: 14 4.3 Các cấu trúc điều kiện 14 4.4 Các cấu trúc lặp 16 4.5 Khai báo hàm thủ tục: .17 4.6 Một số hàm thông dụng ASP: 17 CSS (Cascading Style Sheets) 18 5.1 Cú pháp CSS .18 5.2 Các thuộc tính CSS 18 5.3 Sử dụng CSS trang HTML .19 BÀI 2: THIẾT KẾ WEB TĨNH 22 Tổng quan: .22 Trang văn trang 23 2.1 Tạo tiêu đề 23 2.2 Một số thẻ trình bày định dạng văn bản: .23 2.3 Các thuộc tính thẻ trình bày trang 25 Bảng biểu (Table) trang khung (Frame) 26 3.1 Bảng biểu 26 3.2 Khung – Frames .27 Multimedia trang Web 32 4.1 Đặt màu 32 4.2 Màu chữ văn 33 4.3 Màu đầu mối liên kết - Thuộc tính LINK, VLINK ALINK 33 4.4 Thuộc tính mã màu 33 4.5 Nạp hình ảnh làm cho trang văn 33 4.6 Chèn ảnh - thẻ .34 Các yếu tố động trang 36 5.1 Đưa âm vào tài liệu .36 5.2 Đưa Video vào tài liệu 37 Khung nhập (Form) .38 6.1 Form 38 6.2 Các thành phần FORM 40 Liên kết – Link 45 7.1 Thẻ neo mối liên kết 45 7.2 Thuộc tính HREF 45 7.3 Liên kết – External Links .45 7.4 Địa tuyệt đối .46 7.5 Địa tương đối 46 7.6 Liên kết nội – Internal Link 46 7.7 Siêu liên kết – Hyperlink 47 BÀI 3: XÂY DỰNG WEB ĐỘNG 50 1.Tổng quan ASP.Net ADO.Net: 50 1.1 Tổng quan ngôn ngữ ASP.Net: 50 1.2 Mô hình ADO.Net 61 Các đối tượng ASP.Net: .61 2.1 ASP.Net Web Server Controls: 61 2.2 Các đối tượng ASP.NET .69 2.3 Biến cấu trúc điều khiển: 79 2.4 Thủ tục hàm 86 Các đối tượng ADO.Net: 88 3.1 Các đối tượng ADO.Net .88 3.2 Các lớp SqlClient mô hình ADO.Net 90 3.3 Các điều khiển liệu ASP.Net 107 TÀI LIỆU THAM KHẢO .148 DANH SÁCH BAN BIÊN SOẠN GIÁO TRÌNH DẠY NGHỀ TRÌNH ĐỘ CAO ĐẲNG .149 DANH SÁCH HỘI ĐỒNG NGHIỆM THU GIÁO TRÌNH DẠY NGHỀ TRÌNH ĐỘ CAO ĐẲNG .149 MÔ ĐUN THIẾT KẾ WEB Mã số mô đun: MĐ 38 VỊ TRÍ, TÍNH CHẤT, Ý NGHĨA VÀ VAI TRÒ CỦA 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ở 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 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ó khả sử dụng thẻ HTML - Biết cách tổ chức thông tin trang chủ - Sử dụng thành thạo công cụ thiết kế Web - Xây dựng ứng dụng web động - Cài đặt, cấu hình dịch vụ IIS - Có khả kết hợp với sở liệu để tạo trang Web động - Bố trí học tập làm việc khoa học NỘI DUNG MÔ ĐUN: Số Tên môđun Tổng TT Tổng quan www – ngôn ngữ HTML Thiết kế web tĩnh Lập trình web động Cộng số 25 60 90 Thời gian Lý Thực Kiểm thuyết hành 15 17 40 28 58 tra* BÀI 1: TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML Mã bài: MĐ38-01 Giới thiệu: Bài học nhằm giới thiệu sơ lược lịch sử World Wide Web (www), URL, giao thức HTTP ngôn ngữ phổ biến dùng World Wide Web HTML (Hyper Text Markup Language) Mục tiêu: - Trình bày lịch sử WWW; - Trình bày cấu trúc trang HTML thẻ HTML bản, cách bố trí, xử lý ứng dụng file CSS; - Thực thiết kế giao diện; - Biết cách tổ chức thông tin trang chủ bố trí văn trang - Ghi nhớ lệnh điều khiển ngôn ngữ đặc tả Script - Thực thao tác an toàn với máy tính Nội dung: Lịch sử World Wide Web (www) Mục tiêu: Trình bày lịch sử WWW 1.1 Giới thiệu World Wide Web (www) Ngày người ta dùng máy tính công cụ hữu ích để truy cập Internet, chủ yếu tìm kiếm thông tin Thông tin văn bản, hình ảnh, âm hay thông tin đa phương tiện… Nhu cầu tìm kiếm thông tin ngày nhiều đưa vấn đề: làm dễ dàng sử dụng máy tính truy cập Internet công cụ phục vụ đắc lực cho việc tra cứu, tìm kiếm thông tin mạng thông tin rộng lớn toàn cục Vấn đề trở nên dễ dàng ý tưởng siêu văn (Hypertext) – văn thông minh nhà tin học Ted Nelson đề xuất vào năm 1965 Đến 1989, dự án thức thực kỹ sư trẻ người Anh tên Tim Berners – Lee World Wide Web (www) mạng tài nguyên thông tin WWW dựa chế để tài nguyên trở nên sẵn dùng cho người xem rộng rãi tốt, là: - Cơ chế đặt tên dạng việc định dạng tài nguyên WWW (như URL) - Các giao thức, để truy cập tới tài nguyên qua WWW (như HTTP) - Siêu văn bản, để dễ dàng chuyển đổi tài nguyên (như HTML) 1.2 Giới thiệu URL: Mọi tài nguyên sẵn dùng WWW – tài liệu HTML, ảnh, video clip, chương trình v v - có địa mà mã hóa URL URL xem trỏ dùng với mục đích đơn giản xác định vị trí tài nguyên môi trường Internet Thông qua URL mà Web Browser tham chiếu đến Web Server dịch vụ khác Internet ngược lại Các URL thường gồm phần: - Việc đặt tên chế dùng để truy cập tài nguyên - Tên máy tính lưu trữ (tổ chức) tài nguyên - Tên thân tài nguyên, đường dẫn Ví dụ: URL xác định trang W3C Technical Reports http://www.w3.org/TR URL đọc sau: Có tài liệu sẵn dùng theo giao thức HTTP, lưu máy www.w3.org, truy cập theo đường dẫn “/TR” Các chế khác ta thấy tài liệu HTML bao gồm “mailto” thư điện tử “ftp” FTP Ví dụ sau tới hộp thư (mailbox) người dùng: Mọi góp ý, xin gửi thư tới Joe Cool Các định danh đoạn (fragment identifiers): Một số URL tới việc định vị tài nguyên Kiểu URL kết thúc với “#” theo sau dấu hiệu 10 kết nối (gọi định danh đoạn) Ví dụ, URL đánh dấu móc tên section_2: http://somesite.com/html/top.html#section_2 Các URL tương đối: không theo chế đặt tên Đường dẫn thường tham chiếu tới tài nguyên máy chứa tài liệu Các URL tương đối gồm thành phần đường dẫn tương đối (như “ ” nghĩa mức cấu trúc định nghĩa đường dẫn), bao gồm dấu hiệu đoạn Ví dụ giải pháp URL tương đối, giả sử có URL gốc: “http://www.acme.com/support/intro.html” URL tương đối đánh dấu cho liên kết siêu văn bản: Suppliers mở rộng thành URL đầy đủ “http://www.acme.com/support/suppliers.html” URL tương đối việc đánh dấu cho ảnh mở rộng thành URL đầy đủ “http://www.acme.com/icons/logo.gif” Các URL dùng để: - Liên kết tới tài liệu tài nguyên khác - Liên kết tới kiểu dạng bên kịch (script) 1.3 Giới thiệu HTTP Web Browser Web Server giao tiếp với thông qua giao thức gọi HTTP Sự kết nối HTTP qua 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 URL 135 "Item L '*produc Name "Item IKE Lt'" 'product Ký Name tự thay IKE 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}' 136 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 137 138 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: 139 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 xoá 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: 140 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? 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 141 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: 142 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) 143 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:   144 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 145 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 146 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) 147 + 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 148 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] Hoàng Hải , “Giáo trình tự học thiết kế Web động”, NXB Lao động Xã Hội, 2007 149 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 ... Giới thiệu HTTP Web Browser Web Server giao tiếp với thông qua giao thức gọi HTTP Sự kết nối HTTP qua 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ờ... 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ủ,... tới đối tượng Server - Phản hồi: 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à