Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.

Net MVC 5

Lab 09:
XÂY DỰNG QUẢN LÝ SẢN PHẨM
CỦA WEBSITE BOOKS STORE
A. MỤC TIÊU:
 Tiếp tụ c phá t triển Website trên kết quả đã hoà n chỉnh củ a Lab08.
 Ứ ng layout Template cho cá c trang admin
 Xâ y dự ng trang Quả n lý sả n phẩ m.
B. NỘI DUNG:
1. Xây dựng trang Hiện thị sản phẩm
 Cậ p nhậ t AdminController:

 Tạ o View từ Action Sach() :

http://www.thayphet.net 1
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5
Code tự sinh củ a View : Sach.cshtml

Kết quả :

Ghi chú : Kiểm tra liên kết “Quả n lý sá ch” đả m bả o đã liên kết đến view nà y.
http://www.thayphet.net 2
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5
 Do số lượ ng cá c dò ng dữ liệu hiều nên ta tiến hà nh phâ n trang
 Cậ p nhậ t AdminController cho Action Sach() như sau:

 Cậ p nhậ t lạ i View: Sach.cshtml

http://www.thayphet.net 3
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5
Kết quả : Chỉ hiện thị 7 dò ng dữ liệu

 Tạ o menu ngang phâ n trang : Cậ p nhậ t Code cuố i view Sach.cshtml

Kết quả : Đã xuấ t hiện liên kết cá c trang, hãy Click để kiểm tra

http://www.thayphet.net 4
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5
 Cậ p nhậ t View: Sach.cshtml để hiển thị ả nh bìa, tên nhà xuấ t bả n và tên chủ
đề.

 Kết quả :

 Thuộ c tính mô tả nộ i dung quá dà i, do đó sẽ sử dụ ng mộ t Helper HTML tù y chỉnh

cho phép dễ dà ng cắ t nhữ ng thuộ c tính nà y vớ i độ dà i phù hợ p.
 Trong View Sach.cshtml cậ p nhậ t :

http://www.thayphet.net 5
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

 Kết quả : Nộ i dung mô tả đã đượ c cắ t lấ y 100 ký tự .:

http://www.thayphet.net 6
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5
2. Xây dựng trang Thêm mới sản phẩm:
 Cậ p nhậ t cá c liên kết, tiêu đề Table trên View Sach.cshtml

Kết quả :

http://www.thayphet.net 7
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5
 Cậ p nhậ t Action Themmoi() thự c hiện chứ c nă ng mở View Themoi.cshtml trong
AdminController

 Tạ o View ThemmoiSach.cshtml từ Action ThemmoiSach() này, View nà y đượ c

tạ o theo mẫ u Create(), và sữ dụ ng _LayoutAdmin:

 Code View ThemmoiSach.cshtml đượ c tự sinh ra:

http://www.thayphet.net 8
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5
Kết quả :

 Cậ p nhậ t Action themmoiSach() trong AdminController, để đưa dữ liệu và o

DropdownList:

 Cậ p nhậ t view ThemmoiSach.cshtml để hiện thị 2 DropdownList

Kết quả :
http://www.thayphet.net 9
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

 Cậ p nhậ t View ThemmoiSach(), điều chỉnh hiện thị Ngà y cậ p nhậ t:

Kết quả :

 Xâ y dự ng chứ c nă ng Upload hình ả nh:

http://www.thayphet.net 10
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

 Cậ p nhậ t View: Themsachmoi.cshtml.

Kết quả :

 Cậ p nhậ t code cho AdminController để lưu file hình ả nh và o thư mụ c

Hinhsanpham cua Website trên Server:

http://www.thayphet.net 11
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

Kết quả  :Chọ n 1 file inh ả nh (ví dụ Hoa Tulip)  Create

Kết quả  : Thư mụ c Hinhsanpham đã có Tulips.jpg

 Bổ sung Editor cho trườ ng mô tả :

 Tìm kiếm tinymce:

http://www.thayphet.net 12
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

 Download:

 Giả i nén file download và copy thư mụ c và o thư mụ c gố c củ a Website:

http://www.thayphet.net 13
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

 Bổ sung 2 dò ng mã sau và o vù ng thẻ head củ a _LayoutAdmin:

 Cậ p nhậ t TextArea cho trườ ng mô tả trong Themmoisach.cshtml:

 Kết quả :
http://www.thayphet.net 14
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

 Lưu dữ liệu xuố ng CSDL: Câ p nhậ t AdminController như sau:

Cậ p nhậ t View ThemmoiSach.cshtml

http://www.thayphet.net 15
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

Kết quả :

http://www.thayphet.net 16
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5
Sá ch đã lưu và o CSDL và hiện thị trên View:

3. Xây dựng trang Xem thông tin sản phẩm:

 Cậ p nhậ t liên kết “Chi tiết” trên view Sach.cshtml:

 Cậ p nhậ t AdminController: Bổ sung Action Chitietsach()

http://www.thayphet.net 17
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5
 Tạ o view (kiểu Details) từ Action Chititetsach.

 Xem code củ a View:

Xem kết quả thự c thi: Từ trang “Quả n lý thô ng tin sá ch” click và o liên kết “Sử a”

http://www.thayphet.net 18
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

 Điều chỉnh View để trình bà y hợ p lý hơn:

http://www.thayphet.net 19
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

Kết quả :

http://www.thayphet.net 20
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5
4. Xây dựng trang Xóa thông tin sản phẩm:
 Cậ p nhậ t liên kết “Chi tiết” trên view Sach.cshtml:

 Cậ p nhậ t AdminController: Bổ sung Action Xoa sach()

 Tạ o view (kiểu Details) từ Action Chititetsach.

 Xem code củ a View:

http://www.thayphet.net 21
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

Xem kết quả thự c thi: Từ trang “Quả n lý thô ng tin sá ch” click và o liên kết “Xó a”

http://www.thayphet.net 22
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5
 Điều chỉnh View để trình bà y hợ p lý hơn (Sao chép code từ View trang
Chitiet.cshtml) :

 Cậ p nhậ t code cho AdminController để xử a lý Xó a (Action : Xacnhanxoa())

http://www.thayphet.net 23
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5
Kết quả : Từ trang “Quả n lý thô ng tin sá ch” click và o liên kết “Xó a”

Nếu Sá ch đã có tồ n tạ i ở cá c bả ng quan hệ sẽ bá o lỗ i sau:

Nếu sá ch chưa có quan hệ vớ i cá c bả ng khá c sẽ xó a thà nh cô ng (hã y nhậ p 1 quyển

sá ch mớ i để kiểm tra)

http://www.thayphet.net 24
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5
5. Xây dựng trang Sửa thông tin sản phẩm:
 Cậ p nhậ t liên kết “Sử a” trên view Sach.cshtml:

 Cậ p nhậ t AdminController: Bổ sung Action Suasach()

 Tạ o view (kiểu Edit) từ Action Suasach.

 View Suasach.cshtml:

http://www.thayphet.net 25
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

Kết quả hiện thị: Từ trang “Quả n lý thô ng tin sá ch” click và o liên kết “Sử a”

http://www.thayphet.net 26
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

 Tham khả o View ThemmoiSach.cshtml để điều chỉnh View Suasach.cshtml:

o Cậ p nhậ t trườ ng Mã sá ch (là label vì khô ng cho điều chỉnh):

http://www.thayphet.net 27
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5
o Thay đổ i trườ ng mô tả thà nh trình Editor:

o Thay đổ i trườ ng ả nh bìa:

http://www.thayphet.net 28
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5
o Cậ p nhậ t trườ ng MaCD và MaNXB:
 Bổ sung code cho AdminController:

 Thay đổ i trườ ng MaCD, MaNXB trong View Suasach.cshtml:

 Kết quả :

http://www.thayphet.net 29
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

 Cậ p nhậ t Code trong AdminContrller :

--------------------Hết Lab 09---------------

http://www.thayphet.net 30