TỔNG QUAN CÔNG NGHỆ SỬ DỤNG XÂY DỰNG WEBSITE .6
Giới thiệu
Spring là một framework phát triển ứng dụng Java được hàng triệu lập trình viên tin dùng Framework này hỗ trợ xây dựng các ứng dụng hiệu suất cao, dễ dàng kiểm thử và khuyến khích việc tái sử dụng mã nguồn.
Spring là một mã nguồn mở, được phát triển, chia sẻ và có cộng đồng người dùng rất lớn.
Spring Framework được xây dựng dựa trên 2 nguyên tắc design chính là:
Dependency Injection và Aspect Oriented Programming.
Spring cung cấp những tính năng cốt lõi giúp phát triển ứng dụng Java Desktop, ứng dụng di động và Java Web Mục tiêu chính của Spring là đơn giản hóa quá trình phát triển các ứng dụng J2EE thông qua việc sử dụng mô hình POJO (Plain Old Java Object).
Lợi ích sử dụng
Spring cho phép lập trình viên sử dụng POJOs, giúp giảm thiểu sự phức tạp trong việc làm việc với EJB (Enterprise Java Beans), ứng dụng, các luồng chạy và cấu hình Nhờ đó, quá trình phát triển ứng dụng trở nên đơn giản và hiệu quả hơn.
Spring được tổ chức theo kiểu mô đun, cho phép nhà phát triển chọn lựa các gói và lớp tính năng cụ thể phù hợp với dự án của mình Điều này giúp họ chỉ tập trung vào những gì cần thiết, mà không phải lo lắng về các phần không liên quan khác.
Spring hỗ trợ sử dụng khá nhiều công nghệ như ORM Framework, các logging framework, JEE, các thư viện tạo lịch trình (Quartz và JDK timer)…
Module Web của Spring được thiết kế theo mô hình MVC nên nó cung cấp đầy đủ các tính năng giúp thay thế các web framework khác như Struts.
Mục đích sử dụng chính trong đề tài
Công nghệ chính được áp dụng trong đồ án là RESTful API, đóng vai trò quan trọng trong việc xây dựng và cung cấp dữ liệu cần thiết để hiển thị giao diện trang web.
Giới thiệu
React là thư viện UI được phát triển bởi Facebook, giúp tạo ra các thành phần giao diện người dùng tương tác, có trạng thái và dễ dàng tái sử dụng Hiện tại, React đang được sử dụng trong môi trường sản xuất tại Facebook, và Instagram cũng được xây dựng hoàn toàn dựa trên React.
React là một thư viện hấp dẫn vì không chỉ hoạt động trên phía client mà còn hỗ trợ render trên server, cho phép kết nối linh hoạt giữa chúng Thư viện này so sánh sự thay đổi giữa các lần render và chỉ cập nhật những thay đổi tối thiểu trên DOM, giúp tối ưu hiệu suất.
Lợi ích sử dụng
Lợi ích đầu tiên của ReactJS là khả năng tạo ra một DOM ảo, nơi các component được lưu trữ Việc sử dụng DOM ảo này giúp cải thiện hiệu suất làm việc đáng kể, vì ReactJS sẽ tính toán trước những thay đổi cần thiết trước khi cập nhật lên DOM thực Nhờ đó, ReactJS giảm thiểu các thao tác trên DOM thực, tiết kiệm chi phí và thời gian xử lý.
Một trong những lợi ích nổi bật của ReactJS là cú pháp JSX, giúp việc viết mã JavaScript trở nên dễ dàng hơn bằng cách cho phép kết hợp giữa mã HTML và JavaScript Điều này cho phép các đoạn code được thêm vào trong hàm render mà không cần nối chuỗi, tạo ra sự thuận tiện và hiệu quả Chuyển đổi các đoạn HTML thành các hàm khởi động được thực hiện thông qua bộ biến đổi JSX, một đặc điểm thú vị của ReactJS.
ReactJS cung cấp nhiều công cụ phát triển hữu ích, giúp việc viết mã và sửa lỗi trở nên dễ dàng hơn nhờ vào sự hỗ trợ phong phú từ các ứng dụng đi kèm.
Mục đích sử dụng chính trong đề tài
Xây dựng các Component giao diện tương tác với hệ thống Backend của trang web thông qua việc gửi các request đến các RESTful API.
3 Hệ quản trị cơ sở dữ liệu MySQL
Giới thiệu
MySQL là một phần mềm quản lý hệ thống cơ sở dữ liệu (CSDL), cho phép người dùng lưu trữ và tổ chức thông tin một cách rõ ràng và có cấu trúc CSDL giúp phân loại và sắp xếp thông tin một cách ngăn nắp, tạo điều kiện thuận lợi cho việc truy xuất và quản lý dữ liệu hiệu quả.
Lợi ích sử dụng
Khả năng mở rộng và tính linh hoạt.
Máy chủ cơ sở dữ liệu MySQL cung cấp nhiều tính năng linh hoạt, có khả năng xử lý các ứng dụng nhúng với dung lượng 1MB và hỗ trợ kho dữ liệu khổng lồ lên đến hàng terabytes MySQL nổi bật với tính linh hoạt về nền tảng, tương thích với tất cả các phiên bản của Windows, Unix và Linux Hơn nữa, tính chất mã nguồn mở của MySQL cho phép người dùng tùy biến theo nhu cầu, đáp ứng các yêu cầu riêng cho máy chủ cơ sở dữ liệu.
MySQL với kiến trúc storage-engine cho phép cấu hình máy chủ cơ sở dữ liệu phù hợp cho các ứng dụng chuyên biệt, từ website lớn phục vụ hàng triệu người đến hệ thống xử lý giao dịch tốc độ cao MySQL đáp ứng tốt khả năng xử lý khắt khe của mọi hệ thống nhờ vào các tiện ích tải tốc độ cao, cơ chế xử lý nâng cao và bộ nhớ caches, mang đến tất cả tính năng cần thiết cho hệ thống doanh nghiệp hiện đại.
MySQL đảm bảo sự tin cậy và có thể sử dụng ngay MySQL đưa ra nhiều tùy chọn
Mục đích sử dụng
Lưu trữ dữ liệu trang web thông qua hỗ trợ của các POJO được tạo trong dự án spring framework.
PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE
Lựa chọn trang web khảo sát
Trong đồ án này, nhóm nghiên cứu các thành phần giao diện và tính năng cần thiết cho một website bán hàng điện tử, dựa trên khảo sát từ trang web Thế Giới Di Động của công ty TNHH Thế Giới Di Động (www.thegioididong.com).
Công ty TNHH Thế Giới Di Động, được thành lập vào tháng 03/2004 bởi 5 thành viên sáng lập, hoạt động chủ yếu trong lĩnh vực mua bán và sửa chữa thiết bị di động, kỹ thuật số, cùng với thương mại điện tử Với kinh nghiệm từ thị trường di động những năm 1990 và nghiên cứu thói quen mua sắm của người Việt, thegioididong.com đã phát triển một mô hình kinh doanh độc đáo Công ty nổi bật với phong cách tư vấn bán hàng chuyên nghiệp, hỗ trợ bởi trang web www.thegioididong.com, trở thành cẩm nang về điện thoại di động và kênh thương mại điện tử hàng đầu tại Việt Nam.
Các thành phần giao diện và chức năng của trang web thegioididong.com
1.2.1 Giao diện đầu trang chủ
Trên giao diện trang chủ, thanh điều hướng nổi bật giúp người dùng dễ dàng nhận diện các loại sản phẩm mà công ty cung cấp.
Dưới thanh điều hướng, người dùng sẽ tìm thấy nội dung giới thiệu các chương trình kinh doanh và sự kiện của công ty, được trình bày qua một slider quảng cáo bên trái Bên cạnh slider, khung banner ở phía bên phải nhằm mục đích nổi bật các sản phẩm mà công ty muốn thu hút sự chú ý của người dùng.
Hình 2-1 Giao diện đầu trang chủ thegioididong
1.2.2 Giao diện danh sách sản phẩm ở trang chủ
Dưới thanh điều hướng và các slider, banner quảng cáo, công ty giới thiệu những sản phẩm nổi bật và mới nhất đang được kinh doanh.
Danh sách sản phẩm chỉ hiển thị một số lượng nhất định, không bao gồm toàn bộ sản phẩm Các sản phẩm được trình bày tách biệt dựa trên các khung giao diện khác nhau.
Các danh sách sản phẩm được phân chia theo các loại khác nhau để dễ dàng phân biệt như: “điện thoại nổi bật”, “điện thoại mới”, “laptop nổi bật”…
Hình 2-2 Hiển thị sản phẩm ở trang chủ
1.2.3 Thông tin sản phẩm được hiện thị ở trang chủ
Thông tin một sản phẩm được hiển thị ở trang chủ bao gồm các thành phần sau:
Giá sản phẩm có giảm giá.
Phần trăm giảm giá (nếu có giảm giá).
Hình 2-3 Giao diện sản phẩm ở trang chủ thegioididong
1.2.4 Giao diện trang sản phẩm
Giao diện sản phẩm chứa các thông tin chi tiết hơn của sản phẩm Bao gồm các thành phần sau:
Phần phía trên gồm: Slider hình ảnh sản phẩm, tên sản phẩm, giá tiền, đánh giá, giảm giá.
Hình 2-4 Phần trên trang chi tiết sản phẩm thegioididong
Phần nội dung phía dưới gồm: Thông tin đánh giá mô ta sản phẩm nằm bên trái và bảng cấu hình sản phẩm nằm bên phải.
Hình 2-5 Phần dưới trang chi tiết sản phẩm thegioididong
Khung bình luận và đánh giá của khách hàng về sản phẩm được đặt ở cuối trang, bao gồm đánh giá sao và nội dung bình luận bằng văn bản.
Hình 2-6 Bình luận sản phẩm trong trang chi tiết sản phẩm thegioididong
Giỏ hàng là không gian lưu trữ tạm thời cho các sản phẩm mà người dùng đã thêm vào, chờ đợi để thanh toán sau khi lựa chọn thành công Trong giỏ hàng, người dùng có thể tìm thấy thông tin chi tiết về các sản phẩm đã chọn.
Danh sách sản phẩm với mỗi sản phẩm hiển thị các thông tin như: tên sản phẩm giá tiền, giá tiền với giảm giá, số lượng.
Thông tin liên hệ gồm tên khách hàng, số điện thoại, địa chỉ…
Hình 2-7 Giao diện giỏ hàng thegioididong
1.2.6 Giao diện trang đặt hàng
Chứa thông tin các đơn hàng của chính khách hàng đã đặt trước đó Gồm các thông tin như:
Giá tiền cho mỗi sản phẩm
Số lượng cho mỗi sản phẩm
Tổng tiền cho tất cả sản phẩm
Hình 2-8 Giao diện đơn hàng của khách hàng thegioididong
Ngoài ra khách hàng có thể tự hủy đơn hàng của chính bản thân
Hình 2-9 Giao diện đơn hàng bị khách hàng hủy thegioididong
2 Đặc tả các yêu cầu cho trang web
Sau khi khảo sát các trang web hiện có, nhóm thực hiện đồ án đã tiến hành xác định và đặc tả các yêu cầu cần thiết cho trang web của dự án.
Phần quản lý trong admin
Admin quản lý toàn bộ các hoạt động của cửa hàng.
Quản lý giao dịch, thanh toán, mua hàng, xử lý đơn hàng của khách hàng.
Quản lý hóa đơn: khi khách hàng mua hàng sẽ có hóa đơn mua gồm số tên khách hàng, địa chỉ nhận, ngày nhận…
Quản lý sản phẩm trong cửa hàng, thêm, sửa, xóa sản phẩm cập nhật hình ảnh, quản lý số lượng, giảm giá, thông tin chi tiết…
Quản lý giao diện như slider ảnh, banner…
Quản lý đơn đặt hàng: cập nhật trạng thái đơn hàng, gửi mail trạng thái hiện tại của đơn hàng cho người dùng.
Tài khoản có quyền admin có tất cả các quyền của một tài khoản user bình thường nào khác
Phần quản lý người dùng
Tài khoản người dùng sẽ bị giới hạn quyền thao tác với trang web nếu tài khoản không có quyền admin.
Người dùng có thể xem tất cả các thông tin sản phẩm của cửa hàng, hình ảnh, văn bản, giá cả, thông số kỹ thuật, nhãn hiệu…
Có thể lọc sản phẩm theo nhu cầu mua hàng.
Người dùng có khả năng thêm sản phẩm vào giỏ hàng, điều chỉnh số lượng sản phẩm mong muốn và xem tổng giá trị của giỏ hàng trước khi thực hiện thanh toán.
Xem trạng thái đơn hàng đã đặt trong phần danh sách đơn hàng, có thể hủy đơn hàng trước khi nhận hàng.
Yêu cầu giao diện sử dụng
Website không nên quá phức tạp
Dung lượng không quá lớn
Thanh menu, điều hướng đơn giản dễ sử dụng
Sản phẩm đầy đủ thông tin, hình ảnh.
Hiển thị thông báo ra giao diện khi có lỗi xảy ra.
Giao diện tương thích với các trình duyệt phổ biến.
Font chữ đơn giản dễ nhìn, mùa sắc trang web hài hòa.
Yêu cầu phi chức năng
Giao diện hệ thống phải dễ sử dụng, trực quan, thân thiện với người dùng.
Tốc độ xử lý nhanh chóng, chính xác
Tính bảo mật và độ an toàn cao.
Trang web tương thích với các trình duyệt khác nhau.
3 Các chức năng của trang web
Chức năng quản lý hệ thống
Quản lý đơn hàng các giao dịch.
Quản lý danh sách sản phẩm.
Quản lý cập nhật sản phẩm.
Quản lý quyền người dùng, hiển thị giao diện cho phù hợp.
Quản lý slider và banner quảng cáo
Gửi mail khi đặt hàng, đăng ký.
Thay đổi mật khẩu tài khoản qua gmail.
Chức năng giới thiệu sản phẩm
Quảng cáo sản phẩm qua slider và banner
Hiện thị danh sách sản phẩm, lọc sản phẩm theo tìm kiếm
Hiển thị thông tin sản phẩm (nhà cung cấp, giá, giảm giá, thông số sản phẩm…).
Biểu đồ Use – case tổng quát
Hình 2-10 Biểu đồ use - case tổng quát
Use – case đăng nhập
Hình 2-11 Biểu đồ Use - case đăng nhập
Tác nhân: người dùng chung.
Mô tả: Use – case cho người dùng đăng nhập vào hệ thống. Điều kiện trước: Người dùng chưa đăng nhập trước đó.
Chọn chức năng đăng nhập
Nhập thông tin đăng nhập vào form
Người dùng đăng nhập vào trang web
Hiện thị thêm thông tin dựa theo quyền
- Thông tin đăng nhập sai
Hiển thị thông báo lỗi thông tin đăng nhập
Yêu cầu nhập lại thông tin để tiếp tục đăng nhập
Use – case quản lý sản phẩm
Mô tả: Use – case cho admin quản lý danh sách, thông tin sản phẩm. Điều kiện trước: Người dùng đã đăng nhập với tài khoản Admin.
Admin tìm kiếm sản phẩm trên shop
Admin nhấn vào các nút chỉnh sửa, xóa trên giao diện sản phẩm
Thay đổi thông tin sản phẩm
Use – case quản lý giỏ hàng
Hình 2-12 Use - case quản lý giỏ hàng
Mô tả: Use – case cho phép người dùng quản lý danh sách sản phẩm trong giỏ hàng. Điều kiện trước: Người dùng đã đăng nhập vào trang web.
User thêm sản phẩm vào giỏ hàng
Use – case thanh toán
Hình 2-13 Use - case thanh toán
Để thực hiện thanh toán cho các sản phẩm đã chọn trong giỏ hàng, người dùng cần đảm bảo đã đăng nhập vào trang web Sau khi đăng nhập, họ có thể tiến hành thanh toán cho các sản phẩm có trong giỏ hàng một cách dễ dàng và nhanh chóng.
Nhấn vào nút thanh toán trong giao diện giỏ hàng
Lựa chọn phương thức thanh toán
Use – case quản lý đơn hàng
Hình 2-14 Use - case quản lý đơn hàng
Mô tả: Use – case cho admin quản lý danh sách, trạng thái của các đơn hàng. Điều kiện trước: Người dùng đã đăng nhập với tài khoản Admin.
Admin vào trang quản lý đơn hàng được hiển thị trên giao diện
Cập nhật trạng thái các đơn hàng
Gửi mail trạng thái đơn hàng
Use – case quản lý quảng cáo trên giao diện
Để quản lý danh sách hình ảnh quảng cáo trên slider và banner đầu trang chủ, admin cần đảm bảo rằng người dùng đã đăng nhập bằng tài khoản Admin.
Admin vào trang quản lý Header
Thêm, sửa, xóa, cập nhật các hình ảnh vào thông tin
THAO TÁC VÀ LƯU TRỮ DỮ LIỆU
Giao diện lập trình ứng dụng JPA
JPA (Java Persistence API) là một giao diện lập trình ứng dụng trong Java, cung cấp hướng dẫn về cách quản lý các mối quan hệ dữ liệu trong các ứng dụng sử dụng nền tảng Java.
JPA là cầu nối giữa đối tượng Java và cơ sở dữ liệu quan hệ, bao gồm các đặc tả mà không có phương thức thực thi Để hoạt động, JPA cần một JPA implementation thực hiện các đặc tả này Các công cụ ORM như Hibernate và TopLink cung cấp các trình triển khai cho JPA.
JPA bao gồm ba thành phần chính là: Entity, EntityManager, và EntityManagerFactory Ngoài ra còn có, EntityTransaction, Persistence, Query.
An entity represents a corresponding table in a database and is typically a simple POJO class that includes only getter and setter methods.
Dưới đây là một số đặc điểm của một Entity:
Entity có thể tương tác với cơ sở dữ liệu quan hệ.
Entity được xác định thông qua một định danh (id), tương đương với khóa chính trong table của cơ sở dữ liệu quan hệ.
Entity hỗ trợ kế thừa giống như những class Java khác.
EntityManager là một interface cung cấp các API cho việc tương tác với các Entity. Một số chức năng cơ bản của EntityManager như:
Persist: phương thức này dùng để lưu một thực thể mới tạo vào cơ sở dữ liệu.
Merge: dùng để cập nhật trạng thái của entity vào cơ sở dữ liệu.
Remove: xóa một instance của entity.
EntityManagerFactory được dùng để tạo ra một instance của EntityManager.
Một Persistence định nghĩa một tập hợp các Entity class được quản lý bởi 1 instacne của EntityManager trong ứng dụng.
Persistence (javax.persistence.Persistence) class bao gồm các phương thức static để lấy instance của EntityManagerFactory.
Một Transaction là một tập hợp các thao tác trong đó tất cả các thao tác phải được thực hiện thành công hoặc tất cả thất bại.
Một database transaction bao gồm một tập hợp các câu lệnh SQL được committed hoặc rolled back trong một unit.
EntityTransaction có mối quan hệ một-một với EntityManager, với mọi thao tác khởi đầu qua EntityManager đều được thực hiện trong một Transaction Đối tượng EntityManager đóng vai trò quan trọng trong việc tạo ra EntityTransaction.
Query Đây là một interface, được mỗi nhà cung cấp JPA implement để có được các đối tượng quan hệ đáp ứng các tiêu chí (criteria) truy vấn.
ORM tools – Hibernate
ORM viết tắt của object-relational-mapping, công nghệ cho phép chuyển đổi từ các object trong ngôn ngữ hướng đối tượng sang database quan hệ và ngược lại.
Hình 3-16 ORM Layer trong JPA
Hibernate là một trong những công cụ ORM phổ biến nhất cho các ứng dụng Java Kể từ phiên bản 3.2, Hibernate đã cung cấp một JPA Implement, được sử dụng rộng rãi trong cộng đồng lập trình viên.
DAO Design Pattern
Mẫu thiết kế DAO (Data Access Object) là một giải pháp phổ biến trong việc truy xuất cơ sở dữ liệu, nhằm cung cấp các phương thức truy cập dữ liệu ở cấp độ thấp Điều này cho phép các tầng dịch vụ hoặc tầng nghiệp vụ (cấp độ cao) sử dụng DAO để lấy dữ liệu mà không cần quan tâm đến cách thức thực hiện của các phương thức cấp thấp Qua đó, nguyên tắc Tách logic (Separation of Logic) được áp dụng, giúp tăng cường tính tổ chức và bảo trì của mã nguồn.
Các service hay business layer sẽ không giao tiếp trực tiếp với DB để lấy dữ liệu.
Các service sẽ giao tiếp với lớp trung gian DAO, sau đó lớp DAO sẽ giao tiếp với
DB để truy vấn dữ liệu.
Mẫu DAO (Data Access Object) được xây dựng dựa trên các nguyên tắc thiết kế như abstraction và encapsulation, giúp bảo vệ ứng dụng khỏi những thay đổi trong lớp lưu trữ Điều này có nghĩa là nếu có sự thay đổi trong cơ sở dữ liệu, chẳng hạn như chuyển từ Oracle sang MySQL hoặc thay đổi công nghệ lưu trữ từ file sang database, phần còn lại của ứng dụng vẫn hoạt động bình thường mà không bị ảnh hưởng.
Các thành phần cấu thành:
BusinessObject: Là phần sẽ sử dụng DAO để lấy dữ liệu
DAO: Là một interface chứa các phương thức trừu tượng để cho có thể truy cập vào DataSource
DAOImp: thực hiện cài đặt chi tiết các phương thức trừu tượng trong DAO, lớp này sẽ thao tác trực tiếp với DataSource.
DataSource : là nơi chứa dữ liệu, nó có thể là database, xml, json, text file, webservice, …
TransferObject: Là một Pojo (Plain old Java object) Object, được sử dụng để lưu dữ liệu.
Hình 3-17 Data Access Object Design Pattern
Spring Data JPA
Spring Data JPA là một lớp được xây dựng trên nền tảng JPA, tận dụng tất cả các chức năng của JPA như ánh xạ thực thể, vòng đời thực thể và truy vấn JPA Nó cung cấp các tính năng tiện lợi như kho lưu trữ không cần mã và khả năng khởi tạo truy vấn thông qua tên hàm, giúp đơn giản hóa quá trình phát triển ứng dụng.
Spring Data JPA cung một tập hợp các repository interface, chỉ cần extend để có được sự cung cấp mặc định của các hàm CRUD (thêm, tạo, sửa, xóa…).
Công dụng của một số hàm mặc định:
Thêm, xóa, sửa một hoặc nhiều.
Tìm kiếm theo khóa chính
Kiểm tra có tồn tại dựa vào khóa chính được truyền vào.
Giảm thiểu tối đa boilerplate code
Một trong những tính năng hữu ích của Spring Data JPA là khả năng tạo truy vấn cơ sở dữ liệu dựa trên tên hàm Khi cần thực hiện một truy vấn đơn giản, người dùng chỉ cần định nghĩa tên hàm trong repository với tiền tố "findBy" theo sau là tên các thuộc tính tương ứng, kết hợp với các phép AND và OR Spring Data sẽ tự động sinh ra câu truy vấn tương ứng, giúp tiết kiệm thời gian và công sức cho lập trình viên.
When creating a method in a Repository Interface, such as findByTitle(String title), Spring Data JPA automatically generates a query to search for entities based on the title, using the input parameter value for the query.
Kiến trúc tổng quát
Hình 3-18 Kiến trúc Controller-Service - Repository
Controller: là tầng giao tiếp với bên ngoài và handler các request từ bên ngoài tới hệ thống.
Service Layer: Thực hiện các nghiệp vụ và xử lý logic
Tầng Repository đảm nhiệm việc giao tiếp với cơ sở dữ liệu và các thiết bị lưu trữ, xử lý truy vấn và cung cấp các kiểu dữ liệu theo yêu cầu của tầng Service Tầng này được hỗ trợ bởi Spring Data JPA.
2 Tạo Entity Hibernate định hình dữ liệu lưu trữ.
Lưu trữ thông tin đăng nhập tài khoản người dùng
Các thông tin được lưu trữ bao gồm của tài khoản người dùng như Email và
Các thuộc tính của người dùng bao gồm: "id" (kiểu dữ liệu Long) là mã định danh duy nhất cho mỗi người dùng, "email" (kiểu dữ liệu String) là địa chỉ email không trùng lặp của người dùng, "password" (kiểu dữ liệu String) là mật khẩu dùng để đăng nhập, và "provider" (kiểu dữ liệu AuthProvider, dạng enum) chỉ định phương thức đăng nhập như local, facebook, hoặc google Cuối cùng, "provider_id" (kiểu dữ liệu Long) là mã định danh nhận được khi người dùng đăng nhập qua các nhà cung cấp dịch vụ.
Facebook và Google user_id User Quan hệ @OneToOne với User roles Set Quan hệ @ManyToMany với bảng
Role, tạo bảng phụ user_roles
2.1.2 Table user_credentials được tạo từ Hibernate UserCredentital Entity user_credentials
Khóa, liên kết id Bigint Khóa chính email Varchar password Varchar provider Varchar provider_id Varchar user_id Bigint Trường “id” bảng “User”
Lưu trữ thông tin liên quan User
Lưu trữ thông tin tài khoản người dùng bao gồm tên, ngày khởi tạo và các kiểu dữ liệu được ánh xạ bởi các bảng khác.
The article outlines the attributes of a User entity, including a unique identifier (id) of type Long, a one-to-one relationship with UserCredential (userCredential), the account creation date (createdDate) represented as Date, the user's name (name) as a String, and user contact information (userInfo) such as phone number and address Additionally, it describes a one-to-many relationship with products, which are mapped by the "brand" attribute in the Product entity.
Danh sách các sản phẩm đã thêm vào (dùng khi admin thêm sản phẩm). reviews Set
Quan hệ @OneToMany với Review
Danh sách các bình luận sản phẩm người dùng đã bình luận orders Set
Quan hệ @OneToMany với Order
Danh sách các đơn hàng của người dùng avatarUrl String Đường dẫn ảnh đại diện của người dùng
2.2.2 Table User được tạo từ Hibernate User Entity users Tên thuộc tính
Khóa, liên kết id Bigint Khóa chính avatarUrl Varchar created_date Date name Varchar user_info_id Bigint
Lưu trữ thông tin liên lạc của người dùng
Lưu trữ các thông tin liên lạc như: địa chỉ, quốc gia, tỉnh thành, số điện thoại…
Thuộc tính của người dùng bao gồm: id (kiểu Long) là mã định danh duy nhất cho mỗi người dùng, phone (kiểu String) là số điện thoại, country (kiểu String) thể hiện quốc gia, province (kiểu String) chỉ tỉnh hoặc thành phố, district (kiểu String) là quận hoặc huyện, và detail (kiểu String) mô tả địa chỉ nhà hoặc địa chỉ liên hệ chi tiết Ngoài ra, thuộc tính user (kiểu User) có quan hệ @OneToOne với thực thể User.
Xác định thông tin liên lạc của User nào
Lưu trữ phân loại quyền hạn
Tên thuộc tính Kiểu dữ liệu Mô tả id Integer Id duy nhất cho mỗi User name ERole (enum) Danh sách quyền người dùng gồm: admin, user
2.4.2 Table Role được tạo từ Hibernate Role Entity roles Tên thuộc tính
Khóa, liên kết id Int Khóa chính name Varchar
Bảng phụ được Hibernate tạo khi sử dụng mối quan hệ ràng buộc @ManyToMany giữa User Entity và Role Entity. user_roles Tên thuộc tính
Khóa, liên kết user_id bigint Khóa chính role_id int Khóa chính
Lưu trữ các thương hiệu hàng hóa
Lưu trữ danh sách thương hiệu hàng hóa đang kinh doanh.
The entity attributes include an 'id' of type Long, which serves as a unique identifier for each user, and a 'name' of type String, representing the brand name Additionally, there is a 'products' attribute, defined as a Set, establishing a One-to-Many relationship mapped by the 'brand' attribute in the Product table.
Danh sách các sản phẩm có thương hiệu là thương hiệu hiện tại.
2.5.2 Table brand được tạo từ Hibernate Brand Entiy brands Tên thuộc tính
Khóa, liên kết id Bigint Khóa chính name Varchar
Lưu trữ các phân loại sản phẩm
Lưu trữ danh sách các loại sản phẩm đang kinh doanh: điện thoại, laptop.
The article outlines the attributes of a user entity, including a unique identifier (id) of type Long, the brand name (name) as a String, and a one-to-many relationship with products represented as a Set This relationship is mapped by the "category" attribute in the Product table.
Danh sách các sản phẩm có phân loại là phân loại hiện tại.
2.6.2 Table Category được tạo từ Hibernate Category Entity categories Tên thuộc tính
Khóa, liên kết id Bigint Khóa chính name Varchar
Lưu trữ thông tin sản phẩm
Các thông tin được lưu trữ bao gồm: người tạo, phân loại, brand, mô tả…
Tên thuộc tính Kiểu dữ liệu Mô tả id Long Id duy nhất cho mỗi sản phẩm. user User Quan hệ @ManyToOne với User.
Tài khoản lưu sản phẩm vào Csdl. category Category Quan hệ @ManyToOne với Category.
Phân loại sản phẩm brand Brand Quan hệ @ManyToOne với Brand
The product brand is defined by its creation date, name, description, price, quantity available, and discount percentage Additionally, it includes detailed specifications and a collection of product images.
Quan hệ @OneToMany, mappedBy với thuộc tính “product” trong bảng
Danh sách các hình ảnh của sản phẩm hiện tại. reviews Set Quan hệ @OneToMany, mappedBy với thuộc tính “product” trong bảng Review.
Danh sách các đánh giá của sản phẩm hiện tại.
2.7.2 Bảng products được tạo từ Hibernate Product Entity products Tên thuộc tính Kiểu dữ liệu
Khóa, liên kết id Bigint Khóa chính created_date datetime description String discount int name Varchar price Int quantity Int
Brand_id Bigint references Brand(id)
Category_id Bigint references Category(id)
User_id Bigint references User(id)
Lưu trữ thông tin về thông số sản phẩm
Lưu trữ các thông tin thống số, cấu hình của thiết bị điện tử mà cửa hàng kinh doanh như: thông số Pin, màn hình, cổng kết nối…
Tên thuộc tính Kiểu dữ liệu Mô tả id Long Id duy nhất cho mỗi mục thông số. product Product Quan hệ @OneToOne mappedBy với “details” trong Product Entity
When selecting a product, it's essential to identify key details such as the CPU, RAM, hard drive, display size, graphic card, operating system, design, front camera, rear camera, chip name, internal memory, SIM card compatibility, and battery capacity These specifications play a crucial role in determining the overall performance and usability of the device.
2.8.2 Bảng product_details được tạo từ Hibernate ProductDetails Entity product_details Tên thuộc tính Kiểu dữ liệu
Khóa, liên kết id Bigint Khóa chính cpu Varchar ram Varchar hardDrive Varchar display Varchar size Varchar graphicCard Varchar operatingSyste m
Varchar design Varchar fontCamera Varchar rearCamera Varchar chipName Varchar internalMemory Varchar sim Varchar batteryCapacity Varchar
Lưu trữ hình ảnh sản phẩm
Lưu trữ các thông tin hình ảnh của sản phẩm như: id, loại ảnh…
Tên thuộc tính Kiểu dữ liệu Mô tả id Long Id duy nhất cho mỗi ảnh type EProductImageTypeDisplay
Để đảm bảo tính nhất quán và tối ưu hóa SEO, loại ảnh cần phải thuộc một trong các loại: Slider hoặc Official name String Tên (tiêu đề) của ảnh phải phản ánh đúng danh sách các sản phẩm thuộc phân loại hiện tại Quan hệ giữa ảnh và sản phẩm được xác định thông qua @ManyToOne, giúp xác định sản phẩm cụ thể mà ảnh đang đại diện.
2.9.2 Bảng product_images được tạo từ Hibernate ProductImage Entity. product_images Tên thuộc tính
Khóa, liên kết id Bigint Khóa chính name Varchar type Varchar product_id Bigint references Product(id)
Lưu trữ các đánh giá sản phẩm
Lưu trữ các đánh giá của người dùng dành cho sản phẩm Nội dung đánh giá bao gồm văn bản bình luận và số sao đánh giá sản phẩm.
Tên thuộc tính Kiểu dữ liệu Mô tả id int Id duy nhất cho mỗi ảnh product Product Quan hệ @ManyToOne với Product
Xác định sản phẩm được bình luận user User Quan hệ @ManyToOne User
Xác định người đánh giá rating float Số sao đánh giá comment String Nội dung đánh giá time Date Thời điểm đánh giá
2.10.2 Bảng reviews được tạo từ Hibernate Review Entity reviews Tên thuộc tính
Khóa, liên kết id int Khóa chính comment varchar rating float time datetime product_id bigint references Product(id) user_id bigint references User(id)
Lưu trữ thông tin giỏ hàng
Lưu trữ thông tin sản phẩm trong giỏ hàng của từng người dùng là rất quan trọng Mỗi sản phẩm sẽ được ghi nhận thành một hàng trong bảng "carts" của cơ sở dữ liệu Các đơn hàng sẽ được phân biệt dựa trên cột "user" trong bảng, giúp quản lý và theo dõi đơn hàng hiệu quả hơn.
Thuộc tính của sản phẩm bao gồm id (kiểu Long) để xác định duy nhất sản phẩm, user (kiểu User) để xác định người dùng, và enable (kiểu Boolean) để xác định xem sản phẩm trong giỏ hàng có được thêm vào danh sách thanh toán hay không Ngoài ra, sản phẩm còn có quan hệ @OneToOne với Product.
Xác định sản phẩm trong giỏ hàng quantity int Số lượng cho từng sản phẩm trong giỏ hàng
2.11.2 Bảng carts được tạo từ Hibernate Cart Entity carts Tên thuộc tính
Khóa, liên kết id Bigint Khóa chính enable bit quantity int product_id Bigint references Product(id) user_id Bigint references User(id)
Lưu trữ thông tin đơn hàng
Lưu trữ các thông tin cơ bản của đơn hàng như: ngày tạo, ngày cập nhật, trạng thái đơn hàng…
Tên thuộc tính Kiểu dữ liệu Mô tả id String Id duy nhất, sử dụng uuid user User Quan hệ @ManyToOne với User.
Xác định User của đơn hàng hiện tại orderItems Set Danh sách các sản phẩm trong đơn hàng status EOrderStatus
Các trạng thái của đơn hàng gồm: Open, Confirmed, Shipping, Collected,
Returned, Canceled. settled Boolean Đơn hàng đã được thanh toán hay chưa paymentMethod EPaymentMethod
Các loại hình thanh toán bao gồm: COD và Stripe Đối với thanh toán qua Stripe, cần lưu ý đến id của phiên thanh toán (stripeChargeId) và thời điểm đơn hàng được tạo (createdDate) cũng như thời điểm đơn hàng được cập nhật (updatedDate).
2.12.2 Bảng orders được tạo từ Hibernate Order Entity orders Tên thuộc tính Kiểu dữ liệu
The article discusses a database schema involving a primary key labeled 'id' as a varchar, along with various fields such as 'created_date' as a datetime, 'payment_method' as a varchar, 'settled' as a bit, 'status' as a varchar, 'stripe_charge_id' as a varchar, 'updated_date' as a datetime, and 'user_id' as a bigint that references the 'User ' table's 'id'.
Lưu trữ thông tin các sản phẩm trong đơn hàng
Lưu một vài thông tin sản phẩm cho mỗi mục sản phẩm trong đơn hàng
Để đảm bảo tính ổn định của thông tin đơn hàng, không nên liên kết trực tiếp với bảng dữ liệu sản phẩm, nhằm tránh việc thông tin đơn hàng bị thay đổi khi có sự điều chỉnh dữ liệu trên bảng sản phẩm.
Đơn hàng sẽ luôn giữ nguyên thông tin sản phẩm ban đầu
Tên thuộc tính Kiểu dữ liệu Mô tả id Long Id duy nhất cho mỗi order item order Order Quan hệ @ManyToOne với Order.
Determine the order of the current OrderItem using the productId as a long identifier for the product Include the productName as a string for the product title, the price as an integer representing the product cost, and the discount as an integer indicating the percentage off Additionally, specify the quantity as an integer for the number of items, and calculate the total as a long value that reflects the total amount after applying the discount.
2.13.2 Bảng order_items được tạo từ Hibernate OrderItem Entity orders Tên thuộc tính
Khóa, liên kết id bigint Khóa chính product_id bigint product_name varchar price int quantity int discount int order_id varchar references Order(id)
Lưu trữ hình ảnh quảng cáo đầu trang web
Hình ảnh quảng cáo sản phẩm đầu trang web gồm Slider và Banner.
Mỗi hình ảnh được xác định bằng một id duy nhất kiểu dữ liệu int Tiêu đề của hình ảnh được lưu trữ dưới dạng chuỗi (String) với thuộc tính title Tên hình ảnh trong thư mục được quản lý qua thuộc tính fileUploadName, cũng là kiểu dữ liệu String.
Upload linkTo String Đường dẫn hình ảnh sẽ link đến type EHeaderIamgeType
Loại ảnh Gồm: Banner, Slider enable Boolean Có hiển thị hình ảnh hay không createDate Date Thời điểm khởi tạo modifyDate Date Thời điểm thay đổi, cập nhật
2.14.2 Bảng header_images được tạo từ Hibernate HeaderImage Entity header_iamges Tên thuộc tính Kiểu dữ liệu
Khóa, liên kết id int Khóa chính file_upload_nam e varchar link_to varchar title varchar type varchar create_date datetime modify_date datetimg
ER Diagram quan hệ giữa các bảng trong csdl
Bảng 3-27 ER Diagram của Database
3 Tạo các DAO dựa trên Sping Data JPA
Create interfaces that extend JpaRepository in Spring Data JPA to establish a repository and leverage the features offered by Spring Data JPA.
The interfaces annotated with @Repository inform the Spring application that they function as a Repository Additionally, they can define extra helper methods beyond those provided by Spring Data JPA by default.
User Repository
User Credential Repository
User Contact Repository
Role Repository
Product Repository
ProductCriteria Repository
Đây là repository được thiết lập để trả về một đối tượng Page, một thành phần được Spring Data JPA định nghĩa nhằm hỗ trợ phân trang sản phẩm Repository này cho phép tìm kiếm sản phẩm dựa trên nhiều tiêu chí khác nhau, bao gồm giá sản phẩm, cách sắp xếp và tên sản phẩm.
Product Details Repository
Product Image Repository
Review Repository
Brand Repository
Category Repository
Cart Repository
Order Repository
OrderItem Repository
HeaderImage Repository
4 Kết nối cơ sở dữ liệu với Spring Boot
Spring Boot simplifies database connection configuration To enable Spring to connect to a database, you only need to set the necessary parameters in the application.properties file.
Một số loại cấu hình quan trọng:
spring.datasource.driver-class-name
Xây dựng RESTful Web Service
Một số khái niệm
Spring Security là một dự án quan trọng trong hệ sinh thái Spring, cung cấp dịch vụ bảo mật toàn diện cho các ứng dụng doanh nghiệp dựa trên nền tảng Java EE Dự án này bao gồm hai cơ chế bảo mật cơ bản.
Authentication is the process of establishing a principal, which can be understood as an individual, device, or system capable of performing actions within your application.
Phân quyền hay kiểm soát truy cập (Authorization) là quá trình xác định liệu một người dùng (principal) có được phép thực hiện một hành động trong ứng dụng hay không Trước khi tiến hành phân quyền, người dùng cần phải trải qua quá trình xác thực (Authentication) Hai cơ chế này rất phổ biến trong các dịch vụ bảo mật, không chỉ riêng trong Spring Security.
1.1.1.2 Các thành phần cốt lỗi
SecurityContext là giao diện quan trọng trong Spring Security, giữ vai trò lưu trữ tất cả thông tin liên quan đến bảo mật trong ứng dụng Khi Spring Security được kích hoạt, SecurityContext cũng sẽ tự động được khởi động theo.
Không thể truy cập trực tiếp vào SecurityContext; thay vào đó, lớp SecurityContextHolder được sử dụng để lưu trữ security context hiện tại của ứng dụng Lớp này bao gồm chi tiết về principal đang tương tác với ứng dụng, và Spring Security sẽ sử dụng một đối tượng Authentication để biểu diễn thông tin này.
User Details is a core interface of Spring Security that represents a principal in a more detailed and extended manner It includes several methods essential for user authentication and authorization processes.
getAuthorities(): trả về danh sách các quyền của người dùng
getPassword(): trả về password đã dùng trong qúa trình xác thực
getUsername(): trả về username đã dùng trong qúa trình xác thực
isAccountNonExpired(): trả về true nếu tài khoản của người dùng chưa hết hạn
isAccountNonLocked(): trả về true nếu người dùng chưa bị khóa
isCredentialsNonExpired(): trả về true nếu chứng thực (mật khẩu) của người dùng chưa hết hạn
isEnabled(): trả về true nếu người dùng đã được kích hoạt
User DetailsService là một interface với phương thức duy nhất là loadUser ByUsername(String username), có nhiệm vụ trả về một UserDetails dựa trên tên người dùng (username) được cung cấp Phương thức này sẽ tìm kiếm trong cơ sở dữ liệu để xác định bản ghi phù hợp với username, và có thể thay thế username bằng các trường khác như email.
Một GrantedAuthority là một quyền được ban cho principal Các quyền đều có tiền tố là ROLE_, ví dụ như ROLE_ADMIN, ROLE_MEMBER
WebSecurityConfigurerAdapter là một interface tiện ích của Spring Security giúp chúng ta cài đặt các thông tin dễ dàng hơn
WebSecurityConfig, kế thừa từ WebSecurityConfigurerAdapter, bao gồm toàn bộ cấu hình cần thiết cho Spring Security trên Server trong đồ án, như thiết lập Cors, yêu cầu quyền hạn cho từng Endpoint, và xử lý lỗi đăng nhập.
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 –
Chuỗi JWT bao gồm ba phần chính: header, payload và signature, được ngăn cách bởi dấu “.” Tất cả thông tin trong chuỗi này được định dạng dưới dạng JSON, giúp việc truyền tải và xác thực dữ liệu trở nên dễ dàng và an toàn hơn.
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
Phần payload sẽ chứa các thông tin mình muốn đặt trong chuỗi Token như username, userId…
Phần signature sẽ được tạo ra bằng cách mã hóa phần header , payload kèm theo một chuỗi secret (khóa bí mật).
1.1.1.2 Khởi tạo JWT ở Server trang web.
TokenProvider: class được khởi tạo với mục đích tạo, xác nhận các JWT token phục vụ cho việc bảo mật và quản lý quyền hạn User.
appPropetites connects to the application.properties file to retrieve environment variables essential for generating JWT tokens, including app.auth.tokenSecret, which represents the secret in the signature, and app.auth.tokenExpirationMsec, which defines the token's expiration duration.
createToken: Tạo Jwt gồm các phần thông tin. o Subject: UserCredential id có được từ Authentication (Authentication là một
Khi một người dùng đăng nhập thành công, hệ thống sẽ tạo ra một đối tượng chứa thông tin quan trọng Đối tượng này bao gồm thời điểm được tạo (IssuedAt), thời hạn sử dụng của token (Expiration) và thuật toán mã hóa cùng với bí mật chữ ký (Sign).
getUserIdFromToken: lấy UserCredential id từ JWT để có thể lấy ra các dữ liệu khác về User từ database.
validateJwtToken: kiểm tra một JWT token có hợp lệ.
Spring Framework cung cấp một API để gửi email, bao gồm một vài interface và một vài lớp hỗ trợ.
Utilizing Thymeleaf templates for email creation is an effective approach in Spring Mail By integrating Thymeleaf, developers can easily generate dynamic content for their emails, enhancing the overall communication experience.
Các file cấu hình bao gồm:
application.properties: dựa trên Spring Boot cấu hình các thuộc tính khi gửi mail thông qua Spring Mail như: protocol, host, port, username, password…
ThymeleafTemplateConfig: cấu hình thư mục lưu trữ các templates, định dạng các thuộc tính của các template.
The EmailSenderService is a class within the Service Layer that features a sendMail function, which facilitates email sending based on two parameters: a Mail Object and a template name The Mail Object includes properties such as from, to, subject, attachments, and props, while the template name refers to the name of the template located in the directory containing the list of Thymeleaf templates.
* Email sẽ được gửi từ một tài khoản mặc định được cấu hình trước trong file application.property thông qua tham số spring.mail.username.
Tạo tài khoản người dùng mới
Hình 4-36 Tạo tài khoản mới
SignupRequest (email, name, password, confirmPassword):
confirmPassword: mật khẩu xác nhận
Hình 4-37 Nhập liệu SignupRequest phía Client
Quá trình Server xử lý:
B1: Kiểm tra email đã tồn tại Nếu tồn tại => Xử lý ngoại lệ.
B2: Tạo một UserCredential mới với các thông tin mặc định.
Trường hợp thành công: message là “Đăng ký thành công”.
Hình 4-38 Thông báo đăng ký thành công
* Ở phía Client giao diện sẽ tự động chuyển sang trang đăng nhập.
Trường hợp trùng lặp email đăng ký: Xử lý ngoại lệ trả về một MessageResponse với message là “Email ‘email đăng ký’ đã được sử dụng”.
Hình 4-39 Thông báo lỗi đăng ký với Email trùng lặp
Sau khi hoàn tất việc tạo tài khoản, hệ thống sẽ gửi một email xác nhận đến địa chỉ email đã sử dụng Người dùng cần xác nhận email này để có thể truy cập và sử dụng tài khoản mới tạo.
Xác nhận Email cho tài khoản đã tạo
Tài khoản Local cần xác nhận email đăng ký trước khi có thể đăng nhập vào trang web, trong khi tài khoản Social không yêu cầu xác nhận email.
Khi người dùng tạo tài khoản trên trang web, một email xác nhận sẽ được gửi lần đầu tiên Nếu người dùng đăng nhập bằng tài khoản chưa được xác nhận, hệ thống sẽ gợi ý "gửi lại email xác nhận" để hoàn tất quá trình xác thực.
Hình 4-40 Gợi ý gửi lại email xác nhận
Quá trình xử lý việc gửi mail xác nhận phía Server.
Hình 4-41 Quá trình xử lý gửi lại email xác nhận
Thông báo cho người dùng việc gửi mail đã thành công.
Hình 4-42 Thông báo gửi Mail thành công
Người dùng truy cập vào email sẽ tìm thấy được email xác nhận được gửi với các thông tin sau.
Hình 4-43 Email với đường dẫn xác nhận được gửi
Khi người dùng nhấn vào đường dẫn sẽ được điều hướng sang một trang phía
Client Trang phía Client này sẽ tự động gửi yêu cầu xác nhận với Jwt token đến Server để xử lý.
Hình 4-44 Xử lý xác nhận Email dựa trên Token nhận được
Hiển thị thông báo khi xác nhận email thành công.
Hình 4-45 Thông báo khi xác nhận Email thành công
Khi Token hết hạn, người dùng sẽ nhận được thông báo kèm theo nút “gửi lại email xác nhận” để dễ dàng gửi lại email xác nhận khác.
Hiển thị thông báo trong trường hợp Token đã hết hạn sử dụng
Hình 4-46 Thông báo khi Token Verify Email hết hạn
Thông báo khi người dùng tiếp tục gửi token xác nhận Email khi tài khoản đã có Email được xác nhận
Hình 4-47 Hiển thị thông báo Email đã được xác nhận
Đăng nhập với tài khoản
Hình 4-48 Quá trình đăng nhập với Spring Security
Sau khi đăng nhập thành công giao diện trang web sẽ chuyển về lại trang chủ
Hình 4-49 Đăng nhập thành công
* Trường hợp kết quả xác minh là sai (email hoặc password không đúng) thì Spring security sẽ xử lý lỗi thông qua authenticationEntryPoint là
RestAuthenticationEntryPoint với thông báo “Email hoặc mật khẩu không chính xác”.
Hình 4-50 Đăng nhập với thông tin tài khoản sai
Đăng nhập thông qua tài khoản FaceBook và Google
Spring Framework bao gồm một module mang tên Spring OAuth2, cho phép lập trình viên tương tác với các API của các nền tảng như Facebook và Google, nhằm thu thập thông tin cần thiết để hỗ trợ phát triển ứng dụng.
1.5.1 Cấu hình OAuth2 dựa trên Spring boot
Yêu cầu các tham số cấu hình sau trong file application.properties:
spring.security.oauth2.client.registration.{Provider}.client-id
spring.security.oauth2.client.registration.{Provider}.client-secret
spring.security.oauth2.client.registration.{Provider}.redirect-uri
spring.security.oauth2.client.registration.{Provider}.scope
Trong đó, Provider là facebook và google Các giá trị tham số phải được lấy từ các ứng dụng/Project của bản thân được tạo trên google, facebook.
Hình 4-51 Tạo ứng dụng trên Google
Hình 4-52 Tạo ứng dụng trên Facebook
1.5.2 Thiết lập Spring Security hỗ trợ Social Login
Thêm các thuộc tính cấu hình vào class WebSecurityConfig như:
Xây dựng các lớp hỗ trợ đăng nhập và lưu trữ:
Lưu các thông tin của Oauth2 Authorization Request (clientId, redirectUrl, scope…) tạm thời trên Cookie.
Một Class thuộc Service Layer, được kế thừa từ class DefaultOAuth2UserService của Spring Security
Có một phương thức mặc định là loadUser với tham số là một
OAuth2UserRequest chứa các thông tin của User, phương thức trả về một
Authentication cho Spring Security và được gọi tự động sau khi quá trình Authorization với các Social Provider thực hiện thành công
Hàm loadUser sẽ được ghi đè lại để thực hiện các công việc sau.
B1: kiểm tra email có được từ OAuth2UserRequest có tồn tại trong Csdl
Nếu có và trùng lặp Provider thì trả về lỗi cho Client
B2: Tạo tài khoản mới và lưu thông tin vào Csdl.
B3: Trả về một UserPrincipal dựa trên các thông tin có được.
Một class kế thừa từ SimpleUrlAuthenticationSuccessHandler của Spring
Security Công việc chính là khởi tạo Token và đính kèm vào Redirect Uri cho Client.
1.5.3 Tổng quá quá trình Social Login
Hình 4-53 Quá trình Social Login
Gửi yêu cầu với Jwt access token
Upon successful login, the server sends an access token to the client The client then includes this access token in the Authorization header for every request made to the server.
Xác minh Token trong request từ phía Client để xác định quyền truy cập được thực hiện ở Server dựa trên các bước:
Hình 4-54 Server xử lý Request với token
Phân quyền người dùng
Sau khi đăng nhập thành công người dùng được phân quyền dựa trên các quyền có được từ UserDetails thông qua phương thức getAuthorities().
Spring Security sẽ dựa vào cấu hình authorizeRequests trong WebSecurityConfig để xác định các quyền yêu cầu để sử dụng các EndPoint của Webservice.
Ngoài cấu hình trong WebSecurityConfig, có thể sử dụng trực tiếp Anotation
@PreAuthorize với quyền cụ thể trên các phương thức thuộc lớp Controller để xác định quyền yêu cầu sử dụng.
Nếu người dùng chưa đăng nhập và cố gắng truy cập vào các trang nội dung yêu cầu quyền hạn, trang web sẽ tự động chuyển hướng họ đến trang đăng nhập.
Khi người dùng đã đăng nhập và cố gắng truy cập các trang nội dung yêu cầu quyền hạn cao hơn quyền hiện tại của tài khoản, hệ thống sẽ tự động chuyển hướng họ về trang chủ.
Thay đổi mật khẩu khi quên mật khẩu
1.8.1 Gửi email xác nhận đổi lại mật khẩu
Khi người dùng quên mật khẩu đăng nhập Nhấn vào dòng chữ quên mật khẩu ở Form đăng nhập để tiến hành cập nhật lại mật khẩu.
Hình 4-55 Tính năng lấy lại mật khẩu ở Form đăng nhập
Hình 4-56 Form nhập Email cần reset password
Sau đó thông tin sẽ được gửi đến Server và tiến hành xử lý.
Hình 4-57 Gửi mail xác nhận reset password
Sử dụng Jwt để tăng tính bảo mật cho việc thay đổi mật khẩu
Jwt được tạo có phần payload chứa thông tin “email” người dùng yêu cầu đổi mật khẩu
Mail được gửi thông qua EmailSenderService.
Email không tồn tại trong csdl
Hình 4-58 Email xác nhận reset password không tồn tại
Mail được gửi thành công
Hình 4-59 Gửi email reset password thành công
Mail xác nhận được gửi với đường dẫn đến trang đổi mật khẩu.
Khi người dùng nhấp vào "đường dẫn" trong email, họ sẽ được chuyển đến giao diện để tiến hành đổi mật khẩu mới Đường dẫn này sẽ bao gồm Jwt token đã được tạo trước đó.
Hình 4-60 Trang đổi mật khẩu mới
Sau khi nhập xong thông tin dữ liệu sẽ được xử lý ở Server thông qua các bước sau
Lỗi khi mật khẩu xác nhận không chính xác
Hình 4-62 Thông báo đổi mật khẩu với mật khẩu xác nhận không chính xác Đổi mật khẩu thành công
Hình 4-63 Thông báo đổi mật khẩu thành công
Để tránh việc sử dụng mật token để đổi mật khẩu nhiều lần, các đường dẫn từ Jwt token sẽ có thời hạn sử dụng nhất định Khi sử dụng token đã hết hạn, người dùng sẽ nhận được thông báo lỗi.
Hình 4-64 Thời gian đổi mật khẩu hết hạn
Trang Profile của User
Hình 4-65 Trang Profile người dùng
Để truy cập vào trang hiển thị thông tin khách hàng và đơn hàng đã đặt, người dùng cần đăng nhập với quyền User trên Server Phần thông tin đơn hàng sẽ được trình bày chi tiết ở các mục sau.
Các thông tin của khách hàng có được thông qua Request đến Endpoint user/me ở phía Server.
Hình 4-66 Lấy thông tin người dùng hiện tại
Hình 4-67 Cấu trúc JSON(UserInfoResponse) trả về
Để đổi mật khẩu, người dùng cần nhấn vào nút “đổi mật khẩu” trên trang Profile Sau đó, một email xác nhận sẽ được gửi đến địa chỉ email hiện tại của người dùng Các bước tiếp theo tương tự như hướng dẫn “thay đổi mật khẩu khi quên mật khẩu” đã được trình bày trước đó.
1.9.2.2 Thay đổi thông tin liên hệ
Người dùng nhập thông tin mới và gửi yêu cầu thay đổi thông tin đến Server.
Hình 4-68 Form nhập thông tin liên hệ mới
Server thực hiện xác định người dùng hiện tại và tiến hành cập nhật dữ liệu.
Hình 4-69 Thay đổi thông tin liên hệ phía Server
Thông báo và hiển thị dữ liệu cập nhật sau khi quá trình cập nhật thành công.
Hình 4-70 Thông báo hiển thị thông tin liên lạc sau khi cập nhật
Cấu hình upload file
Các hình ảnh của các sản phẩm sẽ được upload và lưu trữ vào một thư mục trong project thay vì lưu trực tiếp vào Database.
Xây dựng một class thuộc Service Layer là FileStorageServiceImpl chứa các phương thức hỗ trợ việc upload cũng như xóa bỏ hình ảnh FileStorageServiceImpl được implements từ interface FilesStorageService.
Các Enpoint hỗ trợ tính năng Upload
Post => /files/upload: upload thủ công một file bất kỳ.
Get => /files: chứa thông tin của tất cả các file đã upload Tên file trong thư mục upload và đường dẫn để lấy dữ liệu trực tiếp.
Hình 4-72 Thông tin các file được upload thông qua Endpoint
Get => /files/{filename}: dữ liệu cụ thể của từng file upload Tìm kiếm dựa trên filename.
Thêm sản phẩm
Yêu cầu quyền hạn Admin để thực hiện việc thêm sản phẩm mới cho trang web.
Sau khi đăng nhập với tài khoản Admin, vào mục “Thêm sản phẩm” để chuyển đến Form thêm sản phẩm.
To add a new product to the shop's website, enter all required product information and click the "Add Product" button The client will compile the information and send a request to the server to process the addition of the product.
Hình 4-73 Form thêm sản phẩm
Khi người dùng nhập thiếu thông tin sản phẩm, thì sẽ hiển thị thông báo lỗi cho người dùng nhập đầy đủ các thông tin.
Hình 4-74 Xử lý nhập thiếu thông tin phía Client
2.2.2 Thêm sản phẩm phía Server
Server nhận và xử lý Request từ Client theo các bước:
Hình 4-75 Xử lý thêm hình ảnh phía Server
Trong đó Form Data gửi đến Server được chia thành các phần riêng biệt sau:
Khi thông tin sản phẩm không đầy đủ, cần cung cấp các văn bản và số liệu liên quan Nếu thiếu các thuộc tính cần thiết, hệ thống sẽ trả về danh sách lỗi yêu cầu thông tin cho những thuộc tính đó.
Hình 4-76 Xử lý lỗi thiếu thông tin khi thêm sản phẩm phía Server
1 File ảnh chính của sản phẩm
Danh sách các file ảnh cho phần slider ảnh giới thiệu sản phẩm.
Client hiển thị thông báo sau khi thêm sản phẩm thành công.
Hình 4-77 Thông báo thêm sản phẩm thành công
Hiển thị thông tin sản phẩm
2.3.1 Danh sách sản phẩm được hiển thị theo nhu cầu
Trang web sẽ hiển thị danh sách sản phẩm phù hợp với giao diện và yêu cầu của người dùng Tại trang chủ, chỉ một số sản phẩm được hiển thị mà không có bộ lọc hay thanh tìm kiếm.
Hình 4-78 Hiển thị danh sách sản phẩm ở trang chủ
Danh sách sản phẩm ở trang sản phẩm theo phân loại sẽ có bộ lọc theo giá, sắp xếp sản phẩm và thanh tìm kiếm dựa theo tên sản phẩm.
Hình 4-79 Danh sách sản phẩm ở trang sản phẩm theo phân loại
2.3.2 Lấy dữ liệu danh sách sản phẩm từ Server
Client gửi yêu cầu đến Server kèm theo các thuộc tính như: phân trang, giá cả, tên, thương hiệu, phân loại,…
Sau đó Server dựa trên các thuộc tính của yêu cầu để trả về các dữ liệu sản phẩm phù hợp.
2.3.2.1 ProductPage Object Đây là một Object phục vụ việc phân trang, giới hạn số lượng dữ liệu trả về Khi khởi tạo thì yêu cầu các thuộc tính sau:
Page: xác định vị trí trang sản phẩm hiện tại
Size: số lượng sản phẩm trên một trang
SortBy: lựa chọn sắp xếp theo trường dữ liệu nào
Object với các thuộc tính được dừ để lọc danh sách sản phẩm theo các tiêu chí khác nhau:
Category: phân loại sản phẩm
JPA Criteria API cho phép ta tạo ra các câu truy vấn bằng Java Object thay vì việc khai báo trực tiếp trong String (JPQL).
Sử dụng Criteria API cho phép xây dựng các lệnh truy vấn phức tạp để lọc sản phẩm theo tiêu chí một cách linh động và không bị hardcode Điều này giúp tái sử dụng câu lệnh dễ dàng và đảm bảo tính chính xác, vì các câu lệnh được viết dưới dạng Java Object sẽ phát hiện lỗi ngay khi biên dịch chương trình.
ProductCriteriaRepository is a repository designed to leverage the Criteria API for querying based on specific criteria such as product name, price, and data record quantity, which are derived from the ProductPage Object and ProductSearchCriteria Object.
Các tiêu chí tìm kiếm được đặt trong request url trước khi chuyển thành
ProductPage Object và ProductSearchCriteria Object.
Hình 4-80 Các tiêu chí tìm kiếm danh sách sản phẩm gửi đến Server thông qua url query parameters
2.3.2.4 Sơ đồ các bước lấy danh sách sản phẩm.
Tại ProductCriteriaRepository, chúng tôi chuyển đổi các đối tượng Product thành ProductResponse để bổ sung thêm thông tin liên quan đến sản phẩm, như bình luận sản phẩm, từ danh sách sản phẩm được lấy từ Server.
Trong đó một Page Product được trả về cho Client dưới dạng JSON bao gồm các dữ liệu như sau:
Hình 4-82 Dữ liệu danh sách sản phẩm trả về
Client sẽ sử dụng các dữ liệu trên để hiển thị danh sách sản phẩm cũng như phân trang cho danh sách sản phẩm.
2.3.3 Trang thông tin chi tiết của sản phẩm
2.3.3.1 Giao diện trang chi tiết sản phẩm
Khi người dùng Click vào một sản phẩm trong danh sách sản phẩm Người dùng sẽ được điều hướng sang trang chi tiết của sản phẩm đó.
Phía trên giao diện là hình ảnh sản phẩm, slider hình ảnh giới thiệu, giá cả, giảm giá…
Hình 4-83 Giao diện phía trên trang chi tiết sản phẩm
Phía dưới giao diện là hình ảnh bảng thông số sản phẩm và danh sách các bình luận.
Hình 4-84 Giao diện phía dưới trang chi tiết sản phẩm
2.3.3.2 Dữ liệu trang chi tiết sản phẩm
Client sử dụng dữ liệu từ danh sách sản phẩm để xây dựng trang chi tiết sản phẩm.
Hình 4-85 Thông tin của mỗi sản phẩm trong danh sách sản phẩm
Đánh giá sản phẩm
Người dùng phải đăng nhập để có thể đánh giá sản phẩm
Một đánh giá sản phẩm bao gồm các thông tin:
Đánh giá số sao sản phẩm
Nội dung bình luận sản phẩm
Hình 4-86 Điền đánh giá sản phẩm
Quá trình thêm đánh giá sản phẩm
Hình 4-87 Quá trình đánh giá sản phẩm được thêm
Hình 4-88 Hiển thị thông báo và đánh giá sau khi đánh giá được thêm thành công
Người dùng chỉ có thể có một đánh giá duy nhất cho mỗi sản phẩm.
Cập nhật sản phẩm
Yêu cầu quyền Admin để thực hiện việc cập nhật thông tin sản phẩm.
Admin nhấn vào nút “Chỉnh sửa” trên giao diện sản phẩm để chuyển đến Form chỉnh sửa hình ảnh
Hình 4-89 Nút "chỉnh sửa" sử dụng cho việc cập nhật thông tin sản phẩm
Khách hàng sẽ thu thập thông tin hiện có về sản phẩm và tự động điền vào mẫu cập nhật sản phẩm Dưới đây là một số lưu ý quan trọng khi thực hiện việc cập nhật thông tin sản phẩm.
Loại sản phẩm là trường thông tin cố định không thể thay đổi.
Các hình ảnh của sản phẩm sẽ được giữ nguyên nếu không chọn hình ảnh mới
Hình 4-90 Các thông tin hiện tại của sản phẩm trong Form cập nhật sản phẩm
Sau khi cập nhật các thông tin cần thiết, hãy nhấn “Sửa thông tin sản phẩm” ở cuối Form để gửi yêu cầu cập nhật thông tin sản phẩm cùng với các thông tin đã chỉnh sửa đến Server.
Hình 4-91 Quá trình xử lý cập nhật sản phẩm
Hình 4-92 Thông báo cập nhật thông tin sản phẩm thành công
Xóa sản phẩm
Cần quyền Admin để xóa sản phẩm.
Admin nhấn vào nút “Xóa” trên giao diện sản phẩm để xóa sản phẩm.
Một popup sẽ hiển thị để xác nhận lại việc lựa chọn xóa sản phẩm.
Hình 4-93 Popup xác nhận xóa sản phẩm
Client gửi yêu cầu xóa sản phẩm đến Server kèm theo Id của sản phẩm sẽ xóa.
Để quản lý giỏ hàng hiệu quả, người dùng cần đăng nhập trước khi truy cập các tính năng như nút “thêm vào giỏ hàng” và trang giỏ hàng Việc này giúp đảm bảo trải nghiệm mua sắm mượt mà và an toàn hơn cho người dùng.
Thêm sản phẩm vào giỏ hàng
Nhấn “Thêm vào giỏ hàng” ở trang chi tiết sản phẩm để thêm sản phẩm vào giỏ hàng
Khách hàng sẽ gửi yêu cầu đến máy chủ để thêm sản phẩm vào giỏ hàng, kèm theo ID của sản phẩm Sản phẩm sẽ được thêm vào giỏ hàng với số lượng mặc định là "1".
Hình 4-95 Thêm sản phẩm vào giỏ hàng
Hình 4-96 Thêm sản phẩm vào giỏ hàng thành công
Sản phẩm chỉ có thể thêm vào giỏ hàng một lần
Hình 4-97 Thông báo sản phẩm đã thêm vào giỏ hàng
Hiển thị thông tin giỏ hàng
Nhấn vào mục “Giỏ hàng” trên thanh điều hướng để mở trang quản lý giỏ hàng
Hình 4-98 Trang quản lý giỏ hàng
Quá trình lấy dữ liệu giỏ hàng từ Server:
Hình 4-99 Lấy dữ liệu giỏ hàng
Dữ liêu trả về dưới dạng JSON:
Hình 4-100 Dữ liệu giỏ hàng trả về từ Server dạng JSON
Cập nhật sản phẩm trong giỏ hàng
Ta có thể cập nhật số lượng sản phẩm và trạng thái (chọn hoặc không chọn mua) sản phẩm có trong giỏ hàng.
Khi có sự thay đổi trong giỏ hàng, Client sẽ gửi yêu cầu cập nhật đến Server Yêu cầu này bao gồm các thông tin cần thiết như mã ID của giỏ hàng, số lượng sản phẩm và trạng thái chọn mua của sản phẩm.
Khi cập nhật giỏ hàng, chúng ta cần điều chỉnh số lượng sản phẩm còn lại cho phù hợp Các yêu cầu cập nhật sẽ được phân loại thành nhiều dạng khác nhau.
Có thay đổi thuộc tính “Chọn mua”: o Thay đổi “không chọn mua” sang “chọn mua”:
Số lượng sản phẩm còn lại = Số lượng sản phẩm hiện tại – số lượng sản phẩm trong giỏ hàng. o Thay đổi “chọn mua” sang “không chọn mua”:
Số lượng sản phẩm còn lịa = Số lượng sản phẩm hiện tại + số lượng sản phẩm trong giỏ hàng.
Chỉ thay đổi số lượng sản phẩm và đang trong trạng thái “Chọn mua”
Số lượng sản phẩm còn lại = Số lượng sản phẩm hiện tại + Số lượng cũ sản phẩm trong giỏ hàng – Số lượng mới sản phẩm trong giỏ hàng.
Hình 4-101 Quy trình cập nhật giỏ hàng
Xóa sản phẩm ra khỏi giỏ hàng
Để xóa sản phẩm khỏi giỏ hàng, người dùng chỉ cần nhấn vào biểu tượng xóa bên cạnh từng sản phẩm Khi đó, yêu cầu xóa sẽ được gửi đến Server kèm theo CartId.
Hình 4-102 Quy trình xóa sản phẩm trong giỏ hàng
Hình 4-103 Thông báo xóa sản phẩm trong giỏ hàng thành công
Nhấn nút “Tiến Hành Thanh Toán” trong trang giỏ hàng để chuyển đến trang thanh toán.
Hình 4-104 Trang thanh toán giỏ hàng
Trước khi thanh toán, người dùng cần cung cấp đầy đủ thông tin liên lạc Họ có thể chỉnh sửa thông tin này trực tiếp trên trang thanh toán, với quy trình cập nhật tương tự như ở trang Profile.
Có 2 phương thức thanh toán chính là: thanh toán khi nhận hàng và thanh toán qua Stripe.
4.1.1 Thanh toán khi nhận hàng
Nhấn vào nút thanh toán khi nhận hàng để tạo đơn hàng mới Client gửi yêu cầu tạo đơn hàng
Quá trình xử lý tạo đơn hàng mới.
Hình 4-105 Quá trình xử lý thêm đơn hàng thanh toán COD Đơn hàng được lặp dựa trên các sản phẩm trong giỏ hàng đang “Chọn mua”.
Giá trị “settled” được lưu của đơn hàng mặc định là False (đơn hàng chưa được thanh toán).
Sau khi thêm đơn hàng thành công người dùng sẽ được điều hướng về trang Profile để xem đơn hàng
Hình 4-106 Hiển thị đơn hàng trang Profile
Stripe là nền tảng phần mềm hàng đầu cho kinh doanh trực tuyến, xử lý hàng tỷ đô la mỗi năm cho doanh nghiệp toàn cầu Nó cung cấp SDK cho việc tích hợp trên các thiết bị Android và iOS, cùng với Stripe API hỗ trợ nhiều ngôn ngữ lập trình như Ruby, Python, Java và GO.
Hình 4-107 Tạo tài khoản Stripe
Publishable key Đây là key mà Stripe cung cấp để sử dụng dành cho native khi sử dụng Stripe SDK
Nó được sử dụng để tạo ra được EphemeralKey dùng cho việc thêm card.
Cấu hình Secret key ở file application.properties phía Server.
Khóa bí mật, như tên gọi của nó, là một yếu tố quan trọng cần được bảo mật Với khóa này, người dùng có thể thực hiện các giao dịch như thanh toán, xóa lịch sử giao dịch và hoàn tiền.
Cấu hình Publishable key ở phía Client.
1 App gửi credit card infomation lên Stripe.
2 Stripe xử lý và trả về token.
3 App gửi token cho back-end.
4 Server giao tiếp với Stripe qua Stripe's API.
5 Khi giao dịch xong thì Stripe trả về kết quả cho server.
6 Server thông báo cho app kết quả của giao dịch.
4.1.2.3 Tạo một phiên thanh toán dựa trên Stripe API
Hình 4-108 Tạo một Stripe Session thanh toán
4.1.2.4 Thêm đơn hàng sau khi thanh toán thành công dựa trên Stripe webhook
Webhook là một tính năng quan trọng cho phép website tự động gửi thông báo và dữ liệu thời gian thực đến các hệ thống khác khi có sự kiện xảy ra, như khách hàng đăng ký, điền form, mua hàng, hoặc gửi email Tính năng này giúp hệ thống của bạn hoạt động hiệu quả hơn và cải thiện khả năng trao đổi thông tin.
Sử dụng Stripe webhook được hỗ trợ bởi Stripe để bắt sự kiện người dùng thực hiện thanh toán thành công
Sau khi thanh toán thành công, Server sẽ nhận thông báo từ Stripe Webhook, cho phép xác nhận rằng người dùng đã hoàn tất thanh toán đơn hàng Dựa vào sự kiện này, hệ thống sẽ tiến hành lưu trữ thông tin đơn hàng vào cơ sở dữ liệu.
Tải file Stripe CLI exe từ trang https://github.com/stripe/stripe-cli/releases/latest. Đăng nhập Stripe thông qua Stripe CLI
Hình 4-109 Đăng nhập từ Stripe CLI
Trang đăng nhập sẽ tự động mở trên Browser
Hình 4-110 Đăng nhập Stripe CLI trên Browser
Sau đó khởi chạy Stripe CLI
Listen dùng để xác định Endpoint nhận thông tin từ Webhook sẽ là: https://localhost:8443/payment/stripe/webhooks
skip-verify: sẽ bỏ qua certificate verification của trang web.
Đoạn mã sau phần "Your webhook signing secret" cần được thêm vào Controller của Endpoint để xác minh tính hợp lệ của dữ liệu nhận được từ Endpoint.
Mỗi khi có sự kiện xảy ra Stripe webhook sẽ Post các thông tin đến Enpoint được xác định.
Hình 4-112 Webhook Post các sự kiện đến Endpoint
Khi nhận được Event Session thanh toán thành công (checkout.session.completed) Server sẽ lưu đơn hàng và CSDL
Hình 4-113 Lưu đơn hàng khi nhận được Event Webhook checkout.session.completed
Khi thanh toán qua Stripe thành công, đơn hàng sẽ có dữ liệu cột “settled” là True, kèm theo một chagre_id của phiên thanh toán.
Hiển thị đơn hàng cho người dùng
Người dùng có thể truy cập vào trang Profile để xem lại các đơn hàng đã đặt.
Hình 4-114 Danh sách đơn hàng đã đặt ở trang Profile User
Quá trình lấy dữ liệu từ Server
Hình 4-115 Lấy dữ liệu các đơn hàng thuộc về một User
Dữ liệu dạng JSON được trả về:
Hình 4-116 Dữ liệu JSON danh sách đơn hàng của một User
Hiển thị tất cả đơn hàng cho Admin
5.2.1 Hiển thị danh sách đơn hàng
Dữ liệu từ Endpoint /orders/admin cho phép admin lọc đơn hàng theo các tiêu chí như mã đơn hàng, tên khách hàng và trạng thái đơn hàng.
Hình 4-117 Trang quản lý đơn hàng Admin
Quá trinh xử lý lấy dữ liệu đơn hàng khi Admin truy cập vào trang QL đơn hàng.
Hình 4-118 Lấy dữ liệu trang QL đơn hàng Admin
Một Page chứa các trường thông tin sau đây.
Hình 4-119 Dữ liệu JSON trang QL đơn hàng Admin
Cập nhật đơn hàng
User có thể hủy đơn hàng trước khi đơn nhận đơn hàng
Admins can update the order status to reflect the current state of the order The available order statuses include: Open, Confirmed, Shipping, Collected, Returned, and Canceled.
Phía Server yêu cầu Client cung cấp thông tin về Id đơn hàng cần cập nhật Sau khi nhận thông tin, Server sẽ xác định đơn hàng và cập nhật trạng thái của nó cho phù hợp Các endpoint xử lý yêu cầu này được thiết lập trên Server.
orders/{id}/update: Cập nhật trạng thái đơn hàng
orders/{id}/cancel: Hủy đơn hàng
orders/{id}/return: Trả về đơn hàng
Các trạng thái đơn hàng có thể thay đổi như sau:
Hình 4-120 Thay đổi trạng thái đơn hàng
Khi đơn hàng bị hủy, dữ liệu của đơn hàng vẫn được giữ nguyên trong cơ sở dữ liệu và số lượng sản phẩm trong đơn hàng sẽ được hoàn lại cho Shop.
6 Quản lý hình ảnh quảng cáo đầu trang chủ
Admin có thể vào trang quản lý quảng cáo để thêm, sửa, xóa, cập nhật các slider và banner quảng cáo đầu trang chủ.
Hình 4-121 Slider và Banner quảng cáo đầu trang chủ
Hình 4-122 Trang quản lý quảng cáo
Thêm quảng cáo
Admin cần điền đầy đủ thông tin vào Form và chọn "thêm ảnh" Sau đó, Client sẽ gửi yêu cầu bổ sung ảnh quảng cáo cùng thông tin liên quan đến Server để tiến hành xử lý.
Hình 4-123 Xử lý thêm ảnh quảng cáo
Số lượng banner quảng cáo tối đa cho phép là 4 để đảm bảo giao diện không bị vỡ Nếu người dùng cố gắng thêm banner khi đã đủ 4 mục, server sẽ xử lý và trả về lỗi cho client.
Hình 4-124 Trường hợp banner quảng cáo đã đủ 4 mục
Thông báo khi thêm hình ảnh quảng cáo thành công.
Sửa quảng cáo
Nhấn vào nút cập nhật trên mỗi quảng cáo trong danh sách quảng cáo để cập nhật thông tin cho hình ảnh quảng cáo.
Hình 4-125 Form cập nhật thông tin quảng cáo
Dữ liệu mới sẽ được đưa đến Server và cập nhật lại cho quảng cáo cũ Việc xác định quảng cáo thông qua Id của các quảng cáo.
Hiển thị
Ta lấy dữ liệu hình ảnh bằng phương thức Get đến Endpoint /header-images.
Ở trang chủ ta chỉ cần các dữ liệu hình ảnh quảng cáo đã enable.
Ở trang QL quảng cáo của admin dữ liệu hình ảnh quảng cáo sẽ được lấy tất cả.
Dữ liệu của các quảng cáo được Server trả về dưới dạng JSON gồm các trường dữ liệu sau:
Hình 4-126 Dữ liệu JSON của danh sách các quảng cáo
