Tài liệu Bài tập lập trình web với asp.net ( www.sites.google.com/site/thuvientailieuvip )

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] 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 Maõ taøi lieäu: DT_NCM_LT_BT_LTW2 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ế Học phần 4 – Lập trình Web 2 Trang 1/61 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) Học phần 4 – Lập trình Web 2 Trang 2/61 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 Học phần 4 – Lập trình Web 2 Trang 3/61 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ọc phần 4 – Lập trình Web 2 Hình 2: Khi rê chuột đến dòng 5 cột 4 Trang 4/61 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 Học phần 4 – Lập trình Web 2 Trang 5/61 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 . ƒ 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 Học phần 4 – Lập trình Web 2 Trang 6/61 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 Học phần 4 – Lập trình Web 2 Trang 7/61 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 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 Học phần 4 – Lập trình Web 2 Ghi chú Dùng ViewState − 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 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 Học phần 4 – Lập trình Web 2 Trang 9/61 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ệ Học phần 4 – Lập trình Web 2 Trang 10/61 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) Học phần 4 – Lập trình Web 2 Trang 11/61 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: Học phần 4 – Lập trình Web 2 Trang 12/61 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 Học phần 4 – Lập trình Web 2 Yêu cầu − Sử dụng điều khiển DropdownList và ListBox Trang 13/61 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 Học phần 4 – Lập trình Web 2 Trang 14/61 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 Học phần 4 – Lập trình Web 2 Trang 15/61 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 Học phần 4 – Lập trình Web 2 Trang 16/61 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 Học phần 4 – Lập trình Web 2 Trang 17/61 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 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 Ghi chú 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) Học phần 4 – Lập trình Web 2 Trang 18/61 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 đó. Học phần 4 – Lập trình Web 2 Trang 19/61