Bài tập Lập trình Web với ASP
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.9 MB, 62 trang )
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:
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 WEB 2
Mã tài liệu: DT_NCM_LT_BT_LTW2
Phiên bản 2.0 – Tháng 04/2009
CuuDuongThanCong.com
/>
Bài tập
BÀI 1: TỔNG QUAN VỀ ASP.NET
1.1. Tạo mới một project
-
Tạo mới một project có dạng sau:
Lưu ý: chọn Location là File System
-
Làm quen với các thành phần giao diện trên màn hình VS.Net
1.2. Tạo trang Chao.aspx
-
Thực hành thao tác tạo mới một trang web đơn giản (lưu trong thư mục Bai1)
-
Thi hành trang web, xem kết quả và trở về màn hình thiết kế
Trang 1/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
BÀI 2: SERVER CONTROLS
2.1. Tạo trang Hồ sơ đăng ký
Hình 1: Trước khi nhấn nút Đăng ký
Hình 2: Sau khi nhấn nút Đăng ký
Ý nghĩa:
Trang web dành cho khách hàng đăng ký hồ sơ
Yêu cầu thiết kế:
Stt
1
Đối tượng
Nội dung
trang web
Yêu cầu
− Sử dụng điều khiển Input(Text, Radio, Button), Textarea và Div
− Chuyển các điều khiển này lên HTML Server control
Yêu cầu xử lý:
Stt
Đối tượng
Yêu cầu
1
Nút Đăng ký
− Khi chọn, xuất hồ sơ khách hàng ra màn hình và có định dạng (xem hình 2)
Trang 2/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
2.2. Tạo trang Đọc báo
Hình 1: Lúc thiết kế
Hình 2: Lúc thực thi
Ý nghĩa:
Trang web liệt kê đường Link đến các trang báo có nhiều người đọ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 Label, Image và HyperLink
Yêu cầu xử lý:
Stt
1
Đối tượng
Trang web
Yêu cầu
− Khi mở trang, xuất nội dung :
”Lợi ích của đọc báo:
2
Các chức năng
•
Mở rộng kiến thức
•
... ”
− Khi chọn, mở trang web báo tương ứng với chức năng
2.3. Tạo trang Câu chào
Hình 1: Nhập họ tên của bạn
Trang 3/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
Hình 2: Khi nhấn vào nút Thay đổi câu chào
Hình 3: Xuất hiện câu chào
Ý nghĩa:
Trang web cho phép nhập vào họ tên và xuất ra màn hình câu chào nếu đồng ý thay đổi
Yêu cầu thiết kế:
Stt
Đối tượng
1
Nội dung trang web
Yêu cầu
− Sử dụng điều khiển TextBox, LinkButton và Label
Yêu cầu xử lý:
Stt
1
Đối tượng
Nút Thay đổi câu
chào
Yêu cầu
− Khi chọn, xuất hiện hộp thoại xác nhận có đồng ý thay đổi câu chào
không? (hình 2)
Nếu đồng ý thì thay đổi câu chào (hình 3)
2.4. Tạo trang Tìm quân cờ
Hình 1: Lúc thiết kế
Hình 2: Khi rê chuột đến dòng 5 cột 4
Trang 4/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
Hình 2: Quân cờ xuất hiện trên bàn cờ
Hình 3: Thông báo vị trí quân cờ
Ý nghĩa:
Trang web chứa một trò chơi tìm quân cờ trong bàn cờ vua
Mục tiêu: Kết hợp các thuộc tính của tag HTML vào trong ASP.NET
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 Table, Button và Label
Yêu cầu xử lý:
Stt
Đối tượng
Yêu cầu
1
Trang web
− Khi mở trang, tạo một bàn cờ với số dòng và cột tùy ý (nhưng phải bằng
nhau).
2
Các ô bàn cờ
− Khi rê chuột vào thì xuất hiện tootip chứa thông tin dòng, cột của ô (hình 1)
3
Nút Tạo
quân cờ
− Khi chọn, thực hiện:
Tạo quân cờ tại một ô ngẫu nhiên trong bàn cờ
Mặc định không cho quân cờ thể hiện trên màn hình
Khi rê chuột vào đúng ô chứa thì xuất hiện quân cờ (hình 2)
Khi rê chuột ra khỏi ô chứa thì dấu đi quân cờ
Khi nhấn chuột vào ô chứa thì xuất hiện thông báo vị trí quân cờ (hình
3)
2.5. Tạo trang Lịch để bàn
Trang 5/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
Ý nghĩa:
Trang web thể hiện lịch bàn, cho phép thêm ngày ghi nhớ vào lị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 Calendar, TextBox, Label và Button
Yêu cầu xử lý:
Stt
1
Đối tượng
Trang web
Yêu cầu
Ghi chú
− Khi mở trang, thực hiện:
In ngày hiện hành có dạng <Thứ, dd/MM/yyyy>.
Tạo danh sách các ngày cần ghi nhớ trong năm
Tạo mảng lưu trữ.
(các giá trị tùy ý)
2
Lịch
− Tô màu các ngày 1/1, 1/5, 1/6 và 20/11
− Khi rê chuột vào các ngày cần ghi nhớ thì xuất hiện
tooltip thể hiện ghi chú của ngày đó (xem hình)
3
Nút Thêm
ngày ghi nhớ
Truy xuất từ
mảng
− Khi chọn:
Kiểm tra giá trị Ngày và Tháng là số và chưa có
trong các ngày cần ghi nhớ
Nếu hợp lệ thì thêm một ngày cần ghi nhớ vào lịch
Thêm vào mảng
2.6. Tạo trang Upload và xem tập tin
Trang 6/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
Hình 1: View Upload tập tin
Hình 2: View Xem các tập tin được upload
Ý nghĩa:
Trang web cho phép upload tập tin và xem các tập tin được upload
Yêu cầu thiết kế:
Stt
Đối tượng
1
Nội dung trang web
Yêu cầu
− Sử dụng điều khiển MultiView, View, LinkButton, FileUpload, TextBox
và Button.
− MultiView chứa 2 view:
View thứ nhất chứa điều khiển FileUpload và Button
View thứ hai chứa điều khiển TextBox
Yêu cầu xử lý:
Stt
1
Đối tượng
Nút Upload
Yêu cầu
− Khi chọn, thực hiện:
Upload tập tin lên thư mục Upload trên server
Xuất danh sách tập tin trong thư mục Upload ra màn hình
(trong view thứ hai)
2
Nút Upload tập tin
− Khi chọn, xuất hiện view thứ nhất - chức năng Upload (hình 1)
3
Nút Xem các tập
tin được upload
− Khi chọn, xuất hiện view thứ hai - xem danh sách tập tin được upload
(hình 2)
2.7. Tạo trang Sản phẩm kẹo
Trang 7/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
Hình 1: Trang web mới mở
Hình 2: Chọn sản phẩm
Ý nghĩa:
Tạo trang web cho phép người dùng chọn các sản phẩm kẹo được yêu thích và xem kết quả đã chọn
Mục tiêu: Sử dụng ViewState
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 CheckBox, Label, TextBox và Button
2
Danh sách sản phẩm
− Mỗi một CheckBox là một sản phẩm
Yêu cầu xử lý:
Stt
Đối tượng
Yêu cầu
Ghi chú
1
Trang web
− Giao diện như hình 1
2
Các CheckBox
danh sách sản
phẩm
− Nếu được chọn, thì tăng số sản phẩm lên 1 và xuất ra
màn hình
− Nếu bỏ chọn thì giảm số sản phẩm đi 1 và xuất ra màn
hình (hình 2)
Trang 8/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
Dùng
ViewState
/>
Bài tập
3
Nút Bắt đầu chọn
lại
− Khi chọn, xóa tất cả thông tin Số lượng và Sản phẩm
được chọn, trở về trạng thái ban đầu (hình 1)
Dùng
ViewState
− Mở rộng: dùng JavaScript xóa chọn các CheckBox
Trang 9/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
BÀI 3: ĐIỀU KHIỂN KIỂM TRA DỮ LIỆU
3.1. Tạo trang Thông tin đăng nhập
Hình 1: Lúc thiết kế
Hình 2: Hồ sơ đăng ký hợp lệ
Trang 10/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
Ý nghĩa:
Trang web dùng để khách hàng đăng ký hồ sơ
Yêu cầu thiết kế:
Stt
1
Đối tượng
Nội dung
trang web
Yêu cầu
− Sử dụng điều khiển TextBox, DropDownList, CheckBox, Button và Label
− Các điều khiển kiểm tra dữ liệu (Validation Control)
Ghi chú: ô nhập năm của Ngày sinh , tạo danh sách từ 2000 Æ 2010
Yêu cầu xử lý:
Stt
1
Đối tượng
Các điều
khiển kiểm
tra dữ liệu
Yêu cầu
− Tên đăng nhập: Không được rỗng, tối thiểu 8 ký tự, tối đa 16 ký tự. Bao
gồm các ký tự chữ cái, ký số và 3 ký tự đặc biệt: &, _ , !
− Mật khẩu: không được rỗng
− Nhập lại mật khẩu: không được rỗng và phải giống Mật khẩu
− Họ tên khách hàng: không được rỗng
− Ngày sinh: Ngày, tháng, năm phải có kiểu là Integer
− Email: phải có dạng của địa chỉ e-mail
− Thu nhập: trong khỏang [3 triệu - 10 triệu]
− Bảng lỗi chung thông báo cụ thể (hình 1)
Lưu ý: Khi phạm lỗi thì xuất hiện dấu (*) phía bên phải các ô nhập dữ liệu
2
Nút Đăng ký
− Khi chọn, nếu dữ liệu hợp lệ thì xuất Hồ sơ khách hàng (hình 2)
Trang 11/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
BÀI 4: CÁC ĐIỀU KHIỂN DỮ LIỆU
4.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:
Trang 12/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
4.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
1
Đối tượng
Danh sách hoa
Yêu cầu
− Khi chọn, xuất hình và tên hoa được chọn ra màn hình
4.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
1
Nội dung trang web
Yêu cầu
− Sử dụng điều khiển DropdownList và ListBox
Trang 13/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
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
4.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
1
Đối tượng
Nội dung
trang web
Yêu cầu
− Sử dụng điều khiển RadioButtonList, CheckBoxList, Button, Label và
BulletedList
Trang 14/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
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:
3
Nút Xem kết
quả bình chọn
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)
− Khi chọn, xuất ra các tiêu chuẩn được chọn (hình 2)
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
Thiết kế bằng
BulletedList
4.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
1
Đối tượng
Trang web
Yêu cầu
− Khi mở trang, xuất danh sách khách hàng ra lưới.
4.6. Tạo trang Danh sách Sách
Trang 15/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
Ý 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
1
Nội dung trang web
Yêu cầu
− 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
4.7. Tạo trang Danh sách khách hàng với cột tùy biến
Trang 16/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
Ý 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
1
Nội dung trang web
Yêu cầu
− 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
4.8. Tạo trang Thông tin chi tiết sách
Trang 17/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
Ý 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
Dùng ViewState
Lưu ý: mỗi lần chọn là 1 cuốn
4.9. Tạo trang Tổng hợp - với cột tùy biến (bài làm thêm)
Trang 18/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
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 đó.
Trang 19/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
Yêu cầu thiết kế:
Stt
Đối tượng
1
Nội dung trang web
Yêu cầu
− 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)
4.10. Tạo trang Xem danh sách quảng cáo (bài làm thêm)
( />
()/
( />/h/hanobaco/ )
( )
Ý 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
1
Nội dung trang web
Yêu cầu
− Sử dụng điều khiển GridView (dùng ImageField và HyperLinkField )
Trang 20/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
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
4.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
1
Nội dung trang web
Yêu cầu
− Sử dụng điều khiển GridView (dùng CommandField)
Yêu cầu xử lý:
Trang 21/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
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
4.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
1
Nội dung trang web
Yêu cầu
− 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
1
Đối tượng
Trang web
Yêu cầu
− 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ự
Trang 22/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
4.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
1
Đối tượng
Nội dung trang
web
Yêu cầu
− 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
Trang 23/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
Bài tập
4.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
1
Nội dung trang web
Yêu cầu
− 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:
4
Nút Bỏ qua
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
− Khi chọn, bỏ qua các thay đổi trên trang web và trở về trạng thái
ReadOnly
4.15. Tạo trang Liệt kê sách mới (bài làm thêm)
Trang 24/61
Học phần 4 – Lập trình Web 2
CuuDuongThanCong.com
/>
