Đề Tài THIẾT KẾ WEBSITE BÁN HÀNG NB STORE

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 tún hỡ trợ việc bán hàng qua mạ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:


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ể hồ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ể hồ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 tố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 tố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 tố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 qt.................................................................14
Hình 2.2.3. Use Case Admin tổng qt.........................................................................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 qn 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 tốn momo.....................................................................34
Hình 3.2.12. Giao diện thanh tốn Paypal....................................................................35
Hình 3.2.13. Giao diện thanh tố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 tốn................................................40
Hình 3.2.18. Giao diện tất cả đơn hàng đã hồ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 tố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ế tố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: Hồng Lan Phương


Website thương mại điện tử NBSTORE
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à ln 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 ln
ln 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

SVTH: Phùng Duy Long

2

GVHD: Hoàng Lan Phương


Website thương mại điện tử NBSTORE
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 số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 hồn thiện

SVTH: Phùng Duy Long

3

GVHD: Hoàng Lan Phương


Website thương mại điện tử NBSTORE
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. Ngồ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 thố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 khn 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ơ

SVTH: Phùng Duy Long

hình MVC

4

GVHD: Hồng Lan Phương


Website thương mại điện tử NBSTORE

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.

SVTH: Phùng Duy Long

5

GVHD: Hoàng Lan Phương


Website thương mại điện tử NBSTORE
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 chun 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.

SVTH: Phùng Duy Long

6

GVHD: Hoàng Lan Phương


Website thương mại điện tử NBSTORE
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ụ hồn chỉnh để phát triển.
 Sử dụng khn 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”.

SVTH: Phùng Duy Long

7

GVHD: Hoàng Lan Phương

Website thương mại điện tử NBSTORE

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 tố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 ReactBootstrap 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ý tồn bộ q 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.

SVTH: Phùng Duy Long

8

GVHD: Hoàng Lan Phương


Website thương mại điện tử NBSTORE
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ư.

SVTH: Phùng Duy Long

9

GVHD: Hoàng Lan Phương


Website thương mại điện tử NBSTORE
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 ngồ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 tốn tiến hành trên mơi trường internet,
thơng qua hệ thống thanh tố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

SVTH: Phùng Duy Long

10

GVHD: Hoàng Lan Phương