Xây dựng website mua bán đồ điện tử

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬTKHOA CÔNG NGHỆ SỐ ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC NGÀNH: SƯ PHẠM KỸ THUẬT CÔNG NGHIỆP CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN ĐỀ TÀI: XÂY DỰNG WEBSITE M

Trang 1

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA CÔNG NGHỆ SỐ

ĐỒ ÁN TỐT NGHIỆP

ĐẠI HỌC NGÀNH: SƯ PHẠM KỸ THUẬT CÔNG NGHIỆP CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI:

XÂY DỰNG WEBSITE MUA BÁN ĐỒ ĐIỆN TỬ

Sinh viên thực hiện : Đậu Thái Công

Trang 2

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

ĐỒ ÁN TỐT NGHIỆP

ĐẠI HỌC NGÀNH: SƯ PHẠM KỸ THUẬT CÔNG NGHIỆP CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI:

XÂY DỰNG WEBSITE MUA BÁN ĐỒ ĐIỆN TỬ

Giảng viên hướng dẫn duyệt

ThS Nguyễn Văn Phát

Trang 3

Đà Nẵng, tháng 06/2023

Trang 4

NHẬN XÉT GIẢNG VIÊN HƯỚNG DẪN

Giảng viên hướng dẫn (Ký và ghi rõ họ tên) NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN

Trang 5

Giảng viên phản biện

(Ký và ghi rõ họ tên)

Trang 6

TÓM TẮT

Tên đề tài: Xây dựng website mua bán đồ điện tử

Sinh viên thực hiện: Đậu Thái Công

Mã SV: 1911514110103 Lớp: 19SK1

Nội dung tóm tắt

Hiện nay, các công nghệ tiên tiến phát triển ngày càng mạnh mẽ và được ứngdụng ngày càng nhiều vào các lĩnh vực kinh tế, sản xuất cũng như đời sống thườngnhật của con người Một điểm tiêu biểu trong việc phát triển các công nghệ đó phải kểđến việc ứng dụng công nghệ thông tin vào hầu khắp các hoạt động Nhờ đó, các côngviệc được thực hiện nhanh, chính xác và đạt kết quả cao hơn rất nhiều

Tuy nhiên, việc mua, bán sản phảm qua mạng gặp phải một số vấn đề như: Chiphí, thời gian bỏ ra để chi trả cho việc này khá cao; tìm kiếm thông tin, đăng thông tinsản phẩm để bán cũng tiến hành khó khăn và tốn kém…

Mục tiêu của đề tài này là xây dựng một website: mua, bán về lĩnh vực đồ điện tử,giúp việc tìm kiếm thông tin về các sản phẩm, bán sản phảm cho mọi người mà cácshop nhỏ có giá cả phải chăng nhanh chóng và chính xác đáp ứng như cầu cần thiếtcủa mọi người…

Trang 7

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

CỘNG HÒA XÃ HÔI CHỦ NGHĨA VIỆT NAM

Độc lập - Tự do - Hạnh phúc

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

Giảng viên hướng dẫn: Nguyễn Văn Phát

Sinh viên thực hiện: Đậu Thái Công Mã SV: 1911514110103

1 Tên đề tài:

Xây dựng website mua bán đồ điện tử

2 Các số liệu, tài liệu ban đầu:

Tham khảo các website mua bán lớn trên mạng kết hợp với các hướng dẫn vàgóp ý từ giảng viên hướng dẫn

3 Nội dung chính của đồ án:

Gồm các chức năng:

- Phân quyền người dùng

- Quản lý danh sách sản phẩm (duyệt sản phẩm khi người dùng đăng sản phẩm)

- Thanh toán online với ngân hàng giả lập

- Tìm kiếm theo sản phẩm, shop

- Mua sản phẩm

- Bán sản phẩm: Đăng sản phẩm lên thì sẽ trừ tiền theo thời gian đăng bài, sảnphẩm vừa đăng sẽ vào trạng thái chờ duyệt và sẽ hoàn lại nếu không đượcduyệt Bán thành công sẽ trừ tiền theo % giá sản phẩm

- Quản lý danh mục dùng chung

4 Các sản phẩm dự kiến

Website mua bán đồ điện tử

5 Ngày giao đồ án: 6/2/2023

6 Ngày nộp đồ án: 7/6/2023

Trang 8

Đà Nẵng, ngày tháng năm 2023

Trang 9

LỜI NÓI ĐẦU

Lời đầu tiên, em xin gởi lời cảm ơn chân thành đến quý thầy cô đã giúp đỡ

chúng em thực hiện đề tài này Đặc biệt là ThS Nguyễn Văn Phát đã tận tình giúp

đỡ chúng em trong xuất quá trình thực hiện đề tài tốt nghiệp này

Đồng thời, chúng em cũng xin cảm ơn quý thầy cô thuộc Khoa Công nghệ số Trường Đại học Sư Phạm Kỹ Thuật Đà Nẵng đã truyền đạt những kiến thức cần thiết

-và những kinh nghiệm quý báu cho chúng em trong suốt thời gian 4 năm trên giảng đường để em có thể thực hiện tốt đề tài này Đặc biệt, em xin gởi lời cảm ơn chân

thành tới TS Hoàng Thị Mỹ Lệ cùng toàn thể các thầy cô đã giúp đỡ chúng em rất

nhiều trong quá trình học tập và công việc

Em cũng xin gởi lời cảm ơn của mình tới quý anh chị của Công ty Codecomplete Việt Nam đã hỗ trợ em những kiến thức cơ bản và cần thiết mà chúng em đã và đang

áp dụng trong quá trình thực hiện đề tài, cũng như đã tạo điều kiện thuận lợi nhất giúp em có thể hoàn thành đề tài ngay trong quá trình thực tập

Trong quá trình thực hiện đề tài, do kiến thức và thời gian còn hạn chế nên không thể tránh khỏi những sai sót Vì vậy em mong quý thầy, cô thông cảm và góp ý

để em có thể hoàn thiện đề tài Và những lời góp ý đó có thể giúp chúng em có thể tránh được những sai lầm sau này Em xin chân thành cảm ơn!

Đà Nẵng, ngày 09 tháng 06 năm 2023

Sinh viên thực hiện

Đậu Thái Công

i

Trang 10

CAM ĐOAN

Em xin cam đoan:

1 Những nội dung trong luận văn này do em thực hiện dưới sự hướng dẫn của thầy Nguyễn Văn Phát

2 Mọi tham khảo trong luận văn đều được trích dẫn rõ rang tên tác giả, tên công trình, thời gian, địa điểm công bố

3 Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, em xin chịu hoàn toàn trách nhiệm

Sinh viên thực hiện

Đậu Thái Công

Trang 11

MỤC LỤC

MỤC LỤC iii

DANH MỤC BẢNG BIỂU ix

DANH MỤC HÌNH VẼ x

DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆT xiii

DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH xiv

MỞ ĐẦU 1

1 Mục tiêu đề tài 1

2 Đối tượng nghiên cứu và phạm vi nghiên cứu 1

a Đối tượng nghiên cứu 1

b Phạm vi nghiên cứu 1

3 Phương pháp nghiên cứu 1

a Phương pháp thu thập 1

b Phương pháp xử lý thông tin 1

4 Giải pháp công nghệ 2

5 Cấu trúc đồ án 2

Chương 1 CƠ SỞ LÝ THUYẾT 3

1.1 Ngôn ngữ lập trình 3

1.1.1 Spring Cloud là gì? 3

1.1.1.1 Khái niệm 3

1.1.1.2 Lý do nên dùng Spring Cloud 4

1.1.1.3 Mô hình microservice 4

1.1.2 Tổng quan về VUEJS 5

1.1.2.1 Khái niệm 5

iii

Trang 12

1.1.2.2 Lý do nên sử dụng VueJS: 5

1.1.2.3 Tổng quan về VueX 6

1.1.3 Tổng quan về VueRouter 7

1.1.3.1 Khái niệm: 7

1.1.3.2 Lợi ích khi sử dụng VueRoute: 8

1.2 Hê quản trị cơ sở dữ liệu: MySQL Workbench 8

1.2.1 MySQL 8

1.2.2 MySQL Workbench 8

Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 10

2.1 Đặc tả yêu cầu phần mềm (Software Requirements) 10

2.1.1 Quản trị (admin) 10

2.1.2 Người xem 10

2.1.3 Người dùng 10

2.2 Sơ đồ ERD 11

2.3 Sơ đồ Usecase 11

2.4 Kịch bản cho usecase 12

2.4.1.1 Usecase cập nhật danh mục dùng chung 12

2.4.1.2 Usecase duyệt bài đăng 12

2.4.2 Người xem 13

2.4.2.1 Usecase tìm kiếm 13

2.4.2.2 Usecase xem thông tin sản phẩm 13

2.4.3.1 Usecase đăng ký 14

2.4.3.3 Usecase nạp tiền 15

Trang 13

2.4.3.4 Usecase đăng bài 15

2.4.3.5 Usecase mua sản phẩm 16

2.5 Sơ đồ hoạt động 17

2.5.1.1 Duyệt bài đăng 17

2.5.2.1 Nạp tiền 17

2.5.2.2 Đăng bài 18

2.5.2.3 Duyệt đơn mua 18

2.5.2.4 Mua sản phẩm 19

2.5.2.5 Thêm sản phẩm vào giỏ hàng 20

2.6 Sơ đồ tuần tự Sequence 21

2.6.1.1 Duyệt bài đăng 21

2.6.2.1 Nạp tiền 21

2.6.2.2 Đăng bài 22

2.6.2.3 Duyệt đơn mua 22

2.6.2.4 Mua sản phẩm 23

2.6.2.5 Thêm sản phẩm vào giỏ hàng 23

Chương 3 XÂY DỰNG CHƯƠNG TRÌNH 24

3.1 Giao diện chương trình 24

3.1.1 Giao diện trang chủ 24

3.1.2 Giao diện đăng nhập 25

3.1.2.1 Đăng nhập từ tài khoản đăng ký 25

v

Trang 14

3.1.2.2 Đăng nhập bằng google 25

3.1.2.3 Đăng nhập bằng facebook 26

3.1.3 Giao diện đăng ký 26

3.1.4 Giao diện quên mật khẩu 27

3.1.4.1 Bước 1: Nhập email đăng ký tài khoản 27

3.1.4.2 Bước 2: Nhập otp 28

3.1.4.3 Bước 3: Nhập mật khẩu cập nhật 28

3.1.6 Giao diện thông tin cá nhân 29

3.1.7 Giao diện đổi mật khẩu 29

3.1.8 Giao diện đăng bài 30

3.1.9 Giao diện danh sách bài đăng chưa duyệt 30

3.1.10 Giao diện danh sách tin đã duyệt 31

3.1.11 Giao diện danh sách tin từ chối 31

3.1.12 Giao diện danh sách tin nháp 32

3.1.13 Giao diện danh sách tin đã xóa 32

3.1.15 Giao diện tìm kiếm sản phẩm 33

3.1.16 Giao diện nạp tiền 33

3.1.16.1 Bước 1 33

3.1.16.2 Bước 2 34

3.1.17 Giao diện chi tiết sản phẩm 34

3.1.18 Giao diện mua sản phẩm 35

3.1.19 Giao diện giỏ hàng 36

3.1.20 Giao diện thanh toán thường 36

3.1.21 Giao diện thanh toán thẻ ngân hàng 37

3.1.23 Giao diện đơn hàng người mua 38

Trang 15

3.1.23.1 Giao diện chờ xác nhận 38

3.1.23.2 Giao diện đã xác nhận 38

3.1.23.4 Giao diện đã giao 39

3.1.24 Giao diện đơn hàng người bán 39

3.1.24.1 Giao diện chờ xác nhận 39

3.1.24.2 Giao diện đã xác nhận 40

3.1.24.3 Giao diện đã giao 40

3.1.24.5 Giao diện đã hủy 41

3.1.25 Giao diện admin danh sách tin chưa duyệt 41

3.1.26 Giao diện admin danh sách tin đã duyệt 42

3.1.27 Giao diện admin danh sách tin từ chối 42

3.1.28 Giao diện admin thông tin chi tiết sản phẩm 43

3.1.29 Giao diện admin danh sách loại tin 43

3.1.30 Giao diện amin danh sách tỉnh thành 44

3.1.31 Giao diện admin danh sách quận huyện 44

3.1.32 Giao diện admin danh sách phường xã 45

3.1.33 Giao diện admin danh sách tài khoản người dùng 45

3.1.35 Giao diện admin thống kê 46

3.1.35.1 Bài đăng theo tháng 46

3.1.35.2 Bài đăng theo tỉnh thành 46

3.1.35.4 Bài đăng được duyệt 47

3.1.35.5 Đơn hàng mua thành công 47

3.1.35.6 Bài đăng theo danh mục 48

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 49

3.2 Kết luận 49

vii

Trang 16

3.2.1 Ưu điểm 49

3.2.2 Hạn chế 49

3.3 Hướng phát triển 49

TÀI LIỆU THAM KHẢO 50

Trang 17

DANH MỤC BẢNG BIỂU

ix

Trang 18

DANH MỤC HÌNH VẼ

Hình 1.1 Mô hình microservice 4

Hình 1.2 luồng vuejs 7

Hình 2.1 Sơ đồ ERD 11

Hình 2.2 Sơ đồ Usecase 11

Hình 2.3 Sơ đồ hoạt động duyệt bài đăng 17

Hình 2.4 Sơ đồ hoạt động nạp tiền 17

Hình 2.5 Sơ đồ hoạt động đăng bài 18

Hình 2.6 Sơ đồ hoạt động duyệt đơn mua 18

Hình 2.7 Sơ đồ hoạt động mua sản phẩm 19

Hình 2.8 Sơ đồ hoạt động thêm sản phẩm vào giỏ hàng 20

Hình 2.9 Sơ đồ tuần tự duyệt bài đăng 21

Hình 2.10 Sơ đồ tuần tự nạp tiền 21

Hình 2.11 Sơ đồ tuần tự đăng bài 22

Hình 2.12 Sơ đồ tuần tự duyệt đơn mua 22

Hình 2.13 Sơ đồ tuần tự mua sản phẩm 23

Hình 2.14 Sơ đồ tuần tự thêm sản phẩm vào giỏ hàng 23

Hình 3.1 Giao diện trang chủ 24

Hình 3.2 Giao diện đăng nhập 25

Hình 3.3 Đăng nhập bằng google 25

Hình 3.4 Đăng nhập bằng facebook 26

Hình 3.5 Giao diện đăng ký 26

Hình 3.6 Giao diện quên mật khẩu 27

Hình 3.7 Giao diện thông báo email gửi về 27

Hình 3.8 Giao diện thông tin trong email 27

Hình 3.9 Giao diện nhập otp từ email 28

Hình 3.10 Giao diện cập nhật mật khẩu 28

Hình 3.11 Giao diện thông tin cá nhân 29

Hình 3.12 Giao diện đổi mật khẩu 29

Hình 3.13 Giao diện đăng bài 30

Trang 19

Hình 3.14 Giao diện danh sách bài đăng chưa duyệt 30

Hình 3.15 Giao diện danh sách tin đã duyệt 31

Hình 3.16 Giao diện danh sách tin từ chối 31

Hình 3.17 Giao diện danh sách tin nháp 32

Hình 3.18 Giao diện danh sách tin đã xóa 32

Hình 3.19 Giao diện tìm kiếm sản phẩm 33

Hình 3.20 Giao diện nạp tiền bước 1 33

Hình 3.21 Giao diện nạp tiền bước 2 34

Hình 3.22 Giao diện chi tiết sản phẩm 34

Hình 3.23 Giao diện mua sản phẩm 35

Hình 3.24 Giao diện mua sản phẩm nhập đúng 35

Hình 3.25 Giao diện giỏ hàng 36

Hình 3.26 Giao diện thanh toán thường 36

Hình 3.27 Giao diện thanh toán bằng thẻ ngân hàng 37

Hình 3.28 Giao diện chờ xác nhận người mua 38

Hình 3.29 Giao diện đã xác nhận người mua 38

Hình 3.30 Giao diện đã giao người mua 39

Hình 3.31 Giao diện chờ xác nhận người bán 39

Hình 3.32 Giao diện đã xác nhận người bán 40

Hình 3.33 Giao diện đã giao người bán 40

Hình 3.34 Giao diện đã hủy người bán 41

Hình 3.35 Giao diện admin danh sách tin chưa duyệt 41

Hình 3.36 Giao diện admin danh sách tin đã duyệt 42

Hình 3.37 Giao diện admin danh sách tin từ chối 42

Hình 3.38 Giao diện admin thông tin chi tiết sản phẩm 43

Hình 3.39 Giao diện admin danh sách loại tin 43

Hình 3.40 Giao diện amin danh sách tỉnh thành 44

Hình 3.41 Giao diện admin danh sách quận huyện 44

Hình 3.42 Giao diện admin danh sách phường xã 45

Hình 3.43 Giao diện admin danh sách tài khoản người dùng 45

Hình 3.44 Giao diện admin thống kê bài đăng theo tháng 46

xi

Trang 20

Hình 3.45 Giao diện admin thống kê bài đăng theo tỉnh thành 46

Hình 3.46 Giao diện admin thống kê bài đăng được duyệt 47

Hình 3.47 Giao diện admin thống kê đơn mua thành công 47

Hinh 3.48 Giao diện admin thống kê bài đăng theo danh mục 48

Trang 21

DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆTStt Chữ viết tắt Giải nghĩa

1 CNTT Công nghệ thông tin

2

3

xiii

Trang 22

DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH

1 HTML Hyper Text Markup Language Ngôn ngữ đánh dấu siêu văn bản2

3

Trang 23

Website mua bán đồ điện tử

MỞ ĐẦU

1 Mục tiêu đề tài

Hiện nay, các công nghệ tiên tiến phát triển ngày càng mạnh mẽ và được ứngdụng ngày càng nhiều vào các lĩnh vực kinh tế, sản xuất cũng như đời sống thườngnhật của con người Và mua bán trên các trang mạng cũng vậy, hiện giờ nó là một nhucầu không thể thiếu của mỗi người

Tuy nhiên, đối với người người lao động có mức thu nhập không cao việc mua,bán sản phảm qua mạng gặp phải một số vấn đề như: Chi phí bỏ ra để chi trả cho việcnày khá cao; tìm kiếm thông tin, đăng thông tin sản phẩm để bán cũng tiến hành khókhăn và tốn kém…

Từ những lý do trên, em đã chọn đề tài “Xây dựng website mua bán đồ điện tử”làm đề tài tốt nghệp

2 Đối tượng nghiên cứu và phạm vi nghiên cứu

a Đối tượng nghiên cứu

Các website phục vụ công tác mua bán và Framework Spring boot:

Trang 24

b Phương pháp xử lý thông tin

Phương pháp phân tích, đánh giá: dựa vào những cơ sở lý thuyết đã tìm được vànhìn nhận vấn đề vào thực tế để lựa chọn giải pháp hoàn thiện đề tài

Phương pháp tổng hợp: Áp dụng lựa chọn tốt nhất từ bước phân tích kết hợp vớicông nghệ, từ đó từng bước hoàn thành đề tài

4 Giải pháp công nghệ

Công nghệ sử dụng gồm:

Sping cloud:

- eureka-server: Dùng để đăng ký các service

- gateway-service: Các service chạy qua cổng của gateway

- config-service: Cấu hình các chức năng, cổng, database,… cung cấp chocác service

- user-service: Các api chức năng về người dùng

- dodientu-service: Các api chức năng cho website

Vuejs: Lập trình giao diện

5 Cấu trúc đồ án

Cấu trúc đồ án bao gồm:

Chương I: Cơ sở lý thuyết

Chương II: Phân tích, thiết kế hệ thống

Chương III: Xây dựng chương trình

Kết Luận

Trang 25

Quản lý hệ thống phân tán dẫn đến các mẫu mẫu boilerplate Sử dụng SpringCloud, các nhà phát triển có thể nhanh chóng xây dựng các dịch vụ và ứng dụng thựchiện các mẫu này Chúng sẽ hoạt động tốt trong bất kỳ môi trường phân tán nào, baogồm desktop của nhà phát triển, các trung tâm dữ liệu và các nền tảng như CloudFoundry

Spring Cloud xây dựng trên Spring Boot bằng cách cung cấp một bộ thư viện cảithiện hành vi của một ứng dụng khi được thêm vào classpath Bạn có thể tận dụnghành vi mặc định để tạo một dự án khởi đầu nhanh chóng Sau đó khi cần, bạn có thểcấu hình hoặc mở rộng nó để tạo ra một giải pháp tùy chỉnh

Hệ sinh thái Spring không xây dựng tất cả các thành phần cần thiết để xây dựngmột ứng dụng Microservices Thay vào đó, có một kho thành phần cho Microservicesban đầu được phát triển bởi Netflix trong nhà để xây dựng dịch vụ phát trực tuyến phổbiến của họ và sau đó được công bố công khai dưới tên Netflix OSS (Open SourceSoftware) Và Spring đơn giản là bao bọc chúng và sử dụng chúng trong hệ sinh tháicủa Spring (tất nhiên Spring cũng bao bọc nhiều thành phần khác) Bằng cách kết hợpSpring Boot, Spring Cloud và Netflix OSS, sẽ cung cấp các công cụ và tài liệu cầnthiết nhất để giúp bạn nhanh chóng và dễ dàng xây dựng Microservices của mình

Trang 26

Vậy Spring Cloud là gì? Nó là một dự án con nằm trong dải chính của Spring IO

(Spring IO Umbrella) và nó là chính một cái dải, một cái dải phụ (Sub-Umbrella)

1.1.1.2 Lý do nên dùng Spring Cloud

Spring Cloud là một công nghệ phần mềm được sử dụng để phát triển các ứngdụng phân tán Một ứng dụng được coi là phân tán khi các phần của nó có thể đượcphát triển bằng các ngôn ngữ khác nhau và triển khai trên các máy chủ khác nhau Do

đó, mục tiêu của Spring Cloud là làm thế nào để các thành phần của ứng dụng có thểgiao tiếp với nhau

Spring Cloud cung cấp các công cụ dành cho các developers có thể nhanh chóngxây dựng những mẫu thiết kế phổ biến trong các hệ thống phân tán, ví dụ như quản lýcấu hình, service discovery, circuit breakers, intelligent routing, micro-proxy, controlbus, one-time tokens, global locks, leadership election, distributed session, clusterstate) Điều phối các hệ thống phân tán dẫn đến các boiler plate patterns, và sử fungjSpring Cloud, các nhà phát triển có thể nhanh chóng dựng nên các services và ứng ựng

mà hiện thực những patterns này Chúng sẽ hoạt động tốt trong mọi môi trường phântán, bao gồm cả máy tính của nhà phát triển đó, các trung tâm dữ liệ và các nền tảngnhư Cloud Foundry

1.1.1.3 Mô hình microservice

Vì các service được cấu thành có quy mô nhỏ nên chúng có thể được xây dựngbởi một hoặc nhiều các service nhỏ hơn ngay từ đầu nên sẽ giúp cho chúng ta có thể dễdàng mở rộng và phát triển ứng dụng hơn

Sau khi được phát triển, các service này cũng có thể được triển khai với nhau mộtcách độc lập đo đó dễ dàng xác định được các service quan trọng và mở rộng quy môcủa chúng một cách độc lập với ứng dụng của chúng ta Microservice cũng có khảnăng cung cấp cho chúng ta khả năng cô lập các issue (lỗi) của hệ thống nên do đó khixảy ra lỗi trong 1 service bất kỳ, hệ thống của chúng ta sẽ không bị ảnh hưởng doservice đó lỗi và do đó hệ thông cũng không nhất thiết phải tạm ngừng hoạt động Khi

Hình 1.1 Mô hình microservice

Trang 27

lỗi được khắc phục, nó có thể sẽ được triển khai bởi các service tương ứng thay viđược triển khai lại toàn bộ ứng dụng của chúng ta

Một lợi thế khác của việc sử dụng kiến trúc Microservice đó là nó sẽ sắp xếp mọithứ dưới dạng bảng giúp bạn dễ dàng lựa chọn các công nghệ (ngôn ngữ lập trình, cơ

sở dữ liệu,…) phù hợp với các chức năng (service) được yêu cầu nhất thay vì chúng tabắt buộc phải thực hiện cách tiếp cận tiêu chuản, phải phù hợp với tất cả

1.1.2 Tổng quan về VUEJS

1.1.2.1 Khái niệm

Vuejs được gọi tắt là Vue Vue.js là một framework rất linh động được dùng phổ biến để xây dựng nên các giao diện người dùng Hoàn toàn khác với các framework nguyên khối thì Vue thường sở hữu thiết kế từ đầu theo những hướng cho phép cũng như khuyến khích làm việc để phát triển dễ dàng hơn các ứng dụng theo từng bước một

Một khi đã phát triển lớp giao diện (view layer) thì người dùng chỉ cần sử dụng loại thư viện lõi của Vue Ngoài ra, nếu như bạn kết hợp với các kỹ thuật thiên hướng hiện đại thì Vue cũng có thể đáp ứng được dễ dàng mọi nhu cầu xây dựng ứng dụng của một trang với độ phức tạp cao hơn

1.1.2.2 Lý do nên sử dụng VueJS:

Hiện nay, Vue đang giữ số stars cao nhất trên 160k; trong số đó thì framework frontend đang giữ vị trí lần lượt hiện nay là React(> 146k) và Angular(> 59.2k) Dưới đây là một số lý do nên sử dụng Vuejs

No build step required: Nếu sử dụng Vue thì bạn sẽ không cần phải trải qua quá nhiều bước để build mà có thể đi thẳng vào vấn đề một cách dễ dàng Bởi vì, Vue không cần sử dụng build tool quá phức tạp mới có thể xây dựng ứng dụng, bạn chỉ cầnkhai báo một script là có thể phát triển một ứng dụng bằng Vue

Vue có thể tạo cấu trúc project nhanh chóng hơn nhờ vào command line interface.Hiện nay, tài liệu về Vue ngày càng đa dạng, rõ ràng về ngôn ngữ nên bạn có thể

dễ dàng trở thành chuyên gia về nó

Trang 28

Vue sở hữu một hệ sinh thái vững chắc nên có thể cung cấp một số add-ons rất hữu ích cho việc xây dựng một ứng dụng fontend điển hình nhất Nó có thể bao gồm: vue-router, vuex, vue-test-utils, vue-dev-tools, vue-cli…

Core Vue sở hữu tính năng tối thiểu bởi khả năng tập trung vào việc render giao diện cho người dùng và các tương tác của nó Chính vì vậy, nó sẽ cung cấp tối thiểu những tính năng cần thiết cho việc thiết kế và xây dựng kiến trúc Nó sẽ giúp bạn loại

bỏ được các tính năng không cần thiết ra khỏi thư viện trong lõi Vue.js và đảm bảo cho framework nhỏ gọn và mềm dẻo hơn

1.1.2.3 Tổng quan về VueX

Vue.js là làm việc với các component, tuy nhiên từ trước đến giờ chúng ta chưa

có cách nào giúp chia sẻ trạng thái giữa các component này, hoặc có nhưng mã nguồn rất khó duy trì đặc biệt với các dự án lớn Vuex là thư viện giúp quản lý trạng thái các component trong Vue.js, nó là nơi lưu trữ tập trung cho tất cả các component trong một ứng dụng! Chúng ta sẽ cùng nhau phân tích xem, tại sao Vuex ra đời đơn giản nhất là tìm hiểu mô hình “Luồng dữ liệu một chiều” thường được sử dụng trong các ứng dụng đơn thuần trước đây Trong một ứng dụng khép kín có các thành phần như sau:

1 State – Trạng thái, là nơi khởi nguồn để thực hiện ứng dụng

2 View – Khung nhìn, là các khai báo ánh xạ với trạng thái

3 Action – Hành động, là những cách thức làm trạng thái thay đổi phản ứng lại các nhập liệu của người dùng từ View Hình dưới đây mô tả một cách đơn giản nhất cho khái niệm “Luồng dữ liệu một chiều”

Trang 29

Tuy nhiên, mô hình này bị phá vỡ khi chúng ta có rất nhiều các component cùng chia sẻ một trạng thái: Nhiều view cùng phụ thuộc vào một trạng thái nào đó Các hành động từ các view khác nhau cần thay đổi cùng dữ liệu trạng thái Vuex nhìn thấy tại sao không đưa các trạng thái được chia sẻ của các component ra và quản lý chúng trong một bộ máy toàn cục, và đó chính là lý do cho sự ra đời của Vuex Trong đó, cáccomponent trở thành các view và các component có thể truy xuất trạng thái hoặc trigger các hành động Với cách thức này, mã nguồn có cấu trúc và dễ dàng duy trì

1.1.3 Tổng quan về VueRouter

1.1.3.1 Khái niệm:

Vue router là router chính thức cho Vue.js Nó tích hợp sâu với Vue.js core để giúp xây dựng các SPA với Vue.js một cách dễ dàng Các tính năng bao gồm:

- Nested route (định tuyến lồng nhau)/view mapping

- Cấu hình router dựa trên thành phần, mô-đun

- Định tuyến tham số, truy vấn, ký tự đại diện

- Xem các hiệu ứng chuyển tiếp được cung cấp bởi hệ thống chuyển tiếp củaVue.js

- Kiểm soát tính năng Fine-grained navigation

- Liên kết với các active CSS class tự động

Hình 1.2 luồng vuejs

Trang 30

- Chế độ HTML5 history mode hay hash mode, với tính năng auto-fallback trong IE9

- Hành vi cuộn tùy chỉnh

1.1.3.2 Lợi ích khi sử dụng VueRoute:

Dễ dàng trong việc kiểm soát trạng thái người dùng, không cần sử dụng đến cookie, lưu trữ thông tin trong session… trong việc xử lý các trạng thái giữa hai web request

Giảm lượng thông tin trao đổi giữa client và server, ví dụ các phần khung trang được giữ nguyên và chỉ tải các nội dung cần thay đổi Chính vì vậy, Single Page Application có thể sử dụng rất tốt với các đường truyền tốc độ thấp

Gần như không có độ trễ khi chuyển trang

Giảm số lượng truy vấn đến máy chủ, tưởng tượng trong Gmail có hàng nghìn email, mỗi lần nó sẽ tải 50 email về vì vậy việc mở các email này sẽ rất nhanh do đượctải sẵn

Đem đến một trải nghiệm người dùng tuyệt vời hơn, các xử lý chạy ngầm giúp các hoạt động thực hiện nhanh chóng

1.2 Hê quản trị cơ sở dữ liệu: MySQL Workbench

1.1.1 MySQL

Một tập hợp nhiều dữ liệu sẽ được gọi là một cơ sở dữ liệu Có nhiều loại cơ sở

dữ liệu khác nhau từ đơn giản đến phức tạp cũng như nhiều cách lưu trữ cơ sở dữ liệu,truyền thống nhất là trên văn bản, giấy tờ hoặc có thể lưu trữ bằng những phần mềmthông qua các tập tin

Tuy nhiên, đối với những cơ sở dữ liệu khó và phức tạp như lập trình, chúng tacần phải sử dụng hệ quản trị cơ sở dữ liệu Và MySQL là một hệ thống quản trị cơ sở

dữ liệu nhưng có mã nguồn mở dùng để tạo và quản trị các cơ sở dữ liệu và được sửdụng với ngôn ngữ truy vấn có cùng một cấu trúc là Structured Query Language – viếttắt là SQL

1.2.1 MySQL Workbench

MySQL Workbench chính là một chương trình giúp cho người lập trình có thểgiao tiếp với hệ cơ sở dữ liệu MySQL thay vì phải sử dụng các lệnh Command-line

Trang 31

có thể thích ứng với nhiều hệ điều hành như là Microsoft Windowns, Max OS, Linuxhay Ubuntu

Trang 32

- Cập nhật thông tin cá nhân

- Xem thông tin bài đăng

- Thêm sản phẩm vào giỏ hàng

- Chuyển trạng thái đơn hàng

Trang 33

2.2 Sơ đồ ERD

2.3 Sơ đồ Usecase

Hình 2.3 Sơ đồ ERD

Trang 34

Hình 2.4 Sơ đồ Usecase

2.4 Kịch bản cho usecase

2.4.1 Quản trị (admin)

2.4.1.1 Usecase cập nhật danh mục dùng chung

1 Use-Case Name Cập nhật danh mục dùng chung

2 Description Quản trị cập nhật danh mục dùng chung mới

nhất

3 Actors Quản trị

4 Input Danh mục cần cập nhật

5 Output Danh mục được cập nhật

6 Basic flow 1 Đăng nhập tài khoản quyền quản trị

2 Chọn danh mục muốn cập nhật

3 Chọn button muốn cập nhật

4 Bấm lưu

7 Alternative flow (nêu các

bước phát sinh trong

Basic flow)

Sau khi cập nhật thành công sẽ có thông báohiển thị trên màn hình

8 Exception flow (Nêu các

trường hợp ngoại lệ của

Basic flow)

Đăng nhập lỗi (hết phiên đăng nhập) ➔ Đăng nhập lại

2.4.1.2 Usecase duyệt bài đăng

1 Use-Case Name Duyệt bài đăng

2 Description Duyệt bài đăng để hiển thị trên website

3 Actors Quản trị

4 Input Bài đăng chờ duyệt

5 Output Bài đăng được duyệt

6 Basic flow 1. Đăng nhập tài khoản quyền quản trị

2. Chọn danh mục ‘danh sách bài đăng’

3. Chọn button duyệt

Sau khi thực hiện thao tác thành công sẽ cóthông báo hiển thị trên màn hình

Trang 35

Basic flow)

Đăng nhập lỗi (hết phiên đăng nhập) ➔ Đăng nhập lại, bài đăng không được duyệt ➔trả về người đăng

2.4.2 Người xem

2.4.2.1 Usecase tìm kiếm

1 Use-Case Name Tìm kiếm

2 Description Người xem muốn tìm kiếm bài đăng

3 Actors Người xem

4 Input Từ khóa

5 Output Bài đăng

6 Basic flow 1. Nhập từ khóa trên thành tìm kiếm

4. Nhấn button tìm kiếm

5. Trình duyệt hiện tab mới có nội dungtìm kiếm cần tìm

Basic flow)

Không có

Basic flow)

Không có nội dung liên qua với từ khóa ➔ Hiển thị không tìm thấy

2.4.2.2 Usecase xem thông tin sản phẩm

1 Use-Case Name Xem thông tin sản phẩm

2 Description Người xem muốn xem bài đăng

3 Actors Người xem

4 Input Truy cập website

5 Output Thông tin chi tiết sản phẩm

6 Basic flow 1. Click bài đăng

6. Trình duyệt hiện tab mới có nội dungbài đăng

Không có

Trang 36

Basic flow)

Không có

2.4.3 Người dùng

2.4.3.1 Usecase đăng ký

1 Use-Case Name Đăng ký

2 Description Người dùng đăng ký tài khoản

3 Actors Người dùng

4 Input Các thông tin cần có để đăng ký

5 Output Đăng ký thành công

6 Basic flow 1. Chọn tab đăng ký trong giao diện

đăng nhập

7. Nhập các thông tin bắt buộc

8. Click button ‘đăng ký’

Basic flow)

Không có

Tiêu đề	Xây dựng Website Mua Bán Đồ Điện Tử
Tác giả	Đậu Thái Công
Người hướng dẫn	ThS. Nguyễn Văn Phát
Trường học	Đại học Đà Nẵng
Chuyên ngành	Sư phạm Kỹ thuật Công nghiệp
Thể loại	Đồ án tốt nghiệp Đại học
Năm xuất bản	2023
Thành phố	Đà Nẵng

Định dạng
Số trang	72
Dung lượng	11,72 MB