báo cáo pbl3 đồ án công nghệ phần mềm đề tài website quản lý hiến máu

Biểu đồ tuần tự cho use-case phân rã “Tổ chức đợt hiến máu”.... 55 Bảng 25 Mô tả chi tiết cho giao diện Đăng ký thông tin cá nhân tư cách người hiến máu 57 Bảng 26 Mô tả chi tiết cho gia

QUÁ TRÌNH TRIỂN KHAI

Quá trình triển khai đồ án được thực hiện theo 5 giai đoạn:

Giai đoạn 1: Phân tích yêu cầu hệ thống, lập danh sách chức năng

Giai đoạn 2: Thiết kế cơ sở dữ liệu, thiết kế mẫu giao diện

Giai đoạn 3: Phát triển giao diện FrontEnd song song với xử lý BackEnd Giai đoạn 4: Kiểm thử

Giai đoạn 5: Kết thúc, hoàn thành báo cáo

Ngày Nội dung công việc

14/02/2023 – 21/02/2023 Phân tích các yêu cầu, mô tả, lập danh sách các chức năng của hệ thống 22/02/2023 – 07/03/2023 Lập sơ đồ use-case, thiết kế cơ sở dữ liệu

08/03/2023 – 16/04/2023 Vẽ mẫu thiết kế giao diện người dùng, phát triển giao diện người dùng

17/04/2023 – 01/06/2023 Viết mã nguồn BackEnd, thực hiện thêm các thay đổi nhỏ giao diện, chức năng, song song với viết thêm mã nguồn giao diện

22/05/2023 – 11/06/2023 Kiểm thử hệ thống, hoàn thành báo cáo

Bảng 1 Tiến độ thực hiện đồ án

DANH SÁCH PHÂN CÔNG NHIỆM VỤ

Bảng phân công nhiệm vụ

Nhóm thực hiện đồ án bao gồm 3 thành viên với các đặc điểm:

STT Họ và tên Điểm mạnh

1 Nguyễn Hữu Thành Có kiến thức về FrontEnd

2 Trần Thanh Tùng Có thể thiết kế UI, viết báo cáo, triển khai được cơ sở dữ liệu

3 Nguyễn Hoàng Việt Có kiến thức về thiết kế BackEnd

Bảng 2 Bảng mô tả đặc điểm của từng thành viên

Từ các điểm mạnh trên, phân công các công việc trong nhóm được thể hiện như bảng dưới:

STT Họ và tên Nhiệm vụ

1 Nguyễn Hữu Thành - Viết mã nguồn giao diện

- Thiết kế cơ sở dữ liệu - Thiết kế mẫu giao diện

- Thiết kế các sơ đồ use-case, sơ đồ lớp, sơ đồ tuần tự, sơ đồ hoạt động

- Viết báo cáo 3 Nguyễn Hoàng Việt

- Viết mã nguồn BackEnd - Lên kế hoạch

- Test hệ thống, chỉnh sửa sai sót

Bảng 3 Bảng phân công nhiệm vụ

Quản lý dự án

2.2.1 Quá trình quản lý dự án

- Đồ án được thực hiện thôn qua nhiều nền tảng phụ trợ, bao gồm: Facebook messenger dùng để trao đổi công việc, Figma để thiết kế các mẫu giao diện, Github quản lý mã nguồn

- Link Github: hviiet/PBL3-BloodDono: Dự án môn học PBL3 - Công nghệ phần mềm (github.com)

Hình 1 Tổng quan đồ án trên Github

- Môi trường thiết kế giao diện Figma:

Tại Figma, các giao diện được thiết kế mẫu để viết mã nguồn FrontEnd

Hình 2 Tổng quan đồ án trên Figma

Việc phát triển đồ án bược bắt đầu từ việc phân tích yêu cầu của hệ thống, bao gồm các chức năng và mô hình dữ liệu Đồ án sau sau khi đã được lên danh sách các chức năng sẽ được thiết kế mẫu giao diện trên môi trường Figma Về mã nguồn, sau khi thành viên trong nhóm viết xong một chức năng (hoặc một giao diện) sẽ được push lên Github và merge mã nguồn

2.2.2 Công cụ và môi trường phát triển dự án

- Công cụ làm việc trên dự án của các thành viên trong nhóm: máy tính cá nhân của từng thành viên

- Các phần mềm, công cụ: MySQL, Github, Figma, Visual Studio Code, Postman

- Môi trường kiểm thử: máy tính cá nhân của từng thành viên.

GIỚI THIỆU

Mục đích đề tài

Đề tài nhắm đến việc xây dựng một Website nhằm hỗ trợ việc quản lý hiến máu, là trung gian kết nối giữa người hiến và bệnh viện Đề tài sẽ giải quyết 03 yêu cầu:

(1) Yêu cầu nhằm tạo ra một công cụ quản lý các nguồn máu sống được đăng ký cho bệnh viện

(2) Yêu cầu tạo ra một môi trường giao tiếp trung gian nhằm chia sẻ thông tin (ở đây được hiểu là thông báo các đợt hiến máu) từ bệnh viện đến phía người hiến

(3) Tạo ra một môi trường mà người cần máu có thể tìm được nguồn máu tương thích với mình trong trường hợp cần máu khẩn cấp.

Phạm vi đề tài

- Phạm vi áp dụng: đề tài được áp dụng thử nghiệm trong phạm vi giữa bệnh viện và người hiến máu

- Phạm vi công nghệ: Website sẽ được chạy thử nghiệm trên nền tảng web với cơ sở dữ liệu hoàn chỉnh có thể truy cập từ xa.

Phân tích nghiệp vụ hệ thống

Danh sách nghiệp vụ hệ thống có thể đề cập qua 02 mục:

(1) Đăng ký tài khoản người hiến mới (2) Đăng ký tài khoản bệnh viện mới

3.3.1 Quy trình nghiệp vụ đăng ký tài khoản người hiến mới

3.3.1.1 Phạm vi áp dụng Áp dụng cho việc đăng ký tài khoản người hiến máu mới muốn trở thành người hiến máu trong hệ thống

3.3.1.2 Yêu cầu, điều kiện thực hiện thủ tục hành chính

Người hiến phải cung cấp đầy đủ các thông tin được yêu cầu: tên đăng nhập, mật khẩu, họ và tên, giới tính, số điện thoại, ngày sinh, địa chỉ, cân nặng, chiều cao, nhóm máu và các bệnh đang mắc

Các thông tin trước khi lưu cần được kiểm tra và chuẩn hóa dữ liệu

- Bước 1: Người hiến truy cập vào website, từ trang chào mừng, chọn “Tôi

- Bước 2: Ban đầu, tài khoản yêu cầu nhập một username mới và nhập lại mật khẩu mới 2 lần

+ Nếu username đã tồn tại, yêu cầu người dùng nhập lại username khác

+ Nếu chưa tồn tại, tiếp tục sang bước 3

- Bước 3: Hệ thống yêu cầu nhập các thông tin còn lại

- Bước 4: Hệ thống tiến hành lưu tài khoản mới dưới dạng người hiến

STT Tên trường Bắt buộc Ghi chú

1 Tên đăng nhập ☑ Hiện trên màn form đầu tiên

2 Mật khẩu ☑ Hiện trên màn form đầu tiên

3 Xác nhận mật khẩu ☑ Hiện trên màn form đầu tiên

10 Địa chỉ (xã/phường, huyện/quận, tỉnh/thành phố) ☑

Bảng 4 Các trường thông tin đầu vào trên form đăng ký trở thành người hiến máu

Người dùng có nhu cầu trở thành người hiến máu

3.3.2 Quy trình nghiệp vụ đăng ký tài khoản bệnh viện mới

3.3.2.1 Phạm vi áp dụng Áp dụng cho việc đăng ký mới một tài khoản chung cho 01 bệnh viện trên hệ thống, tài khoản này có thể được nhiều cán bộ bệnh viện truy cập

3.3.2.2 Yêu cầu, điều kiện thực hiện thủ tục hành chính

Người thực hiện (nói chung) cần điền đủ các trường thông tin bắt buộc

Các thông tin trước khi lưu cần được kiểm tra và chuẩn hóa dữ liệu

- Bước 1: Người thực hiện chọn “Đăng ký” rồi chọn “Đăng ký với tư cách bệnh viện” trong bảng pop-up hiện ra

- Bước 2: Ban đầu, tài khoản yêu cầu nhập một username mới và nhập lại mật khẩu mới 2 lần

+ Nếu username đã tồn tại, yêu cầu người dùng nhập lại username khác

+ Nếu chưa tồn tại, tiếp tục sang bước 3

- Bước 3: Hệ thống yêu cầu nhập các thông tin còn lại đề cập ở bảng dưới

- Bước 4: Hệ thống tiến hành lưu tài khoản mới dưới dạng bệnh viện nhưng chưa được xác thực Hệ thống tiến hành gửi yêu cầu xác thực đến quản trị viên hệ thống

STT Tên trường Bắt buộc Ghi chú

1 Tên đăng nhập ☑ Hiện trên màn form đầu tiên

2 Mật khẩu ☑ Hiện trên màn form đầu tiên

3 Xác nhận mật khẩu ☑ Hiện trên màn form đầu tiên

8 Địa chỉ (xã/phường, huyện/quận, tỉnh/thành phố) ☑

Bảng 5 Các trường thông tin đầu vào trên form đăng ký tài khoản bệnh viện mới

Dành cho bệnh viện (nói chung) muốn trở có một tài khoản với tư cách bênh viện trên hệ thống.

PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Tác nhân

Hệ thống gồm có các tác nhân là Người cần máu, người hiến máu, đội ngũ bệnh viện và quản trị viên

- Người cần máu là người có nhu cầu cần nguồn máu trong trường hợp khẩn cấp, yêu cầu có tài khoản hệ thống

- Người hiến máu là người đã đăng nhập vào hệ thống với tài khoản đã được xác minh từ phía bệnh viện

- Cùng một tài khoản, người hiến máu cũng vừa có thể là người cần máu và ngược lại Hay nói cách khác, việc tìm kiếm nguồn máu và hiến máu đều có thể được thực hiện từ 01 tài khoản người dùng (trừ tài khoản tư cách bệnh viện hoặc quản trị viên)

- Đội ngũ bệnh viện là người sử dụng hệ thống với mục đích đặc biệt là kiểm soát các hoạt động yêu cầu hiến máu, và xác minh người hiến máu

- Quản trị viên có vai trò là người quản trị hoạt động của hệ thống.

Biểu đồ ca – sử dụng

4.2.1 Sơ đồ use-case tổng quan

Hình 3 Sơ đồ use-case tổng quan

4.2.2 Sơ đồ use-case phân rã

4.2.2.1 Phân rã use-case “Quản lý thông tin cá nhân”

Hình 4 Sơ đồ phân rã cho use-case “Quản lý thông tin cá nhân”

Tên Use-case Quản lý thông tin cá nhân

Tác nhân Người hiến máu

Mô tả Cho phép người hiến máu xem, cập nhật thông tin cá nhân và xem lịch sử hiến máu của mình

Tiền điều kiện Người hiến phải có tài khoản và đăng nhập vào hệ thống

Xem thông tin cá nhân

1 Mở hệ thống và vào phần thông tin cá nhân

2 Hiển thị các thông tin của chủ tài khoản

1 Chọn chức năng cập nhật thông tin trong phần thông tin cá nhân

2 Hiển thị giao diện thay đổi thông tin cá nhân

3 Thay đổi các thông tin cá nhân cần chỉnh sửa sau đó bấm nút “Lưu”

4 Hệ thống tiến hành thay đổi thông tin chủ tài khoản

Luồng sự kiện thay thế

3.2 Hiển thị thông tin của chủ tài khoản trước khi chủ tài khoản chọn chức năng cập nhật thông tin

Xem lịch sử hiến máu

1 Mở hệ thống và vào phần lịch sử hiến máu

2 Hiển thị các thông tin thống kê và các đợt hiến máu mà người hiến đã hiến

Hậu điều kiện Khi người hiến máu có thực hiện thay đổi thông tin thì dữ liệu của người dùng được hệ thống cập nhật lại

Bảng 6 Luồng sự kiện cho use-case phân rã “Quản lý thông tin cá nhân”

4.2.2.2 Phân rã use-case “Tìm kiếm nguồn hiến”

Hình 5 Sơ đồ phân rã cho use-case “Tìm kiếm nguồn hiến”

Tên Use-case Tìm kiếm nguồn hiến

Tác nhân Người cần máu

Những người đang cần nguồn máu có thể tìm kiếm những người hiến máu đủ điều kiện gần nhất trong khu vực được lọc theo yêu cầu của người đang cần nguồn máu

Tiền điều kiện Yêu cầu người cần máu cần có tài khoản và đăng nhập vào hệ thống

1 Chọn chức năng tìm kiếm sau khi đã xác thực

2 Hiển thị giao diện tìm kiếm

3 Lọc các thông tin cần thiết như nhóm máu, khu vực cần tìm và bấm tìm kiếm

4 Hiển thị thông tin những người hiến máu thỏa mãn thông tin đã điền

Bảng 7 Luồng sự kiện cho use-case phân rã “Tìm kiếm nguồn hiến”

4.2.2.3 Phân rã use-case “Tổ chức đợt hiến máu”

Hình 6 Sơ đồ phân rã cho use-case “Tổ chức đợt hiến máu”

Tên Use-case Tổ chức đợt hiến máu

Tác nhân Cán bộ bệnh viện

Cho phép cán bộ bệnh viện tổ chức các đợt hiến máu mà người hiến trong phạm vi có thể biết và tham gia vào đợt hiến do bệnh viện tổ chức

Tiền điều kiện Cán bộ bệnh viện phải có tài khoản được quản trị viên xét duyệt và đăng nhập vào hệ thống

Luồng sự kiện chính Luồng sự kiện chính

1 Chọn chức năng tổ chức đợt hiến máu

2 Hiển thị giao diện chức năng tổ chức đợt hiến máu với các lựa chọn mục thiết đặt chỉ tiêu đợt hiến

3 Chọn thông tin trong mục, sau đó bấm nút “Xác nhận”

4 Đẩy đợt hiến máu vào danh sách các sự kiện đang được chạy trên màn hình chờ

Tài khoản của những người hiến nằm trong phạm vi quanh địa chỉ của bệnh viện sẽ thấy được thông báo hiến máu của phía bệnh viện

Bảng 8 Luồng sự kiện cho use-case phân rã “Tổ chức đợt hiến máu”

Biểu đồ hoạt động

4.3.1 Biểu đồ hoạt động cho use-case “Đăng nhập”

Hình 7 Biểu đồ hoạt động cho use-case “Đăng nhập”

4.3.2 Biểu đồ hoạt động cho use-case “Đăng ký”

Hệ thống có 02 dạng đăng ký: đăng ký tài khoản dưới tư cách người hiến máu hoặc người cần máu và đăng ký tài khoản dưới tư cách bệnh viện

❖ Biểu đồ hoạt động cho “Đăng ký với tư cách người hiến máu/ người cần máu”

Hình 8 Biểu đồ hoạt động cho use-case “Đăng ký với tư cách người hiến máu/ người cần máu”

❖ Biểu đồ hoạt động cho use-case “Đăng ký với tư cách bệnh viện”

Hình 9 Biểu đồ hoạt động cho use-case “Đăng ký với tư cách bệnh viện”

4.3.3 Biểu đồ hoạt động cho use-case “Tham gia vào đợt hiến máu”

Hình 10 Biểu đồ hoạt động cho use-case “Tham gia vào đợt hiến máu”

4.3.4 Biểu đồ hoạt động cho use-case phân rã “Quản lý thông tin cá nhân”

Hình 11 Biểu đồ hoạt động cho use-case phân rã “Quản lý thông tin cá nhân”

4.3.5 Biểu đồ hoạt động cho use-case “Tìm kiếm nơi hiến”

Hình 12 Biểu đồ hoạt động cho use-case “Tìm kiếm nơi hiến”

4.3.6 Biểu đồ hoạt động cho use-case “Tạo phản hồi vệ hệ thống”

4.3.7 Biểu đồ hoạt động cho use-case “Tìm kiếm nguồn hiến”

Hình 14 Biểu đồ hoạt động cho use-case phân rã “Tìm kiếm nguồn hiến”

4.3.8 Biểu đồ hoạt động cho use-case “Xét duyệt bệnh viện”

Hình 15 Biểu đồ hoạt động cho use-case “Xét duyệt bệnh viện”

4.3.9 Biểu đồ hoạt động cho use-case “Tổ chức đợt hiến máu”

Tổ chức đợt hiến máu gồm có 02 extend: thiết đặt chỉ tiêu đợt hiến (Hình ) và xem thống kê hiến máu (Hình ) được thể hiện như bên dưới

Hình 16 Biểu đồ hoạt động cho use-case phân rã “Tổ chức đợt hiến máu” kèm “Thiết đặt chỉ tiêu cho đợt hiến”

4.3.10 Biểu đồ hoạt động cho use-case “Ghi nhận người hiến máu”

Hình 18 Biểu đồ hoạt động cho use-case “Ghi nhận người hiến máu”

Biểu đồ tuần tự

4.4.1 Biểu đồ tuần tự cho use-case “Đăng nhập”

Hình 19 Biểu đồ tuần tự cho use-case “Đăng nhập”

4.4.2 Biểu đồ tuần tự cho use-case “Đăng ký”

Hình 20 Biểu đồ tuần tự cho use-case “Đăng ký”

4.4.3 Biểu đồ tuần tự cho use-case “Tham gia vào đợt hiến máu”

Hình 21 Biểu đồ tuần tự cho use-case “Tham gia vào đợt hiến máu”

4.4.4 Biểu đồ tuần tự cho use-case “Tìm kiếm nơi hiến”

Hình 22 Biểu đồ tuần tự cho use-case “Tìm kiếm nơi hiến”

4.4.5 Biểu đồ tuần tự cho use-case “Quản lý thông tin cá nhân”

Use-case Quản lý thông tin cá nhân sau phân rã có thể chia thành 3 chức năng nhỏ được mô tả lần lượt theo 3 mục bên dưới:

❖ Biểu đồ tuần tự cho chức năng “Xem thông tin cá nhân”

Hình 23 Biểu đồ tuần tự cho chức năng “Xem thông tin cá nhân” cho use-case phân rã “Quản lý thông tin cá nhân”

❖ Biểu đồ tuần tự cho chức năng “Cập nhật thông tin” và “Đổi mật khẩu”

Hình 24 Biểu đồ tuần tự cho chức năng “Cập nhật thông tin cá nhân” cho use-case phân rã

“Quản lý thông tin cá nhân”

Hình 25 Biểu đồ tuần tự cho chức năng “Đổi mật khẩu” cho use-case phân rã “Quản lý thông tin cá nhân”

❖ Biểu đồ tuần tự cho chức năng “Xem lịch sử hiến máu”

Hình 26 Biểu đồ tuần tự cho chức năng “Xem lịch sử hiến máu” cho use-case phân rã “Quản lý thông tin cá nhân”

4.4.6 Biểu đồ tuần tự cho use-case “Tạo phản hồi về hệ thống”

Hình 27 Biểu đồ tuần tự cho use-case “Tạo phản hồi về hệ thống”

4.4.7 Biểu đồ tuần tự cho use-case phân rã “Tìm kiếm nguồn hiến”

Hình 28 Biểu đồ tuần tự cho use-case phân rã “Tìm kiếm nguồn hiến”

4.4.8 Biểu đồ tuần tự cho use-case “Xét duyệt bệnh viện”

Hình 29 Biểu đồ tuần tự cho use-case “Xét duyệt bệnh viện”

4.4.9 Biểu đồ tuần tự cho use-case phân rã “Tổ chức đợt hiến máu”

Hình 30 Biểu đồ tuần tự cho use-case phân rã “Tổ chức đợt hiến máu”

4.4.10 Biểu đồ tuần tự cho use-case “Ghi nhận người hiến máu”

Hình 31 Biểu đồ tuần tự cho use-case “Ghi nhận người hiến máu”

Biểu đồ lớp

Hình 32 Sơ đồ lớp của hệ thống

Cơ sở dữ liệu

Cơ sở dữ liệu được xây dựng trên hệ quản trị cơ sở dữ liệu MySQL

Các kiểu thực thể chính theo mô hình ERD gồm 3 kiểu thực thể chính: Người hiến,

Bệnh viện và Sự kiện hiến máu và có thể được liệt kê theo bảng sau

Kiểu thực thể Các thuộc tính Thuộc tính khóa

NGƯỜI HIẾN Mã người hiến, họ và tên, giới tính, ngày sinh, chiều cao, cân nặng, nhóm máu, địa chỉ, số điện thoại, email, tiền sử bệnh án, thông tin sau hiến

BỆNH VIỆN Mã bệnh viện, tên bệnh viện, địa chỉ, số điện thoại

SỰ KIỆN HIẾN MÁU Mã sự kiện, tên sự kiện, thời gian xác nhận sự kiện (timestamp), thời gian bắt đầu, thời gian kết thúc, số đơn vị máu tiếp nhận, địa điểm tổ chức, đơn vị tổ chức, danh sách người đã xác nhận tham gia

Bảng 9 Bảng liệt kê các kiểu thực thể chính trong mô hình thực thể - quan hệ

4.6.2 Mô hình thực thể quan hệ ERD

Mô hình thực thể - quan hệ với 3 thực thể chính được mô tả từ trước có thể được biểu diễn như mô hình bên dưới

Hình 33 Mô hình thực thể quan hệ ERD theo cơ sở dữ liệu

Cơ sở dữ liệu với các bảng được liệt kê và mô tả các thuộc tính của bảng thông qua các bảng bên dưới:

STT Tên trường Kiểu dữ liệu Kích cỡ Ghi chú

1 AccountID char 8 Mã tài khoản

2 Username char 50 Tên đăng nhập

3 Password char 50 Mật khẩu được hash

Bảng 10 Bảng dữ liệu cho TÀI KHOẢN

1 DonorID char 8 Mã người hiến

3 DonorName nchar 255 Họ tên người hiến

9 DonorAddress char 8 Mã địa chỉ

10 DonorPhoneNumber char 15 Số điện thoại

11 DonorEmail char 255 Email liên lạc

12 DonorPhoto char 255 Đường dẫn ảnh người hiến

Bảng 11 Bảng dữ liệu cho NGƯỜI HIẾN

Bảng 12 Bảng dữ liệu cho THAM CHIẾU BỆNH

Bảng 13 Bảng dữ liệu cho TIỀN SỬ BỆNH ÁN

1 DonationRecordID char 8 Mã lần hiến

Bảng 14 Bảng dữ liệu cho LỊCH SỬ HIẾN

1 WardsID int Mã xã/phường

2 Name nchar 64 Tên xã/phường

3 DistrictID int Mã huyện/quận

Bảng 15 Bảng dữ liệu cho XÃ PHƯỜNG

1 DistrictID int Mã huyện/quận

2 Name nchar 64 Tên huyện/quận

3 ProvinceID int Mã tỉnh/thành phố

Bảng 16 Bảng dữ liệu cho QUẬN HUYỆN

1 ProvinceID int Mã tỉnh/thành phố

2 Name nchar 64 Tên tỉnh/thành phố

Bảng 17 Bảng dữ liệu cho TỈNH THÀNH

1 AddressID char 8 Mã địa chỉ

2 AddressStreet nchar 255 Số nhà, tên đường

3 AddressWard int Mã xã/phường

4 AddressDistrict int Mã quận/huyện

5 AddressProvince int Mã tỉnh/thành phố

Bảng 18 Bảng dữ liệu cho ĐỊA CHỈ

1 HospitalID char 8 Mã bệnh viện

3 HospitalName nchar 255 Tên bệnh viện

4 HospitalPhoneNumber char 15 Số điện thoại bệnh viện

5 HospitalAddress char 8 Mã địa chỉ bệnh viện

6 HospitalEmail char 255 Email liên lạc

Trạng thái được xác nhận của bệnh viện

Bảng 19 Bảng dữ liệu cho THÔNG TIN BỆNH VIỆN

1 EventID char 8 Mã sự kiện

2 EventName nchar 255 Tên sự kiện

3 HospitalID char 8 Mã bệnh viện

4 EventTimetag datetime Thời gian xác nhận sự kiện

5 EventStart datetime Thời gian bắt đầu

6 EventEnd datetime Thời gian kết thúc

7 TargetQuantity int Số đơn vị máu tiếp nhận

8 EventDonationPoint char 8 Mã địa điểm

Bảng 20 Bảng dữ liệu cho THÔNG TIN ĐỢT HIẾN

1 EventID char 8 Mã sự kiện

Bảng 21 Bảng dữ liệu cho NGƯỜI THAM GIA

1 FeedbackID char 8 Mã phản hồi

2 Name char 8 ID người phản hồi

3 FeedbackText text max Nội dung phản hồi

Bảng 22 Bảng dữ liệu cho PHẢN HỒI HỆ THỐNG

4.6.4 Mô hình cơ sở dữ liệu

Hình 34 Mô hình cơ sở dữ liệu từ MySQL

MÔ TẢ CHỨC NĂNG HỆ THỐNG

Đăng nhập

Hình 35 Mẫu thiết kế giao diện Đăng nhập

Mô tả Đăng nhập vào website

Mục Kiểu Dữ liệu Mô tả

Tên đăng nhập Input type: text username Nhập tên tài khoản đăng nhập website

Mật khẩu Input type: password password Nhập mật khẩu đăng nhập website Đăng nhập Button

Tên hành động Mô tả Thành công Thất bại Đăng nhập Kiểm tra người dùng/ bệnh viện/ quản trị viên và truy cập vào hệ thống

Truy cập vào hệ thống với phân quyền của từng đối tượng

Hiển thị “Nhập sai tài khoản hoặc mật khẩu”.

Đăng kí

5.2.1 Đăng ký trở thành người hiến máu

Màn hình đăng kí trở thành người hiến máu gồm 02 phân được mô tả liên tiếp bên dưới

❖ Giao diện tạo tài khoản tư cách người hiến máu

Hình 36 Mẫu thiết kế giao diện Tạo tài khoản tư cách người hiến máu

Màn hình Tạo tài khoản tư cách người hiến máu

Mô tả Đăng kí tài khoản Website cho người hiến máu

Tên đăng nhập Input type: text username Nhập tên đăng kí tài khoản

Mật khẩu Input type: password password Nhập mật khẩu đăng kí tài khoản Xác nhận mật khẩu Input type: password confirmPassword Xác nhận lại mật khẩu đăng kí

Tên hành động Mô tả Thành công Thất bại

Tiếp tục Chuyển sang biểu mẫu điền thông tin cá nhân người hiến

Chuyển sang màn hình kê khai thông tin cá nhân

Bảng 24 Mô tả chi tiết cho giao diện Tạo tài khoản tư cách người hiến máu

❖ Giao diện đăng ký thông tin cá nhân tư cách người hiến máu

Hình 37 Mẫu thiết kế giao diện Đăng ký thông tin cá nhân tư cách người hiến máu

Màn hình Đăng ký thông tin cá nhân tư cách người hiến máu

Mô tả Kê khai thông tin cá nhân sau nhập các thông tin username và mật khẩu cho tài khoản

Họ và tên Input type: text name Nhập họ tên người đăng kí

Giới tính (Nam, nữ) Select gender Chọn giới tính người đăng kí

Email Input type: text email Nhập địa chỉ email của người đăng kí

Số điện thoại Input type: text phoneNumber Nhập số điện thoại của người đăng kí

Ngày sinh Input type: date dateOfBirth Chọn ngày sinh người đăng kí

Số nhà/ Tên đường Input type: text address Nhập địa chỉ chính xác của người đăng kí

Chọn xã Select ward Chọn địa chỉ theo xã của người đăng kí

Chọn huyện Select district Chọn địa chỉ theo huyện của người đăng kí

Chọn tỉnh Select province Chọn địa chỉ theo tỉnh của người đăng kí

Cân nặng (kg) Input type: text weight Nhập cân nặng người đăng kí

Chiều cao (cm) Input type: text height Nhập chiều cao người đăng kí

Chọn nhóm máu Select bloodType Người đăng kí kê khai nhóm máu của mình

Chọn bệnh án Select medicalHistory Người đăng kí kê khai lịch sử bệnh án của mình Đăng ký Button

Tên hành động Mô tả Thành công Thất bại Đăng kí Hoàn tất thao tác đăng ký của người dùng

Lưu người dùng và yêu cầu người dùng đăng nhập lại

Nếu người dùng kê khai thiếu thông tin, hệ thống sẽ yêu cầu đăng kí đầy đủ, nếu thông tin sai thì hệ thống yêu cầu nhập lại thông tin

Bảng 25 Mô tả chi tiết cho giao diện Đăng ký thông tin cá nhân tư cách người hiến máu

5.2.2 Đăng ký với tư cách tài khoản bệnh viện

Màn hình đăng kí với tư cách tài khoản bệnh viện gồm 02 phân được mô tả liên tiếp bên dưới

❖ Giao diện tạo tài khoản tư cách bệnh viện

Hình 38 Mẫu thiết kế giao diện Nhập thông tin tài khoản bệnh viện

Màn hình Tạo tài khoản tư cách bệnh viện

Mô tả Đăng kí tài khoản Website cho bệnh viện

Tên đăng nhập Input type: text username Nhập tên đăng kí tài khoản

Mật khẩu Input type: password password Nhập mật khẩu đăng kí tài khoản Xác nhận mật khẩu Input type: password password Xác nhận lại mật khẩu đăng kí

Tiếp tục Tiếp tục sang biểu mẫu điền thông tin chi tiết bệnh viện

Chuyển sang màn hình kê khai thông tin bệnh viện

Bảng 26 Mô tả chi tiết cho giao diện Tạo tài khoản tư cách bệnh viện

❖ Giao diện đăng ký thông tin bệnh viện

Hình 39 Mẫu thiết kế giao diện Đăng ký thông tin bệnh viện

Màn hình Đăng ký thông tin bệnh viện

Mô tả Kê khai thông tin cá nhân sau nhập các thông tin username và mật khẩu cho tài khoản

Họ và tên Input type: text name Nhập họ tên người đăng kí

Email Input type: text email Nhập địa chỉ email của người đăng kí

Số điện thoại Input type: text phoneNumber Nhập số điện thoại của người đăng kí

Số nhà/ Tên đường Input type: text address Nhập địa chỉ chính xác của người đăng kí

Chọn xã Select ward Chọn địa chỉ theo xã của người đăng kí

Chọn huyện Select district Chọn địa chỉ theo huyện của người đăng kí

Chọn tỉnh Select province Chọn địa chỉ theo tỉnh của người đăng kí Đăng ký Button

Tên hành động Mô tả Thành công Thất bại Đăng kí Hoàn tất thao tác đăng ký của bệnh viện

Lưu bệnh viện và thoát ra ngoài

Nếu phát hiện thông tin sai hoặc thiếu, yêu cầu điền hoặc sửa lại trường bị sai thông tin

Bảng 27 Mô tả chi tiết cho giao diện Đăng ký thông tin bệnh viện

Tìm kiếm nơi hiến

Hình 40 Mẫu thiết kế giao diện cho Tìm kiếm nơi hiến

Màn hình Tìm kiếm nơi hiến

Mô tả Cho phép người hiến đã đăng nhập tìm kiếm bệnh viện theo khu vực

Chọn tỉnh/ thành phố Select province Chọn địa chỉ theo tỉnh của người đăng kí

Chọn quận/huyện Select district Chọn địa chỉ theo huyện của người đăng kí

Tìm kiếm Cho phép người hiến đã đăng nhập tìm kiếm bệnh viện đã đăng ký trong khu vực được lọc

Hiển thị danh sách các bệnh viện thỏa mãn

Bảng 28 Mô tả chi tiết cho giao diện Tìm kiếm nơi hiến

Quản lý thông tin người hiến máu

Quản lý thông tin người hiến máu được thể hiện qua 4 chức năng: (1) Xem thông tin cá nhân, (2) Sửa thông tin cá nhân, (3) Đổi mật khẩu, (4) Xem lịch sử hiến máu

❖ Các mục (1) Xem thông tin cá nhân và (2) Sửa thông tin cá nhân được mô tả dưới đây

Hình 41 Mẫu thiết kế giao diện Quản lý thông tin người hiến

Màn hình Quản lý thông tin người hiến máu

Mô tả Hiển thị thông tin cá nhân của người hiến máu

Họ và tên Input type: text Donor.name Xem và sửa họ tên tại đây

Ngày sinh Input type: date Donor.dateOfBirth Xem và sửa ngày sinh tại đây

Số điện thoại Input type: tel Donor.tel Xem và sửa SĐT tại đây

E-mail cá nhân Input type: email Donor.email Xem và sửa email cá nhân tại đây Địa chỉ Input type: text Donor.address Xem và sửa địa chỉ tại đây

Chiều cao Input type: text Donor.height Xem và sửa chiều cao tại đây

Cân nặng Input type: text Donor.weight Xem và sửa cân nặng tại đây

Giới tính Label Donor.gender Xem và sửa giới tính tại đây

Nhóm máu Label Donor.bloodType Xem và sửa nhóm máu tại đây

Tiền sử bệnh án Label Donor.medHistory Xem và chỉnh sửa tiền sử bệnh án tại đây Đổi mật khẩu Button Chỉnh sửa thông tin Button Lịch sử hiến máu Button Tìm kiếm nơi hiến Button

Thay đổi thông tin cá nhân sau khi chỉnh sửa

Thông tin cá nhân sẽ được chỉnh sửa và hiển thị trên trang hiện hành Đổi mật khẩu Thay đổi mật khẩu của người dùng

Chuyển đến trang thay đổi mật khẩu

Xem lịch sử hiến máu Chuyển đến trang lịch sử hiến máu

Tìm kiếm nơi hiến máu theo khu vực

Chuyển đến trang Tìm kiếm nơi hiến

Bảng 29 Mô tả chi tiết cho giao diện Xem thông tin cá nhân

❖ Giao diện cho chức năng (3) Đổi mật khẩu được mô tả như bên dưới

Hình 42 Mẫu thiết kế giao diện cho Đổi mật khẩu

Màn hình Đổi mật khẩu

Mô tả Cho phép người dùng đổi mật khẩu

Mật khẩu cũ Input type: password oldPassword Nhập mật khẩu trước khi thay đổi

Mật khẩu mới Input type: password newPassword Nhập mật khẩu mong muốn sau khi thay đổi

Nhập lại mật khẩu mới

Input type: password confirmPassword Xác nhận lại mật khẩu mong muốn sau khi thay đổi

Lưu Cho phép người dùng thay đổi từ mật khẩu cũ sang mật khẩu mới

Thông báo mật khẩu thay đổi thành công

Yêu cầu người dùng kiểm tra lại mật khẩu

Trở về Bỏ qua việc thay đổi mật khẩu, trở về trang trước

Hủy trang, trở về trang trước

Bảng 30 Mô tả cho giao diện Đổi mật khẩu

❖ Giao diện cho chức năng Xem lịch sử hiến máu được mô tả như bên dưới

Hình 43 Mẫu thiết kế giao diện cho Xem lịch sử hiến máu

Màn hình Xem lịch sử hiến máu

Mô tả Cho phép người dùng xem được lịch sử hiến máu của mình và các thông kê đơn giản

Bảng 31 Mô tả cho giao diện Xem lịch sử hiến máu

Tạo phản hồi về hệ thống

Chức năng tạo phản hồi được hiển thị như một bảng pop-up trên màn hình với nền bị làm tối đi

Hình 44 Mẫu thiết kế giao diện cho Tạo phản hồi về hệ thống

Màn hình Tạo phản hồi về hệ thống

Mô tả Cho phép người dùng gửi ý kiến về hệ thống cho quản trị viên

Mục Kiểu Dữ liệu Mô tả Ô nhập ý kiến Input type: text feedback Nhập ý kiến vào đây trước khi gửi ý kiến đi

Gửi ý kiến Cho phép người dùng gửi ý kiến của mình

Lưu ý kiến của người dùng

Tìm kiếm nguồn hiến

Hình 45 Mẫu thiết kế giao diện cho Tìm kiếm nguồn hiến

Màn hình Tìm kiếm nguồn hiến

Mô tả Cho phép người cần máu tìm kiếm nguồn máu theo phạm vi và nhóm máu

Nhóm máu Select bloodType Chọn nhóm máu cần lọc

Chọn xã Select ward Chọn địa chỉ theo xã cần lọc

Chọn huyện Select district Chọn địa chỉ theo huyện cần lọc

Chọn tỉnh Select province Chọn địa chỉ theo tỉnh cần lọc

Tìm kiếm Cho phép người cần máu tìm kiếm nguồn máu theo phạm vi và nhóm máu vừa chọn

Hiển thị ra danh sách người hiến thỏa mãn

Liên hệ Cho phép người cần máu xem thông tin của người hiến

Hiển thị một bảng pop-up về thông tin người hiến được mô tả ở hình dưới

Bảng 33 Mô tả chi tiết cho Tìm kiếm nguồn hiến

Sau khi chọn vào nút Liên hệ, pop-up hiện ra với các thông tin cần thiết của người hiến được chọn như bên dưới

Hình 46 Mẫu thiết kế giao diện với thông tin liên lạc

Xét duyệt bệnh viện

Hình 47 Mẫu thiết kế giao diện Xét duyệt bệnh viện

Màn hình Xét duyệt bệnh viện

Mô tả Cho phép quản trị viên xét duyệt bệnh viện thủ công

Tên bệnh viện Label Địa chỉ Label

Liên lạc Cho phép quản trị viên kiểm tra các thông tin của bệnh viện

Hiển thị ra pop-up danh sách các thông tin của bệnh viện

Bảng 34 Mô tả chi tiết cho giao diện Xét duyệt bệnh viện

Sau khi thực hiện hành động Liên lạc, pop-up được hiện ra có thể được tham khảo như sau:

Hình 48 Mẫu thiết kế giao diện sau khi thực hiện Liên lạc

Màn hình Xét duyệt bệnh viện với thông tin liên lạc

Mô tả Cho phép quản trị viên xét duyệt bệnh viện thủ công

Username Label doctor.username Hiển thị username của tài khoản Tên bệnh viện TextField doctor.hospitalName Tên của bệnh viện Địa chỉ TextField address Địa chỉ bệnh viện Điện thoại TextField doctor.phoneNumber Số điện thoại bệnh viện

E-mail TextField doctor.email Email bệnh viện

Hủy yêu cầu Quản trị viên hủy yêu cầu xác minh của tài khoản bệnh viện nếu thấy nghi ngờ

Tài khoản bệnh viện bị xóa

Xác nhận Quản trị viên xác nhận yêu cầu xác minh của bệnh viện nếu dữ liệu là đúng với thực tế và đã liên lạc thành công với phía bệnh viện

Tài khoản bệnh viện được xác minh

Bảng 35 Mô tả chi tiết cho giao diện Xét duyệt bệnh viện với thông tin liên lạc

Quản lý các “chiến dịch” hiến máu

Hình 49 Mẫu thiết kế giao diện Quản lý "chiến dịch" hiến máu

Màn hình Quản lý “chiến dịch” hiến máu

Mô tả Thông tin về các đợt hiến máu đã thực hiện, thêm và chỉnh sửa đợt hiến máu

Tạo chiến dịch mới Button Nhân viên bệnh viện tạo đợt hiến máu mới

Xem chiến dịch Button Nhân viên bệnh viện xem thông tin về các đợt hiến máu đã triển khai

Button Nhân viên bệnh viện chỉnh sửa thông tin đợt hiến máu

Số người đăng kí trung bình

Số người tiếp cận Label reachedPeople Tổng số chiến dịch Label campaigns

Số lượng người đăng kí

Label subscribers Cho biết số lượng người đăng kí hiến máu trong 1 đợt hiến máu cụ thể

Label shortageType Cho biết lượng máu đang thiếu trong 1 đợt hiến máu cụ thể

Nhân viên bệnh viện tạo 1 đợt hiến máu mới

Truy cập vào màn hình tạo đợt hiến máu mới

Xem chiến dịch Nhân viên bệnh viện xem thông tin về các đợt hiến máu đã triển khai

Truy cập vào màn hình xem lịch sử các đợt hiến máu đã triển khai

Chỉnh sửa thông tin cụ thể về đợt hiến máu vừa mới triển khai trước thời gian bắt đầu hiến máu

Truy cập vào màn hình chiến dịch cần chỉnh sửa

Bảng 36 Mô tả chi tiết cho giao diện Quản lý “chiến dịch” hiến máu

Tạo đợt hiến máu

Hình 50 Mẫu thiết kế giao diện Tạo đợt hiến máu

Màn hình Tạo chiến dịch hiến máu mới

Mô tả Hiển thị những mục cần điền để tạo đợt hiến máu mới

Tên chiến dịch Input type: text campaignName Thời gian bắt đầu Input type: datetime campaignStartDate Thời gian kết thúc Input type: datetime campaignEndDate Số lượng Input type: text campaignNumber

Tạo chiến dịch Nhân viên bệnh viện tạo 1 đợt hiến máu mới Đợt hiến máu sẽ được lưu vào lịch sử đợt hiến

Bảng 37 Mô tả chi tiết cho giao diện Tạo đợt hiến máu

Đăng ký hiến máu

Hình 51 Mẫu thiết kế giao diện Đăng ký hiến máu

Màn hình Tạo chiến dịch hiến máu mới

Mô tả Hiển thị những mục cần điền để tạo đợt hiến máu mới

Tên chiến dịch Label Campain.Name

Thời gian đăng kí còn lại

Số lượng người đã đăng kí

Label Campain.Joined Thanh hiển thị số lượng người đã đăng kí/ tổng số lượng người cần tối thiểu Đăng kí ngay Button

Tên hành động Mô tả Thành công Thất bại Đăng kí ngay Người hiến máu đăng kí tham gia đợt hiến máu

Thông báo người hiến đã đăng kí thành công.

Ghi nhận người hiến máu

Hình 52 Mẫu thiết kế cho Ghi nhận người hiến máu

Màn hình Ghi nhận người hiến máu

Mô tả Cho phép bệnh viện ghi nhận người hiến máu đã hiến máu trong đợt hiến máu

Chọn đợt hiến máu Select Chọn một trong các đợt hiến máu để tiến hành xét duyệt người hiến

Họ và tên Label donor.name

Ngày sinh Label donor.birth

Nhóm máu Label donor.bloodType

Số điện thoại Label donor.phoneNumber

Trạng thái (đã hiến/chưa hiến)

Cho phép tùy chọn ghi nhận người hiến

Hiển thị ra thông tin người hiến và các tùy chọn ghi nhận người hiến

Bảng 39 Mô tả chi tiết cho giao diện chính cho Ghi nhận đợt hiến máu

Sau khi Chọn một người hiến, một pop-up hiện ra với các tùy chọn ghi nhận người hiến cũng như lượng máu và thời gian người đó hiến

Hình 53 Mẫu thiết kế giao diện cho các tùy chọn Ghi nhận đợt hiến máu

Màn hình Ghi nhận người hiến máu – tùy chọn

Mô tả Cho phép bệnh viện thực hiện các thay đổi và ghi nhận người hiến

Tên đợt hiến máu TextField event.eventName Tên người hiến TextField donor.name

Nhóm máu TextField donor.bloodType

Ngày sinh TextField donor.birth

Ngày hiến Input type: date Nhập thời gian người hiến thực hiện hiến máu

Lượng máu hiến Input type: number Nhập lượng máu

(ml) mà người hiến thực hiện hiến máu

Thoát Hủy các tác vụ hiện tại Hủy các tác vụ hiện tại, tải lại trang

Lưu Lưu các thông tin vừa được chỉnh sửa

Lưu thông tin vừa được chỉnh sửa vào CSDL, tải lại trang

Thông báo có lỗi trong thông tin nhập vào, yêu cầu nhập lại

Bảng 40 Mô tả chi tiết cho tùy chọn trong Ghi nhận người hiến máu

CÁC YÊU CẦU PHI CHỨC NĂNG

Yêu cầu về công nghệ

- Hệ thống được xây dựng trên nền tảng website, trong giai đoạn thử nghiệm, hệ thống được chạy trên localhost của mỗi cá nhân

- Hệ quản trị cơ sở dữ liệu được sử dụng trong quá trình phát triển hệ thống là MySQL làm giảm thiểu các trở ngại kĩ thuật để đạt được mức an toàn và nâng cao năng lực xử lý

- Dữ liệu được xử lí tập trung trên 01 cơ sở dữ liệu duy nhất qua mạng Internet.

Yêu cầu về mã hóa thông tin nhạy cảm

- Hệ thống đảm bảo mật khẩu người dùng được mã hóa

- Mật khẩu của người dùng được lưu trong cơ sở dữ liệu dưới dạng chuỗi được Hash.

Yêu cầu về giao diện người dùng

- Giao diện người dùng được thiết kế đáp ứng theo yêu cầu sử dụng cho từng tác nhân trong hệ thống

- Bố cục và màu sắc đảm bảo dễ nhìn, dễ thao tác cho người dùng

- Sử dụng phông chữ tiêu chuẩn có hỗ trợ tiếng Việt.

Yêu cầu về ngôn ngữ thiết kế, tổ chức mã nguồn

- Hệ thống được viết trên nền tảng các ngôn ngữ chính bao gồm: HTML – CSS, Javascript được hỗ trợ bởi Bootstrap, NodeJS

- Cách đặt tên trong mã nguồn được áp dụng theo quy tắc camelCase

- Mã nguồn được viết theo được tổ chức thành các module chức năng riêng và toàn bộ mã nguồn được quản lý thông qua GitHub nhằm quá trình tái sử dụng và quản lý mã nguồn diễn ra tốt hơn.