bản sửa - UD23.13 - Phùng Duy Long - 18116102 - Thiết kế website bán sản phẩm công nghệ

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC KINH DOANH VÀ CÔNG NGHỆ HÀ NỘI
KHOA CÔNG NGHỆ THÔNG TIN


LUẬN VĂN TỐT NGHIỆP

(CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN)
Đề Tài:
THIẾT KẾ WEBSITE BÁN HÀNG NB STORE
Giáo viên hướng dẫn :
Sinh viên thực hiện : Phùng Duy Long
Mã sinh viên : 181161102
Lớp : UD23.13
Hà Nội - 2022
TRƯỜNG ĐẠI HỌC KINH DOANH VÀ CÔNG NGHỆ HÀ NỘI
KHOA CÔNG NGHỆ THÔNG TIN
LUẬN VĂN TỐT NGHIỆP
Thiết kế website bán sản phẩm công nghệ
Sinh viên thực hiện: Phùng Duy Long

Ngành: Công nghệ thông tin
Lớp: UD23.13
Hà Nội - Năm 2022

LỜI NÓI ĐẦU
Ngày nay với sự phát triển mạnh mẽ và nhanh chóng của lĩnh vực công nghệ
thông tin được ứng dụng trong mọi ngành nghề, lĩnh vực. Từ việc đọc tin tức, nghe
nhạc, giải trí hay học tập, thương mại điện tử. Công nghệ thông tin phát triển không
ngừng, việc phát triển một website để quảng bá công ty hay một website cá nhân không
còn gì xa lạ. Trong đó một trang web trực tuyến hỗ trợ việc bán hàng qua mạng hiện
nay rất phổ biến và không thể thiếu đối với một cửa hàng, giúp cho khách hàng mua
những gì mình cần mà không cần phải tốn nhiều thời gian.
Hiện nay có rất nhiều công nghệ được sử dụng để phát triển website (PHP, ASP,
ASP.NET, JSP...). Trong đó công nghệ ReactJS và Laravel có thể là lựa chọn phù hợp
để phát triển một trang web vì tốc độ xử lý nhanh và hiệu năng cao do ReactJS mang
lại.
Xuất phát từ những nhu cầu thực tế trên nên chúng em quyết định chọn đề tài
“xây dựng website thương mại điện tử” với ngôn ngữ ReactJS và Laravel, nhằm xây
dựng một website bán hàng trực tuyến hiệu năng cao và tiện ích cho người dùng.
Sinh viên thực hiện đề tài :
Phùng Duy Long

MSV: 18116102
Điện Thoại: 0928735115
Email: lonhphunh@gmail.com
LỜI CẢM ƠN
Em xin chân thành cảm ơn quý thầy cô trong khoa Công Nghệ Thông Tin
trường Đại học Kinh Doanh và Công Nghệ, để có thể hoàn thành được đồ án tốt nghiệp
này là kết quả nền tảng từ kiến thức của sự giảng dạy tận tình của các quý thầy cô,
trang bị cho chúng em những kiến thức quý báu và vận dụng những kiến thức đã học
vào công việc khi ra trường.
Đặc biệt với tấm lòng biết ơn sâu sắc cảm ơn cô Nguyễn Vân Anh đã trực tiếp
hướng dẫn, đóng góp ý kiến, giúp đỡ chúng em hoàn thành đồ án tốt nghiệp này.
Mặc dù đã cố gắng nổ lực thực hiện đồ án này nhưng với kiến thức và thời gian
có hạn, chắc hẳn đồ án này sẽ không tránh khỏi sai sót. Em rất mong nhận được sự
thông cảm và đóng góp ý kiến của thầy cô để chúng em có thể hoàn thiện tốt hơn cho
sau này.
Em xin chân thành cám ơn !
Hà Nội, tháng 6 năm 2022

Sinh viên thực hiện
Phùng Duy Long
NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
Hà Nội, ngày......tháng......năm 2022
Giáo viên hướng dẫn
NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
Hà Nội, Ngày ……. Tháng……. Năm 2022
Giáo viên phản biện
NHẬN XÉT CỦA HỘI ĐỒNG BẢO VỆ ĐỒ ÁN TỐT NGHIỆP
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
Hà Nội, Ngày ……. Tháng……. Năm 2022
Thư kí hội đồng Chủ tịch hội đồng
MỤC LỤC
CHƯƠNG 1. CƠ SỞ LÝ LUẬN............................................................
1. Lý do chọn đề tài ?...............................................................................................1
1.1. Các công nghệ sử dụng trong website...............................................................2
1.1.1. Laravel Framework....................................................................................2
1.1.2. Mô hình MVC............................................................................................5
1.1.3. Công Nghệ ReactJS....................................................................................6
1.1.4. Tổng quan về Web API..............................................................................7
1.1.5. Framework React-Bootstrap.......................................................................7
1.1.6. Tổng quan về Material UI..........................................................................9
1.2. Thương mại điện tử...........................................................................................9
1.2.1. Tổng quan về thương mại điện tử...............................................................9
1.2.2. Lợi ích chung của thương mại điện tử........................................................9
1.2.3. Các loại hình ứng dụng.............................................................................10
1.2.4. Thanh toán điện tử....................................................................................11
CHƯƠNG 2: THỰC TRẠNG.............................................................12
2.1. Thực trạng của thương mại điện tử tại Việt Nam...............................................12
2.2. Đánh giá thực trạng............................................................................................15
2.3 Ưu và nhược điểm của đề tài...............................................................................15
2.3.1 Ưu điểm........................................................................................................15
2.3.2 Nhược điểm..................................................................................................16
CHƯƠNG 3.GIẢI PHÁP.....................................................................11
3.1. Đặc tả chức năng................................................................................................11
3.1.1. Đối với người truy cập website....................................................................11
3.1.2. Đối với người quản trị..................................................................................13
3.2. Use Case.............................................................................................................14
3.2.1. Xác định tác nhân trong hệ thống.................................................................14
3.2.2. Xác định Use Case khách hàng tổng quát....................................................16
3.2.3. Xác định Use Case Admin tổng quát...........................................................17
3.3. Cơ sở dữ liệu......................................................................................................17
3.3.1. Danh mục các bảng......................................................................................17
3.3.2. Mô hình cơ sở dữ liệu..................................................................................25
3.4. Cấu trúc thư mục đồ án......................................................................................25
3.4.1 Cấu trúc thư mục ở Back-end và Front-end..................................................25
3.5. Giao diện website khách hàng............................................................................26
3.5.1. Giao diện trang chủ website khách hàng......................................................26
3.5.2. Giao diện đăng ký........................................................................................27
3.5.3. Giao diện đăng nhập....................................................................................29
3.5.4. Giao diện quên mật khẩu..............................................................................29
3.5.5. Giao diện mail khôi phục mật khẩu..............................................................31
3.5.6. Giao diện khôi phục mật khẩu......................................................................31
3.5.7. Giao diện tìm kiếm sản phẩm tự động..........................................................32
3.5.8. Giao diện trang kết quả tìm kiếm.................................................................34
3.5.9. Giao diện chi tiết sản phẩm..........................................................................35
3.5.10. Giao diện giỏ hàng.....................................................................................36
3.5.11. Giao diện thanh toán Momo.......................................................................37
3.5.12. Giao diện thanh toán Paypal.......................................................................38
3.5.13. Giao diện thanh toán Vnpay.......................................................................40
3.5.14. Giao diện chi tiết đơn hàng........................................................................41
3.5.15. Giao diện xây dựng cấu hình......................................................................42
3.5.16. Giao diện tất cả đơn hàng chưa thanh toán.................................................44
3.5.17. Giao diện tất cả đơn hành đã thanh toán....................................................44
3.5.18. Giao diện tất cả đơn hàng đã hoàn thành....................................................45
3.5.19. Giao diện tất cả đơn hàng đã hủy...............................................................45
3.5.20. Giao diện thông tin tài khoản.....................................................................46
3.5.21. Giao diện thay đổi mật khẩu......................................................................47
3.5.22. Giao diện hướng dẫn thanh toán................................................................47
3.6. Giao diện trang quản trị......................................................................................49
3.6.1. Giao diện trang chủ......................................................................................49
3.6.2. Giao diện trang quản lý sản phẩm................................................................52
3.6.3. Giao diện trang thêm sản phẩm....................................................................53
3.6.4. Giao diện thêm cấu hình sản phẩm..............................................................55
3.6.5. Giao diện trang thêm ảnh cho sản phẩm......................................................57
3.5.6. Giao diện trang sửa sản phẩm......................................................................57
3.6.7. Giao diện trang quản lý loại sản phẩm.........................................................59
3.6.8. Giao diện trang thêm loại sản phẩm.............................................................60
3.6.9. Giao diện sửa loại sản phẩm........................................................................61
3.6.10. Giao diện quản lý đơn hàng.......................................................................62
3.6.11. Giao diện chi tiết đơn hàng........................................................................63
3.6.12. Giao diện quản lý người dùng....................................................................63
3.6.13. Giao diện thêm người dùng........................................................................65
3.6.14. Giao diện cập nhật người dùng..................................................................65
3.6.15. Giao diện quản lý slide...............................................................................68
CHƯƠNG 4: KẾT LUẬN....................................................................71
4.1. Kết quả đạt được................................................................................................71
4.2. Phần hạn chế cùa đề tài......................................................................................71
4.3. Hướng phát triển................................................................................................72
TÀI LIỆU THAM KHẢO....................................................................67
DANH MỤC CÁC KÝ TỰ, CÁC TỪ VIẾT TẮC
STT Từ viết tắt Ý nghĩa
1 HTML Hypertext Markup Language
2 CSS Cascading Style Sheets
3 MVC Model - View - Control
4 API Application Programming Interface
5 IT Information Technology
6 UC Use Case
7 CSDL Cơ Sỡ Dữ Liệu
DANH MỤC CÁC BẢNG
Bảng 2.3.1.1. Bảng sản phẩm.........................................................................................16

Bảng 2.3.1.2. Bảng loại sản phẩm..................................................................................16
Bảng 2.3.1. 3. Bảng ảnh sản phẩm................................................................................16
Bảng 2.3.1.4. Bảng cấu hình..........................................................................................17
Bảng 2.3.1.5. Bảng chi tiết cấu hình..............................................................................17
Bảng 2.3.1.6. Bảng đơn hàng.........................................................................................17
Bảng 2.3.1.7. Bảng chi tiết đơn hàng.............................................................................17
Bảng 2.3.1.8. Bảng bình luận.........................................................................................18
Bảng 2.3.1.9. Bảng hình thức giao hàng.......................................................................18
Bảng 2.3.1.10. Bảng hình thức thanh toán...................................................................19
Bảng 2.3.1.11. Bảng loại người dùng.............................................................................19
Bảng 2.3.1.12. Bảng người dùng....................................................................................19
Bảng 2.3.1.13. Bảng khôi phục mật khẩu.....................................................................20
Bảng 2.3.1.14. Bảng slide...............................................................................................20
Bảng 2.3.1.15. Bảng trạng thái đơn hàng.....................................................................20
Bảng 2.3.1. 16. Bảng kích hoạt tài khoản.....................................................................20
DANH MỤC HÌNH ẢNH
Hình 1.1.2. Mô hình MVC...............................................................................................

Hình 1.1.1.3. Cách hoạt động của Laravel.....................................................................
Hình 1.1.5.1. Logo React- Boostrap................................................................................
Hình 2.2.1. Tác nhân trrong hệ thống...........................................................................13
Hình 2.2.2. Use Case khách hàng tổng quát.................................................................14
Hình 2.2.3. Use Case Admin tổng quát.........................................................................15
Hình 2.3.1. Mô hình cơ sở dữ liệu.................................................................................21
Hình 3.1.1. Cấu trúc thư mục........................................................................................22
Hình 3.2.1. Giao diện trang chủ website khách hàng..................................................23
Hình 3.2.2. Giao diện đăng ký.......................................................................................25
Hình 3.2.3. Giao diện đăng nhập...................................................................................26
Hình 3.2.4. Giao diện quên mật khẩu...........................................................................27
Hình 3.2.5. Giao diện mail khôi phục mật khẩu..........................................................28
Hình 3.2.6. Giao diện khôi phục mật khẩu...................................................................29
Hình 3.2.7. Giao diện tìm kiếm sản phẩm tự động......................................................30
Hình 3.2.8. Giao diện kết quả tìm kiếm sản phẩm.......................................................31
Hình 3.2.9. Giao diện chi tiết sản phẩm........................................................................32
Hình 3.2.10. Giao diện giỏ hàng....................................................................................33
Hình 3.2.11. Giao diện thanh toán momo.....................................................................34
Hình 3.2.12. Giao diện thanh toán Paypal....................................................................35
Hình 3.2.13. Giao diện thanh toán Vnpay....................................................................36
Hình 3.2.14. Giao diện chi tiết đơn hàng hủy...............................................................37
Hình 3.2.15. Giao diện xây dựng cấu hình...................................................................38
Hình 3.2.16. Giao diện tất cả đơn hàng chưa thanh toán............................................40
Hình 3.2.17. Giao diện tất cả đơn hàng đã thanh toán................................................40
Hình 3.2.18. Giao diện tất cả đơn hàng đã hoàn thành...............................................41
Hình 3.2.19. Giao diện tất cả đơn hàng đã hủy............................................................41
Hình 3.2.20. Giao diện thông tin tài khoản...................................................................42
Hình 3.2.21. Giao diện thay đổi mật khẩu....................................................................43
Hình 3.2.22. Giao diện hướng dẫn thanh toán.............................................................44
Hình 3.2.14. 1. Giao diện chi tiết đơn hàng thành công 37
Hình 3.2.15.1. Giao diện chọn linh kiện 38

Hình 3.2.15.2. Giao diện chọn xong linh kiện cho cấu hình........................................39
Hình 3.3.1. Giao diện trang chủ (Top 5 sản phẩm được bán nhiều nhất) 45
Hình 3.3.2. Giao diện quản lý sản phẩm.......................................................................49
Hình 3.3. 3. Giao diện thêm sản phẩm.........................................................................50
Hình 3.3.4. Giao diện thêm cấu hình sản phẩm...........................................................51
Hình 3.3.5. Giao diện trang thêm ảnh sản phẩm.........................................................52
Hình 3.3.6. Giao diện cập nhật sản phẩm.....................................................................53
Hình 3.3.7. Giao diện quản lý loại sản phẩm................................................................54
Hình 3.3.8. Giao diện trang thêm loại sản phẩm.........................................................55
Hình 3.3. 9. Gioa diện sửa loại sản phẩm.....................................................................56
Hình 3.3.10. Giao diện quản lý đơn hàng.....................................................................57
Hình 3.3.11. Giao diện chi tiết đơn hàng......................................................................58
Hình 3.3.12. Giao diện quản lý người dùng..................................................................59
Hình 3.3.13. Giao diện thêm người dùng (1)................................................................59
Hình 3.3.14. Giao diện cập nhật người dùng (1)..........................................................61
Hình 3.3.15. Giao diện quản lý slide.............................................................................62
Hình 3.3.1.1. Giao diện trang chủ quản trị (thống kê theo tháng)..............................45
Hình 3.3.1.2. Giao diện quản trị (thống kê theo năm).................................................46
Hình 3.3.1. 3. Giao diện excel thống kê theo tháng......................................................47
Hình 3.3.1.4. Giao diện excel thống kê theo năm.........................................................48
Hình 3.2.15.1. Giao diện chọn linh kiện........................................................................38
Hình 3.2.15.2. Giao diện chọn xong linh kiện cho cấu hình........................................39
Hình 3.3.6.1. Giao diện cập nhật sản phẩm (2)............................................................54
Hình 3.3.9. 1. Giao diện popup thêm cấu hình mới.....................................................56
Website thương mại điện tử NBSTORE
CHƯƠNG 1. CƠ SỞ LÝ LUẬN
1. Lý do chọn đề tài ?
- Ngày nay, công nghệ thông tin không ngừng phát triển một cách mạnh
mẽ và hiện đại. Các ứng dụng của công nghệ thông tin ngày càng đi sâu vào
đời sống con người trở thành một bộ phận không thể thiếu của thế giới văn
minh. Với xu thế toán càu hóa nền kinh tế thế giới, đặc biệt là nhu cầu trao đổi
hàng hóa của con người ngày càng tăng cả về số lượng và chất lượng, nhu cầu
sử dụng Internet ngày càng nhiều và các hình thức kinh doanh trên mạng ngày
càng đa dạng và trở thành một công cụ không thể thiếu. Vì vậy, nhiều cửa
hàng đồ điện tử đã áp dụng phương pháp bán hàng qua mạng (thương mại điện tử)
để khách hàng dễ dạng tìm kiếm thông tin và không cần tốn nhiều thời gian
và chi phí.
- Đối với một cửa hàng đồ điện tử quy mô lớn như vậy, việc quảng bá và giới
thiệu đến khách hàng các cuốn sách hay, cung cấp các thông tin giúp cho khách
hàng lựa chọn được một cuốn sách ưng ý. vấn đề đặt ra song song với nó là làm sao
khách hàng có thể đặt mua những cuốn sách đã chọn một cách nhanh chóng và tiện
lợi, không cần mất thời gian đến tận nơi lựa chọn và thanh toán.Từ những vấn đề
đặt ra ở trên, được sự đồng ý và sự hướng dẫn tận tình của thầy cô, em đã chọn đề
tài: “THIẾT KẾ WEBSITE BÁN HÀNG NB STORE” .Với mong muốn đề tài sẽ
được đưa vào ứng dụng cho cửa hàng điện tử NBSTORE, vì yậy em sẽ cố gắng hết
mình và mong nhậnđược những ý kiến đóng góp và chỉ đạo của cácthầy cô.
SVTH: Phùng Duy Long 1 GVHD: Hoàng Lan Phương

1.1. Các công nghệ sử dụng trong website

1.1.1. Laravel Framework
1.1.1.1. Tồng quan về Laravel
 Laravel là một framework rõ ràng và ưu việt cho việc phát triển web PHP với cú
pháp dễ hiểu và tiện lợi.
 Laravel là một framework PHP 5.3 được miêu tả như “một framework cho web
artisan”. Theo tác giả Taylor Otwell, Laravel mang lại niềm vui cho việc lập
trình bởi sự đơn giản, súc tích và đặc biệt là trình bày hợp lý.
 Laravel có 3 đặc tính nổi trội:
o Đơn giản: các chức năng của Laravel rất dễ hiểu và thực hiện.
o Ngắn gọn: hầu hết các chức năng của Laravel hoạt động liên tục với cấu
hình rất nhỏ, dựa vào các quy tắc chuẩn để giảm bớt code-bloat.
o Trình bày hợp lý: hướng dẫn sử dụng Laravel rất đầy đủ và luôn cập
nhật. Nhà lập trình, người tạo ra framework luôn cập nhật tài liệu trước
khi cho ra một phiên bản mới, đảm bảo những người học lập trình luôn
luôn có những tài liệu mới nhất.
Laravel trở nên khác biệt với khác framework khác:

 Bundles: là dành cho Laravel cũng như PEAR là cho PHP. Ngoài ra laravel đi
kèm với công cụ command-line gọi là Artisan, giúp việc cài đặt các gói dễ dàng.
 Eloquent ORM: là file thực thi PHP Active Record tiên tiến nhất hiện có.
 Migrations: Trong laravel, migrations được xây dựng trong framework có thể
thực hiện thông quan Artisan command-line.
 Unit-testing: laravel là 1 framework ổn định để tích hợp PHP Unit.
 Redis: Laravel hỗ trợ Redis rất ngắn gọn.
1.1.1.2. Lợi ích khi sử dụng Laravel Framework
Dễ dàng sử dụng

Laravel là một Framework được công nhận là tốt nhất hiện tại và được sử dụng
rộng rãi. Đối với người mới bắt đầu làm ứng dụng web thì Laravel là một Framework
đáng sử dụng nhất. Hơn thế nữa là cộng động hỗ trợ với Framework này rất nhiều rất
thuận tiện cho việc bất đầu một cách dễ dàng.
Có mã nguồn mở
Framework Laravel với những mã nguồn mở miễn phí cho phép chúng ta xây
dựng ứng dụng web lớn và phức tạp một cách nhanh chóng và dễ dàng hơn. Tất cả
những gì chúng ta cần làm chính là cài đặt PHP cùng với một trình soạn thảo văn bản
để bắt đầu.
Laravel hỗ trợ mô hình MVC
Sự hỗ trợ MVC là một trong những yếu tố quan trọng giúp cho Laravel trở thành
framework PHP tốt nhất để phát triển. Hầu hết các nền tảng không cung cấp hỗ trợ
MVC, trong khi đó Laravel hỗ trợ mô hình MVC giúp cải thiện hiệu suất tổng thể, tài
liệu tốt hơn và cung cấp nhiều chức năng. Điều này làm cho sự phát triển của Laravel
khá hấp dẫn và dễ dàng.
Hỗ trợ cộng đồng
Trong những trường hợp chúng ta gặp những lỗi khó giải quyết, Laravel có một
cộng đồng hỗ trợ lớn chúng ta chỉ cần tìm kiếm trên Facebook hoặc lỗi lên Google sẽ
được mọi người giúp cách giải quyết.
Di chuyển Database dễ dàng
Di chuyển Database là một trong những tính năng trọng yếu của Laravel. Laravel
sẽ cho phép chúng ta duy trì cấu trúc cơ sở dữ liệu ứng dụng mà không nhất thiết phải
tạo lại. Khi di chuyển Database còn cho phép chúng ta viết các mã PHP để kiểm soát
database thay vì phải sử dụng SQL. Laravel cũng cho phép chúng ta khôi phục được
những thay đổi gần nhất trong database.
Tính năng bảo mật hoàn thiện

Các ứng dụng của chúng ta sẽ rất an toàn khi chúng ta sử dụng framework
laravel. Kỹ thuật ORM của laravel sử dụng PDO, chống chèn SOL. Ngoài ra, các tính
năng bảo vệ crsf của laravel sẽ giúp ngăn chặn giả mạo từ yêu cầu trang chéo. Đó là
một cú pháp tự động thoát bất kỳ HTML nào đang được truyền qua các tham số xem
để nhằm ngăn chặn các kịch bản chéo trên trang web và điều chúng ta cần thực hiện ở
đây chính là sử dụng các thành phần thích hợp của khuôn khổ.
1.1.1.3. Cách hoạt động của Laravel
Hình 1.1.1.1.
Cách hoạt động của
Laravel
1.1.2. Mô hình MVC

Hình 1.1.1. Mô hình MVC

Mô hình MVC là viết tắt tiếng anh của ba từ: Model + View + Controller.
Đây là một mô hình tổ chức code một cách hợp lý và có hệ thống hơn, giúp bóc
tách các phần xử lý riêng biệt thuận lợi cho việc phát triển, chỉnh sửa và làm việc theo
project.
Model: Đây là thành phần chứa tất cả các nghiệp vụ logic, phương thức xử lý,
truy xuất database, đối tượng mô tả dữ liệu như: các Class, hàm xử lý...
View: Đảm nhận việc hiển thị thông tin, tương tác với người dùng, nơi chứa tất
cả các đối tượng GUI như: textbox, images...Hiểu một cách đơn giản là tập hợp các
form hoặc các file HTML.
Controller: Giữ nhiệm vụ nhận điều hướng các yêu cầu từ người dùng và gọi
đúng những phương thức xử lý yêu cầu...Chẳng hạn thành phần này sẽ nhận request từ
url và form để thao tác trực tiếp với Model.

Cơ chế hoạt động của mô hình MVC

 User tương tác với View, bằng cách click vào button, user gửi yêu cầu đi.
 Controller nhận và điều hướng chúng đến đúng phương thức xử lý ở Model.
 Model nhận thông tin và thực thi các yêu cầu.
 Khi Model hoàn tất việc xử lý, View sẽ nhận kết quả từ Model và hiển thị lại
cho người dùng.
Ưu, nhược điểm của MVC:
Ưu điểm : Thể hiện tính chuyên nghiệp trong lập trình, phân tích thiết kế. Do
được chia thành các thành phần độc lập nên giúp phát triển ứng dụng nhanh, đơn giản,
dễ nâng cấp, bảo trì.
Nhược điểm : Đối với dự án nhỏ việc áp dụng mô hình MVC gây cồng kềnh,
tốn thời gian trong quá trình phát triển. Tốn thời gian trung chuyển dữ liệu của các
thành phần.
1.1.3. Công Nghệ ReactJS
1.1.3.1. Đôi nét về ReactJS
ReactJS là một thư viện Javascript mã nguồn mở hỗ trợ xây dựng các thành
phần giao diện nhanh gọn và tiện lợi. Bình thường các lập trình viên sẽ nhúng
javascript vào code HTML thông qua các attribute như AngularJS nhưng với
Reactjs làm việc như một thư viện cho phép nhúng HTML vào javascript thông
qua JSX. Qua đó có thể dễ dàng lồng các đoạn HTML vào trong JSX làm cho các
component dễ hiểu và dễ sử dụng hơn.
1.1.3.2. Tính năng của ReactJs
 JSX – JSX là phần mở rộng cú pháp JavaScript. Không nhất thiết phải sử dụng
JSX trong phát triển React.
 Các Component (Thành phần) – React là tất cả về các Component. Chúng ta cần
nghĩ mọi thứ như một Component. Điều này sẽ giúp chúng ta duy trì mã khi làm
việc trên các dự án quy mô lớn hơn.

1.1.3.3. Ưu điểm và nhược điểm của ReactJS

 Ưu điểm:
 Sử dụng DOM ảo là một đối tượng JavaScript. Điều này sẽ cải thiện hiệu suất ứng
dụng, vì DOM ảo Javascript nhanh hơn DOM thông thường.
 Có thể được sử dụng trên máy khách và máy chủ cũng như với các khuôn khổ
khác.
 Các mẫu thành phần và dữ liệu cải thiện khả năng đọc, giúp duy trì các ứng dụng
lớn hơn.
 Nhược điểm:
 Chỉ bao gồm lớp xem của ứng dụng, do đó chúng ta vẫn cần chọn các công nghệ
khác để có được bộ công cụ hoàn chỉnh để phát triển.
 Sử dụng khuôn mẫu nội tuyến và JSX, điều này có vẻ khó xử đối với một số nhà
phát triển.
1.1.4. Tổng quan về Web API
Web API hay ASP.NET Web API là một framework dùng để xây dựng và lập
trình các dịch vụ web HTTP. Web API có dạng là một RESTful API hiện đại, hội tụ đủ
các điều kiện của REST cũng như các tiêu chuẩn tương tự, được tối ưu cho các dịch vụ
trực tuyến cũng như ứng dụng web hiện nay.
1.1.5. Framework React-Bootstrap
1.1.5.1. Tổng quan về React-Bootstrap
React-Bootstrap cung cấp sẵn một bộ các React component với look-and-feel của
Twitter Bootstrap component từ đó giúp việc tạo dựng UI cho React app dễ dàng hơn
bao giờ hết. Ví dụ khi ta mô tả một button nhỏ, text là “Something”, click event trigger
hàm callback “someCallback”.

Hình 1.1.5.1. Logo React- Boostrap

1.1.5.2. Những lợi ích khi sử dụng React-Bootstrap
a. Hạn chế sự phụ thuộc vào jQuery
Bootstrap được đóng gói kèm theo bootstrap.js, thư viện này phụ thuộc vào jQuery
và jQuery thực hiện các phép tính toán làm thay đổi DOM thực. Trong khi đó React
không tương tác trực tiếp với DOM thực mà gián tiếp thông qua DOM ảo. Khi chúng ta
bất cẩn để jQuery thay đổi DOM thực, React không hề biết đến sự thay đổi đó dẫn đến
việc DOM ảo và DOM thực mất tính đồng bộ và phát sinh lỗi conflict. Sử dụng React-
Bootstrap component chúng ta có thể tránh được vấn đề này.
b. Cung cấp Bootstrap API hoàn thiện hơn
Bootstrap code thường lặp lại ví dụ như ở đoạn code html trên chúng ta phải viết
“btn” tới 3 lần trong “btn btn-success btn-sm” để mô tả một element “button”. React
quản lý toàn bộ quá trình render webpage thông qua Javascript. Vì vậy, chúng ta chỉ cần
mô tả element được render như thế nào bằng một Javascript object và React sẽ làm phần
việc còn lại, tạo ra element đó trong DOM và hiển thị trên trình duyệt cho chúng ta.

1.1.6. Tổng quan về Material UI

1.1.6.1. Khái niệm về Material UI
Material UI là một thư viện các React Component đã được tích hợp thêm cả
Google's Material Design. Theo như giới thiệu trên trang chủ thì được xây dựng nhờ
tình cảm với React và Google's Material Design. Do đó mà phần hướng dẫn trên trang
chủ của Material UI cũng đã nói nên sử dụng Material UI với React.
1.1.6.2. Lợi ích khi sử dụng Material UI
Material UI đem đến cho chúng ta và trang web của chúng ta một giao diện hoàn
toàn mới, với những button, textfield, toogle... được design theo một phong cách mới lạ,
thay vì việc nhà nhà người người dùng Bootstrap như hiện nay.
1.2. Thương mại điện tử
1.2.1. Tổng quan về thương mại điện tử
Thương mại điện tử hiểu một cách tổng quát là việc tiến hành một phần hay
toàn bộ hoạt động thương mại bằng những phương tiện điện tử. Thương mại điện
tử vẫn mang bản chất như các hoạt động thương mại truyền thống. Tuy nhiên,
thông qua các phương tiện điện tử mới, các hoạt động thương mại được thực hiện
nhanh hơn, hiệu quả hơn, giúp tiết kiệm chi phí và mở rộng không gian kinh doanh.
Thương mại điện tử càng được biết tới như một phương thức kinh doanh hiệu
quả từ khi internet hình thành và phát triển. Chính vì vậy, nhiều người hiểu thương
mại điện tử theo nghĩa cụ thể hơn là giao dịch thương mại, mua sắm qua internet và
mạng (ví dụ mạng internet của doanh nghiệp).
1.2.2. Lợi ích chung của thương mại điện tử
Lợi ích lớn nhất mà thương mại điện tử đem lại chính là sự tiết kiệm chi phí và tạo
thuận lợi cho các bên giao dịch.
Giao dịch bằng phương tiện điện tử nhanh hơn so với giao dịch truyền thống, ví
dụ gửi fax hay thư điện tử thì nội dung thông tin đến tay người nhận nhanh hơn
gửi thư.

Các giao dịch qua internet có chi phí rất rẻ, một doanh nghiệp có thể gửi thư tiếp
thị, chào hàng đến hàng loạt khách hàng chỉ với chi phí giống như gửi cho một
khách hàng.
Với thương mại điện tử, các bên có thể tiến hành giao dịch khi ở cách xa nhau,
giữa thành phố với nông thôn, từ nước này sang nước kia, hay nói cách khác là
không bị giới hạn bởi không gian địa lý. Điều này cho phép các doanh nghiệp tiết
kiệm chi phí đi lại, thời gian gặp mặt trong khi mua bán.
Với người tiêu dùng, họ có thể ngồi tại nhà để đặt hàng, mua sắm nhiều loại
hàng hóa, dịch vụ thật nhanh chóng. Những lợi ích như trên chỉ có được với những
doanh nghiệp thực sự nhận thức được giá trị của thương mại điện tử.
Vì vậy, thương mại điện tử góp phần thúc đẩy sự cạnh tranh giữa các doanh
nghiệp để thu được nhiều lợi ích nhất. Điều này đặc biệt quan trọng trong bối cảnh
hội nhập kinh tế quốc tế, khi các doanh nghiệp trong nước phải cạnh tranh một cách
bình đẳng với các doanh nghiệp nước ngoài.
1.2.3. Các loại hình ứng dụng
Dựa vào chủ thể của thương mại điện tử, có thể phân chia thương mại điện tử ra
các loại hình phổ biến như sau :
 Giao dịch giữa doanh nghiệp với doanh nghiệp.
 Giao dịch giữa doanh nghiệp với khách hàng.
 Giao dịch giữa doanh nghiệp với cơ quan nhà nước.
 Giao dịch trực tiếp giữa các cá nhân với nhau.
 Giao dịch giữa cơ quan nhà nước với cá nhân.
1.2.4. Thanh toán điện tử
Thanh toán điện tử là hình thức thanh toán tiến hành trên môi trường internet,
thông qua hệ thống thanh toán điện tử người sử dụng mạng có thể tiến hành các hoạt
động thanh toán, chi trả, chuyển tiền, …Thanh toán điện tử được sử dụng khi chủ thể
tiến hành mua hàng trên các siêu thị ảo và thanh toán qua mạng. Để thực hiện việc

thanh toán, thì hệ thống máy chủ của siêu thị phải có được phầm mềm thanh toán trong
website của mình.
CHƯƠNG 2: THỰC TRẠNG

2.1. Thực trạng của thương mại điện tử tại Việt Nam
Theo báo cáo của Hiệp hội Thương mại điện tử Việt Nam, năm 2019, mức tăng
trưởng của TMĐT ở Việt Nam trong 4 năm qua thực sự rất nổi bật. Đây chính là mảnh
đất tiềm năng cho các doanh nghiệp muốn khai thác thị trường này, cụ thể:
Về tốc độ tăng trưởng: Song song với sự phát triển vững chắc của nền kinh tế với
tốc độ tăng trưởng GDP trên 7%, năm 2018 tiếp tục chứng kiến sự tăng trưởng mạnh

mẽ của TMĐT. Dựa trên thông tin khảo sát, Hiệp hội Thương mại điện tử Việt Nam
ước tính tốc độ tăng trưởng của TMĐT năm 2018 so với năm 2017 đạt trên 30%.
Về quy mô: Năm 2018, TMĐT Việt Nam tiếp tục phát triển toàn diện với tốc độ
tăng trưởng trên 30%. Tuy chỉ có xuất phát điểm là xấp xỉ 4 tỷ USD vào năm 2015
nhưng nhờ tốc độ tăng trưởng trung bình trong 3 năm liên tiếp cao nên quy mô thị
trường TMĐT năm 2018 đã lên tới khoảng 7,8 tỷ USD. Nếu tốc độ tăng trưởng của
năm 2019 và 2020 tiếp tục ở mức 30% thì tới năm 2020 quy mô thị trường sẽ lên tới 13
tỷ USD. Quy mô này sẽ cao hơn mục tiêu nêu trong Kế hoạch tổng thể phát triển
TMĐT giai đoạn 2016 - 2020, theo mục tiêu này, quy mô TMĐT bán lẻ (B2C) sẽ đạt
10 tỷ USD vào năm 2020.
Theo Báo cáo E-Conomy SEA 2018 của Google và Temasek, quy mô thị trường
TMĐT Việt Nam năm 2018 là 9 tỷ USD. Báo cáo cũng dự báo tốc độ tăng trưởng
trung bình năm của giai đoạn 2015 - 2018 là 25% và thị trường đạt 33 tỷ USD vào năm
2025. Nếu kịch bản này xảy ra, quy mô thị trường TMĐT Việt Nam năm 2025 sẽ đứng
thứ ba ở Đông Nam Á, sau Indonesia (100 tỷ USD) và Thái Lan (43 tỷ USD).
Theo báo cáo của Hiệp hội Thương mại điện tử Việt Nam, năm 2019, tỷ lệ doanh
nghiệp trong mô hình B2C xây dựng website những năm gần đây tuy không thay đổi
nhiều, (năm 2018 có 44% cao hơn 1% so với năm 2017 và thấp hơn 1% so với năm
2016), nhưng đa số những doanh nghiệp này đã chú trọng nhiều hơn tới việc chăm sóc,
cập nhật thông tin trên hệ thống website của mình. Cụ thể, 47% DN cho biết thường
xuyên cập nhật thông tin hàng ngày, 23% DN có cập nhật thông tin hàng tuần. Điều
này chứng tỏ, các DN đã chú trọng hơn nhiều đến việc chăm sóc hình ảnh, thương hiệu
của mình, sẵn sàng cho việc tăng cường nhiều hơn các hình thức kinh doanh trực
tuyến. Năm 2018, trong số các DN được khảo sát, có đến 36% DN cho biết có bán

hàng trên mạng xã hội, tăng 4% so với năm 2017; 12% DN có kinh doanh qua sàn
TMĐT - tăng 1% so với năm 2017; 17% DN có kinh doanh trên nền tảng di động.
Trong giao dịch TMĐT B2C, khảo sát về vấn đề nhận đơn đặt hàng và đặt hàng qua
các công cụ trực tuyến có: 84% DN cho biết có nhận đơn đặt hàng và đặt hàng thông
qua email; 49% nhận đơn đặt hàng qua mạng xã hội; 45% đối với việc đặt hàng qua
website – bao gồm 36% đối với việc nhận đơn đặt hàng, 44% đối với việc đặt hàng;
qua sàn TMĐT là 13% đối với việc nhận đơn đặt hàng, 19% đối với việc đặt hàng. Như
vậy, các DN của Việt Nam đã quan tâm hơn đến chiến lược kinh doanh online. Tuy
nhiên, việc thực hiện vẫn ở mức thấp chưa xứng tầm với quy mô và tiềm năng của
TMĐT, nhiều DN vừa và nhỏ vẫn chưa sẵn sàng cho sự thay đổi này.
Thói quen mua hàng của người tiêu dùng Việt Nam cũng có những thay đổi tích
cực. Từ việc chỉ quen với giao dịch kinh doanh truyền thống, mặt đối mặt, được cầm,
ngắm và có thể được thử sản phẩm, thì nay họ đã dần tiếp cận và yêu thích hình thức
mua sắm trực tuyến.
Theo “Sách trắng Thương mại điện tử Việt Nam 2019”, có đến 70% người dùng
Internet tham gia mua sắm trực tuyến ít nhất một lần trong năm, 61% người dùng sử
dụng Internet cho mục đích tìm kiếm thông tin mua hàng, với tỉ lệ người dùng có thời
lượng truy cập Internet từ 3-5 tiếng một ngày lên đến 30%. Các mặt hàng được người
tiêu dùng trực tuyến ưa chuộng là quần áo, giày dép, mỹ phẩm (61%), sau đó đến sách,
văn phòng phẩm, quà tặng, thiết bị đồ gia dụng (46%), đồ công nghệ và điện tử (43%),
… Giá trị mua sắm trực tuyến của người tiêu dùng trên 5 triệu đồng chiếm tỉ lệ cao
nhất - 35%, từ 3 triệu đồng đến 5 triệu đồng chiếm 22%, từ 1 triệu đồng đến 3 triệu
đồng chiếm tỷ lệ 26%. Các kết quả này cho thấy, ngày càng có nhiều người tiêu dùng
sẵn sàng tham gia và yêu thích mua sắm trực tuyến. Đây cũng là dấu hiệu đáng mừng
cho sự phát triển TMĐT của Việt Nam.

Bên cạnh những thành tựu đáng kể đã đạt được của TMĐT Việt Nam, báo cáo
của Hiệp hội Thương mại điện tử Việt Nam năm 2019 cũng chỉ ra vẫn còn nhiều cản
trở cho sự bứt phá trong giai đoạn tới.
Đơn cử như dịch vụ logistics - giao hàng chặng cuối - hoàn tất đơn hàng còn
nhiều hạn chế. Dù có đến trên 70% người mua hàng trực tuyến sử dụng hình thức thanh
toán dịch vụ thu hộ người bán (COD) nhưng tỷ lệ người mua hoàn trả sản phẩm đã đặt
hàng trực tuyến còn cao. Ước tính, tỷ lệ trung bình tổng giá trị của các sản phẩm hoàn
trả so với tổng giá trị đơn hàng lên tới 13%, có DN phải chịu tỷ lệ này ở mức 26%.
Điều này gây khó khăn rất lớn cho các phần lớn các DN hiện nay.
Thêm vào đó, lòng tin của người tiêu dùng vào giao dịch mua bán trực tuyến còn
thấp. Kết quả báo cáo cho thấy, tỷ lệ người mua hàng trực tuyến lựa chọn hình thức
thanh toán tiền mặt khi nhận hàng COD còn rất cao - đến 88% [1]. Đây cũng là một
vấn đề rất lớn đang tồn tại với TMĐT Việt Nam. Báo cáo cũng thống kê được, chỉ có
48% người được hỏi hài lòng với phương thức mua hàng trực tuyến, tức là vẫn còn một
tỷ lệ lớn đối tượng khách hàng tiềm năng mà các nhà cung cấp dịch vụ TMĐT phải
chinh phục. Nguyên nhân lớn nhất ảnh hưởng đến tâm lý người dùng vẫn là chất lượng
hàng hóa. Điều này cũng được thể hiện rất rõ trong báo cáo điều tra lý do người tiêu
dùng chưa chọn mua sắm trực tuyến, trong đó: 46% vì lý do khó kiểm định chất lượng
hàng hóa, 33% vì lý do không tin tưởng đơn vị bán hàng. Cùng với đó, báo cáo của
Cục Thương mại điện tử và Kinh tế số - Bộ Công Thương cho biết, có đến 83% người
được khảo sát quan ngại sản phẩm kém chất lượng so với quảng cáo. Và còn nhiều lý
do khác, như: giá cả không rẻ hơn khi mua ngoài cửa hàng trong khi đã được khuyến
mãi; thông tin cá nhân bị rò rỉ; mua hàng ở cửa hàng dễ và nhanh gọn hơn; người tiêu

dùng chưa có thẻ ngân hàng để thanh toán; cách thức mua hàng qua mạng vẫn phức tạp
với nhiều người
2.2. Đánh giá thực trạng
Thói quen mua hàng của người tiêu dùng Việt Nam cũng có những thay đổi tích
cực. Từ việc chỉ quen với giao dịch kinh doanh truyền thống, mặt đối mặt, được cầm,
ngắm và có thể được thử sản phẩm, thì nay họ đã dần tiếp cận và yêu thích hình thức
mua sắm trực tuyến.
Thương mại điện tử của Việt Nam đang có có những bước tiến vượt bậc nhưng
vẫn tồn tại không ít những thách thức, rào cản, dẫn đến TMĐT Việt Nam chưa được
khai thác hết tiềm năng.
2.3 Ưu và nhược điểm của đề tài

2.3.1 Ưu điểm
- Không có giới hạn về địa lý, điều này là do mạng lưới toàn cầu nên bạn có thể
mở rộng hoạt động kinh doanh của mình ở bất cứ đâu.
- Bạn có thể hiển thị và cung cấp nhiều loại sản phẩm hơn.
- Chi phí khởi động và bảo trì thấp hơn nhiều so với kinh doanh thương mại
truyền thống.
- Tiết kiệm thời gian khi mua hàng cho khách hàng.
- Dễ dàng hơn trong việc phát triển các chiến lược tiếp thị theo lô, phiếu giảm giá
và chiết khấu.
- Bạn có thể cung cấp thêm thông tin cho khách hàng.
- Có nhiều khả năng đưa ra sự so sánh tốt hơn giữa các sản phẩm với giá cả và
đặc điểm của chúng.
- Bạn có thể là ông chủ của riêng bạn.

- Không có giới hạn thời gian, trừ khi bạn là một người nghiện công việc, điều đó
cho phép bạn điều hòa gia đình tốt hơn và thích nghi công việc với lịch trình và
nhịp sống của bạn.
- Bạn có thể số hóa một phần doanh nghiệp, nhưng bạn luôn có thể có 100% trực
tuyến và điện tử, giúp giảm chi phí xuống mức thực sự phù hợp với mọi ngân
sách.
2.3.2 Nhược điểm

- Sự cạnh tranh cao hơn nhiều vì bất kỳ ai cũng có thể khởi chạy loại hình này
của doanh nghiệp.
- Có người tiêu dùng thích xem sản phẩm trước khi mua và nghi ngờ thanh toán
trực tuyến.
- Không phải tất cả các sản phẩm đều có thể được bán trực tuyến dễ dàng như
nhau.
- Chi phí vận chuyển có thể rất đắt khi khối lượng nhỏ.
- Trung thành với một khách hàng là khá khó khăn do sự cạnh tranh rộng rãi.
- Bảo mật trang web có thể cung cấp cho khách hàng tiềm năng rất nhiều câu hỏi.
- Người tiêu dùng muốn giá tốt nhất và dịch vụ tốt nhất và rất khó để có được cả
hai luôn luôn.
- Nếu bạn có xu hướng trì hoãn, bạn sẽ rất dễ bị phân tâm vào những việc hoặc
nhiệm vụ khác, đặc biệt là nếu bạn đang ở nhà. Kỷ luật tốt là điều cần thiết.
- Có nguy cơ xảy ra các cuộc tấn công lừa đảo (đánh cắp khóa và mật khẩu) và
các hành vi độc hại. Nếu trang (hoặc máy chủ) của bạn bị lỗi, bạn sẽ không thể
cung cấp những gì bạn đang bán, mất doanh số bán hàng đó.
- Sự thiếu kiên nhẫn của người tiêu dùng. Trong một cửa hàng thực, bất kỳ nghi
ngờ hoặc câu hỏi nào có thể được trả lời ngay lập tức, trái ngược với những gì

thường xảy ra trực tuyến.Tương tự như vậy, thời gian để có được một sản phẩm
không phải là ngay lập tức và khi một
- người đang vội vàng, thậm chí có thể quyết định không mua sản phẩm do thời
gian sự chậm trễ.

CHƯƠNG 3.GIẢI PHÁP

3.1. Đặc tả chức năng
3.1.1. Đối với người truy cập website
3.1.1.1. Xem nội dung
Người dùng truy cập vào website có thể xem thông tin hình ảnh của các sản
phẩm, chi tiết sản phẩm, tìm kiếm sản phẩm, xem thông tin đơn hàng, thông tin người
dùng, đánh giá sản phẩm. Ngoài ra còn các thông tin liên quan như bài viết, tin tức,
bình luận bài viết, gửi thông tin góp ý liên hệ.
3.1.1.2. Đăng ký thành viên
Người dùng có thể đăng ký thành viên website để có thể bình luận sản phẩm, đặt
mua hàng, gửi thông tin liên hệ đến quản trị website.
Nếu quên mật khẩu người dùng có thể sử dụng chức năng quên mật khẩu, hệ
thống sẽ gửi mật khẩu mới qua email mà khách hàng đăng ký.
3.1.1.3. Đăng xuất khỏi hệ thống
- Là chức năng người dùng thoát khỏi phiên đăng nhập hiện tại
3.1.1.4. Tìm kiếm sản phẩm
Người dùng nhập sản phẩm cần tìm trên thanh tìm kiếm hệ thống sẽ lọc những
sản phẩm liên quan
Khi người dùng nhập sản phẩm cần tìm trên thanh tìm kiếm và ấn nút tìm kiếm.
Hệ thống sẽ chuyển hướng đến trang kết quả tìm kiếm. Ở đây hệ thống sẽ lọc ra những
sản phẩm liên quan và hơn thế nữa là bộ lọc giá từ cao thấp đến và ngược lại thuận tiện
cho người dùng.
3.1.1.5. Thêm sản phẩm vào giỏ hàng
Người dùng ấn nút mua hàng sản phẩm vừa chọn sẽ vào giỏ hàng cá nhân của
người dùng. Ở đây người dùng có thể tùy chỉnh số lượng, thêm, bớt hoặc xóa sản phẩm
ra khỏi giỏ hàng.
SVTH: Phùng Duy Long 11 GVHD: Hoàng Phương Thảo

3.1.1.6. Thanh toán

Khi người dùng tùy chỉnh số lượng sản phẩm hoàn tất. Sau đó người dùng chọn
hình thức thanh toán và hình thức giao hàng của website. Hoàn tất hết tất cả thủ tục
người dùng ấn mua hàng và thanh toán (nếu là thanh toán qua kênh online). Sau đó hệ
thống sẽ gửi mail cho người dùng danh sách sản phẩm mà khách hàng đã mua.
3.1.1.7. Quản lý giỏ hàng
Giỏ hàng bao gồm các sản phẩm mà khách hàng đã chọn mua. Khách hàng có
thể xóa sản phẩm đó khỏi giỏ hàng nếu không muốn chọn, bằng chức năng xóa hoặc có
thể tăng giảm số lượng sản phẩm muốn mua trong giỏ hàng.
3.1.1.8. Quản lý thông tin cá nhân người dùng
Khách hàng có thể cập nhật lại thông tin tài khoản của mình, họ tên, địa chỉ, số
điện thoại và mật khẩu khi cần thiết.
3.1.1.9. Xem danh sách đơn hàng
Cho phép người quản trị xem danh sách đơn hàng, chi tiết mà khách hàng đặt.
Cho phép người quản trị xóa hoặc cập nhật tình trạng của đơn hàng của khách hàng.
3.1.1.10. Xem thông tin đơn hàng
Người dùng có thể xem thông tin đơn hàng của minh đã đặt gồm những thông
tin: số lượng sản phẩm, giá tiền, ngày đặt, trạng thái đơn hàng.
3.1.1.11. Xem danh sách sản phẩm theo loại
Người dùng chọn loại sản phẩm ở menu danh danh mục sản phẩm hệ thống sẽ
chuyển hướng đến trang danh sách sản phẩm theo loại và theo yêu cầu của người dùng.
3.1.1.12. Đăng ký thành viên
Người dùng điền đầy đủ thông tin mà hệ thống yêu cầu. Khi thỏa mản các điều
kiện người dùng sẽ được chuyển hướng đến trang đăng nhập.

3.1.1.13. Đăng nhập

Người dùng đăng nhập bằng tài khoản được tạo trước đó hoặc có thể chọn đăng
nhập bằng tài khoản Google. Trường hợp đăng nhập bằng tài khoản của Google mà
trùng với email đã tạo trước đó thì hệ thống sẽ tự động đăng nhập cho người dùng.
3.1.1.14. Quên mật khẩu
Không may người dùng quên mật khẩu của mình. Không sao vì đã có chức năng
quên mật khẩu để lấy lại mật khẩu cho người dùng. Người dùng chỉ cần ấn quên mật
khẩu hệ thống sẽ chuyển đến trang reset mật khẩu người dùng nhập email đã đăng ký
trước đó. Hệ thống gửi 1 mail reset mật khẩu người dùng chỉ cần đổi mật khẩu mới.
3.1.1.15. Kích hoạt tài khoản
Sau khi đăng ký hệ thống sẽ gửi mail kích hoạt tài khoản và người dùng chỉ cần
ấn vào link kích hoạt tài khoản có trong mail.
3.1.1.16. Bình luận sản phẩm
Người dùng bình luận 1 sản phẩm nào đó từ khi đã đăng nhập và người dùng chỉ
được bình luận 1 lần cho 1 sản phẩm
3.1.1.17. Xây dựng cấu hình
Người dùng chọn từng linh kiện phù hợp sau đó có thể tài hình ảnh cấu hình vừa
xây dựng
3.1.2. Đối với người quản trị
3.1.2.1. Quản lý sản phẩm
Người quản trị có thể thêm sản phẩm mới gồm những thông tin như: thông tin sản
phẩm, ảnh sản phẩm, cấu hình. Bên cạnh đó người quản trị có thể sửa và xóa sản phẩm.
3.1.1.2. Quản lý loại sản phẩm
Người quản trị thêm loại sản phẩm có thể thêm 1 danh mục loại sản phẩm. Bên
cạnh đó có thể thêm cấu hình cho loại đó.

3.1.2.3. Quản lý người dùng

Người quản trị có thể xem thông tin người dùng và có thể xem được tất cả đơn
hàng mà khách hàng đó đã đặt.
3.1.2.4. Quản lý đơn hàng
Người quản trị có thể xem thông tin tất cả đơn hàng và xác nhận đơn hàng mà
người dùng đã nhận hàng thành công
3.1.2.5. Quản lý Slide
Người quản trị thêm, xóa, sửa slide xuất hiện trên web
3.1.2.6. Xem thống kê
Thống kê 1 tháng có bao nhiêu đơn hàng và tổng danh thu của 1 tháng đó. Bến
cạnh đó người quản trị có thể xem tổng danh thu của 1 năm sau đó có thể xuất excel.
3.1.2.7. Quản lý tài khoản
Người quản trị có thể sửa các thông tin của tài khoản bao gồm: username,
password, name, email, giới tính, ảnh.
3.1.2.8. Đăng nhập vào trang quản trị
Người quản trị nhập username và password của mình đã tạo trước đó.
3.1.2.9. Đăng xuất khỏi trang quản trị
Người quản trị đăng xuất khỏi trang quản trị. Ngoài ra sau 60 phút người quản
trị không thao tác hệ thống sẽ tự đăng xuất và yêu đăng nhập lại.
3.2. Use Case
3.2.1. Xác định tác nhân trong hệ thống

Hình 2.2.1. Tác nhân trrong hệ thống

Khách hàng vãng lai: Là khách hàng ghé thăm trang web xem các thông tin cơ bản như
các bài viết, sản phẩm, đăng ký thành viên.
Khách hàng thành viên : Là người có tài khoản đăng nhập vào trang web có thể, tìm
kiếm, xem sửa thông tin cá nhân, chọn mua sản phẩm, bình luận sản phẩm, xem giỏ
hàng, xem các hóa đơn đã lập…
Admin : Là thành viên quản trị của hệ thống, có các quyền và chức năng, quản lý sản
phẩm, quản lý đơn hàng, quản lý thành viên, quản lý thông tin ngân hàng thanh toán
trực tuyến và các chức năng khác của hệ thống

3.2.2. Xác định Use Case khách hàng tổng quát
Hình 2.2.2. Use Case khách hàng tổng quát

3.2.3. Xác định Use Case Admin tổng quát
Hình 2.2.3. Use Case Admin tổng quát
3.3. Cơ sở dữ liệu
3.3.1. Danh mục các bảng
3.3.1.1. Bảng san_phams (bảng sản phẩm)

Bảng 2.3.1.1. Bảng sản phẩm

Trường Kiểu dữ liệu Ràng buộc Rỗng Ghi chú
id int Khóa chính không Id của sản phẩm
TenSanPham string không Tên của sản
phẩm
MoTa string có Mô tả sản phẩm
GiaCu decimal không Giá niêm yết
GiaKM decimal không Giá khuyến mại
AnhDaiDien string có Ảnh đại diện
CauHinh Text có Cấu hình sản
phẩm
Loai_san_phams_id int Khóa ngoại không Sản phẩm thuộc
loại
TrangThai tinyint không Trạng thái
3.3.1.2. Bảng loai_san_phams (Bảng loại sản phẩm)

Bảng 2.3.1.2. Bảng loại sản phẩm
Trường Kiểu dữ Ràng buộc Rỗng Ghi chú
liệu
id int Khóa chính không Id của loai sản phẩm
TenLoai string không Tên của loại sản phẩm
icon string có Icon của loại sản phẩm
parent_id int Khóa ngoại có Sản phẩm thuộc loại
TrangThai tinyint không Trạng thái loại sản phẩm

3.3.1.3. Bảng anh_san_phams (Bảng ảnh sản phẩm)

Bảng 2.3.1. 3. Bảng ảnh sản phẩm
liệu
id int Khóa chính không Id của ảnh sản phẩm
AnhSanPham string không ảnh của sản phẩm
san_phams_i int Khóa ngoại không ảnh thuộc sản phẩm
d
TrangThai tinyint không Trạng thái ảnh sản phẩm
3.3.1.4. Bảng cau_hinhs (Bảng cấu hình)
Bảng 2.3.1.4. Bảng cấu hình
liệu
id int Khóa chính không Id của cấu hình
TenCauHinh string không Tên của cấu hình
KeyName string không Từ khóa của cấu hình
TrangThai tinyint không Trạng thái cấu hình
3.3.1.5. Bảng chi_tiet_cau_hinhs (Bảng chi tiết cấu hình)

Bảng 2.3.1.5. Bảng chi tiết cấu hình
liệu
loai_san_phams_id int Khóa chính không Id của loại sản
phẩm
cau_hinhs_id int Khóa chính không Id của cấu hình

3.3.1.6. Bảng don_hangs (Bảng đơn hàng)

Bảng 2.3.1.6. Bảng đơn hàng
liệu
id int Khóa không Id của cấu hình
chính
hinh_thuc_giao_hang_id int Khóa không Hình thức giao
ngoại hàng
hinh_thuc_thanh_toans_id int Khóa không Hình thức thanh
ngoại toán
nguoi_dungs_id int Khóa không Người dùng mua
ngoại hàng
ThoiGianMua date không Thời gian mua
hàng
TongTien decimal không Tổng tiền đơn
hàng
trang_thai_giao_hangs_id int Khóa không Trạng thái đơn
ngoại hàng
3.3.1.7. Bảng chi_tiet_don_hangs (Bảng chi tiết đơn hàng)

Bảng 2.3.1.7. Bảng chi tiết đơn hàng
Trường Kiểu dữ liệu Ràng buộc Rỗng Ghi chú
don_hangs_id int Khóa chính không Id đơn hàng
san_phams_id int Khóa ngoại không Id sản phẩm
SoLuong int không Số lượng sản
phẩm

DonGia decimal không Đơn giá của

sản phẩm
ThanhTien decimal không Tổng tiền của
hóa đơn
3.3.1.8. Bảng comments (Bảng bình luận)

Bảng 2.3.1.8. Bảng bình luận
Trường Kiểu dữ liệu Ràng Rỗng Ghi chú
buộc
id int Khóa không Id đơn hàng
chính
content string không Nội dung bình luận
nguoi_dungs_id int Khóa không Người dùng bình luận
ngoại
san_phams_id int Khóa không Sản phẩm được bình
ngoại luận
parent_id int Khóa không Bình luận cha
ngoại
3.3.1.9. Bảng hinh_thuc_giao_hangs (Bảng hình thức giao hàng)

Bảng 2.3.1.9. Bảng hình thức giao hàng

liệu
id int Khóa chính không Id hình thức giao hàng
TenHinhThuc string không Tên hình thức giao hàng
3.3.1.10. Bảng hinh_thuc_thanh_toans (Bảng hình thức thanh toán)

Bảng 2.3.1.10. Bảng hình thức thanh toán
liệu
id int Khóa chính không Id hình thức giao hàng
TenThanhToan string không Tên hình thức thanh toán
3.3.1.11. Bảng loai_nguoi_dungs (Bảng loại người dùng)

Bảng 2.3.1.11. Bảng loại người dùng
liệu
id int Khóa chính không Id loại người dùng
TenLoai string không Tên loại người dùng
3.3.1.12. Bảng nguoi_dungs (Bảng người dùng)

Bảng 2.3.1.12. Bảng người dùng

liệu
id int Khóa chính không Id loại người dùng
Email string không Tên loại người dùng
TenNguoidung tinyint có Trạng thái
SDT string có Số điện thoại người
dùng
DiaChi string có Địa chỉ giao hàng
Anh string có Ảnh đại diện
Gioitinh int không Giới tính
username string có Tên đăng nhập
password string có Mật khẩu
loai_nguoi_dungs_id int Khóa ngoại không Id của loại người dùng
3.3.1.13. Bảng password_reset (Bảng khôi phục mật khẩu)
Bảng 2.3.1.13. Bảng khôi phục mật khẩu
liệu
Email string Khóa chính không Id loại người dùng
token string không Token khôi phục mật
khẩu
3.3.1.14. Bảng table_image_slides (Bảng slide)

Bảng 2.3.1.14. Bảng slide
liệu
id string Khóa chính không Id slide
image_name string không Tên ảnh

3.3.1.15. Bảng trang_thai_don_hangs (Bảng trạng thái đơn hàng)

Bảng 2.3.1.15. Bảng trạng thái đơn hàng
liệu
id string Khóa chính không Id trạng thái đơn hàng
TenTrangThai string không Tên trạng thái đơn hàng
3.3.1.16. Bảng user_activation (Bảng kích hoạt tài khoản)

Bảng 2.3.1. 16. Bảng kích hoạt tài khoản
liệu
user_id int Khóa chính không Id trạng thái người dùng
activation_code string không Mã kích hoạt

3.3.2. Mô hình cơ sở dữ liệu
Hình 2.3.1. Mô hình cơ sở dữ liệu

3.4. Cấu trúc thư mục đồ án

3.4.1 Cấu trúc thư mục ở Back-end và Front-end
Hình 3.1.1. Cấu trúc thư mục Backend Hình 3.1.2. Cấu trúc thư mục Front-end

3.5. Giao diện website khách hàng

3.5.1. Giao diện trang chủ website khách hàng
Hình 3.2.1. Giao diện trang chủ website khách hàng

Ở giao diện trang chủ người dùng có thể xem những khuyến mại giảm giá, tìm
kiếm sản phẩm, đăng ký thành viên, đăng nhập và 1 số tác vụ có trên website.

3.5.2. Giao diện đăng ký

Người dùng chọn vào mục tạo tài khoản để tiến hành mua hàng
Một số ràng buộc khi đăng ký thành viên :
 Tên tài khoản: Không được trùng, từ 4 ký tự trở lên
 Mật khẩu: Độ dài mật khẩu lớn hơn 4 ký tự.
 Email: Phải đúng định dạng của email và không được trùng với tài khoản khác
 Tên người dùng: Tên người dùng không có ký tự số và ký tự đặt biệt
 Số điện thoại: Không có ký tự đặt biệt
 Địa chỉ: Khách hàng nhập đúng địa chỉ giao hàng và không có ký tự đặt biệt
 Giới tính: Chọn nam hoặc nữ
 Chọn ảnh: Chọn ảnh từ máy người dùng và chỉ chọn những file có định dạng
ảnh

Hình 3.2.2. Giao diện đăng ký

Chú thích:
[1]: Vùng nhập thông tin người dùng
[2]: Chọn ảnh avatar
[3]: Nút đăng ký
[4]: Quay về trang đăng nhập

3.5.3. Giao diện đăng nhập

Người dùng đăng nhập tài khoản vừa tạo hoặc có thể đăng nhập bằng tài khoản google
4
Hình 3.2.3. Giao diện đăng nhập
Chú thích:
[1]: Vùng nhập tài khoản và mật khẩu
[2]: Nút đăng nhập bằng tài khoản Google
[3]: Nút đăng nhập
[4]: Nút quay lại trang đăng ký hoặc quên mật khẩu

3.5.4. Giao diện quên mật khẩu

Khi khách hàng quên mật khẩu thì chức năng quên mật khẩu sẽ giúp khách hàng
lấy lại mật khẩu bằng cách gửi mail xác nhận, nếu email tồn tại trong hệ thống thì hệ
thống sẽ thông báo và gửi một đường dẫn qua email để xác nhận việc quên mật khẩu
mật khẩu sẽ được cập nhật lại và gửi email đến khách hàng
.
Hình 3.2.4. Giao diện quên mật khẩu
Chú thích:
[1]: Nhập email để khôi phục mật khẩu
[2]: Nút gửi mã khôi phục

3.5.5. Giao diện mail khôi phục mật khẩu

Sau khi khách hàng ấn vào nút “Tới trang reset password” sẽ được chuyển tới
page reset password kèm 1 mã token.
Hình 3.2.5. Giao diện mail khôi phục mật khẩu
3.5.6. Giao diện khôi phục mật khẩu

Sau khi ấn vào link khôi phục mật khẩu hệ thống sẽ chuyển hướng đến trang khôi
phục mật khẩu. Ở đây người dùng nhập mật khẩu mới.

Hình 3.2.6. Giao diện khôi phục mật khẩu

Chú thích:
[1]: Vùng nhập mật khẩu và nhập lại mật khẩu mới
[2]: Nút xác nhận khôi phục mật khẩu

3.5.7. Giao diện tìm kiếm sản phẩm tự động

Người dùng nhập từ khóa cần tìm ở ô tìm kiếm sản phẩm hệ thống sẽ tự động hiện các
sản phẩm liên quan ngay lập tức bên dưới.
Hình 3.2.7. Giao diện tìm kiếm sản phẩm tự động

Chú thích:
1
[1]: Từ khóa tìm kiếm
[2]: Các sản phẩm tương ứng với từ khóa
3.5.8. Giao diện trang kết quả tìm kiếm

Sau khi người dùng nhập từ khóa và ấn nút tìm kiếm. Sau đó hệ thống sẽ chuyển
hướng đến trang kết quả tìm kiếm. Bên cạnh đó hệ thống sẽ liệt kê tất cả sản phẩm phù
hợp với từ khóa.

Hình 3.2.8. Giao diện kết quả tìm kiếm sản phẩm
Chú thích:
[1]: Từ khóa tìm kiếm
[2]: Sản phẩm tương ứng với kết quả tìm kiếm

3.5.9. Giao diện chi tiết sản phẩm
1 3
Hình 3.2.9. Giao diện chi tiết sản phẩm

Giao diện chi tiết sản phẩm mà người dùng chọn trước đó
Chú thích:
[1]: Hình ảnh của sản phẩm
[2]: Thông tin và quà tặng sản phẩm khi mua kèm
[3]: Nút mua hàng

3.5.10. Giao diện giỏ hàng

Sau khi chọn mua sản phẩm, hệ thống sẽ chuyển sản phẩm của người dùng vào
giỏ hàng và lưu trữ ở localstorage sau mỗi lần mở web lên không bị mất. Người dùng
có thể tùy ý thêm, xóa, sửa và tăng giảm số lượng theo ý thích và sau đó ấn mua hàng
để hoàn tất.
Hình 3.2.10. Giao diện giỏ hàng

Chú thích:
[1]: Thông tin sản phẩm

[2]: Thông tin người dùng mua hàng

[3]: Hình thức thanh toán
[4]: Hình thức giao hàng
[5]: Nút thanh toán
3.5.11. Giao diện thanh toán Momo
Sau khi chọn mua hàng bằng phương thức thanh toán momo hệ thống sẽ chuyển
sang trang thanh toán trực tuyến của momo để thanh toán.
1
2
Hình 3.2.11. Giao diện thanh toán momo

Chú thích:

[1]: Thông tin đơn hàng

[2]: Mã QR quét để thanh toán đơn hàng
[3]: Nút hủy thanh toán và quay lại trang thông tin đơn hàng của website
3.5.12. Giao diện thanh toán Paypal
Sau khi người dùng chọn phương thức thanh toán Paypal hệ thống sẽ chuyển
hướng đến trang thanh toán của Paypal.
Hình 3.2.12. Giao diện thanh toán Paypal

3.5.13. Giao diện thanh toán Vnpay

Sau khi người dùng chọn phương thức thanh toán Vnpay hệ thống sẽ chuyển
hướng đến trang thanh toán của Vnpay
Hình 3.2.13. Giao diện thanh toán Vnpay

Chú thích:
[1]: Mã QR thanh toán đơn hàng
[2]: Thông tin chủ tài khoản
[3]: Hủy thanh toán và trở về trang thông tin đơn hàng website
2
1

3.5.14. Giao diện chi tiết đơn hàng

Sau khi thanh toán đơn hàng người dùng sẽ được chuyển hướng đến trang chi tiết
đơn hàng. Ở đây người dùng có thể xem lại thông tin đơn hàng của mình đã đặt.
1
2
Hình 3.2.14. Giao diện chi tiết đơn hàng hủy
6 5
Hình 3.2.14. 1. Giao diện chi tiết đơn hàng thành công
Chú thích:
[1]: Đơn hàng đã bị hủy do người dùng
[2]: Tổng tiền và thời gian mua hàng
[4]: Đơn hàng thanh toán thành công
[5]: Chuyển đến trang xem chi tiết đơn hàng
[6]: Quay lại trang chủ

3.5.15. Giao diện xây dựng cấu hình

Người dùng chọn từng linh kiện phù hợp với nhu cầu. Sau đó người dùng có thể
tải file cấu hình để được nhân viên tư vấn hoặc sang cửa hàng nào đó để mua với giá cả
hợp lý nhất.
1 2
4 5
Hình 3.2.15. Giao diện xây dựng cấu hình
Hình 3.2.15.1. Giao diện chọn linh kiện

7 8
9
10
Hình 3.2.15.2. Giao diện chọn xong linh kiện cho cấu hình
Chú thích:
[1]: Xây dựng lại cấu hình
[2]: Chi phí của cấu hình
[3]: Các linh kiện của cấu hình
[4]: Tải file pdf cấu hình
[5]: Tải file ảnh cấu hình
[6]: Chọn sản phẩm
[7]: Tên loại sản phẩm

[8]: Tên sản phẩm được chọn

[9]: Giá tiền sản phẩm
[10]: Nút xóa sản phẩm ra khỏi cấu hình
3.5.16. Giao diện tất cả đơn hàng chưa thanh toán
Khi người dùng chọn xem tất cả đơn hàng chưa thành toán, hệ thống sẽ liệt kê tất
cả đơn hàng chưa thanh toán theo người dùng gồm khác thông tin như sau: Mã đơn
hàng, ngày đặt hàng, hình thức vận chuyển, thanh toán, tổng tiền đơn hàng, trạng thái
của đơn hàng.
Hình 3.2.16. Giao diện tất cả đơn hàng chưa thanh toán
3.5.17. Giao diện tất cả đơn hành đã thanh toán
Khi người dùng chọn xem tất cả đơn hàng đã thành toán, hệ thống sẽ liệt kê tất cả
đơn hàng đã thanh toán theo người dùng gồm khác thông tin như sau: Mã đơn hàng,
ngày đặt hàng, hình thức vận chuyển, thanh toán, tổng tiền đơn hàng, trạng thái của
đơn hàng.
Hình 3.2.17. Giao diện tất cả đơn hàng đã thanh toán

3.5.18. Giao diện tất cả đơn hàng đã hoàn thành

Khi người dùng chọn xem tất cả đơn hàng đã hoàn thành, hệ thống sẽ liệt kê tất
cả đơn hàng đã hoàn thành theo người dùng gồm khác thông tin như sau: Mã đơn hàng,
ngày đặt hàng, hình thức vận chuyển, thanh toán, tổng tiền đơn hàng, trạng thái của
đơn hàng.
Hình 3.2.18. Giao diện tất cả đơn hàng đã hoàn thành

3.5.19. Giao diện tất cả đơn hàng đã hủy
Khi người dùng chọn xem tất cả đơn hàng đã hủy, hệ thống sẽ liệt kê tất cả đơn
hàng đã hủy theo người dùng gồm khác thông tin như sau: Mã đơn hàng, ngày đặt
hàng, hình thức vận chuyển, thanh toán, tổng tiền đơn hàng, trạng thái của đơn hàng.
Hình 3.2.19. Giao diện tất cả đơn hàng đã hủy

3.5.20. Giao diện thông tin tài khoản
Hình 3.2.20. Giao diện thông tin tài khoản

Ở giao diện thông tin tài khoản người dùng có thể xem thông tin tài khoản của
mình và chỉnh sửa thông tin ( Email không thể thay đổi).
Chú thích:
[1]: Thông tin tài khoản người dùng
[2]: Nút thay đổi thông tin

3.5.21. Giao diện thay đổi mật khẩu

Người dùng có thể thay đổi mật khẩu của mình (đã đăng nhập vào hệ thống)
Hình 3.2.21. Giao diện thay đổi mật khẩu

Chú thích:
[1]: Khung nhập mật khẩu cũ, mật khẩu mới và nhập lại mật khẩu mới
[2]: Nút thay đổi mật khẩu
3.5.22. Giao diện hướng dẫn thanh toán
Trang hướng dẫn thanh toán giúp người dùng dễ dàng thanh toán hơn, hướng
dẫn một cách dễ hiểu nhất

Hình 3.2.22. Giao diện hướng dẫn thanh toán

3.6. Giao diện trang quản trị

3.6.1. Giao diện trang chủ
Ở giao diện trang chủ admin, người quản trị có thể xem được top sản phẩm được
bán nhiều nhất, danh thu trong tháng, danh thu trong 1 năm, xuất thống kê và các đơn
hàng được mua gần nhất.
Hình 3.3.1. Giao diện trang chủ (Top 5 sản phẩm được bán nhiều nhất)
Giao diện hiển thị trang chủ quản trị thống kê danh thu theo tháng
2
Hình 3.3.1.1. Giao diện trang chủ quản trị (thống kê theo tháng)

Hình 3.3.1.2. Giao diện quản trị (thống kê theo năm)

Chú thích:
[1]: Top những sản phẩm được mua nhiều nhất
[2]: Xuất thống kê excel
[3]: Biểu đồ danh thu theo tháng
[4]: Biểu đồ danh thu theo năm và những đơn hàng mới nhất.
Sau khi xuất
excel thống kê
theo tháng, hệ
thống sẽ liệt kê
tổng danh thu và
tổng đơn hàng
trong tháng đó.

Hình 3.3.1. 3. Giao diện excel thống kê theo tháng

Sau khi xuất excel thống kê theo năm, hệ thống sẽ liệt kê tổng danh thu và tổng
đơn hàng trong năm đó.
3.6.2.
Giao diện
trang
quản lý
sản phẩm
Ở
giao diện
quản lý
sản phẩm,
hệ thống

Hình 3.3.1.4. Giao diện excel thống kê theo năm
liệt kê tất cả sản phẩm theo từng trang ( mỗi trang gồm có 10 sản phẩm). Các chức
năng cơ bản như: Thêm sản phẩm mới, tìm kiếm sản phẩm, sửa sản phẩm và cuối cùng
là xóa sản phẩm.
1 2 3
5 4
Hình 3.3.2. Giao diện quản lý sản phẩm
Chú thích:
[1]: Chuyển đến trang thêm sản phẩm mới
[2]: Thùng rác sản phẩm
[3]: Tác vụ lọc sản phẩm
[4]: Chức năng xóa và chỉnh sửa sản phẩm
[5]: Thông tin sản phẩm
3.6.3. Giao diện trang thêm sản phẩm
Ở giao diện thêm sản phẩm mới gồm có 3 tab: sản phẩm, cấu hình sản phẩm và
ảnh sản phẩm. Ở tab đầu tiên người dùng nhập thông tin của sản phẩm mới như: tên
sản phẩm,

mô tả sản phẩm, hãng sản xuất, giá cũ, giá khuyến mại, số lượng, ảnh đại diện và chọn
loại sản phẩm
 Một số ràng buộc của các trường như sau:
 Tên sản phẩm: Yêu cầu nhập tên sản phẩm đầy đủ và không được bỏ
trống
 Mô tả: Có thể tự nhập văn bản mô tả sản phẩm hoặc có thể sao chép một
bài viết mô tả sản phẩm bất kỳ và không được bỏ trống
 Hãng sản xuất: Hãng sản xuất của sản phẩm và yêu cầu không được bỏ
trống
 Giá cũ: Giá cũ sản phẩm
 Giá khuyến mại: Giá khuyến mại sản phẩm
 Số lượng: Số lượng sản phẩm
 Ảnh đại diện: Chọn ảnh đại diện của sản phẩm
 Loại sản phẩm: Chọn 1 loại cho sản phẩm

2
3
Hình 3.3. 3. Giao diện thêm sản phẩm
Chú thích:
[1]: Vùng nhập thông tin sản phẩm
[2]: Chọn loại sản phẩm
[3]: Tiến hành thêm sản phẩm mới
3.6.4. Giao diện thêm cấu hình sản phẩm
Ở tab cấu hình sản phẩm, người quản trị thêm cấu hình cho mỗi linh kiện phù hợp
cho sản phẩm cần thêm

Hình 3.3.4. Giao diện thêm cấu hình sản phẩm

Chú thích:
[1]: Vùng nhập cấu hình cho sản phẩm
[2]: Chọn loại sản phẩm
[3]: Tiến hành thêm

3.6.5. Giao diện trang thêm ảnh cho sản phẩm
Hình 3.3.5. Giao diện trang thêm ảnh sản phẩm

Ở tab thêm ảnh cho sản phẩm người quản trị có thể thêm một hoặc nhiều ảnh cho
sản phẩm.
3.5.6. Giao diện trang sửa sản phẩm
Sau khi chọn sản phẩm cần cập nhật hệ thống sẽ chuyển hướng đến trang chỉnh
sửa sản phẩm người quản trị có thể sửa những thông tin chưa phù trước đó.

Hình 3.3.6. Giao diện cập nhật sản phẩm

3
Hình 3.3.6.1. Giao diện cập nhật sản phẩm (2)
Chú thích:
[1]: Mô tả sản phẩm, có thể tự tạo hoặc coppy 1 bài viết nào đó
[2]: Vùng sửa thông tin sản phẩm
[3]: Tiến hành sửa sản phẩm
3.6.7. Giao diện trang quản lý loại sản phẩm
1 5 2
3
4
Hình 3.3.7. Giao diện quản lý loại sản phẩm

Chú thích:

[1]: Thêm mới loại sản phẩm

[2]: Khung tìm kiếm sản phẩm
[3]: Thông tin loại sản phẩm
[4]: Tác vụ xóa, sửa sản phẩm
[5]:Thùng rác loại sản phẩm
3.6.8. Giao diện trang thêm loại sản phẩm
Sau khi chọn thêm loại sản phẩm mới hệ thống chuyển đến trang thêm loại sản
phẩm. Những thông tin yêu cầu như: tên loại, icon của danh mục, loại sản phẩm thuộc
loại (cho biết loại sản phẩm là loại cha hay thuộc loại nào khác).
2
3
Hình 3.3.8. Giao diện trang thêm loại sản phẩm

Chú thích:
[1]: Vùng nhập thông tin loại sản phẩm
[2]: Chọn loại sản phẩm thuộc loại nào
[3]: Nút thêm loại sản phẩm

3.6.9. Giao diện sửa loại sản phẩm

Sau khi chọn sản phẩm cần sửa hệ thống chuyển hướng đến trang sửa loại sản
1
phẩm
4
6 5
Hình 3.3. 9. Gioa diện sửa loại sản phẩm
Hình 3.3.9. 1. Giao diện popup thêm cấu hình mới

Chú thích:
[1]: Nút thêm cấu hình mới
[2]: Nút thêm từng cấu hình (CPU, RAM, …)

[3]: Chọn thuộc loại

[4]: Nút cập nhật loại sản phẩm
[5]: Nút thêm cấu hình vào loại sản phẩm
[6]: Loại bỏ cấu hình ra loại sản phẩm
[7]: Ô nhập cấu hình
[8]: Nút thêm cấu hình
3.6.10. Giao diện quản lý đơn hàng

Quản lý tất cả đơn hàng của khách hàng có thể đổi trạng thái của đơn hàng khi
khách hàng nhận hàng thành công
1 2
3 4
Hình 3.3.10. Giao diện quản lý đơn hàng

Chú thích:
[1]: Bộ lọc đơn hàng
[2]: Khung tìm kiếm đơn hàng
[4]: Xem chi tiết đơn hàng

3.6.11. Giao diện chi tiết đơn hàng

Sau khi chọn đơn hàng cần xem hệ thống chuyển đến chi tiết đơn hàng.
Hình 3.3.11. Giao diện chi tiết đơn hàng

Chú thích:
[1]: Thông tin của đơn hàng
[2]: Nút hoàn thành đơn hàng (Khi khách hàng nhận hàng thành công)
[3]: Số lượng sản phẩm của đơn hàng
3.6.12. Giao diện quản lý người dùng

Quản lý người dùng người quản trị có thể thêm người dùng mới, xem chi tiết tài
khoản người dùng, khóa tài khoản người dùng

1 2
Hình 3.3.12. Giao diện quản lý người dùng

Chú thích:
[1]: Nút thêm tài khoản mới

[2]: Khung tìm kiếm người dùng
[3]: Xem thông tin tài khoản

3.6.13. Giao diện thêm người dùng
Hình 3.3.13. Giao diện thêm người dùng (1)
Hình 3.3.13.1. Giao diện thêm người dùng (2)

Chú thích:
[1]: Vùng nhập thông tin người dùng
[2]: Chọn loại người dùng (admin hoặc người dùng)
[3]: Tiến hành thêm và quay lại trang quản lý người dùng
3.6.14. Giao diện cập nhật người dùng

Hình 3.3.14. Giao diện cập nhật người dùng (1)

Hình 3.3.14.1. Giao diện cập nhật người dùng (2)

Sau khi người quản trị chọn một tài khoản cần cập nhật, hệ thống sẽ chuyển
hướng đến trang cập nhật người dùng. Ở đây, người quản trị sẽ có thể cập nhật được
những thông tin cơ bản như: Tên người dùng, số điện thoại, địa chỉ, giới tính, mật
khẩu.
Chú thích:
[1]: Vùng sửa thông tin người dùng
[2]: Chọn loại tài khoản
[3]: Danh sách đơn hàng của người dùng

3.6.15. Giao diện quản lý slide


Hình 3.3.15. Giao diện quản lý slide
Hình 3.3.15.1. Giao diện chọn ảnh slide

Hình 3.3.15. 2. Giao diện popup xóa ảnh slide

Người quản trị thêm ảnh ở slide trang người dùng. Người quản trị có thể lựa
chọn một hoặc nhiều ảnh tùy nhu cầu và thao tác dễ dàng.
Chú thích:
[1]: Nút thêm slide mới
[2]: Danh sách ảnh slide
[3]: Nút xem ảnh slide.
[4]: Tiêu đề ảnh
[5]: Nút t chọn ảnh từ máy người dùng
[6]: Nút thêm ảnh
[7]: Nút xóa ảnh

Chương 4. Tổng kết và hướng phát triển Website thương mại điện tử NBSTORE
CHƯƠNG 4: KẾT LUẬN

4.1. Kết quả đạt được
- Hệ thống website bán hàng trục tuyến sau thời gian bắt đầu làm đến nay về cơ
bản đã hoàn thành những chức năng cho người dùng:
 Đối với người sử dụng webstite
 Có thể thực hiện các chức năng cơ bản như xem hàng, mua hàng,
bình luận sản phẩm, tìm kiếm sản phẩm nhanh, thanh toán đơn hàng
bằng nhiều phương thức thanh toán trực tuyến. Bên cạnh đó website
sử dụng công ngệ mới (ReactJS).
 Các chức năng về tài khoản người dùng: đăng ký, đăng nhập, quên
mật khẩu, đổi mật khẩu đều được bảo mật cao bảo vệ tài khoản và
thông tin người dùng.
 Đối với người quản trị
 Các tác vụ quản lý sản phẩm như : Thêm, Xoá, Sửa
 Quản lý slide ở phía front-end
 Có thể thực hiện các chức năng quản lý đơn hàng 1 cách dễ dàng
 Quản lý thông tin người dùng
 Quản lý nhập liệu, cập nhật các thông tin dữ liệu web
 Quản lý thống kê, báo cáo doanh thu
 Vận dụng tất cả kiến thức đã học ở trường và những kiến thức tìm hiểu được
vận dụng làm đồ án.
 Khả năng kết hợp kiến thứ đã học và công nghệ mới tìm hiểu được
4.2. Phần hạn chế cùa đề tài
Do thời gian với kiến thức, kinh nghiệm còn giới hạn nên đồ án của nhóm chúng
em không tránh khỏi những thiếu sót./’

Chương 4. Tổng kết và hướng phát triển Website thương mại điện tử NBSTORE
Đề tài đã hoàn thành các chức năng căn bản, tuy nhiên bên cạnh đó vẫn có một số
khuyết điểm :
 Chưa tối ưu các component
 Chưa có các hiệu ứng đẹp mắt
 Chưa có những trang tin tức
4.3. Hướng phát triển
 Tích hợp thêm hệ thống chat người dùng và nhân viên hệ thống
 Sử dụng thêm các hiệu ứng đẹp mắt
 Tích hợp thêm các trang tin tức, bài viết
 Tối ưu các component hơn

Tài liệu tham khảo Website thương mại điện tử NBSTORE
TÀI LIỆU THAM KHẢO

 Giao diện:
 React-Bootstrap: https://react-bootstrap.github.io
 Material-UI: https://material-ui.com
 Package: https://www.npmjs.com
 Document:
 Laravel: https://laravel.com
 ReactJS: https://reactjs.org
 Thanh toán trực tuyến
 Momo: https://developers.momo.vn
 Paypal: https://developer.paypal.com/docs/api/overview
 Vnpay: https://sandbox.vnpayment.vn/apis
SVTH: Phùng Duy Long 73 GVHD: Nguyễn Vân Anh

bản sửa - UD23.13 - Phùng Duy Long - 18116102 - Thiết kế website bán sản phẩm công nghệ

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

bản sửa - UD23.13 - Phùng Duy Long - 18116102 - Thiết kế website bán sản phẩm công nghệ

Uploaded by

Copyright:

Available Formats

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC KINH DOANH VÀ CÔNG NGHỆ HÀ NỘI

KHOA CÔNG NGHỆ THÔNG TIN

LUẬN VĂN TỐT NGHIỆP

LUẬN VĂN TỐT NGHIỆP

Thiết kế website bán sản phẩm công nghệ

Sinh viên thực hiện: Phùng Duy Long

Hà Nội - Năm 2022

Phùng Duy Long

Hà Nội, tháng 6 năm 2022

Bảng 2.3.1.1. Bảng sản phẩm.........................................................................................16

Hình 1.1.2. Mô hình MVC...............................................................................................

Hình 3.2.15.1. Giao diện chọn linh kiện 38

SVTH: Phùng Duy Long 1 GVHD: Hoàng Lan Phương

1.1. Các công nghệ sử dụng trong website

Laravel trở nên khác biệt với khác framework khác:

SVTH: Phùng Duy Long 2 GVHD: Hoàng Lan Phương

Tính năng bảo mật hoàn thiện

SVTH: Phùng Duy Long 3 GVHD: Hoàng Lan Phương

1.1.2. Mô hình MVC

SVTH: Phùng Duy Long 4 GVHD: Hoàng Lan Phương

Hình 1.1.1. Mô hình MVC

SVTH: Phùng Duy Long 5 GVHD: Hoàng Lan Phương

Cơ chế hoạt động của mô hình MVC

SVTH: Phùng Duy Long 6 GVHD: Hoàng Lan Phương

1.1.3.3. Ưu điểm và nhược điểm của ReactJS

SVTH: Phùng Duy Long 7 GVHD: Hoàng Lan Phương

Hình 1.1.5.1. Logo React- Boostrap

SVTH: Phùng Duy Long 8 GVHD: Hoàng Lan Phương

1.1.6. Tổng quan về Material UI

SVTH: Phùng Duy Long 9 GVHD: Hoàng Lan Phương

SVTH: Phùng Duy Long 10 GVHD: Hoàng Lan Phương

CHƯƠNG 2: THỰC TRẠNG

SVTH: Phùng Duy Long 11 GVHD: Hoàng Lan Phương

SVTH: Phùng Duy Long 12 GVHD: Hoàng Lan Phương

SVTH: Phùng Duy Long 13 GVHD: Hoàng Lan Phương

SVTH: Phùng Duy Long 14 GVHD: Hoàng Lan Phương

2.3 Ưu và nhược điểm của đề tài

SVTH: Phùng Duy Long 15 GVHD: Hoàng Lan Phương

2.3.2 Nhược điểm

SVTH: Phùng Duy Long 16 GVHD: Hoàng Lan Phương

SVTH: Phùng Duy Long 17 GVHD: Hoàng Lan Phương

CHƯƠNG 3.GIẢI PHÁP

SVTH: Phùng Duy Long 11 GVHD: Hoàng Phương Thảo

3.1.1.6. Thanh toán

SVTH: Phùng Duy Long 12 GVHD: Hoàng Phương Thảo

3.1.1.13. Đăng nhập

SVTH: Phùng Duy Long 13 GVHD: Hoàng Phương Thảo

3.1.2.3. Quản lý người dùng

SVTH: Phùng Duy Long 14 GVHD: Hoàng Phương Thảo

Hình 2.2.1. Tác nhân trrong hệ thống

SVTH: Phùng Duy Long 15 GVHD: Hoàng Phương Thảo

3.2.2. Xác định Use Case khách hàng tổng quát

Hình 2.2.2. Use Case khách hàng tổng quát

SVTH: Phùng Duy Long 16 GVHD: Hoàng Phương Thảo

Bảng 2.3.1.1. Bảng sản phẩm

3.3.1.2. Bảng loai_san_phams (Bảng loại sản phẩm)

SVTH: Phùng Duy Long 17 GVHD: Hoàng Phương Thảo

3.3.1.3. Bảng anh_san_phams (Bảng ảnh sản phẩm)

3.3.1.5. Bảng chi_tiet_cau_hinhs (Bảng chi tiết cấu hình)

SVTH: Phùng Duy Long 18 GVHD: Hoàng Phương Thảo

3.3.1.6. Bảng don_hangs (Bảng đơn hàng)

3.3.1.7. Bảng chi_tiet_don_hangs (Bảng chi tiết đơn hàng)