Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 34/40
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(hình 2) ọn, xuất hiện view thứ hai - xem danh sách tập tin được upload 2.7. Tạo trang Sản phẩm kẹo
Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 35/40
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
Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 36/40 (adsbygoogle = window.adsbygoogle || []).push({});
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
Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 37/40
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ế
Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 38/40
Ý 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 −−SCác ử dđụing ều khiđiều khiển kiểển TextBox, DropDownList, CheckBox, Button và Label m tra dữ liệu (Validation Control)
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: phải cĩ kiểu là Date −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)
Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 39/40
MỤC LỤC
BÀI 1: SỬ DỤNG CÁC MƠI TRƯỜNG... 1
1.1. Hướng dẫn học viên làm quen với các mơi trường cài đặt ngơn ngữ HTML và JavaScript: 1 BÀI 2: NGƠN NGỮ HTML... 2
2.1. Trang Các tag cơ bản... 2
2.2. Trang Các tag cơ bản – định dạng (bài làm thêm)... 3
2.3. Trang Định dạng trang web... 4
2.4. Trang Định dạng văn bản... 5 (adsbygoogle = window.adsbygoogle || []).push({});
2.5. Trang Định dạng văn bản (Bài làm thêm)... 5
2.6. Trang Ký tự đặc biệt, chèn hình ảnh, tạo danh sách và liên kết... 6
2.7. Trang Tạo bảng... 6
2.8. Trang Tạo bảng, trộn dịng và cột (bài làm thêm)... 7
2.9. Trang Tạo form và các điều khiển trên form... 8
BÀI 3: NGƠN NGỮ LẬP TRÌNH JAVASCRIPT...10
3.1. Trang Câu chào...10
3.2. Trang Thay đổi câu chào...10
3.3. Trang Xếp lọai cuối năm học...11
3.4. Trang Tính tiền thưởng cuối năm...12
3.5. Trang In bảng cửu chương...13
3.6. Trang In bảng cửu chương...14
3.7. Phần mở rộng...14
BÀI 4: CÁC ĐỐI TƯỢNG TRONG JAVASCRIPT...15
4.1. Trang Đảo chuỗi...15
4.2. Trang Phân tích chuỗi...15
4.3. Trang Tìm và thay thế (Bài làm thêm)...16
4.4. Trang In Ngày sinh...17
4.5. Trang Tìm Ngày của mẹ (bài làm thêm)...18
4.6. Trang Tính cạnh huyền...19
4.7. Trang Tạo chữ và hình ảnh di chuyển...20
4.8. Trang Tạo chuyển động tên cơng ty...21
4.9. (bài làm thêm) Bổ sung vào tập tin Thu_vien.js các hàm dùng chung như sau:...22
4.10. Trang Tính tiền theo thực đơn...22
BÀI 5: CSS VÀ DHTML...25
5.1. Trang Bài viết về Mũi né...25
5.2. Trang Ẩm thực Nam Bộ (bài làm thêm)...26
BÀI 1: TỔNG QUAN VỀ ASP.NET...28
1.1. Tạo mới một project...28
Lập trình Web với HTML&JavaScript và ASP.Net cơ bản Trang 40/40 (adsbygoogle = window.adsbygoogle || []).push({});
BÀI 2: SERVER CONTROLS... 29
2.1. Tạo trang Hồ sơ đăng ký... 29
2.2. Tạo trang Đọc báo... 30
2.3. Tạo trang Câu chào... 30
2.4. Tạo trang Tìm quân cờ... 31
2.5. Tạo trang Lịch để bàn... 32
2.6. Tạo trang Upload và xem tập tin... 33
2.7. Tạo trang Sản phẩm kẹo... 34
BÀI 3: ĐIỀU KHIỂN KIỂM TRA DỮ LIỆU... 37