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

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

ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG WEBSITE BÁN HÀNG SỬ DỤNG
ASP.NET MVC 5
Nhóm SVTH : NGUYỄN HUỲNH MINH LUÂN
PHẠM THANH PHONG
Khoá

: 2010-2014

Ngành

: Công nghệ thông tin

GVHD

: ThS. NGUYỄN MINH ĐẠO

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

10110066
10110084


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

ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG WEBSITE BÁN HÀNG SỬ DỤNG
ASP.NET MVC 5
Nhóm SVTH : NGUYỄN HUỲNH MINH LUÂN
PHẠM THANH PHONG
Khoá

: 2010-2014

Ngành

: Công nghệ thông tin

GVHD

: ThS. NGUYỄN MINH ĐẠO

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

10110066
10110084


CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh Phúc

*******
Tp. Hồ Chí Minh, ngày 22 tháng 9 năm 2014

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

Họ và tên Sinh viên: NGUYỄN HUỲNH MINH LUÂN
PHẠM THANH PHONG
Ngành: Công nghệ thông tin
Giảng viên hƣớng dẫn: NGUYỄN MINH ĐẠO
Ngày nhận đề tài:
22/9/2014

MSSV: 10110066
MSSV: 10110084
Lớp: 10110CLC
ĐT: 0903982082
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.
TRƢỞNG NGÀNH

GIẢNG VIÊN HƢỚNG DẪN


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
Giáo viên hƣớng dẫn
(Ký & ghi rõ họ tên)
Nguyễn Minh Đạo

năm 2015


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


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

i


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.

ii


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.

iii


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
2.1

CƠ SỞ LÝ THUYẾT .................................................................................. 2

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
iv


2.3.3
2.4

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

Chƣơng 3
3.1

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

- THIẾT KẾ GIAO DIỆN.......................................................................... 10

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
v


3.2.8
3.3

Giao diện thống kê ..................................................................................... 30

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
vi


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
vii


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

viii


DANH SÁCH CÁC CHỮ VIẾT TẮT
Các từ viết tắt
app
ASP

Từ viết đầy đủ
Application
Active Server Page

3.
4.
5.

AJAX
CSDL
ID

Asynchronous JavaScript and XML

Cơ Sở Dữ Liệu
Indentification number

6.
7.
8.
9.
10.

IOS
JS
JSON
MVC
OOP

Intelligent Opperating System
Javascript
JavaScript Object Notation
Model View Controller
Object Oriented Programming

11.
12.
13.

SMS
SQL
UI

Sort Message Service

Structured Query Language
User Interface

14.
15.

URL
VS

Uniform Resource Locator
Visual

STT
1.
2.

ix


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
x


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

xi


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
xii


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
xiii


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

xiv


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
 So sánh sản phẩm
 Quản lý giỏ hàng
 Quản lý danh sách yêu thích
 Thanh toán
 Quản lý đặt hàng
- Đối với quản trị viên thì có thêm các chức năng sau:
 Quản lý sản phẩm
 Quản lý loại sản phẩm
 Quản lý nhà sản xuất
 Quản lý tài khoản, quyền hạn
 Quản lý đơn hàng
 Quản lý chi tiết sản phẩm
 Quản lý phí vận chuyển
 Thống kê
1


Chƣơng 2 CƠ SỞ LÝ THUYẾT
2.1 Công nghệ ASP.NET MVC5
2.1.1 Lịch sử ra đời của MVC
- Tất cả bắt đầu vào những năm 70 của thế kỷ 20, tại phòng thí nghiệm Xerox

PARC ở Palo Alto. Sự ra đời của giao diện đồ họa (GUI) và lập trình hƣớng đối
tƣợng (Object Oriented Programming) cho phép lập trình viên làm việc với
những thành phần đồ họa nhƣ những đối tƣợng đồ họa có thuộc tính và phƣơng
thức riêng của nó. Không dừng lại ở đó, những nhà nghiên cứu ở Xerox PARC
còn đi xa hơn khi cho ra đời cái gọi là kiến trúc MVC (viết tắt của Model – View
– Controller).[1]
- 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 ModelView-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
ASP.NET
MVC 1.0
2008
ASP.NET MVC 2.0 (.NET 3.5)
2008
ASP.NET MVC 3.0 (.Net 4)
1/2010
ASP.NET MVC 4.0 (.Net 4.5)
15/8/2012
ASP.NET MVC 5.0 (.Net 5.0)
17/10/2013
Bảng 2-1 Lịch sử các phiên bản MVC

2.1.2 Sự khác nhau giữa MVC và webform
MVC
Thành ASP.net MVC chia ra làm 3 phần:
phần
– Models
– View
– Controller.
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

Webform
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) .
2


Controllers, không còn postback, Khi có sự tƣơng tác với
lifecycle và events.
ngƣời dùng nên hầu hết
ASP.net WebForm xử lý
chậm.
Việc
Đối với MVC thì việc đó có thể sử Với ASP.net WebForm đều

kiểm
dụng các unit test có thể thẩm định rất phải chạy tất cả các tiến
tra
dễ dàng các Controllers thực hiện nhƣ trình của ASP.net, và sự thay
(test),
thế nào.
đổi ID của bất kỳ Controls
gỡ lỗi
nào cũng ảnh hƣởng đến ứng
(debug)
dụng.
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.
a. Model
Model chứa và thể hiện các đặc tính và logic ứng dụng. Theo một cách hiểu khác,
Model đại diện cho dữ liệu và logic cốt lõi. Nó chính là những lớp (class) chứa thông
tin về các đối tƣợng mà ta cần phải thao tác, làm việc trên nó. Ví dụ: "Sách" chứa các
thông tin nhƣ "Tên", "Ngày phát hành", "Giá", "Nhà sản xuất", ...
b. View
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

3


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.
 Model Binding
- Model Binding là tính năng thế mạnh của ASP.NET MVC (và bây giờ nó
cũng đƣợc áp dụng cho cả Web Forms trong phiên bản ASP.NET 4.5).
- Hỗ trợ bạn viết phƣơng thức nhận một đối tƣợng tùy biến nhƣ là một tham
số

4


-

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.
 Razor View.
Từ ASP.net MVC 3 đi kèm với một công cụ View mới có tên là Razor với
những lợi ích sau:
- Cú pháp Razor là sạch sẽ và xúc tích, đòi hỏi một số lƣợng tối thiểu các tổ

hợp phím.
- Việc tìm hiểu Razor tƣơng đối dễ dàng vì nó dựa trên ngôn ngữ C# và
Visual Basic.
- 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.
5


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
6