BÀI TẬP TUẦN 01-02-03-04 MÔN LẬP TRÌNH WEB NÂNG CAO

Chương 1, 2:
Mục tiêu:
 Hiểu được mô hình MVC
 Xây dựng được ứng dụng web triển khai bằng mô hình MVC
 Hiểu được Model, Controller, View
 Xây dựng được Model
 Hiểu và thực hiện cách truyền dữ liệu từ Controller sang View.
 Hiểu và xây dựng được View dùng ngôn ngữ Razor
 Hiểu được cách thiết kế Layout, sử dụng các biến Application, Session, Server, Cookies, …
 Xây dựng được trang web có kiểm tra hợp lệ dữ liệu sử dụng Attribute.
Yêu cầu:
 Tất cả các bài tập lưu trong thư mục: T:\MaSV_HoTen\Tuan01\
 Tạo Solution Tuan01 trong thư mục T:\MaSV_HoTen\Tuan01\ trong Visual Studio
2010/2012/2013. Mỗi bài tập là một Project riêng biệt.
 Cuối mỗi buổi thực hành, SV phải nén (.rar hoặc .zip) thư mục làm bài và nộp lại bài tập đã thực
hiện trong buổi đó.
 Bài tập bắt buộc của Tuần 01, GV sẽ công bố cuối giờ. Bài tập bắt buộc sẽ gửi vào email
dtthuha79@gmail.com với Subject và tập tin nén kèm theo:
DHKTPM9A_LTWebNC_TUANYY_HOTENSINHVIEN (trong đó YY sẽ là 01)
Hướng dẫn ban đầu:
Khởi động Visual Studio và tạo mới project: File -> New -> Project

1- MVC5
Sau khi nhập các thông tin, chọn nút OK, sẽ mở cửa sổ sau:

Cửa sổ New ASP.NET Project chọn MVC và nhấn nút OK, bạn sẽ thấy giao diện cửa sổ ứng dụng
ASP.Net MVC như sau:

1- MVC5
Chạy thử ứng dụng nhấn phím F5

Hoặc trên project bạn muốn chạy thử View nào, chỉ cần nhấp chuột phải vào View, chọn View in
Browser như hình sau:

1- MVC5
Bài 1: Tạo 1 giao diện web cho phép người dùng nhập vào 2 số, sau đó thực hiện chọn 1 phép tính.
Khi người dùng nhấn nút Caculate thì phép tính sẽ được thực hiện và hiển thị kết quả phía bên dưới
của nút Calculate

Hướng dẫn:
Cách 1: truyền tham số từ View sang Controller bằng Action arguments:
 Tạo CalculatorProject theo hướng dẫn như phần đầu
 Tạo Controller CalculatorController như sau:
o Nhấp phải thư mục Controller -> Add -> Controller đặt tên CalculatorController (chú
ý: nên giữ lại đúng hậu tố là Controller)

1- MVC5
o Code cho Controller: (Action Index là Action mặc định dùng để hiển thị View khi mới
mở):

o Action Index có định nghĩa Attribute [HttpPost]: định nghĩa phương thức cho View
Index khi người dùng dùng phương thức Post gửi về Controller xử lý:

1- MVC5
 Xây dựng View:
o Nhấp phải chuột trên Action Index chọn Add View hiển thị cửa sổ sau:

o View name: Tên View mặc định là Index tương ứng Action Index
o Template: Empty (without model)
o Code View Index:

o Chú ý đặt tên các phần tử trên form theo đúng tên của tham số của Action Index trong
Controller.

1- MVC5
Cách 2: truyền từ View sang Controller bằng Model
 Tạo CalculatorProject theo hướng dẫn như phần đầu
 Xây dựng Model:
- Nhấp phải chuột trên thư mục Model -> chọn Add -> Class, tạo Class Calculation như sau:

 Tạo Controller:
- Nhấp phải thư mục Controller -> Add -> Controller đặt tên CalculatorController (chú ý:
nên giữ lại đúng hậu tố là Controller)

1- MVC5
- Code cho Controller: (Action Index là Action mặc định dùng để hiển thị View khi mới
mở):

- Action Index có định nghĩa Attribute [HttpPost]: định nghĩa phương thức cho View Index
khi người dùng dùng phương thức Post gửi về Controller xử lý:

1- MVC5
 Xây dựng View:
- Nhấp phải chuột trên Action Index chọn Add View hiển thị cửa sổ sau:

- View name: Tên View mặc định là Index tương ứng Action Index
- Template: Empty
- Model Calss: chọn Calculation (CalculatorProject.Models)
- Code View Index (dùng Razor sinh mã theo model):

1- MVC5
Cách 3: truyền tham số từ View sang Controller bằng FormCollection (SV tự làm):
Cách 4: truyền tham số từ View sang Controller bằng Request (SV tự làm):
Bài 2:
Mục tiêu:
- Thực hành phần HTML Helpers
- Truyền dữ liệu từ View qua Controller sử dụng Model
- Code Razor
Tạo trang Web khi chạy trang Index hiển thị liên kết Đăng ký, cho phép người sử dụng chuyển sang
trang Rspv chứa form cho phép nhập thông tin Đăng ký tham dự party. Khi người sử dụng nhập thông
tin đầy đủ và chọn Submit RSPV thì chuyển sang trang Thanks với thông tin tương ứng được chọn.
Index.cshtml PsvpForm.cshtml

1- MVC5
Thanks.cshtml [Yes] Thanks.cshtml [No]

Cách thực hiện:

Bước 1: Tạo project với tên prjParty
Bước 2: Tạo Model với các thông tin như trên trang RspvForm
Model chứa 4 thuộc tính [Name (String), Email (String), Phone (String), WillAttend (bool)]
(Sinh viên tự tạo)
Bước 3: Tạo Controller với 3 ActionResult tương ứng với 3 View
- Index
- RspvForm
- Thanks

1- MVC5
Trong đó GuestResponse là Model được tạo ở bước 2.
Lưu ý: Controller chứa 2 ActionResult RspvForm() [overload]
1 ActionResult truyền không tham số [HttpGet]
1 ActionResult truyền có tham số [HttpPost]
Bước 4: Từ các ActionResult trong Controller tạo các View tương ứng:
View Index:
Tạo View như đã thực hiện, trong view chứa liên kết sử dụng ActionLink trong Html Helpers như sau:

View RspvForm:
Tạo View như đã thực hiện, trong view chứa Form với 4 thành phần: 3 textbox và 1 dropdownlist.
Trong View sử dụng Model truyền dữ liệu từ Controller vì thế khi tạo View lưu ý

1- MVC5
Bắt đầu trong View chứa Form cần sử dụng BeginForm trong HTML Helper

Html Helper có các thành phần cho phép nhập thông tin dạng text là:

-
- (Strongly type)
-
- (Strongly type)
Dropdownlist trong Html Helper thực hiện như sau:

1- MVC5
View Thanks:
(SV Tự tạo)
Bài 2 (tt)
Mục tiêu:
- Thực hành phần HTML Helpers
- Truyền dữ liệu từ View qua Controller sử dụng Model
- Code Razor
- Session
Tiếp theo bài 2 ở trên thực hiện form Đăng nhập, nếu đăng nhập thành công thì mới vào trang Thông
tin. Tại trang Thông tin chứa 2 liên kết cho phép user Logout (Quay về trang Index) hay Đăng ký

Trên trang Đăng ký từ bài 2 (RspvForm) lúc này cần hiển thị thêm thông tin của thành viên vừa đăng
nhập.

1- MVC5
Cách thực hiện:
Bước 1: Tiếp tục với bài 2 ở trên
Bước 2: Tạo thêm model mô tả thông tin đăng nhập của người dùng

Bước 3: Tạo Controller xử lý việc đăng nhập

Bước 4: trong UserController thực hiện các Action Index, Dangnhap, Logout,
1- MVC5
Chú ý: Trong UserController cần khai báo Model User trên namespace

Lưu Session
[“thanhvien”]
khi đăng nhập
thành công

Xóa Session
[“thanhvien”]
khi user chọn
Logout

Bước 5: Thực hiện tạo các View tương ứng Index, Dangnhap, Logout, Thongtin trong đó:
- View Đăng nhập không tạo do Form Đăng nhập hiển thị trên trang Index
- View Logout không tạo vì Logout về Index
Tạo View Index chứa form cho Action vào Đăng nhập

1- MVC5
 User : Tên Controller

Dangnhap:Tên ActionResult

Tạo bất kỳ View nào cần hiển thị thông tin đăng nhập thực hiện như sau:
- Đọc thông tin Session

- Hiển thị thông tin

(SV tự làm cho view còn lại)

Bài 3: Tạo 1 trang web cho phép nhập thông tin Nhân viên bao gồm: mã nhân viên, tên nhân viên,
ngày sinh, lương cơ bản, hình ảnh. Khi người dùng nhấn nút Save, ứng dụng cho phép lưu thông tin
nhân viên vừa nhập vào file text và lưu ở Sever (save cả hình về server), nếu người dùng nhấn nút
Open, ứng dụng cho phép mở thông tin của nhân vừa nhập ở server hiển thị lại client web.

1- MVC5
 Id: không được rỗng
và chứa 6 con số.
Name: Không rỗng,
phải là ký tự
Salary: từ 1.000000
đến 15.000000
File hình: Không
được rỗng

Hướng dẫn:
 Xây dựng Model: Nhấp phải vào thư mục Model, chọn Add -> Class: đặt tên Staff với khai báo
các thuộc tính cho Staff như sau:

1- MVC5
 Xây dựng Controller:
 Tạo StaffController có các Action: Index (hiển thị khi View mới mở), Save (khi người
dùng nhấn nút Save trên web) , Open (khi người dùng nhấn nút Open trên web) như sau:

1- MVC5
 Tạo view Index từ Controller:

1- MVC5
Bài 3: Tạo 1 trang web cho phép đăng nhập vào email của mình và gửi mail đến 1 địa chỉ khác
(dùng mail yahoo hoặc gmail). Thông tin gửi mail bao gồm: địa chỉ mail người gửi, mật khẩu người
gửi, địa chỉ mail cần gửi đến, Tiêu đề, nội dung gửi.

1- MVC5
Hướng dẫn:
 Xây dựng Model: MailInfo (From, Password, To, Subject, Body)

1- MVC5
 Tạo Controller:

 Tạo View:

1- MVC5
Bài 4: Tạo 1 trang web cho phép upload 1 file ảnh, 1 file tài liệu về server ( chú ý: thực hiện kiểm
tra có phải file ảnh hay không để thông báo cho người dùng biết). Sau khi lưu về server, thực hiện
hiển thị kết quả lại trang Result cho người dùng thấy kết quả đã thực hiện thành công.

Trang kết quả:

1- MVC5
Bài 5:
Thực hiện trang web kết hợp gửi mail và attach file (cho phép chọn nhiều file):

1- MVC5
 Bài 6:
Thực hiện trang web hiển thị album các loài hoa như sau:

Yêu cầu:
- DropdownList: hiển thị danh sách tên các loài hoa, lưu các đường dẫn đến hình ảnh tương
ứng
- Khi người dùng chọn 1 tên hoa trong danh sách, sẽ hiển thị thông tin hình ảnh vào khung
hình kế bên.
Bài 7:
Thực hiện trang web lấy ý kiến người tiêu dùng như sau:
Hình 1

1- MVC5
Hình 2:

- Khi người dùng chọn 1 loại sản phẩm trên radiobutton, label bên dưới hiển thị dòng thông
báo và các tiêu chí bình chọn hiển thị như hình 1
- Khi người dùng click vào nút xem kết quả bình chọn thì bên dưới hiển thị dòng thông báo
như hình 2.
Bài 8:
Thực hiện trang web hiển thị thông tin đặt hàng như sau:

Yêu cầu:
1- MVC5
 - Khi trang load: Dropdownlist hiển thị danh sách các loại bánh
- Khi người dùng chọn 1 loại bánh, nhập số lượng, nhấn nút > sẽ chuyển thông tin loại bánh
sang danh sách kế bên
- Khi người dùng nhấn chọn In đơn đặt hàng trang web sẽ chuyển sang trang có nội dung
xác nhận các thông tin vừa đặt như sau:

-
Bài 9: Thực hiện 1 website cho phép quản lý thông tin Sinh viên như sau:
Trang Index: hiển thị danh sách sinh viên như hình (Danh sách sinh viên được khởi tạo ngẫu nhiên
và được lưu qua các trang web thông qua biến Session).

1- MVC5
Trên trang Index:
- Người dùng nhấn nút Create New: website sẽ chuyển hướng sang trang Create (xem hình).
Trang này cho phép người dùng nhập thông tin Sinh viên bao gồm: StudentId,
StudentName, BirthOfDate, Address, Picture và lưu thêm thông tin 1 sinh viên vào danh
sách.
- Nếu người dùng nhấn nút Edit trên 1 dòng thông tin sinh viên: website sẽ chuyển hướng
sang trang Edit cho phép sửa thông tin sinh viên này và cập nhật lại danh sách lưu trữ.
- Khi người dùng nhấn nút Delete: website sẽ chuyển hướng sang trang Delete, trang này
thực hiện hỏi người dùng có chắc chắn xóa hay không? Nếu Xóa nhấn Delete, không xóa
nhấn nút Back To Index.
- Khi người dùng nhấn nút Details: website sẽ chuyển hướng sang trang Details cho phép
hiển thị chi tiết sinh viên trên trang này.
1- MVC5
1- MVC5
Hướng dẫn:
 Model:

1- MVC5
 Controller:

1- MVC5
1- MVC5
1- MVC5
 View:
 Index

1- MVC5
 Create

1- MVC5
1- MVC5
 Edit

 Delete

1- MVC5
 Details

1- MVC5
1- MVC5
Bài 10: Tạo web Project dùng để quản lý sản phẩm có các chức năng như sau:
- Cho phép người dùng xem danh sách sản phẩm như hình
- Khi người dùng nhấn vào 1 sản phẩm sẽ hiển thị trang chi tiết sản phẩm như hình
- Website còn có các trang cho phép Thêm 1 sản phẩm mới, Xóa, Sửa thông tin 1 sản phẩm
(Sinh viên tự làm).

1- MVC5
Bài 11: Layout
Thiết kế Layout cho website quản lý bài viết như sau:

1- MVC5
 Nội dung thay đổi

Thực hiện tạo trang chủ của website hiển thị danh sách bài viết (lưu bằng biến Session) và trang này sử
dụng layout vừa tạo có giao diện như sau:

1- MVC5
Khi người dùng nhấn chọn nút xem chi tiết của 1 bài viết, thì thông tin chi tiết của bài viết sẽ hiển thị
trong trang Xem chi tiết như sau:

1- MVC5
Bài 12: Thực hiện lại layout bài tập 8 với yêu cầu như sau:
- Tạo LoginPartialView với giao diện giống như phần Login trong layout trên
- Tạo CategoryPartialView với giao diện giống như phần các loại bài viết
- Tạo lại layout của bài 8, thực hiện load các PatialView vào đúng vị trí bố trí như trong
layout.
Bài 13: Tạo 1 layout đơn giản cho website quản lý thông tin sinh viên, kết hợp layout với bài tập 6 vừa
thực hiện.

1- MVC5
Phần kiêm tra hợp lệ dữ liệu:
Bài 14:Thực hiện kiểm tra các thông tin đăng ký của form sau:

Ngoài yêu cầu các thông tin nhập là bắt buộc như trên, các bạn hãy kiểm tra thêm:
- Tên đăng nhập ít nhất là 6 ký tự
- Mật khẩu ít nhất là 6 tự và có ít nhất 1 ký tự số, chữ
- Nhập lại mật khẩu phải giống mật khẩu phía trên
- Thư điện tử phải đúng định dạng
- File hình upload phải đúng loại hình .jgp, .png, .gif
- Captcha: được sinh tự động như hình
Khi người dùng nhập đầy đủ và đúng thông tin yêu cầu, website sẽ thông báo là người dùng đã đăng ký
thành công, ngược lại thông báo lỗi hợp lý.
1- MVC5
Bài 15: Thực hiện form đăng ký với các thông tin như giao diện sau:

Với các yêu cầu:

- Email đăng ký phải hợp lệ
- Email comfirm: phải giống email đã nhập
- Tuổi phải từ 16 ->65
- Mức lương phải là số và >0
- Mã tín dụng phải có 12 ký tự số
- URL Website phải bắt đầu bằng: http, https, hoặc ftp
- Tên tập tin hình ảnh phải đúng loại
- Description nhiều nhất là 255 ký tự
Khi người dùng nhập đầy đủ và đúng thông tin yêu cầu, website sẽ thông báo là người dùng đã đăng ký
thành công, ngược lại thông báo lỗi hợp lý.

1- MVC5
Bài 16:
Thực hiện trang web đăng ký facebook như hình dưới:

Với các yêu cầu như sau:

- Tất cả các thông tin là bắt buộc nhập
- Họ và tên đều bắt đầu bằng ký tự chữ hoa
- Email phải đúng định dạng
- Nhập lại email phải trùng khớp với email đã nhập
- Mật khẩu phải có ký tự chữ, số và ít nhất là 6 ký tự
- Năm sinh phải <2002
Khi người dùng nhập đầy đủ và đúng thông tin yêu cầu, website sẽ thông báo là người dùng đã đăng ký
thành công, ngược lại thông báo lỗi hợp lý.
Bài 17: Thực hiện trang web đăng ký phòng tham gia hội nghị như hình dưới:

1- MVC5
Với các yêu cầu như hình sau:

1- MVC5