bai tap - hp4 - lap trinh web 2dulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/... · − sử...

62
TRUNG TAÂM TIN HOÏC - ÑAÏI HOÏC KHOA HOÏC TÖÏ NHIEÂN TP. HCM 227 Nguyeãn Vaên Cöø – Quaän 5 – Tp. Hoà Chí Minh Tel: 8351056 – Fax 8324466 – Email: [email protected] Maõ taøi lieäu: DT_NCM_LT_BT_LTW2 Phieân baûn 2.0 – Thaùng 04/2009 BÀI TP CHƯƠNG TRÌNH KTHUT VIÊN NGÀNH LP TRÌNH Hc phn 4 LP TRÌNH WEB 2

Upload: others

Post on 27-Jan-2020

10 views

Category:

Documents


0 download

TRANSCRIPT

TRUNG TAÂM TIN HOÏC - ÑAÏI HOÏC KHOA HOÏC TÖÏ NHIEÂN TP. HCM

227 Nguyeãn Vaên Cöø – Quaän 5 – Tp. Hoà Chí Minh Tel: 8351056 – Fax 8324466 – Email: [email protected]

Maõ taøi lieäu: DT_NCM_LT_BT_LTW2 Phieân baûn 2.0 – Thaù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 )

( http://www.vietfashion.vn/)

(http://www.haydetretudo.com.vn)/

(http://demo10.webinvietnam.com/For_Ad/h/hanobaco/ )

( 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ả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)

Bài tập

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

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

4.16. Tạo trang Xem sách theo chủ đề (bài làm thêm)

Bài tập

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

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)

Bài tập

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

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

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

Bài tập

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

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

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

4.19. Tạo trang Xem chi tiết sách được chọn

Bài tập

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

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

4.20. Tạo trang Xem thông tin khách hàng

Bài tập

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

Ý 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

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

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

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

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

Ý 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

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

BÀI 5: 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

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

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

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

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

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

5.4. Tạo User Control chủ đề sách - TH_CHUDE

Bài tập

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

Ý 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

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

5.6. Tạo User Control quảng cáo giữa trang - TH_QC_BODY

Bài tập

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

Ý 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

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

Bài tập

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

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 SACH

Lưu ý: lấy các sách có 6 ngày cập nhật gần nhất

5.8. Tạo User Control thông tin giỏ hàng - TH_THONGTIN_GH

Ý nghĩa:

Dùng để thể hiện chức năng xem giỏ hàng và thông tin tổng số tiền các quyển sách được chọn mua

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, Image, Label (thể hiện Số tiền) và HyperLink (Giỏ hàng của bạn)

5.9. Tạo User Control quảng cáo bên phải trang - TH_QC_PHAI

Ý nghĩa:

Dùng để hiển thị các hình ảnh quảng cáo còn hiệu lự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 Table và GridView

Bài tập

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

Yêu cầu xử lý:

Stt Đối tượng Yêu cầu

1 GridView − Khi mở trang web, tạo nguồn và liên kết dữ liệu trong bảng QUANG_CAO

Lưu ý: chỉ lấy các quảng cáo có ngày hết hạn <= ngày hiện hành

5.10. Tạo User Control sách bán chạy - TH_SACH_BANCHAY

Ý nghĩa

Dùng để thể hiện danh sách Sách bán chạy (dựa trên Số lựơng 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 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 SACH

Lưu ý: lấy các sách có 5 Số lượng bán cao nhất

Bài tập

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

BÀI 6: QUẢN LÝ ỨNG DỤNG WEB 6.1. Các xử lý trong trang Default.aspx của bài 5

Mục tiêu:

− Sử dụng đối tượng Request và Session

Yêu cầu xử lý:

Stt Đối tượng Yêu cầu

1 TH_CHUDE − Khi chọn một chủ đề, lọc các sách trong TH_DS_SACH theo chủ đề và thể hiện tên chủ đề được chọn (Hình 1)

2 TH_DS_SACH − Nguồn dữ liệu phải được lọc theo chủ đề được chọn từ TH_CHUDE

3 Nút

− Ghi nhận tổng số tiền (Don_gia) đã đặt mua

− Cập nhật vào giỏ hàng (liên quan đến bài 6.2).

Lưu ý: nếu sách đã được chọn mua trước đó thì tăng số lượng lên 1, ngược lại thì mới thêm vào giỏ hàng

4 TH_THONGTIN_GH − Khi nhấn chuột vào Giỏ hàng của bạn thì mở trang Giỏ hàng (câu 6.2) trong một cửa sổ mới

− Thể hiện tổng số tiền của sách được chọn mua (Hình 2)

Hình 1: Lọc sách Văn học dân gian

Bài tập

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

Hình 2: Sau khi chọn mua 3 quyển sách ”Văn học dân gian” đầu tiên

6.2. Tạo trang Giỏ hàng

Ý nghĩa

Dùng để liệt kê thông tin chi tiết các sách đựơc khách hàng chọn mua Mục tiêu: Dùng đối tượng Session

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, Label, Image, CheckBox và Button

− Không được phép chỉnh sửa các giá trị trên lưới ngoại trừ Số lượng

Yêu cầu xử lý:

Stt Đối tượng Yêu cầu

1 Nguồn cho lưới − Tạo lớp SP_SACH có các thuộc tính là Mã sách, Tên sách, Số lượng, Đơn giá và Thành tiền

− Khai báo biến Session kiểu ArrayList để lưu trữ các phần tử có kiểu là lớp SP_SACH

2 Trang web − Khi mở trang, tạo nguồn và liên kết dữ liệu

3 Nút Sửa, Ghi, Không

− Xử lý như các bài trước

Lưu ý: cập nhật vào Session kiểu ArrayList

4 Nút

− Xóa các dòng được đánh dấu chọn

5 Tổng số tiền và Tổng mặt hàng

− Phải được cập nhật giá trị khi thay đổi Số lượng hoặc xóa các dòng

Mở rộng:

Bài tập

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

− Bổ sung điều khiển CheckBox vào cột nút Xóa và chuyển nút Xóa xuống Footer

− Yêu cầu xử lý: khi chọn CheckBox thì tự động chọn tất cả các CheckBox trong cột này và ngược lại (dùng JavaScript)

6.3. Các xử lý tiếp theo trong bài 6.1

Mục tiêu:

− Load động các User Control

Yêu cầu thiết kế:

− Tạo User Control Nội dung chi tiết sách - TH_NOI_DUNG_SACH.ascx (hình 1)

Stt Đối tượng Yêu cầu

1 Nội dung − Sử dụng Table, DataList, Image và Label

Hình 1: Thể hiện nội dung chi tiết sách

Bài tập

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

Yêu cầu xử lý:

Stt Đối tượng Yêu cầu

1 Trang web − Khi mở trang, giao diện và nguồn dữ liệu giống bài 5 – trang Default.aspx

2 Các User Control: TH_DS_SACH, TH_SACHMOI, TH_SACH_BANCHAY

− Khi nhấn chuột vào Tên sách thì thể hiện nội dung chi tiết của sách được chọn (hình 1)

Lưu ý: TH_NOI_DUNG_SACH sẽ thế chổ TH_DS_SACH trong trang Default.aspx (sử dụng điều khiển PlaceHolder)

Bài tập

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

BÀI 7: WEB SERVICES 7.1. Tạo Web Services Ws_Chude

Mục tiêu:

− Sử dụng Web Services kết hợp với điều khiển ObjectDataSource

Ý nghĩa

− Trang web thể hiện Danh sách Chủ đề, có phân trang và sắp xếp

Yêu cầu thiết kế:

Stt Đối tượng Yêu cầu

1 Nội dung trang web − Sử dụng Panel và GridView

2 Web Services Ws_chude

− Tạo phương thức Hien_thi_chude() dùng để cung cấp danh sách Chủ đề hiện có

3 ObjectDataSource − Đối tượng để lấy nguồn dữ liệu là Ws_chude

Yêu cầu xử lý:

Stt Đối tượng Yêu cầu

1 GridView − Liên kết dữ liệu với ObjectDataSource

− Khai báo phân trang và sắp xếp

Bài tập

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

BÀI 8: XÂY DỰNG HOÀN CHỈNH ỨNG DỤNG WEB

8.1. Tạo trang MasterPage.master có dạng sau:

Hình 1: Dạng thiết kế

Ý nghĩa

Dùng làm trang Master

Yêu cầu thiết kế:

Stt Đối tượng Yêu cầu

1 Nội dung trang web − Sử dụng lại các User Control đã tạo trong bài 5

8.2. Tạo trang Default02.aspx

Bài tập

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

Hình 1: Dạng thiết kế, sau khi đã khai báo Content

Ý nghĩa:

Trang nội dung có trang Master là trang MasterPage.master

Yêu cầu thiết kế:

Stt Đối tượng Yêu cầu

1 Nội dung trang web − Sử dụng lại các User Control đã tạo trong bài 5

− Khai báo MasterPageFile và Content

8.3. Tạo trang Hệ thống bài tập HP4 - LT Web2

Bài tập

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

Hình 1: Trang chủ khi mới mở

Hình 2: Liên kết đến Bài 4.3

Bài tập

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

Hình 3: Các chức năng của thực đơn ngang

Ý nghĩa:

Trang chủ dùng để liên kết đến các trang web trong hệ thống bài tập

Mục tiêu: sử dụng các điều khiển Navigation kết hợp với tập tin .sitemap

Yêu cầu thiết kế:

Trang Master

Stt Đối tượng Yêu cầu

1 Nội dung trang − Gồm 1 table 4 dòng, 2 cột

2 Thông tin thể hiện cây thực đơn

− Sử dụng SiteMapPath

3 Cây thực đơn bài tập

− Sử dụng TreeView và SiteMapDataSource

Lưu ý: Tạo file Web.sitemap

4 Thực đơn ngang − Sử dụng Menu

Trang chủ

Stt Đối tượng Yêu cầu

1 Nội dung trang web − Chứa dòng văn bản “NỘI DUNG BÀI TẬP”

− Khai báo MasterPageFile và Content

Các trang liên kết bài tập

Stt Đối tượng Yêu cầu

1 Nội dung trang web − Là nội dung các bài tập

Lưu ý: học viên nên dùng lại (hoặc copy sang file khác) các bài tập đã làm trước đó

− Khai báo MasterPageFile và Content

Yêu cầu xử lý:

Trang Master

Stt Đối tượng Yêu cầu

1 Cây thực đơn bài tập

− Khi chọn một chức năng bài tập thì xuất hiện nội dung trang web của bài tập tương ứng

Hướng dẫn: xây dựng cấu trúc tập tin Web.sitemap

2 Thực đơn ngang − Khi chọn một chức năng con thì liên kết đến trang web tương ứng

Hướng dẫn: thiết kế trực tiếp các chức năng hoặc

Thông qua việc xây dựng cấu trúc tập tin menu.sitemap, sau đó khai báo trong tập tin Web.config

Phần cung cấp địa chỉ các trang:

Bài tập

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

− Hướng dẫn học ASP.Net: http://www.w3schools.com/aspnet/default.asp

− Xây dựng ứng dụng web với ASP.Net: http://msdn2.microsoft.com/en-us/library/ms644563.aspx

− Báo tuổi trẻ : http://www.tuoitre.com.vn

− Báo Thanh niên : http://www.thanhnien.com.vn

− Tin nhanh : http://vnexpress.net

8.4. Tạo trang Thay đổi định dạng

Hình 1: Khi mở trang Hình 2: Chọn Skin là FAQ

Ý nghĩa

Trang Web có chức năng thay đổi định dạng trong một trang Mục tiêu: sử dụng Themes và Skins, thay đổi Theme lúc thực thi (Theme động)

Yêu cầu thiết kế:

Stt Đối tượng Yêu cầu Ghi chú

1 Danh sách chọn mẫu

− Sử dụng DropDownList, danh sách như sau:

Hình này chỉ minh họa, H.Viên có thể tạo danh sách tùy thích

2 Cây thực đơn − Sử dụng TreeView Khai báo nguồn giống bài 8.3

Bài tập

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

3 Tập tin .Skin − Thiết kế các điều khiển TreeView với các định dạng khác nhau. Trong đó có một điều khiển mặc định

H.viên tự thiết kế các định dạng tùy thích

Yêu cầu xử lý:

Stt Đối tượng Yêu cầu

1 Trang web − Khi mở trang, Cây thực đơn được định dạng theo Theme mặc định (hình 1)

2 Danh sách chọn mẫu

− Khi thay đổi giá trị, Cây thực đơn được thay đổi theo Skin được chọn (hình 2)

Bài tập

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

BÀI 9: TRIỂN KHAI ỨNG DỤNG WEB 9.1. Tạo ứng dụng web trên IIS:

Mục tiêu:

− Sử dụng IIS

Ý nghĩa:

− Tạo ứng dụng web trên IIS, sau đó các học viên sẽ cung cấp địa chỉ IP của máy cho người khác. Mục đích là để các học viên truy cập vào website của người khác

Yêu cầu:

− Sử dụng lại các project đã làm trước đó, tạo thư mục mục ảo ánh xạ đến thư mục ứng dụng

− Sử dụng trình duyệt truy cập website ngay trên máy mình và các máy khác

9.2. Triển khai ứng dụng web:

Mục tiêu:

− Sử dụng công cụ Web Deployment Setup

Ý nghĩa:

− Triển khai ứng dụng web, sau đó có thể publish lên một free host

Yêu cầu:

− Sử dụng lại các project đã làm trước đó, tạo project triển khai

Bài tập

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

BÀI 10: BẢO MẬT WEBSITE 10.1. Tạo User và Role:

Mục tiêu:

− Sử dụng công cụ WAT

Ý nghĩa:

− Tạo các User và Role, gán quyền truy xuất các trang trong website cho Role và cấp Role cho từng User

Yêu cầu thiết kế:

− Tạo Project mới, sau đó lần lượt tạo các thư mục sau: Man_hinh, Man_hinh_KT, Man_hinh_QT

− Lần lượt tạo các trang web trong 3 thư mục trên, nội dung trang web là tùy ý (xem hình 1)

Hình 1: cấu trúc project

− Sử dụng công cụ WAT để :

Khai báo chứng thực cho website là Forms Authentication

Tạo các Role sau: QuanTri, KeToan, BanHang, KhachHang

Tạo các User sau: Hung, Dung, Nga, Huyen, Hoa, Thu

Cấp quyền truy xuất các thư mục và trang web của project trên như sau:

+ Tất cả các user đều có quyền truy xuất thư mục Man_hinh

+ Role QuanTri có quyền truy xuất thư mục Man_hinh_KT và Man_hinh_QT

+ Role KeToan có quyền truy xuất thư mục Man_hinh_KT

Cấp Role cho các User như sau:

+ Role QuanTri có User Dung

+ Role KeToan có User Huyen

+ Role BanHang có User Thu

+ Role KhachHang gồm có User Hung, Nga và Hoa

Bài tập

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

10.2. Tạo trang Login.aspx:

Hình 1: Trang Login.aspx Hình 2: Khi đăng nhập không hợp lệ

Mục tiêu:

− Sử dụng điều khiển Login

Ý nghĩa:

− Tạo trang Đăng nhập, sau đó nhập tên user và mật khẩu đã được cấp trong bài 9.1

Yêu cầu thiết kế:

− Sử dụng điều khiển Login để thiết kế trang Đăng nhập như hình 1

Yêu cầu xử lý:

Stt Đối tượng Yêu cầu

1 Nút

− Nếu hợp lệ thì chuyển đến trang Default.aspx (bài 9.3)

10.3. Tạo trang Default.aspx

Hình 1: Trang Default.aspx

Ghi chú: chức năng Màn hình Kế toán và Màn hình Quản trị cũng giống chức năng Màn hình

Mục tiêu:

− Kiểm tra các quyền truy xuất của user sau khi đăng nhập (lưu ý: trang này được mở từ bài 9.2)

Ý nghĩa:

− Giả lập trang chủ, trên trang này có hệ thống thực đơn để mở các trang trong cùng một website

Yêu cầu thiết kế:

− Sử dụng điều khiển Menu để thiết kế thực đơn như hình 1

Yêu cầu xử lý:

Bài tập

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

Stt Đối tượng Yêu cầu

1 Chức năng Trang 1 và Trang 2 − Chuyển đến trang web tương ứng nằm trong thư mục được chọn (cũng chính là tên thực đơn chính)

2 Chức năng Đăng nhập − Chuyển đến trang Login.aspx (bài 9.2)

3 Chức năng Đổi mật khẩu − Chuyển đến trang ChangePass.aspx (bài 9.4)

4 Chức năng Xem và cập nhật Profile − Chuyển đến trang Capnhat_Profile.aspx (bài 9.5)

10.4. Tạo trang ChangePass.aspx

Hình 1: Trang ChangePass.aspx Hình 2: Thay đổi mật khẩu thành công

Mục tiêu:

− Sử dụng điều khiển ChangePassword

Ý nghĩa:

− Trang dùng để đổi mật khẩu sau khi đăng nhập

Yêu cầu thiết kế:

− Sử dụng điều khiển ChangePassword để thiết kế

Yêu cầu xử lý:

Stt Đối tượng Yêu cầu

1 Nút

− Chuyển đến trang Default.aspx

10.5. Tạo trang Capnhat_Profile.aspx

Hình 1: Khi user chưa có thông tin Profile

Bài tập

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

Hình 2: Sau khi cập nhật Profile

Mục tiêu:

− Sử dụng Profile

Ý nghĩa:

− Trang dùng để xem thông tin Profile và cập nhật Profile của user sau khi đăng nhập

Yêu cầu thiết kế:

− Sử dụng các điều khiển thích hợp để thiết kế trang web có dạng hình 1

Yêu cầu xử lý:

Stt Đối tượng Yêu cầu

1 Khi mới mở trang − Hiển thị thông tin Profile của user ( lưu ý: trang này được mở từ trang Default.aspx)

2 Nút

− Lưu 3 giá trị được nhập trong các ô TextBox vào Profile

Bài tập

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

BÀI 11: GIỚI THIỆU VÀ SỬ DỤNG AJAX 11.1. Tạo trang Pheptinh.aspx

Mục tiêu:

− Truy xuất ASP.NET control trong javascript

− Sử dụng Ajax với đối tượng XmlHttpRequest

Ý nghĩa:

− Người dùng nhập 2 số và chọn phép tính

− Khi người dùng click nút = thì ở Client sẽ gửi giá trị của 2 số và phép tính về Server với yêu cầu thực hiện phép tính ứng với phép tính

− Server sẽ thực hiện phép tính và gửi kết quả về Client

− Client hiển thị kết quả.

Yêu cầu:

− Dùng ASP.NET control để thiết kế giao diện

− Thực hiện bài toán trên mà không có PostBack (không load lại trang web)

11.2. Tạo trang Monhoc.aspx

Mục tiêu:

− Sử dụng Ajax với đối tượng XmlHttpRequest

− Kết quả trả về Client dạng Xml

Ý nghĩa:

− Dùng Ajax để gửi yêu cầu load dữ liệu và nhận kết quả trả về

− Hiển thị dữ liệu cho ComboBox

Bài tập

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

Yêu cầu xử lý:

− Tạo 1 mảng chứa tên các môn học: {“ASP.Net”, “PHP”, “Joomla”, “CSharp”, “ADO.Net”}

− Khi click vào nút , nếu ComboBox Môn học chưa có dữ liệu thì sẽ load dữ liệu từ mảng môn học cho ComboBox

11.3. Tạo trang TimKiem_hocvien.aspx

Hình 1: Bắt đầu tìm

Hình 2: Nếu tìm thấy

Hình 3: Nếu không tìm thấy

Mục tiêu:

− Dùng Ajax với UpdatePanel

Ý nghĩa:

− Dùng Ajax để gửi yêu cầu load dữ liệu và nhận kết quả trả về

Bài tập

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

− Hiển thị dữ liệu ra màn hình

Yêu cầu thiết kế:

Stt Đối tượng Yêu cầu

1 ScriptManager

2 UpdatePanel − Chứa các điều khiển phục vụ cho việc tìm kiếm

3 Panel 1 − Chứa thông tin học viên

4 Panel 2 − Chứa nhãn thông báo khi không tìm thấy

Yêu cầu xử lý:

Stt Đối tượng Yêu cầu

1 − Tạo class HOC_VIEN với các thông tin lưu trữ là Mahv, Hoten và Ngaysinh

− Dùng mảng hay List để lưu danh sách học viên trong bộ nhớ. Học viên có thể tự tạo danh sách tùy ý hoặc theo dữ liệu cung cấp sau:

MaHV HoTen NgaySinh HV001 Nguyễn Văn Bình 05/01/1987 HV002 Nguyễn Thị Cúc 13/05/1987 HV003 Trần Thu Hà 20/07/1988 HV004 Đinh Quốc Tuấn 22/03/1987

2 Nút

− Tìm trong mảng hay List, tìm theo Mã học viên

− Nếu tìm thấy thì thể hiện thông tin của học viên (hình 2). Ngược lại thì thông báo (hình 1)

11.4. Tạo trang Nhaxuatban.aspx

Mục tiêu:

− Dùng Ajax với UpdatePanel

Ý nghĩa:

− Xem các tính năng phân trang, sắp xếp, xóa, sửa trên lưới đều hoạt động theo cơ chế Ajax

Yêu cầu thiết kế:

Stt Đối tượng Yêu cầu

Bài tập

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

1 ScriptManager

2 UpdatePanel − Chứa điều khiển GirdView

3 GridView − Chứa danh sách Nhà xuất bản

4 ObjectDataSource hoặc SqlDataSource

− Chứa nguồn dữ liệu Nhà xuất bản

Yêu cầu xử lý:

Stt Đối tượng Yêu cầu

1 GridView − Thao tác Xóa, Sửa, Ghi và Không trực tiếp trên lưới

− Sắp xếp và phân trang

11.5. Tạo trang Capnhat_NXB.aspx

Mục tiêu:

− Dùng Ajax với UpdatePanel

− Sử dụng các thuộc tính UpdateMode và Trigger của UpdatePanel để cấu hình cho UpdatePanel, chỉ cập nhật vùng nó chứa khi thỏa điều kiện nào đó. (trong bài này, điều kiện cập nhật là khi biến cố Inserted của DetailsView xảy ra)

Ý nghĩa:

− Xem dữ liệu được thêm vào trên lưới, lưới họat động theo cơ chế Ajax

Yêu cầu thiết kế:

Stt Đối tượng Yêu cầu

1 ScriptManager

2 DetailsView − Dùng để cập nhật Nhà xuất bản.

− Mặc định là chế độ thêm mới (DefaultMode = Insert)

Bài tập

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

3 UpdatePanel − Chứa điều khiển GirdView

− Thuộc tính UpdateMode = Conditional

− Sự kiện cho thuộc tính Trigger là ItemInserted

4 GridView − Chứa danh sách Nhà xuất bản

5 ObjectDataSource hoặc SqlDataSource

− Chứa nguồn dữ liệu Nhà xuất bản

Yêu cầu xử lý:

Stt Đối tượng Yêu cầu

1 DetailsView − Nhập dữ liệu vào. Nhấn nút Insert thì GridView sẽ hiển thị thông tin Nhà xuất bản mới đựơc nhập (nhận xét không thấy Postback khi thêm)

Bài tập

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

MỤC LỤC BÀI 1: TỔNG QUAN VỀ ASP.NET ............................................................................................. 1 1.1. Tạo mới một project.................................................................................................... 1 1.2. Tạo trang Chao.aspx ................................................................................................... 1 BÀI 2: SERVER CONTROLS ..................................................................................................... 2 2.1. Tạo trang Hồ sơ đăng ký ............................................................................................. 2 2.2. Tạo trang Đọc báo ...................................................................................................... 3 2.3. Tạo trang Câu chào..................................................................................................... 3 2.4. Tạo trang Tìm quân cờ ................................................................................................ 4 2.5. Tạo trang Lịch để bàn ................................................................................................. 5 2.6. Tạo trang Upload và xem tập tin .................................................................................. 6 2.7. Tạo trang Sản phẩm kẹo ............................................................................................. 7 BÀI 3: ĐIỀU KHIỂN KIỂM TRA DỮ LIỆU................................................................................. 10 3.1. Tạo trang Thông tin đăng nhập ................................................................................. 10 BÀI 4: CÁC ĐIỀU KHIỂN DỮ LIỆU ......................................................................................... 12 4.1. Tạo thêm các thành phần trong project...................................................................... 12 4.2. Tạo trang Album các loài hoa..................................................................................... 13 4.3. Tạo trang Xem danh sách Sách theo chủ đề ............................................................... 13 4.4. Tạo trang Phiếu ý kiến người tiêu dùng ...................................................................... 14 4.5. Tạo trang Danh sách khách hàng............................................................................... 15 4.6. Tạo trang Danh sách Sách......................................................................................... 15 4.7. Tạo trang Danh sách khách hàng với cột tùy biến ....................................................... 16 4.8. Tạo trang Thông tin chi tiết sách................................................................................ 17 4.9. Tạo trang Tổng hợp - với cột tùy biến (bài làm thêm) ................................................. 18 4.10. Tạo trang Xem danh sách quảng cáo (bài làm thêm)................................................... 20 4.11. Tạo trang Cập nhật thông tin Nhà xuất bản ................................................................ 21 4.12. Tạo trang Giới thiệu sách........................................................................................... 22 4.13. Tạo trang Liệt kê chi tiết sách (bài làm thêm) ............................................................. 23 4.14. Tạo trang Cập nhật thông tin sách ............................................................................. 24 4.15. Tạo trang Liệt kê sách mới (bài làm thêm).................................................................. 24 4.16. Tạo trang Xem sách theo chủ đề (bài làm thêm)......................................................... 25 4.17. Tạo trang Xem thông tin khách hàng ......................................................................... 27 4.18. Tạo trang Xem và cập nhật thông tin nhà xuất bản..................................................... 27 4.19. Tạo trang Xem chi tiết sách được chọn....................................................................... 28 4.20. Tạo trang Xem thông tin khách hàng ......................................................................... 29 4.21. Tạo trang Cập nhật khách hàng (bài làm thêm) .......................................................... 30 BÀI 5: XÂY DỰNG CÁC USER CONTROLS............................................................................... 33 5.1. Tạo User Control đầu trang - TH_HEADER.................................................................. 34 5.2. Tạo User Control cuối trang - TH_FOOTER ................................................................. 34 5.3. Tạo User Control thực đơn - TH_THUCDON ................................................................ 34 5.4. Tạo User Control chủ đề sách - TH_CHUDE ................................................................ 34 5.5. Tạo User Control sách mới - TH_SACHMOI ................................................................. 35 5.6. Tạo User Control quảng cáo giữa trang - TH_QC_BODY .............................................. 35

Bài tập

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

5.7. Tạo User Control danh sách Sách - TH_DS_SACH ....................................................... 36 5.8. Tạo User Control thông tin giỏ hàng - TH_THONGTIN_GH........................................... 37 5.9. Tạo User Control quảng cáo bên phải trang - TH_QC_PHAI ......................................... 37 5.10. Tạo User Control sách bán chạy - TH_SACH_BANCHAY ............................................... 38 BÀI 6: QUẢN LÝ ỨNG DỤNG WEB ......................................................................................... 39 6.1. Các xử lý trong trang Default.aspx của bài 5............................................................... 39 6.2. Tạo trang Giỏ hàng ................................................................................................... 40 6.3. Các xử lý tiếp theo trong bài 6.1 ................................................................................ 41 BÀI 7: WEB SERVICES.......................................................................................................... 43 7.1. Tạo Web Services Ws_Chude..................................................................................... 43 BÀI 8: XÂY DỰNG HOÀN CHỈNH ỨNG DỤNG WEB.................................................................. 44 8.1. Tạo trang MasterPage.master có dạng sau: ................................................................ 44 8.2. Tạo trang Default02.aspx .......................................................................................... 44 8.3. Tạo trang Hệ thống bài tập HP4 - LT Web2 ................................................................ 45 8.4. Tạo trang Thay đổi định dạng.................................................................................... 48 BÀI 9: TRIỂN KHAI ỨNG DỤNG WEB..................................................................................... 50 9.1. Tạo ứng dụng web trên IIS: ...................................................................................... 50 9.2. Triển khai ứng dụng web:.......................................................................................... 50 BÀI 10: BẢO MẬT WEBSITE.................................................................................................. 51 10.1. Tạo User và Role: ..................................................................................................... 51 10.2. Tạo trang Login.aspx: ............................................................................................... 52 10.3. Tạo trang Default.aspx .............................................................................................. 52 10.4. Tạo trang ChangePass.aspx ....................................................................................... 53 10.5. Tạo trang Capnhat_Profile.aspx ................................................................................. 53 BÀI 11: GIỚI THIỆU VÀ SỬ DỤNG AJAX ................................................................................ 55 11.1. Tạo trang Pheptinh.aspx............................................................................................ 55 11.2. Tạo trang Monhoc.aspx ............................................................................................. 55 11.3. Tạo trang TimKiem_hocvien.aspx............................................................................... 56 11.4. Tạo trang Nhaxuatban.aspx ....................................................................................... 57 11.5. Tạo trang Capnhat_NXB.aspx .................................................................................... 58