Báo cáo nhóm 5:

Đề tài: Phần Mềm Quản lý đào tạo

NGÔ QUANG HIẾU - 20182514

NGUYỄN ĐỨC BÌNH - 20182380
NGUYỄN ĐỨC THẮNG - 20182779
I Giới thiệu đề tài

 Thiết kế phần mềm đăng ký khóa học giúp quản lý đăng ký khóa học online, điểm
 Giảng viên có thể tra cứu lịch học, nhập điểm cho sinh viên
 Sinh viên có thể xem lịch học, xem kết quả học tập và đăng ký khóa học của mình
2 các công nghệ sử dụng
 1. Git để quản lý dự án
 2. Backend: sử dụng spring boot java thiết kế quản lý cơ sở dữ liệu, phần mềm intelliJ để code,
datagrip -> quản lý cơ sở dữ liệu, postman -> test api
 3. frontend: visual code -> code frontend, sử dụng reactjs
 Frontend gọi dữ liệu tới backend thông qua api
 Link sản phẩm: http://45.13.132.247:3000/
Tk admin: admin, password:1
Tk giảng viên: giangvien, password:1
Tk sinh viên: sinhvien, password:1
Link git:
frontend: https://github.com/hieubap/fe-react-medical-education.git
Backend: https://github.com/hieubap/MedicalEducation.git
backend template: https://github.com/hieubap/libS.git
3 Phần giao diện với reactjs
 Các framework: ant-design, react-router(để chuyển hướng các url), redux(lưu trữ
dữ liệu chung giữa các component), toast ( hiện thông báo)
3.1 Quyền admin hệ thống

 Quản lý khóa học

 Quản lý môn học
 Quản lý địa điểm
 Quản lý cơ sở
 Xếp lịch khóa học
 Quản lý tài khoản
 Thông báo
3.1.1 Quản lý khóa học

- Khóa học gồm các trường thông tin:

ID, Mã khóa học, Tên khóa học, Tên cơ sở, Học phí, Số lượng đăng ký, Giới hạn
đăng ký, Số tiết, Trạng thái(Thời gian đăng ký, đang học, hoàn thành), Ngày tạo,
Ngày sửa

- Các tính năng cho khóa học: tìm kiếm khóa học qua các trường thông tin, tạo mới
khóa học, xem chi tiết, chỉnh sửa khóa học, xóa khóa học

- Các màn hình quản lý khác cũng có tính năng tương tự như với khóa học
Giao diện
3.1.1.1 Tìm kiếm theo các tiêu chí
3.1.1.2 Tạo mới
3.1.1.3 Xem chi tiết
3.1.1.4 Chỉnh sửa
3.1.1.5 Xóa
3.1.2 Quản lý Môn học

 Môn học gồm các trường thông

tin: ID, mã môn học, tên môn
học, ngày tạo, ngày sửa

 Các chức năng: tìm kiếm môn

học qua các trường thông tin,
tạo mới môn học, xem chi tiết,
chỉnh sửa môn học, xóa môn
học

Form môn học

3.1.3 Quản lý địa điểm

 Gồm các trường thông

tin: id, địa điểm, cơ sở,
ngày tạo, ngày sửa

 Các chức năng: Tìm kiếm

qua các trường id, tạo mới
địa điểm, xem chi tiết,
chỉnh sửa địa điểm, xóa
địa điểm

Form địa điểm

3.1.4 Quản lý cơ sở

 Gồm các trường thông tin: id,

tên cơ sở, ngày tạo, ngày sửa

 Chức năng: Tìm kiếm qua các

trường thông tin, xem chi tiết,
tạo mới cơ sở, chỉnh sửa cơ
sở, xóa cơ sở

Form cơ sở
 3.1.5 Xếp lịch

 Gồm các trường

thông tin: mã môn,
tên môn , Thứ, thời
gian, địa điểm, giảng
viên

 Tính năng: chọn khóa

cần xếp lịch, tạo lịch
mới, sửa lịch, xóa lịch
 Chọn khóa cần xếp lịch

Giao diện xếp lịch

Form xếp lịch
3.1.6 Quản lý tài khoản

 Gồm các trường thông tin: ID, Họ tên, tên đăng nhập, trạng thái(hoạt động, khóa),
loại tài khoản, Giới tính, tuổi ,địa chỉ, SĐT, email, Ngày tạo, ngày sửa

 Các tính năng: xem chi tiết, chỉnh sửa, khóa, cấp quyền giảng viên với tài khoản
sinh viên, chỉnh sửa môn giảng dạy với tài khoản là giảng viên, xóa tài khoản
Form tài khoản
 Form cấp quyền giảng viên và chỉnh sửa
các môn giảng dạy cho giảng viên
3.2 Giảng viên
 Xem chi tiết khóa học
 Xem danh sách các lớp được phân công giảng dạy
 Điểm danh cho sinh viên
 Nhập điểm cho sinh viên
 Xem lịch giảng dạy
Xem chi tiết khóa học
 Có thể điểm danh hoặc nhập điểm cho sinh viên
Form nhập điểm
3.3 Sinh viên
 Có thể xem chi tiết khóa học như
giảng viên
 Đăng ký khóa học
 Xem lịch học
 Xem kết quả học tập

Form đăng ký khóa học

Xem kết quả học tập
4 Thiết kế phần cơ sở dữ liệu phía Backend

 Phần mềm gồm 3 vai trò sử dụng:

 Admin
 Giảng viên
 Sinh viên
4 Thiết kế backend
 Sử dụng spring boot java.
 Viết các api để frontend gọi lấy dữ liệu. Sau khi frontend gọi yêu cầu lấy dữ liệu. Backend sẽ xử lý và
trả về dữ liệu dưới dạng json tương ứng. Frontend sẽ sử dụng dữ liệu này để render lên cho người dùng
 Bảo mật hệ thống thông qua jwt (json web token). Sau khi thực hiện login, backend sẽ trả về chuỗi
token. Chuỗi này sẽ được sử dụng để xác thực. Frontend sẽ gửi chuỗi token này tới backend mỗi lần có
yêu cầu từ máy khách
 Database sử dụng trong dự án là postgres
 4.1 Các bảng được thiết kế:

1 Khóa học
Id 2 Môn học 3 Địa điểm 4 Cơ sở
Mã Id Id Id
Tên Mã Địa điểm Tên
Id cơ sở Tên Id Cơ sở Câp cơ sở
Khai giảng Số tiết
Kết thúc Loại
Số lượng đăng ký
Giới hạn đăng ký
Học phí
Số tiết bắt buộc
Trạng thái
 4.1 Các bảng được thiết kế: 8 Thông tin người dùng
Id
Tên
7 Kết quả Username
5 Lịch 6 Đăng ký
Id Password
Id Id
Id sinh viên Tuổi
Id khóa học Id sinh viên
Giới tính
Id môn học Id khóa học Id môn
Vai trò
Id giảng viên Trạng thái Số buổi điểm danh
Sđt
Thứ Tổng kết Điểm giữa kỳ
Địa chỉ
Kíp học Xếp loại Điểm cuối kỳ
email
Địa điểm Điểm tổng kết
Id khóa học hiện tại
Ảnh đại diện
Trạng thái
4.1 Các bảng được thiết kế:
các bảng sau là các bảng phụ. Ít chức năng. Không quan
trọng với hệ thống

9 Câu hỏi khảo sát

7 Thông báo 8 Hỏi Đáp
Id
Id id
Câu hỏi
Id người nhận Id người hỏi
Id Đáp số
Đã đọc Nội dung
Nội dung
Tất cả các bảng ngoài các thông tin trên đều có chung 5 trường sau:
+ Ngày tạo(createdAt): chứa thông tin về ngày tạo bản ghi
+ Id người tạo(createdBy): sẽ sử dụng id này để map tới bảng tài khoản để xem thông tin người
tạo bản ghi
+ ngày sửa(updatedAt): chứa thông tin ngày thay đổi thông tin bản ghi
+ id người sửa(updatedBy): sẽ được mối tới bảng tài khoản để xem thông tin người sửa
+ deleted: chứa 2 giá trị 0= chưa xóa, 1 = đã xóa. Khi thực hiện thao tác xóa không hoàn toàn
xóa bản ghi này ra khỏi database mà khi đó ta update giá trị này = 1. và các lần query bảng chỉ
việc kèm điều kiện trong where ( where deleted = 0). Việc này sẽ tránh rủi ro trong việc xóa
nhầm. Giúp khôi phục dữ liệu
4.2 Tổ chức dự án
4.2.1 Viết lớp chung kế thừa
Vì các bảng đều có các chức năng xem, thêm,
sửa, xóa.
Các tính năng này là tương đương nhau. Việc
code đi code lại các bảng giống nhau nhiều
có thể dẫn tới việc sai sót trong xử lý. Để giải
quyết vấn đề này, ta viết template sẵn từ một
project riêng. Sau đó cho các lớp con kế thừa
từ từ lớp mẫu đó. Khi đó code sẽ thuận tiện
hơn. Đỡ lỗi hơn và ổn định hơn
4.2.1 Viết lớp chung kế thừa
Config: là nơi chứa các file cấu hình cho hệ thống
- Mục Audit gồm các class có nhiệm vụ khi ta thao tác sửa dữ liệu. Thông tin người sửa và tạo
sẽ được các lớp này quản lý vào lưu lại vào database
- Mục dto chứa class baseDTO: DTO là viết tắt của data transfer object. Là lớp được map với
với json. Được sử dụng trên tầng controller
- Mục filter chứa các class có nhiệm cụ xác nhận token (jwt) gửi từ phía máy khách sử dụng
stateless
- Log chứa các class ghi lại lỗi phục vụ dev khi bug xảy ra
- Security: chứa các lớp cấu hình, các Bean khởi tạo cho dự án
- Storage: chứa cấu hình phục vụ cho upload, download các file lên hệ thống
- Userdetail: là đối tượng chứa thông tin xác nhận người dùng
- controller: chứa class BaseController, lớp này là lớp sẽ đc các lớp con kế thừa. Trong nó gồm
5 hàm: search, detail ,post, put, delete là các điều hướng request
- Exception: chứa BaseException. Phục vụ ném lỗi trở về máy khách khi có ngoại lệ
4.2.1 Viết lớp chung kế thừa
- Map: chứa các class phục vụ map dữ liệu giữa dto và entity
- Msg: chứa lớp Messag, lớp này có nhiệm vụ trả các thông điệp bằng tiếng anh hoặc tiếng việt
tùy yêu cầu người dùng
- Service gồm baseService(là một interface định nghĩa các thao tác) và BaseAbstractService( là
lớp implement BaseService, chứa các xử lý logic)
- Util: gồm các lớp static chứa các hàm được sử dụng nhiều trong dự án
4.2.2 Triển khai dự án kế thừa từ các lớp chung
Sau khi đã viết được các lớp chung. Ta đi triển khai kế thừa từ các lớp chung đó
vào dự án chính
Spring boot gồm các tầng:
- Security: nơi xác thực token từ các request
- Controller: điều hướng request
- Service: xử lý logic
- Repository: là tầng tạo các transaction tương tác với databasa
 4.2.3 các xử lý logic phía backend
Các bảng đều có chức năng xem thêm sửa xóa như nhau. Riêng với một số tính năng sẽ có xử lý logic khác một chút như
sau:
A, Khóa học sẽ có 3 trạng thái: thời gian đăng ký, đang học, hoàn thành(trường trạng thái trong bảng khóa học)
Khi admin tạo mới khóa học. Khóa học đó sẽ ở trạng thái thời gian đăng ký
Hệ thống được lên lịch 1 tuần 1 lần sẽ kiểm tra xem thời gian hiện tại nếu nằm sau khai giảng sẽ đổi trạng thái khóa học từ
thời gian đăng ký -> đang học. Nếu thời gian hiện tại sau thời gian kết thúc và trạng thái là đang học -> hoàn thành
Trong thời gian đăng ký, sinh viên chỉ có thể đăng ký vàvàhủy
hủyđăng
đăngký trong thời gian này.

B, Sinh viên chỉ có thể học 1 khóa học mỗi lần và phải hoàn thành hoặc hủy đăng ký thì mới có thể đăng ký các khóa khác.
Khi đăng ký khóa học một bản ghi đăng ký sẽ được tạo ra đồng thời trường id khóa học hiện tại trong bảng tài khoản của
sinh viên sẽ được gắn với khóa học mà sinh viên đó đăng ký. Khi đó hệ thống sẽ sử dụng giá trị này để check xem sinh
viên có đăng ký được khóa học nữa hay không => chỉ đăng ký khi giá trị này null
Giá trị này sẽ null khi sinh viên hoàn thành khóa hoặc hủy khóa trong thời gian đăng ký
 4.2.3 các xử lý logic phía backend
C, bảng kết quả học tập: được tạo khi sinh viên đăng ký khóa học. Lúc này hệ thống lấy tất cả các môn học khóa và tạo ra
tầm đó bản ghi kết quả trong đó id môn học là các id môn của khóa và id học sinh là id của học sinh tạo đăng ký.
Giảng viên khi nhập điểm hoặc điểm danh cho sinh viên sẽ được lưu vào các bảng này
D, về việc upload ảnh đại diện. Sau khi 1 file ảnh được upload lên hệ thống, hệ thống sẽ tự sinh tên file và gắn tên file này
vào trong trường avatar của bảng tài khoản. Nên trường này ở kiểu nvarchar(255). Sau này khi ta muốn lấy ảnh thì ta gọi
api ảnh đi kèm với tên ảnh này để load ảnh về
E, việc tìm kiếm các trường thông tin dạng chuỗi xử lý được 2 kỹ tự cách xa nhau:
Vd: khóa đào tạo viện điện tử viễn thông. Khi người dùng gõ chữ khóa viễn thông chẳng hạn. Vẫn tìm được kết quả.
5 Triển khai dự án lên server

 Link dự án: http://45.13.132.247:3000

 Sau khi đăng ký máy chủ. Cài lên máy chủ git, nodejs, postgres, java(sử dụng
version 8), …
 Soursecode của dự án bao gồm backend và frontend nằm trên 2 project khác
nhau. Riêng với backend gồm 2 project riêng 1 project chứa các lớp kế thừa và 1
lớp chính
Các bước tiến hành
 Mở cmd trên window truy cập server thông qua ssh:
 Gõ lệnh: ssh root@45.13.132.247
 Gõ password
 Sau khi truy cập thành công gõ lần lượt các lệnh:
git clone https://github.com/hieubap/medical-education-fe.git
git clone https://github.com/hieubap/MedicalEducation.git
Để clone sourse code từ git lên server.

Sau khi clone code gõ yarn để tải node_module về với frontend

Còn với backend gõ lệnh : mvn clean install để build file .jar . Chạy lệnh với project chứa template
chung trước sau đó mới đến project chính
 Sau khi build thành công cần tạo 2 dịch vụ để chạy trên server. Gõ lệnh:
 Cd /etc/system/system để truy cập vào mục dịch vụ
 Tạo 2 dịch vụ với: touch fe-medical-education.service
 Sau đó cấp quyền thực thi cho file service: chmod 777 fe-medical-education
 Sử dụng vim chỉnh sửa cấu hình với lệnh: vim medical-education.service

Sau khi cấu hình song lần lượt gõ các lệnh:

Systemctl enable medical-education (để bật dịch vụ)
Systemctl start medical-education (để chạy dịch vụ)

Sau khi gõ 2 lệnh trên là triển khai thành công backend lên server
Cảm ơn thầy và các bạn đã lắng nghe