Trường Đại Học Bách Khoa - Đại học Quốc gia TP.HCMKhoa Khoa Học & Kỹ Thuật Máy Tính 2.1 Giao diện mở đầu Đây là giao diện hiển thị đầu tiên khi truy cập vào hệ thống, bao gồm tính năng đ
Trang 1ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC BÁCH KHOA
KHOA KHOA HỌC VÀ KĨ THUẬT MÁY TÍNH
LẬP TRÌNH NÂNG CAO
Bài tập lớn
HỆ THỐNG QUẢN LÝ ĐỘI XE
NGÀNH: KHOA HỌC MÁY TÍNH
GVHD: Mai Đức Trung.
Danh sách thành viên: Đặng Minh Nhật - 2212387
Đặng Trần Minh Nhật - 2212388 Nguyễn Minh Khoa - 2211627 Trần Hưng Quốc - 2212841 Mai Đình Quốc Anh - 2012595 Nguyễn Trần Hồng Ngọc - 1813253
TP HỒ CHÍ MINH, THÁNG 4/2024
Trang 2Mục lục
2.1 Giao diện mở đầu 2 2.2 Giao diện quản lý 3
3 Sơ đồ Lớp của hệ thống (Class Diagram) 4
4.1 Demo đăng nhập 5 4.2 Demo tính năng quản lý 6 4.3 Link Demo 10
Trang 3Danh mục hình ảnh
1 Giao diện đăng nhập 2
2 Giao diện đăng ký 2
3 Giao diện quản lý 3
4 Class diagram của hệ thống 4
5 Giao diện đăng nhập 5
6 Giao diện đăng ký 5
7 Giao diện đăng nhập thành công 6
8 Giao diện đăng nhập không thành công 6
9 Bảng dữ liệu quản lý của từng mục 7
10 Giao diện pop up nhập thông tin tương ứng với mỗi mục quản lý 7
11 Giao diện pop up chọn tài xế khi tạo Lộ trình mới 8
12 Giao diện pop up xác nhận thêm mới tương ứng với mỗi mục quản lý 8
13 Giao diện thông báo thêm mới thành công tương ứng với mỗi mục quản lý 8
14 Giao diện pop up thông tin chi tiết tương ứng ở mỗi mục quản lý 9
15 Giao diện pop up chỉnh sửa thông tin tương ứng với mỗi mục quản lý 9
16 Giao diện chọn dữ liệu muốn xóa 9
17 Giao diện pop up xác nhận xóa dữ liệu đã chọn 10
18 Giao diện pop up xóa thành công 10
Trang 4Danh sách bảng
1 Phân công nhiệm vụ 11
Trang 5Trường Đại Học Bách Khoa - Đại học Quốc gia TP.HCM
Khoa Khoa Học & Kỹ Thuật Máy Tính
Hiện nay, bên cạnh sự phát triển của công nghệ, việc sử dụng các phần mềm quản lý cũng trở nên rất phổ biến Hệ thống quản lý đội xe là một ứng dụng rất hữu ích trong việc quản lý và theo dõi hoạt động của một hoặc nhiều đội
xe Hệ thống được xây dựng hưỡng đến các doanh nghiệp vận tải, dịch vụ giao hàng,
Hệ thống quản lý đội xe này được thiết kế với mục tiêu không chỉ đơn thuần là một công cụ để theo dõi và quản lý thông tin xe và tài xế, mà còn là một giải pháp thông minh giúp tối ưu quy trình và thời gian vận hành Hệ thống
sẽ cung cấp cho quản lý một cái nhìn tổng quan và chi tiết về tất cả các khía cạnh của đội xe, từ tình trạng hiện tại của mỗi xe, lịch sử bảo dưỡng, đến lịch trình và hiệu quả của mỗi chuyến đi
Hệ thống quản lý đội xe thường được tích hợp với các công nghệ hiện đại nhằm cung cấp thông tin chi tiết và chính xác, giúp nhà quản lý tối ưu hóa quá trình vận hành và điều phối, giảm thiểu chi phí, nâng cao hiệu suất của đội xe
Trang 6Trường Đại Học Bách Khoa - Đại học Quốc gia TP.HCM
Khoa Khoa Học & Kỹ Thuật Máy Tính
2.1 Giao diện mở đầu
Đây là giao diện hiển thị đầu tiên khi truy cập vào hệ thống, bao gồm tính năng đăng nhập và đăng ký
Hình 1: Giao diện đăng nhập
Hình 2: Giao diện đăng ký
Trang 7Trường Đại Học Bách Khoa - Đại học Quốc gia TP.HCM
Khoa Khoa Học & Kỹ Thuật Máy Tính
2.2 Giao diện quản lý
Đây là giao diện quản lý, bao gồm các tính năng:
• Báo cáo thống kê: có thể theo dõi tổng quan các số liệu được thống kê qua biểu đồ
• Quản lý xe: có thể thêm, sửa, xóa các thông tin của xe; xem danh sách tất cả các xe
• Quản lý tài xế: có thể thêm, sửa, xóa các thông tin của tài xế; xem danh sách tất cả các tài xế
• Quản lý lộ trình: có thể thêm, sửa, xóa các thông tin của lộ trình; xem danh sách tất cả các lộ trình
Hình 3: Giao diện quản lý
Trang 8Trường Đại Học Bách Khoa - Đại học Quốc gia TP.HCM
Khoa Khoa Học & Kỹ Thuật Máy Tính
Sơ đồ Lớp của hệ thống quản lý đội xe:
Hình 4: Class dỉagram của hệ thống
Các thành phần của Class diagram gồm:
• Vehicle: đại diện cho thông tin của phương tiện gồm các thuộc tính như: type(loại phương tiện), height(chiều cao), length(chiều dài), width(chiều rộng), Class Vehicle được chia thành 3 loại ContainerTruck, Bus, Truck; các lớp này đều có quan hệ kế thừa với lớp Vehicle
• Adress: Đại diện cho thông tin về địa điểm trên bản đồ gồm các thuộc tính như: latitude(vĩ độ), longitude(kinh độ), address(địa chỉ)
• Trip: đại diện cho thông tin của lộ trình gồm các thuộc tính như: begin(địa điểm bắt đầu), end(địa điểm kết thúc), distance(khoảng cách giữa 2 địa điểm), price(giá), driverNumber(số điện thoại của tài xế),
• DriverRegister: Đại diện cho thông tin của tài xế gồm các thuộc tính như: driverName(tên), driverNumber(số điện thoại), driverStatus(trạng thái),
• iSignUp, iForgotPass, iResponse, UsersOperation: chứa các thuộc tính và phương thức để thực hiện đăng nhập và đăng ký tài khoản
• DriverOperation, RouteOperation, VehicleOperation: là các Interface
Trang 9Trường Đại Học Bách Khoa - Đại học Quốc gia TP.HCM
Khoa Khoa Học & Kỹ Thuật Máy Tính
4.1 Demo đăng nhập
• Có thể đăng nhập vào hệ thống bằng tài khoản đã đăng ký hoặc đăng nhập bằng tài khoản google
Hình 5: Giao diện đăng nhập
• Nếu người dùng chưa có tài khoản thì có thể truy cập vào trang Đăng ký bằng cách nhấn vào dường dẫn Đăng ký tài khoản
Hình 6: Giao diện đăng ký
Trang 10Trường Đại Học Bách Khoa - Đại học Quốc gia TP.HCM
Khoa Khoa Học & Kỹ Thuật Máy Tính
• Sau khi nhấn nút Đăng nhập, hệ thống sẽ hiển thị thông báo thành công khi người dùng đăng nhập thành công vào hệ thống
Hình 7: Giao diện đăng nhập thành công
• Hệ thống sẽ hiển thị thông báo lỗi khi người dùng đăng nhập không thành công
Hình 8: Giao diện đăng nhập không thành công
4.2 Demo tính năng quản lý
Sau khi đăng nhập thành công, người dùng có thể chọn mục muốn truy cập trong thanh menu bên trái để truy cập đến giao diện Quản lý tương ứng
Trang 11Trường Đại Học Bách Khoa - Đại học Quốc gia TP.HCM
Khoa Khoa Học & Kỹ Thuật Máy Tính
Hình 9: Bảng dữ liệu quản lý của từng mục
Ứng với mỗi mục quản lý đều có các tính năng như sau:
1 Thêm mới một dữ liệu
• Người dùng chọn vào nút Thêm mới nằm kế ô Tìm kiếm tương ứng trên mỗi bảng dữ liệu, hệ thống sẽ hiển thị pop up để người dùng nhập thông tin cần quản lý
Hình 10: Giao diện pop up nhập thông tin tương ứng với mỗi mục quản lý
• Sau khi đã nhập đầy đủ thông tin yêu cầu, người dùng chọn vào ô Xác nhận
– Đối với mục quản lý Lộ trình, hệ thống sẽ hiển thị pop up cho người dùng chọn tài xế mong muốn
Trang 12Trường Đại Học Bách Khoa - Đại học Quốc gia TP.HCM
Khoa Khoa Học & Kỹ Thuật Máy Tính
Hình 11: Giao diện pop up chọn tài xế khi tạo Lộ trình mới
– Đối với các mục quản lý còn lại, hệ thống sẽ hiển thị pop up yêu cầu người dùng xác nhận lại việc
thêm mới
Hình 12: Giao diện pop up xác nhận thêm mới tương ứng với mỗi mục quản lý
• Người dùng chọn vào ô Xác nhận để hoàn tất việc thêm mới, hệ thống sẽ hiển thị thông báo khi thêm mới thành công
Hình 13: Giao diện thông báo thêm mới thành công tương ứng với mỗi mục quản lý
2 Xem chi tiết và chỉnh sửa thông tin
• Chọn vào ô mũi tên ở cột Chi tiết của hàng dữ liệu muốn xem hoặc chỉnh sửa tương ứng ở mỗi mục quản lý, hệ thống sẽ hiển thị pop up thông tin chi tiết tương ứng của dữ liệu mà người dùng đã chọn
Trang 13Trường Đại Học Bách Khoa - Đại học Quốc gia TP.HCM
Khoa Khoa Học & Kỹ Thuật Máy Tính
Hình 14: Giao diện pop up thông tin chi tiết tương ứng ở mỗi mục quản lý
• Để chỉnh sửa thông tin người dùng chọn ô Chỉnh sửa, sau khi chỉnh sửa thông tin người dùng nhấn chọn Lưu để lưu thông tin
Hình 15: Giao diện pop up chỉnh sửa thông tin tương ứng với mỗi mục quản lý
3 Xóa một hoặc nhiều dữ liệu có sẵn trong danh sách
• Người dùng chọn ô checkbox ở đầu mỗi hàng dữ liệu muốn xóa, hệ thống sẽ hiển thị nút Xóa ở phía trên bảng kế bên nút Thêm mới tương ứng ở mỗi mục quản lý
Hình 16: Giao diện chọn dữ liệu muốn xóa
• Người dùng chọn ô Xóa để thực hiện xóa dữ liệu đã chọn, hệ thống hiển thị pop up xác nhận
Trang 14Trường Đại Học Bách Khoa - Đại học Quốc gia TP.HCM
Khoa Khoa Học & Kỹ Thuật Máy Tính
Hình 17: Giao diện pop up xác nhận xóa dữ liệu đã chọn
• Người dùng chọn ô Xác nhận để xác nhận việc xóa dữ liệu đã chọn, hệ thống hiển thị thông báo xóa thành công
Hình 18: Giao diện pop up xóa thành công
4.3 Link Demo
Link web nhóm đã deploy:
https://hcmut-assignments.vercel.app/
Link github, phần source code nằm trong mục test-vercel:
https://github.com/MinzNhat/HCMUT-Assignments
Link báo cáo ( youtube) :
https://youtu.be/5Zr0CGN0jBM
Trang 15Trường Đại Học Bách Khoa - Đại học Quốc gia TP.HCM
Khoa Khoa Học & Kỹ Thuật Máy Tính
Họ và tên Nhiệm vụ Mức độ hoàn thành
Đặng Trần Minh Nhật Hiện thực chức năng quản lý tài xế 100%
Nguyễn Minh Khoa Hiện thưc chức năng quản lý xe 100%
Trần Hưng Quốc Hiện thực chức năng đăng nhập cho người dùng 100%
Mai Đình Quốc Anh Hiện thực chức năng quản lý lộ trình 100%
Nguyễn Trần Hồng Ngọc Hiện thực chức năng quản lý lộ trình 100%
Đặng Minh Nhật Hiện thực giao diện hệ thống 100%
Bảng 1: Phân công nhiệm vụ