Trang web đặt lịch khám trực tuyến

CƠ SỞ LÝ THUYẾT

Tổng quan về server-side Node JS

NodeJS là một nền tảng mạnh mẽ được xây dựng trên V8 JavaScript Engine, cho phép thực thi mã JavaScript một cách hiệu quả Với khả năng này, NodeJS giúp xây dựng các ứng dụng web một cách đơn giản, đồng thời hỗ trợ mở rộng quy mô dễ dàng.

2.1.1 Một số khái niệm trong Node JS

Phương pháp Non-blocking IO cho phép xử lý đồng thời nhiều yêu cầu trên một luồng đơn mà không cần chờ đợi hoàn thành xử lý của yêu cầu trước Điều này giúp tăng tốc độ xử lý nhờ cơ chế Event loop của NodeJS Mặc dù vậy, vẫn có thể thực hiện xử lý đồng bộ bằng cách sử dụng hàm callback, async/await hoặc promise.

Package manager là một hệ thống lưu trữ và quản lý các gói phần mềm (package/module) cho phép người dùng xuất bản, cài đặt, quản lý phiên bản và phụ thuộc của các gói này Thông qua giao diện dòng lệnh (command line), người dùng có thể dễ dàng cài đặt, cập nhật và gỡ bỏ các gói phần mềm từ kho lưu trữ Hiện nay, có nhiều package manager được sử dụng, nhưng hai công cụ phổ biến nhất vẫn là npm và yarn.

Strapi là một framework NodeJS giúp quản lý nội dung CMS một cách dễ dàng và xây dựng sẵn các Restful API cũng như khả năng tùy chỉnh API Điều này giúp tiết kiệm thời gian phát triển hàng tuần, hàng tháng Ngoài ra, Strapi còn cung cấp giải pháp viết plugin để tùy chỉnh theo yêu cầu đặc biệt của từng ứng dụng Đồng thời, Strapi cũng tích hợp nhiều framework JavaScript, giúp việc xây dựng front-end trở nên dễ dàng và hiệu quả hơn.

Với cơ chế xử lý bất đồng bộ (non-blocking), tốc độ xử lý trở nên nhanh chóng và hiệu quả Điều này cho phép bạn dễ dàng xử lý hàng ngàn kết nối chỉ trong khoảng thời gian ngắn nhất, mang lại trải nghiệm người dùng mượt mà và tối ưu.

Giúp bạn dễ dàng mở rộng khi có nhu cầu phát triển website

Với khả năng nhận và xử lý nhiều kết nối chỉ với một single-thread, hệ thống xử lý sẽ tiêu tốn ít lượng RAM hơn, từ đó giúp tăng tốc quá trình xử lý Nodejs đáng kể.

Có khả năng xử lý nhiều Requests cùng một lúc trong thời gian ngắn nhất

Có khả năng xử lý hàng ngàn Process cho hiệu suất đạt mức tối ưu nhất

Khoa ĐT CLC – ĐH SPKT TP.HCM | 13

Phù hợp để xây dựng những ứng dụng thời gian thực như các ứng dụng chat, mạng xã hội …

Gây hao tốn tài nguyên và thời gian Nodejs được viết bằng C++ và JavaScript nên khi xử lý cần phải trải qua một quá trình biên dịch

NodeJS không có sự chênh lệch quá nhiều so với các ngôn ngữ khác như PHP, Ruby và Python Tuy nhiên, NodeJS có thể phù hợp hơn với việc phát triển ứng dụng mới, trong khi các ngôn ngữ khác có thể là lựa chọn tốt hơn cho các dự án quan trọng và phức tạp Khi xây dựng và triển khai dự án lớn, NodeJS không phải là sự lựa chọn hoàn hảo nhất, và các nhà phát triển cần xem xét kỹ lưỡng các yếu tố trước khi quyết định sử dụng nó.

2.1.4 Môi trường phát triển Node JS

Visual Studio Code là một trình soạn thảo và biên tập code miễn phí do Microsoft phát triển dành cho các lập trình viên, tương thích với hầu hết các hệ điều hành phổ biến như Windows, Linux và macOS Đây là sự kết hợp độc đáo giữa IDE và Code Editor, mang lại trải nghiệm hoàn hảo cho người dùng.

Visual Studio Code không chỉ là một công cụ soạn thảo và chỉnh sửa code đơn giản, mà còn cung cấp nhiều tính năng hỗ trợ hữu ích khác Bạn có thể tùy chỉnh giao diện với các theme đa dạng, tận dụng hàng loạt phím tắt tiện dụng để tăng năng suất làm việc Ngoài ra, công cụ còn tích hợp chức năng debug mạnh mẽ, hỗ trợ Git để quản lý mã nguồn và syntax highlighting để giúp quá trình gõ code trở nên dễ dàng hơn Đặc biệt, phần gợi ý code thông minh cũng giúp bạn hoàn thiện mã nguồn nhanh chóng và chính xác.

2.1.5 Cài đặt môi trường cho Node JS

Bước 1: Download NodeJS tại https://nodejs.org/en/download, phải là bản Node version 14 để có thể chạy code của chúng em

Bước 2: Mở tệp vừa tải về và chấp nhận các tùy chọn mặc định và nhấn "Next Next" cho tới bước cuối cùng

Bước 3: Mở terminal và kiểm tra bằng 2 lệnh node -v và npm -v kết quả sẽ trả về version tương ứng của NodeJS và NPM

Tham khảo chi tiết hơn tại https://openplanning.net/11921/cai-dat-nodejs-tren-windows

Tổng quan về MySQL

MySQL là một hệ quản trị cơ sở dữ liệu mã nguồn mở, hoạt động theo mô hình client-server, cho phép tạo và quản lý các cơ sở dữ liệu một cách hiệu quả.

(Database) theo hình thức quản lý các mối liên hệ giữa chúng

Cách vận hành chính trong môi trường MySQL:

1 MySQL tạo ra bảng để lưu trữ dữ liệu, định nghĩa sự liên quan giữa các bảng đó

2 Client sẽ gửi yêu cầu SQL bằng một lệnh đặc biệt trên MySQL

3 Ứng dụng trên server sẽ phản hồi thông tin và trả về kết quả trên máy client

2.2.1 Một số khái niệm trong MySQL

Database: là tập hợp dữ liệu theo cùng một cấu trúc.

Mã nguồn mở là một khái niệm cho phép bất kỳ ai cũng có thể sử dụng và chỉnh sửa phần mềm Điều này có nghĩa là người dùng có thể cài đặt và tùy chỉnh phần mềm theo nhu cầu của mình Tuy nhiên, giấy phép GPL (GNU Public License) sẽ quyết định mức độ tùy chỉnh và sử dụng phần mềm dựa trên các điều kiện nhất định Ngoài ra, phiên bản thương mại cũng có sẵn cho những người cần thêm chủ quyền linh hoạt và hỗ trợ cao cấp.

Mô hình client-server là kiến trúc cơ bản cho phép lưu trữ và quản lý dữ liệu hiệu quả Trong mô hình này, máy tính hoặc hệ thống máy tính được cài đặt phần mềm MySQL để hoạt động như một máy chủ (server), giúp lưu trữ dữ liệu một cách an toàn và bảo mật Dữ liệu được tổ chức trong các bảng (table) và các bảng này có mối liên hệ với nhau, cho phép người dùng truy cập và quản lý dữ liệu thông qua máy khách (client).

MySQL client không nhất thiết phải là phần mềm MySQL của Oracle, mà là nói chung về mọi phần mềm có thể thực hiện truy vấn lên một máy chủ MySQL và nhận kết quả trả về Ưu điểm của MySQL bao gồm khả năng thực hiện truy vấn linh hoạt và hiệu quả, giúp người dùng dễ dàng quản lý và phân tích dữ liệu.

MySQL là cơ sở dữ liệu tốc độ cao và ổn định, dễ sử dụng và hoạt động trên nhiều hệ điều hành, cung cấp hệ thống lớn các hàm tiện ích, giúp người dùng dễ dàng thao tác và quản lý dữ liệu một cách hiệu quả.

MySQL sở hữu tính bảo mật cao, phù hợp với các ứng dụng có truy cập cơ sở dữ liệu trên internet Điều này là nhờ vào việc sở hữu nhiều tính năng bảo mật cấp cao, giúp đảm bảo an toàn dữ liệu cho người dùng.

MySQL là một hệ quản trị cơ sở dữ liệu đa tính năng, hỗ trợ hàng loạt các chức năng SQL từ hệ quản trị cơ sở dữ liệu quan hệ trực tiếp và cả gián tiếp, giúp người dùng thực hiện các thao tác quản lý dữ liệu một cách linh hoạt và hiệu quả.

 Khả năng mở rộng và mạnh mẽ - Công cụ MySQL có khả năng xử lý khối dữ liệu lớn và có thể mở rộng khi cần thiết.

MySQL is a versatile database management system that offers cross-platform compatibility, allowing it to run seamlessly on various operating systems, including Novell NetWare, Windows, Linux, multiple UNIX variants such as Sun Solaris, AIX, and DEC UNIX, as well as OS/2 and FreeBSD.

 Cho phép khôi phục - MySQL cho phép các transactionđược khôi phục, cam kết và phục hồi sự cố

 Bị hạn chế về dung lượng: Số bản ghi trong MySQL càng tăng thì truy xuất dữ liệu càng trở nên khó khăn do hạn chế về dung lượng

 Tùy theo nhu cầu sử dụng mà nó yêu cầu bộ nhớ lưu trữ lớn.

 Quá trình gỡ lỗi các quy trình được lưu trữ không đơn giản

 Hoạt động của nó phụ thuộc vào kết nối máy chủ

2.2.3 Môi trường phát triển MySQL

XAMPP là một phần mềm mạnh mẽ cho phép giả lập môi trường server hosting trực tiếp trên máy tính của bạn, giúp bạn chạy demo website mà không cần phải mua hosting hay VPS Với tên viết tắt của X + Apache + MySQL + PHP + Perl, XAMPP tích hợp sẵn các công nghệ như Apache, MySQL, PHP, FTP server và Mail Server Đặc biệt, XAMPP hỗ trợ đa nền tảng, cho phép sử dụng trên 4 hệ điều hành khác nhau bao gồm Windows, MacOS, Linux và Solaris.

2.2.4 Cài đặt môi trường cho MySQL

 Bước 1: Truy cập vào http://dev.mysql.com/downloads/ để tải bản cài đặt MySQL

Bước 2: Làm theo hướng dẫn chi tiết có hình ảnh minh hoạ tại https://openplanning.net/10221/cai-dat-co-so-du-lieu-mysql-tren-windows [3]

Tổng quan về React JS

React JS is a JavaScript library developed by Facebook for building Single Page Applications It facilitates the creation of various components, enabling developers to construct dynamic and interactive user interfaces.

UI có tính tương tác cao, có trạng thái và có tính tái sử dụng cao

Các tính năng của ReactJS tập trung vào việc chia nhỏ phần mềm thành các phần mềm riêng lẻ, cho phép các nhà phát triển phá vỡ giao diện người dùng phức tạp thành các phần mềm đơn giản và dễ quản lý hơn.

Khoa ĐT CLC – ĐH SPKT TP.HCM | 16 dữ liệu không chỉ được thực hiện ở vị trí server mà còn ở vị trí client khi sử dụng ReactJS.[4]

Môi trường phát triển React JS

NodeJS và NPM : NodeJS là nền tảng cần thiết cho sự phát triển ReactJS Kiểm tra thiết lập môi trường NodeJS

Sau khi cài đặt Node JS, ta bắt đầu cài đặt React sử dụng npm để cài đặt React JS

 Sử dụng create-react-app command.

Kiến trúc về React JS

Component là một khối mã độc lập, có thể tái sử dụng và chia giao diện người dùng (UI) thành nhiều phần nhỏ hơn Giống như các khối LEGO, các component có thể được kết hợp lại với nhau để tạo thành một cấu trúc hoàn chỉnh, giúp xây dựng các trang web hoặc giao diện người dùng phức tạp từ nhiều khối mã nhỏ.

React Native có 2 loại component: Funtional (Stateless) và Class (Stateful)

Functional components are often referred to as stateless components due to their inability to handle complex tasks such as managing React State or lifecycle methods However, with the introduction of React Hooks in version 16.8, functional components can now utilize state and other features, greatly enhancing their capabilities.

Class Components phức tạp hơn functional components ở chỗ nó còn có: phương thức khởi tạo, life-cycle, hàm render() và quản lý state (data)

Khi làm việc với props trong React, cần nhớ rằng props là viết tắt của Properties và đại diện cho dữ liệu không thể thay đổi (immutable) Các component con nhận props từ component cha và chỉ được phép đọc giá trị của chúng, không được phép thay đổi Điều này đảm bảo tính nhất quán và an toàn cho dữ liệu trong ứng dụng React.

Khi tạo ra các component trong ứng dụng, dữ liệu sẽ được truyền theo một chiều, từ component cha đến các component con Để tăng tính linh hoạt và tái sử dụng, bạn có thể tạo ra component sử dụng props, giúp trừu tượng hóa các component và có thể sử dụng chúng ở nhiều nơi khác nhau trong ứng dụng.

State hoạt động khác biệt so với props, vì nó là dữ liệu nội bộ của một Component, trong khi props là dữ liệu được truyền cho Component Điều này cho phép chúng ta thay đổi state và coi nó là một kiểu dữ liệu mutable, nhưng cần lưu ý không thay đổi trực tiếp biến this.state mà nên sử dụng hàm setState để cập nhật giá trị Việc sử dụng hàm setState không chỉ giúp cập nhật giá trị mà còn kích hoạt việc render lại component và các component con nằm trong nó Tuy nhiên, cần lưu ý rằng hàm setState chạy bất đồng bộ, do đó việc đọc giá trị state ngay sau khi setState có thể không trả về giá trị đã được cập nhật.

ReactJS cho phép định nghĩa các component dưới dạng class hoặc function, với mỗi loại có những tính năng riêng biệt Để khai báo một React class component, cần phải extend Component, trong khi đó React Functional Component là một function Javascript/ES6 đơn giản, trả về một React element và nhận props làm tham số nếu cần thiết Ngoài ra, lifecycle của một component thường được chia làm ba phần chính, giúp quản lý vòng đời của component một cách hiệu quả.

Cài đặt môi trường cho React JS

Bước 1: Cài đặt React và React DOM

Bước 2: Cài đặt Webpack / Babel

Bước 3: Cài đặt trình biên dịch, server

Bước 4: Cài đặt Bundle để tạo gói

KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

Khảo sát hiện trạng

3.1.1 Khảo sát nhu cầu người dùng

Ngày nay, sự phát triển của các trang web và mạng xã hội đã tạo ra một nhu cầu mới về các dịch vụ y tế trực tuyến Để đáp ứng nhu cầu này, các trang web liên quan đến y tế cần phải có giao diện đẹp, dễ sử dụng và chức năng đa dạng, cho phép người dùng có thể truy cập và sử dụng mọi lúc, mọi nơi Điều này đòi hỏi các nhà phát triển phải không ngừng cải thiện và đổi mới về cả giao diện lẫn chức năng để mang lại trải nghiệm tốt nhất cho người dùng.

Khảo sát hiện trạng một số ứng dụng đặt món ăn trên thị trường:

Hình 3 1 Khảo sát trang web BookingCare

Trang web này sở hữu một số ưu điểm đáng chú ý, bao gồm thanh menu đầy đủ và dễ dàng tìm kiếm theo nhiều từ khóa, giúp người dùng nhanh chóng truy cập thông tin cần thiết Trang giới thiệu cũng cung cấp thông tin về y tế và các loại bệnh tật một cách rõ ràng, giúp người dùng hiểu rõ hơn về các vấn đề sức khỏe Bên cạnh đó, bố cục, màu sắc và thiết kế banner của trang web cũng được thiết kế đẹp mắt, tạo ấn tượng tốt đẹp cho người dùng.

 Nhược điểm: o Giao diện khá sáng cho việc sử dụng ngoài trời

Hình 3 2 Khảo sát trang web JioHealth

 Ưu điểm: o Giao diện đẹp mắt, trẻ trung, nhiều mục thông tin chi tiết o Đa dạng về dịch vụ

 Nhược điểm: o Giao diện nhiều chi tiết nhỏ có thể gây rối mắt và hơi mất cân bằng về bên phải

3.1.3 Tổng kết sau khi khảo sát

Để đáp ứng nhu cầu đặt lịch khám của người dùng, thông tin và nội dung cần được phân bố rõ ràng, giúp việc theo dõi và tìm kiếm bác sĩ, thông tin y tế trở nên tiện dụng hơn Việc sắp xếp các chuyên khoa và bác sĩ theo loại sẽ giúp người dùng nhanh chóng tìm được bác sĩ phù hợp với nhu cầu của mình Chức năng đặt lịch và thanh toán cần có bố cục rõ ràng, dễ sử dụng để người dùng có thể chốt đơn nhanh chóng Ngoài ra, giao diện dành cho quản trị viên cần rõ ràng, dễ quản lý, giúp nắm bắt doanh thu và tốc độ phát triển của cửa hàng Để xây dựng hệ thống này, nhóm quyết định sử dụng các công nghệ hiện đại như MySQL, NodeJS, Express và ReactJS, đảm bảo tính ổn định, tốc độ và giao diện đẹp mắt.

Xác định yêu cầu

3.2.1.1 Lược đồ usecase actor User

Hình 3 3 Lươc đồ usecase actor User

3.2.1.2 Lược đồ usecase actor Admin

Hình 3 4 Lược đồ usecase actor Admin

3.2.1.3 Lược đồ usecase actor bác sĩ

Hình 3 5 Lược đồ usecase actor Bác sĩ

3.2.1.4 Lược đồ usecase quá trình xử lý đăng ký lịch khám

Hình 3 6 Lược đồ usecase quá trình đăng ký lịch khám

3.2.2 Bảng Requirement dành cho Usecase

Bảng 3 1 Bảng yêu cầu dành cho Usecase

No Name Usecase Usecase id Actor

1 Đăng nhập UC_01 Admin đã có tài khoản trên hệ thống, User đã có tài khoản trên hệ

Khoa ĐT CLC – ĐH SPKT TP.HCM | 26 thống, Bác sĩ đã có tài khoản trên hệ thống

2 Đăng xuất UC_02 Admin đã có tài khoản trên hệ thống, User đã có tài khoản trên hệ thống, Bác sĩ đã có tài khoản trên hệ thống

3 Đăng ký tài khoản UC_03 User, Bác sĩ chưa có tài khoản trong hệ thống

4 Quản lý bác sĩ UC_04 Admin đã có tài khoản trên hệ thống, Bác sĩ đã có tài khoản trên hệ thống

4.1 Thêm thông tin bác sĩ UC_05 Admin đã có tài khoản trên hệ thống

5 Xem thông tin bác sĩ UC_06

User đã có và chưa có tài khoản trên hệ thống

5.1 Đăng ký lịch khám UC_07 User đã có và chưa có tài khoản trên hệ thống

User đã có và chưa có tài khoản trên hệ thống

6 Quản lý chuyên khoa UC_09 Admin đã có tài khoản trên hệ thống 6.1 Thêm chuyên khoa UC_10 Admin đã có tài khoản trên hệ thống

7 Xem thông tin chuyên khoa UC_11

User, bác sĩ đã có và chưa có tài khoản trên hệ thống

7.1 Xem các bác sĩ có trong chuyên khoa

UC_12 User, bác sĩ đã có và chưa có tài khoản trên hệ thống

7.2 Lọc các bác sĩ có trong chuyên khoa theo tỉnh thành

UC_13 User, bác sĩ đã có và chưa có tài khoản trên hệ thống

8 Quản lý thông tin tài khoản người dùng UC_14 Admin đã có tài khoản trên hệ thống

8.1 Xác nhận tài khoản bác sĩ đăng ký

UC_15 Admin đã có tài khoản trên hệ thống

8.2 Hủy yêu cầu đăng ký tài khoản của bác sĩ

Admin đã có tài khoản trên hệ thống

8.3 Cập nhật thông tin tài khoản UC_17 Admin đã có tài khoản trên hệ thống

8.4 Xóa tài khoản UC_18 Admin đã có tài khoản trên hệ thống

9 Quản lý kế hoạch khám bệnh UC_19

Admin, bác sĩ đã có tài khoản trên hệ thống 9.1 Cập nhật thông tin lịch khám UC_20 Admin, bác sĩ đã có tài khoản trên hệ thống

Khoa ĐT CLC – ĐH SPKT TP.HCM | 28 chữa bệnh cho bác sĩ

9.2 Thêm lịch khám chữa bệnh cho bác sĩ

Admin, bác sĩ đã có tài khoản trên hệ thống

10 Cập nhật thông tin tài khoản cá nhân UC_22

Admin, user, bác sĩ đã có tài khoản trên hệ thống

11 Xác nhận thông tin đăng ký lịch khám UC_23 User đã có tài khoản trên hệ thống

12 Xác nhận đơn đăng ký lịch khám của người dùng

UC_24 Bác sĩ đã có tài khoản trên hệ thống

Bảng 3 2 Đặc tả usecase đăng nhập

Use Case No UC_01 Use case version 1.0

Use case name Đăng nhập

Author Đặng Huỳnh Hoàng Long

● Quản trị viên, bác sĩ, người dùng đã có tài khoản trên hệ thống

● Use case này cho phép quản trị viên, bác sĩ, người dùng đăng nhập vào hệ thống

● Quản trị viên, bác sĩ, người dùng có thể đăng nhập và sử dụng các chức năng với quyền tương ứng

● Quản trị viên, bác sĩ, người dùng nhấn nút “Đăng nhập”

● Quản trị viên, bác sĩ, người dùng đã có tài khoản trong hệ thống

● Thành công: Quản trị viên, bác sĩ, người dùng đăng nhập được vào hệ thống và sử dụng chức năng với quyền tương ứng

● Thất bại: Hệ thống hiển thị lỗi

Step Actor Action System Response

1 Quản trị viên, bác sĩ, người dùng mở trang web lên

Hệ thống hiển thị màn hình trang chủ và nút “Đăng nhập” ở thanh header

2 Quản trị viên, bác sĩ, người dùng nhấn vào nút “Đăng nhập “

Hệ thống chuyển sang màn hình

“Đăng nhập” và yêu cầu người dùng nhập vào các thông tin cá nhân và chuyển qua nhập: Email (email) và mật khẩu (varchar)

3 Người dùng nhấn nút “Đăng nhập”

Hệ thống chuyển sang màn hình trang chủ

4 Bác sĩ nhấn nút “Đăng nhập” Hệ thống chuyển sang trang “Quản lí thông tin bác sĩ”

5 Quản trị viên nhấn nút “Đăng nhập”

Hệ thống chuyển sang trang “Quản lí thông tin người dùng”

No Actor Action System Response

1 Lỗi API Không chuyển về trang chủ

2 Sai tài khoản, mật khẩu Hệ thống sẽ hiện thông báo (alert) và có warning dòng dữ liệu cho người dùng

● Email: không được để trống

● Mật khẩu: không được để trống

Bảng 3 3 Đặc tả usecase đăng xuất

Use case name Đăng xuất

● Quản trị viên, bác sĩ, người dùng đã có tài khoản trên hệ thống

● Use case này cho phép quản trị viên, bác sĩ, người dùng đăng xuất ra khỏi hệ thống

● Quản trị viên, bác sĩ, người dùng đăng xuất khỏi hệ thống

● Quản trị viên, bác sĩ, người dùng đăng nhập và click chọn icon tại thanh header

● Quản trị viên, bác sĩ, người dùng đã đăng nhập được vào hệ thống

● Thành công: Quản trị viên, bác sĩ, người dùng đăng xuất ra khỏi hệ thống

1 Quản trị viên, bác sĩ, người dùng click chọn icon tại thanh header

Hệ thống chuyển từ trang hiện tại sang trang đăng nhập

1 Lỗi API Không chuyển về trang đăng nhập

Bảng 3 4 Bảng đặc tả usecase đăng ký tài khoản

Use case name Đăng ký tài khoản

● Bác sĩ, người dùng chưa có tài khoản trong hệ thống

● Use case này cho phép bác sĩ, người dùng đăng ký tài khoản vào hệ thống

● Bác sĩ, người dùng đăng ký thành công tài khoản vào hệ thống

● Bác sĩ, người dùng click vào nút “Đăng ký” và điền đầy đủ các trường thông tin trong trang Đăng ký và nhấn nút “Lưu”

● Bác sĩ, người dùng chưa có tài khoản trong hệ thống

● Thành công: Đối với người dùng: màn hình chuyển về trang chủ, đối với bác sĩ : màn hình chuyển về trang đăng nhập

1 Bác sĩ, người dùng nhấn vào nút “ Đăng ký “ Hệ thống chuyển từ trang hiện tại sang trang “Đăng ký”

2 Bác sĩ, người dùng nhập các thông tin tương ứng ở trang

“Đăng ký” và nhấn nút “Lưu”

Hệ thống sẽ thông báo thành công

1 Lỗi API Không chuyển về trang đăng ký, đăng ký thất bại

Để đăng ký thành công, bác sĩ cần trải qua quá trình xét duyệt của quản trị viên Sau khi được xét duyệt thành công, tài khoản của bác sĩ sẽ được kích hoạt và họ có thể đăng nhập vào hệ thống một cách dễ dàng.

Hình 3 7 Sơ đồ usecase quản lý bác sĩ

Bảng 3 5 Đặc tả Usecase quản lý bác sĩ

Use case name Quản lý bác sĩ

● Quản trị viên đã đăng nhập vào hệ thống

● Use case này cho phép quản trị viên có thể chỉnh sửa và xóa thông tin bác sĩ

● Quản trị viên có thể chỉnh sửa thành công hoặc xóa thông tin thành công của bác sĩ

 Quản trị viên click vào “Quản lý Bác sĩ” ở thanh header

● Quản trị viên đăng nhập với quyền Admin

● Thành công: Chuyển sang trang “Quản lý bác sĩ” và quản trị viên có thể chỉnh sửa / xóa thông tin bác sĩ đã chọn

1 Quản trị viên đăng nhập vào website quản lý

Hệ thống hiển thị trang quản lý thông tin người dùng và các mục chọn trên thanh header

2 Quản trị viên rê chuột vào “Quản Hệ thống chuyển sang trang quản lý

Khoa ĐT CLC – ĐH SPKT TP.HCM | 35 lí thông tin” và click vào “Quản lý Bác sĩ” ở thanh header bác sĩ

1 Lỗi API Không chuyển đến trang “Quản lý

 Phải có tài khoản bác sĩ đã đăng ký và đươc phê duyệt trước thì quản trị viên mới có thể chọn bác sĩ để chỉnh sửa / xóa

Bảng 3 6 Đặc tả Usecase thêm thông tin bác sĩ

Use case name Thêm thông tin bác sĩ

● Use case này cho phép quản trị viên thêm các thông tin khác cho bác sĩ

● Quản trị viên có thể thêm thành công thông tin khác cho bác sĩ

 Quản trị viên click vào “Quản lý Bác sĩ” ở thanh header và điền đầy đủ các trường

Khoa ĐT CLC – ĐH SPKT TP.HCM | 36 thông tin trong trang và nhấn nút “Tạo”

● Quản trị viên đăng nhập với quyền Admin

● Thành công: Thêm được các thông tin cho bác sĩ như giá thành, phương thức thanh toán,…

1 Quản trị viên đăng nhập vào website quản lý

Hệ thống hiển thị trang quản lí thông người dùng cùng mục “Quản lí thông tin” hiển thị ở góc trái thanh header

2 Quản trị viên rê chuột vào “Quản lí thông tin” và click vào “Quản lý Bác sĩ” ở thanh header

Hệ thống chuyển sang trang “Quản lý bác sĩ”

3 Quản trị viên điền đầy đủ thông tin ứng các trường trong trang và nhấn nút “Tạo”

Hệ thống sẽ thông báo thành công và các thông tin đã điền sẽ được lưu vào thông tin của bác sĩ đã chọn

1 Lỗi API Không thêm được các thông tin khác cho bác sĩ

 Các trường thông tin không được để trống

Bảng 3 7 Đặc tả usecase xem thông tin bác sĩ

Use case name Xem thông tin bác sĩ

● Người dùng đã đăng nhập vào hệ thống

● Use case này cho phép người dùng xem các thông tin của bác sĩ đã chọn

● Người dùng có thể xem được các thông tin của bác sĩ

● Người dùng nhấn vào bác sĩ mình muốn xem thông tin

● Người dùng đã đăng nhập vào hệ thống

● Thành công: Chuyển sang trang thông tin bác sĩ

1 Người dùng đăng nhập vào website

Hệ thống hiển thị trang chủ

2 Người dùng click vào ô của bác sĩ mình muốn xem

Hệ thống sẽ chuyển sang trang chứa thông tin của bác sĩ đó

1 Lỗi API Chuyển trang thất bại

Bảng 3 8 Đặc tả usecase đăng ký lịch khám

Use case name Đăng ký lịch khám

● Người dùng đã hoặc chưa đăng nhập vào hệ thống

● Use case này cho phép người đăng ký lịch khám cho bản thân

● Người dùng đăng ký được lịch khám cho bản thân

● Người dùng nhấn vào khung giờ và ngày mình muốn sau đó nhập các thông tin yêu cầu và nhấn “Xác nhận”

● Người dùng đã ở trang bác sĩ mà bản thân chọn

● Thành công: Đăng ký được lịch khám cho bản thân

1 Người dùng đã hoặc chưa đăng nhập truy cập vào trang web

2 Người dùng nhấn vào bác sĩ muốn chọn

Hệ thống chuyển sang trang thông tin bác sĩ

3 Người dùng chọn thời gian khám cho bản thân sau đó điền vào các thông tin modal yêu cầu và bấm xác nhận

Hệ thống cập nhật thông tin của đơn đăng ký sau đó gửi mail xác nhận thông tin cho người dùng

4 Người dùng nhấn vào xác nhận đồng ý

Hệ thống sẽ tự động cập nhật lựa chọn của người dùng và gửi email xác nhận cho bác sĩ Sau khi bác sĩ xác nhận đồng ý, hệ thống sẽ gửi email yêu cầu thanh toán cho người dùng, đảm bảo quy trình được thực hiện một cách nhanh chóng và tiện lợi.

1 Lỗi API Đăng ký thất bại, hệ thống không gửi mail xác nhận

 Người dùng đã có tài khoản sẽ tự động đổ dữ liệu vào các trường thông tin khi đăng ký lịch

 Khi người dùng đăng ký thì khung giờ đã chọn sẽ được khóa lại và không hiển thị lên giao diện nữa

 Nếu người dùng hủy đơn trong quá trình đăng ký thì khung giờ đó sẽ được mở và hiển thị lại trên giao diện

Bảng 3 9 Đặc tả usecase thanh toán

Use case name Thanh toán

● Use case này cho phép người dùng thanh toán đơn đăng ký lịch khám

● Người dùng có thể thanh toán đơn đăng ký lịch khám

● Người dùng click vào lựa chọn “Thanh toán” ở mail được hệ thống gửi

● Người dùng đã đăng ký lịch khám

● Thành công: Người dùng có thể thanh toán đơn đăng ký lịch khám

1 Người dùng đã hoặc chưa đăng nhập truy cập vào trang web

2 Người dùng nhấn vào bác sĩ muốn chọn

Hệ thống chuyển sang trang thông tin bác sĩ

3 Người dùng chọn thời gian Hệ thống cập nhật thông tin của đơn

Khi sử dụng dịch vụ Khoa ĐT CLC - ĐH SPKT TP.HCM, bạn có thể thực hiện khám cho bản thân và sau đó điền vào các thông tin yêu cầu trong modal Tiếp theo, bạn sẽ cần bấm xác nhận đăng ký và hệ thống sẽ gửi mail xác nhận thông tin cho người dùng.

4 Người dùng nhấn vào xác nhận đồng ý

Hệ thống sẽ tự động cập nhật lựa chọn của người dùng và gửi email xác nhận đến bác sĩ Sau khi bác sĩ xác nhận đồng ý, hệ thống sẽ gửi email yêu cầu thanh toán đến người dùng, đảm bảo quá trình thanh toán được thực hiện một cách nhanh chóng và tiện lợi.

5 Người dùng xác nhận thanh toán Hệ thống chuyển tới trang thanh toán

6 Người dùng nhâp các thông tin cần để thanh toán

1 Lỗi API Thanh toán thất bại

 Nếu người dùng hủy thanh toán thì khung giờ sẽ được mở lại và hiển thị lên giao diện

Bảng 3 10 Đặc tả usecase quản lý chuyên khoa

Use case name Quản lý chuyên khoa

● Use case này cho phép quản trị viên chuyển sang trang Quản lý chuyên khoa

● Quản trị viên có thể chuyển sang trang Quản lý chuyên khoa

● Quản trị viên rê chuột vào “Chuyên khoa” ở header sau đó chọn “Quản lý chuyên khoa”

● Quản trị viên đã đăng nhập với quyền Admin

● Thành công: Chuyển sang trang quản lý chuyên khoa

1 Quản trị viên đăng nhập vào trang web

Hệ thống hiển thị trang “quản lý thông tin người dùng”

2 Quản trị viên nhấn vào mục

Hệ thống chuyển sang trang “quản lý chuyên khoa”

Bảng 3 11 Đặc tả usecase thêm chuyên khoa

Use case name Thêm chuyên khoa

● Use case này cho phép quản trị viên thêm thông tin chuyên khoa

 Quản trị viên thêm thông tin chuyên khoa thành công vào hệ thống

● Quản trị viên nhấn vào mục “Chuyên khoa” sau đó nhấn vào mục “Quản lý chuyên khoa” và điền các thông tin tương ứng và nhấn nút “Lưu”

● Quản trị viên đã đăng nhập hệ thống dưới quyền Admin

● Thành công: Thêm thành công chuyên khoa mới vào hệ thống

● Thất bại: Hệ thống báo lỗi

2 Quản trị viên nhấn vào mục

Hệ thống chuyển sang trang “quản lý chuyên khoa”

3 Quản trị viên điền các thông tin tương ứng với các trường thông tin và nhấn nút “Lưu”

Hệ thống sẽ lưu lại chuyên khoa mới kèm các thông tin được điền

1 Lỗi API Thêm chuyên khoa thất bại

Bảng 3 12 Đặc tả usecase xem thông tin chuyên khoa

Use case name Xem thông tin chuyên khoa

● Use case này cho phép người dùng chuyển sang trang chuyên khoa đã chọn

● Người dùng có thể chuyển sang trang chuyên khoa và xem các thông tin có trong trang

● Người dùng nhấp vào một trong các chuyên khoa muốn xem

● Người dùng đã ở trang chủ

● Thành công: Người dùng có thể chuyển sang trang chứa thông tin chuyên khoa mà mình đã chọn

● Thất bại: Hệ thống thông báo lỗi

1 Người dùng truy cập vào trang web

Hệ thống hiển thị trang chủ cùng các mục chuyên khoa

2 Người dùng nhấn vào một trong các chuyên khoa

Hệ thống chuyển sang trang chứa thông tin của chuyên khoa đó

1 Lỗi API Không chuyển trang

Bảng 3 13 Đặc tả usecase xem các bác sĩ có trong chuyên khoa

Use case name Xem các bác sĩ có trong chuyên khoa

Trường hợp sử dụng này cho phép người dùng dễ dàng xem danh sách các bác sĩ thuộc chuyên khoa cụ thể, đồng thời hiển thị lịch khám của họ Ngoài ra, người dùng cũng có thể chuyển sang trang cá nhân của bác sĩ đó để tìm hiểu thêm thông tin chi tiết.

● Người dùng xem được các bác sĩ có trong chuyên khoa kèm lịch khám của họ và có thể chuyển sang trang của bác sĩ đó

● Người dùng nhấp vào một trong các bác sĩ

● Người dùng đang ở trang chuyên khoa

Khi đạt được thành công, hệ thống sẽ hiển thị trang chuyên khoa tương ứng, bao gồm danh sách các bác sĩ có chuyên môn trong lĩnh vực đó Khi người dùng nhấp vào thông tin của một bác sĩ cụ thể, hệ thống sẽ tự động chuyển hướng sang trang thông tin chi tiết của bác sĩ đó, cung cấp cho người dùng những thông tin hữu ích và cần thiết.

Hệ thống hiển thị trang chủ cùng danh sách các chuyên khoa

2 Người dùng nhấn vào chuyên khoa muốn chọn

Hệ thống chuyển sang trang thông tin chuyên khoa đã chọn

3 Người dùng chọn bác sĩ muốn xem thêm thông tin

Hệ thống chuyển sang trang thông tin của bác sĩ đó

Bảng 3 14 Đặc tả usecase lọc các bác sĩ có trong chuyên khoa theo tỉnh thành

Use case name Lọc các bác sĩ có trong chuyên khoa theo tỉnh thành

● Use case này cho phép người dùng có thể lọc các bác sĩ có chuyên khoa đã chọn ở tỉnh thành đã chọn

● Người dùng có thể lọc được các bác sĩ có ở tỉnh thành đã chọn và có chuyên khoa tương ứng

● Người dùng nhấn vào nút có chữ “Toàn quốc” sẽ hiển thị ra thêm các tỉnh thành để chọn, người dùng chọn tiếp vào tỉnh thành mình muốn

● Người dùng đã ở trang chuyên khoa

● Thành công: Lọc được các bác sĩ có ở tỉnh thành đã chọn

Hệ thống hiển thị trang chủ cùng mục chuyên khoa

2 Người dùng nhấn vào chuyên khoa muốn chọn

Hệ thống chuyển sang trang thông tin chuyên khoa đã chọn

3 Người dùng nhấn vào nút có chữ “Toàn quốc” sẽ hiển thị ra thêm các tỉnh thành để chọn, người dùng chọn tiếp vào tỉnh thành mình muốn

Hệ thống cập nhật lọc ra các bác sĩ có ở tỉnh thành đã chọn

1 Lỗi API Lọc thông tin thất bại

Hình 3 8 Sơ đồ usecase quản lý thông tin tài khoản người dùng

Bảng 3 15 Đặc tả usecase quản lý thông tin tài khoản người dùng

Use case name Quản lý thông tin tài khoản người dùng

● Use case này cho phép quản trị viên xem thông tin tài khoản người dùng

● Quản trị viên có thể xem thông tin của tài khoản người dùng

● Quản trị viên đăng nhập vào hệ thống, hệ thống sẽ chuyển sang trang quản lý thông tin người dùng

● Quản trị viên đăng nhập vào hệ thống

● Thành công: Hiển thị danh sách các tài khoản của người dùng

● Thất bại: Đăng nhập thất bại

Hệ thống hiển thị trang quản lý thông tin người dùng

1 Lỗi API Đăng nhập thất bại

 Không thể xem mật khẩu của tài khoản được

Bảng 3 16 Đặc tả usecase xác nhận tài khoản bác sĩ đăng ký

Use case name Xác nhận tài khoản bác sĩ đăng ký

● Use case này cho phép quản trị viên xác thực tài khoản mà bác sĩ đã đăng ký

● Quản trị viên có thể xác nhận tài khoản bác sĩ

● Quản trị viên nhấn nút sau đó xem các thông tin của bác sĩ đã đăng ký và nhấn nút “Xác nhận”

● Thành công: Xác nhận thành công tài khoản

1 Quản trị viên đăng nhập vào trang web quản lý

Quản trị viên nhấn nút

Hệ thống mở một modal chứa thông tin tài khoản đã đăng ký

3 Quản trị viên nhấn nút “Xác nhận”

Hệ thống hiển thị thành công và đổi trạng thái của tài khoản thành “Đã xác thực”

1 Lỗi API Xác nhận thất bại

 Khi xác nhận yêu cầu đăng ký tài khoản của bác sĩ hệ thống sẽ gửi mail thông báo lai cho bác sĩ

Bảng 3 17 Bảng đăc tả usecase hủy yêu cầu đăng ký tài khoản của bác sĩ

Use case name Hủy yêu cầu đăng ký tài khoản của bác sĩ

● Use case này cho phép quản trị viên hủy yêu cầu đăng ký tài khoản mà bác sĩ đã đăng ký

● Quản trị viên có thể hủy yêu cầu đăng ký tài khoản của bác sĩ và xóa tài khoản khỏi hê thống

● Quản trị viên nhấn nút sau đó xem các thông tin của bác sĩ đã đăng ký và nhấn nút “Hủy”

● Thành công: Hủy yêu cầu và xóa tài khoản khỏi hê thống

1 Quản trị viên đăng nhập vào Hệ thống hiển thị trang quản lý thông

Khoa ĐT CLC – ĐH SPKT TP.HCM | 53 trang web quản lý tin người dùng

Quản trị viên nhấn nút Hệ thống mở một modal chứa thông tin tài khoản đã đăng ký

3 Quản trị viên nhấn nút “Hủy” Hệ thống hủy yêu cầu và xóa tài khoản khỏi hê thống

1 Lỗi API Hủy và xóa tài khoản thất bại

 Khi hủy yêu cầu đăng ký tài khoản của bác sĩ hệ thống sẽ gửi mail thông báo lai cho bác sĩ

Bảng 3 18 Đặc tả usecase cập nhật thông tin tài khoản

Use case name Cập nhật thông tin tài khoản

● Use case này cho phép quản trị viên cập nhật thông tin cho tài khoản

● Quản trị viên có thể cập nhật thông tin cho tài khoản

Để chỉnh sửa thông tin tài khoản, quản trị viên chỉ cần nhấn nút ở cột tác vụ tương ứng, sau đó nhấp vào modal chứa thông tin chi tiết của tài khoản Tại đây, quản trị viên có thể điền các thông tin mới muốn thay đổi vào các trường tương ứng Cuối cùng, hãy nhấn nút "Lưu chỉnh sửa" để lưu lại những thay đổi vừa thực hiện.

● Thành công: Hiển thị đơn hàng đúng với từ khóa chỉ định

1 Quản trị viên đăng nhập vào trang web quản lý

Hệ thống hiển thị trang quản lý thông tin người dùng kèm nút ở cột

2 Quản trị viên nhấn nút Hệ thống mở một cửa sổ chứa thông tin của tài khoản đã chọn

3 Quản trị viên nhập các thông tin muốn thay đổi và nhấn “Lưu chỉnh sửa”

Hệ thống sẽ lưu lại thông tin mới đã chỉnh sửa vào database

1 Lỗi API Thêm thất bại

 Không chỉnh sửa được email và mật khẩu

Bảng 3 19 Bảng đặc tả usecase xóa tài khoản

Use case name Xóa tài khoản

● Use case này cho phép quản trị viên xóa tài khoản đã chọn

● Quản trị viên có thể xóa tài khoản đã chọn

● Quản trị viên nhấn nút sau đó nhấn “Xóa”

● Thành công: Xóa thành công tài khoản đã chọn

Hệ thống hiển thị trang Quản lý thông tin người dùng

2 Quản trị viên nhấn nút Hệ thống sẽ hỏi lại “Có chắc chắn

Khoa ĐT CLC – ĐH SPKT TP.HCM | 56 muốn xóa”

3 Quản trị viên chọn “Xóa” Hệ thống sẽ xóa tài khoản ra khỏi hệ thống

1 Lỗi API Xóa thất bại

Hình 3 9 Usecase quản lý kế hoạch khám bệnh

Bảng 3 20 Đặc tả usecase quản lý kế hoạch khám bệnh

Use case name Quản lý kế hoạch khám bệnh

● Usecase này cho phép quản trị viên vào trang quản lý kế hoạch khám bệnh của bác sĩ

● Quản trị viên có thể vào trang quản lý kế hoạch khám bệnh của bác sĩ

● Quản trị viên nhấn rê chuột vào “Quản lý thông tin” sau đó sẽ chọn “Quản lý kế hoạch khám bệnh”

● Thành công: Chuyển sang trang quản lý kế hoạch khám bệnh

2 Quản trị viên rê chuột vào

“Quản lý thông tin” sau đó sẽ chọn “Quản lý kế hoạch khám bệnh”

Hệ thống chuyển sang trang quản lý kế hoạch khám bệnh

1 Lỗi API Không chuyển trang được

Bảng 3 21 Đặc tả usecase cập nhật thông tin lịch khám chữa bệnh cho bác sĩ

Use case name Cập nhật thông tin lịch khám chữa bệnh cho bác sĩ

● Use case này cho phép quản trị viên cập nhật lịch khám cho bác sĩ

● Quản trị viên có thể cập nhật lịch khám cho bác sĩ

● Quản trị viên chọn bác sĩ, chọn khung giờ và ngày khám cho bác sĩ sau đó nhấn

Khi quản trị viên đã đăng nhập vào hệ thống và đang ở trang quản lý kế hoạch khám chữa bệnh, họ có thể thực hiện chỉnh sửa lịch khám đã có sẵn Việc này cho phép bác sĩ cập nhật và điều chỉnh lịch hẹn khám chữa bệnh một cách linh hoạt và chính xác.

● Thành công: Lưu lại lịch đăng ký khám cho bác sĩ

Hệ thống chuyển sang trang quản lý kế hoạch khám bệnh

3 Quản trị viên chọn bác sĩ, khung giờ và ngày khám sau đó nhấn “Lưu”

Lịch khám sẽ được lưu lại cho bác sĩ đã chọn

1 Lỗi API Không lưu lại lịch khám mới cho bác sĩ

Bảng 3 22 Bảng đăc tả usecase thêm lịch khám chữa bệnh cho bác sĩ

Use case name Thêm lịch khám chữa bệnh cho bác sĩ

Author Đăng Huỳnh Hoàng Long

● Use case này cho phép quản trị viên thêm lịch khám cho bác sĩ

● Quản trị viên có thể thêm lịch khám cho bác sĩ

● Quản trị viên chọn bác sĩ, chọn khung giờ và ngày khám cho bác sĩ sau đó nhấn

● Quản trị viên đã đăng nhập và đang ở trang “Quản lý kế hoạch khám bênh” và bác sĩ muốn tao lịch hiên không có lịch khám

● Thành công: Thêm lich khám cho bác sĩ

Hệ thống chuyển sang trang “quản lý kế hoạch khám bệnh”

3 Quản trị viên chọn bác sĩ, khung giờ và ngày khám sau đó nhấn “Tạo”

Lịch khám sẽ được tạo cho bác sĩ đã chọn

1 Lỗi API Thông báo lỗi không tạo lich được

Bảng 3 23 Bảng đặc tả usecase cập nhật thông tin tài khoản cá nhân

Use case name Cập nhật thông tin tài khoản cá nhân

● Bác sĩ, người dùng đã đăng nhập vào hệ thống

● Use case này cho phép bác sĩ, người dùng chỉnh sửa lại thông tin bản thân

● Bác sĩ, người dùng có thể thay đổi thông tin cá nhân

● Bác sĩ, người dùng nhấn vào nút để chỉnh sửa thông tin cá nhân, sau đó nhấn “Lưu” để lưu lại thông tin mới vào database

● Bác sĩ, người dùng đã đăng nhập và đang ở trang thông tin cá nhân

● Thành công: Hệ thống thay đổi thông tin cá nhân của bác sĩ, người dùng

1 Bác sĩ, người dùng đăng nhập vào trang web

Hệ thống hiển thị trang chủ cùng tên của bác sĩ, người dùng ở thanh header bên phải

2 Bác sĩ, người dùng nhấn vào tên của mình

Hệ thống chuyển sang trang thông tin cá nhân

3 Bác sĩ, người dùng nhấn vào nút để chỉnh sửa thông tin cá nhân, sau đó nhấn “Lưu” để lưu lại thông tin mới vào database

Hệ thống thông báo lưu thành công

1 Lỗi API Thông báo lỗi không lưu được thông tin mới

Bảng 3 24 Bảng đặc tả usecase xác nhận thông tin đăng ký lịch khám

Use case name Xác nhận thông tin đăng ký lịch khám

● Use case này cho phép người dùng xác nhận đơn đặt lịch khám của bản thân

● Người dùng có thể xác nhận đơn đặt lịch khám của bản thân

● Người dùng nhấn vào nút “Xác nhận” ở email xác nhận thông tin đăng ký để xác nhân đơn đặt lịch khám

● Người dùng đã đăng đăng ký lịch khám

● Thành công: Hệ thống gửi email tới bác sĩ

1 Người dùng đăng ký lịch khám Hệ thống gửi một email chứa các thông tin người dùng đã đăng ký lịch khám để xác nhận

2 Người dùng click xác nhận thông tin

Hệ thống sẽ gửi đơn đặt lịch khám tới cho bác sĩ duyệt đơn

1 Lỗi API Thông báo lỗi không xác nhận được, không nhận được mail hoặc không gửi

Khoa ĐT CLC – ĐH SPKT TP.HCM | 64 yêu cầu tới bác sĩ được

 Nếu người dùng hủy yêu cầu thì khung giờ đăng ký sẽ mở lại

Bảng 3 25 Bảng đặc tả usecase Xác nhận đơn đăng ký lịch khám của người dùng

Use case name Xác nhận đơn đăng ký lịch khám của người dùng

● Bác sĩ đăng nhập vào hệ thống

● Use case này cho phép bác sĩ xác nhận đơn đặt lịch khám của người dùng

● Bác sĩ có thể xác nhân đơn đặt lịch khám của người dùng

● Bác sĩ, người dùng nhấn vào nút “Xác nhận” để xác nhân đơn đặt lịch khám của người dùng

● Người dùng đã đăng xác nhận lịch khám ở email xác nhận

● Thành công: Hệ thống gửi email tới người dùng yêu cầu thanh toán

1 Bác sĩ đăng nhập vào trang web Hệ thống hiển thị trang chủ cùng muc

“Quản lý thông tin” ở thanh header

2 Bác sĩ rê chuôt vào và chọn mục

“Quản lý kế hoạch khám bệnh”

Hệ thống chuyển sang trang “Quản lý kế hoạch khám bệnh”

3 Bác sĩ xem xét đơn đặt lịch ở bảng dưới vùng đăng ký lịch khám và nhấn nút “Xác nhận”

Hệ thống thông báo thành công và gửi email yêu cầu thanh toán tới cho người dùng

1 Lỗi API Thông báo lỗi không lưu được thông tin mới

Nếu bác sĩ hủy yêu cầu, khung giờ đăng ký sẽ tự động mở lại và hệ thống sẽ gửi email thông báo đến khách hàng đã đăng ký lịch khám, giúp họ cập nhật thông tin và sắp xếp lịch hẹn mới một cách tiện lợi và nhanh chóng.

THIẾT KẾ ỨNG DỤNG

Thiết kế dữ liệu

4.1.1 Sơ đồ thiết kế dữ liệu

Hình 4 1 Sơ đồ thiết kế dữ liệu

4.1.2 Mô tả thiết kế dữ liệu

STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa

1 _id int Id của tài khoản người dùng được sinh tự động khi tạo mới

2 Email Varchar Email, đồng thời cũng là tài khoản đăng nhập

8 roldId Varchar Id quyền tài khoản (R1: Admin,

9 phoneNumber Varchar Số điện thoại

10 positionId Varchar Id vi trí của bác sĩ khi đăng ký

11 image Longblo Hình đại diện khi đăng ký

12 createAt Date time Thời gian tạo tài khoản

13 updateAt Date time Thời gian khi chỉnh sửa thông tin tài khoản

14 certificateImage Longblo Hình ảnh xác minh bác sĩ (chứng chỉ, giấy xác nhận , )

1 _id Object ID Id mặc định được sinh tự động khi tạo Document

2 keymap Varchar Dùng để định danh khi xử lý API

(là dữ liệu duy nhất, không được phép trùng)

3 Type Varchar Kiểu dữ liệu, dùng để phân biệt với các dữ liệu thuộc kiểu khác

4 valueEN Varchar Dữ liệu thể hiện ra các label khi chuyển ngôn ngữ tiếng Anh

5 valueVi Varchar Dữ liệu thể hiện ra các label khi chuyển ngôn ngữ tiếng Việt

6 createAt Datetime Thời gian khởi tạo

7 updateAt Datetimme Thời gian chỉnh sửa

2 statusId Varchar Trạng thái của đơn đặt lịch

3 doctorId Int Id của bác sĩ

4 patientId Int Id của người dùng

5 Date Varchar Ngày đặt đơn

6 timeType Varchar Khung giờ đăng ký

7 Token Varchar Token dùng để xác thực đơn đăng ký lịch khám của người dùng

8 createdAt Date Thời gian tạo đơn

9 updatedAt Date Thời gian chỉnh sửa đơn

2 name Varchar Tên phòng khám

3 Address Varchar Địa chỉ phòng khám

4 Description Text Thông tin thêm của phòng khám

5 Image Image Hình ảnh của phòng khám

6 createdAt Date Thời gian tạo phòng khám

7 updatedAt Date Thời gian chỉnh sửa phòng khám

Bảng 4 5 Bảng doctor_clinic_specialty

2 clinicId Int Id của phòng khám

4 specialtyId Int Id của chuyên khoa

5 createdAt Datetime Thời gian tạo dữ liệu

6 updatedAt Datetime Thời gian sửa dữ liệu

2 doctorId Int Id bác sĩ

3 specialtyId Int Id chuyên khoa

4 clinicId Int Id phòng khám

5 priceId Varchar Id của giá thành

6 provinceId Varchar Id tỉnh thành

7 paymentId Varchar Id hóa đơn

8 addressClinic Varchar Địa chỉ phòng khám

9 nameClinic Varchar Tên phòng khám

12 createdAt Datetime Thời gian tạo bác sĩ

13 updatedAt Datetime Thời gian chinh sửa bác sĩ

2 currentNumber Int Số hiện tại

3 maxNumber Int Số tối đa

4 Date Varchar Ngày đăng ký lịch

5 timeType Varchar Khung giờ đăng ký

6 doctorId Int Id cua bác sĩ

8 updatedAt Datetime Ngày cập nhật

2 Name Varchar Tên chuyên khoa

3 Image Longblob Ảnh đại diện chuyên khoa

4 contentHTML Varchar Nội dung khi được markdown convert qua HTML

5 contentMarkdown Varchar Nội dung mở rộng cho chuyên khoa

7 updatedAt Date Ngày cập nhật

2 contentHTML Longtext Nội dung khi được markdown convert qua HTML

3 contentMarkdown Longtext Nội dung muốn convert qua

HTML để hiển thị lên giao diện

4 description Longtext Mô tả thêm

6 specialtyId Int Id của chuyên khoa

7 clicnicId Int Id của phòng khám

9 updatedAt Date Ngày cập nhật

Hình 4 2 Sequence diagram đăng nhập

Hình 4 3 Sequence diagram người dùng đăng ký tài khoản

Hình 4 4 Sequence diagram bác sĩ đăng ký tài khoản

Hình 4 5 Sequence diagram quản lý tài khoản

Hình 4 6 Sequence diagram quản lý bác sĩ

Hình 4 7 Sequence Diagram quản lý chuyên khoa

Hình 4 8 Sequence Diagram đăng ký lịch khám

Hình 4 9 Sequence Diagram quản lý đơn đặt lịch

Hình 4 10 Sequence diagram cập nhật thông tin tài khoản

Hình 4 11 Sequence Diagram thanh toán

Hình 4 13 Sơ đồ class diagram

4.6.1 SCP001 Giao diện đăng nhập

Hình 4 15 Giao diện đăng nhập Bảng 4 10 Bảng mô tả màn hình đăng nhập

No Name Required Type Reference Note

1 Sign In True Button Click vào sẽ chuyển sang trang Đăng nhập

2 Sign Up True Button Click vào sẽ chuyển sang trang Đăng ký

3 Translate True Button Có 2 lựa chọn là Tiếng Việt

Khoa ĐT CLC – ĐH SPKT TP.HCM | 85 hoặc Tiếng Anh

4 Email True Input Text Email đã đăng ký, phải có định dạng

5 Password True Input Text Mật khẩu đã đăng ký tương ứng

6 Login True Button Click vào sẽ chuyển sang trang chủ nếu là người dùng và trang quản lí nếu là admin và bác sĩ

7 Sign Up True Link Text Click vào sẽ chuyển sang trang Đăng ký

4.6.2 SCP002 Giao diện trang đăng ký bác sĩ

Hình 4 16 Giao diện trang đăng ký bác sĩ Bảng 4 11 Bảng mô tả tổng quát màn hình trang chủ Web Admin

1 First Name True Input Text Họ

2 Last Name True Input Text Tên

3 Phone True Number Số điện thoại

4 Address True Input Text Địa chỉ

5 Email True Email Phải là định dạng email và đây cũng là email để đăng nhập

6 Password True Password Mật khẩu

7 Sex True Text Chọn giới tính

8 Position True Text Vị trí học vị

9 Role True Text Vai trò muốn đăng ký

10 Add Image True Button Click vào để chọn ảnh muốn tải lên

True Button Click vào để xóa ảnh (nếu đã có)

12 Save True Button Click vào để xác nhận lưu tài khoản với các thông tin trên vào hệ thống

4.6.3 SCP003 Giao diện trang đăng ký người dùng

Hình 4 17 Giao diện trang đăng ký người dùng Bảng 4 12 Bảng mô tả giao diện trang đăng ký người dùng

7 Sex True Text Chọn giới

Khoa ĐT CLC – ĐH SPKT TP.HCM | 89 tính

4.6.4 SCP004 Giao diện trang chủ

Hình 4 18 Giao diện trang chủ

Bảng 4 13 Bảng mô tả giao diện trang chủ

1 Logo True SVG File Logo

2 Sign In True Button Click vào chuyển sang trang đăng nhập

3 Sign Up True Button Click vào chuyển sang trang đăng ký

4 Translate True Button Click vào sẽ cho 2 lựa chọn VNI (tiếng Việt) hoặc

5 Search True Input Text Gõ từ khóa cần tìm để tìm kiếm

4.6.5 SCP005 Giao diện trang chủ 2

Hình 4 19 Giao diện trang chủ 2 Bảng 4 14 Bảng mô tả giao diện trang chủ 2

1 More True Button Click vào để xem thêm các chuyên khoa khác

2 Specialty True Button Data API Click vào sẽ chuyển sang trang chứa thông tin về chuyên khoa đó

3 Next True Button Click vào sẽ di chuyển qua các chuyên khoa tiếp theo

True Button Data cứng Click vào sẽ chuyển sang trang chứa thông tin về cơ sở y tế đó

4.6.6 SCP006 Giao diện các bác sĩ

Hình 4 20 Giao diện các bác sĩ Bảng 4 15 Bảng mô tả giao diện các bác sĩ

True PNG File Data từ API Ảnh đại diện của bác sĩ

True Text Data từ API Vị trí và tên của bác sĩ

3 Specialty True Text Data từ API Chuyên khoa của bác sĩ

4 More True Button Click vào để xem thêm các bác sĩ khác

4.6.7 SCP007 Giao diện quản lý bác sĩ

Hình 4 21 Giao diện quản lý bác sĩ Bảng 4 16 Bảng mô tả giao diện quản lý bác sĩ

True Link Text Chuyển sang trang quản lý thông tin người dùng

True Link Text Chuyển sang trang quản lý phòng khám

True Link Text Chuyển sang trang quản lý chuyên khoa

4 Cẩm nang True Link Text Chuyển sang trang

Khoa ĐT CLC – ĐH SPKT TP.HCM | 94 thêm cẩm nang

5 User name True Text Data từ API Tên của người đăng nhập

7 Sign Out True Button icon Nhấn để đăng xuất

8 Title True Text Tiêu đề của trang

9 Add True Button Nhấn để tạo bác sĩ

Data từ API Chọn bác sĩ

11 Information True Text Thông tin ngoài lề của bác sĩ

Phí khám bệnh của bác sĩ

Tỉnh thành nơi ở của bác sĩ

15 Clinic name True Text Tên phòng khám bác sĩ sẽ khám

True Text Địa chỉ phòng khám

17 Note True Text Ghi chú

Data từ API Chọn chuyên khoa cho bác sĩ

Data từ API Chọn thêm phòng khám cho bác sĩ

20 Text Editor Text Nơi muốn ghi thêm thông tin lên giao diện bác sĩ

Text Nơi hiển thị lên định dạng sẽ hiển thị

4.6.8 SCP008 Giao diện quản lý lịch khám bệnh của bác sĩ

Hình 4 22 Giao diện quản lý lịch khám bệnh của bác sĩ Bảng 4 17 Bảng mô tả giao diện quản lý lịch khám bệnh của bác sĩ

2 Date Picker True Dropdown item

3 Calendar True Calendar Lịch để chọn ngày tháng năm đăng ký

4 Time True Button Khung giờ muốn đăng ký

5 Save True Button Lưu lại thông tin lịch khám bệnh của bác sĩ vào hệ thống

4.6.9 SCP009 Giao diện quản lý chuyên khoa

Hình 4 23 Giao diện quản lý chuyên khoa Bảng 4 18 Bảng mô tả giao diện quản lý chuyên khoa

True Text Tên chuyên khoa muốn thêm

2 Upload file True Button Chọn ảnh đại diện cho chuyên khoa

3 Text Editor True Text Nơi muốn ghi thêm thông tin lên giao diện bác sĩ

True Text Nơi hiển thị lên định dạng sẽ hiển thị

5 Save True Button Lưu lại thông tin

Khoa ĐT CLC – ĐH SPKT TP.HCM | 98 chuyên khoa vừa thêm vào hệ thống

4.6.10 SCP010 Giao diện thông tin bác sĩ

Hình 4 24 Giao diện thông tin bác sĩ Bảng 4 19 Bảng mô tả giao diện thông tin bác sĩ

1 Doctor’s name True Text Data từ API Học vị và họ tên bác sĩ

True Text Data từ API Thông tin ngắn gọn của bác sĩ

3 Booking Date True Date Ngày muốn kiểm tra và

Khoa ĐT CLC – ĐH SPKT TP.HCM | 99 đăng ký lịch khám

4 Booking time True Button Data từ API Các khung giờ bác sĩ đã đăng ký

5 Clinic’s name True Text Data từ API Tên phòng khám

6 Clinic’s address True Text Data từ API Địa chỉ phòng khám

7 Booking price True Text Data từ API Phí khám

8 Description True Text Data từ API Thông tin thêm của bác sĩ

4.6.11 SCP011 Giao diện đăng ký lịch khám

Hình 4 25 Giao diện đăng ký lịch khám

Bảng 4 20 Bảng mô tả giao diện đăng ký lịch khám

1 Booking time True Text Data từ API Khung giờ và ngày đăng ký lịch khám

True Text Các thông tin người dùng cần điền để đăng ký

3 Confirm True Button Xác nhận đơn đăng ký

4 Cancel True Button Hủy đơn đăng ký

4.6.12 SCP012 Giao diện quản lý đơn đặt lịch khám

Hình 4 26 Giao diện quản lý đơn đăng ký lịch khám Bảng 4 21 Bảng mô tả giao diện quản lý đơn đăng ký lịch khám

1 Manage Booking True Button Click vào chuyển sang trang quản lý lịch khám bệnh nhân

2 STT True Text Số thứ tự đơn đăng ký, tăng tự động khi có đơn mới

3 Name True Text Data từ API Họ tên của người dùng đăng ký lịch

4 Time True Text Data từ API Khung giờ đăng ký khám

5 Phone number True Text Data từ API Số điện thoại đăng ký khám

6 Address True Text Data từ API Địa chỉ đăng ký khám

7 Sex True Text Data từ API Giới tính

8 Price True Text Data từ API Giá khám của bác sĩ đã đăng ký

9 Payment Status True Text Data từ API Trạng thái thanh toán của đơn đăng ký

10 Actions True Button Nút để chọn các tác vụ cho đơn đặt

11 Confirm Booking True Button Nhấn vào sẽ xác nhận đồng ý khám và gửi email yêu cầu thanh toán cho người dùng

12 Deny Examination True Button Nhấn vào sẽ hủy yêu cầu khám nhưng vẫn sẽ mở lại khung giờ mà người dùng bị hủy đăng ký

True Button Nhấn vào sẽ hủy yêu cầu khám đồng thời khóa luôn khung giờ khám đó

4.6.13 SCP013 Giao diện chuyên khoa

Hình 4 27 Giao diện chuyên khoa

Bảng 4 22 Bảng mô tả giao diện chuyên khoa

1 Filter Province True Dropdown menu

Data từ API Nhấn vào sẽ hiện xuống các tỉnh thành để lọc bác sĩ

True Text Data từ API Học vị và họ tên bác sĩ

3 Doctor Infomation True Link text Nhấn vào chuyển sang trang thông tin của bác sĩ đó

4 Doctor description True Text Data từ API Mô tả ngắn gọn thông tin về bác sĩ

5 Booking Schedule True Button Data từ API Khung giờ để đăng ký khám

6 Address True Text Data từ API Địa chỉ phòng khám

7 Examination Price True Text Data từ API Giá khám của bác sĩ

8 Detail Price True Link text Nhấn vào sẽ hiển thị chi tiết thanh toán

4.6.14 SCP014 Giao diện thanh toán hóa đơn

Hình 4 28 Giao diện thanh toán hóa đơn Bảng 4 23 Bảng mô tả giao diện thanh toán hóa đơn

1 Name True Text Data từ API Tên người đăng ký

2 Phone number True Text Data từ API Số điện thoại

3 Doctor’s name True Text Data từ API Tên bác sĩ đăng ký

4 Price True Text Data từ API Giá khám

5 Booking Time True Text Data từ API Lịch đăng ký

6 Pay True Button Nhấn vào chuyển tới trang điền thông tin thanh toán

4.6.15 SCP015 Giao diện điền thông tin thanh toán

Hình 4 29 Giao diện điền thông tin thanh toán

Bảng 4 24 Bảng mô tả giao diền điền thông tin thanh toán

1 Email True Email Data từ API Email người đăng ký

2 Visa code True Text Mã thẻ visa

3 Valid date Visa True Text Ngày hết hiệu lực thẻ visa

4 CVV True Text Mã bảo mật của thẻ visa

5 Pay True Button Data từ API Nút nhấn vào để thanh toán đơn đặt lịch

Sơ đồ ERD

Sơ đồ Class Diagram

Hình 4 13 Sơ đồ class diagram

Application Architecture

Thiết kế giao diện

4.6.1 SCP001 Giao diện đăng nhập

Hình 4 15 Giao diện đăng nhập Bảng 4 10 Bảng mô tả màn hình đăng nhập

1 Sign In True Button Click vào sẽ chuyển sang trang Đăng nhập

2 Sign Up True Button Click vào sẽ chuyển sang trang Đăng ký

3 Translate True Button Có 2 lựa chọn là Tiếng Việt

Khoa ĐT CLC – ĐH SPKT TP.HCM | 85 hoặc Tiếng Anh

4 Email True Input Text Email đã đăng ký, phải có định dạng

5 Password True Input Text Mật khẩu đã đăng ký tương ứng

6 Login True Button Click vào sẽ chuyển sang trang chủ nếu là người dùng và trang quản lí nếu là admin và bác sĩ

7 Sign Up True Link Text Click vào sẽ chuyển sang trang Đăng ký

4.6.2 SCP002 Giao diện trang đăng ký bác sĩ

Hình 4 16 Giao diện trang đăng ký bác sĩ Bảng 4 11 Bảng mô tả tổng quát màn hình trang chủ Web Admin

7 Sex True Text Chọn giới tính

8 Position True Text Vị trí học vị

4.6.3 SCP003 Giao diện trang đăng ký người dùng

Hình 4 17 Giao diện trang đăng ký người dùng Bảng 4 12 Bảng mô tả giao diện trang đăng ký người dùng

7 Sex True Text Chọn giới

Khoa ĐT CLC – ĐH SPKT TP.HCM | 89 tính

4.6.4 SCP004 Giao diện trang chủ

Hình 4 18 Giao diện trang chủ

Bảng 4 13 Bảng mô tả giao diện trang chủ

1 Logo True SVG File Logo

2 Sign In True Button Click vào chuyển sang trang đăng nhập

3 Sign Up True Button Click vào chuyển sang trang đăng ký

5 Search True Input Text Gõ từ khóa cần tìm để tìm kiếm

4.6.5 SCP005 Giao diện trang chủ 2

Hình 4 19 Giao diện trang chủ 2 Bảng 4 14 Bảng mô tả giao diện trang chủ 2

1 More True Button Click vào để xem thêm các chuyên khoa khác

2 Specialty True Button Data API Click vào sẽ chuyển sang trang chứa thông tin về chuyên khoa đó

3 Next True Button Click vào sẽ di chuyển qua các chuyên khoa tiếp theo

True Button Data cứng Click vào sẽ chuyển sang trang chứa thông tin về cơ sở y tế đó

4.6.6 SCP006 Giao diện các bác sĩ

Hình 4 20 Giao diện các bác sĩ Bảng 4 15 Bảng mô tả giao diện các bác sĩ

True PNG File Data từ API Ảnh đại diện của bác sĩ

True Text Data từ API Vị trí và tên của bác sĩ

3 Specialty True Text Data từ API Chuyên khoa của bác sĩ

4 More True Button Click vào để xem thêm các bác sĩ khác

4.6.7 SCP007 Giao diện quản lý bác sĩ

Hình 4 21 Giao diện quản lý bác sĩ Bảng 4 16 Bảng mô tả giao diện quản lý bác sĩ

True Link Text Chuyển sang trang quản lý thông tin người dùng

True Link Text Chuyển sang trang quản lý phòng khám

True Link Text Chuyển sang trang quản lý chuyên khoa

4 Cẩm nang True Link Text Chuyển sang trang

Khoa ĐT CLC – ĐH SPKT TP.HCM | 94 thêm cẩm nang

5 User name True Text Data từ API Tên của người đăng nhập

7 Sign Out True Button icon Nhấn để đăng xuất

8 Title True Text Tiêu đề của trang

9 Add True Button Nhấn để tạo bác sĩ

11 Information True Text Thông tin ngoài lề của bác sĩ

Phí khám bệnh của bác sĩ

Tỉnh thành nơi ở của bác sĩ

15 Clinic name True Text Tên phòng khám bác sĩ sẽ khám

True Text Địa chỉ phòng khám

17 Note True Text Ghi chú

Data từ API Chọn chuyên khoa cho bác sĩ

Data từ API Chọn thêm phòng khám cho bác sĩ

20 Text Editor Text Nơi muốn ghi thêm thông tin lên giao diện bác sĩ

Text Nơi hiển thị lên định dạng sẽ hiển thị

4.6.8 SCP008 Giao diện quản lý lịch khám bệnh của bác sĩ

Hình 4 22 Giao diện quản lý lịch khám bệnh của bác sĩ Bảng 4 17 Bảng mô tả giao diện quản lý lịch khám bệnh của bác sĩ

2 Date Picker True Dropdown item

3 Calendar True Calendar Lịch để chọn ngày tháng năm đăng ký

4 Time True Button Khung giờ muốn đăng ký

5 Save True Button Lưu lại thông tin lịch khám bệnh của bác sĩ vào hệ thống

4.6.9 SCP009 Giao diện quản lý chuyên khoa

Hình 4 23 Giao diện quản lý chuyên khoa Bảng 4 18 Bảng mô tả giao diện quản lý chuyên khoa

True Text Tên chuyên khoa muốn thêm

2 Upload file True Button Chọn ảnh đại diện cho chuyên khoa

3 Text Editor True Text Nơi muốn ghi thêm thông tin lên giao diện bác sĩ

True Text Nơi hiển thị lên định dạng sẽ hiển thị

5 Save True Button Lưu lại thông tin

Khoa ĐT CLC – ĐH SPKT TP.HCM | 98 chuyên khoa vừa thêm vào hệ thống

4.6.10 SCP010 Giao diện thông tin bác sĩ

Hình 4 24 Giao diện thông tin bác sĩ Bảng 4 19 Bảng mô tả giao diện thông tin bác sĩ

1 Doctor’s name True Text Data từ API Học vị và họ tên bác sĩ

True Text Data từ API Thông tin ngắn gọn của bác sĩ

3 Booking Date True Date Ngày muốn kiểm tra và

Khoa ĐT CLC – ĐH SPKT TP.HCM | 99 đăng ký lịch khám

4 Booking time True Button Data từ API Các khung giờ bác sĩ đã đăng ký

5 Clinic’s name True Text Data từ API Tên phòng khám

6 Clinic’s address True Text Data từ API Địa chỉ phòng khám

7 Booking price True Text Data từ API Phí khám

8 Description True Text Data từ API Thông tin thêm của bác sĩ

4.6.11 SCP011 Giao diện đăng ký lịch khám

Hình 4 25 Giao diện đăng ký lịch khám

Bảng 4 20 Bảng mô tả giao diện đăng ký lịch khám

1 Booking time True Text Data từ API Khung giờ và ngày đăng ký lịch khám

True Text Các thông tin người dùng cần điền để đăng ký

3 Confirm True Button Xác nhận đơn đăng ký

4 Cancel True Button Hủy đơn đăng ký

4.6.12 SCP012 Giao diện quản lý đơn đặt lịch khám

Hình 4 26 Giao diện quản lý đơn đăng ký lịch khám Bảng 4 21 Bảng mô tả giao diện quản lý đơn đăng ký lịch khám

1 Manage Booking True Button Click vào chuyển sang trang quản lý lịch khám bệnh nhân

2 STT True Text Số thứ tự đơn đăng ký, tăng tự động khi có đơn mới

3 Name True Text Data từ API Họ tên của người dùng đăng ký lịch

4 Time True Text Data từ API Khung giờ đăng ký khám

5 Phone number True Text Data từ API Số điện thoại đăng ký khám

6 Address True Text Data từ API Địa chỉ đăng ký khám

7 Sex True Text Data từ API Giới tính

8 Price True Text Data từ API Giá khám của bác sĩ đã đăng ký

9 Payment Status True Text Data từ API Trạng thái thanh toán của đơn đăng ký

10 Actions True Button Nút để chọn các tác vụ cho đơn đặt

11 Confirm Booking True Button Nhấn vào sẽ xác nhận đồng ý khám và gửi email yêu cầu thanh toán cho người dùng

12 Deny Examination True Button Nhấn vào sẽ hủy yêu cầu khám nhưng vẫn sẽ mở lại khung giờ mà người dùng bị hủy đăng ký

True Button Nhấn vào sẽ hủy yêu cầu khám đồng thời khóa luôn khung giờ khám đó

4.6.13 SCP013 Giao diện chuyên khoa

Hình 4 27 Giao diện chuyên khoa

Bảng 4 22 Bảng mô tả giao diện chuyên khoa

1 Filter Province True Dropdown menu

Data từ API Nhấn vào sẽ hiện xuống các tỉnh thành để lọc bác sĩ

True Text Data từ API Học vị và họ tên bác sĩ

3 Doctor Infomation True Link text Nhấn vào chuyển sang trang thông tin của bác sĩ đó

4 Doctor description True Text Data từ API Mô tả ngắn gọn thông tin về bác sĩ

5 Booking Schedule True Button Data từ API Khung giờ để đăng ký khám

6 Address True Text Data từ API Địa chỉ phòng khám

7 Examination Price True Text Data từ API Giá khám của bác sĩ

8 Detail Price True Link text Nhấn vào sẽ hiển thị chi tiết thanh toán

4.6.14 SCP014 Giao diện thanh toán hóa đơn

Hình 4 28 Giao diện thanh toán hóa đơn Bảng 4 23 Bảng mô tả giao diện thanh toán hóa đơn

1 Name True Text Data từ API Tên người đăng ký

2 Phone number True Text Data từ API Số điện thoại

3 Doctor’s name True Text Data từ API Tên bác sĩ đăng ký

4 Price True Text Data từ API Giá khám

5 Booking Time True Text Data từ API Lịch đăng ký

6 Pay True Button Nhấn vào chuyển tới trang điền thông tin thanh toán

4.6.15 SCP015 Giao diện điền thông tin thanh toán

Hình 4 29 Giao diện điền thông tin thanh toán

Bảng 4 24 Bảng mô tả giao diền điền thông tin thanh toán

1 Email True Email Data từ API Email người đăng ký

2 Visa code True Text Mã thẻ visa

3 Valid date Visa True Text Ngày hết hiệu lực thẻ visa

4 CVV True Text Mã bảo mật của thẻ visa

5 Pay True Button Data từ API Nút nhấn vào để thanh toán đơn đặt lịch

CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG

Cài đặt ứng dụng

 Máy phải có cài đặt NodeJS (phải là version 14)

 Phải cài đặt React Javascript

 Máy phải có visual studio

Bước 1 : Clone hoặc download source code Backend từ link github: https://github.com/17110238/suncare-be

 Mở XAMAPP start Apache và MySQL lên

 Mở mục Admin ở MySQL lên

 Kết nối với file sql của database

Bước 3: Chạy source code Backend

 Mở source code BE ở Visual Studio lên

 Mở terminal và gõ “npm i" để cài đặt các modules

 Gõ lệnh “npm start” để kết nối với database và chạy server

Bước 4: Clone hoặc download source code Frontend từ link github: https://github.com/17110238/suncare-fe

Bước 5: Chạy source code Frontend

 Mở source code FE ở Visual Studio lên

 Mở terminal và gõ “npm i" để cài đặt các modules

 Gõ “npm start” để chạy giao diện lên trình duyệt

System Architecture

Bảng 5 1 Bảng kiểm thử phần mềm

ID Test Case Description Expected Output Result

TC_01 Chức năng đăng ký Người dùng, bác sĩ đăng ký được tài khoản thành công, các trường hợp thất bại đều báo lỗi

TC_02 Chức năng đăng nhập Người dùng, bác sĩ đăng Pass

Khoa ĐT CLC – ĐH SPKT TP.HCM | 110 nhập với quyền tương ứng, các trường hợp thất bại đều báo lỗi

TC_03 Chức năng đăng xuất Người dùng, bác sĩ, quản trị viên đăng xuất thành công, các trường hợp thất bại đều báo lỗi

TC_04 Chức năng tìm kiếm Người dùng, bác sĩ tìm kiếm thành công, các trường hợp thất bại đều báo lỗi

TC_05 Xem thông tin bác sĩ Người dùng, bác sĩ chuyển sang trang xem thông tin bác sĩ thành công, các trường hợp thất bại đều báo lỗi

TC_06 Đặt lịch khám Người dùng đặt lịch khám thành công các trường hợp thất bại đều báo lỗi

TC_07 Thanh toán đơn đặt lịch Người dùng thanh toán đơn đặt lịch thành công các trường hợp thất bại đều báo lỗi

Khi người dùng yêu cầu chuyển sang trang chuyên khoa, hệ thống sẽ hiển thị thông tin về các bác sĩ có chuyên môn phù hợp và thông báo thành công Trong trường hợp không tìm thấy thông tin phù hợp, hệ thống sẽ báo lỗi để người dùng biết và thực hiện các bước tiếp theo.

Người dùng và bác sĩ có thể dễ dàng lọc ra các bác sĩ có mặt trong tỉnh thành đã chọn một cách thành công, đồng thời hệ thống cũng sẽ thông báo lỗi đối với các trường hợp lọc không thành công.

Người dùng có thể dễ dàng quản lý tài khoản cá nhân của mình, bao gồm cả việc xem và chỉnh sửa thông tin cá nhân một cách thành công Trong trường hợp chỉnh sửa không thành công, hệ thống sẽ báo lỗi cụ thể để người dùng có thể thực hiện lại một cách chính xác.

TC_11 Thống kê Admin có thể xem thông kê doanh thu, các trường hợp thất bại đều báo lỗi

TC_12 Quản lý tài khoản, thông tin người dùng

Admin có thể sửa / xóa tài khoản, thông tin người dùng thành công,

Khoa ĐT CLC – ĐH SPKT TP.HCM | 112 các trường hợp thất bại đều báo lỗi

TC_13 Quản lý phòng khám Admin có thể thêm phòng khám cho bác sĩ chỉ định thành công, các trường hợp thất bại đều báo lỗi

TC_14 Quản lý chuyên khoa Admin có thể thêm chuyên khoa thành công, các trường hợp thất bại đều báo lỗi

TC_15 Kích hoạt tài khoản cho bác sĩ

Admin kích hoạt tài khoản bị của bác sĩ khi đăng ký thành công, các trường hợp thất bại đều báo lỗi

TC_16 Hủy yêu cầu đăng ký tài khoản của bác sĩ

Admin từ chối yêu cầu đăng ký của bác sĩ, các trường hợp thất bại đều báo lỗi

TC_17 Quản lý kế hoạch khám bệnh

Admin, bác sĩ thêm / sửa lịch đăng ký khám bệnh thành công, các trường hợp thất bại đều

Khoa ĐT CLC – ĐH SPKT TP.HCM | 113 báo lỗi

TC_18 Quản lý đơn đặt lịch khám cho bác sĩ

Bác sĩ có thể dễ dàng xác nhận, từ chối hoặc hủy lịch khám thành công Đồng thời, hệ thống sẽ gửi email thông báo đến người dùng về kết quả của từng trường hợp, giúp họ cập nhật thông tin một cách nhanh chóng và tiện lợi.

Tiêu đề	Trang Web Đặt Lịch Khám Trực Tuyến
Tác giả	Đặng Huỳnh Hoàng Long, Phạm Ngọc Tiến
Người hướng dẫn	TS. Nguyễn Thiên Bảo
Trường học	Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	khóa luận tốt nghiệp
Năm xuất bản	2022
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	123
Dung lượng	9,61 MB