XÂY DỰNG WEBSITE BÁN HÀNG SỬ DỤNG ASP.NET MVC 5

- Tìm hiểu công nghệ ASP.NET MVC5 - Xây dựng một trang web sử dụng công nghệ ASP.NET MVC5 giao diện Bootstrap.. ii TÓM TẮT BẰNG TIẾNG VIỆT Ngày nay, công nghệ web trên nền .NET Framewor

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH

KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

Tp Hồ Chí Minh, tháng 1 năm 2015

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH

KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

Tp Hồ Chí Minh, tháng 1 năm 2015

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

Giảng viên hướng dẫn: NGUYỄN MINH ĐẠO ĐT: 0903982082

Ngày nhận đề tài: 22/9/2014 Ngày nộp đề tài: 10/1/2014

1 Tên đề tài: XÂY DỰNG WEBSITE BÁN HÀNG SỬ DỤNG ASP.NET MVC5

2 Các số liệu, tài liệu ban đầu:

3 Nội dung đề tài thực hiện:

- Tìm hiểu mô hình bán lẻ B2C trong thương mại điện tử

- Xây dựng cơ sở dữ liệu trên Microsoft SQL Server 2012

- Tìm hiểu công nghệ ASP.NET MVC5

- Xây dựng một trang web sử dụng công nghệ ASP.NET MVC5 giao diện Bootstrap

- Upload website lên internet

4 Sản phẩm: Website bán laptop

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh Phúc

*******

BẢNG NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên: NGUYỄN HUỲNH MINH LUÂN MSSV: 10110066

PHẠM THANH PHONG MSSV: 10110084

Ngành: Công nghệ thông tin

Tên đề tài: XÂY DỰNG WEBSITE BÁN HÀNG SỬ DỤNG ASP.NET MVC5

Họ và tên giáo viên hướng dẫn: NGUYỄN MINH ĐẠO

NHẬN XÉT 1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm:……….(Bằng chữ: )

Tp Hồ Chí Minh, ngày tháng năm 2015

Giáo viên hướng dẫn

(Ký & ghi rõ họ tên)

Nguyễn Minh Đạo

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh Phúc

*******

BẢNG NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên: NGUYỄN HUỲNH MINH LUÂN MSSV: 10110066

PHẠM THANH PHONG MSSV: 10110084

Ngành: Công nghệ thông tin

Tên đề tài: XÂY DỰNG WEBSITE BÁN HÀNG SỬ DỤNG ASP.NET MVC5

Họ và tên giáo viên phản biện: NGUYỄN THANH PHƯỚC

NHẬN XÉT 1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm:……….(Bằng chữ: )

Tp Hồ Chí Minh, ngày tháng năm 2015

Giáo viên phản biện

(Ký & ghi rõ họ tên)

Nguyễn Thanh Phước

i

LỜI CẢM ƠN

Chúng em xin chân thành cảm ơn Quý Thầy Cô Khoa Chất Lượng Cao Trường Đại Học Sư Phạm Kỹ Thuật Tp.HCM đã tạo điều kiện cho em thực hiện đề tài này

Em xin chân thành cảm ơn Thầy Nguyễn Minh Đạo đã tận tình hướng dẫn, chỉ bảo

em trong suốt quá trình thực hiện khóa luận tốt nghiệp này

Chân thành cảm ơn Quý Thầy Cô Khoa Công Nghệ Thông Tin, trường Đại Học Sư Phạm Kỹ thuật TP Hồ Chí Minh, về những bài giảng trong suốt khóa học, về những kiến thức nền tảng cũng như những kiến thức về chuyên ngành đã giúp cho em hoàn thành tốt đề tài

Xin chân thành cám ơn các anh chị và bạn bè đã ủng hộ, giúp đỡ và động viên em trong thời gian học tập và nghiên cứu

Trong phạm vi khả năng cho phép, em đã rất cố gắng để hoàn thành đề tài một cách tốt nhất Song, chắc chắn sẽ không tránh khỏi những thiếu sót Em kýnh mong nhận được sự cảm thông và những ý kiến đóng góp của Quý Thầy Cô và các bạn

Nhóm sinh viên thực hiện: Nguyễn Huỳnh Minh Luân

Phạm Thanh Phong

ii

TÓM TẮT BẰNG TIẾNG VIỆT

Ngày nay, công nghệ web trên nền NET Framework của Microsoft ngày càng phát triển mạnh mẽ, cùng với các công nghệ khác như: PHP, JSP, Trong đó công nghệ ASP.NET MVC là một công nghệ mang nhiều tính năng ưu việt Bên cạnh đó, việc bán hàng qua mạng thông qua những website trực tuyến đã không còn quá xa lạ đối với người Việt và ngày càng phát huy thế mạnh của nó Những gian hàng online giúp tiết kiệm được rất nhiều thời gian cho những người bận rộn

Vì vậy nhóm chúng em đã chọn xây dựng website bán Laptop dựa trên nền tảng framework ASP.NET MVC5 và một số tính năng khác để hỗ trợ khách hàng trong việc đặt hàng qua mạng Internet

Các vấn đề mà nhóm em đã nghiên cứu được về framework ASP.NET MVC5, công nghệ AJAX, cấu trúc JSON, API service, dịch vụ SMS, Bootstrap Các hướng tiếp cận phát triển của chúng em là tìm kiếm thông tin qua Internet, xử lý thông tin dưới sự giúp

đỡ của Giáo viên hướng dẫn

Trong quá trình nghiên cứu chúng em đã gặp nhiều khó khăn và có một số phương pháp giải quyết vấn đề như: lên các forum tham khảo và hỏi ý kiến mọi người, xin ý kiến đóng góp của giáo viên hướng dẫn, trao đổi ý kiến với bạn cùng nhóm để tìm ra vấn đề giải quyết

Kết quả cuối cùng, chúng em đã xây dựng thành công website bán laptop đáp ứng đầy đủ các nhu cầu của khách hàng Website sử dụng giao diện Bootstrap, hỗ trợ người dùng sử dụng nhiều thiết bị với các kích thước màn hình khác nhau như máy desktop, laptop, tablet, smartphone

iii

TÓM TẮT BẰNG TIẾNG ANH

Today, technical web base on Microsoft’s NET Framework is strong growing up beside other technicals such as PHP, JSP, However, ASP.NET MVC technical have many good feature In addition ,the online sales website was not so strange with the Vietnamese The online stores help to save a lot of time for busy people

So, we decided to build a website sell Laptops base on ASP.NET MVC5 Framework and some other features to support customer order product via internet

Issues that we reseached are ASP.NET MVC5 Framework, technical AJAX, structor JSON, API Service, service SMS, Bootstrap Our approach to development are: find information via internet, processing information with the helping of supervisor

During our research, we had many trouble and had some method to solve the problem such as references to the forum and ask for people's opinions, ask opinions of supervisor, ask opinions team mate to solved the problem

Finally, we are build website sell laptop successfully, website satisfies customer’s requirement Website used Bootstrap interface, the maximum support from the users use desktop to the users who love smartphones or tablet screen with the compact size

iv

MỤC LỤC

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP 3

BẢNG NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 4

BẢNG NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN 5

LỜI CẢM ƠN i

TÓM TẮT BẰNG TIẾNG VIỆT ii

TÓM TẮT BẰNG TIẾNG ANH iii

MỤC LỤC iv

DANH SÁCH CÁC CHỮ VIẾT TẮT ix

DANH SÁCH CÁC BẢNG BIỂU x

DANH SÁCH CÁC HÌNH ẢNH, BIỂU ĐỒ xii

Chương 1 - TỔNG QUAN 1

1.1 Giới thiệu tổng quát 1

1.2 Mục đích của đồ án 1

1.3 Kết quả của phần mềm 1

Chương 2 CƠ SỞ LÝ THUYẾT 2

2.1 Công nghệ ASP.NET MVC5 2

2.1.1 Lịch sử ra đời của MVC 2

2.1.2 Sự khác nhau giữa MVC và webform 2

2.1.3 Kiến trúc sử dụng ASP.NET MVC 3

2.1.4 Đặc điểm ASP.NET MVC Framework 4

2.2 Mô hình MVC5 5

2.2.1 Các tính năng của mô hình MVC3 và MVC4 5

2.2.2 Các cải tiến của MVC5 6

2.3 Vài nét về thương mại điện tử B2C 8

2.3.1 Khái niệm 8

2.3.2 Phân loại mô hình B2C 8

v

2.3.3 Hoạt động của mô hình B2C 9

2.4 Giới thiệu về hệ thống SMS 9

Chương 3 - THIẾT KẾ GIAO DIỆN 10

3.1 Giao diện người dùng (FrontEnd) 10

3.1.1 Giao diện trang chủ 10

3.1.2 Giao diện tìm kiếm 11

3.1.3 Giao diện chi tiết sản phẩm 12

3.1.4 Giao diện danh sách yêu thích 13

3.1.5 Giao diện so sánh sản phẩm 13

3.1.6 Giao diện Shopping Cart 14

3.1.7 Giao diện thanh toán 15

3.1.8 Giao diện quản lý đơn hàng 16

3.1.9 Giao diện đăng ký 17

3.1.10 Giao diện đăng nhập 18

3.1.11 Giao diện lấy lại mật khẩu 18

3.1.12 Giao diện liên hệ 19

3.1.13 Giao diện bình luận 20

3.1.14 Giao diện chia sẻ qua Facebook 20

3.2 Giao diện quản trị website (admin) 21

3.2.1 Giao diện trang chủ 21

3.2.2 Giao diện quản lý sản phẩm 22

3.2.3 Giao diện quản lý chi tiết sản phẩm 24

3.2.4 Giao diện quản lý nhà cung cấp 26

3.2.5 Giao diện quản lý đặt hàng 27

3.2.6 Giao diện quản lý phí vận chuyển 28

3.2.7 Giao diện quản lý tài khoản 29

vi

3.2.8 Giao diện thống kê 30

3.3 Giao diện responsive 33

3.3.1 Giao diện trang chủ 33

3.3.2 Giao diện đăng ký responsive 35

3.3.3 Giao diện đăng nhập resonsive 35

3.3.4 Giao diện chi tiết sản phẩm 36

3.3.5 Giao diện so sánh sản phẩm responsive 37

3.3.6 Giao diện giỏ hàng responsive 38

3.3.7 Giao diện loại sản phẩm responsive 39

3.3.8 Giao diện thanh toán responsive 39

3.3.9 Giao diện trang chủ Admin responsive 40

3.3.10 Giao diện quản lý nhà cung cấp responsive 40

3.3.11 Giao diện thống kê theo nhà sản xuất responsive 41

3.3.12 Giao diện biểu đồ doanh thu theo nhà sản xuất 41

Chương 4 - THIẾT KẾ CHƯƠNG TRÌNH VÀ CƠ SỞ DỮ LIỆU 42

4.1 Sơ đồ use case 42

4.2 Mô tả use case 43

4.2.1 Use case đăng ký 43

4.2.2 Use case đăng nhập 43

4.2.3 Use case đăng xuất 44

4.2.4 Use case đổi mật khẩu 44

4.2.5 Use case lấy lại mật khẩu 45

4.2.6 Use case bình luận 45

4.2.7 Use case quản lý danh sách yêu thích 46

4.2.8 Use case xem chi tiết sản phẩm 46

4.2.9 Use case tìm kiếm theo tên 47

vii

4.2.10 Use case chia sẻ Facebook 47

4.2.11 Use case tìm kiếm nâng cao 48

4.2.12 Use case so sánh sản phẩm 48

4.2.13 Use case quản lý giỏ hàng 49

4.2.14 Use case thanh toán 49

4.2.15 Use case xem/xóa đặt hàng 50

4.2.16 Use case quản lý tài khoản 50

4.2.17 Use case quản lý sản phẩm 51

4.2.18 Use case quản lý chi tiết sản phẩm 52

4.2.19 Use case quản lý loại sản phẩm 53

4.2.20 Use case quản lý nhà sản xuất 54

4.2.21 Use case quản lý phí vận chuyển 55

4.2.22 Use case quản lý đơn hàng 56

4.2.23 Use case thống kê 56

4.2.24 Use case quản lý quyền hạn 57

4.3 Sơ đồ tuần tự (Sequence Diagram) 58

4.3.1 Sơ đồ tuần tự đăng ký 58

4.3.2 Sơ đồ tuần tự đăng nhập 58

4.3.3 Sơ đồ tuần tự thay đổi mật khẩu 59

4.3.4 Sơ đồ tuần tự lấy lại mật khẩu 59

4.3.5 Sơ đồ tuần tự tìm kiếm sản phẩm 60

4.3.6 Sơ đồ tuần tự quản lý danh sách yêu thích 60

4.3.7 Sơ đồ tuần tự so sánh sản phẩm 61

4.3.8 Sơ đồ tuần tự mua hàng 61

4.3.9 Sơ đồ tuần tự quản lý sản phẩm 62

4.4 Cơ sở dữ liệu 63

viii

4.4.1 Sơ đồ mối quan hệ giữa các thực thể 63

4.4.2 Cấu trúc bảng CSDL SQL Server 64

Chương 5 KẾT QUẢ SO SÁNH, THỰC NGHIỆM, PHÂN T CH, TỔNG H P 74

5.1 Kết quả đạt được 74

5.2 Thực nghiệm 75

Chương 6 KẾT LUẬN 75

6.1 Ưu và khuyết điểm 75

6.2 Hướng phát triển 75

TÀI LIỆU THAM KHẢO 1

Chương 7 PHỤ LỤC 2

7.1 Cài đặt ứng dụng 2

7.2 Cài đặt up host 5

7.3 Các tài khoản sử dụng trong đồ án 11

ix

DANH SÁCH CÁC CHỮ VIẾT TẮT

STT Các từ viết tắt Từ viết đầy đủ

x

DANH SÁCH CÁC BẢNG BIỂU

Bảng 2-1 Lịch sử các phiên bản MVC 2

Bảng 2-2 Sự khác nhau giữa MVC và Webform 3

Bảng 2-3Các loại security trong MVC5 7

Bảng 4-1Use case đăng ký 43

Bảng 4-2: Use case đăng nhập 43

Bảng 4-3 Use case đăng xuất 44

Bảng 4-4: Use case đổi mật khẩu 44

Bảng 4-5Use case quên mật khẩu 45

Bảng 4-6 Use case bình luận 45

Bảng 4-7: Use case quản lý danh sách yêu thích 46

Bảng 4-8: Use case xem chi tiết sản phẩm 46

Bảng 4-9: Use case tìm kiếm theo tên 47

Bảng 4-10 Use case chia sẻ Facebook 47

Bảng 4-11: Use case tìm kiếm nâng cao 48

Bảng 4-12: Use case so sánh sản phẩm 48

Bảng 4-13: Use case quản lý giỏ hàng 49

Bảng 4-14: Use case thanh toán 49

Bảng 4-15 Quản lý đặt hàng 50

Bảng 4-16: Use case quản lý tài khoản 50

Bảng 4-17: Use case quản lý sản phẩm 51

Bảng 4-18 Use case quản lý chi tiết sản phẩm 52

Bảng 4-19: Use case quản lý loại sản phẩm 53

Bảng 4-20: Use case quản lý nhà sản xuất 54

Bảng 4-21Use case quản lý phí vận chuyển 55

Bảng 4-22 Use case quản lý đơn hàng 56

Bảng 4-23 Use case thống kê 56

Bảng 4-23Use case quản lý quyền hạn 57

Bảng 4-24 Bảng LOAISP 64

Bảng 4-25 Bảng CTSP 65

Bảng 4-26 Bảng CTHD 66

Bảng 4-27 Bảng DATHANG 67

Bảng 4-28 Bảng SANPHAM 68

Bảng 4-29 Bảng WISHLIST 69

xi

Bảng 4-30 Bảng NHACUNGCAP 69

Bảng 4-31 Bảng SHIP 70

Bảng 4-32 Bảng AspNetRoles 70

Bảng 4-33 Bảng AspNetUser 72

Bảng 4-34 Bảng AspNetUserLogins 72

Bảng 4-35 Bảng AspNetUserRoles 73

Bảng 4-36 Bảng AspNetClaims 73

xii

DANH SÁCH CÁC HÌNH ẢNH, BIỂU ĐỒ

Hình 2-1 Mô hình MVC 3

Hình 2-2 SMS API 9

Hình 3-1 Màn hình trang chủ 10

Hình 3-2 Màn hình tìm kiếm 11

Hình 3-3 Menu tìm kiếm nâng cao 11

Hình 3-4 Màn hình chi tiết sản phẩm 12

Hình 3-5 Màn hình danh sách yêu thích 13

Hình 3-6 Giao diện những sản phẩm trong danh sách so sánh 13

Hình 3-7 Màn hình so sánh sản phẩm 14

Hình 3-8 Giao diện Shopping Cart trong màn hình chính 14

Hình 3-9 Màn hình Shopping Cart 15

Hình 3-10 Màn hình thanh toán 15

Hình 3-11 Màn hình quản lý đơn hàng 16

Hình 3-12 Màn hình chi tiết đơn hàng 16

Hình 3-13 Màn hình đăng ký tài khoản 17

Hình 3-14 Thông báo đăng ký thành công 17

Hình 3-15 Màn hình đăng nhập tài khoản 18

Hình 3-16 Màn hình quên mật khẩu 18

Hình 3-17 Màn hình thay đổi mật khẩu 19

Hình 3-18Màn hình liên hệ 19

Hình 3-19Màn hình bình luận 20

Hình 3-20 Màn hình chia sẻ qua Facebook 20

Hình 3-21Kết quả hiển thị chia sẻ trên Facebook 20

Hình 3-22Màn hình trang chính Admin 21

Hình 3-23 Màn hình danh sách sản phẩm 22

Hình 3-24 Màn hình thông tin sản phẩm 23

Hình 3-25 Màn hình sửa sản phẩm 23

Hình 3-26 Màn hình thêm sản phảm 24

Hình 3-27 Màn hình danh sách chi tiết sản phẩm 24

Hình 3-28 Màn hình thông tin chi tiết sản phẩm 25

Hình 3-29 Màn hình sửa chi tiết sản phẩm 25

Hình 3-30 Màn hình thêm chi tiết sản phẩm 26

Hình 3-31Màn hình quản lý nhà cung cấp 26

xiii

Hình 3-32 Màn hình danh sách đặt hàng 27

Hình 3-33 Màn hình thông tin đặt hàng 27

Hình 3-34 Màn hình sửa thông tin đặt hàng 28

Hình 3-35Màn hình quản lý phí vận chuyển 28

Hình 3-36 Màn hình danh sách tài khoản 29

Hình 3-37 Màn hình sửa thành viên 29

Hình 3-38Màn hình quyền hạn thành viên 30

Hình 3-39 Màn hình thống kê theo nhà sản xuất 30

Hình 3-40Biểu đồ doanh thu theo nhà sản xuất 31

Hình 3-41 Màn hình thống kê theo mặt hàng 31

Hình 3-42 Màn hình thống kê theo khách hàng 32

Hình 3-43 Màn hình thống kê danh thu theo tháng 32

Hình 3-44Biểu đồ doanh thu theo tháng 33

Hình 3-45 Giao diện trang chủ responsive (1) 33

Hình 3-46 Giao diện trang chủ responsive (2) 34

Hình 3-47 Giao diện trang chủ responsive (3) 34

Hình 3-48 Màn hình giao diện đăng ký responsive 35

Hình 3-49Màn hình giao diện đăng nhập resonsive 35

Hình 3-50Màn hình giao diện chi tiết sản phẩm(1) 36

Hình 3-51 Màn hình giao diện so sánh sản phẩm responsive (1) 36

Hình 3-52Màn hình giao diện so sánh sản phẩm responsive (1) 37

Hình 3-53Màn hình giao diện so sánh sản phẩm responsive (2) 37

Hình 3-54Giao diện giỏ hàng trên trang chủ responsive 38

Hình 3-55 Màn hình giao diện giỏ hàng responsive 38

Hình 3-56Màn hình giao diện loại sản phẩm responsive 39

Hình 3-57 Giao diện thanh toán responsive 39

Hình 3-58Giao diện trang chủ Admin responsive 40

Hình 3-59 Giao diện quản lý nhà cung cấp responsive 40

Hình 3-60 Giao diện thống kê theo nhà sản xuất responsive 41

Hình 3-61Màn hình giao diện biểu đồ doanh thu theo nhà sản xuất 41

Hình 4-1Sơ đồ use case 42

Hình 4-2Sơ đồ tuần tự của quá trình đăng ký 58

Hình 4-3 Sơ đồ tuần tự của quá trình Login 58

Hình 4-4 Sơ đồ tuần tự của quá trình thay đổi mật khẩu 59

xiv

Hình 4-5 Sơ đồ tuần tự của quá trình lấy lại mật khẩu 59

Hình 4-6 Sơ đồ tuần tự của quá trình tìm kiếm sản phẩn 60

Hình 4-7 Sơ đồ tuần tự của quá trình quản lý danh sách yêu thích 60

Hình 4-8 Sơ đồ tuần tự của quá trình so sánh sản phẩm 61

Hình 4-9 Sơ đồ tuần tự của quá trình mua hàng 61

Hình 4-10 Sơ đồ tuần tự của quá trình quản lý sản phẩm 62

Hình 4-11 Sơ đồ mối quan hệ giữa các thực thể 63

Hình 4-12 Bảng LOAISP 64

Hình 4-13 Bảng CTSP 64

Hình 4-14 Bảng CTHD 66

Hình 4-15 Bảng DATHANG 67

Hình 4-16 Bảng SANPHAM 68

Hình 4-17 Bảng WISHLIST 69

Hình 4-18 Bảng NHACUNGCAP 69

Hình 4-19Bảng SHIP 70

Hình 4-20 Bảng AspNetRoles 70

Hình 4-21 Bảng AspNetUser 71

Hình 4-22 Bảng AspNetUserLogins 72

Hình 4-23 Bảng AspNetUserRoles 73

Hình 4-24 Bảng AspNetClaims 73

1

Chương 1 - TỔNG QUAN

1.1 Giới thiệu tổng quát

- Ngày nay, công nghệ web trên nền NET Framework của Microsoft ngày càng phát triển mạnh mẽ, cùng với các công nghệ khác như: PHP, JSP, Trong đó công nghệ ASP.NET MVC là một công nghệ mang nhiều tính năng ưu việt Bên cạnh đó, với việc phát triển của Internet, các website bán hàng online trên thế giới ngày càng phổ biến, giúp người dùng tiết kiếm thời gian và tiền bạc trong việc mua sản phẩm Vì thế nhóm quyết định làm website bán laptop online

1.2 Mục đích của đồ án

- Muốn nghiên cứu, nắm vững: framework ASP.NET MVC5, giao diện Bootstrap

để xây dựng website thực tiễn đáp ứng nhu cầu khách hàng

- Xây dựng website bán Laptop online đáp ứng được đầy đủ các quy trình của bán hàng online

1.3 Kết quả của phần mềm

 Nhóm đã xây dựng được đầy đủ các chức năng chính của một website phục vụ cho:

- Đối với người dùng mua sản phẩm online:

 Đăng nhập

 Đăng ký

 Đổi mật khẩu

 Lấy lại mật khẩu

 Tìm kiếm theo tên sản phẩm

 Tìm kiếm nâng cao

 Xem chi tiết sản phẩm

 Bình luận, chia sẻ qua Facebook

- MVC được phát minh tại Xerox Parc vào những năm 70, bởi TrygveReenskaug MVC lần đầu tiên xuất hiện công khai là trong Smalltalk-80 Các giấy tờ quan trọng đầu tiên được công bố trên MVC là “A Cookbook for Using the Model-View-Controller User Interface Paradigm in Smalltalk – 80”, bởi Glenn Krasner

và Stephen Pope, xuất bản trong tháng 8 / tháng 9 năm 1988

- Thế hệ tiếp theo của MVC xuất hiện cùng với hệ điều hành NeXT và các phần mềm của nó

- Kiến trúc này ngày càng được phát triển và hoàn thiện nhằm giải quyết các vấn

đề phát sinh cũng như các giải pháp cho quá trình phát triển phần mềm

- Vì vậy sau đó, lần lượt các MVC framework ra đời dựa trên mô hình MVC như: CodeIgniter, Zend, ASP.NET MVC …

Thời gian phát hành Phiên bản

Mọi tương tác của người dùng với

Views sẽ được xử lý thông qua việc

thực hiện các action hành động trong

ASP.net WebForm sử dụng ViewState để quản lý Các trang ASP.net đều có lifecycle, postback và dùng các web controls, các event

để thực hiện các hành động cho UI (User Interface)

Bảng 2-2 Sự khác nhau giữa MVC và Webform

2.1.3 Kiến trúc sử dụng ASP.NET MVC

ASP.NET MVC đƣợc thiết kế một cách gọn nhẹ, giảm thiểu sự phức tạp của việc xây

dựng ứng dụng website bằng cách chia một ứng dụng thành 3 tầng (layer): Model,

View và Controller Sự chia nhỏ này giúp lập trình viên dễ dàng kiểm soát các thành

phần trong khi phát triển, cũng nhƣ lợi ích lâu dài trong việc kiểm tra, bảo trì và nâng cấp

View làm nhiệm vụ thể hiện một Model hay nhiều Model một cách trực quan, nó nhận

thông tin (một Model hoặc nhiều Model) sau đó biểu diễn lên trang website

c Controller

Controller nằm giữa tầng View và Model, làm nhiệm vụ tìm kiếm, xử lý một hoặc

nhiều Model, sau đó gửi Model tới View để View hiển thị

H nh 2-1 Mô hình MVC

4

2.1.4 Đặc điểm ASP.NET MVC Framework

 Tiếp tục hỗ trợ các tính năng trong ASP.NET

- Hỗ trợ sử dụng các các tập tin:.ASPX, ASCX, Master như là thành phần View

- Hỗ trợ đầy đủ các tính năng bảo mật của ASP.net: Form/ Windows authenticate, URL authorization, membership/roles, output và data caching, section/ profile state, configuration system, provider architecture

 Tách rõ ràng các mối liên quan, mở ra khả năng test TDD (Test Driven Developer)

- Có thể test unit trong ứng dụng mà không cần phải chạy Controllers cùng với tiến trình của ASP.NET và có thể dùng bất kỳ một unit testing framework nào như NUnit, MBUnit, MS Test,…

 Có khả năng mở rộng, mọi thứ trong MVC được thiết kế để dễ thay thế, dễ dàng tùy biến Ánh xạ URL mạnh mẽ, cho phép xây dựng ứng dụng với những URL sạch

 Không sử dụng mô hình post-back từ giao diện gửi đến server Thay vào đó, chủ động đưa những post-back từ View đến thẳng lớp Controller

 Hỗ trợ nhiều công cụ tạo View (Support for Multiple View Engines)

- Cho phép chọn công cụ tạo view Hộp thoại New Project cho phép xác định view engine mặc định cho một project

- Các loại view engine

o Web Forms (ASPX)

o Razor

o Hay một view engine nguồn mở như Spark, NHaml, NDjango

 Hỗ trợ định tuyến

- ASP.NET MVC Framework có một bộ máy ánh xạ URL thật sự mạnh mẽ

- Bộ máy này cung cấp phương pháp rất linh hoạt trong việc ánh xạ URLs sang các Controller Classes

- Bạn có thể dễ dàng định ra các quy luật, cài đặt đường đi, ASP.NET dựa vào các quy luật đường đi đó để xác định Controller và action cần phải thực thi

- ASP.NET còn có khả năng phân tích URL, chuyển các thông số trong URL thành các tham số trong lời gọi hàm của Controller

5

- Với sự hỗ trợ của Model Binding, bây giờ bạn chỉ cần tập trung vào việc cài đặt các nghiệp vụ logic, không cần phải bận tâm về việc suy nghĩ làm cách nào để ánh xạ dữ liệu từ người dùng sang các đối ượng NET

 Filters

- Là tính năng mạnh trong ASP.NET MVC Hỗ trợ cho việc kiểm tra tính hợp lệ trước khi một action method được gọi hoặc sau khi một action method thi hành

- Visual Studio bao gồm IntelliSense và mã cú pháp Razor được màu hóa

- Với Razor views có thể kiểm tra từng đơn vị mà không đòi hỏi bạn phải chạy các ứng dụng hoặc phải chạy website

2.2 Mô hình MVC5

2.2.1 Các tính năng của mô hình MVC3 và MVC4

2.2.1.1 MVC3

- So với phiên bản ASP.NET MVC2 thì MVC3 được hỗ trợ thêm HTML5 và CSS3

- Cải thiện về Model Validation – tính năng kiểm tra tính hợp lệ của dữ liệu do người dùng nhập vào

- Hỗ trợ 2 View Engine: RAZOR, ASPX, kể cả Open source trong khi ASP.NET MVC2 chỉ có ASPX

- Controller được cải tiến hơn như thuộc tính ViewBag và kiểu ActionResult

- Cải thiện Dependency Injection với IDpendencyResolver (có 2 phần: DependencyResolver và interface IDpendencyResolver) trong ASP.NET MVC3; đây là lớp thực thi mô hình Service Locator, cho phép framework gọi DIContainer khi cần làm việc với 1 lớp thực thi từ 1 kiểu cụ thể

- Cách tiếp cận với JavaScript được hạn chế

- Hỗ trợ caching trong Partial page

6

2.2.1.2 MVC4

- ASP.NET Web API ra đời, nhằm đơn giản hoá việc lập trình với HTML hiện đại

và đây là một cải tiến mới thay cho WCF Web API

- Mặc định của dự án được cải thiện hơn về hình thức bố trí, giúp dễ nhìn hơn

- Mẫu Empty Project là project trống, phù hợp cho những developer muốn nâng cao khả năng lập trình với ASP.NET MVC4

- Giới thiệu jQuery Mobile và mẫu Mobile Project cho dự án

- Hỗ trợ Asynchrnous Controller

- Kiểm soát Bundling và Minification thông qua web.config

- Hỗ trợ cho việc đăng nhập OAuth và OpenID bằng cách sử dụng thư viện DotNetOpenAuth Cho phép Logins từ Facebook và những tài khoản khác

- Phiên bản mới Windows Azure SDK 1.6 được phát hành

2.2.2 Các cải tiến của MVC5

- Với MVC5 thì cải tiến hơn so với ASP.NET MVC4, Bootstrap được thay thế mẫu MVC mặc định

- Chứng thực người dùng Authentication Filter được tuỳ chỉnh hoặc chứng thực từ hãng thứ 3 cung cấp

- Với Filter overrides, chúng ta có thể Filter override trên Method hoặc Controller

- Thuộc tính Routing được tích hợp vào MVC5

2.2.2.1 Bootstrap

 Bootstrap là một framework CSS được Twitter phát triển Nó là một tập hợp các bộ chọn, thuộc tính và giá trị có sẵn để giúp web designer tránh việc lặp đi lặp lại trong quá trình tạo ra các class CSS và những đoạn mã HTML giống nhau trong dự án web của mình Ngoài CSS ra, thì bootstrap còn hỗ trợ các function tiện ích được viết dựa trên JQuery(Carousel, Tooltip, Popovers , )

 Những lý do để sử dụng Bootstrap:

- Được viết bởi những người có óc thẩm mỹ và tài năng trên khắp thế giới Sự tương thích của trình duyệt với thiết bị đã được kiểm tra nhiều lần nên có thể tin

7

tưởng kết quả mình làm ra và nhiều khi không cần kiểm tra lại Vì vậy, giúp cho

dự án của bạn tiết kiệm được thời gian và tiền bạc

- Chỉ cần biết sơ qua HTML, CSS, Javascript, Jquery là bạn có thể sử dụng

Bootstrap để tạo nên một trang web sang trọng và đầy đủ Nhưng lại không cần code quá nhiều CSS

- Với giao diện mặc định là màu xám bạc sang trọng, hỗ trợ các component thông dụng mà các website hiện nay cần có Vì nó là opensource nên bạn có thể vào

mã nguồn của nó để thay đổi theo ý thích của bản thân

- Do có sử dụng Grid System nên Bootstrap mặc định hỗ trợ Responsive

Bootstrap được viết theo xu hướng Mobile First tức là ưu tiên giao diện trên Mobile trước Nên việc sử dụng Bootstrap cho website của bạn sẽ phù hợp với tất cả kých thước màn hình Nhờ đó mà chúng ta không cần xây dựng thêm một trang web riêng biệt cho mobile

- Đội ngũ phát triển Bootstrap đã bổ sung thêm tính năng Customizer Giúp cho designer có thể lựa chọn những thuộc tính, component phù hợp với project của

họ Chức năng này giúp ta không cần phải tải toàn bộ mã nguồn về máy

2.2.2.2 Authentication Filter

- Một trong những vấn đề bảo mật cơ bản nhất là đảm bảo những người dùng hợp

lệ truy cập vào hệ thống ASP.NET đưa ra 2 khái niệm: Authentication và Authorize

- Authentication là xác thực người dùng, trong MVC5 Authentication Filter được tuỳ chỉnh hoặc chứng thực từ hãng thứ 3 cung cấp

- Khi tạo 1 Project MVC5, người dùng được lựa chọn 4 loại security:

Individual User Accounts Ứng dụng sử dụng tài khoản được quản lý

bởi SQL Server hoặc từ gmail, facebook Organizational Accounts Ứng dụng sử dụng tài khoản được quản lý

bởi Active Directory hoặc Windows Azure Directory

Windown Authentication Ứng dụng chạy trên intranet tức sử dụng

tài khoản windows để đăng nhập

Bảng 2-3Các loại security trong MVC5

- Code của AccountController có 2 sự khác biệt

o Annotation [Authorize] được sử dụng để làm cho mọi action trong controller không thẻ truy xuất khi chưa đăng nhập ngoại trừ action đó được đánh dấu với annotion [AllowAnontmous]

o Thuộc tính UserManager được tạo ra trong constructor để quản lý các thành viên Các trang chức năng security đăng ký, đăng nhập và đổi mật khẩu được thực hiện nhờ thuộc tính này

2.3 Vài nét về thương mại điện tử B2C

2.3.1 Khái niệm

- Mô hình B2C (Business to Consumer) - còn gọi là mô hình bán lẻ trực tuyến là mô hình thương mại điện tử diễn ra giữa doanh nghiệp và người tiêu dùng Các công ty, doanh nghiệp sẽ buôn bán, trao đổi hàng hóa và dịch vụ cho người tiêu dùng Doanh nghiệp ở đây có thể là nhà sản xuất, nhà phân phối hoặc đại lý

- Đây là loại giao dịch quen thuộc và phổ biến nhất trong thương mại điện tử xuất phát từ những nhu cầu mua bán hàng hóa qua mạng

2.3.2 Phân loại mô hình B2C

- Mô hình B2C được chia thành 2 loại là cửa hàng điện tử và siêu thị điện tử

o Cửa hàng điện tử (e-store) là một trang web bán hàng hóa, dịch vụ thường được

sở hữu bởi các cá nhân, nhà sản xuất, nhà bán lẻ Một website cửa hàng điện tử thường chứa danh mục hàng hóa, dịch vụ; công cụ tìm kiếm; giỏ hàng; cổng thanh toán; dịch vụ khách hàng

o Siêu thị điện tử (e-mall) là một trang web chứa nhiều cửa hàng điện tử Đặc trưng của siêu thị điện tử là thường chứa danh bạ hàng hóa và danh mục các cửa hàng điện tử

9

2.3.3 Hoạt động của mô hình B2C

- Mô hình B2C đƣợc áp dụng trong các mô hình siêu thị điện tử và các website bán

lẻ Khách hàng truy cập vào website, chọn những món hàng cho mình và cung cấp thông tin cần thiết cho việc mua hàng, chọn hình thức thanh toán và hoàn thành thao tác đặt hàng

2.4 Giới thiệu về hệ thống SMS

- MS API là giao thức kết nối để sử dụng các dịch vụ SMS thông qua API(Application Programing Interface : giao diện lập trình ứng dụng) Nằm trên nền SMS Hosting, các kết nối từ SMS API sẽ giao tiếp với nền tảng SMS Hosting để triển khai các ứng dụng SMS

- Việc lập trình SMS sẽ dễ dàng hơn bao giờ hết thông qua các giao thức này

o Có thể kết nối bằng tấ tcả các ngôn ngữ lập trình thông dụng: ASP, PHP, dotNet, thậm chí có thể kết nối thông qua HTML

o Chạy đa nền : Unix, Windows, Mac

H nh 2-2 SMS API

- Cơ chế hoạt động:

o Kết nối thông qua Web Services : POST/GET, SOAP

o Hỗ trợ gửi tin nhắn SMS thông qua giao thức SMTP, SMPP (tích hợp vào các ứng dụng chuẩn theo giao thức này )

- Một số ứng dụng đƣợc xây dựng từ SMS API

o Triển khai các giải pháp SMS marketing, Mobile marketing

o Lập trình SMS tích hợp hệ thống báo cáo, các thông tin quản lý vào website

o Hệ thống quản lý : ERP, CRM, CMS…

o Các phần mềm SMS sử dụng cho mục đích giao tiếp với khách hàng, nhân viên

o Báo động, tin khẩn cấp, tin tức đặc biệt

o Báo giá (chủ động gửi SMS): vàng, chứng khoán, xổ số, bóng đá…

10

Chương 3 - THIẾT KẾ GIAO DIỆN

3.1 Giao diện người dùng (FrontEnd)

3.1.1 Giao diện trang chủ

H nh 3-1 Màn h nh trang chủ

12

3.1.3 Giao diện chi tiết sản phẩm

H nh 3-4 Màn h nh chi tiết sản phẩm

14

H nh 3-7 Màn h nh so sánh sản phẩm

3.1.6 Giao diện Shopping Cart

H nh 3-8 Giao diện Shopping Cart trong màn h nh chính

15

H nh 3-9 Màn hình Shopping Cart

3.1.7 Giao diện thanh toán

H nh 3-10 Màn hình thanh toán

17

3.1.9 Giao diện đăng ký

H nh 3-13 Màn h nh đăng ký tài khoản

H nh 3-14 Thông báo đăng ký thành công

18

3.1.10 Giao diện đăng nhập

H nh 3-15 Màn h nh đăng nhập tài khoản

3.1.11 Giao diện lấy lại mật khẩu

H nh 3-16 Màn h nh quên mật khẩu

19

H nh 3-17 Màn h nh thay đổi mật khẩu

3.1.12 Giao diện liên hệ

H nh 3-18Màn h nh liên hệ

20

3.1.13 Giao diện bình luận

H nh 3-19Màn h nh b nh luận

3.1.14 Giao diện chia sẻ qua Facebook

H nh 3-20 Màn h nh chia sẻ qua Facebook

H nh 3-21Kết quả hiển thị chia sẻ trên Facebook

21

3.2 Giao diện quản trị website (admin)

3.2.1 Giao diện trang chủ

H nh 3-22Màn hình trang chính Admin