SỬ DỤNG FRAMEWORK SPRING xây DỰNG WEBSITE bán HÀNG điện tử

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA KHOA HỌC VÀ KỸ THUẬT THÔNG TIN BÁO CÁO ĐỒ ÁN CÔNG NGHỆ JAVA ĐỀ TÀI SỬ DỤNG FRAMEWORK SPRING XÂY DỰNG WEBSITE BÁN HÀNG ĐIỆN TỬ Giáo viên hướng dẫn Nhóm sinh viên thực 18520887: Lê Nguyễn Hoàng Khang 18520887: Lê Nguyễn Hoàng Khang 18520887: Lê Nguyễn Hoàng Khang TP Hồ Chí Minh, tháng năm 2021 MỞ ĐẦU Lời đầu tiên, nhóm chúng em xin gửi lời cảm ơn chân thành đến quý Thầy cô giảng viên Trường Đại học Công nghệ Thông tin - Đại học Quốc gia TP.HCM quý thầy cô khoa Khoa học Kỹ thuật thơng tin giúp cho nhóm chúng em có kiến thức làm tảng để thực đề tài Trong thời gian học đề tài, nhóm chúng em vận dụng kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi nghiên cứu kiến thức từ thầy cô, bạn bè nhiều nguồn tài liệu tham khảo Từ học nhóm chúng em lựa chọn đề tài xây dựng trang web bán hàng hóa điên tử dựa việc sử dụng công nghệ Spring Tuy nhiên, kiến thức chun mơn cịn hạn chế thân thiếu nhiều kinh nghiệm thực tiễn nên nội dung báo cáo khơng tránh khỏi thiếu xót, em mong nhận góp ý, bảo thêm q thầy nhằm hồn thiện kiến thức để nhóm chúng em dùng làm hành trang thực đề tài khác tương lai việc học tập làm việc sau MỤC LỤC DANH MỤC HÌNH ẢNH CHƯƠNG TỔNG QUAN CÔNG NGHỆ SỬ DỤNG XÂY DỰNG WEBSITE .6 Framework Spring .6 1.1 Giới thiệu 1.2 Lợi ích sử dụng 1.3 Mục đích sử dụng đề tài ReactJS 2.1 Giới thiệu 2.2 Lợi ích sử dụng 2.3 Mục đích sử dụng đề tài Hệ quản trị sở liệu MySQL .8 3.1 Giới thiệu 3.2 Lợi ích sử dụng 3.3 Mục đích sử dụng .9 CHƯƠNG PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE 10 Khảo sát trang web bán hàng điện tử liên quan 10 1.1 Lựa chọn trang web khảo sát 10 1.2 Các thành phần giao diện chức trang web thegioididong.com 10 Đặc tả yêu cầu cho trang web 18 2.1 Phần quản lý admin 18 2.2 Phần quản lý người dùng 19 2.3 Yêu cầu giao diện sử dụng 19 2.4 Yêu cầu phi chức .19 Các chức trang web 20 3.1 Chức quản lý hệ thống .20 3.2 Chức giới thiệu sản phẩm 20 Biểu đồ Use – case 20 4.1 Biểu đồ Use – case tổng quát 20 4.2 Use – case đăng nhập .21 4.3 Use – case quản lý sản phẩm 22 4.4 Use – case quản lý giỏ hàng .23 4.5 Use – case toán .23 4.6 Use – case quản lý đơn hàng 24 4.7 Use – case quản lý quảng cáo giao diện 24 CHƯƠNG THAO TÁC VÀ LƯU TRỮ DỮ LIỆU 26 Các công nghệ tương tác với liệu .26 1.1 Giao diện lập trình ứng dụng JPA .26 1.2 ORM tools – Hibernate 28 1.3 DAO Design Pattern 28 1.4 Spring Data JPA .30 1.5 Kiến trúc tổng quát 31 Tạo Entity Hibernate định hình liệu lưu trữ 31 2.1 Lưu trữ thông tin đăng nhập tài khoản người dùng 31 2.2 Lưu trữ thông tin liên quan User 33 2.3 Lưu trữ thông tin liên lạc người dùng 34 2.4 Lưu trữ phân loại quyền hạn .35 2.5 Lưu trữ thương hiệu hàng hóa 36 2.6 Lưu trữ phân loại sản phẩm 37 2.7 Lưu trữ thông tin sản phẩm 38 2.8 Lưu trữ thông tin thông số sản phẩm 40 2.9 Lưu trữ hình ảnh sản phẩm .42 2.10 Lưu trữ đánh giá sản phẩm .43 2.11 Lưu trữ thông tin giỏ hàng 44 2.12 Lưu trữ thông tin đơn hàng .45 2.13 Lưu trữ thông tin sản phẩm đơn hàng .47 2.14 Lưu trữ hình ảnh quảng cáo đầu trang web .48 2.15 ER Diagram quan hệ bảng csdl .50 Tạo DAO dựa Sping Data JPA 50 3.1 User Repository 51 3.2 User Credential Repository 51 3.3 User Contact Repository 52 3.4 Role Repository 52 3.5 Product Repository 52 3.6 ProductCriteria Repository .53 3.7 Product Details Repository .53 3.8 Product Image Repository 54 3.9 Review Repository 54 3.10 Brand Repository 55 3.11 Category Repository .55 3.12 Cart Repository .56 3.13 Order Repository 56 3.14 OrderItem Repository .57 3.15 HeaderImage Repository 57 Kết nối sở liệu với Spring Boot .57 CHƯƠNG Xây dựng RESTful Web Service .59 Đăng ký, đăng nhập, bảo mật thông tin 59 1.1 Một số khái niệm 59 1.2 Tạo tài khoản người dùng 63 1.3 Xác nhận Email cho tài khoản tạo .66 1.4 Đăng nhập với tài khoản 70 1.5 Đăng nhập thông qua tài khoản FaceBook Google 71 1.6 Gửi yêu cầu với Jwt access token .75 1.7 Phân quyền người dùng 76 1.8 Thay đổi mật quên mật 77 1.9 Trang Profile User 81 Quản lý sản phẩm 84 2.1 Cấu hình upload file 84 2.2 Thêm sản phẩm 85 2.3 Hiển thị thông tin sản phẩm 88 2.4 Đánh giá sản phẩm 93 2.5 Cập nhật sản phẩm 94 2.6 Xóa sản phẩm 96 Quản lý giỏ hàng .97 3.1 Thêm sản phẩm vào giỏ hàng 97 3.2 Hiển thị thông tin giỏ hàng .99 3.3 Cập nhật sản phẩm giỏ hàng 100 3.4 Xóa sản phẩm khỏi giỏ hàng 101 Thanh toán .102 Quản lý đơn hàng 109 5.1 Hiển thị đơn hàng cho người dùng 109 5.2 Hiển thị tất đơn hàng cho Admin 111 5.3 Cập nhật đơn hàng 113 Quản lý hình ảnh quảng cáo đầu trang chủ 114 6.1 Thêm quảng cáo 115 6.2 Sửa quảng cáo 116 6.3 Hiển thị 116 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .118 Kết luận 118 1.1 Tích cực 118 1.2 Hạn chế 118 Hướng phát triển 119 Tài liệu tham khảo 120 Bảng phân công công việc 121 DANH MỤC HÌNH ẢNH Hình 2-1 Giao diện đầu trang chủ thegioididong 12 Hình 2-2 Hiển thị sản phẩm trang chủ 13 Hình 2-3 Giao diện sản phẩm trang chủ thegioididong .14 Hình 2-4 Phần trang chi tiết sản phẩm thegioididong .15 Hình 2-5 Phần trang chi tiết sản phẩm thegioididong 15 Hình 2-6 Bình luận sản phẩm trang chi tiết sản phẩm thegioididong 16 Hình 2-7 Giao diện giỏ hàng thegioididong 17 Hình 2-8 Giao diện đơn hàng khách hàng thegioididong 18 Hình 2-9 Giao diện đơn hàng bị khách hàng hủy thegioididong 19 Hình 2-10 Biểu đồ use - case tổng quát 21 Hình 2-11 Biểu đồ Use - case đăng nhập 22 Hình 2-12 Use - case quản lý giỏ hàng 24 Hình 2-13 Use - case toán .24 Hình 2-14 Use - case quản lý đơn hàng 25 Hình 3-1 Kiến trúc JPA 27 Hình 3-2 ORM Layer JPA .29 Hình 3-3 Data Access Object Design Pattern 30 Hình 3-4 Kiến trúc Controller-Service - Repository .32 Hình 3-5 UserRepository .52 Hình 3-6 UserCredentialRepository .52 Hình 3-7 UserContactRepository 53 Hình 3-8 RoleRepository .53 Hình 3-9 ProductRepository 53 Hình 3-10 ProductCriteriaRepository .54 Hình 3-11 ProductDetailsRepository 54 Hình 3-12 ProductImageRepository .55 Hình 3-13 ReviewRepository 55 Hình 3-14 BrandRepository 56 Hình 3-15 CategoryRepository .56 Hình 3-16 CartRepository 57 Hình 3-17 OrderRepository 57 Hình 3-18 OrderItemRepository .58 Hình 3-19 HeaderImageRepository 58 Hình 4-1 Class TokenProvider .62 Hình 4-2 Decoded JWT token 63 Hình 4-3 Tạo tài khoản 64 Hình 4-4 Nhập liệu SignupRequest phía Client 65 Hình 4-5 Thơng báo đăng ký thành cơng .66 Hình 4-6 Thơng báo lỗi đăng ký với Email trùng lặp .66 Hình 4-7 Gợi ý gửi lại email xác nhận 67 Hình 4-8 Quá trình xử lý gửi lại email xác nhận 68 Hình 4-9 Thông báo gửi Mail thành công 68 Hình 4-10 Email với đường dẫn xác nhận gửi .69 Hình 4-11 Xử lý xác nhận Email dựa Token nhận 69 Hình 4-12 Thông báo xác nhận Email thành công 70 Hình 4-13 Thơng báo Token Verify Email hết hạn 70 Hình 4-14 Hiển thị thơng báo Email xác nhận 70 Hình 4-15 Quá trình đăng nhập với Spring Security 71 Hình 4-16 Đăng nhập thành cơng 72 Hình 4-17 Đăng nhập với thông tin tài khoản sai 72 Hình 4-18 Tạo ứng dụng Google .73 Hình 4-19 Tạo ứng dụng Facebook 74 Hình 4-20 Quá trình Social Login 76 Hình 4-21 Server xử lý Request với token .77 Hình 4-22 Tính lấy lại mật Form đăng nhập 78 Hình 4-23 Form nhập Email cần reset password 78 Hình 4-24 Gửi mail xác nhận reset password 78 Hình 4-25 Email xác nhận reset password không tồn 79 Hình 4-26 Gửi email reset password thành cơng 79 Hình 4-27 Trang đổi mật 80 Hình 4-28 Xử lý đổi mật 80 Hình 4-29 Thơng báo đổi mật với mật xác nhận khơng xác 81 Hình 4-30 Thơng báo đổi mật thành cơng .81 Hình 4-31 Thời gian đổi mật hết hạn .82 Hình 4-32 Trang Profile người dùng 82 Hình 4-33 Lấy thông tin người dùng 83 Hình 4-34 Cấu trúc JSON(UserInfoResponse) trả .83 Hình 4-35 Form nhập thông tin liên hệ 84 Hình 4-36 Thay đổi thơng tin liên hệ phía Server 84 Hình 4-110 Đăng nhập Stripe CLI Browser Sau khởi chạy Stripe CLI Hình 4-111 Khởi chạy webhook Trong đó: 105  Listen dùng để xác định Endpoint nhận thông tin từ Webhook là: https://localhost:8443/payment/stripe/webhooks  skip-verify: bỏ qua certificate verification trang web  Đoạn mã sau phần “Your webhook signing secret” thêm vào Controller xử lý Endpoint để kiểm tra Endpoint nhận liệu có thực hay khơng Mỗi có kiện xảy Stripe webhook Post thông tin đến Enpoint xác định Hình 4-112 Webhook Post kiện đến Endpoint Khi nhận Event Session tốn thành cơng (checkout.session.completed) Server lưu đơn hàng CSDL Hình 4-113 Lưu đơn hàng nhận Event Webhook checkout.session.completed Khi tốn qua Stripe thành cơng, đơn hàng có liệu cột “settled” True, kèm theo chagre_id phiên toán 106 Quản lý đơn hàng 5.1 Hiển thị đơn hàng cho người dùng Người dùng truy cập vào trang Profile để xem lại đơn hàng đặt Hình 4-114 Danh sách đơn hàng đặt trang Profile User Quá trình lấy liệu từ Server Hình 4-115 Lấy liệu đơn hàng thuộc User 107 Dữ liệu dạng JSON trả về: Hình 4-116 Dữ liệu JSON danh sách đơn hàng User 5.2 Hiển thị tất đơn hàng cho Admin 5.2.1 Hiển thị danh sách đơn hàng Dữ liệu hiển thị lấy từ Endpoint /orders/admin với thuộc tính để lọc đơn hàng khác Admin lọc đơn hàng dựa tiêu chí sau: mã đơn hàng, tên khách hàng, trạng thái Hình 4-117 Trang quản lý đơn hàng Admin 108 Quá trinh xử lý lấy liệu đơn hàng Admin truy cập vào trang QL đơn hàng Hình 4-118 Lấy liệu trang QL đơn hàng Admin Một Page chứa trường thơng tin sau 109 Hình 4-119 Dữ liệu JSON trang QL đơn hàng Admin 5.3 Cập nhật đơn hàng User hủy đơn hàng trước đơn nhận đơn hàng Admin cập nhật trạng thái đơn hàng cho phù hợp với tình trạng đơn hàng Các trạng thái đơn hàng bao gồm: Open, Confirmed, Shipping, Collected, Returned, Canceled Phía Server yêu cầu Client gửi thông tin Id đơn hàng cần cập nhật Sau Server xác định đơn hàng cập nhật trạng thái đơn hàng cho phù hợp Các endpoint xử lý phía Server bao gồm:    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ả đơn hàng Các trạng thái đơn hàng thay đổi sau: 110 Hình 4-120 Thay đổi trạng thái đơn hàng Ngồi đơn hàng bị hủy liệu đơn hàng giữ ngun (khơng bị xóa khỏi csdl) sản phẩm Shop hoàn lại số lượng sản phẩm có đơn hàng Quản lý hình ảnh quảng cáo đầu trang chủ Admin vào trang quản lý quảng cáo để thêm, sửa, xóa, cập nhật slider banner quảng cáo đầu trang chủ Hình 4-121 Slider Banner quảng cáo đầu trang chủ 111 Hình 4-122 Trang quản lý quảng cáo 6.1 Thêm quảng cáo Admin nhập đầy đủ thông tin vào Form thêm ảnh nhấn “thêm ảnh” Client gửi yêu cầu thêm ảnh quảng cáo kèm theo thông tin ảnh quảng cáo đến Server để tiến hành xử lý Hình 4-123 Xử lý thêm ảnh quảng cáo 112 Số lượng Banner quảng cáo tối đa (để không làm vỡ giao diện) Nếu thêm Banner quảng cáo đủ mục, Server xử lý để trả lỗi cho Client hiển thị sau: Hình 4-124 Trường hợp banner quảng cáo đủ mục Thơng báo thêm hình ảnh quảng cáo thành công 6.2 Sửa quảng cáo Nhấn vào nút cập nhật quảng cáo danh sách quảng cáo để cập nhật thơng tin cho hình ảnh quảng cáo 113 Hình 4-125 Form cập nhật thơng tin quảng cáo Dữ liệu đưa đến Server 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 quảng cáo Hình ảnh cũ bị xóa khỏi folder upload ta cập nhật lại hình ảnh quảng cáo 6.3 Hiển thị Ta lấy liệu hình ảnh phương thức Get đến Endpoint /header-images  Ở trang chủ ta cần liệu hình ảnh quảng cáo enable  Ở trang QL quảng cáo admin liệu hình ảnh quảng cáo lấy tất Dữ liệu quảng cáo Server trả dạng JSON gồm trường liệu sau: Hình 4-126 Dữ liệu JSON danh sách quảng cáo 114 115 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Kết luận Spring framework framework với nhiều module hỗ trợ nhiều công việc khác nhau, giúp tối ưu thực cơng việc dễ dàng Spring có kích thước nhẹ nên hoạt động cách trơn tru Spring nhẹ lại có khả hỗ trợ cho ứng dụng tạo hiệu cao, sử dụng lại code dễ dàng dễ kiểm thử,… Có thể dễ dàng thực việc tối ưu hóa hầu hết cơng việc tiết kiệm tối đa thời gian làm việc Spring giữ vai trị vơ quan trọng phát triển cho ứng dụng Java 1.1 Tích cực Nhóm xây dựng thành cơng trang web bán hàng với đầy đủ tính trang web bán hàng Hiểu cách xây dựng restful web service cung cấp liệu cách trực quan Xây component tạo từ thư viện React để tạo nên giao diện trang web phù hợp, tương tác trực tiếp với liệu web service Cách làm việc nhóm phân chia cơng việc trình thực đồ án 1.2 Hạn chế Giao diện trang web xây dựng chưa thực đẹp mắt sinh động Một số tính cịn thiếu như: gợi ý sản phẩm cho người dùng, thống kê doanh thu buôn bán, chatbox với người dùng… Phân chia quyền người dùng chưa thực chi tiết (chỉ có User Admin) Cần thêm phân quyền như: người gửi hàng, người quản trị,… 116 Hướng phát triển Xây dựng thêm tính cịn thiếu, bổ sung tính dựa nhiều tảng cơng nghệ khác AI, Machine Learning Tìm kiếm xử lý lỗi tồn Tối ưu hóa source code để Server có tốc độ xử lý tốt Đưa trang web chạy trực tiếp Internet 117 Tài liệu tham khảo  Trang web Spring Framework Link: https://spring.io/projects/spring-framework Truy cập lần cuối 26/6/2021  Thiết lập SSL/TLS cho Spring Boot (cài đặt https) Link: https://stackjava.com/spring-boot/code-vi-du-spring-boot-https-cau-hinh-sslhttps.html Truy cập lần cuối 26/6/2021  Guild to Spring Email Link: https://www.baeldung.com/spring-email Truy cập lần cuối 26/6/2021  Spring Boot OAuth2 Social Login with Google, Facebook, and Github Link: https://www.callicoder.com/spring-boot-security-oauth2-social-login-part-1/ Truy cập lần cuối 26/6/2021  Dùng hibernate lâu? Thế bạn có biết JPA gì? Link: https://viblo.asia/p/dunghibernate-da-lau-the-ban-co-biet-jpa-la-gi-eW65G1zxZDO Truy cập lần cuối 26/6/2021  Những Design Pattern thường dùng Spring Boot – DAO Design Pattern Link: https://toilovecode.com/2020/09/26/series-spring-boot-bai-11-dao-designpattern/ Truy cập lần cuối 26/6/2021 118 Bảng phân công công việc Stt Mssv 18520887 Họ Tên Công việc Ghi Lê Nguyễn Hoàng Khang - Kiểm tra, viết báo cáo - Xây dựng tính đăng Hồn thành tốt nhập, phân quyền, bảo mật - Hỗ trợ xây dựng tính khác - Xây dựng giao diện trang web dựa thư viện React - Sửa lỗi, cập nhật source code 18520894 17520661 Nguyễn Thịnh Khang - Xây dựng tính sản Lý Anh Kiệt - Xây dựng tính đơn Hồn thành tốt phẩm, giỏ hàng - Viết báo cáo - Tạo slide ppt báo cáo Hoàn thành tốt hàng, quảng cáo - Viết báo cáo - Tạo slide ppt báo cáo 119 ... NGHỆ SỬ DỤNG XÂY DỰNG WEBSITE Framework Spring 1.1 Giới thiệu Spring Framework phát triển ứng dụng Java sử dụng hàng triệu lập trình viên Nó giúp tạo ứng dụng có hiệu cao, dễ kiểm thử, sử dụng. .. CHƯƠNG TỔNG QUAN CÔNG NGHỆ SỬ DỤNG XÂY DỰNG WEBSITE .6 Framework Spring .6 1.1 Giới thiệu 1.2 Lợi ích sử dụng 1.3 Mục đích sử dụng đề tài ReactJS ... Module Web Spring thiết kế theo mô hình MVC nên cung cấp đầy đủ tính giúp thay web framework khác Struts 1.3 Mục đích sử dụng đề tài Là cơng nghệ sử dụng đề tài đồ án Được sử dụng để xây dụng RESTful