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 1THÀ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 2BỘ 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 63.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 73.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 8Ngà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 9LỜ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 10TÓ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 12DANH 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 13Hì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 14Hì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 15DANH 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 16Bảng 3 - 42 Bảng users_roles 67 Bảng 4 - 1 Một số test case 92
Trang 17PHẦ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 19PHẦ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 20Hì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 211.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 231.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 24Hì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 251.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 27Hì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 28Chươ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 292.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 302.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 312.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 32Chươ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 331 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 343.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 35Alternative 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 36Goal Đă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 378 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 388 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 396 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 40Bả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