Thiết kế và xây dựng website bán áo local brand GVHD TS Hoàng Anh TRƯỜNG ĐẠI HỌCTÀI NGUYÊN VÀ MÔI TRƯỜNG TP HCM KHOA HỆ THỐNG THÔNG TIN VÀ VIỄN THÁM ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN ĐỀ TÀI T.
Cơ sở khoa học và thực tiễn
Thiết kế và xây dựng website bán hàng không chỉ đáp ứng nhu cầu mua sắm mọi lúc, mọi nơi mà còn giúp quản lý sản phẩm một cách hiệu quả Qua quá trình này, bạn có thể nâng cao kiến thức và kỹ năng lập trình, đồng thời hoàn thành đồ án tốt nghiệp một cách xuất sắc.
Mục tiêu đề tài
- Hiểu biết hình thức kinh doanh thương mại điện tử.
- Hiểu biết về các giải pháp xây dựng một website thương mại điện tử.
- Xây dựng một website mang lại thuận tiện cho người dùng tiết kiệm thời gian khi có nhu cầu mua một sản phẩm.
- Xây dựng website giúp cho bản thân quản lý thông tin một cách trực quan,thuận tiện
Phương pháp thực hiện
- Tìm hiểu thông tin: Tìm hiểu các tài liệu nghiên cứu, giáo trình, các bài viết, các video hướng dẫn trên youtube và các nguồn thông tin trên Internet
Phương pháp lấy ý kiến chuyên gia bao gồm việc thu thập ý kiến từ giảng viên trực tiếp hướng dẫn và các chuyên gia khác, nhằm hoàn thiện cả nội dung lẫn hình thức của đề tài.
- Phương pháp phân tích và tổng hợp: tổng hợp các lý thuyết về lập trình
Bố cục báo cáo
- Chương 1: Tổng quan tài liệu
- Chương 2: Phương pháp thực hiện
- Chương 3: Cài đặt thử nghiệm, kết quả, đánh giá
- Chương 4: Kết luận và hướng phát triển
Phương Pháp Thực Hiện
Phân Tích
Website được thiết kế nhằm mục đích giới thiệu sản phẩm và cung cấp các dịch vụ hỗ trợ khách hàng, bao gồm liên hệ, phản hồi, tư vấn và tìm kiếm thông tin.
Khách hàng bắt đầu khám phá các sản phẩm trên website, được phân loại theo các danh mục như sản phẩm mới, sản phẩm thịnh hành và sản phẩm bán chạy Khi tìm được sản phẩm ưng ý, họ có thể nhấn vào hình ảnh hoặc tên sản phẩm để xem thông tin chi tiết Để thêm sản phẩm vào giỏ hàng, khách hàng chỉ cần nhấn nút “Thêm Vào Giỏ Hàng”, giỏ hàng sẽ hiển thị danh sách các sản phẩm với thông tin như mã sản phẩm, tên sản phẩm, đơn giá, số lượng và thành tiền.
- Các giỏ hàng thường cung cấp các tùy chọn để xóa sản phẩm, tiếp tục mua sản phẩm và cập nhật số lượng.
Sau khi khách hàng đã chọn xong tất cả sản phẩm cần mua, họ có thể nhấn nút “Thanh Toán” Trang đơn hàng sẽ hiển thị thông tin cá nhân của khách hàng như họ tên, email và địa chỉ, cùng với thông tin giao hàng bao gồm địa chỉ và ngày giao Khách hàng cũng sẽ chọn phương thức thanh toán, có thể là chuyển khoản hoặc thanh toán online Cuối cùng, thông tin giỏ hàng sẽ được tổng hợp với mã sản phẩm, tên sản phẩm, đơn giá, số lượng và thành tiền.
- Sau khi khách hàng đã điền đầy đủ thông tin thì chọn nút “Đặt Hàng” để hoàn tất quá trình mua hàng.
Website cung cấp cho nhân viên một hệ thống giao diện quản lý thông tin hiệu quả, bao gồm sản phẩm, đơn hàng, khách hàng, bình luận và đánh giá, cùng với các thống kê chi tiết.
Yêu cầu kỹ thuật
- Tìm hiểu về họat động kinh doanh thương mại điện tử.
- Tìm hiểu các giải pháp xây dựng một website thương mại điện tử như thế nào.
- Tìm hiểu các framework hỗ trợ xây dựng website như: Spring boot, Angular.
- Xây dựng một website mang tính thương mại hóa
- Xây dựng một trang web với đầy đủ các tính năng phục vụ cho việc bán hàng trực tuyến.
- Xây dựng các chức năng giúp người quản trị dễ dàng quản lý nội dung trang web
- Tốc độ tải trang nhanh
- Tương thích với các thiết bị di động thông minh
- Hệ quản trị dễ sử dụng
Hệ thống gồm có 2 phần: a) Phần dành cho người quản lý
Chủ cửa hàng là người trực tiếp tương tác với khách hàng, những người tìm kiếm, xem, mua hoặc đặt hàng nông sản Họ có quyền quản lý các hoạt động trên website liên quan đến sản phẩm, đơn hàng và doanh thu Để thực hiện các chức năng này, chủ cửa hàng được cấp một tài khoản với username và password để đăng nhập vào hệ thống.
Thứ 1: Xem, thêm, sửa, xóa thông tin liên quan đến sản phẩm, việc này giúp quản lý sản phẩm một cách thuận lợi.
Thứ 2: Xem doanh thu, kho hàng việc này giúp cho chủ cửa hàng có thể biết tình trạng cửa hàng trong thời gian xem xét.
Thứ 3: Xem và tương tác với các đơn hàng như hủy đơn, báo hết, xác nhận đơn hàng, để thực hiện giao dịch từ xa với khách hàng.
Thứ 4: Xem danh sách khách hàng, khách hàng tiềm năng của cửa hàng.
Phần mềm cần được thiết kế dễ hiểu và thân thiện với người dùng, giúp chủ cửa hàng nhanh chóng đáp ứng nhu cầu của khách hàng Điều này không chỉ nâng cao chất lượng phục vụ mà còn tạo dựng lòng tin từ phía khách hàng.
Khách hàng là những người xem và mua sản phẩm trên Website Để dễ dàng phân biệt giữa các khách hàng và giỏ hàng của từng người khi thực hiện giao dịch, Website cần có các chức năng hỗ trợ như quản lý tài khoản và giỏ hàng riêng biệt.
Thứ 1: Đăng ký tài khoản khách hàng, để chủ cửa hàng nhận biết các khách hàng của mình cũng như đơn hàng của họ, và cho khách hàng có thể đặt hàng từ xa.
Thứ 2: Xem thông tin, bình luận, đánh giá của sản phẩm nhằm để khách hàng hiểu rõ về sản phẩm mình muốn mua, cũng như nhận xét của khách hàng khác. Thứ 3: Thêm sản phẩm vào giỏ hàng, cũng như đặt hàng để giúp khách hàng có thể mua sản phẩm từ xa mà không cần tới tại cửa hàng.
Thứ 4: Chức năng bình luận, đánh giá để bày tỏ thái độ, nhận xét của khách hàng về sản phẩm của cửa hàng giúp cho chủ cửa hàng nâng cao chất lượng sản phẩm cũng như tiếp cận nhu cầu của người mua hàng.
Trang của khách hàng cần bổ sung các chức năng như đăng nhập, chỉnh sửa thông tin cá nhân, tìm kiếm và lọc sản phẩm Giao diện phải thân thiện, dễ sử dụng và hấp dẫn để thu hút khách hàng và kết nối hiệu quả với cửa hàng.
2.2.3 Yêu cầu phi chức năng
- Dung lượng website vừa phải, tốc độ truy xuất nhanh.
- Hệ thống thông tin phải có chế độ bảo mật, không chấp nhận sai sót.
- Cơ sở dữ liệu phải được đảm bảo khi hệ thống đang hoạt động
Để đăng nhập vào hệ thống, người dùng cần thực hiện hai bước chính: nhập email và mật khẩu Đối với khách hàng lần đầu mua sắm, họ sẽ phải đăng ký và được cấp một mã số ID riêng biệt.
- Khi đăng ký khách hàng cần điền đầy đủ thông tin đăng nhập gồm Email, mã otp, số điện thoại, địa chỉ
2.2.4 Xây dựng website thương mại điện tử
Website thương mại điện tử phải có một số chức năng như sau:
Khách hàng có thể dễ dàng xem danh sách các sản phẩm, tìm kiếm thông tin chi tiết về từng sản phẩm, thêm sản phẩm vào giỏ hàng, thực hiện đặt mua và thanh toán Bên cạnh đó, khách hàng cũng có thể để lại bình luận và đánh giá về sản phẩm.
Quản trị hiệu quả bao gồm nhiều khía cạnh như quản lý sản phẩm, nhân viên, đơn hàng và khách hàng Đồng thời, việc theo dõi thống kê doanh thu và tình trạng sản phẩm tồn kho cũng là những yếu tố quan trọng giúp nâng cao hiệu suất kinh doanh.
2.2.5 Bảo mật và quyền hạn
- Đảm bảo tính toàn vẹn dữ liệu phải định kỳ lưu giữ thông tin đề phòng khi có sự cố còn có thể khắc phục một cách dễ dàng
- Quyền hạn mỗi User được bảo vệ và phân quyền chặt chẽ Chỉ có Admin mới có quyền tạo mới các User và cập nhật dữ liệu
Các chức năng chính
Website bán áo local brand được xây dựng với tiêu chí phục vụ cho học sinh, sinh viên, nhân viên văn phòng Lứa tuổi từ 12-30t.
Website bao gồm các loại người dùng: Khách hàng viếng thăm, khách hàng thành viên, quản lý…
Website thương mại điện tử phải có một số chức năng sau:
- Đối với khách hàng viến thăm:
Xem danh sách sản phẩm, xem chi tiết sản phẩm, tìm kiếm sản phẩm, đăng ký tài khoản.
- Đối với khách hàng thành viên:
Khách hàng có thể thực hiện nhiều chức năng như đăng nhập, thay đổi thông tin cá nhân, đặt mua sản phẩm, xem danh sách đơn hàng, quản lý đơn hàng, thanh toán, và bình luận đánh giá sản phẩm.
Quản lý sản phẩm, khách hàng và đơn hàng hiệu quả, cùng với việc theo dõi bình luận đánh giá, giúp tối ưu hóa quy trình kinh doanh Ngoài ra, việc xem thống kê doanh thu và sản phẩm tồn kho, cùng với khả năng xuất file Excel, là những công cụ quan trọng hỗ trợ doanh nghiệp trong việc ra quyết định.
Cài Đặt Thử Nghiệm, Kết Quả, Đánh Giá
Tổng Quan
3.1.1 Phương pháp giải quyết vấn đề
Hiện nay, nhiều trang web và ứng dụng được thiết kế với mục tiêu tái sử dụng và dễ dàng chia sẻ với các ứng dụng khác Để phát triển độc lập, các ứng dụng lớn thường được chia nhỏ thành các ứng dụng nhỏ hơn Chính vì vậy, việc sử dụng Restful API trở nên cần thiết cho mục đích này.
Việc tách biệt giữa frontend và backend giúp phát triển và kiểm thử hai dự án song song, nâng cao năng suất cho lập trình viên và tạo ra cấu trúc phát triển rõ ràng Điều này cũng mang lại trải nghiệm tốt hơn cho người dùng khi truy cập trang web, vì vậy tôi đã chọn framework Angular.
Thiết Kế Hệ Thống
Mô hình phát triển dự án mà bản thân em hướng đến đó là mô hình thác nước
Lý do chọn mô hình vì:
- Vì dự án nhỏ, ngắn hạn
- Các chức năng được xây dựng nhanh chóng và rõ ràng, dễ quản lý theo các sprint
- Dễ dàng bổ sung, thay đổi yêu cầu
3.2.1.1Mô hình hệ thống của admin
Hình 2: Mô hình hệ thống của Admin
3.2.1.2 Mô hình hệ thống của khách hàng
Hình 3: Mô hình hệ thống của khách hàng
3.2.2.1 Bản danh sách các Actor:
Khách hàng viến thăm - Xem danh sách sản phẩm
- Xem thông tin chi tiết sản phẩm
- Đăng ký Khách hàng thành viên Có các chức năng như khách hàng viến thăm và còn có thêm một số chức năng khác:
- Thêm sản phẩm vào yêu thích
- Thêm sản phẩm vào giỏ hàng
- Bình luận và đánh giá sản phẩm
- Quản lý thông tin cá nhân
- Xem danh sách đơn hàng
- Quản lý loại sản phẩm
- Thống kê, xuất file excel
3.2.2.2 Sơ đồ Usecase tổng quát
Hình 4: Sơ đồ UseCase tổng quát
Hình 5: Sơ đồ Usecase Admin
3.2.2.4 Sơ đồ Usecase khách hàng
Hình 6: Sơ đồ Usecase khách hàng
3.2.2.5 Sơ đồ Usecase khách hàng viếng thăm
Hình 7: Sơ đồ Usecase khách hàng viếng thăm
3.2.2.6 Sơ đồ Usecase quản lý khách hàng
Hình 8: Sơ đồ Usecase quản lý khách hàng
3.2.2.7 Sơ đồ Usecase quản lý sản phẩm
Hình 9: Sơ đồ Usecase quản lý sản phẩm
3.2.2.8 Sơ đồ Usecase quản lý danh mục
Hình 10: Sơ đồ Usecase quản lý danh mục
3.2.2.9 Sơ đồ Usecase quản lý đơn hàng
Hình 11: Sơ đồ Usecase quản lý đơn hàng
3.2.2.10 Sơ đồ Usecase quản lý đánh giá
Hình 12: Sơ đồ Usecase quản lý đánh giá
3.2.2.11 Sơ đồ Usecase thống kê
Hình 13: Sơ đồ Usecase thống kê
3.2.2.12 Sơ đồ Usecase thanh toán
Hình 14: Sơ đồ Usecase thanh toán
1 UC1 Đăng nhập Cho phép người dùng đăng nhập vào Website để thực hiện một số chức năng.
2 UC2 Thao tác cá nhân Các thao tác của người dùng dùng để tương tác với các thông tin cá nhân
3 UC2.1 Đăng xuất Cho phép người dùng đã đăng nhập đăng xuất ra khỏi hệ thống Website.
4 UC2.2 Đổi mật khẩu Cho phép người dùng đã đăng nhập có thể đổi mật khẩu cá nhân của mình.
5 UC2.3 Xem thông tin cá nhân
Cho phép người dùng đã đăng nhập xem thông tin cá nhân của mình
6 UC2.4 Cập nhật thông tin Cho phép người dùng đã đăng nhập chỉnh sửa cá nhân thông tin cá nhân của mình.
7 UC2.5.1 Xem danh sách đơn hàng đã đặt
Cho phép người dùng đã đăng nhập xem đơn hàng đã đặt của mình
8 UC2.5.2 Hủy đơn hàng Cho phép người dùng đã đăng nhập hủy đơn hàng đang trong quá trình xác nhận
9 UC2.5.3 Đánh giá và bình luận
Cho phép người dùng đã đăng nhập có thể đánh giá và bình luận các sản phẩm trong đơn hàng đã được chuyển giao và thanh toán thành công
10 UC2.5.4 Xem chi tiết đơn hàng
Cho phép người dùng đã đăng nhập có thể xem chi tiết các sản phẩm trong đơn hàng mình đã đặt
11 UC3 Tương tác website Chứa các chức năng cho phép người dùng tương tác với website.
12 UC3.1 Thêm sản phẩm vào yêu thích
Cho phép người dùng có thể thêm các sản phẩm vào danh sách yêu thích cá nhân
13 UC3.2 Xem chi tiết sản phẩm
Cho phép người dùng có thể xem thông tin chi tiết của sản phẩm
14 UC3.3 Xem danh sách sản phẩm
Cho phép người dùng xem các sản phẩm có trên trang chủ website
15 UC3.3.1 Liệt kê sản phẩm theo loại
Cho phép người dùng xem danh sách sản phẩm theo loại sản phẩm
16 UC3.3.2 Liệt kê sản phẩm theo đánh giá
Cho phép người dùng xem danh sách sản phẩm theo đánh giá người dùng
17 UC3.3.3 Liệt kê sản phẩm theo ký tự
Cho phép người dùng xem danh sách sản phẩm theo ký tự từ a - Z
18 UC3.4 Giỏ hàng Cung cấp người dùng 1 giỏ hàng cá nhân
19 UC3.4.1 Thêm sản phẩm Cho phép người dùng thêm các sản phẩm vào giỏ hàng được chọn vào giỏ hàng
20 UC3.4.2 Cập nhật số lượng sản phẩm
Cho phép người dùng sửa đổi số lượng sản phẩm trong giỏ hàng
21 UC3.4.3 Xóa sản phẩm khỏi giỏ hàng
Cho phép người dùng loại bỏ sản phẩm đã chọn ra khỏi giỏ hàng
22 UC3.4.4 Đặt hàng Cho phép người dùng đặt hàng từ xa
23 UC3.4.4.1 Xác nhận đơn hàng
Cho phép người dùng xác nhận muốn đặt hàng
24 UC3.4.4.2 Xem chi tiết đơn hàng vừa đặt
Cho phép người dùng xem lại thông tin đơn hàng vừa xác nhận đặt hàng
25 UC4 Thao tác quản lý Chứa các chức năng giúp người quản lý tốt trang website bán hàng
26 UC4.1 Xem danh sách Cho phép xem danh sách sản phẩm, thể loại sản phẩm, khách hàng, đơn hàng, đánh giá.
27 UC4.2 Tìm kiếm Cho phép tìm kiếm sản phẩm, thể loại sản phẩm, khách hàng, đơn hàng,
28 UC4.3 Thêm mới Cho phép thêm mới sản phẩm, thể loại sản phẩm.
29 UC4.4 Cập nhật Cho cập nhật thông tin sản phẩm, thể loại sản phẩm.
30 UC4.5 Xem thông tin Cho phép xem thông tin chi tiết các sản phẩm, thể loại sản phẩm.
31 UC4.6 Xóa Cho phép xóa sản phẩm, thể loại sản phẩm.
32 UC5 Thống kê Chứa các chức năng giúp quản lý dễ nhận biết trạng thái kinh doanh của website
33 UC5.1 Thống kê doanh thu
Chức năng cho phép xem doanh thu của website
34 UC5.2 Thống kê kho Cho phép xem tình trạng các sản phẩm có hàng trong website
35 UC5.3 Thống kê khách hàng Cho phép xem khách hàng của website
36 UC5.4 Thống kê đánh giá Cho phép xem các đánh giá, phản hồi của khách hàng với cửa hàng
37 UC5.5 Thống kê đơn hàng Cho phép xem các đơn hàng đã được đặt
38 UC5.5.1 Xác nhận đơn hàng
Cho phép quản lý thao tác với các đơn hàng ở trạng thái chờ xử lý
Tên Đăng nhập Code UC1
Mô tả Cho phép người dùng đăng nhập vào hệ thống
Actor Khách viến thăm/ Chủ cửa hàng Trigger Người dùng nhấn nút đăng nhập
Pre-condition Người dùng chưa đăng nhập vào hệ thống
Post condition Chuyển tới trang mặc định với chức vụ tương ứng
Bảng 3: Mô tả Usecase đăng nhập
Tên Đăng xuất Code UC2.1
Mô tả Cho phép người dùng đăng xuát ra khỏi hệ thống
Actor Khách hàng/ Chủ cửa Trigger Người dùng nhấn nút đăng xuất hàng
Pre-condition Người dùng đã đăng nhập vào hệ thống
Post condition Chuyển tới trang chủ
Bảng 4: Mô tả Usecase đăng xuất
Tên Đổi mật khẩu Code UC2.2
Mô tả Cho phép người dùng thay đổi mất khẩu cá nhân
Actor Khách hàng/ chủ cửa hàng Trigger Người dùng chọn nút đổi mật khẩu
Pre-condition Người dùng đã đăng nhập vào hệ thống
Post condition Hiền thị form đổi mật khẩu
Thông báo nếu đổi mật khẩu thành công
Bảng 5: Mô tả Usecase đổi mật khẩu
4 UC2.3 Xem thông tin cá nhân
Tên Xem thông tin cá nhân Code UC2.3
Mô tả Cho phép người dùng xem thông tin cá nhân
Actor Khách hàng/ chủ cửa hàng Trigger Người dùng nhấn vào thẻ thông tin cá nhân
Pre-condition Người dùng đã đăng nhập vào hệ thống
Post condition Hiển thị form thông tin cá nhân
Bảng 6: Mô tả Usecase xem thông tin cá nhân
5 UC2.4 Cập nhật thông tin cá nhân
Tên Cập nhật thông tin cá nhân Code UC2.4
Mô tả Cho phép người dùng thay đổi thông tin cá nhân
Actor Khách hàng/ Chủ cửa hàng Trigger Người dùng nhấn vào nút cập nhật thông tin cá nhân
Pre-condition Người dùng đã đăng nhập vào hệ thống
Post condition Thay đổi và lưu các thông tin vừa cập nhật rồi thông báo thay đổi thông tin cá nhân thành công.
Bảng 7: Mô tả Usecase cập nhật thông tin cá nhân
6 UC2.5.1 Xem danh sách đơn hàng đã đặt
Tên Xem danh sách đơn hàng đã đặt Code UC2.5
Mô tả Cho phép người dùng xem danh sách đơn hàng đã đặt của mình
Trigger Người dùng nhấn vào thẻ đơn hàng đã đặt
Pre-condition Người dùng đã đăng nhập vào hệ thống và đã đặt hàng
Post condition Di chuyển đến trang đơn hàng đã đặt và hiển thị danh sách đơn hàng đã đặt.
Bảng 8: Mô tả Usecase xem danh sách đơn hàng đã đặt
Tên Hủy đơn hàng Code UC2.5.2
Mô tả Cho phép người dùng hủy đơn hàng đã đặt của mình trước khi cửa hàng xác nhận đơn hàng
Trigger Người dùng nhấn chọn đơn hàng và nhấn vào nút hủy đơn
Pre-condition Người dùng đã đăng nhập vào hệ thống và có đơn hàng đang chờ xử lý
Post condition Hủy đơn hàng ở trạng thái chờ xử lý và chuyển đổi trạng thái đơn hàng thành hủy
Bảng 9: Mô tả Usecase hủy đơn hàng
8 UC2.5.3 Đánh giá và bình luận
Tên Đánh giá và bình luận Code UC2.5.3
Mô tả Cho phép người dùng đánh giá sản phẩm trong các đơn hàng đã đặt của mình ở trạng thái đã thanh toán/ đã giao hàng
Trigger Người dùng nhấn nút đánh giá sản phẩm trong đơn hàng
Pre-condition Người dùng đã đăng nhập vào hệ thống và chọn đơn hàng đã thành toán/ đã giao hàng.
Post condition Hiển thị form đánh giá và bình luận về sản phẩm.
Bảng 10: Mô tả Usecase đánh giá
9 UC2.5.4 Xem chi tiết đơn hàng
Tên Xem chi tiết đơn hàng Code UC2.5.4
Mô tả Cho phép người dùng xem chi tiết các sản phẩm có trong đơn hàng đã đặt
Actor Khách hàng Trigger Người dùng nhấp chọn vào nút xem chi tiết hóa đơn
Pre-condition Người dùng đã đăng nhập vào hệ thống và đã đặt hàng
Post condition Hiển thị form chứa các thông tin về đơn hàng đã chọn
Bảng 11: Mô tả Usecase xem chi tiết đơn hàng
10 UC3.1 Thêm sản phẩm vào yêu thích
Tên Thêm sản phẩm vào yêu thích Code UC3.1
Mô tả Cho phép người dùng đã đăng nhập thêm các sản phẩm vào danh sách sản phẩm yêu thích của mình
Trigger Người dùng nhấp chọn nút yêu thích trên sản phẩm
Pre-condition Người dùng đã đăng nhập vào hệ thống
Post condition Thông báo sản phẩm đã được thêm vào danh sách yêu thích
Bảng 12: Mô tả Usecase thêm sản phẩm vào yêu thích
11 UC3.2 Xem chi tiết sản phẩm
Tên Xem chi tiết sản phẩm Code UC3.2
Mô tả Cho phép người dùng xem chi tiết thông tin của sản phẩm
Actor Khách hàng/ khách viến thăm Trigger Người dùng nhấp chọn vào sản phẩm
Post condition Di chuyển đến trang thông tin của sản phẩm
Bảng 13: Mô tả Usecase xem chi tiết sản phẩm
12 UC3.3 Xem danh sách sản phẩm
Tên Xem danh sách sản phẩm Code UC3.3
Mô tả Cho phép người dùng xem danh sách tất cả sản phẩm của website
Actor Khách hàng/ khách viến thăm Trigger Người dùng truy cập vào trang chủ website.
Post condition Hiển thị tất cả các sản phẩm của website lên trang chủ
Bảng 14: Mô tả Usecase xem danh sách sản phẩm
13 UC3.3.1 Liệt kê sản phẩm theo loại
Tên Liệt kê sản phẩm theo loại Code UC3.3.1
Mô tả Cho phép người dùng xem danh sách tất cả sản phẩm theo thể loại đã chọn
Actor Khách hàng/ khách viến thăm Trigger Người dùng chọn sắp xếp theo loại sản phẩm
Post condition Hiển thị tất cả các sản phẩm thuộc thể loại vừa đã chọn
Bảng 15: Mô tả Usecase liệt kê sản phẩm theo loại
14 UC3.3.2 Liệt kê sản phẩm theo đánh giá
Tên Liệt kê sản phẩm theo đánh giá Code UC3.3.2
Mô tả Cho phép người dùng xem danh sách tất cả sản phẩm sắp xếp theo đánh giá
Actor Khách hàng/ khách viến thăm Trigger Người dùng chọn sắp xếp theo đánh giá
Post condition Hiển thị tất cả các sản phẩm được sắp xếp theo đánh giá
Bảng 16: Mô tả Usecase liệt kê sản phẩm theo đánh giá
15 UC3.3.3 Liệt kê sản phẩm theo ký tự
Tên Liệt kê sản phẩm theo ký tự Code UC3.3.3
Mô tả Cho phép người dùng xem danh sách tất cả sản phẩm sắp xếp theo ký tự
Actor Khách hàng/ khách viến thăm Trigger Người dùng chọn sắp xếp theo ký tự
Post condition Hiển thị tất cả các sản phẩm được sắp xếp theo ký tự
Bảng 17: Mô tả Usecase liệt kê sản phẩm theo thứ tự
Tên Giỏ hàng Code UC3.4
Mô tả Cung cấp cho người dùng một giỏ hàng online
Actor Khách hàng/ khách viến thăm Trigger Người dùng truy cập vào website
Post condition Hiển thị thông tin giỏ hàng trên thanh menu
Bảng 18: Mô tả Usecase giỏ hàng
17 UC3.4.1 Thêm sản phẩm vào giỏ hàng
Tên Thêm sản phẩm vào giỏ hàng Code UC3.4.1
Mô tả Cho phép người dùng thêm sản phẩm vào giỏ hàng
Actor Khách hàng/ khách viến thăm Trigger Người dùng nhấn vào nút giỏ hàng trên sản phẩm
Post condition Thông báo sản phẩm đã được thêm vào giỏ hàng.
Bảng 19: Mô tả Usecase thêm sản phẩm vào giỏ hàng
18 UC3.4.2 Cập nhật số lượng sản phẩm
Tên Cập nhật số lượng sản phẩm Code UC3.4.2
Mô tả Cho phép người dùng sửa số lượng sản phẩm trong giỏ hàng
Actor Khách hàng/ khách viến thăm Trigger Người dùng chọn thay đổi số lượng của sản phẩm trong giỏ
Pre-condition Đã thêm ít nhất một sản phẩm vào giỏ hàng
Post condition Cập nhật lại số lượng của sản phẩm trong giỏ hàng
Bảng 20: Mô tả Usecase cập nhật số lượng sản phẩm
19 UC3.4.3 Xóa sản phẩm ra khỏi giỏ hàng
Tên Xóa sản phẩm ra khỏi Code UC3.4.3 giỏ hàng
Mô tả Cho phép người dùng loại bỏ sản phẩm ra khỏi giỏ hàng
Actor Khách hàng/ khách viến thăm Trigger Người dùng nhấn vào nút xóa khỏi giỏ hàng
Pre-condition Đã thêm ít nhất một sản phẩm vào giỏ hàng
Post condition Loại bỏ sản phẩm ra khỏi giỏ hàng và cập nhật lại giỏ hàng hiện tại
Bảng 21: Mô tả Usecase xóa sản phẩm ra khỏi giỏ hàng
Tên Đặt hàng Code UC3.4.4
Mô tả Cho phép người dùng đặt hàng online
Trigger Người dùng nhấn vào nút đặt hàng
Pre-condition Người dùng đã đăng nhập và có sản phẩm trong giỏ hàng
Post condition Hiển thị form xác nhận đặt hàng
Bảng 22: Mô tả Usecase đặt hàng
21 UC3.4.4.1 Xác nhận đơn hàng
Tên Xác nhận đơn hàng Code UC3.4.4.1
Mô tả Cho phép người dùng xác nhận mình muốn đặt hàng online
Người dùng nhấn vào nút đặt hàng trong thông báo xác nhận đặt hàng
Pre-condition Người dùng đã nhấn nút đặt hàng trong giỏ hàng
Post condition Thông báo đặt hàng thành công và di chuyển đến form thông tin chi tiết đơn hàng đã đặt
Bảng 23: Mô tả Usecase xác nhận đơn hàng
22 UC3.4.4.2 Xem chi tiết đơn hàng vừa đặt
Tên Xem chi tiết đơn hàng vừa đặt Code UC3.4.4.2
Mô tả Cho phép người dùng xem thông tin chi tiết đơn hàng vừa đặt
Trigger Người dùng đã xác nhận đặt hàng
Pre-condition Người dùng đã nhấn nút đặt hàng trong xác nhận đơn hàng
Post condition Hiển thị thông tin tất cả các sản phẩm mà người dùng đã đặt trong đơn hàng cũng như thông tin đơn hàng đã đặt.
Bảng 24: Mô tả Usecase xem chi tiết đơn hàng vừa đặt
Tên Xem danh sách Code UC4.1
Mô tả Cho phép người dùng xem danh sách sản phẩm, loại sản phẩm, khách hàng, đơn hàng, đánh giá và bình luận.
Trigger Người dùng chọn loại danh sách mà mình muốn xem
Pre-condition Người dùng đã đăng nhập với vai trò là quản lý/ chủ cửa hàng
Post condition Hiển thị thông tin tất cả các sản phẩm mà người dùng đã đặt trong đơn hàng cũng như thông tin đơn hàng đã đặt.
Bảng 25: Mô tả Usecase xem danh sách
Tên Tìm kiếm Code UC4.2
Mô tả Cho phép người dùng tìm kiếm các sản phẩm, loại sản phẩm, khách hàng, đơn hàng.
Actor Chủ cửa hàng Trigger Nhập tên muốn tìm kiếm
Pre-condition Người dùng đã đăng nhập với vai trò là quản lý/ chủ cửa hàng
Post condition Hiển thị danh sách thể loại có chứa tên thứ mình muốn tìm
Bảng 26: Mô tả Usecase tìm kiếm
Tên Thêm mới Code UC4.3
Mô tả Dùng thêm mới một sản phẩm hoặc thể loại sản phẩm
Trigger Nhấn vào nút thêm mới trong form thêm mới
Pre-condition Người dùng đã đăng nhập với vai trò là quản lý/ chủ cửa hàng
Kiểm tra nội dung thông tin mình vừa thêm Nếu đúng thông báo “thêm mới thành công”
Nếu sai thông báo “thêm mới thất bại”
Bảng 27: Mô tả Usecase thêm mới
Tên Cập nhật Code UC4.4
Mô tả Cho phép người dùng chỉnh sửa thông tin của sản phẩm hoặc thể loại sản phẩm
Trigger Nhấn vào nút cập nhật trong form chỉnh sửa
Pre-condition Người dùng đã đăng nhập với vai trò là quản lý/ chủ cửa hàng
Kiểm tra nội dung thông tin mình vừa chỉnh sửa Nếu đúng thông báo “cập nhật thành công”
Nếu sai thông báo “cập nhật thất bại”
Bảng 28: Mô tả Usecase cập nhật
Tên Xem thông tin Code UC4.5
Mô tả Cho phép người dùng xem thông tin chi tiết của sản phẩm, thể loại sản phẩm, khách hàng, các đơn hàng, đánh giá và bình luận
Actor Chủ cửa hàng Trigger Nhấn vào thẻ muốn xem
Pre-condition Người dùng đã đăng nhập với vai trò là quản lý/ chủ cửa hàng
Post condition Hiển thị form thông tin chi tiết của thẻ mình nhấn vào
Bảng 29: Mô tả Usecase xem thông tin
Mô tả Cho phép người dùng vô hiệu hóa sản phẩm, thể loại sản phẩm, khách hàng, các đơn hàng, đánh giá và bình luận.
Trigger Chọn một thẻ và nhấn vào nút vô hiệu hóa/ xóa
Pre-condition Người dùng đã đăng nhập với vai trò là quản lý/ chủ cửa hàng
Post condition Thông báo xác nhận muốn vô hiệu hóa, nếu có vô hiệu hóa sản phẩm.
Bảng 30: Mô tả Usecase xóa
Tên Thống kê Code UC5
Mô tả Cho phép người dùng xem các báo cáo của cửa hàng giúp quản lý việc mua bán một cách thuận lợi và cách cải thiện
Actor Chủ cửa hàng Trigger Chọn mục thống kê
Pre-condition Người dùng đã đăng nhập với vai trò là quản lý/ chủ cửa hàng
Post condition Hiển thị trang mặc định thống kê với số liệu là ngày hiện tại
Bảng 31: Mô tả Usecase thống kê
30 UC5.1 Thống kê doanh thu
Tên Thống kê doanh thu Code UC5.1
Mô tả Cho phép người dùng xem các báo cáo doanh thu của cửa hàng
Actor Chủ cửa hàng Trigger Chọn mục thống kê doanh thu
Pre-condition Người dùng đã đăng nhập với vai trò là quản lý/ chủ cửa hàng
Post condition Hiển thị trang thống kê doanh thu với số liệu là ngày hiện tại
Bảng 32: Mô tả Usecase thống kê doanh thu
31 UC5.2 Xem thống kê kho hàng
Tên Thống kê kho hàng Code UC5.2
Mô tả Cho phép người dùng xem báo cáo kho hàng của cửa hàng
Actor Chủ cửa hàng Trigger Chọn mục thống kê kho hàng
Pre-condition Người dùng đã đăng nhập với vai trò là quản lý/ chủ cửa hàng
Post condition Hiển thị trang thống kê kho hàng ở thời điểm hiện tại
Bảng 33: Mô tả Usecase xem thống kê kho hàng
32 UC5.3 Thống kê khách hàng
Tên Thống kê khách hàng Code UC5.3
Mô tả Cho phép người dùng xem danh sách khách hàng của cửa hàng
Trigger Chọn mục danh sách khách hàng
Pre-condition Người dùng đã đăng nhập với vai trò là quản lý/ chủ cửa hàng
Post condition Hiển thị trang danh sách khách hàng của cừa hàng.
Bảng 34: Mô tả Usecase thống kê khách hàng
33 UC5.4 Thống kê đánh giá
Tên Thống kê đánh giá Code UC5.4
Mô tả Cho phép người dùng xem đánh giá phản hồi của khách hàng
Actor Chủ cửa hàng Trigger Chọn mục thống kê đánh giá
Pre-condition Người dùng đã đăng nhập với vai trò là quản lý/ chủ cửa hàng
Post condition Hiển thị danh sách các sản phẩm đã được khách hàng đánh giá
Bảng 35: Mô tả Usecase thống kê đánh giá
34 UC5.5 Thống kê đơn hàng
Tên Thống kê đơn hàng Code UC5.5
Mô tả Cho phép người dùng xem các đơn hàng của cửa hàng
Actor Chủ cửa hàng Trigger Chọn mục thống kê đơn hàng
Pre-condition Người dùng đã đăng nhập với vai trò là quản lý/ chủ cửa hàng
Post condition Hiển thị danh sách các đơn hàng của cửa hàng
Bảng 36: Mô tả Usecase thống kê đơn hàng
35 UC5.5.1 Quản lý đơn hàng
Tên Quản lý đơn hàng Code UC5.5.1
Mô tả Cho phép người dùng tương tác với các đơn hàng của khách hàng
Trigger Chọn vào các nút xử lý của đơn hàng
Pre-condition Người dùng đã đăng nhập với vai trò là quản lý/ chủ cửa hàng
Post condition Hiển thị thông báo xác nhận của cửa hàng theo nội dung xử lý và gửi mail thông báo đến khách hàng
Bảng 37: Mô tả Usecase quản lý đơn hàng
ERD ClassDiagram
STT Trường Kiểu Dữ Liệu Chú thích
1 User_id bigint AI PK Mã user
3 Email varchar (255) Email người dùng
5 Image varchar (255) Ảnh đại diện
6 Name varchar (255) Họ và tên người dùng
8 Phone varchar (255) Số điện thoại
9 Register_date date Ngày đăng ký
Bảng 38: Mô tả Entity User
STT Trường Kiểu Dữ Liệu Chú thích
1 Product_id bigint AI PK Mã sản phẩm
4 Entered_date date Ngày thêm
5 Image varchar (255) Ảnh sản phẩm
6 Name varchar (255) Tên sản phẩm
10 Category_id Bigint Mã thể loại của sản phẩm
Bảng 39: Mô tả Entity Product
STT Trường Kiểu Dữ Liệu Chú thích
1 Cart_id bigint AI PK Mã giỏ hàng
3 User_id bigint Mã người sở hữu
4 Address varchar (255) Địa chỉ người sở hữu
5 Phone varchar (255) Số điện thoại người sở hữu
Bảng 40: Mô tả Entity Cart
STT Trường Kiểu Dữ Liệu Chú thích
1 Cart_detail_id bigint AI PK Mã giỏ hàng chi tiết
2 Quantity int Số lượng sản phẩm
3 Product_id bigint Mã sản phẩm được thêm vào giỏ
4 Cart_id bigint Mã giỏ hàng người sở hữu
5 Price double Giá sản phẩm
Bảng 41: Mô tả Entity Cart Detail
STT Trường Kiểu Dữ Liệu Chú thích
1 Category_id bigint AI PK Mã thể loại sản phẩm
2 Category_name varchar (255) Tên thể loại sản phẩm
Bảng 42: Mô tả Entity Category
STT Trường Kiểu Dữ Liệu Chú thích
1 Favorite_id bigint AI PK Mã yêu thích
2 Product_id bigint Mã sản phẩm yêu thích
3 User_id bigint Mã người dùng yêu thích sản phẩm
Bảng 43: Mô tả Entity Favorites
STT Trường Kiểu Dữ Liệu Chú thích
1 Orders_id bigint AI PK Mã đơn hàng
2 Address varchar (255) Địa chỉ người đặt hàng
3 Amount double Tổng tiền của đơn hàng
4 Order_date date Ngày đặt hàng
5 Phone varchar (255) Số điện thoại người đặt hàng
7 User_id bigint Mã người đặt hàng
Bảng 44: Mô tả Entity Oder
STT Trường Kiểu Dữ Liệu Chú thích
1 Order_detail_id bigint AI PK Mã đơn hàng chi tiết
2 Price double Giá sản phẩm lúc bán
3 Quantity int Số lượng sản phẩm được đặt
4 Order_id bigint Mã đơn hàng được đặt
5 Product_id bigint Mã sản phẩm được đặt
Bảng 45: Mô tả Entity Oder Detail
STT Trường Kiểu Dữ Liệu Chú thích
1 Id int AI PK Mã chức vụ
2 Name varchar (20) Tên chức vụ
Bảng 46: Mô tả Entity App_role
STT Trường Kiểu Dữ Liệu Chú thích
1 user_id bigint PK Mã người dùng
2 role_id int PK Mã chức vụ của người dùng
Bảng 47: Mô tả Entity User_roles
STT Trường Kiểu Dữ Liệu Chú thích
1 Id bigint PK Mã người dùng
2 Email_lien_he Varchar (255) email của người dùng
3 Ngay_lien_he datetime Ngày người dùng liên hệ
4 Ngay_tra_loi datetime Ngày admin trả lời
5 Noi_dung_lien_he Varchar (255) Nội dung liên hệ
6 Noi_dung_tra_loi Varchar (255) Nội dung trả lời
7 Trang_thai Varchar (255) Trạng thái
8 Ma_nguoi_tra_loi Bigint (20) Mã của người trả lời
Bảng 48: Mô tả Entity Contact
Cấu Trúc Dự Án
3.4.1 Cấu trúc dự án frontend
Hình 16: Cấu trúc dự án Front-end Angular
- e2e: Thư mục này dùng để chứa các tập tin dành cho mục đích testing
- node_modules: chứa các Node.js module cần thiết cho ứng dụng Angular của chúng ta.
- src: Đây là thư mục sẽ chứa toàn bộ source code của ứng dụng Angular
- editoerconfig: Chứa cấu hình liên quan đến phần Editor để chỉnh sửa source code như: indent_size,max_line_length,…
- gitignore: Đây là tập tin metadata của Git,chứa thông tin những tập tin hoặc thư mục sẽ bị ignore không được commit lên Git Repository.
- angular-cli.json:Đây là tập tin chứa cấu hình cho Angular CLI, giúp chúng ta có thể build ứng dụng Angular.
- karma.conf.js: Tập tin cấu hình cho Karma,liên quan nhiều đến phần testing.
- package-lock.json:Dùng để lock version cho các Node.js module denpendencies
- package.json: Tập tin cấu hình cho Node.js module dependencies
- README.md: Tập tin này thường được sử dụng để cho các hệ thống Git hiển thị thông tin về Git Repository của chúng ta.
- tslint.json: Tập tin cấu hình để kiểm tra lỗi cho các tập tin.ts(TypeScript) trong
Thư mục src là một phần quan trọng trong các tập tin được liệt kê, nơi chúng ta có thể thêm và chỉnh sửa mã nguồn để phát triển ứng dụng Angular của mình.
Hình 17: Thành phần bên trong tệp src
- app: angular CLI tạo ra folder này giống như folder cha của ứng dụng Angular
CLI tạo ra như một ví dụ mẫu để sau này ta tạo các component khác.Trong thư mục app thường có:
- app.component.html: nơi chúng ta viết các file html.Là tầng view mà người dùng thấy được.
- app.component.ts (component class): là file xử lý các nghiệp vụ nó giống như
- app.component.css: chúng ta định nghĩa các css mà component sẽ dùng.
- app.component.spec.ts: file này dùng cho việc testing(kiểm thử).
- app.module.ts:Là nơi khai báo các thành phần Angular và nhập các module cần thiết
- app-routing.module.ts: File này dùng để xác định điều hướng giữa các trang.
- service: Chứa các phương thức để gửi các yêu cầu HTTP đến API.
- common: Là lớp mô hình dữ liệu, là lớp để khai báo những variables hoặc function cho phép những module khác truy cập và sử dụng.
- assets: Thư mục này sẽ chứa các file ảnh, css,custom JavaScript của ứng dụng
Chúng ta có khả năng phát triển ứng dụng hoạt động trên nhiều môi trường khác nhau Thư mục này giúp định nghĩa các tập tin cấu hình cho từng môi trường cụ thể, đảm bảo ứng dụng hoạt động hiệu quả trong mọi điều kiện.
- favicon.ico: Icon của ứng dụng Angular
- index.html: Trang chủ của ứng dụng Angular
- main.ts: chứa code bootstrap cho ứng dụng Angular
- polyfill.ts: Dùng để định nghĩa các chuẩn để ứng dụng của chúng ta có thể chạy trên mọi trình duyệt.
- style.css: Định nghĩa style CSS cho ứng dụng Angular
- test.ts: Code để chạy test
- tsconfig.json: Là nơi ta cấu hình cho trình TypeScript complier, cấu hình cách compile từ TypeScript sang JavaScript.
3.4.2 Cơ chế hoạt động Angular 11 Front-end
Angular sẽ làm các bước sau để hiển thị trang home khi chạy.
- Angular sẽ load file index.html
- Angular tiếp tục nạp các thư viện và các thư viện bên thứ 3 vào
- Angular sẽ load file main.ts
- Trong file main.ts Angular sẽ load module cha là app.modules.ts.
- Trong app.modules.ts ta load lên module cha component(root) hay còn gọi là root component.
- Trong module component sẽ có các file html,css(view) lúc đó sẽ hiển thị trang web cho người dùng.
Hình 18: Sơ đồ luồng đi trong AppComponent
AppComponent là thành phần cha của các component khác, bao gồm một router-outlet để định vị các component phù hợp mà bộ định tuyến sẽ chèn vào Ngoài ra, nó còn có một thanh điều hướng với các liên kết đến các tuyến đường thông qua routerLink.
These components utilize methods within the Service to perform CRUD operations based on the REST API Angular 11 employs the HTTPClient service to send HTTP requests to the REST API and handle the responses effectively.
3.4.3 Cấu trúc dự án backend
- Cấu trúc source code của Spring Boot dựa trên 2 mô hình là mô hình MVC và mô hình 3 lớp.
- Kết hợp hai mô hình lại, chúng ta có được ứng dụng Spring Boot hoàn chỉnh gồm có các thành phần sau:
Controller: Trả về view (có chứa data sẵn, dạng trang HTML), hoặc Model thể hiện dưới dạng API cho View (View viết riêng bằng React,Vue hoặc Angular).
Dịch vụ chứa các mã code tính toán và xử lý, khi Controller gửi yêu cầu, dịch vụ tương ứng sẽ tiếp nhận và cung cấp dữ liệu trả về cho Controller (trả về Model) Sau đó, Controller sẽ gửi dữ liệu này đến View để hiển thị.
Repository: Service còn có thể tương tác với service khác,hoặc dùng
Repository để gọi DB.Repository là đứa trực tiếp tương tác ,đọc ghi dữ liệu trong DB và trả về cho service.
Model chỉ đơn giản là các đối tượng được Service tính toán xong trả về cho Controller.
There are two types of views: the traditional type that returns a single HTML block with data In this case, the Controller passes the data to the View and returns it, which is facilitated by frameworks like Spring MVC using JSP or template engines such as Thymeleaf.
View dạng 2 là loại View tách biệt, không thuộc về project Spring Boot, thường xuất hiện trong các hệ thống sử dụng API View được phát triển độc lập bằng các công nghệ như React hoặc Angular Controller sẽ truyền dữ liệu Model qua API cho View và cũng tiếp nhận các yêu cầu từ View thông qua API.
Hình 19:Cấu trúc dự án Back-end trong SpringBoot
Trong cấu trúc này ta chỉ cần quan tâm các thành phần sau:
- Src/main/java: Đây là thư mục sẽ chứa toàn bộ source code của project
- PromiseShopApplication.java: Class chứa hàm main để chạy project.
- Vn.fs.api: thư mục chứa các api
- Vn.fs.common: package chứa các class định nghĩa như enum, interface, class dùng chung và đơn giản.
- Vn.fs.Controller: Là 1 RestController có các phương thức ánh xạ yêu cầu cho các yêu cầu Restful như: getAll, create,update,delete,findByid,…
JwtAuthenticationEntryPoint.java xử lý thông tin từ yêu cầu và gửi phản hồi Khi có yêu cầu xác thực mà không kèm theo chuỗi JWT, nó sẽ trả về một lỗi thông báo rằng chuỗi JWT là cần thiết.
Lớp JwtAuthenticationFilter.java được thực thi cho mọi yêu cầu đến, kiểm tra tính hợp lệ của mã thông báo JWT Nếu mã JWT hợp lệ, lớp này sẽ thiết lập xác thực trong ngữ cảnh, xác nhận rằng người dùng hiện tại đã được xác thực.
- JwtUtil.java: Dùng để tạo và xác nhận mã thông báo JWT.
- MySecurityConfig.java: Để config các bảo mật về mật khẩu, phạm vi truy cập
ResourceNotFoundException.java là một ngoại lệ tùy chỉnh dùng để xử lý lỗi xảy ra trong quá trình chạy chương trình Nhiệm vụ của ngoại lệ này là "bắt" và "xử lý" lỗi một cách thích hợp, chẳng hạn như hiển thị thông báo lỗi Nếu không được xử lý đúng cách, ngoại lệ này có thể dẫn đến việc chương trình bị dừng lại.
- JwtRequest.java: Được sử dụng làm đối tượng yêu cầu để lấy tên người dùng và mật khẩu từ phía client.
- JwtResponse.java: Được sử dụng để tạo đối tượng phản hồi gửi đến client.
- entity: Là lớp mô hình dữ liệu tương ứng với các thực thể và bảng.
- Vn.fs.Repository: là các interface kế thừa JpaRepository trong Spring Data.
- Vn.fs.service:Khởi tạo các phương thức.
- Vn.fs.ServiceImpl: dùng để triển khai các interface Service và ghi đè các phương thức.
- Application.properties: Là nơi cấu hình cho Spring DataSource, JPA &
Thư viện Hệ thống JRE là môi trường chạy Java, cung cấp các thư viện và môi trường cho JVM JVM chịu trách nhiệm biên dịch mã nguồn thành bytecode phù hợp với hệ điều hành, tạo ra một môi trường Java nơi các chương trình được thực thi.
Maven Dependencies là thư viện hỗ trợ cho việc chạy và triển khai ứng dụng, cho phép quản lý các phần phụ thuộc trong tệp pom.xml hoặc build.gradle Khi cần sử dụng thư viện, người dùng chỉ cần khai báo vào phần dependencies, hệ thống sẽ tự động tải về tất cả Điều này thể hiện sự tiện lợi của Spring Boot Dependencies trong quá trình phát triển ứng dụng.
- Pom.xml: Chứa các phụ thuộc cho Spring Boot và MySQL
Cấu trúc này cho phép mỗi tầng quản lý tất cả các lớp liên quan trong cùng một package Khi dự án mở rộng và số lượng lớp tăng lên, mỗi package có thể chứa nhiều lớp, gây khó khăn trong việc tìm kiếm một lớp cụ thể Tuy nhiên, chúng ta có thể định nghĩa các sub package để chia nhỏ các lớp, giúp việc quản lý trở nên dễ dàng hơn.
3.4.4 Luồng đi trong Spring Boot
Hình 20: Sơ đồ luồng đi trong SpringBoot
- Dầu tiên, người dùng sẽ vào view để xem,tương tác
Khi người dùng bắt đầu tải dữ liệu, chẳng hạn như khi nhấn nút Reload, một yêu cầu từ View sẽ được gửi đến Controller để yêu cầu danh sách người dùng.
- Controller nhận được yêu cầu,bắt đầu gọi method của Service)
Dịch vụ nhận yêu cầu từ Controller và có thể xử lý các mã đơn giản ngay lập tức Tuy nhiên, đối với các thao tác liên quan đến cơ sở dữ liệu, dịch vụ cần gọi Repository để truy xuất dữ liệu từ DB.
Mô Hình Xây Dựng Dự Án
Đây là kiến trúc dự án mà ta xây dựng:
Hình 22: Kiến trúc Angular11 & SpringBoot
- Angular: Phần giao diện người dùng
Router là một module trong @angular/router, giúp ứng dụng Angular của bạn thực hiện điều hướng và hiển thị nội dung tương ứng với địa chỉ URL.
An Angular Component is a pure JavaScript class defined by the @Component decorator, which provides essential information about the View (template) and metadata related to the class.
Dịch vụ Angular là các đoạn mã có thể tái sử dụng từ nhiều component khác nhau, giúp thực hiện các nhiệm vụ độc lập như ghi log hoặc gọi API bên ngoài Việc sử dụng dịch vụ cho phép chia sẻ logic và dữ liệu, giúp các component có thể sử dụng chung một cách hiệu quả.
HTTPClient là một mô-đun dịch vụ trong Angular, cho phép ứng dụng giao tiếp hiệu quả với back-end Các trình duyệt hiện đại hỗ trợ hai API để tạo yêu cầu HTTP: XMLHttpRequest và fetch() Với HTTPClient, @angular/common/http cung cấp một API HTTP đơn giản, xây dựng trên interface XMLHttpRequest để tương tác với trình duyệt Sự cải tiến của HttpClient bao gồm khả năng kiểm tra tốt hơn, xử lý yêu cầu và phản hồi hiệu quả hơn, cùng với hỗ trợ lỗi tốt hơn.
- Spring Boot: Phần Back-end viết api
- Spring Rest Controller: Ta viết API tại đây
Spring JPA là một tầng Persistent chịu trách nhiệm tương tác với cơ sở dữ liệu, bao gồm việc truy vấn và lưu trữ dữ liệu JPA cung cấp cơ chế ORM để ánh xạ các bảng, cột và mối quan hệ trong cơ sở dữ liệu thành các lớp Java, đồng thời cung cấp các phương thức cần thiết để thao tác với dữ liệu.
- Về luồng đi dự án:
- Spring boot xuất Rest API bằng Spring Web MVC tương tác với cơ sở dữ liệu MySQL bằng Spring Data JPA
Angular client sử dụng Mô-đun HTTP Client để gửi các yêu cầu HTTP và nhận phản hồi, sau đó hiển thị dữ liệu trên các Component Để điều hướng giữa các trang, chúng ta sử dụng Angular Router.
Giao tiếp giữa Front-end và Back-end được thực hiện thông qua API REST, với Front-end sử dụng HTTP Client và Back-end xử lý yêu cầu HTTP bằng Spring Rest Controller Angular sẽ tạo ra giao diện người dùng đầy đủ chức năng để quản lý nhân viên, bao gồm các tính năng thêm, xóa, sửa và tìm kiếm Tất cả dữ liệu sẽ được lưu trữ trong cơ sở dữ liệu MySQL, được tích hợp với ứng dụng Spring JPA.
Triển Khai Dự Án
3.6.1.1Giao diện đăng nhập và đăng ký
Hình 23: Giao diện đăng nhập
Hình 24: Giao diện đăng ký
Hình 25: Giao diện trang chủ
Hình 26: Giao diện trang chủ
Hình 27: Giao diện cửa hàng
Hình 28: Giao diện danh sách sản phẩm yêu thích
Hình 29: Giao diện giỏ hàng
3.6.1.6 Giao diện chi tiết sản phẩm
Hình 30: Giao diện chi tiết sản phẩm
3.6.1.7 Giao diện trang cá nhân
Hình 31: Giao diện trang cá nhân
Hình 32: Giao diện giới thiệu
Hình 33: Giao diện liên hệ
Hình 34: Giao diện đăng nhập
Hình 35: Giao diện chính admin
3.6.2.3 Giao diện quản lý khách hàng
Hình 36: Giao diện quản lý khách hàng
Hình 37: Giao diện quản lý đơn hàng
3.6.2.5 Giao diện quản lý sản phẩm
Hình 38: Giao diện quản lý sản phẩm
3.6.2.6 Giao diện quản lý loại sản phẩm
Hình 39: Giao diện quản lý loại sản phẩm
3.6.2.7 Giao diện quản lý đánh giá khách hàng
Hình 40: Giao diện quản lý đánh giá
3.6.2.8 Giao diện thống kê danh mục bán chạy
Hình 41: Giao diện danh mục bán chạy nhất
3.6.2.9 Giao diện thống kê sản phẩm bán chạy
Hình 42: Giao diện sản phẩm bán chạy nhất
3.6.2.10 Giao diện sản phẩm tồn kho
Hình 43: Giao diện hàng tồn kho
Kết luận
- Đã hiểu và sử dụng được Framework Angular để tạo Front-end cho người dùng
Đã nắm vững và áp dụng các Framework Spring như Spring Boot, Spring Security và Spring JPA để phát triển API, thực hiện xác thực phân quyền người dùng, cũng như tương tác hiệu quả với cơ sở dữ liệu MySQL.
- Đã viết được API và gọi được API thành công.
- Project tạo ra thân thiện, đơn giản dễ sử dụng cho người dùng.
- Hoàn thành mục tiêu ban đầu đặt ra là: tạo project bán hàng với đầy đủ chức năng cần có
Mastering and effectively utilizing tools such as Visual Studio Code, Spring Tool Suite 4, and Postman, along with frameworks like Angular 11, Spring Boot, Spring Data JPA, and Spring Security, is essential for successful project development.
Cải thiện chức năng và giao diện website bằng cách thêm các mục như nhân viên, chấm công, liên hệ, và tích hợp thanh toán trực tuyến qua MoMo, VNPay cùng với các tài khoản ngân hàng khác để nâng cao trải nghiệm người dùng.
- Mở rộng quy mô hệ thống hơn, phát triển trên các nền tảng khác như trên android và IOS.