hệ thống quản lý cửa hàng cho thuê xe ô tô (co code demo )

thiết kế hệ thống quản lý cửa hàng cho thuê xe ô tô theo kiến trúc microservices cho các chức năng: quản lý xe ô tô cho thuê, khách hàng đặt xe online , nhận trả xe và thanh toán từ khách hàng . Gồm thiết kế thực thể, thiết kế csdl, hoạt động của từng module, giao diện phía client, biểu đồ lớp chi tiết phía client+server, biểu đồ tuần tự phía client + server

Trang 1

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

KHOA CÔNG NGHỆ THÔNG TIN 1

- -

BÁO CÁO TỔNG HỢP KIẾN TRÚC VÀ THIẾT KẾ PHẦN MỀM

Hà Nội, 5/2023

Trang 2

LỜI CẢM ƠN

Em xin gửi lời cảm ơn chân thành đến thầy Nguyễn Mạnh Hùng - giảng viên môn Kiến trúc và thiết kế phần mềm, trường Học viện Công nghệ Bưu chính – Viễn thông đã trang bị giúp em những kỹ năng cơ bản và kiến thức cần thiết để hoàn thành được bài tập lớn này

Tuy nhiên, trong quá trình làm bài tập lớn do kiến thức chuyên ngành của

em còn hạn chế nên không thể tránh khỏi một vài thiếu sót khi trình bày và đánh giá vấn đề Rất mong nhận được sự góp ý, đánh giá của thầy để đề tài của em thêm hoàn thiện hơn

Em xin chân thành cảm ơn!

Trang 3

MỤC LỤC

I Thiết kế thực thể 1

II Thiết kế cơ sở dữ liệu 2

III Chức năng “Quản lý xe ô tô cho thuê” 2

1 Hoạt động của module 2

2 Giao diện phía client 3

3 Biểu đồ lớp chi tiết: 5

a Client: Sử dụng ReactJS 5

b Server: Sử dụng Express 6

4 Biểu đồ tuần tự: 6

a Client: 6

b Server 8

IV Chức năng “Khách hàng đặt xe online” 10

2 Giao diện bên client: 11

a Client: sử dụng ReactJS 13

b Server: sử dụng Express 13

a Client: 14

b Server: 15

V Chức năng “Nhận trả xe và thanh toán từ khách hàng” 16

2 Giao diện bên client: 17

a Client: sử dụng ReactJS 18

b Server: sử dụng Express 19

a Client: 20

b Server: 21

Trang 4

I Thiết kế thực thể

- Các danh từ liên quan đến người: User, Staff, Customer

+ User: username, password, name, role, phoneNumber, address, email

+ Staff, Customer kế thừa User

- Các danh từ liên quan đến vật: Car, CarBooking, PenaltyError

+ Car: name, price, feature, type, description

+ CarBooking: car, customer, rentalDate, returnDate, deposit, totalFee

+ PenaltyError: name, penaltyPrice

+ CarReturning: carBooking, Staff, penaltyError

- Xác định quan hệ số lượng giữa các lớp thực thể:

+ 1 Customer có thể có nhiều CarBooking -> quan hệ 1-n

+ 1 Car có thể có nhiều CarBooking -> quan hệ 1-n

+ 1 CarBooking sẽ có 1 CarReturning -> quan hệ 1-1

+ 1 CarReturning có thể có nheieuf PenaltyError -> quan hệ 1-n

+ 1 Staff có thể xử lý nhiều CarReturning -> quan hệ 1-n

- Xác định quan hệ đối tượng giữa các lớp thực thể:

+ Staff, Customer kế thừa User

+ Customer là thành phần của CarBooking

+ CarBooking là thành phần của Car

+ PenaltyError là thành phần của CarReturning

+ Staff là thành phần của CarReturning

- Thiết kế lớp thực thể:

+ Bổ sung id cho các lớp không kế thừa từ lớp khác: User,

CarBooking, Car, PenaltyError, CarReturning

+ Thuộc tính các lớp được bổ sung theo kiểu của ngôn ngữ Javascript

+ Bổ sung các thuộc tính thành phần của quan hệ hợp thành/ gắn chặt

Trang 5

➔ Thực thể hệ thống:

II Thiết kế cơ sở dữ liệu

- Mỗi lớp thực thể đề xuất thành 1 bảng

- Bỏ qua các thuộc tính kiểu đối tượng

- Các thực thể quan hệ 1-n và 1-1 giữ nguyên quan hệ

- Khóa chính được thiết lập với thuộc tính id của bảng: tblUser, tblCarBooking, tblCar, tblPenaltyError, tblCarReturning

III Chức năng “Quản lý xe ô tô cho thuê”

1 Hoạt động của module

- Nhân viên đăng nhập vào hệ thống, giao diện trang chủ phía client hiện lên

- Nhân viên chọn button thêm xe, giao diện thêm xe hiện lên

- Nhân viên nhập thông tin của xe và nhấn button Thêm xe gọi tới

CarService.js

- Lớp CarService.js gửi request thêm xe tới server thông qua http request

Trang 6

- Server nhận request và thêm thông tin xe vào database rồi trả lại response cho client

- Phía client hiển thị thêm xe thành công

- Nhân viên chọn button sửa xe, giao diện tìm kiếm xe hiện lên

- Nhân viên nhập từ khóa vào ô input và nhấn button search gọi tới lớp

CarService.js

- Lớp CarService.js gửi request tới server

- Server nhận request tìm kiếm thông tin theo từ khóa và trả về cho client

- Phía client hiển thị thông tin tìm kiếm trên giao diện tìm kiếm xe

+ Nhân viên chọn sửa 1 xe, gọi tới lớp CarService.js gửi request hiển thị thông tin xe theo id tới server

• Server nhận request và trả về thông tin xe theo id cho client

• Client hiển thị thông tin xe trên giao diện cập nhật xe

• Nhân viên cập nhật thông tin mới và nhấn Cập nhật, lớp CarService.js gửi request cập nhật xe tới server

• Server nhận request và cập nhật thông tin xe rồi trả về response thành công cho client

• Client hiển thị cập nhật thành công + Nhân viên chọn xóa 1 xe, gọi tới lớp CarService.js gửi request yêu cầu xóa xe

• Server nhận request và xóa xe trong database , trả về response thành công cho phía client

• Client hiển thị thông báo xóa thành công cho nhân viên

2 Giao diện phía client

Trang 8

Tìm kiếm

Tìm kiếm

Mã xe Tên xe Mô tả Sửa Xóa

(click để sửa) (click để xóa)

Trở lại

Sửa thông tin xe

Tên xe Toyota

Gía thuê 10000000

Tính năng Xe chạy nhanh

Loại xe Toyota

Mô tả

Cập nhật

3 Biểu đồ lớp chi tiết:

a Client: Sử dụng ReactJS

Trang 9

- Tầng giao diện có trang: LoginView.js, HomeStaffView.js,

ManagementView.js, AddCarView.js, SearchCarView.js, UpdateCarView.js

- Tầng call api phía server: UserService.js, CarService.js

- Tầng thực thể: User, Car

b Server: Sử dụng Express

- Tầng định danh url api: Server.js

- Tầng thao tác với cơ sở dữ liệu: UserController.js, CarController.js

- Tầng thực thể: User, Car

4 Biểu đồ tuần tự:

a Client:

Trang 10

1 Tại giao diện đăng nhập, nhân viên đăng nhập vào hệ thống

2 Lớp LoginView.js gọi hàm checkLogin() để yêu cầu đăng nhập

3 Hàm checkLogin() gọi đến lớp UserService.js

4 Lớp UserService.js gọi hàm fetchCheckLogin() để call api đến server kiểm tra đăng nhập

5 Hàm fetchCheckLogin() trả về kết quả đăng nhập cho lớp LoginView.js

6 Đăng nhập thành công, lớp LoginView.js gọi lớp HomeStaffView.js

7 Lớp HomeStaffView.js hiển thị cho nhân viên

8 Nhân viên chọn quản lý xe

9 Lớp HomeStaffView.js gọi lớp ManagementCarView.js

10 Lớp ManagementCarView.js hiển thị cho nhân viên

11 Nhân viên chọn thêm xe

12 Lớp ManagementCarView.js gọi lớp AddCarView.js

13 Lớp AddCarView.js hiển thị cho nhân viênn

14 Nhân viên nhập thông tin của xe và nhấn vào button Thêm xe

15 Lớp AddCarView.js gọi hàm addCar() yêu cầu thêm xe vào cơ sở dữ liệu

16 Hàm addCar() gọi lớp CarService.js

17 Lớp CarService.js gọi hàm fetchAddCar() để call api thêm xe vào cơ sở dữ liệu

Trang 11

18 Hàm fetchAddCar() trả về kết quả cho lớp AddCarView.js

19 Lớp AddCarView.js trả kết quả cho lớp ManagementCarView.js

20 Lớp ManagementCarView.js hiển thị thêm xe thành công cho nhân viên

21 Nhân viên chọn cập nhật xe

22 Lớp ManagementCarView.js gọi lớp SearchCarView.js

23 Lớp SearchCarView.js hiển thị cho nhân viên

24 Nhân viên nhập từ khóa vào ô input và nhấn nút tìm kiếm

25 Lớp SearchCarView.js gọi hàm searchCar() yêu cầu tìm kiếm

26 Lớp hàm searchCar() gọi lớp CarService.js

27 Lớp CarService.js gọi hàm fetchSearchCar() để call api tìm kiếm

28 Hàm fetchSearchCar() trả kết quả tìm kiếm về cho lớp SearchCarView.js

29 Lớp SearchCarView.js hiển thị kết quả tìm kiếm cho nhân viên

30 Nhân viên chọn xe muốn chỉnh sửa thông tin

31 Lớp SearchCarView.js gọi lớp UpdateCarView.js

32 Lớp UpdateCarView.js hiển thị cho nhân viên

33 Nhân viên chỉnh sửa thông tin và nhấn nút Chỉnh sửa

34 Lớp UpdateCarView.js gọi hàm updateCar() yêu cầu chỉnh sửa

35 Hàm updateCar() gọi lớp CarService.js

36 Lớp CarService.js gọi hàm fetchUpdateCar() call api chỉnh sửa

37 Hàm fetchUpdateCar() trả kết quả về cho lớp UpdateCarView.js

38 Lớp UpdateCarView.js trả kết quả về cho SearchCarView.js

39 Lớp SearchCarView.js hiển thị cập nhật thành công cho nhân viên

40 Nhân viên chọn xóa một xe trong kết quả tìm kiếm

41 Lớp SearchCarView.js gọi hàm deleteCar() yêu cầu xóa thông tin xe

42 Hàm deleteCar() gọi lớp CarService.js

43 Lớp CarService.js gọi hàm fetchDeleteCar() call api xóa thông tin xe

44 Hàm fetchDeleteCar() trả kết quả về cho lớp SearchCarView.js

45 Lớp SearchCarView() hiển thị xóa thành công cho nhân viên

b Server

Trang 12

1 Client gửi yêu cầu đăng nhập tới

2 Lớp Server.js gọi lớp UserController.js

3 Lớp UserController.js gọi lớp User

4 Lớp User đóng goi thực thể User

5 Lớp User trả về kết quả cho lớp UserController.js

6 Lớp UserController.js gọi hàm checkLogin() để kiểm tra đăng nhập

7 Lớp UserController.js trả kết quả cho lớp Server.js

8 Lớp Server.js trả kết quả cho client

9 Client gửi yêu cầu tìm kiếm

10 Lớp Server.js gọi lớp CarController.js

Trang 13

11 Lớp CarController.js gọi hàm searchCar() để tìm kiếm thông tin xe

12 Lớp CarController.js gọi lớp Car

13 Lớp Car đóng gói thông tin thực thể

14 Lớp Car trả kết quả về cho lớp CarController.js

15 Lớp CarController.js trả kết quả về cho lớp Server.js

17 Client gửi yêu cầu thêm thông tin xe

19 Lớp CarController.js gọi hàm addCar() để thêm thông tin xe

25 Client gửi yêu cầu sửa thông tin xe

27 Lớp CarController.js gọi hàm updateCar() để sửa thông tin xe

33 Client gửi yêu cầu xóa thông tin xe

35 Lớp CarController.js gọi hàm deleteCar() để xóa thông tin xe

IV Chức năng “Khách hàng đặt xe online”

- Khách hàng đăng nhập thành công vào hệ thống, giao diện trang chủ khách hàng hiện ra

- Khách hàng chọn đặt xe, giao diện tìm kiếm xe hiện ra

- Khách hàng chọn loại xe, giá xe và nhấn tìm kiếm

- Lớp CarService,js gửi yêu cầu tìm kiếm xe tới server

Trang 14

- Server nhận request, tìm kiếm trong cơ sở dữ liệu và trả về kết quả tìm kiếm cho client

- Phía client hiển thị danh sách tìm kiếm cho khách hàng trên giao diện tìm kiếm

- Khách hàng chọn 1 xe và chọn Đặt xe

- Lớp CarBookingService.js gửi request đặt xe tới server

- Server nhận request, xử lý và trả kết quả về cho client

- Phía client hiển thị đặt xe thành công cho khách hàng

2 Giao diện bên client:

Trang chủ khách hàng

Đặt xe

Xem đơn hàng

Tìm kiếm

Loại xe Select

Gía xe tối đa Select

Tìm kiếm

Mã xe Tên xe Mô tả Chọn

(click để chọn )

Trang 16

- Tầng giao diện có các trang: HomeCustomerView.js, OrderView.js,

SearchRentalCarView.js, CarInformationView.js, CarBookingView.js

- Tầng call api phía server: CarService.js, CarBookingService.js

- Tầng thực thể: Car, CarBooking

b Server: sử dụng Express

- Tầng định danh url api: Server.js

- Tầng thao tác với cơ sở dữ liệu: CarBookingController.js, CarController.js

- Tầng thực thể: CarBooking, Car

Trang 17

4 Biểu đồ tuần tự:

a Client:

1 Tại giao diện HomeCustomerView.js, khách hàng chọn nút đặt xe

2 Lớp HomeCustomerView.js gọi lớp SearchRentalCarView.js

3 Lớp SearchRentalCarView.js hiển thị cho khách hàng

4 Khách hàng chọn loại xe và giá xe rồi nhấn button Tìm kiếm

5 Lớp SearchRentalCarView.js gọi hàm searchRentalCar() yêu cầu tìm kiếm

Trang 18

7 Lớp CarService.js gọi hàm fetchSearchRentalCar() call api tìm kiếm

8 Lớp CarService.js trả kết quả tìm kiếm cho lớp SearchRentaCarView.js

9 Lớp SearchRentalCarView.js hiển thị kết quả tìm kiếm cho khách hàng

10 Khách hàng click vào một xe

11 Lớp SearchRentalCarView.js gọi lớp CarInformationView.js

12 Lớp CarInformationView.js gọi hàm getCar() để yêu cầu lấy thông tin của xe được chọn

13 Lớp CarInformationCarView.js gọi lớp CarService.js

14 Lớp CarService.js gọi hàm fetchGetCar() call api lấy thông tin

15 Lớp CarService.js trả kết quả cho lớp CarInformationView.js

16 Lớp CarInformationView.js hiển thị cho khách hàng

17 Khách hàng chọn ngày bắt đầu thuê, ngày kết thúc thuê, địa điểm nhận xe và chọn nút Đặt xe

18 Lớp CarInformationView.js gọi lớp CarBookingView.js

19 Lớp CarBookingView.js hiển thị thông tin cho khách hàng

20 Khách hàng chọn hình thức thanh toán và nhấn chọn Xác nhận đặt xe

21 Lớp CarInformationView.js gọi hàm BookingCar() yêu cầu đặt xe

22 Lớp CarInformationView.js gọi lớp CarBookingService.js

23 Lớp CarBookingService.js gọi hàm fetchBookingCar() call api đặt xe

24 Lớp CarBookingService.js trả kết quả cho lớp CarBookingView.js

25 Lớp CarBookingService.js trả kết quả về cho lớp HomeCustomerView.js

26 Lớp HomeCustomerView.js hiển thị đặt xe thành công

b Server:

Trang 19

1 Client gửi yêu cầu tìm kiếm

3 Lớp CarController.js gọi hàm searchRentalCar() để tìm kiếm

4 Lớp CarController.js gọi lớp Car để đóng gói

5 Lớp Car đóng gói thực thể

7 Lớp CarController.js trả kết quả về cho Server.js

9 Client gửi yêu cầu lấy thông tin xe cụ thể

11 Lớp CarController.js gọi hàm getCar() để lấy thông tin xe

12 Lớp CarController.js gọi lớp Car để đóng gói

13 Lớp Car đóng gói thực thể

15 Lớp CarController.js trả kết quả về cho Server.js

17 Client gửi yêu cầu đặt xe

18 Lớp Server.js gọi lớp CarBookingController.js

19 Lớp CarBookingController.js gọi hàm BookingCar()

20 Lớp CarBookingController.js gọi lớp CarBooking để đóng gói

21 Lớp CarBooking đóng gói thực thể

22 Lớp CarBooking trả kết quả về cho lớp CarBookingController.js

23 Lớp CarBookingController.js trả kết quả về cho Server.js

V Chức năng “Nhận trả xe và thanh toán từ khách hàng”

- Khách hàng đến cửa hàng và yêu cầu trả xe

- Nhân viên đăng nhập vào hệ thống thành công, giao diện trang chủ nhân viên hiện ra

- Nhân viên chọn Trả xe, giao diện tìm kiếm hiện ra

- Nhân viên tìm kiếm hợp đồng xe của khách hàng để tiến hàng trả xe

- Sau khi có kết quả tìm kiếm, nhân viên nhấn vào xem chi tiết hợp đồng

- Nhân viên xác nhận với khách hàng về thông tin, giá thuê và tiền hoàn trả

- Khách hàng xác nhận đúng thông tin

- Nhân viên hỏi khách hàng hình thức thanh toán hợp đồng

- Khách hàng chọn hình thức tiền mặt

- Nhân viên chọn button Trả xe trên giao diện Trả xe

- Nhân viên thanh toán hợp đồng và gửi biên lai cho khách hàng

Tiêu đề	Hệ Thống Quản Lý Cửa Hàng Cho Thuê Xe Ô Tô
Người hướng dẫn	Thầy Nguyễn Mạnh Hùng - Giảng Viên
Trường học	Học Viện Công Nghệ Bưu Chính Viễn Thông
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Báo Cáo Tổng Hợp
Năm xuất bản	2023
Thành phố	Hà Nội

Định dạng
Số trang	25
Dung lượng	1,7 MB