báo cáo bài tập lớn kỹ thuật phần mềm ứng dụng đề tài trang web quản lý lab

Đặc tả chức năng 1: Quản lý thành viên 3.4.1.1 Thêm thành viên vào lab Đầu đề Tên chức năng Thêm thành viên vào lab Đầu vào Thông tin thành viên mới, tên thành viên, email, password,...

Trang 1

ĐỀ TÀI: TRANG WEB QUẢN LÝ LAB

Giảng viên hướng dẫn: PGS.TS VŨ HẢI

Nhóm: 17

Thành viên:

Phạm Văn An – 20213790 Phạm Viết Chuyên – 20210125

Lê Minh Long – 20213986 Lã Hồng Quân – 20214060

Hà Nội-2024

Trang 2

1.3 YÊU CẦU CỦA DỰ ÁN 6

1.3.1YÊU CẦU VỀ CHỨC NĂNG 6

1.3.2YÊU CẦU VỀ PHI CHỨC NĂNG 7

1.3.3YÊU CẦU VỀ DỮ LIỆU 7

Trang 3

3.3.1BIỂU ĐỒ HOẠT ĐỘNG ĐĂNG NHẬP 17

3.3.2BIỂU ĐỒ HOẠT ĐỘNG THÊM THÀNH VIÊN 18

3.3.3BIỂU ĐỒ HOẠT ĐỘNG CẬP NHẬT THÔNG TIN THÀNH VIÊN 19

3.3.4BIỂU ĐỒ HOẠT ĐỘNG XOÁ THÀNH VIÊN 20

3.3.5BIỂU ĐỒ HOẠT ĐỘNG TẠO NHÓM 21

3.3.6BIỂU ĐỒ HOẠT ĐỘNG TẠO DỰ ÁN 22

3.3.8BIỂU ĐỒ HOẠT ĐỘNG THÊM THÀNH VIÊN VÀO DỰ ÁN 23

3.4 ĐẶC TẢ CHỨC NĂNG 24

3.4.1.ĐẶC TẢ CHỨC NĂNG 1:QUẢN LÝ THÀNH VIÊN 24

3.4.2.ĐẶC TẢ CHỨC NĂNG 2:QUẢN LÝ DỰ ÁN 26

3.4.3.ĐẶC TẢ CHỨC NĂNG:QUẢN LÝ TEAM 28

CHƯƠNG 4 THIẾT KẾ CƠ SỞ DỮ LIỆU 30

4.1 NHẬN DIỆN CÁC THỰC THỂ VÀ THUỘC TÍNH 30

4.1.1CÁC THỰC THỂ VÀ THUỘC TÍNH 30

4.1.2XÂY DỰNG MÔ HÌNH THỰC THỂ LIÊN KẾT 32

4.1.3CHUYỂN MÔ HÌNH THỰC THỂ LIÊN KẾT SANG MÔ HÌNH QUAN HỆ 32

4.1.4CHUẨN HOÁ DỮ LIỆU 33

4.1.5TỪ ĐIỂN DỮ LIỆU CÁC PHA THIẾT KẾ 34

5.3.1GIAO DIỆN ĐĂNG NHẬP 40

5.3.2GIAO DIỆN HOME VỚI ADMIN 40

5.3.3GIAO DIỆN HOME VỚI USER 41

5.3.4GIAO DIỆN HOME 41

5.3.5GIAO DIỆN QUẢN LÝ THÀNH VIÊN 43

5.3.6GIAO DIỆN CHI TIẾT NGƯỜI DÙNG 44

Trang 4

Nhóm 17

3

5.3.7GIAO DIỆN QUẢN LÝ DỰ ÁN 44

5.3.8GIAO DIỆN CHI TIẾT DỰ ÁN 46

5.3.9GIAO DIỆN QUẢN LÝ NHÓM 46

5.3.10GIAO DIỆN GIỚI THIỆU 48

CHƯƠNG 6 DEMO DỰ ÁN, KIỂM THỬ, SỬA LỖI 48

6.1KẾT QUẢ 48

6.1.1ĐẠT ĐƯỢC 48

6.1.2CHƯA ĐẠT ĐƯỢC 49

6.1.3HƯỚNG PHÁT TRIỂN 49

6.2DEMO MỘT SỐ HOẠT ĐỘNG CỦA CHƯƠNG TRÌNH 49

6.3MINH HỌA QUÁ TRÌNH KIỂM THỬ, LẬP TRÌNH PHÒNG NGỪA, GỠ RỐI 52

KẾT LUẬN 53

Danh mục hình vẽ Hình 3.1: Use Case 14

Hinh 3.2: Biểu đồ phân cấp chức năng 15

Hình 3.3: Sơ đồ luồng dữ liệu 16

Hình 3.4: Biểu đồ hoạt động đăng nhập 17

Hình 3.5: Biểu đồ hoạt động thêm thành viên 18

Hinh 3.6: Biểu đồ hoạt động cập nhật thông tin thành viên 19

Hình 3.7: Biểu đồ hoạt động xoá thành viên 20

Hình 3.8: Biểu đồ hoạt động tạo nhóm 21

Hình 3.9: Biểu đồ hoạt động tạo dự án 22

Hình 3.10: Biểu đồ hoạt động thêm thành viên vào nhóm 23

Trang 5

Hình 5-8: Bảng các thành viên có chức năng xóa, sửa 43

Hình 5-9: Màn hình sửa thông tin thành viên 43

Hình 5-10: Màn hình thông tin chi tiết thành viên 44

Hình 5-11: Màn hình thêm project 45

Hình 5-12: Màn hình sửa project 45

Hình 5-13: Màn hình thêm thành viên vào project 45

Hình 5-14: Màn hình thông tin chi tiết dự án 46

Hình 5-15: Màn hình thêm nhóm mới và bảng quản lý nhóm 47

Hình 6.4: Trước khi sửa thông tin thành viên 50

Hình 6.5: Sau khi sửa thông tin thành viên 51

Hình 6.6: Trước khi thêm thành viên vào team 51

Hình 6.7: Sau khi thêm thành viên vào team 51

Danh mục bảng biểu Bảng phân chia công việc 8

Trang 6

1.2 Mục tiêu của dự án

1.2.1 Đối tượng hướng tới

Đối tượng hướng tới của dự án chính là những phòng nghiên cứu có số lượng thành viên đông, các dự án triển khai phức tạp, trang thiết bị máy móc phục vụ lớn, cần quản lý tài chính, chi tiêu cho lab Trang web được sử dụng bởi các quản lý, thành viên của phòng lab

Trang 7

Nhóm 17

6

1.2.2 Phạm vi dự án

1.3 Yêu cầu của dự án

1.3.1 Yêu cầu về chức năng

Phần mềm cần có những chức năng sau: Quản lý thành viên:

• Thêm, xóa, cập nhật thông tin thành viên của Lab

• Tìm kiếm thành viên theo tên, theo bộ lọc Quản lý nhóm:

• Tạo mới, xóa, cập nhật thông tin của nhóm

• Thêm, xóa thành viên trong nhóm

• Chỉ định trưởng nhóm

• Tìm kiếm nhóm theo tên, theo bộ lọc Quản lý dự án:

• Tạo mới, xóa, cập nhật thông tin của dự án

• Thêm, xóa, cập nhật thông tin của thành viên (đã thuộc một nhóm) trong dự án

• Thêm, xóa, cập nhật thông tin các chi phí của dự

Trang 8

1.3.2 Yêu cầu về phi chức năng -Hiệu năng:

• Hệ thống phải nhẹ, không tốn nhiều dung lượng bộ nhớ Hỗ trợ 24/24 và 365/365 ngày

• Phải đăng nhập mới có thể truy cập

• Chỉ quản lý mới có thể thay đổi thông tin -Ngôn ngữ: Gồm cả tiếng Anh và tiếng Việt 1.3.3 Yêu cầu về dữ liệu

• Dữ liệu được hiển thị rõ ràng để thành viên có thể quan sát • Dữ liệu từng mục được liên kế hợp lí với nhau

• Dữ liệu rõ ràng, mạch lạc tương ứng với vai trò

• Dữ liệu được phân biệt với nhau qua ID, không trùng lặp

1.4 Các công cụ sử dụng

Trang 9

Nhóm 17

8

1.4.1 Ngôn ngữ, thư viện Phía Backend: -Ngôn ngữ: Javascript -Framework: Node.js -ORM: Sequelize

Phía Frontend:

- Ngôn ngữ : Javascript - Framework: ReactJS

- Design component Library: MUI

- Redux toolkit, Redux persist, ReactJS Debugger, Async storage - API: Axios request

2.1 Bảng phân công công việc

Bảng phân chia công việc

Trang 10

Nhóm 17

9

Phạm Văn An 20213790 -Font-end -Back-end

-Nội dung thuyết trình

-Back-end: thêm thông tin chi tiết cho thành viên, lấy thông tin chi tiết từng thành viên -Font-end: thiết kế font-end cho web

-Làm nội dung cho các buổi báo cáo

Phạm Viết Chuyên -Trưởng nhóm -BackEnd -Thuyết trình

-Phân chia công việc cho từng thành viên và kiểm tra tiến độ công việc

-Viết Back-end cho toàn bộ các chức năng của trang web -Thuyết trình, làm báo cáo các buổi trình bày

-Back-end

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

-Back-end: Lấy thông tin chi tiết từng project

-Front-end: Làm chức năng sửa, xóa, hiển thị chi tiết project

-Cơ sở dữ liệu: Thiết kế sơ đồ ERD

-Làm nội dung cho các buổi báo cáo

Trang 11

Nhóm 17

10

-Nội dung slide

-Viết backend cho các chức năng của trang web

-Chuẩn bị slide, báo cáo cho các buổi trình bày

1/10/2023 10/10/2023 MS Word

Báo cáo hiện trạng

Hoàn thành 2 Xác định mục tiêu 1/10/2023 10/10/2023 MS

Word

Các mục tiêu hướng tới

Hoàn thành

Trang 12

Nhóm 17

11 chức năng

và phi chức năng 3 Phân tích hệ thống 10/10/2023 25/10/2023 UML Sơ đồ

chức năng, sơ đồ luồng dữ liệu

Hoàn thành

4 Thiết kế CSDL 10/10/2023 25/10/2023 Sơ đồ ERD

Hoàn thành 4.1 Nhận diện thực thể

của hệ thống, liệt kê thuộc tính, lập từ điển dữ liệu

thành

4.2 Đưa ra các giả thiết hợp lý về các phụ thuộc hàm cần có

thành

thành 4.4 Vẽ sơ đồ thực thể

liên kết của hệ thống

10/10/2023 25/10/2023 Mô hình thực thể liên kết

Hoàn thành

4.5 Lập trình phía backend

25/10/2023 23/12/2023 VS Code

Hoàn thành 4.6 Lập trình giao diện

cho phần mềm

15/11/2023 29/12/2023 VS code

Hoàn thành

Trang 13

Nhóm 17

12 5 Báo cáo và ppt

final

2/1/2024 14/1/2024 MS word

Báo cáo hiện trạng

Hoàn thành 6 Kiểm thử và sửa lỗi 29/12/2023 8/1/2024 Postma

n

Hoàn thành

thành

2.3 Khó khăn và lợi thế khi triển khai dự án

2.3.1.Thuận lợi

-Mỗi thành viên có sự nỗ lực, chăm chỉ vừa học vừa thực hiện sản phẩm Mọi người đều cố gắng hoàn thành công việc được giao đầy đủ, đúng thời hạn -Mọi thành viên đều có ý thức tự giác, kỷ luật hoàn thành theo tiến độ đề ra -Các thành viên làm việc, trao đổi, giúp đỡ lẫn nhau mỗi khi gặp khó khăn

Trang 14

Nhóm 17

13

CHƯƠNG 3 PHÂN TÍCH HỆ THỐNG

3.1 Phân tích hệ thống về chức năng

-Người dùng bình thường: Xem thông tin thành viên lab, các project trên lab, thông tin giới thiệu về lab

-Admin: Có thể quản lý các công việc trên lab, quản viên, quản lý các team, quản lý các project

Trang 16

Nhóm 17

15

Hinh 3.2: Biểu đồ phân cấp chức năng

Trang 17

Nhóm 17

16

3.2 Sơ đồ luồng dữ liệu

Hình 3.3: Sơ đồ luồng dữ liệu

Trang 18

Nhóm 17

17

3.3 Biểu đồ hoạt động

Hình 3.4: Biểu đồ hoạt động đăng nhập

Trang 19

Nhóm 17

18

Trang 20

Nhóm 17

19

Hinh 3.6: Biểu đồ hoạt động cập nhật thông tin thành viên

Trang 21

Nhóm 17

20

Hình 3.7: Biểu đồ hoạt động xoá thành viên

Trang 22

Nhóm 17

21

Hình 3.8: Biểu đồ hoạt động tạo nhóm

Trang 23

Nhóm 17

22

Hình 3.9: Biểu đồ hoạt động tạo dự án

Trang 24

Nhóm 17

23

Hình 3.10: Biểu đồ hoạt động thêm thành viên vào nhóm

Trang 25

Nhóm 17

24

Hình 3.11: Biểu đồ hoạt động thêm thành viên vào dự án

3.4 Đặc tả chức năng

3.4.1 Đặc tả chức năng 1: Quản lý thành viên

3.4.1.1 Thêm thành viên vào lab Đầu đề Tên chức

năng

Thêm thành viên vào lab

Đầu vào Thông tin thành viên mới, tên thành viên, email, password,

Trang 26

Nhóm 17

25 Đầu ra Tài khoản đăng nhập gồm có email,

password đã được hash

Thân 1 Hệ thống yêu cầu admin nhập vào thông tin thành viên mới

2 Nếu email đã có trong database sẽ phải nhập lại 3.4.1.2 Xoá thành viên khỏi lab

Đầu đề Tên chức năng

Xoá thành viên khỏi lab

Đầu vào ID của thành viên

Đầu ra ID và thông tin thành viên được xoá khỏi bảng manage và database

Thân Admin nhấn vào biểu tượng xoá ở cột actions trong bảng thành viên để xoá nhóm

3.4.1.3 Cập nhật thông tin thành viên

Cập nhật thông tin thành viên

Đầu vào Các thông tin cần cập nhật của thành viên (nếu không cần thay đổi thì bỏ trống trường đó)

Đầu ra Thông tin thành viên được cập nhật

Trang 27

Nhóm 17

26 Thân Admin nhấn vào biểu tượng edit trong cột actions

Bảng manage member hiện ra và admin có thể sửa các thông tin của thành viên

Ấn save để lưu lại 3.4.1.4 Tìm kiếm thành viên

Tìm kiếm thành viên

Đầu vào ID của thành viên( một hoặc tất cả)

Đầu ra Thông tin của toàn bộ thành viên(nếu đầu vào là All)

Thông tin của 1 thành viên (nếu đầu vào là 1 ID)

Thân Thông tin thành viên được hiển thị bằng một danh sách Bấm vào một thành viên bất kỳ để xem chi tiết

3.4.2.1 Tạo mới dự án

Quản lý dự án

Đầu vào Thông tin của dự án: tên, mô tả, ảnh …

Trang 28

Nhóm 17

27 Đầu ra Dự án được tạo

Danh sách dự án sau khi tạo

Thân Admin điền tên và chọn tệp của dự án sau đó nhấn save

3.4.2.2 Thêm thành viên vào dự án

Thêm thành viên vào dự án

Đầu vào ID của dự án và ID của thành viên

Đầu ra Thành viên được thêm vào dự án

Thân Admin chọn dự án và thành viên sau đó nhấn save Nếu thành viên đã có từ trước thì hệ thống sẽ thông báo qua pop-up

3.4.2.3 Xoá dự án

Xoá dự án

Đầu vào ID của dự án

Đầu ra Dự án được xoá không còn được hiển thị trong danh sách

Thân Admin nhấn vào biểu tượng xoá ở cột actions trong bảng manage projects

Trang 29

Thân Admin điền tên nhóm, thông tin nhóm

Status là 1 khi nhóm còn hoạt động và 0 khi nhóm đã ngừng hoạt động

Ấn save để lưu lại

3.4.3.2 Thêm thành viên vào nhóm

Thêm thành viên vào nhóm

Đầu vào ID của nhóm và ID của thành viên

Đầu ra Thành viên được thêm vào nhóm và hiển thị vào danh sách

Trang 30

Nhóm 17

29 Thân Admin chọn nhóm và thành viên sau đó nhấn save để lưu

Nếu thành viên đã có trong nhóm hệ thống sẽ thông báo qua pop-up

3.4.3.3 Xoá nhóm

Xoá nhóm

Đầu vào ID của nhóm

Đầu ra Nhóm được xoá khỏi bảng manage teams Danh sách nhóm sau khi xoá

Thân Admin nhấn vào biểu tượng xoá ở cột actions trong bảng manage teams để xoá nhóm

Trang 31

- lastName: Tên user

- email: Tên email cá nhân của user - role: Vai trò của user trong lab

- isActive: Chỉ ra user đã được vào lab hay chưa - password: Mật khẩu đăng nhập website của user - createdAt: Tài khoản user được tạo ngày nào

- updatedAt: Tài khoản user được cập nhật vào ngày nào

- deleteAt: Tài khoản user được xóa (nếu có) vào khi nào trong tương lai - image: Hình ảnh của user

b) Thực thể teams

- id: Mã của từng team trong lab, mã này là duy nhất - name: Tên của team

- description: Mô tả về team

- isActive: Team đã được kích hoạt chưa - createdAt: Team được tạo ngày nào

- updatedAt: Team được cập nhật vào ngày nào

Trang 32

- image: Ảnh của project

- createdAt: Project được tạo ngày nào

- updatedAt: Project được cập nhật vào ngày nào

- deleteAt: Project được xóa (nếu có) vào khi nào trong tương lai b) Thực thể jointeams

- id: Mã của từng team được các users tham gia - idUser: Mã của các users

- idTeam: Mã của các teams - createdAt: Ngày được tạo

- updatedAt: Ngày được cập nhật - deleteAt: Ngày được xóa

Trang 33

Nhóm 17

32

- createdAt: Ngày được tạo

- updatedAt: Ngày được cập nhật - deleteAt: Ngày được xóa

Hình 4.1: Mô hình thực thể liên kết

Mô hình thực thể liên kết với các quan hệ kết nối với nhau

Mô hình quan hệ ta chuyển các quan hệ kết nối thành các quan hệ cụ thể giữa các mảng với nhau

Trang 34

Nhóm 17

33

Hình 4.2: Mô hình quan hệ

Cơ sở dữ liệu được chuẩn hóa theo kiểu 3-NF: • Các thuộc tính của bảng phải là nguyên tố

• Giá trị của các thuộc tính trên các hàng phải là đơn trị, không chứa nhóm lặp

• Không có một thuộc tính nào có giá trị có thể tính toán được từ một thuộc tính khác

• Loại bỏ các thuộc tính không khóa phụ thuộc vào một bộ phận khóa chính và tách ra thành một bảng riêng, khóa chính của bảng là bộ phận của khóa mà chúng phụ thuộc vào

Trang 35

password VARCHAR Giá trị là chữ nhưng bị mã hóa

tính là hình ảnh

Các thuộc tính bảng teams

Trang 36

Nhóm 17

35

description TEXT Giá trị là một đoạn văn

Các thuộc tính bảng projects

descriptionHTML TEXT Giá trị là một đoạn văn (Được định dạng để viết lên

trang web) descriptionMarkdown TEXT Giá trị là một đoạn

văn (Được định dạng để viết dưới dạng text thường) image LONGBLOB Giá trị thuộc tính

là hình ảnh

Trang 37

Nhóm 17

36

Các thuộc tính bảng jointeams

Các thuộc tính bảng joinprojects

Trang 38

Nhóm 17

37

4.2 Class diagram

Hình 4.3: Class diagram

Trang 39

- Design component Library: MUI, CSS

Trang 41

Nhóm 17

40

- Services: chứa các file lấy api từ BE

- Store: chứa cái file config API theo từng tính năng, các Slide: reducer để thao tác với redux-persist (các state khi gọi API)

-Style: Chứa các file CSS chung của chương trình

-Translation: Chứa các file tiện ích có chức năng chuyển đôi ngôn ngữ

- Utils: Chứa các file tiện ích trong quá trình viết code có tác dụng reuse code, tránh file lớn,

- index.js: File khởi chạy chương trình - một số file config khác

5.3 Giao diện Web

5.3.1 Giao diện đăng nhập

Hình 5-1: Màn hình đăng nhập

5.3.2 Giao diện Home với admin

- Đối với giao diện Home của admin sẽ có thêm chức năng Mange Member trên thanh công cụ, thanh công cụ cũng thể hiện kết nối đến 1 số giao diện

Trang 42

Nhóm 17

41

khác

Hình 5-2: Màn hình chính với admin

5.3.3 Giao diện Home với User

- Đối với giao diện Home của User sẽ không có chức năng Manage Member, người dùng chỉ có thể xem web tại màn hình Home và các thông tin của User và Project

Hình 5-3: Màn hình chính với user

5.3.4 Giao diện Home

- Giao diện thể hiện thông tin của các dự án và thành viên trong Lab ở đây có

Trang 44

Nhóm 17

43

5.3.5 Giao diện quản lý thành viên

- Quản lý thành viên với các chức năng thêm, xóa , sửa thành viên

Hình 5-7: Màn hình thêm thành viên

Hình 5-8: Bảng các thành viên có chức năng xóa, sửa

Hình 5-9: Màn hình sửa thông tin thành viên

Trang 45