Bộ giáo dục và đào tạo

Trường Đại học Ngoại ngữ - Tin

học TP.HCM
 Bộ giáo dục và đào tạo

Trường Đại học Ngoại ngữ - Tin

học TP.HCM
ĐỒ ÁN: WEBSITE BÁN HÀNG ONLINE
Ngành: Công nghệ thông tin

Bộ môn: Lập trình web nâng cao

ĐỒ ÁN:
Giảng viênWEBSITE BÁNPhương
hướng dẫn: Ths.Trần HÀNG
TuấnONLINE

Sinh viên Công

Ngành: thực hiện:
nghệNguyễn
thông tinHoàng Thái Tuấn - 19DH111134
Nguyễn
Bộ môn: Lập trình web nângHồ Thanh Luyên – 19DH111105
cao
ThânThs.Trần
Giảng viên hướng dẫn: Hải ĐiềnPhương
– 19DH110678
Tuấn

Sinh viên thực hiện: Nguyễn Hoàng Thái Tuấn – 19DH111134

Nguyễn Hồ Thanh Luyên – 19DH111105

Thân Hải Điền – 19DH110678

TP.HCM, Ngày 21 tháng 06 năm 2022

TP.HCM, ngày 21 tháng 06 năm 2022

 Lời cám ơn

Trong thời gian học tập và làm báo cáo với đề tài “Xây dựng website bán hàng online”
này, em muốn gửi những lời cám ơn và biết ơn chân thành nhất của mình tới tất cả
những người đã hỗ trợ, giúp đỡ em về kiến thức và tinh thần trong quá trình thực hiện
đồ án.

Trước hết, em xin chân thành cám ơn thầy Ths. Trần Phương Tuấn. Giảng viên Khoa
Công Nghệ Thông Tin, Trường Đại học Ngoại Ngữ - Tin Học Thành phố Hồ Chí
Minh, người đã trực tiếp hướng dẫn, nhận xét, giúp đỡ em trong suốt quá trình thực
hiện đồ án.

Xin chân thành cảm ơn các thầy cô trong Khoa Công Nghệ Thông Tin và các phòng
ban nhà trường đã tạo điều kiện tốt nhất cho em cũng như các bạn khác trong suốt thời
gian học tập và làm đồ án.

Cuối cùng em xin gửi lời cảm ơn đến gia đình, bạn bè, người thân đã giúp đỡ động
viên em rất nhiều trong quá trình học tập và làm đồ án công nghệ phần mềm nâng cao
đúng thời gian quy định.

Do thời gian thực hiện có hạn, kiến thức còn nhiều hạn chế nên đồ án thực hiện chắc
chắn không tránh khỏi những thiếu sót nhất định. Em rất mong nhận được ý kiến đóng
góp của thầy cô giáo và các bạn để em có thêm kinh nghiệm và tiếp tục hoàn thiện đồ
án của mình.

Em xin chân thành cảm ơn tất cả mọi người.!

TP. Hồ Chí Minh, ngày 13 tháng 6 năm 2022

 Nhân xét của giảng viên

………………………………………………………………………………………….

………………………………………………………………………………………….

………………………………………………………………………………………….

………………………………………………………………………………………….

………………………………………………………………………………………….

………………………………………………………………………………………….

………………………………………………………………………………………….

………………………………………………………………………………………….

………………………………………………………………………………………….

………………………………………………………………………………………….

………………………………………………………………………………………….

………………………………………………………………………………………….

………………………………………………………………………………………….

………………………………………………………………………………………….

………………………………………………………………………………………….

………………………………………………………………………………………….

………………………………………………………………………………………….

………………………………………………………………………………………….

………………………………………………………………………………………….

………………………………………………………………………………………….
………………………………………………………………………………………….

Mục lục

Lời cám ơn...............................................................................................

Nhân xét của giảng viên..........................................................................

Mục lục.....................................................................................................

Danh mục hình ảnh.................................................................................

Danh mục các từ viết tắt.........................................................................

Danh mục bảng biểu...............................................................................

Chương 1: Mở đầu..................................................................................

I. Tổng quan:.......................................................................................
1. Bối cảnh của đề tài:.......................................................................................

2. Lý do chọn đề tài...........................................................................................

3. Mục đích đề tài:.............................................................................................

4. Khảo sát hiện trạng:.......................................................................................

Chương 2: Giới thiệu về ngôn ngữ và công cụ sử dụng.......................

I. Ngôn ngữ C#....................................................................................

1. Định nghĩa.....................................................................................................

2. Đặc trưng cơ bản...........................................................................................

3. Ưu điểm.........................................................................................................

II. Kiến trúc 3 lớp MVC....................................................................

 III. Bootstrap 4.................................................................................
1. Cấu trúc Bootstrap.........................................................................................

2. Ưu điểm của Bootstrap:.................................................................................

3. Tính năng của Bootstrap................................................................................

4. Lưu ý khi sử dụng Bootstrap.........................................................................

Chương 3: Thiết kế................................................................................

I. Phân tích thiết kế hệ thống...........................................................

1. Khảo sát nghiệp vụ......................................................................................

2. Tổng quan chức năng..................................................................................

3. Sơ đồ cơ sở dữ liệu......................................................................................

II. Thiết kế giao diện và mô tả chức năng.....................................

1. Giao diện trang chủ.....................................................................................

2. Giao diện trang danh mục sản phẩm...........................................................

3. Giao diện trang chi tiết sản phẩm................................................................

4. Giao diện trang giỏ hàng.............................................................................

5. Giao diện trang chi tiết hóa đơn..................................................................

6. Giao diện trang chi tiết các đơn hàng đã đặt...............................................

7. Giao diện trang các đơn hàng đang chờ......................................................

8. Giao diện các mặt hàng đã mua...................................................................

9. Giao diện trang chủ quản lý.........................................................................

10. Giao diện trang quản lý hàng hóa................................................................

11. Giao diện trang thêm sản phẩm mới............................................................

12. Giao diện trang chỉnh sửa thông tin sản phẩm............................................

13. Giao diện trang xóa sản phẩm.....................................................................

 14. Giao diện trang quản lý thể loại hàng hóa...................................................

15. Giao diện trang quản lý khách hàng............................................................

16. Giao diện trang quản lý hóa đơn.................................................................

17. Giao diện trang chi tiết hóa đơn..................................................................

Chương 4: Code các chức năng ứng dụng..........................................

I. Phần người quản trị......................................................................

1. Hiện thị danh sách toàn bộ sản phẩm..........................................................

2. Thêm thông tin một sản phẩm mới..............................................................

3. Xem chi tiết một sản phẩm..........................................................................

4. Trang chỉnh sửa thông tin sản phẩm............................................................

5. Xóa thông tin mặt hàng...............................................................................

6. Các trang quản trị còn lại.............................................................................

7. Trang đăng nhập..........................................................................................

8. Trang thống kê.............................................................................................

9. Trang chủ quản trị.......................................................................................

II. Phần khách hàng........................................................................

1. Banner..........................................................................................................

2. Danh sách sản phẩm ở trang chủ khách hàng..............................................

3. Trang các sản phẩm.....................................................................................

4. Trang chi tiết sản phẩm...............................................................................

5. Trang giỏ hàng.............................................................................................

6. Xác nhận đơn hàng và chọn phương thức thanh toán.................................

7. Trang hủy hóa đơn và chi tiết các hóa đơn..................................................

Chương 5: Kết luận và hướng phát triển............................................

 I. Kết luận:.........................................................................................

II. Hướng phát triển:.......................................................................

Phân công công việc:.............................................................................

Tài liệu tham khảo.................................................................................

Nhận xét của giảng viên:.......................................................................

 Danh mục hình ảnh

Hình 1: Biểu đồ usecase tổng quát...............................................................................11

Hình 2: Usecase chi tiết Admin...................................................................................12
Hình 3: Biều đồ usecase khách hàng............................................................................13
Hình 4: Sơ đồ cơ sở dữ liệu.........................................................................................17
Hình 5: Giao diện trang chủ.........................................................................................18
Hình 6: Giao diện trang các sản phẩm.........................................................................20
Hình 7: Giao diện trang chi tiết sản phẩm....................................................................21
Hình 8: Giao diện trang giỏ hàng.................................................................................22
Hình 9: Giao diện trang chi tiết hóa đơn......................................................................23
Hình 10: Giao diện trang chi tiết các đơn hàng đã đặt.................................................24
Hình 11: Giao diện trang đơn hàng đang chờ..............................................................26
Hình 12: Giao diện trang các mặt hàng đã mua...........................................................27
Hình 13: Giao diện trang chủ quản lý..........................................................................28
Hình 14: Giao diện trang quản hàng hóa......................................................................30
Hình 15: Giao diện trang thêm sản phẩm mới.............................................................32
Hình 16: Giao diện trang chỉnh sửa thông tin sản phẩm..............................................33
Hình 17: Giao diện trang xóa sản phẩm.......................................................................34
Hình 18: Giao diện trang quản lý thể loại hàng hóa.....................................................35
Hình 19: Giao diện trang quản lý khách hàng..............................................................36
Hình 20: Giao diện trang quản lý hóa đơn...................................................................37
Hình 21: Giao diện trang chi tiết hóa đơn....................................................................38
Hình 22: Model class mặt hàng....................................................................................40
Hình 23: Model hiện thị thông tin mặt hàng................................................................41
Hình 24: View của hiện thị thông tin mặt hàng............................................................41
Hình 25: View của hiện thị thông tin mặt hàng............................................................42
Hình 26: Code model class cho mặt hàng....................................................................43
Hình 27: View thêm mặt hàng mới..............................................................................44

1
Hình 28: View thêm mặt hàng mới..............................................................................44
Hình 29: Controller thêm mặt hàng.............................................................................45
Hình 30: Controller xem chi tiết sản phẩm..................................................................46
Hình 31: View xem chi tiết sản phẩm..........................................................................46
Hình 32: Controller tìm sản phẩm cần chỉnh sửa.........................................................47
Hình 33: Controller chỉnh sửa thông tin.......................................................................47
Hình 34: View chỉnh sửa thông tin..............................................................................48
Hình 35: Controller xóa mặt hàng................................................................................49
Hình 36: Controller xóa mặt hàng................................................................................49
Hình 37: View của xóa sản phẩm................................................................................50
Hình 38: View của xóa sản phẩm................................................................................50
Hình 39: Model khách hàng hoặc người quản trị.........................................................51
Hình 40: Phần view của trang đăng nhập.....................................................................51
Hình 41: Controller của phần login..............................................................................52
Hình 42: Model thống kê theo sản phẩm.....................................................................52
Hình 43: Model thống kê theo khách hàng..................................................................53
Hình 44: Controller thống kê theo khách hàng............................................................53
Hình 45: Controller thông kê theo mặt hàng................................................................54
Hình 46: View của phần thống kê................................................................................54
Hình 47: Controller trang chủ admin...........................................................................55
Hình 48: View trang chủ quản trị.................................................................................56
Hình 49: View phần thống kê trong trang chủ quản trị................................................56
Hình 50: View banner..................................................................................................57
Hình 51: Controller phần trang chủ khách hàng..........................................................58
Hình 52: View 8 sản phẩm mới nhất............................................................................59
Hình 53: View 8 sản phẩm được mua nhiều nhất........................................................59
Hình 54: Controller trang các sản phẩm.......................................................................60
Hình 55: View cho danh sách mặt hàng.......................................................................61
Hình 56: View chi tiết sản phẩm..................................................................................62
Hình 57: View chi tiết sản phẩm..................................................................................62
Hình 58: Model giỏ hàng.............................................................................................63
Hình 59: Model hóa đơn..............................................................................................64

2
Hình 60: Model chi tiết hóa đơn..................................................................................65
Hình 61: Controller giỏ hàng.......................................................................................67
Hình 62: View phần giỏ hàng......................................................................................68
Hình 63: Controller xác nhận đơn hàng.......................................................................69
Hình 64: Controller xác nhận đơn hàng.......................................................................69
Hình 65: View xác nhận hóa đơn.................................................................................70
Hình 66: View các mặt hàng đa mua...........................................................................74

Danh mục các từ viết tắt

Từ viết tắt Định nghĩa

SP Sản phẩm
CTSP Chi tiết sản phẩm
HSX Hãng sản xuất
MVC Model – View – Controller
ASP.NET Active Server Pages. Network Enabled
Technologies.

Bảng 1: Danh mục các từ viết tắt

3
 Danh mục bảng biểu

Bảng 1: Danh mục các từ viết tắt...................................................................................3

Bảng 2: Đặc tả usecase quản lý sản phẩm....................................................................14
Bảng 3: Đặc tả usecase quản lý khách hàng.................................................................14
Bảng 4: Đặc tả usecase quản lý hóa đơn......................................................................15
Bảng 5: Đặc tả usecase quản lý báo cáo thống kê........................................................16
Bảng 6: Đặc tả usecase tra cứu sản phẩm....................................................................16
Bảng 7: Bảng phân chia công việc...............................................................................76

4
Báo cáo đồ án “Website bán đồ điện tử online”

Chương 1: Mở đầu

1. Tổng quan:

1. Bối cảnh của đề tài:

Trong bối cảnh Cách mạng công nghiệp 4.0, việc ứng dụng nền tảng số là xu thế tất
yếu, nâng cao hiệu suất và tối ưu hóa công việc. Đặc biệt trong tình hình khó khăn do
dịch Covid-19, áp dụng công nghệ trong học tập, mua sắm, kinh doanh và rất nhiều
lĩnh vực khác là việc không thể chối cãi tính hữu dụng của công nghệ. Chính vì thế
phát triển và áp dụng công nghệ nhanh chóng để đạt được những ưu thế mạnh mẽ mà
nó đem lại và quan trọng nhất là đáp ứng được nhu cầu cho con người.

2. Lý do chọn đề tài
Với những hệ quả từ đại dịch Covid đem đến như: Thói quen của người tiêu dùng, từ
mua sắm trực tiếp tại các của hàng thì nay đã chuyển sang mua hàng online với chi phí
rẻ, không cần phải đi đến điểm mua, và được đem đến tận nơi mình ở. Vì xu hướng
hiện nay, nhu cầu tiêu dùng của mọi người, nên nhóm em đã quyết định xây dựng một
trang web, nơi mà mọi người có thể chọn những chiếc máy tính, hay điện thoại mình
thích mà không cần phải đến nơi bán hàng trực tiếp mà chỉ cần truy cập internet.

3. Mục đích đề tài:

- Quản lý thông tin hàng hóa.
- Thống kê các hàng hóa có trong cửa hàng hiện tại.
- Thêm, xóa, cập nhật thông tin của sản phẩm.
- Quản lý thông tin khách hàng
- Quản lý hóa đơn mua hàng của khách hàng
- Cập nhật các sản phẩm điện tử mới phù hợp với nhu cầu của khách
hàng
- Đưa tất cả các sản phẩm lên website để khách hàng dễ dàng lựa chọn
- Tăng hiệu quả kinh doanh

1
Báo cáo đồ án “Website bán đồ điện tử online”

4. Khảo sát hiện trạng:

Shop online là một trang web với tiêu chi là bán đồ công nghệ như laptop, PC,
người mua có thể mua trực tiếp hoặc đặt hàng trực tiếp tại website cửa hàng với các
bước đơn giản như đăng nhập, chọn hàng hóa mà mình muốn mua, nhập thông tin cá
nhân để lập hóa đơn, chọn phương thức thanh toán. Còn đối với người quản trị thì
website mang đến sự tiện lợi có thể ở bất kì nơi nào có internet thì đều có thể quản lý
hàng hóa của mình với các tiêu chí sau, khách hàng chỉ cần đăng nhập, và có thể thực
hiện được các công việc như thêm, xóa, cập nhật thông tin hàng hóa, cập nhật thông
tin khách hàng, cập nhật thông tin mua hàng, cập nhật thông tin hóa đơn, kiểm tra
hàng tồn kho và thống kê hàng hóa theo người và theo khách hàng, …

2
Báo cáo đồ án “Website bán đồ điện tử online”

Chương 2: Giới thiệu về ngôn ngữ và công cụ sử

dụng

I. Ngôn ngữ C#

1. Định nghĩa
C sharp (C#): Là một trong những ngôn ngữ lập trình theo hướng đối tượng
được phát triển và ra mắt do Anders Hejlsberg phát triển vào năm 2001. Ngôn ngữ này
được đầu tư bởi Microsoft và còn được xem như đối thủ “nặng ký” của Java. #C có sự
kết hợp chặt chẽ cùng với .NET Framework nhằm hỗ trợ cho việc tạo ra các ứng dụng
Windows Forms hoặc WPF được trở nên dễ dàng và nhanh chóng hơn.
2. Đặc trưng cơ bản

 Tính đơn giản: C# là một trong những loại ngôn ngữ được xây dựng dựa trên
nền tảng của C++ và Java. Nhờ vậy, mà chúng hầu như đều có cấu trúc chương
trình khá giống nhau. Mặc dù C# là ngôn ngữ “sinh sau đẻ muộn” nhưng nhờ
có nhiều cải tiến mới nên rất phù hợp với mọi đối tượng lập trình viên. Một số
cải tiến của nó đó chính là cấu trúc được rút gọn sao cho dễ nhớ và đơn giản
hơn.

 C# là ngôn ngữ dễ sử dụng và có tính hiện đại cao.

 Ngôn ngữ lập trình C# được các chuyên gia nhận xét là loại ngôn ngữ thuần
hướng các tố tượng. Nó bao gồm các tính như: Trừu tượng, đa hình, kế thừa và
đóng gói.

 So với những loại ngôn ngữ lập trình khác thì C# sử dụng lượng từ khóa ít hơn
rất nhiều. Nhờ đặc điểm này mà các lập trình viên đều thuận tiện hơn rất nhiều
cho việc xây dựng lên các đối tượng dành riêng cho mình.
3. Ưu điểm

3
Báo cáo đồ án “Website bán đồ điện tử online”

 Quy mô của chương trình: C# thường được sử dụng để viết trên các hệ thống vi
điều khiển có kích cỡ 8bit. Ngoài ra, nó còn được sử dụng trong các hệ thống
trên 64bit hoặc hệ thống siêu máy tính.

 C# là ngôn ngữ có hiệu suất cao, có có thể chạy mượt trên mọi hệ thống giới
hạn về dung lượng. Bởi vì ngay từ những ngày đầu thì C# đã được thiết kế cho
mục đích thay thế cho ASM trong những hệ thống có bộ nhớ hạn chế.

 C# có khả năng thực hiện các thuật toán giúp hỗ trợ rất nhiều kiểu dữ liệu khác
nhau cũng như việc chuyển đổi sẽ trở nên dễ dàng hơn. Ngôn ngữ lập trình C#
còn có khả năng cung cấp thư viện chuẩn với hàm có chức năng và công cụ
toán học.

 C# là ngôn ngữ sở hữu cú pháp rất sát với những suy nghĩ logic, nhờ vậy mà
việc viết code sẽ được đơn giản hóa và nhanh chóng hơn.

 C# là loại ngôn ngữ lập trình rất an toàn và nó không cho phép việc chuyển đổi
kiểu dữ liệu để có thể giảm tránh được những vấn đề sai lệch xảy ra. 

 Trong C# sẽ cho kết quả trả về thuộc các hàm đa phần đều là một object. Các
lỗi lập trình phổ biến như: gõ nhầm tên, viết sai cấu trúc… đều sẽ được hệ
thống cảnh báo luôn mà không cần phải chờ đến lúc chạy.

 C# thường được đi cùng với Visual Studio và bộ đôi này được sử dụng rất
nhiều cho việc xây dựng Winform, WPF, website bằng MVC.NET. Hiện nay,
nó ngày càng trở nên phổ biến trong việc xây dựng nền tảng cho các ứng dụng
di động.

 Hiện nay, việc học #C sẽ trở nên dễ dàng hơn bởi cộng đồng C# đang rất phát
triển và rộng mở. Chính vì vậy, các nhà phát triển cũng như lập trình viên ngôn
ngữ C# có thể hỗ trợ, giúp đỡ cùng nhau phát triển kỹ năng và kinh nghiệm về
C#

2. Kiến trúc 3 lớp MVC

4
Báo cáo đồ án “Website bán đồ điện tử online”

Trong đồ án website bán hàng online chúng em tổ chức code theo mô hình MVC
(Model – View - Controller). Mô hình MVC là một kiến trúc phần mềm. Nó giúp cho
các developer tách ứng dụng của họ ra 3 thành phần khác nhau Model, View và
Controller. Mỗi thành phần có một nhiệm vụ riêng biệt và độc lập với các thành phần
khác.

Các thành phần của MVC:

Model: Model được giao nhiệm vụ cung cấp dữ liệu cho cơ sở dữ liệu và lưu dữ liệu
vào các kho chứa dữ liệu. Tất cả các nghiệp vụ logic được thực thi ở Model. Dữ liệu
vào từ khách hàng sẽ thông qua View đến Controller và được kiểm tra ở Model trước
khi lưu vào cơ sở dữ liệu. Việc truy xuất, xác nhận, và lưu dữ liệu là một phần của
Model. Do có 2 vai trò tương đối tách biệt cho nên một Model thường được tách thành
các lớp có các domain xử lý khác biệt:

 Business logic thường là xử lý rule hay policy của nghiệp vụ cũng như business
workflows.
 Domain data: Cung cấp/lưu trữ dữ liệu và việc chuyển đổi dữ liệu thành các
dạng khác nhau theo yêu cầu

View: View hiển thị các thông tin cho khách hàng của ứng dụng và được giao nhiệm
vụ cho việc nhận các dữ liệu vào từ khách hàng, gửi đi các yêu cầu đến controller, sau
đó là nhận lại các phản hồi từ controller và hiển kết quả cho khách hàng. Các trang
HTML, JSP, các thư viện thẻ và các file nguồn là một phần của thành phần View.

Trong các web framework, nó gồm 2 phần chính:

 Template file định nghĩa cấu trúc và cách thức trình bày dữ liệu cho user. Ví dụ
như layout, color, windows …
 Logic xử lý cách áp dụng dữ liệu vào cấu trúc trình bày. Logic này có thể bao
gồm việc kiểm tra định dạng dữ liệu, chuyển đổi định dạng dữ liệu sang một
sạng dữ liệu trung gian, lựa chọn một cấu trúc hiện thị phù hợp.

Controller: Là bộ phận có nhiệm vụ xử lý các yêu cầu khách hàng đưa đến thông qua
View. Một controller bao gồm cả Model lẫn View. Nó nhận input và thực hiện các
update tương ứng

5
Báo cáo đồ án “Website bán đồ điện tử online”

3. Bootstrap 4

Trong đồ án Quản lý thư viện chúng em có sự hỗ trợ của Bootstrap. Bootstrap là một
Framework gồm 3 thành phần cơ bản, đó là: HTML, CSS và JavaScript. Framework
này được sử dụng để phát triển trang web chuẩn theo Responsive. Sử dụng Bootstrap
giúp việc thiết kế website tiết kiệm được nhiều thời gian và đơn giản chỉ cần yêu cầu
người lập trình biết kiến thức về Frontend là có thể sử dụng.

Bootstrap là một bộ sưu tập hoàn toàn miễn phí. Bộ sưu tập này bao gồm các mã
nguồn mở và các công cụ giúp bạn có thể tạo thành một website với đầy đủ các thành
phần.

Bootstrap sẽ quy định sẵn các thuộc tính về kích thích, màu sắc và các chiều dài, chiều
rộng của các vùng website… Thông qua đó, developer có thể sáng tạo ra các website
theo mong muốn nhưng vẫn đảm bảo tình thẩm mỹ. Đồng thời, sử dụng Bootstrap sẽ
giúp tiết kiệm rất nhiều thời gian

Bootstrap 4 (viết tắt là BS4) là phiên bản mới của Bootstrap, là framework
HTML, CSS và JavaScript phổ biến nhất để thiết kế web đáp ứng, ưu tiên trên nền
tảng di động. Tương tự như Bootstrap 3, Bootstrap 4 hoàn toàn miễn phí tải về và tự
do sử dụng.
1. Cấu trúc Bootstrap
Gồm có 3 file chính

 Bootstrap.css
Bootstrap CSS là một framework có dạng CSS, được sử dụng để quản lý và sắp xếp
bố cục của website mà bạn đang thiết kế. Nếu HTML quản lý cấu trúc của website
và nội dung web thì CSS lại có nhiệm vụ xử lý bố cục. Vì thế, trong Bootstrap, hai
cấu trúc này luôn đi kèm với nhau, giúp việc thiết kế web của designer dễ dàng hơn
rất nhiều.
Với Bootstrap CSS, bạn sẽ không cần mất nhiều thời gian hay chỉnh sửa thủ công
cho các thiết kế nhỏ. Thay vào đó, chỉ với vài thao tác đơn giản, bạn đã có thể tạo ra
giao diện thống nhất trên nhiều trang web khác nhau. Bootstrap không giới hạn vấn
đề này. Đặc biệt, CSS hiện đã cho phép bạn định dạng cả bảng và bố cục hình.

6
Báo cáo đồ án “Website bán đồ điện tử online”

Cùng với đó là việc định dạng kiểu văn bản. Vì thế, bạn có thể sẽ mất thời gian để
chờ đợi CSS ghi nhớ và khai báo các bộ chọn.
 Bootstrap.js
Nếu Bootstrap CSS có nhiệm vụ quản lý bố cục Website thì Bootstrap JS lại có
trách nhiệm chứa file JavaScript. Đây là thành phần phụ trách việc tương tác của
website và là phần có vai trò quan trọng hàng đầu, là cốt lõi của công cụ Bootstrap.
Để giúp khách hàng nhanh chóng thiết kế thành công và tiết kiệm thời gian hơn, các
nhà sáng lập đã sử dụng jQuery. Đây là một mã nguồn mở, bao gồm thư viện
JavaScript, giúp khách hàng có thể dễ dàng thêm các chức năng vào website mình
đang thiết kế.
Cụ thể, sử dụng jQuery sẽ giúp khách hàng:
- Loại trừ dữ liệu từ các vị trí được cài đặt.
- Tạo ra các tiện ích thông qua Plugin JavaScript.
- Tạo hình động thông qua các thuộc tính CSS.
- Giúp người giúp có thể thêm các tính năng động vào website.

Tuy Bootstrap với các thuộc tính Element HTML và CSS có thể hoạt động
tốt, nhưng vẫn cần Jquery để tạo thiết kế Responsive. Nếu thiếu đi phần này,
website chỉ hoạt động như một website tĩnh.

 Glyphicons
Khi thực hiện thiết kế giao diện website, chắc chắn không thể thiếu Glyphicons.
Đây là file có chức năng liên kết dữ liệu, quản lý và liên kết các hành động của
khách hàng. Ngoài ra, Glyphicons còn có kho icon cực khủng, giúp bạn làm nổi bật
website và giúp website trở nên bắt mắt hơn. Nếu muốn icon phong cách hơn, mình
có thể mua bộ Icon Premium khác nhau. Chắc chắn Icon Premium sẽ giúp cho trang
web trở nên nổi bật và bắt mắt hơn.

2. Ưu điểm của Bootstrap:

Giữa muôn vàn ứng dụng thiết kế website hiện nay, Bootstrap vẫn có khả năng cạnh
tranh cao là nhờ những đặc điểm nổi bật sau:

 Dễ dàng thao tác

 Tùy chỉnh dễ dàng

7
Báo cáo đồ án “Website bán đồ điện tử online”

 Chất lượng sản phẩm đầu ra hoàn hảo

 Độ tương thích cao

3. Tính năng của Bootstrap

 Dễ dàng sử dụng: Cơ chế hoạt động của Bootstrap là dựa trên xu hướng mã
nguồn mở HTML, CSS và Javascript. Khách hàng cần trang bị kiến thức cơ bản
3 mã này mới có thể sử dụng Bootstrap hiệu quả. Bên cạnh đó, các mã nguồn
này cũng có thể dễ dàng thay đổi và chỉnh sửa tùy ý.
 Tùy chỉnh dễ dàng: Bootstrap được tạo ra từ các mã nguồn mở cho phép
designer linh hoạt hơn. Giờ đây có thể lựa chọn những thuộc tính, phần tử phù
hợp với dự án họ đang theo đuổi. CDN Boostrap còn giúp bạn tiết kiệm dung
lượng vì không cần tải mã nguồn về máy.
 Chất lượng sản phẩm đầu ra hoàn hảo: Bootstrap là sáng tạo của các lập trình
viên giỏi trên khắp thế giới. Bootstrap đã được nghiên cứu và thử nghiệm trên
các thiết bị. Được kiểm tra nhiều lần trước khi đưa vào sử dụng. Do đó, khi
chọn Bootstrap, bạn có thể tin rằng mình sẽ tạo nên những sản phẩm với chất
lượng tốt nhất.
 Độ tương thích cao: Điểm cộng lớn nhất của Bootstrap là khả năng tương thích
với mọi trình duyệt và nền tảng. Đây là một điều cực kì quan trọng và cần thiết
trong trải nghiệm khách hàng. Sử dụng Grid System cùng với hai bộ tiền xử lý
Less và Sass, Bootstrap mặc định hỗ trợ Responsive và ưu tiên cho các giao
diện trên thiết bị di động hơn. Bootstrap có khả năng tự động điều chỉnh kích
thước trang website theo khung browser. Mục đích để phù hợp với màn hình
của máy tính để bàn, tablet hay laptop.

4. Lưu ý khi sử dụng Bootstrap

 Bootstrap ứng dụng các phần tử HTML và các thuộc tính CSS. Bootstrap đòi
hỏi khách hàng bổ sung thẻ HTML5 doctype. Để sử dụng Bootstrap, bạn cần
đảm bảo Bootstrap được cài đặt đã bao gồm HTML5 doctype ở đầu trang, cùng
với thuộc tính lang và utf-8 để có thể viết bộ gõ tiếng việt.

8
Báo cáo đồ án “Website bán đồ điện tử online”

 Bootstrap containers: Khi sử dụng trên website của riêng mình, khách hàng cần
bọc toàn bộ nội dung trong website bằng thẻ container (class container hoặc
container - fluid) Trong đó:
- Container class cung cấp một container với chiều rộng tương thích
(responsive fixed width container)
- Container – fluid class cung cấp một container có chiều rộng đầy đủ, trải
rộng toàn bộ chiều rộng của khung hình (full width container).
 Bootstrap Grid System
- Là mấu chốt cho khả năng tương thích giao diện (web responsive) của
Bootstrap. Khi khởi động Bootstrap, giao diện của nó sẽ hiển thị dưới
dạng lưới. Bootstrap được chia thành 12 cột đặt trong một class row.
Trong đó, mỗi cột sẽ bao gồm các padding tương ứng với từng độ phân
giải của mỗi thiết bị (điện thoại, máy tính…).
- Bootstrap Grid System có 5 lớp:
.col- (extra small devices – chiều rộng màn hình < 576px)
.col-sm- (small devices – chiều rộng màn hình >= 576px)
.col-md- (medium devices – chiều rộng màn hình >= 768px)
.col-lg- (large devices – chiều rộng màn hình >= 992px)
.col-xl- (xlarge devices – chiều rộng màn hình >= 1200px)

 
 
 

9
Báo cáo đồ án “Website bán đồ điện tử online”

Chương 3: Thiết kế

I. Phân tích thiết kế hệ thống

1. Khảo sát nghiệp vụ

Website bán hàng online này được xây dựng nhằm mục đích giải quyết các yêu cầu
sau:

Đối với người mua hàng:

 Giúp người mua hàng có thể tìm thấy hàng hóa mình cần một cách nhanh
chóng.
 Giúp người mua hàng có thể đặt hàng online bất cứ nơi nào.
 Giúp người mua có thể biết được tình trạng hóa đơn của mình.

Đối với người quản lý:

 Có thể giới thiệu các sản phẩm mới của cửa hàng thông qua trang home của
phần khách hàng.
 Quản lý các mặt hàng có trong cửa hàng
 Thêm, xóa, cập nhật thông tin các mặt hàng khi cần.
 Quản lý khách hàng mua hàng, có tạo tài khoản trong website.
 Quản lý hóa đơn khách hàng đặt mua
 Thống kê các theo khách hàng mua hàng, thống kê theo sản phẩm được khách
hàng mua hàng.

2. Tổng quan chức năng

Đối với phần khách hàng:

 Có trang home để hiện thị những sản phẩm mới nhất, những sản phẩm được
mua nhiều nhất, và một số thể loại của của cửa hàng.
 Khách hàng có thể chọn sản phẩm mình thích cho vào giỏ hàng để đặt hàng

10
Báo cáo đồ án “Website bán đồ điện tử online”

 Khách hàng có thể đặt đơn hàng và hủy đơn hàng.

 Có thể xem những hàng hóa đã mua.

Đối với phần người quản trị:

 Có thể quản lý được hàng hóa có trong thư cửa hàng.

 Có thể quản lý được khách hàng mua hàng
 Có thể quản lý được các đơn đặt hàng.
 Có thể thể thống kê được theo khách hàng mua hàng và theo sản phẩm được
mua.

3. Biểu đồ usecase tổng quan

Hình 1: Biểu đồ usecase tổng quát

Có hai tác nhân tác động vào website bán hàng điện tử đó là:

 Admin: Người có chức vụ cao nhất có trong thư viện là người Quản lý sản
phẩm, Quản lý khách hàng, Quản lý hóa đơn và báo cáo thống kê.
 Khách hàng: Là người sử dụng dịch vụ của website, tra cứu sản phẩm, xem
thông tin sản phẩm và đặt hàng.

11
Báo cáo đồ án “Website bán đồ điện tử online”

Các usecase chính trong usecase tổng quan:

 Quản lý sản phẩm: Quản lý thông tin, số lượng, tình trạng sản phẩm có trong
website
 Quản lý khách hàng: Quản lý thông tin, tình trạng của khách hàng đặt hàng
 Quản lý hóa đơn: Quản lý thông tin chi tiết của hóa đơn, số lượng hàng hóa và
Khách hàng đặt hàng
 Báo cáo thống kê: Admin có thể xem thống kê, in báo cáo.
 Tra cứu sản phẩm: Chức năng cơ bản của website, bất cứ ai vào website đều sử
dụng được chức năng này.
 Đặt hàng: Khách hàng lập thông tin hóa đơn và chờ Admin xác nhân thông tin
hóa đơn, xác nhận thông tin chi tiết của từng mặt hàng muốn mua, số lượng mặt
hàng

4. Biểu đồ usecase phân rã

Biểu đồ phân rã usecase Admin

Hình 2: Usecase chi tiết Admin

Chức năng của Admin

 Quản lý sản phẩm: Admin có thể thêm sản phẩm mới, cập nhật thông tin sản
phẩm như số lượng, tên mặt hàng, loại mặt hàng, đơn giá… và có thể xóa sản
phẩm khỏi hệ thống

12
Báo cáo đồ án “Website bán đồ điện tử online”

 Quản lý khách hàng: Admin có thể thêm khách hàng mới vào hệ thống, chỉnh
sửa thông tin khách hàng và xóa khách hàng ra khỏi hệ thống
 Tra cứu sản phẩm: Admin có thể tìm kiếm sản phẩm theo tên mặt hàng, mã mặt
hàng…
 Báo cáo thống kê: Admin có thể xem thống kê, báo cáo.
 Quản lý háo đơn: Admin xác nhận hóa đơn của Khách hàng, cập nhật tình trạng
hóa đơn đã trả hay đang chờ xác nhận và xóa hóa đơn.

Biểu đồ usecase Khách hàng

Hình 3: Biều đồ usecase khách hàng

Hoạt động của Khách hàng trong hệ thống là

 Tra cứu sản phẩm theo tên, loại sản phẩm…

 Đặt hàng: Có thể đặt hàng và hủy đơn đặt hàng

5. Đặc tả usecase
6. Đặc tả usecase quản lý sản phẩm
Name Quản lý sản Code
phẩm
Description Quản lý sản phẩm trong hệ thống
Actor Admin Trigger Gõ bàn phím

13
Báo cáo đồ án “Website bán đồ điện tử online”

Pre Condition Đăng nhập vào hệ thống

Post Condition
Standard flow/process
Alternative flow/ Process
Error situations
System state in error situations System down
Chuyển sang giao diện quản sản phẩm
1.Đăng nhập
2.Chọn chức năng quản lý sản phẩm
3. Quản lý sản phẩm
4. Quay trở lại trang chủ
2’. Lỗi đăng nhập
3.Hiển thị thông báo
4.Quay lại trang đăng nhập
1.Lỗi trang Quản lý sản phẩm.
2.Lỗi dữ liệu
3.Không kết nối được server
4.Lỗi bảo mật.

Bảng 2: Đặc tả usecase quản lý sản phẩm

7. Quản lý khách hàng

Name Quản lý khách Code
hàng
Description Quản lý khách hàng trong thư viện
Actor Admin Trigger
Pre Condition Đăng nhập
Post Condition Hiển thị giao diện quản lý khách hàng
Standard flow/process 1.Đăng nhập vào hệ thống
2.Chọn chức năng quản lý khách hàng
3. Quản lý khách hàng
4. Quay trở lại trang chủ
Alternative flow/ Process 2’.Lỗi trang quản lý khách hàng không hoạt động
3.Hiển thị thông báo server
Error situations 1.Không kết nối được server
2.Lỗi bảo mật.

14
Báo cáo đồ án “Website bán đồ điện tử online”

System state in error situations System down

Bảng 3: Đặc tả usecase quản lý khách hàng

8. Quản lý hóa đơn

Name Quản lý phiếu hóa đơn Code
Description Cập nhật thông tin hóa đơn
Actor Admin Trigger Gõ bàn phím
Pre Condition Đăng nhập
Post Condition Hiển thị giao diện quản lý hóa đơn
Standard flow/process 1.Đăng nhập vào hệ thống
2.Chọn chức năng quản lý hóa đơn
3.Quản lý hóa đơn
4. Quay lại trang chủ
Alternative flow/ Process 3’. Lỗi trang quản lý hóa đơn
4.Hiển thị thông báo server
Error situations 1.Không kết nối được server
2.Lỗi bảo mật.
System state in error situations System down

Bảng 4: Đặc tả usecase quản lý hóa đơn

9. Quản lý báo cáo thống kê

Name Báo cáo thống kê Code
Description Thống kê báo cáo theo tiêu chí
Actor Admin Trigger Gõ bàn phím
Pre Condition Đăng nhập
Post Condition Vào trang báo cáo thống kê
Standard flow/process 1.Đăng nhập vào hệ thống
2.Chuyển sang trang báo cáo thống kê
3.Quản lý báo cáo thống kê
4.Quay lại trang chủ
Alternative flow/ Process 3’. Lỗi trang báo cáo thống kê

15
Báo cáo đồ án “Website bán đồ điện tử online”

4.Hiển thị thông báo

5.Quay lại trang home
Error situations 1.Không kết nối được server
2.Lỗi bảo mật.
System state in error System down
situations

Bảng 5: Đặc tả usecase quản lý báo cáo thống kê

10. Quản lý Tra cứu sản phẩm

Name Tra cứu sản phẩm Code
Description Khách hàng, Admin tra cứu sản phẩm
Actor Khách hàng, Admin Trigger Gõ bàn phím
Pre Condition Đăng nhập
Post Condition Vào trang user (đối với khách hàng), trang Admin
(đối với Admin)
Standard flow/process 1.Đăng nhập vào hệ thống
2.Chọn chức năng tra cứu sản phẩm
3. Nhập thông tin sách cần sản phẩm.
4.Quay lại trang chủ
Alternative flow/ Process 3’. Lỗi trang danh sách sản phẩm
4.Hiển thị thông báo
5.Quay lại trang danh sách các sản phẩm
Error situations 1.Không kết nối được server
2.Lỗi bảo mật.
System state in error System down
situations

Bảng 6: Đặc tả usecase tra cứu sản phẩm

11. Sơ đồ cơ sở dữ liệu

16
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 4: Sơ đồ cơ sở dữ liệu

12. Thiết kế giao diện và mô tả chức năng

1. Giao diện trang chủ

17
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 5: Giao diện trang chủ

Giao diện trang chủ bao gồm:

18
Báo cáo đồ án “Website bán đồ điện tử online”

- Header: Logo, các thẻ liên kết tới các trang khác (trang chủ, các sản phẩm,
giỏ hàng, các đơn hàng) và icon tài khoản khách hàng
- Body:
 Banner
 Danh sách những sản phẩm mới nhất
 Hình ảnh sản phẩm: khi click vào sẽ chuyển tới trang chi tiết sản
phẩm
 Tên sản phẩm
 Giá
 Danh mục sản phẩm
 Tên loại thể loại
 Button shop now: khi click vào sẽ chuyển sang trang danh mục sản
phẩm
 Danh sách những sản phẩm bán chạy nhất
 Hình ảnh sản phẩm: khi click vào sẽ chuyển tới trang chi tiết sản
phẩm
 Tên sản phẩm
 Giá
- Footer: hiển thị thông tin của shop

2. Giao diện trang danh mục sản phẩm

19
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 6: Giao diện trang các sản phẩm

Giao diện trang danh mục sản phẩm bao gồm:

- Header: Logo, các thẻ liên kết tới các trang khác (trang chủ, các sản phẩm,
giỏ hàng, các đơn hàng) và icon tài khoản khách hàng
- Body:
 Thanh tìm kiếm: nhập tên sản phẩm cần tìm và nhấn enter sẽ hiện ra
danh sách các sản phẩm cần tìm
 Danh mục các thể loại
 Tên các thể loại: khi click vào sẽ hiển thị danh các sản phẩm tương
ứng với thể loại đó
 Danh sách các sản phẩm của từng thể loại
 Hình ảnh sản phẩm: khi click vào sẽ chuyển tới trang chi tiết sản
phẩm
 Tên sản phẩm

20
Báo cáo đồ án “Website bán đồ điện tử online”

 Giá
 Page Navigation: Hiển thị 6 sản phẩm trên 1 trang
o Chọn số trang: sẽ chuyển qua trang mong muốn
- Footer: hiển thị thông tin của shop

3. Giao diện trang chi tiết sản phẩm.

Hình 7: Giao diện trang chi tiết sản phẩm

Giao diện trang chi tiết sản phẩm bao gồm:

- Header: Logo, các thẻ liên kết tới các trang khác (trang chủ, các sản phẩm,
giỏ hàng, các đơn hàng) và icon tài khoản khách hàng
- Body:
 Các hình ảnh của sản phẩm
 Tên sản phẩm
 Giá
 Mô tả sản phẩm
 Button thêm vào giỏ hàng: khi click vào sẽ chuyển sang trang giỏ hàng

21
Báo cáo đồ án “Website bán đồ điện tử online”

 Mô tả chi tiết sản phẩm

- Footer: hiển thị thông tin của shop

4. Giao diện trang giỏ hàng.

Hình 8: Giao diện trang giỏ hàng

Giao diện trang giỏ hàng:

- Header: Logo, các thẻ liên kết tới các trang khác (trang chủ, các sản phẩm,
giỏ hàng, các đơn hàng) và icon tài khoản khách hàng
- Body:
 Danh sách các sản phẩm trong giỏ hàng
 Tên mặt hàng
 Giá
 Số lượng
o Button giảm số lượng: dùng để giảm số lượng mặt hàng trong giỏ
hàng

22
Báo cáo đồ án “Website bán đồ điện tử online”

o Button tăng số lượng: dùng để tăng số lượng mặt hàng trong giỏ
hàng
 Button Update: dùng để Update giỏ hàng
 Button Delete: dùng để xóa sản phẩm ra khỏi giỏ hàng
 Tổng cộng
 Button tiếp tục mua hàng: khi click vào sẽ chuyển sang trang các
sản phẩm
 Button mua hàng: khi click vào sẽ chuyển sang trang chi tiết hóa
đơn
- Footer: hiển thị thông tin của shop

5. Giao diện trang chi tiết hóa đơn

Hình 9: Giao diện trang chi tiết hóa đơn

Giao diện trang chi tiết hóa đơn:

- Header: Logo, các thẻ liên kết tới các trang khác (trang chủ, các sản phẩm,
giỏ hàng, các đơn hàng) và icon tài khoản khách hàng
- Body:
 Chi tiết hóa đơn
 Họ tên khách hàng

23
Báo cáo đồ án “Website bán đồ điện tử online”

 Địa chỉ
 Email
 Số điện thoại
 Ngày mua
 Dropdown list phương thức thanh toán: dùng để chọn phương thức
thanh toán
 Chi tiết các sản phẩm
 Tên sản phẩm
 Số lượng
 Đơn giá/Sản phẩm
 Tổng cộng
 Button đặt hàng: khi click vào hiện thông báo đặt hàng thành công
- Footer: hiển thị thông tin của shop

6. Giao diện trang chi tiết các đơn hàng đã đặt.

24
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 10: Giao diện trang chi tiết các đơn hàng đã đặt

Giao diện trang chi tiết các đơn hàng đã đặt:

- Header: Logo, các thẻ liên kết tới các trang khác (trang chủ, các sản phẩm,
giỏ hàng, các đơn hàng) và icon tài khoản khách hàng
- Body:
 Danh sách tất cả các đơn hàng
 ID hóa đơn
 Ngày mua
 Trạng thái
 Tổng số lượng
 Tổng tiền
 Phương thức thanh toán
 Tên mặt hàng
 Loại mặt hàng
 Đơn giá
 Số lượng
- Footer: hiển thị thông tin của shop

7. Giao diện trang các đơn hàng đang chờ

25
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 11: Giao diện trang đơn hàng đang chờ

Giao diện trang đơn hàng đang chờ:

- Header: Logo, các thẻ liên kết tới các trang khác (trang chủ, các sản phẩm,
giỏ hàng, các đơn hàng) và icon tài khoản khách hàng
- Body:
 Danh sách tất cả các đơn hàng
 ID hóa đơn
 Ngày mua
 Trạng thái

26
Báo cáo đồ án “Website bán đồ điện tử online”

 Tổng số lượng
 Tổng tiền
 Phương thức thanh toán
 Tên mặt hàng
 Loại mặt hàng
 Đơn giá
 Số lượng
 Button hủy đơn hàng: khi click vào đơn hàng sẽ bị hủy
- Footer: hiển thị thông tin của shop

8. Giao diện các mặt hàng đã mua

Hình 12: Giao diện trang các mặt hàng đã mua

27
Báo cáo đồ án “Website bán đồ điện tử online”

Giao diện trang các mặt hàng đã mua:

- Header: Logo, các thẻ liên kết tới các trang khác (trang chủ, các sản phẩm,
giỏ hàng, các đơn hàng) và icon tài khoản khách hàng
- Body:
 Danh sách các mặt hàng đã mua
 Tên mặt hàng
 Loại mặt hàng
 Đơn giá
 Trạng thái
 Số lượng
 Ngày mua
- Footer: hiển thị thông tin của shop

9. Giao diện trang chủ quản lý

28
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 13: Giao diện trang chủ quản lý

Giao diện trang chủ quản lý:

- Header: Logo, icon thông báo và icon tài khoản admin

- Body:
 Danh sách các chức năng
 Trang chủ: khi click vào sẽ chuyển sang trang trang chủ
 Quản lý khách hàng: khi click vào sẽ chuyển sang trang quản lý
khách hàng
 Quản lý hàng hóa: khi click vào sẽ chuyển sang trang quản lý hàng
hóa
 Thể loại hàng: khi click vào sẽ chuyển sang trang thể loại hàng
 Quản lý hóa đơn: khi click vào sẽ chuyển sang trang quản lý hóa
đơn
 Chi tiết hóa đơn: khi click vào sẽ chuyển sang trang chi tiết hóa đơn
 Phương thức thanh toán: khi click vào sẽ chuyển sang trang phương
thức thanh toán
 Trạng thái hóa đơn: khi click vào sẽ chuyển sang trang trạng thái
hóa đơn
 Tài khoản Admin: khi click vào sẽ chuyển sang trang tài khoản
Admin
 Thông kê
o Theo khách hàng: khi click vào sẽ chuyển sang trang thống kê
theo khách hàng
o Theo sản phẩm: khi click vào sẽ chuyển sang trang thống kê theo
sản phẩm
 Danh sách thông kê
 Hóa đơn đang chờ xác nhận
 Hóa đơn
 Mặt hàng
 Thể loại mặt hàng

29
Báo cáo đồ án “Website bán đồ điện tử online”

 Khách hàng
 Danh sách thống kê doanh thu theo khách hàng
 Tên khách hàng
 Số lượng hoàng hóa đã mua
 Số tiền đã trả
 Doanh thu
 Danh sách thống kê doanh thu theo sản phẩm
 Tên sản phẩm
 Số lượng sản phẩm đã được mua
 Số tiền đã trả
 Doanh thu
- Footer: hiển thị thông tin của shop

10. Giao diện trang quản lý hàng hóa.

30
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 14: Giao diện trang quản hàng hóa

Giao diện trang quản lý hàng hóa:

- Header: Logo, icon thông báo và icon tài khoản admin

- Body:
 Danh sách các chức năng
 Danh sách mặt hàng
 Button tạo một mặt hàng mới: khi click vào sẽ chuyển sang trang
thêm sản phẩm mới
 Thanh tìm kiếm: nhập tên mặt hàng cần tìm và nhấn enter sẽ hiện ra
danh sách mặt hàng cần tìm

31
Báo cáo đồ án “Website bán đồ điện tử online”

 Tên mặt hàng

 Loại mặt hàng
 Đơn giá
 Số lượng
 Ngày nhập hàng
 Hình ảnh
 Button Details: khi click vào sẽ chuyển sang trang chi tiết thông tin
sản phẩm
 Button Edit: khi click vào sẽ chuyển sang trang chỉnh sửa thông tin
sản phẩm
 Button Delete: khi click vào sẽ chuyển sang trang xóa sản phẩm
- Footer: hiển thị thông tin của shop

11. Giao diện trang thêm sản phẩm mới.

Hình 15: Giao diện trang thêm sản phẩm mới.

Giao diện trang quản lý sản phẩm:

- Header: Logo, icon thông báo và icon tài khoản admin

- Body:

32
Báo cáo đồ án “Website bán đồ điện tử online”

 Danh sách các chức năng

 Danh sách thông tin thêm một sản phẩm mới
 Text box tên mặt hàng: dùng để nhập tên mặt hàng
 Text box loại mặt hàng: dùng để nhập loại mặt hàng
 Text box mô tả: dùng để nhập mô tả
 Text box mô tả chi tiết: dùng để nhập mô tả chi tiết
 Text box đơn giá: dùng để nhập đơn giá
 Text box ngày nhập hàng: dùng để nhập ngày nhập hàng
 Text box số lượng: dùng để nhập số lượng
 Button choose file hình ảnh 1: dùng để đăng hình ảnh sản phẩm
 Button choose file hình ảnh 2: dùng để đăng hình ảnh sản phẩm
 Button choose file hình ảnh 3: dùng để đăng hình ảnh sản phẩm
 Button choose file hình ảnh 4: dùng để đăng hình ảnh sản phẩm
 Button Create: khi click vào sản phẩm sẽ được thêm vào
 Button trở về: khi click vào sẽ chuyển sang trang quản lý hàng hóa
- Footer: hiển thị thông tin của shop

12. Giao diện trang chỉnh sửa thông tin sản phẩm.

Hình 16: Giao diện trang chỉnh sửa thông tin sản phẩm.

Giao diện trang chỉnh sửa thông tin sản phẩm:

33
Báo cáo đồ án “Website bán đồ điện tử online”

- Header: Logo, icon thông báo và icon tài khoản admin

- Body:
 Danh sách các chức năng
 Danh sách thông tin sản phẩm
 Text box tên mặt hàng: dùng để nhập tên mặt hàng
 Text box loại mặt hàng: dùng để nhập loại mặt hàng
 Text box mô tả: dùng để nhập mô tả
 Text box mô tả chi tiết: dùng để nhập mô tả chi tiết
 Text box đơn giá: dùng để nhập đơn giá
 Text box ngày nhập hàng: dùng để nhập ngày nhập hàng
 Text box số lượng: dùng để nhập số lượng
 Button choose file hình ảnh 1: dùng để đăng hình ảnh sản phẩm
 Button choose file hình ảnh 2: dùng để đăng hình ảnh sản phẩm
 Button choose file hình ảnh 3: dùng để đăng hình ảnh sản phẩm
 Button choose file hình ảnh 4: dùng để đăng hình ảnh sản phẩm
 Button Create: khi click vào thông tin sản phẩm sẽ được chỉnh sửa
 Button trở về: khi click vào sẽ chuyển sang trang quản lý hàng hóa
- Footer: hiển thị thông tin của shop

13. Giao diện trang xóa sản phẩm.

34
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 17: Giao diện trang xóa sản phẩm

Giao diện trang xóa sản phẩm:

- Header: Logo, icon thông báo và icon tài khoản admin

- Body:
 Danh sách các chức năng
 Danh sách thông tin sản phẩm
 ID mặt hàng
 Tên mặt hàng
 Loại mặt hàng
 Mô tả
 Mô tả chi tiết
 Đơn giá
 Ngày nhập hàng
 Hình ảnh
 Button Delete: khi click vào sản phẩm sẽ được xóa
 Button trở về: khi click vào sẽ chuyển sang trang quản lý hàng hóa
- Footer: hiển thị thông tin của shop

14. Giao diện trang quản lý thể loại hàng hóa.

Hình 18: Giao diện trang quản lý thể loại hàng hóa

35
Báo cáo đồ án “Website bán đồ điện tử online”

Giao diện trang quản lý thể loại hàng hóa:

- Header: Logo, icon thông báo và icon tài khoản admin

- Body:
 Danh sách các chức năng
 Danh sách thể loại hàng hóa
 Button tạo một mặt hàng mới: khi click vào sẽ chuyển sang trang
thêm sản phẩm mới
 Tên loại mặt hàng
 Button Details: khi click vào sẽ chuyển sang trang chi tiết loại mặt
hàng
 Button Edit: khi click vào sẽ chuyển sang trang chỉnh sửa loại mặt
hàng
 Button Delete: khi click vào sẽ chuyển sang trang xóa loại mặt hàng
- Footer: hiển thị thông tin của shop

15. Giao diện trang quản lý khách hàng.

Hình 19: Giao diện trang quản lý khách hàng

36
Báo cáo đồ án “Website bán đồ điện tử online”

Giao diện trang quản lý khách hàng:

- Header: Logo, icon thông báo và icon tài khoản admin

- Body:
 Danh sách các chức năng
 Danh sách khách hàng
 Button tạo một mặt hàng mới: khi click vào sẽ chuyển sang trang
thêm sản phẩm mới
 Thanh tìm kiếm: nhập tên mặt hàng cần tìm và nhấn enter sẽ hiện ra
danh sách mặt hàng cần tìm
 Tên khách hàng
 Số điện thoại
 Địa chỉ
 Email
 Ngày sinh
 User Name
 Password
 Button Details: khi click vào sẽ chuyển sang trang chi tiết thông tin
khách hàng
 Button Edit: khi click vào sẽ chuyển sang trang chỉnh sửa thông tin
khách hàng
 Button Delete: khi click vào sẽ chuyển sang trang xóa thông tin
khách hàng
- Footer: hiển thị thông tin của shop

16. Giao diện trang quản lý hóa đơn.

37
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 20: Giao diện trang quản lý hóa đơn.

Giao diện trang quản lý hóa đơn:

- Header: Logo, icon thông báo và icon tài khoản admin

- Body:
 Danh sách các chức năng
 Danh sách hóa đơn
 Button tạo một mặt hàng mới: khi click vào sẽ chuyển sang trang
thêm sản phẩm mới
 Thanh tìm kiếm: nhập tên mặt hàng cần tìm và nhấn enter sẽ hiện ra
danh sách mặt hàng cần tìm
 Tên khách hàng
 Ngày mua
 Địa chỉ
 Tổng số lượng
 Tổng tiền
 Phương thức thanh toán
 Trạng thái

38
Báo cáo đồ án “Website bán đồ điện tử online”

 Button Details: khi click vào sẽ chuyển sang trang chi tiết thông tin
hóa đơn
 Button Edit: khi click vào sẽ chuyển sang trang chỉnh sửa thông tin
hóa đơn
 Button Delete: khi click vào sẽ chuyển sang trang xóa hóa đơn
 Button chi tiết các sản phẩm đã mua trong hóa đơn: khi click vào sẽ
chuyển sang trang chi tiết các sản phẩm đã mua
- Footer: hiển thị thông tin của shop

17. Giao diện trang chi tiết hóa đơn

Hình 21: Giao diện trang chi tiết hóa đơn.

Giao diện trang chi tiết hóa đơn:

- Header: Logo, icon thông báo và icon tài khoản admin

- Body:
 Danh sách các chức năng
 Danh sách chi tiết hóa đơn
 Button tạo một chi tiết hóa đơn mới: khi click vào sẽ chuyển sang
trang thêm chi tiết hóa đơn mới
 ID hóa đơn
 Tên mặt hàng

39
Báo cáo đồ án “Website bán đồ điện tử online”

 Số lượng
 Button Details: khi click vào sẽ chuyển sang trang chi tiết của chi
tiết hóa đơn
 Button Edit: khi click vào sẽ chuyển sang trang chỉnh sửa thông tin
chi tiết hóa đơn
 Button Delete: khi click vào sẽ chuyển sang trang xóa chi tiết hóa
đơn
- Footer: hiển thị thông tin của shop

40
Báo cáo đồ án “Website bán đồ điện tử online”

Chương 4: Code các chức năng ứng dụng

I. Phần người quản trị

1. Hiện thị danh sách toàn bộ sản phẩm.

a. Phần model class sản phẩm

Hình 22: Model class mặt hàng

Tạo các thuộc tính cho các mặt hàng như là ID mặt hàng, tên mặt hàng, ID loại mặt
hàng để biết thể loại mặt hàng, mô tả mặt hàng đó, đơn giá ngày nhập hàng và 4 hình
ảnh của mặt hàng đó. Sau đó xây dựng cấu trúc và gán giá trị cho các thuộc tính đó.

b. Phần controller

41
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 23: Model hiện thị thông tin mặt hàng

Theo như trên hình, ta thấy có biến tenMH là biến dùng để lưu thông tin tên mặt hàng
mà khách hàng muốn tìm kiếm. Sau đó nếu TenMH là rỗng thì sẽ lấy tất cả mặt hàng
có trong cửa hàng để in ra. Nếu TenMH là không có ký tự nào thì cũng sẽ lấy tất cả
mặt hàng đó ra và chuyển sang view. Nếu TenMH không rỗng thì lấy tất cả các mặt
hàng có cùng tên với mặt hàng để chuyển sang view.

c. Phần view

Hình 24: View của hiện thị thông tin mặt hàng

Ở đây ta có một button để lưu điều hướng đến trang tạo một mặt hàng mới, và một
form để điền thông tin mặt hàng mà khách hàng muốn tìm.

42
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 25: View của hiện thị thông tin mặt hàng

View này sẽ dùng vòng foreach để lấy từng thông tin được chuyển từ controller qua
phần model và dùng thẻ displayFor để hiển thị thông tin nhưng đối với hình ảnh thì
dùng thẻ img. Và có 3 button để điều hướng đến trang chỉnh sửa thông tin, xóa thông
tin và chi tiết thông tin mặt hàng.

2. Thêm thông tin một sản phẩm mới.

a. Code model class sản phẩm

43
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 26: Code model class cho mặt hàng.

Tạo các thuộc tính cho các mặt hàng như là ID mặt hàng, tên mặt hàng, ID loại mặt
hàng để biết thể loại mặt hàng, mô tả mặt hàng đó, đơn giá ngày nhập hàng và 4 hình
ảnh của mặt hàng đó. Sau đó xây dựng cấu trúc và gán giá trị cho các thuộc tính đó.

Code tạo các thông tin cho sản phẩm

b. Phần view.

44
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 27: View thêm mặt hàng mới

Trong phần view này sẽ dùng thẻ EditFor để cho khách hàng nhập thông tin và chuyển
thông tin đó về phần controller

Hình 28: View thêm mặt hàng mới

Và sẽ có 2 button một là button lưu chuyển thông tin về controller và button còn lại là
điều hướng trở về đến trang index là trang hiện thị thông tin các sản phẩm phần quản
lý.

Sau khi thông tin được lấy từ view về sẽ chuyển qua controller sẽ và tiến hành kiểm tra
và lưu thông tin.

45
Báo cáo đồ án “Website bán đồ điện tử online”

c. Phần controller.

Hình 29: Controller thêm mặt hàng

Trong phần này, sau khi lấy thông tin mặt hàng từ view lên sẽ kiểm tra có hợp lệ, sau
đó kiểm 4 bức ảnh lấy lên và cuối cùng là lưu thông tin này lại.

3. Xem chi tiết một sản phẩm

Từ trang index là trang tất cả các sản phẩm, khách hàng sẽ có button detail của từng
sản phẩm đã nói ở trên, khi nhấn button này hệ thống sẽ chuyển đến trang chi tiết của
của sản phẩm với model sản phẩm (đã nói ở trên) và id của sản phẩm mới chọn

46
Báo cáo đồ án “Website bán đồ điện tử online”

a. Phần controller

Hình 30: Controller xem chi tiết sản phẩm

Đầu tiên id được chuyển đến từ trang index sẽ được kiểm tra, nếu id là là rỗng thì báo
lỗi, nếu không trống thì tìm sản phẩm có id bằng với id đã được chuyển đến và nếu
không có mặt hàng nào như thế thì báo lỗi còn nếu có thì hiện thị thông tin đó lên.

b. Phần view

Hình 31: View xem chi tiết sản phẩm

Phần view sau khi nhận thông tin tư controller qua model thì sẽ hiện thị thông tin bằng
thẻ displayFor đối với tin là hình ảnh thì dùng thẻ img. Và có hai button, một là

47
Báo cáo đồ án “Website bán đồ điện tử online”

chuyển hướng sang trang edit của sản phẩm đang xem và một là trở về trang index để
xem thông tin tất cả sản phẩm.

4. Trang chỉnh sửa thông tin sản phẩm

Từ trang index là trang tất cả các sản phẩm, khách hàng sẽ có button edit của từng sản
phẩm đã nói ở trên, khi nhấn button này hệ thống sẽ chuyển đến trang chỉnh sửa thông
tin của của sản phẩm với model sản phẩm (đã nói ở trên) và id của sản phẩm mới chọn

a. Phần controller.

Hình 32: Controller tìm sản phẩm cần chỉnh sửa

Đầu tiên trong phần controller này thì sẽ có chức năng tưởng tự phần trên, tìm thông
tin cần chỉnh sửa với id được đưa vào từ phần view của trang index và trang detail.
Sau khi tìm thấy thông tin thì controller sẽ trả về view với thông tin của model mặt
hàng.

Hình 33: Controller chỉnh sửa thông tin

48
Báo cáo đồ án “Website bán đồ điện tử online”

Tiếp theo phần edit, sau khi phần view đã được chỉnh sửa thông tin sẽ chuyển thông
tin đến controller, controller sẽ tiếp nhận thông tin và sẽ kiểm tra hợp lệ nếu hợp lệ thì
sẽ chỉnh sửa. lưu thông tin và chuyển hướng đến trang index của tất cả các sản phẩm.

b. Phần view

Hình 34: View chỉnh sửa thông tin

Đầu tiên so với controller thứ nhất ở trên thì thẻ editfor sẽ hiện thông tin của mặt hàng
cần chỉnh sửa, sau khi chỉnh sửa thông tin thì nó sẽ lấy thông tin đó trở về phần
controller để thực hiện thay đổi sau khi nhấn button lưu(Save) ở dưới và một button
còn lại là để điều hướng trở về trang index tất cả các mặt hàng.

5. Xóa thông tin mặt hàng

Từ trang index là trang tất cả các sản phẩm, khách hàng sẽ có button delete của từng
sản phẩm đã nói ở trên, khi nhấn button này hệ thống sẽ chuyển đến trang chỉnh sửa
thông tin của của sản phẩm với model sản phẩm (đã nói ở trên) và id của sản phẩm
mới chọn.

49
Báo cáo đồ án “Website bán đồ điện tử online”

a. Phần controller

Hình 35: Controller xóa mặt hàng

Đầu tiên trong phần controller này thì sẽ có chức năng tưởng tự phần trên, tìm thông
tin cần chỉnh sửa với id được đưa vào từ phần view của trang index. Sau khi tìm thấy
thông tin thì controller sẽ trả về view với thông tin của model mặt hàng.

Hình 36: Controller xóa mặt hàng

Thứ hai là sau người quản trị xác nhận thông tin thì sẽ tiến hành xóa và lưu thông tin
lại và trong database.

b. Phần view

50
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 37: View của xóa sản phẩm

Đầu tiên cần hiện thị lại thông tin để khách hàng cần xác nhận là xóa bằng thẻ
displalyFor.

Hình 38: View của xóa sản phẩm

Sau đó. nếu khách hàng muốn xóa thì sẽ nhấn button Delete xác nhận xóa sản phẩn,
thông tin sản phẩm sẽ trở về phần controller để xóa. Và button còn lại là để trở về màn
hình Index tất cả các sản phẩm.

6. Các trang quản trị còn lại

Các trang quản trị còn lại trang để quản lý hóa đơn, quản lý chi tiết hóa đơn, quản lý
khách hàng, quản lý loại mặt hàng, quản lý phương thức thanh toán, quản lý các trạng
thái của thư viện sẽ tương tự như trên.

7. Trang đăng nhập

51
Báo cáo đồ án “Website bán đồ điện tử online”

Đối với phần đăng nhập thì hệ thống sẽ có hai trang đăng nhập chính một là của khách
hàng và còn lại là của người quản trị. Vì hai phần tương đối giống nhau nên em chỉ
giải thích một bên.

a. Phần model

Hình 39: Model khách hàng hoặc người quản trị

Đối với khách hàng hay là admin thì trong mỗi lúc đăng ký tài khoản sẽ đều có
username và password để lưu thông đăng ký và đăng nhập

b. Phần view

Hình 40: Phần view của trang đăng nhập

Ở phần này thì ta có hai input text và input password để khách hàng nhập usename và
password, câu lệnh if nếu khách hàng nhập sai tên đăng nhập và mật khẩu thì sẽ thông
báo bằng thẻ p. Và hai button, một là submit để xác nhận mật khẩu và tên đăng nhập
và còn lại là là button register sẽ chuyển hướng đến trang đăng ký.

52
Báo cáo đồ án “Website bán đồ điện tử online”

c. Phần controller

Hình 41: Controller của phần login

Sau khi thông tin từ view được chuyển về gồm username và password thì sẽ được
kiểm tra xem có tài khoàn nào trùng khớp với tài khoản mà khách hàng nhập hay
không nếu không thì thông báo sai thông tin tài khoản, nếu có thì chuyển hướng đến
trang home.

8. Trang thống kê
a. Phần model

Hình 42: Model thống kê theo sản phẩm

53
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 43: Model thống kê theo khách hàng

Như hai hình ở trên thì phần thống kê ta có hai loại. Thứ nhất là thống kê theo khách
hàng, ở phần này sẽ có tên khách hàng, số lượng hàng hóa đã mua từ của hàng, số tiền
đã thu về từ khách hàng và doanh thu từ khách hàng của cửa hàng. Thư hai là thông kê
theo từng sản phẩm, sản phẩn nào đã được khách hàng mua gồm tên, số lượng được
mua là bao nhiêu và số lượng tiền sản phẩm đó mang về và lượng tiền của hàng thu
được từ doanh thu đó.

b. Phần controller

Hình 44: Controller thống kê theo khách hàng

Đầu tiên nhóm em đã lấy những khách hàng đã từng mua hàng nghĩa là có hóa đơn đã
thanh toán trong cửa hàng, tiếp theo sau đó là lấy tên khách hàng đó, tính tổng số
lượng hàng hóa, số tiền, doanh thu cho từng sản phẩn đó và lưu lại vào danh sách
thông kê và cuối cùng là đẩy danh sách thống kê này cho phần view để hiển thị.

54
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 45: Controller thông kê theo mặt hàng

Thống kê theo từng từng mặt hàng cũng giống như của khách hàng. Đầu tiên cần lấy
thông tin sản phẩm đã được mua hay còn được gọi là có trong hóa đơn, sau đó lấy
thông tin tên của mặt hàng, sau đó là số tổng số lượng hàng hóa có trong hóa đơn đã
được mua, tiếp theo là số tiền thu về sẽ bằng số lượng nhân với đơn giá. Và cũng lưu
thông tin này về một danh sách thống kê, chuyển cho phần view hiện thị.

c. Phần view

Hình 46: View của phần thống kê

55
Báo cáo đồ án “Website bán đồ điện tử online”

Đối với phần view của thống kê theo khách hàng và thống kê theo sản phẩm thì nó
giống nhau nên chỉ giải thích một bên. Thông tin thống kê thì luôn được thể hiển theo
dạng bảng. Sau khi lấy thông tin của controller chuyển đến dưới dạng hai model được
gọi bằng câu lệnh using model ở trên thì thông tin cũng sẽ được biểu diễn hết qua vòng
lập foreach và dưới dạng các thẻ displayFor.

9. Trang chủ quản trị

Hình 47: Controller trang chủ admin

a. Phần controller

Đầu tiền sẽ là tổng các hóa đơn đang chờ có trong database. Tiếp theo là tổng số mặt
hàng có trong của hàng, tiếp theo là tổng số thể loại hàng hóa có trong cửa hàng và
tổng số khách hàng đã đăng ký tài khoản. Tiếp theo là thống kê số lương khách hàng
đã mua bao nhiêu hàng, ở đây đầu tiên cần lấy thông tin của những khách hàng có mua
hàng, nghĩa là đã từng lập hóa đơn để mua hàng, sau đó lấy thông tin hóa đơn của
khách hàng đó cộng lại với nhau số hàng hóa đã mua và đã trả bao nhiêu tiền.

Tiếp theo là thống kê số lượng hàng hóa đã được mua. Đầu tiên lấy thông tin tất cả
hàng hóa có trong các hóa đơn, đã được khách hàng mua, tiếp theo sau đó lấy từng

56
Báo cáo đồ án “Website bán đồ điện tử online”

thông tin của các mặt hàng và đếm số lượng được mua và doanh thu bằng cách nhân
với đơn giá theo hai class đã giới thiệu ở phần trên.

b. Phần view

Hình 48: View trang chủ quản trị

Đối với mỗi thông tin mà controller chuyển qua view bằng viewbag thì sẽ được hiện
thị dưới những thẻ h2.

Hình 49: View phần thống kê trong trang chủ quản trị

Và với hai phần thống kê đã nêu ra ở phần controller thì cũng sẽ được biểu thị ở dạng
bảng. Như trên hình để lấy thông tin được thì chúng ta phải gọi những thông tin đó đến
phần view này. Đây là cách gọi:

57
Báo cáo đồ án “Website bán đồ điện tử online”

10. Phần khách hàng

1. Banner
a. Phần controller

Phần banner này sẽ dùng model của mặt hàng đã được giới thiệu ở phần trên. Ở đây ta
sẽ lấy thông tin 3 sản phẩm có ngày nhập hàng mới nhất và chuyển đến view với
viewbag

b. Phần view

Lấy thông tin mà controller đã gửi qua phần view.

Hình 50: View banner

Sau khi lấy thông tin thì giờ dùng vòng foreach để hiện thị tất cả danh sách 3 sản phẩm
mới nhất bằng thẻ h1 hiện thị tên sản phẩm và thẻ a dùng để khi khách hàng nhấn vào
tên sản phẩm đó thì sẽ điều hướng đến trang chi tiết sản phẩm đó.

58
Báo cáo đồ án “Website bán đồ điện tử online”

2. Danh sách sản phẩm ở trang chủ khách hàng.

a. Phần controller

Phần này cũng sẽ dùng model của phần mặt hàng đã giới thiệu ở trên. Đầu tiên sẽ lấy 8
sản phẩm để hiện thị một lần. 8 sản phẩm lấy theo thứ tự ngày nhâp mới nhất và hiện
thị dưới dạng là những mặt hàng mới nhập.

Hình 51: Controller phần trang chủ khách hàng

Ở dưới phần 8 sản phẩm mới nhất sẽ là phần những mặt hàng được mua nhiều nhất.
Đầu tiên chúng ta phải có class những sản phẩm và số lượng được mua để lưu thông

59
Báo cáo đồ án “Website bán đồ điện tử online”

tin, dễ dàng kiểm tra xem sản phẩm nào được mua nhiều nhất. Sau đó lấy tất cả thông
tin sản phẩm và tổng số lượng từng sản phẩm có trong hóa đơn, kết thúc là lấy 8 sản
phẩm có số lượng được mua nhiều nhất chuyển sang trang view các sản phẩm đó.

b. Phần view

Lấy thông tin 8 sản phẩm mới nhất và gọi model để sử dụng

Hình 52: View 8 sản phẩm mới nhất

Dùng vòng lặp foreach để lấy thông tin từng sản và hiển thị img để hiện thị hình ảnh
của sản phẩm, h6 để hiện thị tên sản phẩm, và div để hiện thông tin giá sản phẩm.

Hình 53: View 8 sản phẩm được mua nhiều nhất

60
Báo cáo đồ án “Website bán đồ điện tử online”

Cũng giống như ở trên sản khi lấy thông tin từ controller thì sẽ dùng vòng lập foreach
để hiện thị thông tin, img để hiện thị hình ảnh của sản phẩm, h6 để hiện thị tên sản
phẩm, và div để hiện thị giá của sản phẩm.

3. Trang các sản phẩm

Phần trang sản phẩm này cũng dùng model mặt hàng như trên.

a. Phần controller

Hình 54: Controller trang các sản phẩm

Trang này có dùng đến các kĩ thuật như là tìm kiếm theo tên sản phẩm và phân trang.
Đầu tiên ta nói đến phần tìm kiểm theo tên sản phẩm. Khi nhận thông tin từ view, tên
sản phẩm mà khách hàng nhập vào thì hệ thống sẽ kiểm tra nếu tên mặt hàng mà trống
thì sẽ chuyển tất cả thông tin sản phẩm có trong của hàng để hiện thị còn nếu mà
không trống thì sẽ chuyển thông tin tất cả mặt hàng có tên như khách hàng nhập vào
để hiển thị. Trong khi hiện thị thông tin thì sẽ phân trang ở trong controller này. Khách
hàng cần tải trang pagelist trong Nuget Package Manager

rồi gọi vào trong trang mình cần dùng sau đó gọi page đầu tiên là số
1 và số mặt hàng trong một trang

và trong khi return danh sách sản phẩm thì cần gọi

to pagelist ở phần sau.

b. Phần view

61
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 55: View cho danh sách mặt hàng

Khi dữ liệu các mặt hàng đã được chuyển từ controller sang view để hiển thị

thì sẽ tiếp tục dùng vòng

lặp foreach để hiển thị từng sản phẩm, img hiện thị hình ảnh sản phẩm, h6 hiện thị tên
sản phẩm và div hiển thị thông tin đơn giá của sản phẩm. Phần ở dưới chính là phần
trang, khi dữ liệu lấy đủ 6 sản phẩm thì màn hình sẽ bắt đầu phân trang, số trang được
hiện thị sẽ bằng số sản phẩm chia 6. Và ở trong mỗi sản phẩm vì có thẻ a nên khi ấn
vào thì dữ liệu id sản phẩm sẽ được chuyển đến trang chi tiết sản phẩm để hiện thị
thông tin chi tiết của sản phẩm đó. Sau đây là phần trang chi tiết sản phẩm.

4. Trang chi tiết sản phẩm

a. Phân controller

Phần này cũng dùng đến model mặt hàng. Sau khi lấy dữ liệu id từ phần trên trang tất
cả các sản phẩm hoặc trang home bằng nhấn nhấn chọn vào hình ảnh hoặc tên của sản
phẩm thì nó sẽ gửi id từ view lên controller của phần chi tiết sách để xử lý. Sau khi lấy

62
Báo cáo đồ án “Website bán đồ điện tử online”

được id thì nó sẽ tìm mặt hàng nào có id như thế sau đó return mặt hàng đó đó phần
view.

b. Phần view

Hình 56: View chi tiết sản phẩm

Sau khi lấy được sản phẩm từ controller chuyển đế thì bắt đầu hiện thị. Đầu tiên là 4
hình ảnh có thể được chuyển đổi giữa các hình ảnh bằng jquery đơn giản được hộ trợ
bởi template.

Hình 57: View chi tiết sản phẩm

63
Báo cáo đồ án “Website bán đồ điện tử online”

Sau đây là phần hiển thị thông tin. Chia thành hai phần, phần đầu là tên, giá, và mô tả
ngắn gọn, phần sau là phần mô tả chi tiết và lần lượt hiện thị bằng thẻ h3, thẻ p, thẻ a
và thẻ p.

5. Trang giỏ hàng

a. Phần model

Hình 58: Model giỏ hàng

Giỏ hàng này sẽ có một class gồm có mặt hàng nào và số lượng của từng mặt hàng

và gỏi hàng sẽ gồm các một list các

hàng hóa vừa mới được tạo ở trên. đâu là code

để lấy list sản phẩm, nó sẽ trả về một list.

64
Báo cáo đồ án “Website bán đồ điện tử online”

Đây là code theo một mặt hàng mới vào giỏ hàng. Đầu tiên sẽ kiểm tra trong giỏ hàng
đã có mặt hàng này chưa, nết có rồi thì tăng số lượng, nết chưa có thì lưu thông tin mặt
hàng vào giỏ hàng và số lượng vào.

Đây là code update số lượng khi khách hàng muốn mua thêm sản phẩm đã có trong giỏ
hàng.

Hình 59: Model hóa đơn

Là model để lưu thông tin hóa đơn người mua tạo ở phần này với trang thái chờ xác
nhận.

65
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 60: Model chi tiết hóa đơn

Phần này lưu thông tin chi tiết hóa đơn là thông tin những sản phẩm mà người mua
muốn mua trong hóa đơn nào đó.

b. Phần controller.

Đầu tiên ta phải tạo một cái giỏ hàng mới và gắn giỏ cho Session để lưu thông tin giỏ
hàng, sau đó gán cho nó là một hàm để thể gọi sau này.

Khi người khách hàng chọn mua một mặt hàng thì mặt hàng đó sẽ được đẩy vào trong
giỏ hàng bằng cách

66
Báo cáo đồ án “Website bán đồ điện tử online”

Kiểm tra mặt hàng còn nữa không nếu còn thì sẽ gọi gỏi hàng ở trên và add mặt hàng
đó vào và cuối cùng lưu lại thông tin giỏ hàng.

Khi khách hàng muốn mua thêm sản phẩm đã có trong giỏ hàng. Phần nay sẽ lấy tín
hiệu từ button bên phần view

sau đó công hoặc trừ số lượng theo yêu cầu của khách hàng bằng cách nhấp update
(Giải thích bên phần view). Lúc này chỉ cần gọi giỏ hàng đã lưu thêm hàm cập nhật số
lượng theo id mặt hàng và số lượng.

67
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 61: Controller giỏ hàng

Phần này bắt đầu sẽ tạo một hóa đơn mới để lấy id hóa đơn để lưu thông tin các mặt
hàng mà khách hàng muốn mua. Đầu tiên trong hóa đơn sẽ có id cùng với thông tin
của khách hàng sau đó lưu thông tin vào database. Tiếp theo sẽ lấy giỏ hàng gồm
những hàng hóa đã chọn. Dùng vòng foreach để chạy từng sản phẩm có trong giỏ
hàng, trong khi chạy chi tiết hóa đơn sẽ được tạo riêng cho mỗi mặt hàng mỗi chi tiết
hóa đơn, chi tiết hóa đơn sẽ lưu thông tin của từng sản phẩm và số lượng của sản phẩm
đó và lưu thông tin vào database.

c. Phần view

68
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 62: View phần giỏ hàng

Phần view của gỏi hàng chỉ đơn giản là hiển thị các mặt hàng được cho vào giỏ bằng
gọi và thêm hai button tiếp tục mua hàng là để chuyển hướng đến trang các mặt hàng
để chọn thêm hàng hóa để mua và một button nữa là mua hàng sẽ chuyển hướng đến
trang xác nhận đơn hàng và chọn phương thức thanh toán cùng với id của hóa đơn mới
tạo

6. Xác nhận đơn hàng và chọn phương thức thanh toán.

a. Phần model

Đối với model phần này cũng sẽ dùng model của hóa đơn đã được giải thích ở trên.

b. Phần controller

69
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 63: Controller xác nhận đơn hàng

Đầu tiên cần phải tìm hóa đơn có id đã được giử ở trong phần giỏ hàng đi và đưa thêm
danh sách các phương thức thanh toán. Sau đó đưa tất cả thông tin đó qua phần view
để hiện thị và chờ xác nhận từ khách hàng.

Hình 64: Controller xác nhận đơn hàng

70
Báo cáo đồ án “Website bán đồ điện tử online”

Sau khi khách hàng xác nhận đơn hàng bằng cách nhấn button mua hàng ở phần view
thì controller sẽ lấy hóa đơn đó xác nhận lại các thông tin. Sau khi xác nhận và lưu
thông tin của phương thức thanh toán thì sẽ chuyển hướng trang sang trang mua hàng
thành công.

c. Phần view

Phần view sẽ được chia thành hai phần

Phần đầu là thông tin khách hàng được lấy từ hóa đơn được chuyển từ controller qua
các câu lệnh như sau.

Hình 65: View xác nhận hóa đơn

71
Báo cáo đồ án “Website bán đồ điện tử online”

Phần này sẽ hiển thị thông tin khách hàng và phương thức thanh toán để lưu vào trong
hóa đơn, dữ liệu phần này sẽ được chuyển ngược lại phần controller.

Tiếp theo là các sản phẩm có trong chi tiết hóa đơn của hóa đơn ở phần trên được hiện
thị để khách hàng có thể xác nhận những gì mình đã mua. Dữ liệu được lấy từ
controller đã giải thích ở trên.

7. Trang hủy hóa đơn và chi tiết các hóa đơn

d. Trang hủy hóa đơn

Để có thể hủy được đơn hàng thì cần phải hiển thị được các đơn hàng đang chờ xác
nhận và có thông tin người khách hàng. Thông tin khách hàng đã được lưu từ lúc đăng
nhập, lọc các hóa đơn đang chờ xác nhận của khách hàng đã lưu trên thành danh sách
và chuyển đến view.

72
Báo cáo đồ án “Website bán đồ điện tử online”

Sau khi lấy thông tin từ controller chuyển qua view thì ở view sẽ bắt đầu hiện thị danh
sách cá phiếu mượn bằng vòng foreach và trong mỗi vòng foreach thì có chứa vòng
các mặt hàng được đính kèm với hóa đơn đó thì cũng sẽ được hiện thị dưới vòng lập
foreach. Cuối cùng có button hủy đơn hàng. Khi khách hàng ân button này thì sẽ
chuyển chuyển dữ liệu hóa đơn nào cần hủy sang cho controller xử lý.

73
Báo cáo đồ án “Website bán đồ điện tử online”

Ở phần controller này sẽ lấy dữ liệu thông qua form để kiểm tra nếu có kết quả phù
hợp thì sẽ xóa hóa đơn đó ra khỏi database.

e. Trang chi tiết các sản phẩm đã mua

Đối với phần controller thì cũng cần thông tin khách hàng (đã lưu ở bước đăng nhập)
và lập danh sách các hóa đơn có mã id của khách hàng đó, sau đó lấy thông tin của
danh sách hóa đơn tìm đến các chi tiết hóa đơn đó và lập thành danh sách rồi chuyển
qua phần view. Sau khi qua view thì sẽ lấy thông tin bằng câu lệnh
và thể nó dưới dạng
bảng

74
Báo cáo đồ án “Website bán đồ điện tử online”

Hình 66: View các mặt hàng đa mua

Thông tin sẽ được biểu diễn dưới dạng bảng, bằng vòng lặp foreach để lấy tất cả các
thông tin đã được truyền từ controller.

75
Báo cáo đồ án “Website bán đồ điện tử online”

Chương 5: Kết luận và hướng phát triển

I. Kết luận:

- Tương đối đầy đủ các chức năng hiển thị sản phẩm theo trang nhóm sản
phẩm, thêm xóa sửa sản phẩm mới
- Khách hàng có thể tìm kiếm sản phẩm, xem chi tiết các sản phẩm cần mua,
thêm sản phẩm vào giỏ hàng, thanh toán giỏ hàng và hủy đơn hàng
- Giao diện đơn giản, dễ sử dụng
- Admin dễ dàng quản lý các sản phẩm và khách hàng

2. Hướng phát triển:

- Chức năng tìm kiếm sản phẩm chưa được hoàn chỉnh
- Giao diện còn đơn giản, chưa tối ưu
- Thêm chức năng khuyến mãi khi khách hàng là thành viên VIP, khi đến dịp
sinh nhật
- Thêm chức năng tính phí ship theo km
- Thêm chức năng đánh giá và bình luận khi khách hàng mua sản phẩm

76
Báo cáo đồ án “Website bán đồ điện tử online”

Phân công công việc:

Phân công công việc

Tên công việc Nguyễn Hồ Nguyễn Hoàng Thân Hải Điền
Thanh Luyên Thái Tuấn
Xây dựng, chỉnh sửa x x
giao diện
Code x x
Viết báo cáo x x x
Tổng hợp lại báo cáo x
Tìm tài liệu x x
Tìm hình ảnh x x

Bảng 7: Bảng phân chia công việc

77
Báo cáo đồ án “Website bán đồ điện tử online”

Tài liệu tham khảo

[1] Tài liệu học tập của thầy Ths Trần Phương Tuấn

[2] W3school, ASP Tutorials, https://www.w3schools.com/asp/

[3] Stack overflow, https://stackoverflow.com/

[4] Tedu, hướng dẫn code ASP.NET MVC, https://tedu.com.vn/khoa-hoc/lap-trinh-

du-an-website-ban-hang-aspnet-mvc-4-1.html

78
Báo cáo đồ án “Website bán đồ điện tử online”

Nhận xét của giảng viên:

…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………

Điểm các thành viên:

Nguyễn Hồ Thanh Luyên Nguyễn Hoàng Thái Tuấn Thân Hải Điền
19DH111105 19DH111105 19DH110678

79