Tại đây người dùng chính cóthể thêm, sửa, xóa người dùng, sản phẩm, hay nội dung bài viết.Nếu đăng nhập không thành công, hệ thống sẽ thông báo sai thôngtin đăng nhập, buộc người dùng ph
GIỚI THIỆU V ĐƠN VỊ THỰC TẬP
Giới thiệu về doanh nghiệp
VINOVA là một trong những doanh nghiệp đi đầu trong phát triển ứng dụng web và di dộng dành cho các công ty khởi nghiệp kể từ năm 2010.
VINOVA là công ty phát triển ứng dụng di động hàng đầu, chuyên cung cấp dịch vụ công nghệ thông tin toàn diện, bao gồm Blockchain, Business Intelligence (BI), Internet of Things (IoT) và An ninh mạng.
Vinova luôn được công nhận là một trong 10 công ty phát triển ứng dụng di động hàng đầu tại Singapore Với sự sáng tạo và cam kết cung cấp các dự án đạt tiêu chuẩn cao, Vinova đã xây dựng được lòng tin từ khách hàng.
Hình 1 1 Logo của công ty VINOVA
Vinova là một tập thể năng động và gắn kết, luôn nỗ lực học hỏi và sáng tạo để cung cấp dịch vụ và sản phẩm chất lượng cao Chúng tôi tin rằng con người là yếu tố quyết định tạo nên sản phẩm và dịch vụ có vị thế trên thị trường, đồng thời giữ vững niềm tin từ khách hàng và đối tác Mục tiêu của chúng tôi là trở thành doanh nghiệp hàng đầu trong lĩnh vực cung cấp giải pháp công nghệ số tại Việt Nam trong những năm tới, với trụ sở chính đặt tại Singapore.
Các sản phẩm công nghệ
Hiện tại, ở VINOVA cung cấp những sản phầm công nghệ như:
- Trải nghiệm kỹ thuật số
- Dịch vụ được quản lý
- Dịch vụ đổi mới sáng tạo
- Mở rộng thị trường nước ngoài
Công ty hiện đang triển khai xây dựng website bán sách BookStore, và tôi đã tham gia vào quá trình phát triển này Trong báo cáo này, tôi xin trình bày kết quả đạt được trong quá trình phát triển website bán sách BookStore tại công ty.
Bảo mật website
1.3.1 Bảo mật JWT là gì?
JWT là một phương tiện đại diện cho các yêu cầu chuyển giao giữa hai bên Client –
Server sử dụng chuỗi JWT, trong đó thông tin được định dạng bằng JSON Chuỗi Token bao gồm ba phần chính: header, payload và signature, được ngăn cách bởi dấu chấm.
Cấu trúc của JSON Web Token:
Như ở trên đã nói JSON Web Token bao gồm 3 phần, được ngăn cách nhau bởi dấu chấm (.):
Phần header sẽ chứa kiểu dữ liệu , và thuật toán sử dụng để mã hóa ra chuỗi JWT {
“typ” (type) chỉ ra rằng đối tượng là một JWT
“alg” (algorithm) xác định thuật toán mã hóa cho chuỗi là HS256
Phần payload sẽ chứa các thông tin mình muốn đặt trong chuỗi Token như username userId author , , , … ví dụ:
The signature is generated by encoding the header and payload, combined with a secret string For example, the process involves base64url encoding the header and payload, resulting in a signature calculated as Hash(data secret) The base64UrlEncoder is the algorithm used for encoding the header and payload.
1.3.2 Cách thức JWT hoạt động
Kỹ thuật tấn công Cross-Site Request Forgery (CSRF) lợi dụng sự tin tưởng giữa trình duyệt web và người dùng Khi người dùng đăng nhập vào một trang web, trình duyệt sẽ lưu trữ thông tin đăng nhập dưới dạng cookies Điều này cho phép trình duyệt tự động gửi yêu cầu đến máy chủ của trang web, kèm theo thông tin xác thực, tạo cơ hội cho các cuộc tấn công CSRF.
Tấn công CSRF (Cross-Site Request Forgery) xảy ra khi kẻ tấn công tạo ra các yêu cầu giả mạo hoặc lợi dụng các yêu cầu đã tồn tại trong trình duyệt của người dùng để gửi đến máy chủ của trang web Khi người dùng truy cập vào trang web bị tấn công, các yêu cầu này sẽ tự động được gửi đi mà không cần sự cho phép hay nhận thức của người dùng Điều này có nghĩa là nếu kẻ tấn công thành công trong việc lừa người dùng truy cập vào trang web của họ, thì họ có thể thực hiện các hành động trái phép trên trang web đó.
1.3.3 Phương pháp phòng chống JWT
Không nên lưu thông tin mật khẩu tại trình duyệt (không nên chọn các phương thức “lưu mật khẩu” hay “đăng nhập lần sau”
Nên đăng xuất thông tin đăng nhập vào tài khoản ngân hàng, tài khoản email, hay các trang mạng xã hội trên máy tính lạ
Không nên nhấp vào các liên kết lạ nhận được qua email hoặc Facebook Hãy di chuột lên liên kết để kiểm tra địa chỉ đích hiển thị ở góc dưới bên trái của trình duyệt Sau đó, xác nhận xem địa chỉ đó có phải là nơi bạn muốn truy cập hay không.
Trong quá trình thực hiện giao dịch trực tuyến, người dùng không nên truy cập vào các website khác Việc truy cập vào các trang web lạ có thể tiềm ẩn nguy cơ chứa mã khai thác từ kẻ tấn công, gây hại cho thông tin cá nhân và tài khoản của bạn.
Phía máy chủ sử dụng CSRF_Token:
Phương pháp này yêu cầu trang web tạo ra một token ngẫu nhiên để xác thực các yêu cầu từ người dùng Khi một yêu cầu được gửi, token này sẽ được kiểm tra nhằm đảm bảo rằng yêu cầu đó đến từ người dùng hợp lệ và không phải là một yêu cầu giả mạo.
PHÂN TÍCH HỆ THỐNG
Mục tiêu và phạm vi dự án
- Khoa công nghệ thông tin trường Đại học Điện Lực
- Người dùng trải nghiệm sản phẩm
- Giúp website phổ biến tới mọi người dùng, hỗ trợ họ trong việc mua sắm trực tuyến, giảm thiểu thời gian cũng như công sức.
- Cải thiện tốc độ tải trang cũng như trải nghiệm người dùng.
- Hỗ trợ khách hàng mua hàng nhanh nhất có thể thông qua kênh chat tại website
Yêu cầu về nghiệp vụ
Tên gọi : Website bán sách BookStore
Dự án này nhắm đến hai đối tượng chính: nhà phát triển và người dùng Nhà phát triển hoặc cửa hàng sẽ sử dụng hệ thống quản lý bán hàng, trong khi khách hàng có thể trải nghiệm dịch vụ mua sắm thông qua website của cửa hàng.
Phân tích và đặc tả nghiệp vụ hệ thống
2.3.1 Sơ đồ tổng quát hệ thống
Hình 2 1 Sơ đồ tổng quát hệ thống
Các chức năng chính của hệ thống:
Quản lý tài khoản là chức năng cho phép quản trị viên có quyền truy cập để thêm, sửa và xóa thông tin tài khoản Trong quá trình sửa đổi, quản trị viên chính có khả năng cấp quyền cho các quản trị viên khác, giúp họ cũng có quyền quản lý website.
Quản lý sản phẩm: Chức năng này cho phép quản trị viên thêm, sửa, xóa thông tin sản phẩm để hiển thị trên trang web.
Quản lý đánh giá: Chức năng này cho phép quản trị viên theo dõi cũng như là thao tác với các bình luận về sản phẩm.
Quản lý đơn hàng: Chức năng cho phép quản trị viên theo dõi và thao tác với các đơn đặt hàng của khách hàng.
Quản lý bài viết: Chức năng cho phép quản trị viên có thể đăng bài,tin tức lên website.
Xác định các Actor và Use Case tổng quát của hệ thống
2.4.1 Xác định các Actor của hệ thống
Người quản lý cao nhất của hệ thống có trách nhiệm quản lý thông tin trong hệ thống và điều phối việc hiển thị thông tin đó trên website.
Người tiêu dùng không chỉ trải nghiệm mua sắm mà còn đóng góp ý kiến về chất lượng phục vụ của nhân viên tại cửa hàng Họ cũng cần đề xuất các yếu tố cần bổ sung để website có thể phát triển và nâng cấp hơn nữa.
2.4.1.1 Biểu đồ Use Case tổng quát của hệ thống
Hình 2 2 Biểu đồ usecase tổng quát hệ thống
Phân tích chi tiết từng chức năng của hệ thống
2.5.1 Chức năng đăng nhập và đăng xuất
2.5.1.1 Biểu đồ use case cho chức năng đăng nhập, đăng xuất
Hình 2 3 Biểu đồ usecase đăng nhập, đăng xuất
Đặc tả use case đăng nhập, đăng xuất
Khi người dùng nhận thông tin tài khoản mặc định, họ cần nhập đúng định dạng email và đủ ký tự mật khẩu Sau khi đăng nhập thành công, hệ thống sẽ chuyển hướng đến trang chủ, nơi người dùng có thể thêm, sửa, xóa thông tin người dùng, sản phẩm và bài viết Nếu đăng nhập không thành công, hệ thống sẽ thông báo lỗi thông tin đăng nhập, yêu cầu người dùng nhập lại.
Trong quy trình đăng nhập, tác nhân yêu cầu giao diện đăng nhập vào hệ thống, sau đó hệ thống hiển thị giao diện này Tác nhân sẽ nhập email và mật khẩu, và hệ thống sẽ kiểm tra dữ liệu đầu vào, đối chiếu với thông tin tài khoản trong cơ sở dữ liệu Nếu thông tin chính xác, hệ thống cho phép tác nhân truy cập vào giao diện chính Kết thúc quy trình đăng nhập.
Sự kiện 1: Nếu tác nhân đăng nhập đúng, nhưng lại muốn thoát khỏi hệ thống → Hệ thống thông báo thoát bằng cách đăng xuất
Sự kiện 2: Nếu tác nhân đăng nhập sai → Hệ thống thông báo đăng nhập lại → Kết thúc use case.
- Các yêu cầu đặc biệt: Không có
- Trạng thái hệ thống trước khi sử dụng use case: Không có yêu cầu
- Trạng thái hệ thống sau khi sử dụng use case:
Nếu đăng nhập không thành công, hệ thống sẽ hiển thị thông báo “Email không tồn tại” hoặc “Mật khẩu không chính xác”, sau đó quay lại giao diện đăng nhập để bạn có thể nhập lại thông tin.
2.5.1.2 Biểu đồ hoạt động cho chức năng đăng nhập, đăng xuất
Hình 2 4.Biểu đồ hoạt động cho chức năng đăng nhập, đăng xuất
2.5.1.3 Biểu đồ trình tự cho chức năng đăng đăng nhập, đăng xuất
Hình 2 5.Biểu đồ trình tự cho chức năng đăng nhập
Mô tả chi tiết biểu đồ trình tự với chức năng đăng nhập
Bước 1: Tác nhân cụ thể là admin website khi yêu cầu đăng nhập hệ thống quản lý
Bước 2: Yêu cầu hệ thống hiện thị giao diện đăng nhập
Bước 3: Hệ thống trả về form đăng nhập
Bước 4: Hệ thống yêu cầu nhập thông tin tài khoản: email và password. Bước 5: Nhập thông tin tài khoản gồm email và password
Bước 6: Click vào button đăng nhập để hệ thống xử lý thông tin
Bước 7: Kiểm tra thông tin đăng nhập.
Bước 8: Kiểm tra thông tin đăng nhập trên cơ sở dự liệu
Bước 9: Xác nhận thông tin đăng nhập và đối chiếu kết quả với cơ sở dự liệu.
Bước 10: Gửi kết quả sau khi đối chiếu.
Bước 11: Gửi thông báo ra màn hình:
Nếu đăng nhập không thành công, hệ thống sẽ hiển thị thông báo "Email không tồn tại" hoặc "Mật khẩu không chính xác", và bạn có thể quay lại màn hình đăng nhập để nhập lại thông tin.
Hình 2 6.Biểu đồ trình tự chức năng đăng xuất
Mô tả chi tiết biểu đồ trình tự với chức năng đăng xuất
- Bước 1: Tác nhân cụ thể quản lý website khi yêu cầu form đăng xuất hệ thống
- Bước 2: Click vào button đăng xuất để hệ thống xử lý thông tin
- Bước 3: Gửi yêu cầu đăng xuất.
- Bước 4: Xử lí sư kiện.
- Bước 5: Xác nhận thông tin đăng xuất.
- Bước 6: Đăng xuất thành công.
- Bước 7: Chuyển hướng sang trang đăng nhập
2.5.2 Chức năng quản lý tài khoản
2.5.2.1 Biểu đồ Use Case cho chức năng quản lý người dùng (Admin)
Hình 2 7.Biểu đồ Use Case quản lý tài khoản
Đặc tả Use Case quản lý tài khoản admin
Sau khi đăng nhập thành công, Admin có quyền quản lý và thêm mới người dùng bằng cách nhập đầy đủ thông tin như email, tên hiển thị và mật khẩu Ngoài ra, Admin cũng có khả năng sửa đổi hoặc xóa người dùng hiện có trong danh sách.
Trong dòng sự kiện chính, tác nhân yêu cầu thêm tài khoản admin trên hệ thống, hệ thống tiếp nhận yêu cầu và hiển thị giao diện để thêm tài khoản Sau đó, hệ thống tiến hành kiểm tra dữ liệu được nhập vào để xác định tính hợp lệ của nó, và cuối cùng kết thúc use case.
Sự kiện 1: Nếu tác nhân nhập đúng các dữ liệu, nhưng lại muốn thoát khỏi hệ thống→ nhấp thoát → Hệ thống thông báo thoát → Kết thúc use case
Sự kiện 2: Nếu tác nhân nhập thông tin sai → Hệ thống thông báo nhập lại → Kết thúc use case.
2.5.2.2 Biểu đồ hoạt động cho chức năng quản lý tài khoản
Hình 2 8.Biểu đồ hoạt động cho chức năng quản lý tài khoản
2.5.2.3 Biểu đồ trình tự cho chức năng quản lý tài khoản
Hình 2 9 Biều đồ trình tự cho chức năng sửa tài khoản
Mô tả chi tiết biểu đồ trình tự với chức năng sửa thông tin tài khoản
- Bước 1: Tác nhân cụ thể là admin yêu cầu form sửa tài khoản trên hệ thống
- Bước 2: Yêu cầu hiện thị giao diện sửa tài khoản
- Bước 3: Trả về form sửa tài khoản cho tác nhân
- Bước 4: Nhập thông tin tài khoản
- Bước 5: Tác nhân lựa chọn chức năng sửa tài khoản
- Bước 6: Hệ thống nhận yêu cầu từ tác nhân và kiểm tra dữ liệu đầu vào.
- Bước 7: Xử lý sự kiện
- Bước 8: Hệ thống lưu dữ liệu vừa nhập
- Bước 9: Hệ thống lưu thông tin vào cơ sở dũ liệu.
- Bước 10: Xác nhận kết quả.
- Bước 11: Hệ thống phản hồi thông báo thành công
- Bước 12: Hiển thị thông tin ra màn hình
Hình 2 10 Biểu đồ trình tự cho chức năng xóa tài khoản
Mô tả chi tiết biểu đồ trình tự với chức năng xóa tài khoản
- Bước 1: Tác nhân cụ thể là admin yêu cầu form danh sách tài khoản trên hệ thống
- Bước 2: Yêu cầu hiện thị giao diện danh sách tài khoản
- Bước 3: Trả về form danh sách tài khoản cho tác nhân
- Bước 4: Lựa chọn chức năng
- Bước 5: Tác nhân lựa chọn chức năng xóa tài khoản
- Bước 6: Xử lý sự kiện.
- Bước 7: Hiển thị cảnh báo
- Bước 8: Thực hiện xóa tài khoản
- Bước 9: Hệ thống cập nhật thông tin vào cơ sở dũ liệu.
- Bước 10: Xác nhận hành động.
- Bước 11: Hệ thống phản hồi thông báo thành công
- Bước 12: Hiển thị thông tin ra màn hình
2.5.3 Chức năng quản lý sản phẩm
2.5.3.1 Biểu đồ Use Case cho chức năng quản lý sản phẩm
Hình 2 11 Biểu đồ Use Case cho chức năng quản lý sản phẩm
Đặc tả use case quản lý sản phẩm
Admin có quyền thêm sản phẩm mới với các thông tin cần thiết như tên, ảnh, trạng thái nổi bật, giá, mô tả, danh mục và số lượng trong kho Chức năng nổi bật cho phép hiển thị hoặc ẩn sản phẩm trên website Ngoài ra, Admin cũng có thể sửa đổi hoặc xóa các sản phẩm hiện có trong danh sách.
Trong quy trình cập nhật thông tin sản phẩm, tác nhân gửi yêu cầu lên hệ thống Hệ thống tiếp nhận yêu cầu và hiển thị giao diện quản lý sản phẩm để thực hiện việc cập nhật Sau đó, hệ thống tiến hành kiểm tra tính hợp lệ của dữ liệu được nhập vào Cuối cùng, quy trình sử dụng kết thúc.
Sự kiện 1: Nếu tác nhân nhập đúng các dự liệu, nhưng lại muốn thoát khỏi hệ thống
→ Hệ thống thông báo thoát → Kết thúc use case
Sự kiện 2: Nếu tác nhân nhập thông tin sai → Hệ thống thông báo nhập lại → Kết thúc use case.
- Các yêu cầu đặc biệt: không có
- Trạng thái hệ thống trước khi sử dụng use case: không có
Sau khi áp dụng use case, hệ thống đã hoàn thành giao diện quản lý sản phẩm với đầy đủ các chức năng như thêm, sửa, xóa và tìm kiếm sản phẩm Ngoài ra, giao diện còn hiển thị hình ảnh của từng sản phẩm một cách rõ ràng.
2.5.3.2 Biểu đồ hoạt động cho chức năng quản lý sản phẩm
Hình 2 12 Biểu đồ hoạt động cho chức năng quản lý sản phẩm
2.5.3.3 Biểu đồ trình tự cho quản lý sản phẩm
Hình 2 13 Biểu đồ trình tự cho thêm sản phẩm
Mô tả chi tiết biểu đồ trình tự với chức năng thêm thông tin sản phẩm
- Bước 1: Tác nhân cụ thể là admin yêu cầu form thêm sản phẩm trên hệ thống
- Bước 2: Yêu cầu hiện thị giao diện phần mềm
- Bước 3: Trả về form thêm sản phẩm cho tác nhân
- Bước 4: Nhập thông tin sản phẩm
- Bước 5: Tác nhân lựa chọn chức năng thêm sản phẩm
- Bước 6: Hệ thống nhận yêu cầu từ tác nhân và kiểm tra dữ liệu đầu vào.
- Bước 7: Xử lý sự kiện
- Bước 8: Hệ thống lưu dữ liệu vừa nhập
- Bước 9: Hệ thống lưu thông tin vào cơ sở dũ liệu.
- Bước 10: Xác nhận kết quả.
- Bước 11: Hệ thống phản hồi thông báo thành công
- Bước 12: Hiển thị thông tin ra màn hình
Hình 2 14 Biểu đồ trình tự cho sửa sản phẩm
Mô tả chi tiết biểu đồ trình tự với chức năng sửa thông tin sản phẩm
- Bước 1: Tác nhân cụ thể là admin yêu cầu form sửa sản phẩm trên hệ thống
- Bước 2: Yêu cầu hiện thị giao diện sửa sản phẩm
- Bước 3: Trả về form sửa sản phẩm cho tác nhân
- Bước 4: Nhập thông tin sản phẩm
- Bước 5: Tác nhân lựa chọn chức năng sửa sản phẩm
- Bước 6: Hệ thống nhận yêu cầu từ tác nhân và kiểm tra dữ liệu đầu vào.
- Bước 7: Xử lý sự kiện
- Bước 8: Hệ thống lưu dữ liệu vừa nhập
- Bước 9: Hệ thống lưu thông tin vào cơ sở dũ liệu.
- Bước 10: Xác nhận kết quả.
- Bước 11: Hệ thống phản hồi thông báo thành công
- Bước 12: Hiển thị thông tin ra màn hình
Hình 2 15 Biểu đồ trình tự cho xóa sản phẩm
Mô tả chi tiết biểu đồ trình tự với chức năng xóa thông tin sản phẩm
- Bước 1: Tác nhân cụ thể là admin yêu cầu form danh sách sản phẩm trên hệ thống
- Bước 2: Yêu cầu hiện thị giao diện danh sách sản phẩm
- Bước 3: Trả về form danh sách sản phẩm cho tác nhân
- Bước 4: Lựa chọn chức năng
- Bước 5: Tác nhân lựa chọn chức năng xóa sản phẩm
- Bước 6: Xử lý sự kiện.
- Bước 7: Hiển thị cảnh báo
- Bước 8: Thực hiện xóa sản phẩm
- Bước 9: Hệ thống cập nhật thông tin vào cơ sở dũ liệu.
- Bước 10: Xác nhận hành động.
- Bước 11: Hệ thống phản hồi thông báo thành công
- Bước 12: Hiển thị thông tin ra màn hình
2.5.4 Chức năng quản lý đơn hàng
2.5.4.1 Biểu đồ Use Case cho chức năng quản lý đơn hàng
Hình 2 16 Biểu đồ Use Case cho chức năng quản lý sản phẩm
Đặc tả use case quản lý sản phẩm
Admin có quyền thêm sản phẩm mới với các thông tin cần thiết như tên, ảnh, trạng thái nổi bật, giá, mô tả, danh mục và số lượng trong kho Chức năng nổi bật cho phép hiển thị hoặc ẩn sản phẩm trên website Ngoài ra, Admin cũng có khả năng sửa đổi hoặc xóa các sản phẩm đã có trong danh sách.
Trong dòng sự kiện chính, tác nhân gửi yêu cầu cập nhật thông tin sản phẩm trên hệ thống Hệ thống tiếp nhận yêu cầu và hiển thị giao diện quản lý sản phẩm để thực hiện việc cập nhật Sau đó, hệ thống tiến hành kiểm tra tính hợp lệ của dữ liệu được nhập vào Cuối cùng, quá trình cập nhật thông tin sản phẩm kết thúc.
Sự kiện 1: Nếu tác nhân nhập đúng các dự liệu, nhưng lại muốn thoát khỏi hệ thống
→ Hệ thống thông báo thoát → Kết thúc use case
Sự kiện 2: Nếu tác nhân nhập thông tin sai → Hệ thống thông báo nhập lại → Kết thúc use case.
- Các yêu cầu đặc biệt: không có
- Trạng thái hệ thống trước khi sử dụng use case: không có
Sau khi thực hiện use case, hệ thống đã hoàn thành giao diện quản lý sản phẩm với đầy đủ các chức năng như thêm, sửa, xóa và tìm kiếm sản phẩm Đồng thời, hệ thống cũng hiển thị hình ảnh của từng sản phẩm một cách rõ ràng.
2.5.4.2 Biểu đồ hoạt động cho chức năng quản lý đơn hàng
Hình 2 17 Biểu đồ hoạt động cho chức năng quản lý sản phẩm
2.5.3.3 Biểu đồ trình tự cho quản lý đơn hàng
Hình 2 18 Biểu đồ trình tự cho xóa đơn hàng
Mô tả chi tiết biểu đồ trình tự với chức năng xóa thông tin sản phẩm
- Bước 1: Tác nhân cụ thể là admin yêu cầu form quản lý đơn hàng trên hệ thống
- Bước 2: Yêu cầu hiện thị giao diện quản lý đơn hàng
- Bước 3: Trả về form quản lý đơn hàng cho tác nhân
- Bước 4: Click xóa đơn hàng
- Bước 5: Gửi yêu cầu xóa đơn hàng
- Bước 6: Xác nhận kết quả
- Bước 7: Thông báo thành công
- Bước 8: Hiển thị kết quả ra màn hình
THIẾT KẾ HỆ THỐNG
Thiết kế cơ sở dữ liệu
Users Bảng lưu thông tin người dùng
Products Bảng lưu thông tin sản phẩm
Authors Bảng lưu thông tin tác giả
Categories Bảng lưu thông tin danh mục
Publishers Bảng lưu thông tin nhà xuất bản Product_Categories Bảng lưu trữ danh mục của sản phẩm
Orders Bảng lưu thông tin đơn hàng
Bảng 3 1 Bảng định nghĩa các bảng trong cơ sở dữ liệu
ID UUID fullname Text password Text email Text address Varchar(255)
RoleID INT phone Varchar(255) status INT createdAt TIMESTAMP updatedAt TIMESTAMP
Bảng 3 2 Bảng lưu thông tin người dùng
Image Text price Double quantity INT
Bảng 3 3 Bảng lưu dữ liệu sản phẩm
Bảng 3 4 Bảng lưu thông tin tác giả
Bảng 3 5 Bảng lưu thông tin nhà xuất bản
Bảng 3 6 Bảng lưu trữ thông tin danh mục
Bảng 3 7 Bảng lưu thông tin danh mục của sản phẩm
ID UUID payment Varchar(255) status INT name Varchar(255) address Varchar(255)
Thiết kế giao diện
3.2.1 Màn hình đăng nhập trang admin
Khi chưa đăng nhập thông tin người dùng
Hình 3 1 Giao diện trang đăng nhập hệ thống quán lý
Khi nhập sai thông tin đăng nhập, màn hình sẽ hiện thông báo nhập sai
Hình 3 2 Giao diện trang thông báo lỗi
Hình 3 3 Giao diện chính của hệ thống quản lý
Màn hình chính gồm các menu chức năng:
Thống kê: Hiển thị số lượng người dùng
Tài khoản: Hiển thị thông tin người dùng sau khi thêm, sửa, xóa
Sản phẩm: Hiển thị thông tin sản phẩm sau khi thêm, sửa, xóa
Đơn hàng: Hiển thị danh sách đơn hàng khi chờ thanh toán
3.2.3 Giao diện quản lý người dùng
Hình 3 4 Giao diện thêm mới tài khoản
Hình 3 5 Giao diện xóa tài khoản
Khi người dùng thực hiện thao tác xóa, hệ thống sẽ hiện thông báo về hành động có muốn xóa hay không.
3.2.4 Giao diện quản lý sản phẩm
Hình 3 6 Giao diện thêm mới sản phẩm
Hình 3 7 Giao diện sửa sản phẩm
Hình 3 8 Giao diện xóa sản phẩm
Khi người dùng thực hiện thao tác xóa, hệ thống sẽ hiện thông báo về hành động có muốn xóa hay không.
3.2.5 Giao diện quản lý đơn hàng
Giao diện quản lý đơn hàng
Xem chi tiết đơn hàng
Xóa đơn hàng đơn hàng
TÍCH HỢP
Tích hợp thanh toán Stripe
- Tạo 1 checkout lấy data từ Order và URL trả về
Hình 4 1 Cài đặt Stripe ở phía backend
- Tiến hành gọi tới api ở phía backend với phương thức POST
Hình 4 2 Cài đặt Stripe ở phía frontend
- Khi chọn phương thức thanh toán Stripe sẽ hiển thị button đặt hàng Stripe
Hình 4 3 Chọn thanh toán Stripe ở Order
- Khi ấn button Stripe, chuyển tới trang giao dịch của Stripe
Hình 4 4 Giao diện thanh toán Stripe
Tích hợp thanh toán PayPal
- Sử dụng PayPalScriptProvier từ react-paypal-js để bao quanh Router.
- Khi chọn phương thức thanh toán PayPal sẽ hiển thị button PayPal
Hình 4 6 Chọn hình thức thanh toán Paypal
Hình 4 8 Giao diện giao dịch PayPal
Hình 4 9 Giao dịch thành công
Tích hợp upload ảnh cloudinary
- Tạo file config định nghĩa api_key và cấu hình CloudinaryStorage
Hình 4 10 Cài đặt Cloudinary upload với multer
Hình 4 11 Giao diện tạo sản phẩm
Hình 4 12 Ảnh được lưu với link online trên cloudinary
Tích hợp api tỉnh thành vnappmob
Hình 4 13 Cài đặt code gọi tới api tỉnh thành ở backend
Hình 4 14 Cài đặt code ở phía frontend
- Khi chọn Tỉnh/Thành phố, Quận/Huyện sẽ nhận được id và hiển thị danh sách thuộc id đó, tương tự như với Phường/Xã.
Biểu đồ trình tự cho từng chức năng tích hợp
4.5.1 Biểu đồ trình tự Stripe
Hình 4 16 Biểu đồ trình tự thanh toán Stripe
Bước 1: Khách hàng vào website mua hàng và chọn “Thanh toán qua Stripe” Bước 2: Gửi yêu cầu thanh toán đến cổng thanh toán Stripe
Bước 3: Chuyển hướng đến trang Checkout
Bước 4: Khách hàng sẽ nhập những thông tin cần thiết để thanh toán Bước 5: Gửi thông tin cần thanh toán
Bước 6: Xác nhận giao dịch
Bước 7: Thông báo thành công
Bước 8: Trở về trang chủ website
4.5.2 Biểu đồ trình tự PayPal
Hình 4 17 Biểu đồ trình tự thanh toán PayPal
Bước 1: Khách hàng vào website mua hàng và chọn “Thanh toán qua PayPal” Bước 2: Gửi yêu cầu thanh toán đến cổng thanh toán Stripe
Bước 3: Chuyển hướng đến trang Checkout
Bước 4: Khách hàng sẽ nhập những thông tin cần thiết để thanh toán
Bước 5: Gửi thông tin cần thanh toán Bước 6: Xác nhận giao dịch Bước 7: Thông báo thành công Bước 8: Trở về trang chủ website
4.5.3 Biểu đồ trình tự Cloudinary
Hình 4 18 Biểu đồ trình tự Cloudinary
Bước 3: Lưu trữ ảnh trên Cloudinary
Bước 4: Trả về link ảnh online đã upload
Bước 5: Hiển thị ảnh đã trả về
4.5.4 Biểu đồ trình tự api tỉnh thành vnappmob
Hình 4 19 Biểu đồ trình tự vnappmob
Bước 1: Yêu cầu danh sách
Bước 2: Gửi yêu cầu danh sách
Bước 3: Xác nhận yêu cầu
Bước 4: Trả về danh sách tìm được
Bước 5: Hiển thị danh sách đã trả về