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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.81 MB, 55 trang )

Trang 1<div class="page_container" data-page="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

</div>Trang 2<div class="page_container" data-page="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

</div>Trang 3<div class="page_container" data-page="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 HỐ 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

</div>Trang 4<div class="page_container" data-page="4">

Nhóm 17

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 xố 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

</div>Trang 5<div class="page_container" data-page="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

</div>Trang 6<div class="page_container" data-page="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.

</div>Trang 7<div class="page_container" data-page="7">

Nhóm 17

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ự

</div>Trang 8<div class="page_container" data-page="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

</div>Trang 9<div class="page_container" data-page="9">

Nhóm 17

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

</div>Trang 10<div class="page_container" data-page="10">

Nhóm 17

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.

</div>Trang 11<div class="page_container" data-page="11">

Nhóm 17

-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

Hồn thành

</div>Trang 12<div class="page_container" data-page="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

Hồn thành

4.5 Lập trình phía backend

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

Hồ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

</div>Trang 13<div class="page_container" data-page="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

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 hồ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 hồ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.

</div>Trang 14<div class="page_container" data-page="14">

Nhóm 17

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.

</div>Trang 16<div class="page_container" data-page="16">

Nhóm 17

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

</div>Trang 17<div class="page_container" data-page="17">

Nhóm 17

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

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

</div>Trang 18<div class="page_container" data-page="18">

Nhóm 17

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

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

</div>Trang 19<div class="page_container" data-page="19">

Nhóm 17

</div>Trang 20<div class="page_container" data-page="20">

Nhóm 17

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

</div>Trang 21<div class="page_container" data-page="21">

Nhóm 17

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

</div>Trang 22<div class="page_container" data-page="22">

Nhóm 17

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

</div>Trang 23<div class="page_container" data-page="23">

Nhóm 17

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

</div>Trang 24<div class="page_container" data-page="24">

Nhóm 17

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

</div>Trang 25<div class="page_container" data-page="25">

Nhóm 17

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,

</div>Trang 26<div class="page_container" data-page="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 xố 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

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

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

</div>Trang 27<div class="page_container" data-page="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

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

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 tồ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

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

Quản lý dự án

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

</div>Trang 28<div class="page_container" data-page="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

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

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. Xố dự án

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

Xoá dự án

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

Đầu ra Dự án được xố 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

</div>Trang 29<div class="page_container" data-page="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

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

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

</div>Trang 30<div class="page_container" data-page="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. Xố nhóm

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

Xố nhóm

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

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

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

</div>Trang 31<div class="page_container" data-page="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.

</div>Trang 32<div class="page_container" data-page="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.

</div>Trang 33<div class="page_container" data-page="33">

Nhóm 17

- 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.

</div>Trang 34<div class="page_container" data-page="34">

Nhóm 17

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 tố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.

</div>Trang 35<div class="page_container" data-page="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

</div>Trang 36<div class="page_container" data-page="36">

Nhóm 17

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

</div>Trang 37<div class="page_container" data-page="37">

Nhóm 17

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

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

</div>Trang 38<div class="page_container" data-page="38">

Nhóm 17

4.2 Class diagram

Hình 4.3: Class diagram

</div>Trang 39<div class="page_container" data-page="39">

- Design component Library: MUI, CSS

</div>Trang 41<div class="page_container" data-page="41">

Nhóm 17

- 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

</div>Trang 42<div class="page_container" data-page="42">

Nhóm 17

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ó

</div>Trang 44<div class="page_container" data-page="44">

Nhóm 17

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

</div>Trang 45<div class="page_container" data-page="45">

Nhóm 17

5.3.6 Giao diện chi tiết người dùng

- Giao diện thông tin chi tiết của từng người dùng

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

5.3.7 Giao diện quản lý dự án

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

</div>Trang 46<div class="page_container" data-page="46">

Nhóm 17

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

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

- Giao diện thêm thành viên vào dự án

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

</div>Trang 47<div class="page_container" data-page="47">

Nhóm 17

5.3.8 Giao diện chi tiết dự án

- Giao diện cho biết thông tin chi tiết của dự án

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

5.3.9 Giao diện quản lý nhóm

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

</div>Trang 48<div class="page_container" data-page="48">

Nhóm 17

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

Hình 5-16: Màn hình sửa nhóm

- Giao diện thêm thành viên vào nhóm

Hình 5-17: Màn hình thêm thành viên vào nhóm

</div>Trang 49<div class="page_container" data-page="49">

− Xây dựng các giao diện đẹp mắt giúp , giao diện dễ sử dụng.

− Xây dựng được thông tin chi tiết về project, từng thành viên của Lab − Trang web có thể chuyển đổi ngơn ngữ giữa tiếng anh và tiếng việt

</div>

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

<i><b>ĐỀ TÀI: TRANG WEB QUẢN LÝ LAB </b></i>

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

<b>Nhóm: 17 </b>

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

<i><b>CHƯƠNG 4. THIẾT KẾ CƠ SỞ DỮ LIỆU ... 30</b></i>

<i><b>CHƯƠNG 6. DEMO DỰ ÁN, KIỂM THỬ, SỬA LỖI ... 48</b></i>

<i><b>KẾT LUẬN ... 53</b></i>

<b>Danh mục hình vẽ </b>

<b>Danh mục bảng biểu </b>

<b>1.2 Mục tiêu của dự án </b>

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

1.2.2 Phạm vi dự án

<b>1.3 Yêu cầu của dự án </b>

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ự

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

<b>1.4 Các cơng cụ sử dụng </b>

1.4.1 Ngơn ngữ, thư viện Phía Backend: -

Phía Frontend:

<b>2.1 Bảng phân công công việc </b>

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

2.3.1.Thuận lợi

<b>CHƯƠNG 3. PHÂN TÍCH HỆ THỐNG </b>

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

-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.

<b>3.2 Sơ đồ luồng dữ liệu </b>

<b>3.3 Biểu đồ hoạt động </b>

<b>3.4 Đặc tả chức năng </b>

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

- 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.

- 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.

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

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

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.

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 tố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.

<b>4.2 Class diagram </b>

- Design component Library: MUI, CSS

- 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, ...