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: [email protected]
Mã tài liệu: DT_NCM_LT_BT_LTW2
Phiên bản 2.0 – Tháng 04/2009

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
Bài tập
Học phần 4 – Lập trình Web 2 Trang 1/61

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ế
Bài tập
Học phần 4 – Lập trình Web 2 Trang 2/61

BÀI 2: SERVER CONTROLS

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 Đối tượng Yêu cầu
1 Trang web
− Khi mở trang, xuất nội dung :
”Lợi ích của đọc báo:
• Mở rộng kiến thức
•

”
2 Các chức năng
− 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àoHình 1:
Nhập họ tên của bạn

Bài tập

Bài tập
Học phần 4 – Lập trình Web 2 Trang 5/61 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 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)
Truy xuất từ
mảng
3 Nút Thêm
ngày ghi nhớ
− 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

Bài tập
Học phần 4 – Lập trình Web 2 Trang 7/61 Hình 1:
View Upload tập tin

Hình 2:
View Xem các tập tin được upload


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)
Dùng
ViewState

Học phần 4 – Lập trình Web 2 Trang 11/61

 Ý nghĩa:
Trang web dùng để khách hàng đăng ký hồ sơ
 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 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 Đối tượng Yêu cầu
1 Các điều
khiển kiểm
tra dữ liệ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

 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
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 Yêu cầu
1 Nội dung trang web
− Sử dụng điều khiển DropdownList và ListBox
Bài tập
Học phần 4 – Lập trình Web 2 Trang 14/61

 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

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
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

− 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

Bài tập
Học phần 4 – Lập trình Web 2 Trang 17/61  Ý 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
4.8. Tạo trang
Thông tin chi tiết sách

Bài tập

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
4.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
Học phần 4 – Lập trình Web 2 Trang 19/61 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
Học phần 4 – Lập trình Web 2 Trang 20/61

 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à

( http://www.dutchlady.com.vn )
Bài tập
Học phần 4 – Lập trình Web 2 Trang 21/61

 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ảnHì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
Học phần 4 – Lập trình Web 2 Trang 22/61

Stt Đối tượng 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ự
Bài tập
Học phần 4 – Lập trình Web 2 Trang 23/61

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 Đố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
Học phần 4 – Lập trình Web 2 Trang 24/61


(bài làm thêm)

Trích đoạn Tạo trang Capnhat_NXB.aspx

---