Tìm hiểu spring boot Để xây dựng website kinh doanh vali

Kết quả đạt được, nhóm chúng tôi đã hoàn thiện một website cho phép người dùng đăng ký, đăng nhập, quên mật khâu, tìm kiếm, lọc, xem sản phẩm và xem chỉ tiết sản phẩm.. Ngoài ra, websit

ĐẠI HỌC QUOC GIA TP HO CHi MINH

TRUONG ĐẠI HỌC CÔNG NGHE THONG TIN

TIM HIEU SPRING BOOT DE XAY DUNG WEBSITE KINH DOANH VALI

Sinh vién hién:

TP HO CHi MINH — 05/2024

1 GIỚI THIỆU

Đẻ tài của nhóm chúng tôi là “Tìm hiểu về Spring boot đề xây dựng website kinh doanh vali” Để thực hiện đề tài này, chúng tôi đã sử dụng nhiều công cụ và giải pháp khác nhau Phản backend của hệ thống được xây dựng bằng Spring boot, trong khi đó phần frontend được phát triên bằng ReactJS két hợp với Ant Design đề tạo giao diện người dùng thân thiện và chuyên nghiệp Dữ liệu của website được lưu trữ trong MongoDB, một cơ sở dữ liệu NoSQL có khả năng xử lý tốt các dữ liệu không có cầu

trúc Bên cạnh đó, áp dụng mô hình MVC, chúng tôi đã phân tách rõ ràng các thành

phản của ứng dụng, từ đó tạo điều kiện cho việc bảo trì, mở rộng và phát triển dễ dàng

hơn

Kết quả đạt được, nhóm chúng tôi đã hoàn thiện một website cho phép người dùng

đăng ký, đăng nhập, quên mật khâu, tìm kiếm, lọc, xem sản phẩm và xem chỉ tiết sản phẩm Bên cạnh đó, việc thêm sản pham vào giỏ hàng và thanh toán cũng được thực hiện một cách thuận tiện, với hai phương thức thanh toán là khi nhận hàng và qua VNPay Người dùng cũng có thê xem, chỉnh sửa thông tin của mình và xem lại lịch sử đơn hàng Ngoài ra, website còn có một trang quản trị (admin) để quản lý người dùng,

các sản phâm và đơn hàng của cửa hàng một cách hiệu quả

Chúng tôi cam kết rằng đề tài này do nhóm tự phân tích và thiết ké, không dựa trên bat ky dé tài nào khác

2 MÔ TẢ CƠ SỞ DỮ LIỆU

2.1 Mé hinh ERD

Cartitem Order Product Description

PK | ID PK | ID PK | ID PK | ID

productiD userid me branch

colo cartitems type teria

ize totalPrice img eight

quantity shippingCost price e

orderTota discou olum User

shippingMethod tock ee!

PK | ID

paymentMethod descriptio/ key username

shippingAddress Address rran email

notes PK | ID

addresses shippingStatus

, name Cart mobile

paymentStatus address PK | ID password ——=

items

Hình 1 Sơ đô ERD

Đồ án môn học Công nghệ Java

2.2 Mô tả dữ liệu

Quan hệ |Thuộc tính Kiểu dữ liệu Mô tả

ID String Mã người dùng

username String [Tên người dùng

email String Email

addresses List<Address> dùng

mobile String Số điện thoại

isAdmin boolean Xác nhận admin

ID String Mã địa chi

Address name String [Tên người nhận

address String Địa chỉ nhận hàng

mobile String Số điện thoại nhận hàng

Hình ảnh sản phẩm ứng với

Product | img Map<String, String> mau

price Map<String, Double> | Giá sản phẩm ứng với size discount int Giam gia (phan tram)

Map<String, Ton kho sản pham ứng với

stock Map<String, Integer>> | mau va size

description Description M6 ta san pham

branch String Thương hiệu

_—_ | Weight String Trọng lượng

Descriptil size String Kích thước

warranty String Bảo hành

Payment status String Trang thai thanh toan

message String Thông báo thanh toán

Pham Thi Diém Quynh — Nguyén Cam Van Trang 2

ID String Ma don hang

userld String Mã người dùng

Danh sách các mặt hang trong

cartltems List<Cartltem> đơn hàng

totalPrice double Tổng giá sản phẩm

shippingCost | double Phí vận chuyên

order Total double Tổng đơn hàng

shippingMetho

Order d String Phương thức vận chuyền

paymentMetha

d String Phương thức thanh toán

shippingAddre

notes String Ghi chu don hang

shippingStatug String Trang thai van chuyén

paymentStatug String Trang thai thanh toan

createdAt LocalDateTime Thoi gian tao don hang

ID String Mã giỏ hàng

Cartltem | color String Màu sản phẩm

Size String Kích thước

quantity int Số lượng

ID String Mã giỏ hàng

Cart userld String Mã người dùng

Danh sách các sản phâm trong

items List<Cartltem> gio hang

Báng 1 Mô tá cơ sở dữ liệu

3 THIET KE HE THONG

3.1 Kién tric hé théng

Nhóm chúng tôi đã sử dụng kiên trúc hệ thong la kién tric client — server

3.2 Thiết kế hệ thống

3.2.1

Xác định các actor của hệ thống

1 Admin Dang nhập, đăng ký, xem thông tin cá nhân, chỉnh sửa thông

tin cá nhân, xem lịch sử đơn hàng, xem chỉ tiết don hang, di

mật khâu, xem danh mục sản phâm, xem sản phâm, tìm È

Đồ án môn học Công nghệ Java

sản pham, lọc sản phẩm, xem chỉ tiết sản phâm, thêm phẩm vào giỏ hàng, xem giỏ hàng, chỉnh sửa giỏ hàng, hàng (chinh sửa địa nhận chỉ nhận hàng, thay đôi phươ thức vận chuyền, phương thức thanh toán, thêm ghi chú, ‡ môi trường thanh toán VNPay), đăng xuất, quên mật khâu quản lý người dùng, quản lý sản phẩm, quản lý đơn hàng

2 Người dùng | Đăng nhập, đăng ký, xem thông tin cá nhân, chỉnh sửa thônc

tin cá nhân, xem lịch sử đơn hàng, xem chỉ tiết đơn hàng, d mật khẩu, xem danh mục sản phẩm, xem san phẩm, tim k san pham, loc san pham, xem chi tiét san pham, thém

phẩm vào giỏ hàng, xem giỏ hàng, chỉnh sửa giỏ hàng hàng (chinh sửa địa nhận chỉ nhận hàng, thay đôi phươ thức vận chuyền, phương thức thanh toán, thêm ghi chú, ‡ môi trường thanh toán VNPay), đăng xuất, quên mật khâu

Báng 2 Mô t¿ các actor cza hé thống

3.2.2 Sơ đồ usecase tông quát

Hình 2: Sơ đồ usecase tổng quát

3.2.3 Danh sách các usecase

STT usecase Mã Tên usecase Ý nghia/Noi dung nghĩa/Nội

x , Người dùng đăng ký tải

x 2 Người dùng/Admin đăng

UC Dang nhap nhap vao hé thong

3 UC1.3 Quén mat khau Người d lùng Admin lây lại mật khâu mới

x £ Người dùng/Admin đăng xuất

4 |UC14 Đăng xuất khỏi hệ thông

5 UC2.1 Xem thông tin cá nhân | Người dùng/Admin xem thông tin cá nhân

Xem và sửa đối thông tin Người dùng/Admin xem vả

6 UC2.2 tai khoan v¿ , sửa đôi thông tin tải khoản si ,

7 UC23 Đổi mật khẩu Người dung/Admin thay đôi

mật khâu mới

, x Người dùng xem lịch sử mua

8 UC2.4 Xem lịch sử mua hàng hàng

9 UC24.1 Xem thông tin đơn hàng Người dùng xem thông tin chi

tiệt một đơn hàng

40 |UC3 Xem sản phẩm Người dùng/ Admin xem

thông tin sản pham Người dùng xem danh mục

11 UC4 Xem danh mục sản phâm sản phâm được hiện thị trên

trang chủ

12 |UC85 Tìm kiếm sản phẩm Ngự ơi dùng om kiểm ¬ phẩm băng từ khóa

Thêm sản phẩm vào giỏ Người dùng thêm sản phẩm

13 |UCS5.1 hang ` can mua vao gid hang x rrr

14 |UC6 Thêm sản phẩm vào giỏ Người dùng thêm sản phẩm

¬ Người dùng xem các sản

15 UC 7.1 Xem gio hang phẩm trong giỏ hàng ; ;

Xóa sản phâm khỏi giỏ Người dùng xóa sản phẩm

; Ặ , „ | Người dùng thay đôi số ,

17 |UC7.3 Chỉnh sô lượng, kích thước, lượng, kích thước, màu sắc

Đồ án môn học Công nghệ Java

Người dùng chọn sản phẩm

18 |UC7.4 Chọn sản phẩm thanh toán co nhu cau mua ; x

kg a a Người dùng thay đôi địa chỉ

19 |UC7.4.1 | Thay đổi địa chỉ giao hàng giao h ang ay cor aa en

on Người dùng chọn phương

20 |UC74.2 Cơn Phương thức vận thức vận chuyển (Vận chuyển

y nhanh, chậm)

, Người dùng chọn phương

21 | UC7.4.3 | (on Phuong thite than - Í thực thanh toán (COD,

VNPay)

22 | UC7.4.4 Ghi chu Người dùng nhập ghi chú

23 |UC7.5 Thanh toán người dùng thanh toán đơn ang

› ie Le › Admin quan ly théng tin

24 |UC8.1 Quản lý khách hàng khách hàng

26 |UC83 Cap nhat thong tin khach Admin cap nhat thong tin

hang khach hang

27 | UC8.4 Xóa khách hàng Admin xóa khách hàng

¬ og ets Admin tim kiém khach hang

28 UC 8.5 Tìm kiêm khách hàng bằng từ khóa `

29 |UC9.1 Quan ly san pham Admin quan ly san pham

30 | UC9.2 Xóa sản phâm Admin xóa sản phẩm

31 |UC9.3 Thêm sản phẩm Admin thêm sản phâm

32 | UC9.4 Loc san pham Admin loc san pham theo loai

33 | UC9.5 Tim kiém san pham Admin tim kiệm san pham băng tên hoặc id

34 | UC9.6 Xem thông tin sản phẩm pham Admin xem thông tín sản

36 | UC10.1 Quan ly héa don Admin quan ly héa don

37 =| UC10.2 Xem tong doanh thu Admin xem tổng doanh thu

38 |UC103 Xem danh sách hóa don emin xem danh sach hoa

39 | UC10.4 Xem chi tiét hoa don Admin xem chỉ tiết hóa đơn

Cập nhật trạng thái thanh Admin cap nhật trang thải

40 |UC1041 luận thanh toán của hóa đơn

41 UC10.4.2 Cập nhật trang thai van Admin cap nhat trang thai van

chuyên chuyên của hóa đơn

42 |UC10.5 Xóa hóa don Admm xóa hóa don

Admin tim kiém hóa đơn

43 |UC10.6 TÌm kiếm hóa don bằng mã hóa đơn hoặc mã

người dùng

Bang 3: Danh sach cac usecase

4 UNGDUNG MO HINH MVC

Áp dụng mô hình MVC (Model- View-Controller) vào dự án xây dựng website kinh doanh vali của chúng tôi đã đem lại nhiều lợi ích đáng kể Trong mô hình này,

chúng tôi đã phân chia ứng dụng thành ba phản chính: Model, View va Controller Phan Model chịu trách nhiệm quản lý dữ liệu của ứng dụng, từ các thông tin về

sản phâm vali, thông tin người dùng đến các đơn hàng Đặc biệt, chúng tôi đã sử dụng

cơ sở dữ liệu MongoDB đề lưu trữ dữ liệu một cách linh hoạt và hiệu quả

Phân View là nơi tạo ra giao diện người dùng thân thiện và trực quan Bang cach

sử dụng ReactJS ket hop voi Ant Design, chung tôi đã tạo ra một trải nghiệm người dùng đẹp mất và dễ sử dụng

Phản Controller xử lý logic nghiệp vụ của ứng dụng và điều hướng các yêu câu từ

người dùng tới Model và View tương ứng Được phát triên bằng Spring Boot, Controller giúp chúng tôi quản lý các yêu cầu từ phía người dùng, Xử lý logic như quản lý sản phẩm, người dùng và đơn hàng, và sau đó điều hướng kết quả đến View đề hiển thị cho người dùng

Với việc áp dụng mô hình MVC, chúng tôi đã phân tách rõ ràng các thành phan của ứng dụng, từ đó tạo điều kiện cho việc bảo trì, mở rộng và phát triển dễ dàng hơn Đồng thời, mô hình này cũng giúp tăng tính module hóa và giảm sự phụ thuộc giữa các

phản của ứng dụng, làm cho dự án của chúng tôi trở nên linh hoạt và dễ quản lý hơn

5 KÉTLUẬN

Sau quá trình phân tích và triển khai, nhóm chúng tôi đã hoàn thành website kinh

doanh vali với nhiều tính năng hữu ích và hiệu quả Website cho phép người dùng đăng

ký, đăng nhập, quên mật khẩu, tìm kiếm, lọc, xem sản phẩm và xem chỉ tiết sản phẩm

Việc thêm sản phẩm vào giỏ hàng và thanh toán được thực hiện thuận tiện với hai

phương thức: khi nhận hàng và qua VNPay Người dùng có thẻ xem, chỉnh sửa thông tin cá nhân và xem lại lịch sử đơn hàng Ngoài ra, website còn có trang quản trị (admin)

dé quan lý người dùng, sản phẩm và đơn hàng hiệu quả Nhìn chung, website đã đạt được mục tiêu ban đầu, mang lại giải pháp toàn diện cho việc kinh doanh vali trực tuyến

va tao nén tang vững chắc cho các tính năng mở rộng trong tương lai

Tuy nhiên, vẫn còn một số hạn chế cản khác phục đẻ hoàn thiện và nâng cao trải

nghiệm người dùng Hệ thong hiện tại chưa tích hợp cơ chế quản lý xác thực người dung bang token, anh hưởng đến bảo mật và trải nghiệm người dùng Trang web còn gặp van

đề về hiệu suất khi reload trang và quy trình thanh toán với VNPay vẫn chưa được tối

ưu hết chức năng khi người dùng huỷ thanh toán, làm giảm trải nghiệm sử dụng

Đẻ khắc phục những hạn chế này và nâng cao chất lượng website, nhóm chúng tôi

sẽ tích hợp cơ chế xác thực người dùng bằng token đề tăng cường bảo mật Bên cạnh

đó, tối ưu hóa mã nguồn và tài nguyên đề cải thiện tốc độ tải trang và giảm thời gian

Đồ án môn học Công nghệ Java

phản hài, từ đó nâng cao trải nghiệm người dùng Ngoài ra, quy trình thanh toán bằng VNPay sẽ được hoàn thiện đề xử lý tốt hơn các tình huống khác nhau, đảm bảo sự mượt

ma va dang tin cậy trong giao dịch Cuối cùng, chúng tôi sẽ phát triển tính năng áp dụng voucher dé cung cap thêm giá trị cho người dùng, khuyến khích mua sắm và tăng cường

su hài lòng của khách hàng

TAI LIEU THAM KHAO

[1] Spring Boot -Gui email qua SMTP Link: httos:/Avww.geeksforgeeks.org/spring- boot-sending-email-via-smtp/ (Ngay truy cap: 21/05/2024)

[2lHướng dan tich hop hé théng PAY - Céng thanh toán VNPAY Link:

https://sandbox.vnpayment.vn/apis/docs/thanh-toan-pay/pay.html (Ngày truy

cập: 21/05/2024)

Pham Thi Diém Quynh — Nguyén Cam Van

Đồ án môn học Công nghệ Java

PHU LUC PHAN CÔNG NHIEM VU

STT Thanh vién Nhiệm vụ

Phạm Thị Diễm Quỳnh Xây dựng chức năng đăng ký, đăng nhập, hiệr

thị thong tin người dùng, đối mật khâu, hiên thị

lịch sử đơn hàng, quên mật khâu, tìm kiém sar phẩm, header, footer, admin quản lý người dù

thu thập dữ liệu sản phâm, chỉnh sửa lỗi, viết bị cáo, slide, thuyết trình

Phân chia công việc, xây dựng trang sản ph

(loc theo loại sản phẩm, lọc theo giá), trang ¢

tiết sản phâm, thêm sản phẩm vào giỏ hàng, tra giỏ hàng, trang thanh toán, thanh toán

VNPay, trang chu, admin quan lý sản phải

quản lý hoá đơn, thu thập dữ liệu sản phẩm chỉnh sửa lỗi, viết báo cáo, slide, demo

Pham Thi Diém Quynh — Nguyén Cam Van

PHỤ LỤC DEMO

Chạy sản phẩm các bước sau (trên Visual Studio Code)

Bước 1:

« - Cài đặt apache maven: hffps://maven.apache.org/download.cgi

« _ Cài đặt jdk và điều chỉnh biến môi trường JAVA_HOME

« _ Cài đặt nodejs và mongoDB

« Trong VS Code: cài đặt các extension: Spring Initializr Java Support, spring boot tool, spring boot dashboard, spring boot extension pack, extension package for java, maven for java, maven dependency explorer, test runner for Java Bước 2:

« _ Với backend: mở pom.xml, nhân save dé cài đặt các dependency cần thiết

« _ Với mongodb: Import dit ligu trong drive vao mongodb dé test

« V6i frontend: npm install dé cai đặt các package cho dự án reactjs

Bước 3: Run sản phẩm

« Voi frontend:

+ cd fe-vali

+ npm start

+ truy cập ontend qua địa chi “http://localhost:3000”

«Ö - Với backend:

+ cd vali

+ mvn spring-boot:run

+ truy cap backend qua dia chi “http://localhost:8080”

Pham Thi Diém Quynh — Nguyén Cam Van