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

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ê

Trang 1

227 Nguyễn Văn Cừ – Quận 5 – Tp Hồ Chí Minh

Tel: 8351056 – Fax 8324466 – Email: ttth@hcmuns.edu.vn

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

Trang 2

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ế

Trang 3

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

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)

Trang 4

2.2 Tạo trang Đọc báo

Ý nghĩa:

Trang web liệt kê đường Link đến các trang báo có nhiều người đọc

1 Nội dung trang web − Sử dụng điều khiển Label, Image và HyperLink

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

Trang 5

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

1 Nội dung trang web − Sử dụng điều khiển TextBox, LinkButton và Label

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

Trang 6

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

1 Nội dung trang web − Sử dụng điều khiển Table, Button và Label

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

Trang 7

Ý nghĩa:

Trang web thể hiện lịch bàn, cho phép thêm ngày ghi nhớ vào lịch

1 Nội dung trang web − Sử dụng điều khiển Calendar, TextBox, Label và Button

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

Trang 8

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

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

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

Trang 9

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

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

1 Trang web − Giao diện như hình 1

Trang 10

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

Trang 11

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ệ

Trang 12

Ý nghĩa:

Trang web dùng để khách hàng đăng ký hồ sơ

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

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

Trang 13

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:

Trang 14

4.2 Tạo trang Album các loài hoa

Ý nghĩa:

Trang web xem album các loài hoa

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

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

1 Nội dung trang web − Sử dụng điều khiển DropdownList và ListBox

Trang 15

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

1 Nội dung

trang web − Sử dụng điều khiển RadioButtonList, CheckBoxList, Button, Label và BulletedList

Trang 16

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

Trang web liệt kê danh sách khách hàng

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

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

Trang 17

Ý nghĩa:

Trang web liệt kê danh sách Sách, có sắp xếp và phân trang

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

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

Trang 18

Ý nghĩa:

Trang web liệt kê danh sách khách hàng, có các cột tùy biến

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ữ

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

Trang 19

Ý 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

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)

1 Trang web − Khi mở trang, xuất danh sách Sách ra lưới

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)

Trang 20

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

Trang 21

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

1 Trang web − Khi mở trang, xuất danh sách sách ra lưới

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

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 )

Trang 22

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

1 Nội dung trang web − Sử dụng điều khiển GridView (dùng CommandField)

Trang 23

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ó

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

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ự

Trang 24

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ó

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

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

Trang 25

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

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

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

Trang 26

Ý 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

1 Nội dung trang web − Sử dụng điều khiển DataList kết hợp với Image, Label, Button

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)

Trang 27

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

1 Nội dung trang web − Sử dụng điều khiển DataList, Label, Button và GridView

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)

Trang 28

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

1 Nội dung trang web − Sử dụng điều khiển DetailsView

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 2: Khi nhấn vào nút Sửa

Trang 29

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

1 Nội dung trang web − Sử dụng điều khiển DetailViews có CommandField

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

Trang 30

Ý nghĩa:

Trang web xem chi tiết sách được chọn từ Danh sách Sách (Dạng Master - Detail)

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

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

Trang 31

Ý nghĩa:

Trang web xem thông tin chi tiết về khách hàng

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

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)

Định dạng
Số trang	62
Dung lượng	2,84 MB