lập trình ứng dụng web với asp.net và c#

TRUNG TÂM TIN HỌC - ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP. HCM
227 Nguyễn Văn Cừ – Quận 5 – Tp. Hồ Chí Minh
Tel: 8351056 – Fax 8324466 – Email:
Mã tài liệu: DT_NCM_LT_BT_LTW2
Phiên bản 2.5 – Tháng 01/2010

BÀI TẬP
CHƯƠNG TRÌNH
KỸ THUẬT VIÊN
NGÀNH LẬP TRÌNH
Học phần 4

LẬP TRÌNH ỨNG DỤNG
WEB VỚI ASP.NET VÀ C#

Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 1/49

BÀI 1: CÁC ĐIỀU KHIỂN DỮ LIỆU
1.1. Tạo thêm các thành phần trong project
(Hoặc học viên có thể tạo mới project khác)
 Yêu cầu:
− Tạo thư mục App_code để lưu trữ các lớp xử lý phục vụ cho quá trình làm việc với CSDL
Ghi chú
: Giáo viên có thể cung cấp các lớp xử lý này
− Chép tập tin CSDL QL_BANSACH.mdf vào thư mục App_Data ( do giáo viên cung cấp)
− Tạo một số thư mục cần thiết, có dạng như sau:

− Quan hệ giữa các Table trong CSDL như sau:

Bài tập

Lập trình ứng dụng Web với ASP.Net và C# Trang 2/49

1.2. Tạo trang
Album các loài hoa


 Ý nghĩa:

Trang web xem album các loài hoa
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web
− Sử dụng điều khiển ListBox, Image và Label
2 Danh sách hoa
− Điều khiển ListBox, học viên tự cho danh sách hoa
Ghi chú:
Hình ảnh sẽ được cung cấp
 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 Danh sách hoa
− Khi chọn, xuất hình và tên hoa được chọn ra màn hình
1.3. Tạo trang
Xem danh sách Sách theo chủ đề


 Ý nghĩa:

Trang web xem sách theo chủ đề được chọn
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu

1 Nội dung trang web
− Sử dụng điều khiển DropdownList và ListBox
Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 3/49

 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 Khi mở trang
− Tạo và xuất danh sách Chủ đề ra DropDownList
2 DropDownList
− Khi chọn, xuất danh sách Sách theo chủ đề được chọn ra ListBox
1.4. Tạo trang
Phiếu ý kiến người tiêu dùng


Hình 1:
Đang chọn sản phẩm

Hình 2:
Kết quả bình chọn sản phẩm
 Ý nghĩa:
Trang web dùng để lấy ý kiến người tiêu dùng đối với các sản phẩm
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung
trang web
− Sử dụng điều khiển RadioButtonList, CheckBoxList, Button, Label và
BulletedList
Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 4/49

 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu Ghi chú
1 Trang web
− Khi mở trang, sản phẩm
Máy giặt
được chọn và xuất các
tiêu chuẩn bình chọn tương ứng của
Máy giặt
ra danh
sách Các tiêu chuẩn bình chọn
2 Danh sách sản
phẩm
− Khi chọn, xuất:
 Danh sách tiêu chuẩn bình chọn tương ứng
 Tên sản phẩm đang được chọn (hình 1)
Xây dựng thủ
tục tạo ra
danh sách
này, trong đó
h.viên tự tạo
dữ liệu
3 Nút Xem kết
quả bình chọn
− Khi chọn, xuất ra các tiêu chuẩn được chọn (hình 2)
Thiết kế bằng
BulletedList
1.5. Tạo trang
Danh sách khách hàng

 Ý nghĩa:

Trang web liệt kê danh sách khách hàng
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web
− Sử dụng điều khiển GridView
− Định dạng cột
Ngày sinh
là dd/MM/yyyy
 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 Trang web − Khi mở trang, xuất danh sách khách hàng ra lưới.
1.6. Tạo trang
Danh sách Sách

Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 5/49


 Ý nghĩa:

Trang web liệt kê danh sách Sách, có sắp xếp và phân trang
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web
− Sử dụng điều khiển GridView
− Định dạng cột
Đơn giá

và
Ngày sinh

− Cho phép sắp xếp và phân trang trên GridView
 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 Trang web
− Khi mở trang, xuất danh sách Sách ra lưới
2 Lưới danh sách
− Xử lý sắp xếp và phân trang
1.7. Tạo trang
Danh sách khách hàng với cột tùy biến

Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 6/49


 Ý nghĩa:

Trang web liệt kê danh sách khách hàng, có các cột tùy biến
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web
− Sử dụng điều khiển GridView, Label và Image
− Định dạng cột
Ngày sinh

− Cột
Giới tính
thể hiện Nam/Nữ, cột kế bên thể hiện hình nam/nữ

 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 Trang web − Khi mở trang, xuất danh sách khách hàng ra lưới
2 Lưới danh sách
− Xử lý phân trang
1.8. Tạo trang
Thông tin chi tiết sách

Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 7/49


 Ý nghĩa:

Trang web liệt kê thông tin chi tiết sách, có hình ảnh minh họa, nút chọn mua hàng và phân trang
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web
− Sử dụng điều khiển GridView và Label
− Định dạng cột
Đơn giá

− Tạo cột
Hình ảnh
thể hiện hình minh họa
− Tạo nút chọn mua
(ButtonField)
 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu Ghi chú
1 Trang web

− Khi mở trang, xuất danh sách Sách ra lưới.

2 Lưới danh sách
− Xử lý phân trang

3
Nút

− Khi chọn, tính và xuất ra màn hình tổng số lượng
và trị giá các quyển sách được chọn
Lưu ý
: mỗi lần chọn là 1 cuốn
Dùng ViewState
1.9. Tạo trang
Tổng hợp - với cột tùy biến
(bài làm thêm)
Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 8/49


Hình 1:
Khi mở trang

Hình 2:
Chọn một quyển sách và xem mô tả
 Ý nghĩa:
Trang web giới thiệu tổng quát sách, có hình ảnh minh họa và phân trang.
Mục tiêu:
Tạo cột tùy biến chứa nhiều điều khiển trong đó.
Bài tập

Lập trình ứng dụng Web với ASP.Net và C# Trang 9/49

 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web
− Sử dụng điều khiển GridView, LinkButton và Label
− Cột tùy biến chứa thông tin
Tên sách
và
Đơn giá

− Định dạng
Đơn giá

− Tạo cột
Hình ảnh
thể hiện hình minh họa
 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 Trang web
− Khi mở trang, xuất danh sách sách ra lưới.
2 Lưới danh sách
− Xử lý phân trang
3 Tên sách − Khi chọn, xuất thông tin mô tả sách ra màn hình (hình 2)
1.10. Tạo trang
Xem danh sách quảng cáo
(bài làm thêm)

 Ý nghĩa:

Trang web liệt kê danh sách quảng cáo của các công ty
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web
− Sử dụng điều khiển GridView (dùng ImageField và HyperLinkField )
(
()/
( />/h/hanobaco/ )
( )
Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 10/49

 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 Trang web
− Khi mở trang, xuất danh sách quảng cáo ra lưới (trong bảng QUANG_CAO)
2 Tên công ty
− Khi chọn, mở trang web của công ty
1.11. Tạo trang
Cập nhật thông tin Nhà xuất bản


Hình 1:
Lưới trong trạng thái đang sửa

Hình 2:
Nhấn nút hủy và vi phạm lỗi
 Ý nghĩa:
Trang web cho phép xem và cập nhật thông tin của Nhà xuất bản
 Yêu cầu thiết kế:

Stt Đối tượng Yêu cầu
1 Nội dung trang web
− Sử dụng điều khiển GridView (dùng CommandField)
 Yêu cầu xử lý:
Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 11/49

Stt Đối tượng Yêu cầu
1 Trang web
− Khi mở trang, xuất danh sách Nhà xuất bản ra lưới.
2 Nút Chọn
− Khi chọn, đổi màu của dòng được chọn (hình 1)
3
Nút

− Khi chọn: kiểm tra ràng buộc quan hệ
 Nếu hợp lệ thì hủy dòng hiện hành
 Ngược lại xuất thông báo lỗi (hình 2)
Mở rộng: xuất hiện hộp thọai hỏi xác nhận hủy?
4 Nút Sửa, Ghi, Không
− Khi chọn, cập nhật dữ liệu vào bảng NHA_XUAT_BAN hoặc bỏ qua
− Riêng nút Ghi: kiểm tra tên Nhà xuất bản không được rỗng, nếu vi
phạm thì không cập nhật
1.12. Tạo trang
Giới thiệu sách


 Ý nghĩa:

Trang web giới thiệu tổng quát danh sách Sách hiện có

 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web
− Sử dụng điều khiển DataList kết hợp với Image, Label, HyperLink –
tên sách ( chưa cần khai báo kiên kết) và Horizontal Rule
 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 Trang web
− Khi mở trang, xuất thông tin sách ra DataList
− Thông tin
Mô tả
: thể hiện khoảng 250 ký tự
Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 12/49

1.13. Tạo trang
Liệt kê chi tiết sách
(bài làm thêm)

 Ý nghĩa:

Trang web giới thiệu chi tiết về danh sách Sách hiện có
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang
web
− Sử dụng điều khiển DataList kết hợp với Image, Label, BulletedList,
HyperLink – Tên sách (chưa cần khai báo kiên kết) và Horizontal Rule
 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu

1 Trang web
− Khi mở trang, xuất thông tin sách ra DataList giống như hình trên
2 Thông tin
Tác giả
Lưu ý: thiết kế bằng BulletedList và xử lý trong sự kiện ItemDataBound
Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 13/49

1.14. Tạo trang
Cập nhật thông tin sách


 Ý nghĩa:

Trang web cho phép xem và cập nhật thông tin sách
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web
− Sử dụng điều khiển DataList kết hợp với Image, Label, HyperLink –
tên sách (chưa cần khai báo kiên kết), Button và Horizontal Rule
− Sử dụng điều khiển TextBox trong thành phần EditItemTemplate
 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 Trang web
− Khi mở trang, xuất thông tin sách ra DataList
2 Nút Hiệu chỉnh
− Khi chọn, thể hiện chế độ chỉnh sửa của dòng hiện hành
3 Nút Cập nhật
− Khi chọn:
o Lưu thông tin được thay đổi trên trang web xuống bảng SACH

(Lưu ý
: chỉ cập nhật vùng Mo_ta và Don_gia)
o Trở về trạng thái ReadOnly
4 Nút Bỏ qua
− Khi chọn, bỏ qua các thay đổi trên trang web và trở về trạng thái
ReadOnly
1.15. Tạo trang
Liệt kê sách mới
(bài làm thêm)
Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 14/49


 Ý nghĩa:

Trang web cho phép xem thông tin sách mới cập nhật, trình bày theo 3 cột
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web
− Sử dụng điều khiển DataList kết hợp với Image, Label, Button
 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 Trang web
− Khi mở trang, xuất thông tin sách ra màn hình ( 6 Ngày cập nhật gần nhất)
1.16. Tạo trang
Xem sách theo chủ đề
(bài làm thêm)


Bài tập

Lập trình ứng dụng Web với ASP.Net và C# Trang 15/49

Hình 1:
Khi mở trang

Hình 2:
Nhấn chuột vào nút
[+]
để xem các sách có chủ đề “Văn học dân gian”
 Ý nghĩa
Trang web xem sách theo chủ đề, có dạng Master – Details
Mục tiêu:
Lồng GridView vào DataList
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web
− Sử dụng điều khiển DataList, Label, Button và GridView
 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 Trang web
− Khi mở trang, xuất danh sách chủ đề
2 Nút [+]
− Khi nhấn chuột, liệt kê các sách của chủ đề được chọn (hình 2)
3 Nút [-]
− Khi nhấn chuột, trả về trạng thái ban đầu (hình 1)
1.17. Tạo trang
Xem thông tin khách hàng


Bài tập

Lập trình ứng dụng Web với ASP.Net và C# Trang 16/49

 Ý nghĩa:
Trang web xem thông tin chi tiết về khách hàng
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web − Sử dụng điều khiển DetailsView
 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 Trang web
− Khi mở trang, xuất danh sách khách hàng ra màn hình
2 DetailsView
− Xử lý phân trang
1.18. Tạo trang
Xem và cập nhật thông tin nhà xuất bản


Hình 1:
Khi mở trang

Hình 2:
Khi nhấn vào nút
Sửa

Hình 3:
Khi nhấn vào nút
Thêm

 Ý nghĩa:
Trang web xem và cập nhật thông tin chi tiết Nhà xuất bản

 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 17/49

1 Nội dung trang web
− Sử dụng điều khiển DetailViews có CommandField
 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 Trang web
− Khi mở trang, xuất danh sách Nhà xuất bản ra màn hình
2 DetailViews
− Xử lý phân trang
3 Nút Sửa, Cập
nhật, Không
− Cập nhật mẫu tin cũ vào bảng NHA_XUAT_BAN hoặc bỏ qua
− Kiểm tra
Tên nhà xuất bản
không được rỗng, nếu hợp lệ thì cập nhật
4 Nút Thêm, Ghi,
Không
− Thêm mới một mẫu tin vào bảng NHA_XUAT_BAN hoặc bỏ qua
− Kiểm tra
Tên nhà xuất bản
không được rỗng, nếu hợp lệ thì thêm mới
5 Nút Hủy
− Xóa Nhà xuất bản hiện hành
Mở rộng
: trước khi xóa phải kiểm tra bên bảng SACH
1.19. Tạo trang

Xem chi tiết sách được chọn


 Ý nghĩa:

Trang web xem chi tiết sách được chọn từ Danh sách Sách (Dạng Master - Detail)
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung
trang web
− Sử dụng điều khiển GridView để thể hiện Danh sách Sách
 Cột Mã sách: sử dụng ButtonField có thuộc tính ButtonType là Link
− Sử dụng điều khiển DetailViews để thể hiện Chi tiết sách
 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 Trang web
− Khi mở trang, xuất danh sách Sách ra màn hình đồng thời xuất thông tin chi
Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 18/49

tiết của sách đầu tiên
2 Danh sách
Sách
− Xử lý phân trang
− Khi chọn Mã sách: thể hiện chi tiết của sách được chọn ra màn hình
1.20. Tạo trang
Xem thông tin khách hàng


 Ý nghĩa:

Trang web xem thông tin chi tiết về khách hàng
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web
− Sử dụng điều khiển FormView
− Định dạng
Ngày sinh
có dạng dd/MM/yyyy
−
Giới tính
: Thể hiện chuỗi Nam hoặc Nữ kế bên CheckBox
 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 Trang web
− Khi mở trang, xuất danh sách khách hàng ra màn hình
2 FormView
− Xử lý phân trang
1.21. Tạo trang
Cập nhật khách hàng
(bài làm thêm)

Hình 1:
Khi mở trang

Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 19/49


Hình 2:

Khi nhấn vào nút
Sửa

Hình 3:
Khi nhấn vào nút
Thêm

Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 20/49

 Ý nghĩa:
Trang web xem và cập nhật thông tin chi tiết khách hàng
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web − Sử dụng điều khiển FormView
 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 Trang web
− Khi mở trang, xuất danh sách khách hàng ra màn hình
2 FormView
− Xử lý phân trang
3 Nút Sửa, Cập
nhật, Không
− Cập nhật mẫu tin cũ vào bảng KHACH_HANG hoặc bỏ qua
− Kiểm tra
Họ tên
không được rỗng, nếu hợp lệ thì cập nhật
4 Nút Thêm, Ghi,
Không
− Thêm mới một mẫu tin vào bảng KHACH_HANG hoặc bỏ qua

− Kiểm tra
Họ tên
không được rỗng, nếu hợp lệ thì thêm mới
5 Nút Hủy − Xóa khách hàng hiện hành
Mở rộng
: trước khi xóa phải kiểm tra bên bảng DON_DAT_HANG và có
thông báo hỏi xác nhận
Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 21/49

BÀI 2: XÂY DỰNG CÁC USER CONTROLS
 Xây dựng trang Default.aspx có giao diện như sau:




Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 22/49

 Hướng dẫn thiết kế:
° Khung trang web là một Table gồm 4 dòng, 3 cột
° Các thể hiện trên trang web: gồm các yêu cầu trong các bài tập sau
2.1. Tạo User Control đầu trang - TH_HEADER

 Ý nghĩa:

Dùng làm banner giới thiệu về trang web, đăng quảng cáo
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web − Sử dụng Table và Image

2.2. Tạo User Control cuối trang - TH_FOOTER

 Ý nghĩa:

Giới thiệu về cơ quan chủ quản của website, địa chỉ liên hệ, công ty xây dựng trang web,
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web
− Sử dụng Table
2.3. Tạo User Control thực đơn - TH_THUCDON

 Ý nghĩa:

Dùng làm thực đơn chính cho trang web
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web
− Sử dụng Table và HyperLink
2.4. Tạo User Control chủ đề sách - TH_CHUDE
Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 23/49


 Ý nghĩa

Dùng làm các mục chọn về Chủ đề sách
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web
− Sử dụng Table, DataList, Image và HyperLink

 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 DataList
− Khi mở trang, tạo nguồn và liên kết dữ liệu trong bảng CHU_DE
2.5. Tạo User Control sách mới - TH_SACHMOI

 Ý nghĩa:

Dùng đề thể hiện danh sách Sách mới nhập về
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web − Sử dụng Table, GridView và Image
 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 GridView
− Khi mở trang, tạo nguồn và liên kết dữ liệu trong bảng SACH
Lưu ý
: lấy các sách có 5 ngày cập nhật gần nhất
2.6. Tạo User Control quảng cáo giữa trang - TH_QC_BODY

Bài tập
Lập trình ứng dụng Web với ASP.Net và C# Trang 24/49



 Ý nghĩa:
Dùng để hiển thị các liên kết quảng cáo được thể hiện dưới dạng hình ảnh
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web

− Sử dụng Table và AdRotator
 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 AdRotator
− Tạo 3 quảng cáo trên, có tần suất xuất hiện bằng nhau
Ghi chú:
Giáo viên có thể có cung cấp thể hiện này
2.7. Tạo User Control danh sách Sách - TH_DS_SACH

 Ý nghĩa:

Dùng để thể hiện thông tin tổng quát về các quyển sách
 Yêu cầu thiết kế:
Stt Đối tượng Yêu cầu
1 Nội dung trang web
− Sử dụng Table, DataList, Image, HyperLink, Label và Button