1. Trang chủ
  2. » Luận Văn - Báo Cáo

(Đồ án hcmute) xây dựng website kinh doanh thiết bị và linh kiện công nghệ sử dụng spring boot

111 4 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Xây Dựng Website Kinh Doanh Thiết Bị Và Linh Kiện Công Nghệ Sử Dụng Spring Boot
Tác giả Nguyễn Võ Tuấn Nhân
Người hướng dẫn ThS. Lê Thị Minh Châu
Trường học Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
Chuyên ngành Công Nghệ Thông Tin
Thể loại Đồ án tốt nghiệp
Năm xuất bản 2022
Thành phố Thành phố Hồ Chí Minh
Định dạng
Số trang 111
Dung lượng 8,61 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Nội dung

Phía Khách a Đăng ký tài khoản b Tìm kiếm, xem danh sách, chi tiết sản phẩm, cửa hàng, người dùng khác 2.. Phía Người mua a Đặng nhập, đăng xuất, quên mật khẩu b Quản lý tài khoản, giỏ h

Trang 1

THÀNH PHỐ HỒ CHÍ MINH

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

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

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN

GVHD: Th.S LÊ THỊ MINH CHÂU SVTH: NGUYỄN VÕ TUẤN NHÂN

S K L 0 1 0 5 6 5

XÂY DỰNG WEBSITE KINH DOANH THIẾT BỊ

VÀ LINH KIỆN CÔNG NGHỆ SỬ DỤNG SPRING BOOT

Trang 2

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HCM

KHOA CÔNG NGHỆ THÔNG TIN

KHÓA LUẬN TỐT NGHIỆP

XÂY DỰNG WEBSITE KINH DOANH THIẾT BỊ VÀ LINH KIỆN CÔNG NGHỆ

SỬ DỤNG SPRING BOOT

Nguyễn Võ Tuấn Nhân - 18110329

GIẢNG VIÊN HƯỚNG DẪN ThS Lê Thị Minh Châu

TP HỒ CHÍ MINH, 2022

Trang 3

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

******

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

Họ tên sinh viên: Nguyễn Võ Tuấn Nhân MSSV: 18110329 Chuyên ngành: Hệ thống thông tin

Tên đề tài: XÂY DỰNG WEBSITE KINH DOANH THIẾT BỊ VÀ LINH KIỆN

CÔNG NGHỆ SỬ DỤNG SPRING BOOT

Họ và tên giảng viên hướng dẫn: ThS Lê Thị Minh Châu

Trang 4

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

******

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN

Họ tên sinh viên: Nguyễn Võ Tuấn Nhân MSSV: 18110329 Chuyên ngành: Hệ thống thông tin

Tên đề tài: XÂY DỰNG WEBSITE KINH DOANH THIẾT BỊ VÀ LINH KIỆN

CÔNG NGHỆ SỬ DỤNG SPRING BOOT

Họ và tên giảng viên phản biện: TS Nguyễn Thành Sơn

Trang 5

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

******

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP

Họ và tên Sinh viên: Nguyễn Võ Tuấn Nhân Mã Số SV: 18110329

Thời gian làm luận văn: Từ: 14/08/2022 Đến: 30/12/2022

Chuyên ngành: Hệ thống thông tin

Tên đề tài: XÂY DỰNG WEBSITE KINH DOANH THIẾT BỊ VÀ LINH KIỆN CÔNG NGHỆ SỬ DỤNG SPRING BOOT

Giảng viên hướng dẫn: ThS Lê Thị Minh Châu

Nhiệm vụ của đề tài:

1 Tìm hiểu Spring Framework

2 Xây dựng hệ thống thương mại điện tử

Đề cương viết luận văn:

MỤC LỤC

PHẦN MỞ ĐẦU

1 Tính cấp thiết của đề tài

2 Mục đích của đề tài

3 Cách tiếp cận và phương pháp nghiên cứu

4 Phân tích những công trình có liên quan

5 Kết quả dự kiến đạt được

Trang 6

3.1.2 Phía Người mua (Customer)

3.1.3 Phía Quản trị viên (Admin)

3.2 Biểu đồ Use case (Use case Diagram)

3.3 Biểu đồ Tuần tự (Biểu đồ tuần tự)

3.4 Biểu đồ Class (Class Diagram)

3.5 Thiết kế Cơ sở dữ liệu

3.6 Thiết kế Giao diện

3.6.1 Phía Khách (Guest)

Trang 7

3.6.2 Phía Người mua (Customer)

3.6.3 Phía Quản trị viên (Admin)

4 Chương 4: Cài đặt và kiểm thử

Đã hoàn thành

3 14/08/2022 -

17/10/2022

Xây dựng hệ thống phía Khách, Người mua

Kiểm thử, sửa lỗi, hoàn thiện Đã hoàn thành

6 20/12/2022 - Viết báo cáo Đã hoàn thành

Trang 8

Ngày 28 tháng 12 năm 2022

Người viết đề cương

Nguyễn Võ Tuấn Nhân

Ý kiến của Giảng viên hướng dẫn

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

Trang 9

LỜI CẢM ƠN

Lời đầu tiên, nhóm xin gửi lời cảm ơn đến khoa Công Nghệ.Thông Tin, trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh, đã tạo điều kiện cho chúng tôi.được học tập, nghiên cứu và thực hiện đề tài này

Nhóm cũng xin cảm ơn ThS Lê Thị Minh Châu, Giảng viên hướng dẫn, người đã tận tình chia sẻ, giúp đỡ nhóm rất nhiều, để chúng tôi có đủ kiến thức và vận dụng vào bài Khóa luận tốt nghiệp

Nhóm tự thấy, trong suốt quá trình thực hiện đề tài, với sự hạn chế về kiến thức, kinh nghiệm và kỹ thuật chuyên môn, sai sót là điều không thể tránh khỏi Rất mong nhận được sự quan tâm, ý kiến đóng góp, nhật xét công tâm từ phía Hôi đồng, các Giảng viên hướng dẫn và Giảng viên phản biện

Xin chân thành cảm ơn

Trang 10

TÓM TẮT

Giao dịch thương mại điện tử là hệ thống website thương mại điện tử cho phép các

tổ chức, cá nhân có thể tiến hành toàn bộ hoặc một phần quy trình mua bán hàng hóa, dịch vụ trên hệ thống, hay đơn giản, nó là mua bán qua Internet Đây là một hình thức

đã và đang không ngừng phát triển, trong tương lai hoàn toàn có thể thay thế các cửa hàng truyền thống Ví dụ một số cái tên như Shopee, Lazada, Tiki… đang vô cùng thành công khi triển khai hình thức này

Vì lý do này, nhóm quyết định chọn đề tài xây dựng một hệ thống thương mại điên

tử, hình thức là một website thương mại điện tử, với Spring Framework, tương đối sẽ

có đầy đủ các chức năng chính:

1 Phía Khách

a) Đăng ký tài khoản

b) Tìm kiếm, xem danh sách, chi tiết sản phẩm, cửa hàng, người dùng khác

2 Phía Người mua

a) Đặng nhập, đăng xuất, quên mật khẩu

b) Quản lý tài khoản, giỏ hàng, đơn hàng

c) Theo dõi sản phẩm, cửa hàng yêu thích

d) Đặt hàng, thanh toán, phản hồi, đánh giá

3 Phía Người bán(Admin)

a) Thống kê doanh thu

b) Quản lý tất cả trong hệ thống

Trang 12

DANH MỤC HÌNH

Hình 1 - 1 Spring Framework 4

Hình 1 - 2 Kiến trúc hệ thống 5

Hình 1 - 3 Ví dụ table trong MySQL 6

Hình 1 - 4 Kiến trúc của MySQL 6

Hình 1 - 5 Cấu trúc file, folder 7

Hình 1 - 6 Cấu hình 8

Hình 1 - 7 Khai báo dependency trong POM 8

Hình 1 - 8 Khởi tạo dependency cho Bootstrap trong POM 9

Hình 1 - 9 Khởi tạo dependency cho jQuery trong POM 10

Hình 1 - 10 Cấu trúc file, folder 10

Hình 1 - 11 Khởi tạo dependency cho Thymeleaf trong POM 11

Hình 1 - 12 Workflow của thymeleaf khi kết hợp với Spring Boot 11

Hình 2 - 1 Hình ảnh Tiki 12 Hình 2 - 2 Hình ảnh Shopee 13

Hình 2 - 3 Hình ảnh Lazada 14

Hình 2 - 4 Hình ảnh Etsy 15

Hình 3 - 1 Use case Diagram 18 Hình 3 - 2 Biểu đồ tuần tự Đăng ký 34

Hình 3 - 3 Biểu đồ tuần tự Đăng nhập 35

Hình 3 - 4 Biểu đồ tuần tự Đăng xuất 36

Hình 3 - 5 Biểu đồ tuần tự Khôi phục mật khẩu 37

Hình 3 - 6 Biểu đồ tuần tự Tìm kiếm/Xem sản phẩm 38

Hình 3 - 7 Biểu đồ tuần tự Tìm kiếm/Xem người dùng 39

Hình 3 - 8 Biểu đồ tuần tự Thay đổi mật khẩu 40

Hình 3 - 9 Biểu đồ tuần tự Quản lý thông tin của tài khoản 40

Hình 3 - 10 Biểu đồ tuần tự Quản lý địa chỉ của tài khoản 41

Hình 3 - 11 Biểu đồ tuần tự Quản lý đơn hàng của tài khoản 42

Hình 3 - 12 Biểu đồ tuần tự Giỏ hàng 43

Hình 3 - 13 Biểu đồ tuần tự Đặt hàng 44

Hình 3 - 14 Biểu đồ tuần tự Phản hồi, đánh giá 45

Hình 3 - 15 Biểu đồ tuần tự Thống kê doanh thu 46

Hình 3 - 16 Biểu đồ tuần tự Quản lý người dùng trong hệ thống 46

Hình 3 - 17 Biểu đồ tuần tự Quản lý sản phẩm trong hệ thống 47

Hình 3 - 18 Biểu đồ tuần tự Quản lý đơn hàng trong hệ thống 48

Hình 3 - 19 Biểu đồ tuần tự Quản lý loại sản phẩm 49

Hình 3 - 20 Biểu đồ tuần tự Quản lý thuộc tính sản phẩm 50

Hình 3 - 21 Biểu đồ Class 51

Hình 3 - 22 Giao diện trang Home phía Khách 67

Hình 3 - 23 Chức năng Đăng nhập 68

Hình 3 - 24 Chức năng Đăng ký 68

Hình 3 - 25 Chức năng tìm kiếm sản phẩm 68

Hình 3 - 26 Giao diện trang Chi tiết sản phẩm phía Khách 69

Trang 13

Hình 3 - 27 Giao diện trang Review & Rating 70

Hình 3 - 28 Giao diện trang Home của người dùng đã login 70

Hình 3 - 29 Giao diện trang Account của người dùng 71

Hình 3 - 30 Chức năng Giỏ hàng của Người mua 71

Hình 3 - 31 Chức năng Đặt hàng của Người mua 71

Hình 3 - 32 Giao diện trang Quản lý đơn hàng, lịch sử mua hàng 72

Hình 3 - 33 Giao diện trang Chi tiết đơn hàng 72

Hình 3 - 34 Giao diện trang Chi tiết đơn hàng 73

Hình 3 - 35 Giao diện trang Chi tiết đơn hàng 73

Hình 3 - 36 Giao diện trang Chi tiết đơn hàng 74

Hình 3 - 37 Giao diện trang Quản lý địa chỉ 74

Hình 3 - 38 Giao diện trang Quản lý Reviews đã viết 74

Hình 3 - 39 Giao diện trang Chi tiết Review 75

Hình 3 - 40 Giao diện trang đánh giá sản phẩm 75

Hình 3 - 41 Giao diện trang Home của Admin 76

Hình 3 - 42 Giao diện trang Thống kê doanh thu phía Quản trị viên (1) 76

Hình 3 - 43 Giao diện trang Thống kê doanh thu phía Quản trị viên (2) 76

Hình 3 - 44 Giao diện trang Quản lý người dùng phía Quản trị viên 77

Hình 3 - 45 Giao diện trang Quản lý khách hàng phía Quản trị viên 77

Hình 3 - 46 Giao diện trang Quản lý khách hàng phía Quản trị viên (1) 78

Hình 3 - 47 Giao diện trang Quản lý khách hàng phía Quản trị viên (2) 78

Hình 3 - 48 Giao diện trang Quản lý đơn hàng phía Quản trị viên (1) 79

Hình 3 - 49 Giao diện trang Chi tiết đơn hàng phía Quản trị viên 79

Hình 3 - 50 Giao diện trang Chi tiết đơn hàng phía Quản trị viên (2) 80

Hình 3 - 51 Giao diện trang Chi tiết đơn hàng phía Quản trị viên (3) 80

Hình 3 - 52 Giao diện trang Chi tiết đơn hàng phía Quản trị viên (4) 81

Hình 3 - 53 Giao diện trang Quản lý sản phẩm phía Quản trị viên 81

Hình 3 - 54 Giao diện trang Quản lý sản phẩm phía Quản trị viên (1) 81

Hình 3 - 55 Giao diện trang Quản lý sản phẩm phía Quản trị viên (2) 82

Hình 3 - 56 Giao diện trang Quản lý sản phẩm phía Quản trị viên (3) 82

Hình 3 - 57 Giao diện trang Quản lý sản phẩm phía Quản trị viên (4) 82

Hình 3 - 58 Giao diện trang Quản lý sản phẩm phía Quản trị viên (5) 83

Hình 3 - 59 Giao diện trang Quản lý danh mục phía Quản trị viên (1) 83

Hình 3 - 60 Giao diện trang Quản lý danh mục phía Quản trị viên (2) 83

Hình 3 - 61 Giao diện trang Quản lý nhãn hàng phía Quản trị viên (1) 84

Hình 3 - 62 Giao diện trang Quản lý nhãn hàng phía Quản trị viên (2) 84

Hình 3 - 63 Giao diện trang Quản lý tỉ lệ vận chuyển phía Quản trị viên (1) 84

Hình 3 - 64 Giao diện trang Quản lý tỉ lệ vận chuyển phía Quản trị viên (2) 85

Hình 3 - 65 Giao diện trang Quản lý Reviews phía Quản trị viên (1) 85

Hình 3 - 66 Giao diện trang Quản lý Reviews phía Quản trị viên (2) 85

Trang 14

Hình 3 - 70 Giao diện trang Tìm kiếm Category phía Quản trị viên 87 Hình 3 - 71 Giao diện trang Tìm kiếm Brand phía Quản trị viên 87 Hình 3 - 72 Giao diện trang Tìm kiếm Product phía Quản trị viên 88

Trang 15

DANH MỤC BẢNG

Bảng 3 - 1 Chức năng phía Khách 16

Bảng 3 - 2 Chức năng phía Người mua 16

Bảng 3 - 3 Chức năng phía Quản trị viên 17

Bảng 3 - 4 Use case Đăng ký 19

Bảng 3 - 5 Use case Đăng nhập 19

Bảng 3 - 6 Use case Đăng xuất 20

Bảng 3 - 7 Use case Khôi phục mật khẩu 21

Bảng 3 - 8 Use case Tìm kiếm/Xem sản phẩm 22

Bảng 3 - 9 Use case Tìm kiếm/Xem người dùng 23

Bảng 3 - 10 Use case Quản lý tài khoản 24

Bảng 3 - 11 Use case Quản lý thông tin của tài khoản 24

Bảng 3 - 12 Use case Quản lý địa chỉ của tài khoản 25

Bảng 3 - 13 Use case Quản lý đơn hàng của tài khoản 26

Bảng 3 - 14 Use case Giỏ hàng 27

Bảng 3 - 15 Use case Đặt hàng 27

Bảng 3 - 16 Use case Phản hồi, đánh giá 28

Bảng 3 - 17 Use case Thống kê doanh thu 29

Bảng 3 - 18 Use case Quản lý người dùng trong hệ thống 30

Bảng 3 - 19 Use case Quản lý sản phẩm trong hệ thống 30

Bảng 3 - 20 Use case Quản lý đơn hàng trong hệ thống 31

Bảng 3 - 21 Use case Quản lý loại sản phẩm 32

Bảng 3 - 22 Use case Quản lý thuộc tính sản phẩm 33

Bảng 3 - 23 Bảng User 52

Bảng 3 - 24 Bảng Addresses 54

Bảng 3 - 25 Bảng Brand 54

Bảng 3 - 26 Bảng Cart-items 55

Bảng 3 - 27 Bảng Categories 55

Bảng 3 - 28 Bảng Brands_Categories 56

Bảng 3 - 29 Bảng Countries 56

Bảng 3 - 30 Bảng Customers 58

Bảng 3 - 31 Bảng Order_details 59

Bảng 3 - 32 Bảng Order_track 59

Bảng 3 - 33 Bảng Orders 61

Bảng 3 - 34 Bảng Product_details 61

Bảng 3 - 35 Bảng Product_images 62

Bảng 3 - 36 Bảng Products 64

Bảng 3 - 37 Bảng Reviews 64

Bảng 3 - 38 Bảng Reviews_votes 65

Trang 16

Bảng 3 - 42 Bảng users_roles 67 Bảng 4 - 1 Một số test case 92

Trang 17

PHẦN MỞ ĐẦU

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

Có thể nói ít có nơi nào có một thị trường thương mại điện tử sôi động và phát triển mạnh mẽ như ở Việt Nam Trang Fibre2fashion từng dẫn một báo cáo nghiên cứu dự báo rằng với đà phát triển thị trường này, không lâu nữa, Việt Nam hoàn toàn có thể vươn lên đứng đầu ở Đông Nam Á

Phát triển mạnh mẽ là thế, nhưng đối với góc nhìn của sinh viên công nghệ, một hệ thống thương mại điện tử vẫn luôn là một thử thách khó nhằn với chúng tôi Ngoài ra, với yêu cầu về công nghệ Spring, hoàn toàn không được tiếp xúc trong chương trình ở trường, đây còn là một thách thức lớn hơn Song, càng nói về khó khăn, bản thân nhóm lại càng hào hứng hơn, vì những kiến thức và những điều thú vị sẽ đạt được trong suốt

đề tài này

2 Mục đích và nhiệm vụ của đề tài

2.1 Mục đích

- Tìm hiểu hệ sinh thái Spring Framework

- Xây dựng website thương mại điện tử

2.2 Nhiệm vụ

- Tìm hiểu hệ sinh thái Spring Framework

- Tìm hiểu về cách xây dựng một website thương mại điện tử

- Tiến hành xây dựng hệ thống

- Tiếp tục cải thiện, phát triển hệ thống, xây dựng ứng dụng đa nền tảng

3 Cách tiếp cận và phương pháp nghiên cứu

Trang 18

- Tiến hành khảo sát, nghiên cứu các hệ thống thương mại điện tử phổ biến ở Việt Nam và quốc tế

- Lên kế hoạch xây dựng hệ thống

- Thực hiện theo kế hoạch, bên cạnh tiếp tục nghiên cứu cơ sở lý thuyết, khảo sát thực tế

- Đối với những khó khăn, nhóm sẽ tìm kiếm giải pháp qua mạng và trao đổi với Giảng viên hướng dẫn

Trang 19

PHẦN NỘI DUNG Chương 1: CƠ SỞ LÝ THUYẾT

1.1 Ngôn ngữ Java

Java là một một ngôn ngữ lập trình hiện đại, bậc cao, hướng đối tượng, bảo mật và mạnh mẽ và là một Platform Platform: Bất cứ môi trường phần cứng hoặc phần mềm nào mà trong đó có một chương trình chạy, thì được hiểu như là một Platform Với môi trường runtime riêng cho mình (JRE) và API, Java được gọi là Platform

Ngôn ngữ lập trình Java ban đầu được phát triển bởi Sun Microsystems do James Gosling khởi xướng và phát hành vào năm 1995 Phiên bản mới nhất của Java Standard Edition là Java SE 8 Với sự tiến bộ của Java và sự phổ biến rộng rãi của nó, nhiều cấu hình đã được xây dựng để phù hợp với nhiều loại nền tảng khác nhau

1.2 Spring Framework và các công nghệ sử dụng

Spring framework là một Java Platform mã nguồn mở, một giải pháp gọn nhẹ dành cho Java Enterprise Với Spring Framework các nhà phát triển có thể tạo ra các mã có hiệu suất cao, dễ kiểm thử và có thể sử dụng lại được Các tính năng core của Spring Framework có thể được sử dụng trong việc phát triển bất kỳ ứng dụng Java nào Bên cạnh đó, phần mở rộng được sử dụng để xây dựng các ứng dụng web trên nền tảng Java

EE Mục tiêu của Spring Framework là làm cho việc phát triển ứng dụng J2EE dễ dàng hơn và thúc đẩy việc lập trình tốt hơn bằng mô hình POJO-based

Trang 20

Hình 1 - 1 Spring Framework

1.2.1 Spring Boot

Spring Boot là một dự án phát triển bởi JAV (ngôn ngữ java) trong hệ sinh thái Spring framework Nó giúp cho các lập trình viên chúng ta đơn giản hóa quá trình lập trình một ứng dụng với Spring, chỉ tập trung vào việc phát triển business cho ứng dụng

JPA cung cấp đầy đủ các công cụ cho phép chúng ta có thể thao tác với cơ sở

dữ liệu một cách đơn giản và nhanh chóng JPA có thể dùng để persist một đối tượng Java (POJO – Plain Old Java Object) vào trong cơ sở dữ liệu hoặc lấy dữ liệu từ cơ

sở dữ liệu và ánh xạ (mapping) ra các đối tượng Java một cách đơn giản

Trang 21

1.3 Kiến trúc hệ thống

Kiến trúc Spring Boot dựa trên Spring framework Vì vậy, nó chủ yếu sử dụng các tính năng và module của Spring MVC, Spring Core:

Hình 1 - 2 Kiến trúc hệ thống

1.3.1 Cơ sở dữ liệu MySQL

MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế giới và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng Vì

Trang 22

ích rất mạnh Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên internet

Hình 1 - 3 Ví dụ table trong MySQL

MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan

hệ sử dụng Ngôn ngữ truy vấn có cấu trúc (SQL)

Hình 1 - 4 Kiến trúc của MySQL

Trang 23

1.3.2 Back-end

Sử dụng Maven để quản lý các dependencies Maven là công cụ quản lý và thiết lập tự động 1 dự án phần mềm Chủ yếu dùng cho các lập trình viên Java, nhưng nó cũng có thể được dùng để xây dựng và quản lý các dự án dùng Java, Ruby, Scala hay ngôn ngữ khác

- Khởi tạo dự án, Cấu trúc file, folder

Hình 1 - 5 Cấu trúc file, folder

Trang 24

Hình 1 - 6 Cấu hình

Hình 1 - 7 Khai báo dependency trong POM

- Xây dựng API, nhóm sử dụng cấu trúc dữ liệu RESTful được biết đến rộng rãi trong giới lập trình web nói chung và lập trình ứng dụng nói riêng

- Có thể nói bản thân REST không phải là một loại công nghệ Nó là phương thức tạo API với nguyên lý tổ chức nhất định Những nguyên lý này nhằm hướng dẫn lập trình viên tạo môi trường xử lý API request được toàn diện

Trang 25

1.3.3 Front-end

Nhóm sử dụng Bootstrap cho thiết kế giao diện người dùng Bootstrap là một framework CSS miễn phí sử dụng mã nguồn mở dùng cho mục đích phát triển web front-end cho thiết bị di động Bên cạnh những mẫu thiết kế kiểu chữ, biểu mẫu, nút hay thanh điều hướng bằng ngôn ngữ HTML, CSS và JavaScript,

- Khởi tạo dự án, Cấu trúc file, folder

Trang 26

- Bootstrap cũng hỗ trợ đồng thời xử lý các sự kiện Javascript sử dụng thư viện jQuery jQuery là một thư viện JavaScript được thiết kế đơn giản hóa thao tác HTML DOM, cũng như xử lý sự kiện, hoạt ảnh CSS, và Ajax

Hình 1 - 9 Khởi tạo dependency cho jQuery trong POM

Hình 1 - 10 Cấu trúc file, folder

1.3.4 Thymeleaf

Thymeleaf là một Java Template Engine có thể làm việc với cả hai môi trường Web và môi trường không phải Web Nó phù hợp hơn khi được sử dụng để phục vụ XHTML/HTML5 trên tầng View (View Layer) của ứng dụng Web dựa trên kiến trúc MVC Nó có thể xử lý bất kỳ một file XML nào, thậm chí trên các môi trường offline (Không trực tuyến) Nó hỗ trợ đầy đủ để tương tác với Spring Framework

- Khởi tạo dự án, Cấu trúc file, folder

Trang 27

Hình 1 - 11 Khởi tạo dependency cho Thymeleaf trong POM

- Mục tiêu chính của Thymeleaf là mang lại các template tự nhiên, đồng nhất, đơn giản (nature templates) và dễ dàng bảo trì Để đạt được điều này, Thymeleaf xây dựng trên khái niệm về các mẫu tự nhiên (natural templates)

để chèn logic của nó vào các file template mà không ảnh hưởng đến template Điều này giúp thu hẹp khoảng cách giữa các nhóm thiết kế và phát triển

Hình 1 - 12 Workflow của thymeleaf khi kết hợp với Spring Boot

Trang 28

Chương 2: KHẢO SÁT HIỆN TRẠNG 2.1 Tiki

Hình 2 - 1 Hình ảnh Tiki

Đánh giá:

Ưu điểm Nhược điểm

✔ Thiết kế giao diện đẹp, đồng nhất

về màu sắc và thiết kế

✔ Dễ dàng tìm kiếm sản phẩm, lịch

sử tìm kiếm rất hiệu quả

✔ Tốc độ load trang nhanh

✔ Nhiều hình thức thanh toán

× Bố cục không rõ ràng, giao diện rối mắt

× Quá nhiều thành phần trong một trang

× Quá nhiều danh mục sản phẩm và quảng cáo

× Không có Menu chính

× Không có Responsive cho Web

Trang 29

2.2 Shopee

Hình 2 - 2 Hình ảnh Shopee

Đánh giá:

Ưu điểm Nhược điểm

✔ Giao diện thiết kế dễ nhìn

✔ Nhiều hình thức thanh toán

✔ Có phần đánh giá, nhận xét sản

phẩm, phân loại sản phẩm dựa trên

số sao giúp người mua, dễ tham

khảo

✔ Có phần mô tả chi tiết cho từng sản

phẩm

✔ Hỗ trợ tìm kiếm theo nhiều tùy

chọn (giá cả, số sao, phân loại…)

✔ Hệ thống Category, Style đa dạng,

Trang 30

2.3 Lazada

Hình 2 - 3 Hình ảnh Lazada

Đánh giá:

Ưu điểm Nhược điểm

✔ Giao diện thiết kế dễ nhìn

✔ Nhiều hình thức thanh toán

✔ Đánh giá, nhận xét sản phẩm, phân

loại sản phẩm dựa trên số sao giúp

người mua, dễ tham khảo

✔ Có phần mô tả chi tiết cho từng sản

phẩm

✔ Có hỗ trợ Chat

✔ Hỗ trợ tìm kiếm theo nhiều chỉ tiêu

(giá cả, số sao, phân loại…)

× Quá nhiều quảng cáo, Banner quảng cáo to quá mức so với sản phẩm

× Mobile App cho người mua và người bán là 2 ứng dụng tách biệt

Trang 31

2.4 Etsy

Hình 2 - 4 Hình ảnh Etsy

Đánh giá:

Ưu điểm Nhược điểm

✔ Thiết kế giao diện mới lạ, trẻ trung

✔ Có Responsive cho Web

Trang 32

Chương 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 3.1 Phân tích chức năng

3.1.1 Phía Khách (Guest)

STT Chức năng Mô tả

1 Đăng ký Đăng ký tạo tài khoản người dùng

2 Xem/Tìm kiếm sản phẩm Tìm kiếm, xem danh sách, chi tiết sản

phẩm

Bảng 3 - 1 Chức năng phía Khách

3.1.2 Phía Người mua (Customer)

STT Chức năng Mô tả

1 Đăng nhập Đăng nhập vào hệ thống

2 Đăng xuất Đăng xuất khỏi hệ thống

3 Tạo mật khẩu mới Tạo mật khẩu mới chỉ với email, khi quên

mật khẩu

4 Quản lý tài khoản cá nhân Thay đổi mật khẩu

5 Quản lý thông tin cá nhân Xem, sửa thông tin cá nhân, ảnh đại diện,

ảnh bìa

6 Quản lý địa chỉ cá nhân Xem, sửa, xóa địa chỉ cá nhân

7 Quản lý đơn hàng Xem lịch sử mua hàng, theo dõi trạng

thái, hủy đơn hàng

8 Quản lý giỏ hàng Xem, thêm, cập nhật sản phẩm trong giỏ

hàng

9 Đặt hàng Đặt hàng, thanh toán

10 Phản hồi, đánh giá Phản hồi, đánh giá sản phẩm

11 Theo dõi trạng thái đơn

hàng

Theo dõi trạng thái của đơn hàng đã đặt

Bảng 3 - 2 Chức năng phía Người mua

3.1.3 Phía Quản trị viên (Admin)

STT Chức năng Mô tả

Trang 33

1 Thống kê doanh thu Thống kê doanh thu theo sản phẩm, theo

danh mục, theo từng loại thời gian ( ngày, tháng, năm)

Xem, xóa, sửa nhãn hàng trong hệ thống

5 Quản lý đơn hàng trong hệ

Xem, thêm, xóa, sửa địa chỉ hỗ trợ COD

Bảng 3 - 3 Chức năng phía Quản trị viên

Trang 34

3.2 Biểu đồ Use case (Use case Diagram)

Hình 3 - 1 Use case Diagram

Post-conditions - Nếu thành công, sẽ có tài khoản mới được tạo

- Nếu thất bại, hiển thị thông báo thất bại

Main Flow 1 Vào hệ thống website

Trang 35

Alternative 7a Bấm nút Cancel

8a Hủy thao tác

Exception 8b Thông tin tài khoản không hợp lệ, email hoặc số điện

thoại đăng ký đã tồn tại 8b1 Thông báo đăng ký thất bại

Bảng 3 - 4 Use case Đăng ký

3.2.2 Đăng nhập (Login)

Use case ID UC_002

Name Login

Goal Đăng nhập vào hệ thống

Actors Người mua (Customer), Quản trị viên (Admin)

Pre-conditions Đã có tài khoản trong hệ thống

Post-conditions - Nếu thành công, hệ thống sẽ dẫn đến trang tương ứng

với vai trò người dùng

- Nếu thất bại, hiển thị thông báo thất bại

Main Flow 1 Vào hệ thống website

Exception 5a Email không hợp lệ, mật khẩu không trùng khớp

5a1 Đăng nhập thất bại 6a Hiển thị thông báo đăng nhập thất bại

Bảng 3 - 5 Use case Đăng nhập

3.2.3 Đăng xuất (Sign out)

Trang 36

Goal Đăng xuất khỏi hệ thống

Actors Người mua (Customer), Quản trị viên (Admin)

Pre-conditions Đã đăng nhập thành công vào hệ thống

Post-conditions - Nếu thành công, đăng xuất khỏi hệ thống, trở về giao

diện dành cho Khách (Guest)

- Nếu thất bại, thông báo lỗi

Main Flow 1 Chọn biểu tượng Account, hiển thị dropdown

2 Chọn nút Logout

3 Đăng xuất thành công, hiển thị giao diện dành cho Khách (Guest)

Alternative 4a Bấm nút Cancel

5a Hủy thao tác

Exception N/A

Bảng 3 - 6 Use case Đăng xuất

3.2.4 Khôi phục mật khẩu (Password Recovery)

Use case ID UC_004

Name Password Recovery

Goal Tạo mật khẩu mới khi người dùng quên mật khẩu

Actors Người mua (Customer)

Pre-conditions Đã có tài khoản trong hệ thống

Post-conditions - Nếu thành công, mật khẩu mới được tạo

- Nếu thất bại, mật khẩu mới không được tạo

Main Flow 1 Vào hệ thống website

2 Chọn nút Login

3 Nhập email

4 Chọn Forgot password? Send email

5 Hệ thống xác thực email và gửi email yêu cầu tạo mật khẩu mới về email người dùng

6 Người dùng kiểm tra email và chọn Change password

7 Chuyển đến trang tạo mật khẩu mới

Trang 37

8 Hiển thị form tạo mật khẩu mới

9 Nhập mật khẩu mới

10 Bấm Save

11 Thay đổi thành công

12 Chọn Login, quay lại trang chủ

Alternative N/A

Exception N/A

Bảng 3 - 7 Use case Khôi phục mật khẩu

3.2.5 Tìm kiếm/Xem sản phẩm (Search/View products)

Use case ID UC_005

Name Search/View products

Goal Tìm kiếm, xem danh sách, chi tiết sản phẩm

Actors Khách (Guest), Người mua (Customer)

Pre-conditions N/A

Post-conditions - Nếu thành công, hiển thị danh sách sản phẩm theo từ

khóa tìm kiếm (keyword) hoặc theo loại sản phẩm (category) và bộ lọc (filter)

- Nếu thất bại, thông báo lỗi

Main Flow 1 Vào hệ thống website

2 Chọn chức năng tìm kiếm theo sản phẩm trên thanh tìm kiếm

Trang 38

8 Chọn vào một sản phẩm, chuyển đến trang chi tiết sản phẩm tương ứng

Alternative 1a Vào trang chủ (Home)

2a Chọn category muốn xem 3-5a Chuyển đến trang tìm kiếm sản phẩm theo category, hiển thị danh sách các category con và danh sách sản phẩm thuộc category đã chọn

3-5b Tiếp tục chọn category con muốn xem 3-5c Chọn category cha ở phần breadcrumb để quay lại

Exception N/A

Bảng 3 - 8 Use case Tìm kiếm/Xem sản phẩm

3.2.6 Tìm kiếm/Xem người dùng (Search/View users)

Use case ID UC_007

Name Search/View users

Goal Tìm kiếm, xem danh sách người dùng và tham quan trang

- Nếu thất bại, thông báo lỗi

Main Flow 1 Vào hệ thống website

2 Chọn chức năng tìm kiếm theo người dùng trên thanh tìm kiếm

3 Nhập từ khóa

4 Nhấn Enter (hoặc bấm nút hình kính lúp)

5 Chuyển đến trang tìm kiếm người dùng, hiển thị danh sách người dùng theo từ khóa

Trang 39

6 Chọn Next (hoặc Previous, số trang bất kỳ) ở phần phân trang để xem trang tiếp theo (trang trước đó, hoặc trang tương ứng)

7 Chọn vào một người dùng, chuyển đến trang chủ của người dùng tương ứng

8 Trên thanh điều hướng, chọn About để xem thông tin người dùng

Alternative N/A

Exception N/A

Bảng 3 - 9 Use case Tìm kiếm/Xem người dùng

3.2.7 Quản lý tài khoản (Account Management - Account)

Use case ID UC_008

Name Account Management - Account

Goal Sửa mật khẩu

Actors Người mua (Customer), Quản trị viên (Admin)

Pre-conditions Đã đăng nhập vào hệ thống

Post-conditions - Nếu thành công, mật khẩu được cập nhật

- Nếu thất bại, thông báo lỗi

Main Flow 1 Chọn biểu tượng Account, hiển thị dropdown

2 Chọn Your profile

3 Chuyển đến trang quản lý tài khoản

4 Nhập các thông tin cần thay đổi

5 Nhập mật khẩu hiện tại và mật khẩu mới

6 Bấm nút Save

7 Hiển thị thông báo yêu cầu xác nhận

8 Bấm nút Confirm

9 Thông báo cập nhật tài khoản thành công

Alternative 8a Bấm nút Cancel

Trang 40

Bảng 3 - 10 Use case Quản lý tài khoản

3.2.8 Quản lý thông tin của tài khoản (Account Management - Profile) Use case ID UC_009

Name Account Management - Profile

Goal Chỉnh sửa thông tin cá nhân

Actors Người mua (Customer)

Pre-conditions Đã đăng nhập vào hệ thống

Post-conditions - Nếu thành công, thông tin cá nhân được cập nhật

- Nếu thất bại, thông báo lỗi

Main Flow 1 Chọn biểu tượng Account, hiển thị dropdown

2 Chọn Your profile

3 Chuyển đến trang quản lý tài khoản

4 Nhập các thông tin cần cập nhật

5 Thông tin cá nhân được cập nhật

Alternative 5b Tùy chỉnh thông tin cá nhân

5b1 Bấm nút Save 5b3 Bấm nút Confirm 6b Thông báo cập nhật thành công 5c3 Bấm nút Cancel

6c Hủy thao tác

Exception 6d Thông tin nhập vào không hợp lệ

6d1 Thông báo cập nhật thất bại

Bảng 3 - 11 Use case Quản lý thông tin của tài khoản

3.2.9 Quản lý địa chỉ của tài khoản (Account Management - Address) Use case ID UC_010

Name Account Management - Address

Goal Quản lý địa chỉ

Actors Người mua (Customer)

Pre-conditions Đã đăng nhập vào hệ thống

Post-conditions N/A

Ngày đăng: 06/10/2023, 09:57

TỪ KHÓA LIÊN QUAN

🧩 Sản phẩm bạn có thể quan tâm