bài tập lập trình web với asp net

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: ttth@hcmuns.edu.vn 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 [...]... 4 – Lập trình Web 2 Trang 32/61 Bài tập BÀI 5: XÂY DỰNG CÁC USER CONTROLS Xây dựng trang Default.aspx có giao diện như sau: Học phần 4 – Lập trình Web 2 Trang 33/61 Bài tập 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, ... 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 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... thái ReadOnly 4.15 Tạo trang Liệt kê sách mới (bài làm thêm) Học phần 4 – Lập trình Web 2 Trang 24/61 Bài tập Ý 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 1 Đối tượng Trang web Yêu cầu − Khi mở trang, xuất thông tin sách.. .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,... 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ê... 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... 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... 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,... 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ý: Học phần 4 – Lập trình Web 2 Trang 21/61 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... Lưu ý: thiết kế bằng BulletedList và xử lý trong sự kiện ItemDataBound Học phần 4 – Lập trình Web 2 Trang 23/61 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 . 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. 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ó. 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