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

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 t

Trang 1

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

TIEU LUAN MOI download : skknchat123@gmail.com moi nhat

Trang 2

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

Trang 3

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 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: lonhphunh@gmail.com

Trang 4

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

Trang 5

Hà Nội, ngày tháng năm 2022 Giáo viên hướng dẫn TIEU LUAN MOI download : skknchat123@gmail.com moi nhat

Trang 6

Hà Nội, Ngày …… Tháng…… Năm 2022 Giáo viên phản biện TIEU LUAN MOI download : skknchat123@gmail.com moi nhat

Trang 7

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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat

Trang 8

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

Trang 9

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

Trang 10

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

Trang 11

DANH MỤC CÁC KÝ TỰ, CÁC TỪ VIẾT TẮC

Trang 12

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

Trang 13

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

Trang 14

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

Trang 15

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

Trang 16

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

Trang 17

1.1 Các công nghệ sử dụng trong website 1.1.1 Laravel Framework

 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

Trang 18

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

Trang 19

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

Laravel

Trang 20

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.

Trang 21

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.

Trang 22

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

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”.

Trang 23

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.

Trang 24

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ư.

Trang 25

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

Trang 26

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

Trang 27

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

Trang 28

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.

Trang 29

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

Trang 30

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.

Trang 31

- 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.

- 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ì

Trang 32

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ễ

Trang 33

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.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

Trang 34

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.

Trang 35

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.

Trang 36

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

Trang 37

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

Trang 38

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)

Trang 39

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

phẩm

Trang 40

san_phams_i d

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

Tiêu đề	Thiết Kế Website Bán Hàng NB Store
Tác giả	Phùng Duy Long
Người hướng dẫn	Cô Nguyễn Vân Anh
Trường học	Trường Đại Học Kinh Doanh Và Công Nghệ Hà Nội
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Luận Văn Tốt Nghiệp
Năm xuất bản	2022
Thành phố	Hà Nội

Định dạng
Số trang	94
Dung lượng	2,5 MB