Bài tập lớn tiểu luận nhóm (8)

Tài liệu khóa học lập trình web với ASP.NET MỤC LỤC I Lý thuyết 1.1 Giới thiệu .5 1.2 Danh sách phần tử HTML thường dùng II Bài tập thực hành Yêu cầu: Hướng dẫn Minh hoạ mẫu Ghi BÀI SỐ 2: Tạo trang web động với DHTML JavaScript 10 I Lý thuyết 10 Đưa câu lệnh javascript vào trang web 10 Đưa câu lệnh javascript vào từ file riêng biệt .11 Truy cập phần tử HTML câu lệnh Javascript 12 Xây dựng hàm Javascript 13 Một số hàm thông dụng Javascript 14 II Thực hành 14 Yêu cầu 14 Hướng dẫn 14 Minh hoạ mẫu 14 Ghi 17 BÀI 3: THAY ĐỔI NỘI DUNG TRANG WEB BẰNG CSS VÀ JS ĐỊNH DẠNG TRANG WEB VỚI CSS 17 I Lý thuyết 17 Định dạng CSS định nghĩa phần tử (Gọi Inline) 17 Định dạng CSS thông qua lớp 18 II Thực hành 20 Yêu cầu 20 Hướng dẫn 20 Minh hoạ mẫu 21 Ghi 24 BÀI (Tiếp): THAY ĐỔI NỘI DUNG TRANG WEB BẰNG CSS VÀ JS ĐỊNH DẠNG TRANG WEB VỚI CSS 25 I Lý thuyết 25 Tham chiếu đến phần tử trang web .25 Tham chiếu đến thuộc tính phần tử 26 Thay đổi nội dung phần tử 26 II Thực hành 27 Yêu cầu 27 Hướng dẫn .28 Minh Hoạ mẫu 28 Ghi 33 BÀI SỐ 5: ASP.NET Web form 33 P.1 Tài liệu khóa học lập trình web với ASP.NET I Lý thuyết 33 Mơ hình lập trình phía máy chủ 33 Cơ chế xử lý file ASP.NET phía máy chủ .36 Một số ví dụ minh họa 38 Webform ASP.NET 41 Tìm hiểu cấu trúc trang ASP.NET 41 Code behind viết code phía Server 44 HTML Server Controls Web controls .45 II Thực hành 46 Yêu cầu 46 Hướng dẫn 47 Minh hoạ mẫu 47 Ghi 52 BÀI 6: Các đối tượng ASP.NET 53 I Lý thuyết 53 Request Object .53 Response Object 56 Server Object 57 Session Object .58 Application Object 58 II Thực hành 59 Bài 1: Tạo trang Login 59 Bài 2: Tạo trang đếm số lượng người truy cập .63 BÀI 7: CÔNG NGHỆ ADO.NET 65 I Lý thuyết 65 Giới thiệu chung 65 Kiến trúc ADO.NET 66 Các lớp thao tác với CSDL: Connection, Command,… 67 II THỰC HÀNH 80 Tạo sở liệu 80 Nhập liệu cho bảng 81 Hiển thị liệu bảng lên trình duyệt 84 Cập nhật liệu DataSet DataAdapter 85 BÀI 8: Tìm hiểu ứng dụng chế Data Binding 87 I Lý thuyết 87 Giới thiệu DataBinding 87 Data Binding 87 Các điều khiển Data Source (Data source controls) .91 II THỰC HÀNH 100 BÀI 9: Làm việc với GridView 104 I Lý thuyết .104 Giới thiệu tổng quan 104 Tìm hiểu lớp GridView 104 Các tính hỗ trợ GridView 108 P.2 Tài liệu khóa học lập trình web với ASP.NET Tạo cột tùy biến HyperLink, BoundColunm… 112 Tạo xử lý cột Select, Edit, Delete, Update… 115 II Thực hành 120 BÀI 10: Sử dụng Templates .127 I Lý thuyết .127 Giới thiệu tổng quan 127 Các điều khiển hỗ trợ Templates 127 Repeater control, DataList control, GridView control .128 II THỰC HÀNH 135 Bài 1: Hiển thị danh sách cán 135 Bài 2: Bổ sung thêm trường vào bảng 137 Bài 3: Hiển thị danh sách cán dạng chi tiết 138 Bài 4: Hiển thị danh sách người dùng dạng Flow (tuyến tính) 139 Bài 5: Hiển thị thông tin kèm Hyperlink 143 Bài 6: Thực phân trang 144 PHỤ LỤC 146 I ĐÓNG GÓI WEBSITE 146 II CÀI ĐẶT HỆ THỐNG IIS HỖ TRỢ ASP.NET WEBSITE .146 Cài đặt IIS 146 Cài đặt NET Framework 146 P.3 Tài liệu khóa học lập trình web với ASP.NET TÀI LIỆU KHĨA HỌC LẬP TRÌNH ASP.NET P.4 Tài liệu khóa học lập trình web với ASP.NET PHẦN I Cơ HTML, DHTML, JavaScript BÀI SỐ 1: Tạo trang web với HTML Mục tiêu: Kết thúc học, sinh viên  Tạo trang web tĩnh notepad/ HTML Editor  Định dạng nội dung trang web phần tử HTML  Thao tác với phần tử bảng (Table), , , Nội dung I Lý thuyết 1.1 Giới thiệu Một trang web hiển thị trình duyệt (IE; FireFox; Netscape, ) chất tạo từ cặp thẻ (tag) đặc biệt Các thẻ dẫn cho trình duyệt biết nên hiển thị nội dung Ví dụ cặp thẻ dẫn cho trình duyệt phải in đậm nội dung bên trong, v.v Mỗi cặp thẻ gọi cặp thẻ HTML (Hyper Text Markup Language) Vì vậy, lập trình viên web, trước muốn xây dựng ứng dụng web thực thụ khơng phải hiểu rõ cặp thẻ HTML (ít cặp thẻ bản) mà phải biết cách Code (tạo) cặp thẻ 1.2 Danh sách phần tử HTML thường dùng Dưới danh sách phần tử HTML cách tạo tương ứng cặp thẻ HTML STT Phần tử Hình thù hiển thị trang web Input Button CheckBox Radio button Yes ✘ CheckBox1 Nam List Danh sách (Combo Box) Cách tạo thẻ HTML tương ứng Nguyn Vn A Nguyễn Văn A Nguyễn Văn B Nguyễn Văn C Nguyễn Văn A Nguyễn Văn B Nguyễn Văn C P.5 Tài liệu khóa học lập trình web với ASP.NET Phân cách xuống dòng div Table Là phần tử chứa phần tử khác Khi ẩn/ hiện/ di chuyển phần tử div phần tử khác ẩn/hiện/di chuyển theo 11 21 12 22 11 12 21 22 TR Thẻ TR phải nằm đó, khơng thể tạo riêng TD Thẻ TD phải nằm đó, khơng thể tạo riêng Trộn hai cột Trộn hàng => => 1 2 3 1 23 a img www.aptech.utehy.vn 1 2 www.aptech.utehy.vn Chú ý: Thuộc tính đặt cho phần tử viết dạng: = Phần đặt cặp dấu nháy đơn cặp dấu nháy kép P.6 Tài liệu khóa học lập trình web với ASP.NET II Bài tập thực hành Yêu cầu: Tạo trang web để hiển thị nội dung sau: Giao diện trang web cần tạo Hướng dẫn - Sử dụng bảng mô tả phần tử để tạo trang theo u cầu P.7 Tài liệu khóa học lập trình web với ASP.NET - Vào trình soạn thảo web Visual Studio 2008 tạo dự án web, sau mở trang Default.aspx viết thẻ HTML Để chạy (mở) trang web vừa tạo, nhấn F5 click chuột phải trang soạn thảo (hoặc tệp Default.aspx bên panel phải), sau chọ "View in Browser" Minh hoạ mẫu Default.aspx Bài thực hành số - Hưng Yên Aptech PHẦN MỀM QUẢN LÝ BÁN HÀNG NHẬP THÔNG TIN NHÀ CUNG CẤP Tên nhà cung cấp: Người đại diện: Chức vụ: Địa Nhà CC: Thành phố : Chọn Hà nội TP Hồ Chí Minh Đà Nẵng Hải Phòng Hưng Yên Hải Dương Quảng Ninh Nơi khác Vùng: Mã bưu điện: Quốc gia: Việt Nam Lào Campuchia Nơi khác Điện thoại: Số Fax: P.8 Tài liệu khóa học lập trình web với ASP.NET Địa website: Danh sách nhà cung cấp có Mã NCC Tên NCC Địa chỉ Homepage 1 Cơng ty FPT Láng Hạ - Ba Đình www.fpt.vn 2 Công ty CMC Hàn Thuyên - Hai Bà Trưng www.cmc.vn 3 Cơng ty Trần Anh Giảng võ - Ba Đình www.trananh.vn Ghi  Để thực xoá (reset trạng thái đầu) form nhập liệu, ta tạo phần tử button đặt "type" "reset" (thay type = "button)  Để gửi toàn nội dung liệu nhập server xử lý, tạo phần tử button đặt "type" "submit" (thay type = "button")  Để chọn mặc định mục danh sách (Select) đặc thuộc tính "Selected" cho mục  Để tạo hộp text có nhiều dịng, ta dùng thẻ  Muốn thay đổi độ rộng textbox, cần thay đổi thuộc tính "size"  Có thể bố trí lại trang web cho đẹp cách đặt phần tử ô bảng (sử dụng thẻ Table) P.9 Tài liệu khóa học lập trình web với ASP.NET BÀI SỐ 2: Tạo trang web động với DHTML JavaScript Mục tiêu: Kết thúc thực này, người học  Truy xuất đối tượng trình duyệt phần tử HTML JavaScript  Tạo trang web đăng ký có xử lý tính hợp lệ liệu nhập vào Nội dung: I Lý thuyết Một trang web tạo trước gọi trang web tĩnh (Static webpage - tức là: Nội dung tạo ln ln hiển thị giống người dùng thời điểm) Tuy nhiên, ngày nhu cầu người dùng ứng dụng nên trang web phải có khả động (Dynamic webpage - tức là: nội dung trang web hiển thị, ứng xử khác ứng với người sử dụng tình khác ) Khả "động" thực bên phía trình duyệt phía server Nếu trang web cho phép thực thay đổi (bằng ngôn ngữ kịch VBScript, JavaScript ) bên phía trình duyệt, gọi trang DHTML (Dynamic HTML); trang web thực xử lý bên phía server (bằng ngơn ngữ C#, VB.NET, ASP, PHP, Perl, ) gọi trang động phía server (Active Server Page) Trong tài liệu tìm hiểu hai dạng web động trên, cịn ta tìm hiểu trang DHTML với Javascript (JS) Đưa câu lệnh javascript vào trang web 1.1 Đưa câu lệnh javascript vào luồng xử lý trang web mở Để đưa câu lệnh Javascript vào trang web yêu cầu trình duyệt thực thi trang web mở, ta cần đặt câu lệnh JS cặp thẻ khơng hàm Ví dụ: Hiển thị lời chào thông báo ngày trang web mở var d = new Date (); document.write ("Chào bạn ! "); document.write("Hôm là: " + d.toDateString()); ** Chú ý: - Có thể có nhiều đoạn script trang - Trong cặp script phải CÂU LỆNH JAVASCRIPT P.10 Tài liệu khóa học lập trình web với ASP.NET …………………………………………………………………………………………… Cập nhật liệu Để cho phép sửa liệu trường, ta cần đặt thuộc tính text trường vào phương thức Bind, dạng sau: Ví dụ 7: Cập nhật hồ sơ cán (Chỉ cập nhật trường "Bản thân") ……… Như ví dụ ……………………………………………………………………………………… Họ tên: Mã Cán bộ: Ngày sinh : Địa chỉ: Bản thân : Họ tên: Mã Cán bộ: Ngày sinh : Địa chỉ: Bản thân : ……… Như ví dụ ……………………………………………………………………………………… 3.2 Tạo template với DataList DataList cho phép ta hiển thị dạng danh sách Danh sách chia làm nhiều cột số ứng dụng thường thấy Internet Ví dụ 8: Hiển thị ảnh hình trên; ………………………………………………………………………………………………………… …… P.132 Tài liệu khóa học lập trình web với ASP.NET Họ tên: Quyền hạn : ………………………………………………………………………………………………………… …… P.133 Tài liệu khóa học lập trình web với ASP.NET Kết sau chạy trang 3.3 Tạo Template với Repeater (light-weight) Repeater điều khiển có khả hiển thị liệu dạng danh sách Khi gắn với nguồn liệu, thực thi nội dung nằm phần Template ghi đọc từ nguồn Tuy điều khiển khả phân trang, xếp GridView điều khiển chiếm tài ngun hệ thống (vì gọi điều khiển Light-weight), dùng trường hợp mà tài ngun đóng vai trị quan trọng Repeater cho phép tùy biến mục tương tự GridView DataList, sử dụng Template Ví dụ 9: Hiển thị họ tên ảnh minh họa người dùng bảng tblUser sử dụng điều khiển Repeater P.134 Tài liệu khóa học lập trình web với ASP.NET Hiển thị danh sách người dùng Họ tên: II THỰC HÀNH Bài 1: Hiển thị danh sách cán 1.1 Yêu cầu Hiển thị danh sách cán (bao gồm họ tên, địa chỉ, điện thoại) bảng tblCanBo Trong Họ tên chữ đậm 1.2 Hướng dẫn: - Đặt thuộc tính AutoGenerateColumns = "false" - Tự tạo cột cho GridView cặp thẻ … - Đặt nội dung cần hiển thị (ở Họ tên, địa chỉ, điện thoại) vào cột cách đặt bên cặp thẻ P.135 Tài liệu khóa học lập trình web với ASP.NET Danh sách cán 1.3 Minh họa: Thông tin cán bộ P.136 Tài liệu khóa học lập trình web với ASP.NET Bài 2: Bổ sung thêm trường vào bảng 2.1 Yêu cầu Bổ sung thêm trường Photo vào bảng tblCanBo, trường Photo lưu đường dẫn tới file ảnh cán Sau xây dựng trang web hiển thị thơng tin cán (bao gồm trường Họ tên, địa ảnh tương ứng) 2.2 Hướng dẫn: - Vì trường Photo chứa đường dẫn đến file ảnh rồi, để hiển thị hình ảnh thay văn text túy, ta tạo thêm phần tử , thuộc tính ImageUrl gán giá trị trường Photo tương ứng cụ thể : - Để đặt kích thước ảnh nhau, thêm thuộc tính Width Height - Trước giá trị cần có thêm cặp dấu nháy đơn để đảm bảo tính đắn đường dẫn ảnh chứa dấu cách Yêu cầu giao diện 2.3 Minh họa: P.137 Tài liệu khóa học lập trình web với ASP.NET Bài 3: Hiển thị danh sách cán dạng chi tiết 3.1 Yêu cầu: Thông tin dàn trang theo chiều dọc (Flow) 3.2 Hướng dẫn: Tạo cột nhất, dịng cột chứa tất trường thông tin cần hiển thị Với hàng tạo ra, ta đặt vào table có kích thước cố định, bảng có hàng cột Cột thứ chứa thông tin dạng text họ tên, địa chỉ, điện thoại mô tả thân Cột thứ hai hiển thị hình ảnh tương ứng Kết P.138 Tài liệu khóa học lập trình web với ASP.NET 3.3 Minh họa: Cột Cột Bài 4: Hiển thị danh sách người dùng dạng Flow (tuyến tính) 4.1 Yêu cầu Làm 3, có thêm chức cập nhật Delete THông tin hiển thị gồm Họ tên, Địa chỉ, Điện thoại Trong đó, trường địa hiển thị dạng Text Multiline sửa 4.2 Hướng dẫn: Tạo template 3, thêm command Edit Delete Trong trường muốn sửa chữa đặt vào Textbox dùng hàm 4.3 Minh họa: P.139 Tài liệu khóa học lập trình web với ASP.NET Kết Cập nhật danh sách cán bộ Phần template cho chế độ Địa chỉ: thường Điện thoại: (chưa sửa) Họ tên: Phần template cho chế độ soạn thảo (edit mode) Địa chỉ: Điện thoại: P.141 Tài liệu khóa học lập trình web với ASP.NET P.142 Tài liệu khóa học lập trình web với ASP.NET Bài 5: Hiển thị thơng tin kèm Hyperlink 5.1 Yêu cầu Hiển thị thông tin trích ngang người dùng bảng tblUser, người dùng thêm Hyperlink "Xem chi tiết" để người dùng click vào hyperlink mở trang UserDetail.aspx hiển thị chi tiết thông tin người dùng Yêu cầu thêm: Danh sách hiển thị làm cột 5.2 Hướng dẫn: Để hiển thị thông tin dạng cột, ta sử dụng điều khiển DataList Trong Hyperlink ta tạo liên kết đến trang UserDetail.aspx truyền cho trang ID (trong trường hợp TenDangNhap) người dùng tương ứng Dựa vào ID này, trang UserDetail.aspx đọc (dùng Request.QueryString["TenNguoiDung"]) sau select thơng tin ứng với ID hiển thị 5.3 Minh họa: Danh sách cán bộ Quyền hạn : Xem chi tiết P.143 Tài liệu khóa học lập trình web với ASP.NET Kết Bài 6: Thực phân trang 6.1 Yêu cầu: Hiển thị danh sách người dùng dạng cột thực phân trang 6.2 Hướng dẫn: Để thực tạo cột, sử dụng điều khiển DataList, ngồi ta cịn điều khiển khác mạnh cho phép hiển thị dạng cột có thêm khả phân trang, là: ListView controls 6.3 Các bước thực hiện: B1 Tạo nguồn liệu SqlDataSource trước B2 Tạo ListView gắn với nguồn liệu SqlDataSource (như trước) B3 Cấu hình cho ListView (chọn smart tag), sau click chọn "Config ListView…" B4: Chọn thơng số hình bên P.144 Tài liệu khóa học lập trình web với ASP.NET B5: Mở trang web Lưu ý: Chúng ta hồn tồn thay đổi format ListView vào Source code editor để sửa Một cách phân trang khác tạo DataPager gắn vào ListView, Khi ta cần đặt thuộc tính PagedControlID="ListView1" Cách có ưu điểm phần trang đặt vị trí hình Kết hiển thị P.145 Tài liệu khóa học lập trình web với ASP.NET PHỤ LỤC I ĐĨNG GĨI WEBSITE Sau hồn tất dự án khâu quan trọng cần phải thực để đảm bảo vấn đề quyền biên dịch xuất ứng dụng web Việc xuất (Publish) ứng dụng giúp biên dịch file code behind (file CS) thành assemblies (file DLL) Khi đó, ứng dụng chạy nhanh bảo mật Để xuất web, Right click vào Tên Solution chọn mục Publish Sau hộp thoại cho phép ta chọn thư mục lưu kết Ứng dụng biên dịch copy vào web Server để thực thi II CÀI ĐẶT HỆ THỐNG IIS HỖ TRỢ ASP.NET WEBSITE Cài đặt IIS - Vào Start  Settíng  Control panel chọn Add Remove Programs Chọn Windows Components Tick chọn "Internet Information Service" (IIS) Cài đặt NET Framework 2.1 Cài đặt Nên chọn net framework 2.0 trở lên Bộ net 2.0 có sẵn CD Windows XP SP2 Tất download từ Internet vào máy \\AptechServer để lấy 2.2 "Gắn" IIS với NET Framework Thường cài đặt xong IIS Net framework cịn phải bước trước mở trang viết net, phải thực gắn kết net framework với IIS dòng lệnh (Click start  Run gõ): C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\aspnet_regiis.exe –i – enable P.146 ... THỰC HÀNH 135 Bài 1: Hiển thị danh sách cán 135 Bài 2: Bổ sung thêm trường vào bảng 137 Bài 3: Hiển thị danh sách cán dạng chi tiết 138 Bài 4: Hiển thị danh sách... class="MỤC_LỚN" >Bài 1: Tạo trang web tĩnh với HTML 1.1 Lý thuyết 1.2 Thực hành Bài. .. Object 58 II Thực hành 59 Bài 1: Tạo trang Login 59 Bài 2: Tạo trang đếm số lượng người truy cập .63 BÀI 7: CÔNG NGHỆ ADO.NET 65 I Lý thuyết