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âydựng một website bán hàng

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

Hà Nội - 2022

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

thông tin được ứng dụng trong mọi ngành nghề, lĩnh vực Từ việc đọc tin tức, nghenhạ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ôngngừng, việc phát triển một website để quảng bá công ty hay một website cá nhân khôngcòn gì xa lạ Trong đó môt trang web trưc tuyến hỗ trơ viêc ban hang qua mang hiênnay 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 muanhữ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 manglạ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âydự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 Sinhviên thực hiện đề tài :

Phùng Duy LongMSV: 18116102Điện Thoại: 0928735115Email: lonhphunh@gmail.com

trường Đại học Kinh Doanh và Công Nghệ, để có thể hoàn thành được đồ án tốt nghiệpnà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ọcvà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ế́phướ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 chosau này

Em xin chân thành cám ơn !

Hà Nội, tháng 6 năm 2022Sinh viên thực hiện

Phùng Duy Long

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

Giáo viên hướng dẫn

Hà Nội, Ngày …… Tháng…… Năm 2022

Giáo viên phản biện

Hà Nội, Ngày …… Tháng…… Năm 2022

1 Lý do chọn đề tài ?

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

1.1.1 Laravel Framework

1.1.2 Mô hình MVC

1.1.3 Công Nghệ ReactJS

1.1.4 Tổ̉ng quan về Web API

1.1.5 Framework React-Bootstrap

1.1.6 Tổ̉ng quan về Material UI

1.2 Thương mại điện tử

1.2.1 Tổ̉ng quan về thương mại điện tử

1.2.2 Lợi ích chung của thương mại điện tử

1.2.3 Các loại hình ứng dụng

1.2.4 Thanh toán điện tử

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

2.2 Đánh giá thực trạng

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

2.3.1 Ưu điểm

2.3.2 Nhược điểm

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.2 Đối với người quản trị

3.2 Use Case

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

1 HTML Hypertext Markup Language

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

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

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

Hình 3.3 3 Giao diện thêm sản phẩm

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

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

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

Hình 3.3.7 Giao diện quản lý loại sản phẩm

Hình 3.3.8 Giao diện trang thêm loại sản phẩm

Hình 3.3 9 Gioa diện sửa loại sản phẩm

Hình 3.3.10 Giao diện quản lý đơn hàng

Hình 3.3.11 Giao diện chi tiết đơn hàng

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

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

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ô

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ảonhữ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ụngrộ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ấ́tthuậ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âydự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ànhframework 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àiliệ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 Laravelkhá 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ộtcộ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ảitạ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átdatabase thay vì phải sử dụng SQL Laravel cũng cho phép chúng ta khôi phục đượcnhữ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 frameworklaravel Kỹ thuật ORM của laravel sử dụng PDO, chống chèn SOL Ngoài ra, các tínhnă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

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óctá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 theoproject

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ácform 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

 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ácthà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úngjavascript 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ậptrì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ủaTwitter Bootstrap component từ đó giúp việc tạo dựng UI cho React app dễ dàng hơnbao giờ hế́t Ví dụ khi ta mô tả một button nhỏ, text là “Something”, click event triggerhà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àojQuery 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 Khichú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ệccò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 trangchủ 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àntoà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 haytoà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ệnnhanh 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ệuquả từ khi internet hình thành và phát triển Chính vì vậy, nhiều người hiểu thươngmạ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ạothuậ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ơngử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ế́pthị, 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ộtkhá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ế́tkiệ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ạihà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ữngdoanh 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 doanhnghiệp để thu được nhiều lợi ích nhấ́t Điều này đặc biệt quan trọng trong bối cảnhhội nhập kinh tế́ quốc tế́, khi các doanh nghiệp trong nước phải cạnh tranh mộtcá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 :

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 trongwebsite của mình.

CHƯƠNG 2: THỰC TRẠNG2.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ăngtrưở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ớitố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 2015như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ủană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ểnTMĐ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ườngTMĐ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ưởngtrung 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ẽ đứngthứ 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ệ doanhnghiệp trong mô hình B2C xây dựng website những năm gần đây tuy không thay đổ̉inhiề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ăm2016), 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ườngxuyê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ềunà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ệucủ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ựctuyế́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ànTMĐ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 quacá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ôngqua email; 49% nhận đơn đặt hàng qua mạng xã hội; 45% đối với việc đặt hàng quawebsite – 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 Tuynhiê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ủaTMĐ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íchcự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ứcmua 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ùngInternet 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ờilượ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ườitiê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ế́tquả 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áocủ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ảntrở 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ònnhiề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 thanhtoá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 đã đặthà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àntrả 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ònthấ́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ứcthanh 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ộtvấ́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ảichinh 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ượnghà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êudùng chưa chọn mua sắm trực tuyế́n, trong đó: 46% vì lý do khó kiểm định chấ́t lượnghà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ủaCụ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ế́nmã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ạpvớ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íchcự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ứcmua 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ưngvẫ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 đượckhai 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

- 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

- 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

- 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ựctuyế́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

- 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áchà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ẩmkhô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ÁP3.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ảnphẩ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ườidù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ữngsả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ữngsả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ệncho 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ủangườ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

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ọnhì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ụcngườ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ôngtin: 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ềukiệ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 đăngnhậ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ăngquê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ậtkhẩ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.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

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ảnphẩ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ántrự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

phẩm