Bài giảng - Giáo án: Ứng dụng asp.net trong giải bài tập lập trình web

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

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 Đối tượng Yêu cầu
1 Nội dung
trang web
− 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)
Bài tập
Học phần 4 – Lập trình Web 2 Trang 3/61

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 Đố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ào


Hình 1:
Nhập họ tên của bạn

Bài tập

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


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 Yêu cầu
1 Nội dung trang web
− Sử dụng điều khiển TextBox, LinkButton và Label
 Yêu cầu xử lý:
Stt Đối tượng Yêu cầu
1 Nút Thay đổi câu
chào
− 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

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

Bài tập
Học phần 4 – Lập trình Web 2 Trang 6/61


 Ý 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 Đối tượng Yêu cầu Ghi chú
1 Trang web
− 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)
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

 Ý 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 Yêu cầu
1 Nội dung trang web − 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 Đối tượng Yêu cầu
1 Nút Upload
− 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

Bài tập
Học phần 4 – Lập trình Web 2 Trang 8/61

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

Bài tập
Học phần 4 – Lập trình Web 2 Trang 9/61

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)
− Mở rộng
: dùng JavaScript xóa chọn các CheckBox
Dùng
ViewState
Bài tập
Học phần 4 – Lập trình Web 2 Trang 10/61

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ệ

Bài tập

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

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)

Bài tập
Học phần 4 – Lập trình Web 2 Trang 12/61

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:

Bài tập
Học phần 4 – Lập trình Web 2 Trang 13/61

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

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

 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
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 Đố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.
4.6. Tạo trang
Danh sách Sách

Bài tập
Học phần 4 – Lập trình Web 2 Trang 16/61


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

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


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

Đơ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)

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

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

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 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
4.15. Tạo trang
Liệt kê sách mới
(bài làm thêm)