Xây dựng website đặt lịch khám bệnh tại thành phố đà nẵng

Tên đề tài: Xây dựng website đặt lịch khám bệnh tại thành phố Đà Nẵng.Sinh viên thực hiện: Nguyễn Quang Huy Mã SV: 1911505310224 Lớp: 19T2 Nội dung tóm tắt: Xây dựng Hệ thống website đặt

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA CÔNG NGHỆ SỐ

ĐỒ ÁN TỐT NGHIỆP

ĐẠI HỌC

NGÀNH: CÔNG NGHỆ THÔNG TIN

CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

Đà Nẵng, ngày tháng năm 2023 Giảng viên hướng dẫn

Đà Nẵng, ngày tháng năm 2023 Người phản biện

Tên đề tài: Xây dựng website đặt lịch khám bệnh tại thành phố Đà Nẵng.

Sinh viên thực hiện: Nguyễn Quang Huy

Mã SV: 1911505310224 Lớp: 19T2

Nội dung tóm tắt: Xây dựng Hệ thống website đặt lịch khám bệnh tại thành phố

Đà Nẵng nhằm mục đích phát triển và mở rộng nhiều chức năng hơn, tạo nên mộtwebsite quản lý chuyên nghiệp và hữu ích hơn để có thể đi sâu vào thực tiễn với cácmục tiêu cụ thể như sau:

- Khách vãng lai xem được thông tin bác sĩ, chuyên khoa, thông tin phòng khám

- Khách thành viên xem được thông tin bác sĩ, chuyên khoa, thông tin phòngkhám, thêm thành viên trong gia đình, đặt lịch khám bệnh, đăng ký thành bác sĩ trong

hệ thống

- Bác sĩ xem được thông tin người khám, danh sách người khám, kê đơn thuốc vàhẹn tái khám cho bệnh nhân, cập nhật hồ sơ làm việc, đăng lịch khám bệnh, cập nhậtlịch khám, đăng ký thêm phòng khám, đăng ký thêm chuyên khoa

- Quản trị viên cập nhật tài khoản người dùng, thêm chuyên khoa, thêm phòngkhám, duyệt bác sĩ trên hệ thống, duyệt đăng ký phòng khám, duyệt đăng ký thêmchuyên khoa

Giảng viên hướng dẫn: Th.S Phạm Thị Trà My

Sinh viên thực hiện: Nguyễn Quang Huy - Mã SV: 1911505310224

1 Tên đề tài: Xây dựng website đặt lịch khám bệnh tại thành phố Đà Nẵng

2 Các số liệu, tài liệu ban đầu:

- Tài liệu:

Tài liệu về ReactJs: https://legacy.reactjs.org/

Tài liệu về NodeJs: https://nodejs.org/en/docs

Tài liệu về MySQL: https://www.mysql.com/

3 Nội dung chính của đồ án:

Quá trình xây dựng website đặt lịch khám bệnh tại thành phố Đà Nẵng:

- Thu thập thông tin tài liệu liên quan và khảo sát thực tế

- Phân tích thiết kế các chức năng của hệ thống

- Phân tích thiết kế cơ sơ dữ liệu

- Thiết kế giao diện cho các chức năng

LỜI CẢM ƠN

Lời đầu tiên, em xin gửi lời cảm ơn chân thành đến quý thầy cô đã giúp đỡchúng em thực hiện đề tài này Đặc biệt là ThS Phạm Thị Trà My đã tận tình giúp đỡ

em trong suốt quá trình thực hiện đề tài tốt nghiệp này

Đồng thời, em cũng xin cảm ơn quý thầy cô thuộc ngành Công nghệ thông tinkhoa Công nghệ số, trường Đại học Sư phạm Kỹ thuật - Đại học Đà Nẵng đã truyềnđạt những kiến thức cần thiết và những kinh nghiệm quý báu cho chúng em trong suốtthời gian 4 năm trên giảng đường để em có thể thực hiện tốt đề tài này Đặc biệt, emxin gởi lời cảm ơn chân thành tới TS Hoàng Thị Mỹ Lệ, cùng ThS Lê Vũ giáo viênchủ nhiệm lớp 19T2 đã giúp đỡ em rất nhiều trong quá trình học tập và công việc

Trong quá trình thực hiện đề tài, do kiến thức và thời gian còn hạn chế nênkhông thể tránh khỏi những sai sót Vì vậy em mong quý thầy, cô thông cảm và góp ý

để em có thể hoàn thiện đề tài Và những lời góp ý đó có thể giúp em có thể tránhđược những sai lầm sau này

Em xin chân thành cảm ơn!

Đà Nẵng, ngày tháng năm 2023

Sinh viên thực hiện

LỜI CAM ĐOAN

Em xin cam đoan đồ án “Xây dựng website Đặt lịch khám bệnh tại thành phố Đà

Nẵng” là một công trình nghiên cứu độc lập dưới sự hướng dẫn của giảng viên ThS.

Phạm Thị Trà My Ngoài ra không có bất cứ sự sao chép nào của người khác Đề tài,nội dung báo cáo đồ án là sản phẩm mà em đã nỗ lực nghiên cứu trong quá trình họctập tại trường Các kết quả trình bày trong báo cáo là hoàn toàn trung thực, em xin chịuhoàn toàn trách nhiệm, kỷ luật của trưởng bộ môn và nhà trường đề ra nếu như có vấn

đề xảy ra

Sinh viên thực hiện

MỤC LỤC

MỤC LỤC iii

DANH MỤC HÌNH VẼ x

DANH MỤC BẢNG BIỂU xiv

DANH MỤC CHỮ VIẾT TẮT xvi

MỞ ĐẦU 1

1 Lý do chọn đề tài 1

2 Mục tiêu đề tài 1

3 Đối tượng nghiên cứu và phạm vi nghiên cứu 1

a Đối tượng nghiên cứu 1

b Phạm vi nghiên cứu 2

4 Phương pháp nghiên cứu 2

5 Giải pháp công nghệ 2

6 Cấu trúc đồ án 2

Chương 1: CƠ SỞ LÝ THUYẾT 3

1.1 Tổng quan về ngôn ngữ lập trình 3

1.1.1 REACTJS 3

1.1.2 SCSS 4

1.1.3 NODEJS 4

1.2 Hệ quản trị cơ sở dữ liệu MySQL 5

1.2.1 Công cụ hỗ trợ xây dựng hệ thống 5

1.2.2 Visual Studio Code 5

1.2.3 Xampp 6

Chương 2 : PHÂN TÍCH THIẾT KẾ HỆ THỐNG 8

2.1 Khảo sát yêu cầu 8

2.1.1 Hoạt động nghiệp vụ 8

2.1.2 Đặc tả yêu cầu nghiệp vụ 8

2.1.2.1 Khách vãng lai 8

2.1.2.2 Khách thành viên 8

2.1.2.3 Bác sĩ 8

2.1.2.4 Quản trị viên 9

2.2 Phân tích thiết kế hệ thống 9

2.2.1 Tác nhân 9

2.2.2 Đặc tả yêu cầu phần mềm 9

2.2.2.1 Khách vãng lai 9

2.2.2.2 Khách thành viên 9

2.2.2.3 Bác sĩ 10

2.2.2.4 Quản trị viên 10

2.2.3 Sơ đồ usecase 11

2.2.4 Kịch bản cho Usecase 12

2.2.4.1 Đăng ký tài khoản 12

2.2.4.2 Đăng nhập 12

2.2.4.3 Tìm kiếm 13

2.2.4.4 Cập nhật hồ sơ 13

2.2.4.5 Cập nhật thành viên gia đình 14

2.2.4.6 Đặt lịch khám 15

2.2.4.7 Hủy lịch khám 16

2.2.4.10 Duyệt đăng ký bác sĩ 17

2.2.4.11 Đăng lịch khám bệnh 18

2.2.4.12 Kê đơn thuốc và hẹn tái khám 18

2.2.4.13 Đăng ký thêm phòng khám 19

2.2.4.14 Duyệt đăng ký phòng khám 19

2.2.4.15 Đăng ký chuyên khoa 20

2.2.4.16 Duyệt đăng ký chuyên khoa 20

2.2.4.17 Cập nhật hồ sơ làm việc 21

2.2.4.18 Cập nhật tài khoản người dùng 21

2.2.4.19 Cập nhật chuyên khoa 23

2.2.4.20 Cập nhật phòng khám 24

2.2.5 Sơ đồ hoạt động 26

2.2.5.1 Tìm kiếm 26

2.2.5.2 Đăng ký tài khoản 26

2.2.5.3 Cập nhật hồ sơ 27

2.2.5.4 Cập nhật thành viên gia đình 27

2.2.5.5 Đặt lịch khám bệnh 28

2.2.5.6 Hủy lịch khám 28

2.2.5.7 Đăng ký bác sĩ 29

2.2.5.8 Duyệt đăng ký bác sĩ 29

2.2.5.9 Đăng ký thêm phòng khám 30

2.2.5.10 Đăng ký thêm chuyên khoa 30

2.2.5.11 Duyệt đăng ký phòng khám 31

2.2.5.12 Duyệt đăng ký chuyên khoa 31

2.2.5.13 Đăng lịch khám bệnh 32

2.2.5.14 Kê đơn thuốc và hẹn tái khám 32

2.2.5.15 Cập nhật hồ sơ làm việc 33

2.2.5.16 Cập nhật tài khoản người dùng 33

2.2.5.17 Cập nhật chuyên khoa 34

2.2.5.18 Cập nhật phòng khám 34

2.2.6 Sơ đồ tuần tự 35

2.2.6.1 Tìm kiếm 35

2.2.6.2 Đăng ký tài khoản 35

2.2.6.3 Cập nhật hồ sơ 36

2.2.6.4 Cập nhật thành viên trong gia đình 36

2.2.6.5 Đặt lịch khám bệnh 37

2.2.6.6 Hủy lịch khám 37

2.2.6.7 Đăng ký bác sĩ 38

2.2.6.8 Duyệt đăng ký bác sĩ 38

2.2.6.9 Đăng ký thêm phòng khám 39

2.2.6.10 Đăng ký thêm chuyên khoa 39

2.2.6.11 Duyệt đăng ký chuyên khoa 40

2.2.6.12 Duyệt đăng ký phòng khám 40

2.2.6.13 Đăng lịch khám bệnh 41

2.2.6.14 Kê đơn thuốc và hẹn tái khám 41

2.2.6.15 Cập nhật hồ sơ làm việc 42

2.2.7 Phác thảo giao diện 43

2.2.7.1 Đăng ký tài khoản 43

2.2.7.4 Cập nhật thành viên gia đình 44

2.2.7.5 Đặt lịch khám 46

2.2.7.6 Hủy lịch khám 47

2.2.7.7 Đánh giá bác sĩ 47

2.2.7.8 Đăng ký bác sĩ 48

2.2.7.9 Duyệt đăng ký bác sĩ 49

2.2.7.10 Đăng ký thêm phòng khám 49

2.2.7.11 Duyệt đăng ký phòng khám 50

2.2.7.12 Đăng ký chuyên khoa 50

2.2.7.13 Duyệt đăng ký chuyên khoa 51

2.2.7.14 Đăng lịch khám bệnh 51

2.2.7.15 Kê đơn thuốc và hẹn tái khám 52

2.2.7.16 Cập nhật hồ sơ làm việc 52

2.2.7.17 Cập nhật tài khoản người dùng 53

2.2.7.18 Cập nhật chuyên khoa 53

2.2.7.19 Cập nhật phòng khám 55

2.2.8 Thiết kế ERD 56

2.2.8.1 Table: PHANQUYEN 56

2.2.8.2 Table: TAIKHOAN 56

2.2.8.3 Table: THONGTINBACSI 57

2.2.8.4 Table: PHONGKHAM 58

2.2.8.5 Table: CHUYENKHOA 59

2.2.8.6 Table: LICHKHAM 59

2.2.8.7 Table: DATLICHKHAM 60

2.2.8.8 Table: KHUVUC 61

2.2.8.9 Table: THANHVIENGIADINH 61

2.2.8.10 Table: CAMNANG 62

2.2.8.11 Table: NHANTIN 63

2.2.9 Sơ đồ ERD 63

Chương 3 : XÂY DỰNG CHƯƠNG TRÌNH 64

3.1 Công cụ xây dựng chương trình 64

3.2 Giao diện chương trình 64

3.2.1 Giao diện trang chủ 64

3.2.2 Giao diện đăng ký 65

3.2.3 Giao diện đăng nhập 65

3.2.4 Giao diện tìm kiếm 66

3.2.5 Giao diện cập nhật hồ sơ 66

3.2.6 Giao diện cập nhật thành viên gia đình 67

3.2.7 Giao diện đăng ký trở thành bác sĩ 67

3.2.8 Giao diện đặt lịch khám 68

3.2.9 Giao diện lịch khám đã đặt của người dùng 69

3.2.10 Giao diện nhắn tin cho bác sĩ 71

3.2.11 Giao diện trả lời tin nhắn của bệnh nhân 71

3.2.12 Giao diện đăng lịch khám bệnh 72

3.2.13 Giao diện kê đơn thuốc 72

3.2.14 Giao diện đánh giá bác sĩ sau khi khám 74

3.2.15 Giao diện cập nhật hồ sơ của bác sĩ 74

3.2.16 Giao diện đăng ký thêm phòng khám 75

3.2.19 Giao diện duyệt đăng ký bác sĩ 76

3.2.20 Giao diện cập nhật phòng khám 77

3.2.21 Giao diện cập nhật chuyên khoa 78

3.2.22 Giao diện duyệt phòng khám 78

3.2.23 Giao diện duyệt chuyên khoa 79

3.2.24 Giao diện thống kê tình trạng lịch đặt 79

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 80

TÀI LIỆU THAM KHẢO 82

DANH MỤC HÌNH VẼ

Hình 1 1: Icon Reactjs 3

Hình 1 2: Icon Nodejs 5

Hình 1 3: Icon MySQL 5

Hình 1 4: Ảnh minh họa Visual Studio Code 6

Hình 1 5: Ảnh minh họa XamPP 7

Hình 2 1: Sơ đồ nghiệp vụ website đặt lịch khám bệnh………

8 Hình 2 2 Sơ đồ Usecase 11

Hình 2 3: Sơ đồ hoạt động tìm kiếm 26

Hình 2 4: Sơ đồ hoạt động đăng ký tài khoản 26

Hình 2 5: Sơ đồ hoạt động cập nhật hồ sơ 27

Hình 2 6: Sơ đồ hoạt động cập nhật thành viên gia đình 27

Hình 2 7: Sơ đồ hoạt động đặt lịch khám bệnh 28

Hình 2 8: Sơ đồ hoạt động hủy lịch khám 28

Hình 2 9: Sơ đồ hoạt động đăng ký bác sĩ 29

Hình 2 10: Sơ đồ hoạt động duyệt đăng ký bác sĩ 29

Hình 2 11: Sơ đồ hoạt động đăng ký thêm phòng khám 30

Hình 2 12: Sơ đồ hoạt động đăng ký thêm chuyên khoa 30

Hình 2 13: Sơ đồ hoạt động duyệt phòng khám 31

Hình 2 14: Sơ đồ hoạt động duyệt đăng ký chuyên khoa 31

Hình 2 15: Sơ đồ hoạt động đăng lịch khám bệnh 32

Hình 2 16: Sơ đồ hoạt động kê đơn thuốc 32

Hình 2 17: Sơ đồ hoạt động cập nhật hồ sơ làm việc 33

Hình 2 18: Sơ đồ hoạt động cập nhật tài khoản người dùng 33

Hình 2 19: Sơ đồ hoạt động cập nhật chuyên khoa 34

Hình 2 20: Sơ đồ hoạt động cập nhật phòng khám 34

Hình 2 23: Sơ đồ tuần tự cập nhật hồ sơ 36

Hình 2 24: Sơ đồ tuần tự cập nhật thành viên gia đình 36

Hình 2 25: Sơ đồ đặt lịch khám bệnh 37

Hình 2 26: Sơ đồ tuần tự hủy lịch khám 37

Hình 2 27: Sơ đồ tuần tự đăng ký bác sĩ 38

Hình 2 28: Sơ đồ tuần tự duyệt đăng ký bác sĩ 38

Hình 2 29: Sơ đồ tuần tự đăng ký thêm phòng khám 39

Hình 2 30: Sơ đồ tuần tự đăng ký thêm chuyên khoa 39

Hình 2 31: Sơ đồ tuần tự duyệt đăng ký chuyên khoa 40

Hình 2 32: Sơ đồ tuần tự duyệt đăng ký phòng khám 40

Hình 2 33: Sơ đồ tuần tự đăng lịch khám bệnh 41

Hình 2 34: Sơ đồ tuần tự kê đơn thuốc 41

Hình 2 35: Sơ đồ tuần tự cập nhật hồ sơ làm việc 42

Hình 2 36: Giao diện đăng ký tài khoản 43

Hình 2 37: Giao diện tìm kiếm 43

Hình 2 38: Giao diện cập nhật hồ sơ 44

Hình 2 39: Giao diện cập nhật thành viên gia đình 44

Hình 2 40: Giao diện thêm thành viên gia đình 45

Hình 2 41: Giao diện sửa thành viên gia đình 45

Hình 2 42: Giao diện đặt lịch khám 46

Hình 2 43: Giao diện đặt lịch khám 46

Hình 2 44: Giao diện hủy lịch khám 47

Hình 2 45: Giao diện đánh giá bác sĩ 47

Hình 2 46: Giao diện đánh giá bác sĩ 48

Hình 2 47: Giao diện đăng ký bác sĩ 48

Hình 2 48: Giao diện duyệt đăng ký bác sĩ 49

Hình 2 49: Giao diện đăng ký thêm phòng khám 49

Hình 2 50: Giao diện duyệt đăng ký phòng khám 50

Hình 2 51: Giao diện đăng ký chuyên khoa 50

Hình 2 52: Giao diện duyệt đăng ký chuyên khoa 51

Hình 2 53: Giao diện đăng lịch khám bệnh 51

Hình 2 54: Giao diện kê đơn thuốc và hẹn tái khám 52

Hình 2 55: Giao diện cập nhật hồ sơ làm việc 52

Hình 2 56: Giao diện cập nhật tài khoản người dùng 53

Hình 2 57: Giao diện cập nhật chuyên khoa 53

Hình 2 58: Giao diện thêm chuyên khoa 54

Hình 2 59: Giao diện sửa chuyên khoa 54

Hình 2 60: Giao diện cập nhật phòng khám 55

Hình 2 61: Giao diện thêm phòng khám 55

Hình 2 62: Sơ đồ ERD 63

Hình 3 1: Giao diện trang chủ………

64 Hình 3 2: Giao diện đăng ký 65

Hình 3 3: Giao diện đăng nhập 65

Hình 3 4: Giao diện tìm kiếm 66

Hình 3 5: Giao diện cập nhật hồ sơ 66

Hình 3 6: Giao diện cập nhật hồ sơ cho gia đình 67

Hình 3 7: Giao diện đăng ký bác sĩ trên hệ thống 67

Hình 3 8: Giao diện sau khi click vào bác sĩ 68

Hình 3 9: Giao diện đặt lịch khám bệnh 69

Hình 3 10: Giao diện lịch khám đã đặt 69

Hình 3 11: Giao diện hủy lịch khám 70

Hình 3 12: Giao diện đánh giá bác sĩ 70

Hình 3 13: Giao diện nhắn tin với bác sĩ 71

Hình 3 14: Giao diện trả lời tin nhắn của bệnh nhân 71

Hình 3 15: Giao diện đăng lịch khám bệnh 72

Hình 3 16: Giao diện danh sách bệnh nhân khám bệnh 72

Hình 3 17: Giao diện kê đơn thuốc 73

Hình 3 18: Giao diện file pdf đơn thuốc của bệnh nhân 73

Hình 3 21: Giao diện đăng ký thêm phòng khám 75

Hình 3 22: Giao diện đăng ký chuyên khoa 75

Hình 3 23: Giao diện cập nhật tài khoản người dùng 76

Hình 3 24: Giao diện danh sách bác sĩ đăng ký 76

Hình 3 25: Giao diện duyệt bác sĩ 77

Hình 3 26: Giao diện cập nhật phòng khám 77

Hình 3 27: Giao diện cập nhật chuyên khoa 78

Hình 3 28: Giao diện duyệt phòng khám 78

Hình 3 29: Giao diện duyệt chuyên khoa 79

Hình 3 30: Giao diện thống kê tình trạng lịch đặt 79

DANH MỤC BẢNG BIỂU

Bảng 2 1: Kịch bản đăng ký tài khoản 12

Bảng 2 2: Kịch bản đăng nhập 12

Bảng 2 3: Kịch bản tìm kiếm 13

Bảng 2 4: Kịch bản cập nhật hồ sơ cá nhân 13

Bảng 2 5: Kịch bản thêm thành viên gia đình 14

Bảng 2 6: Kịch bản cập nhật thành viên gia đình 14

Bảng 2 7: Kịch bản xóa thành viên gia đình 15

Bảng 2 8: Kịch bản đặt lịch khám 15

Bảng 2 9: Kịch bản hủy lịch khám 16

Bảng 2 10: Kịch bản đánh giá bác sĩ 16

Bảng 2 11: Kịch bản đăng ký thành bác sĩ 17

Bảng 2 12: Kịch bản duyệt đăng ký bác sĩ 17

Bảng 2 13: Kịch bản đăng lịch khám bệnh 18

Bảng 2 14: Kịch bản cập nhật lịch khám 18

Bảng 2 15: Kịch bản kê đơn thuốc và hẹn tái khám 19

Bảng 2 16: Kịch bản đăng ký thêm phòng khám 19

Bảng 2 17: Kịch bản duyệt đăng ký phòng khám 19

Bảng 2 18: Kịch bản đăng ký chuyên khoa 20

Bảng 2 19: Kịch bản duyệt đăng ký chuyên khoa 20

Bảng 2 20: Kịch bản cập nhật hồ sơ làm việc 21

Bảng 2 21: Kịch bản thêm tài khoản người dùng 21

Bảng 2 22: Kịch bản cập nhật tài khoản người dùng 22

Bảng 2 23: Kịch bản khóa tài khoản người dùng 22

Bảng 2 24: Kịch bản thêm chuyên khoa 23

Bảng 2 25: Kịch bản cập nhật chuyên khoa 23

Bảng 2 26: Kịch bản xóa chuyên khoa 24

Bảng 2 29: Kịch bản xóa phòng khám 25

Bảng 2 30: Table PHANQUYEN 57

Bảng 2 31: Table TAIKHOAN 58

Bảng 2 32: Table THONGTINBACSI 59

Bảng 2 33: Table PHONGKHAM 59

Bảng 2 34: Table CHUYENKHOA 60

Bảng 2 35: Table LICHKHAM 60

Bảng 2 36: Table DATLICHKHAM 62

Bảng 2 37: Table KHUVUC 62

Bảng 2 38: Table THANHVIENGIADINH 63

Bảng 2 39: Table CAMNANG 63

DANH MỤC CHỮ VIẾT TẮT STT Chữ viết tắt Mô tả Nghĩa tiếng việt

1 ReactJS React JavaScript Một thư viện JavaScript

2 HTML HyperText Markup Language Ngôn ngữ đánh dấu siêu văn

bản

3 CSS Cascading Style Sheets Ngôn ngữ tạo phong cách

cho website

4 NodeJS Node JavaScript

Một môi trường chạy mã JavaScript phía máy chủ (server-side)

5 RDBMS Relational Database

Management System

Hệ quản trị cơ sở dữ liệu quan hệ

MỞ ĐẦU

1 Lý do chọn đề tài

Thế giới ngày nay đã chứng kiến một sự phát triển vượt bậc về công nghệ thôngtin và truyền thông Internet đã trở thành một phương tiện truyền thông và một nguồnthông tin lớn nhất của thế giới Việc ứng dụng công nghệ thông tin và truyền thông đãtạo ra một sự thay đổi lớn trong nhiều lĩnh vực, đặc biệt là trong lĩnh vực chăm sóc sứckhỏe Với xu hướng ngày càng tăng của việc sử dụng dịch vụ y tế trực tuyến, việc xâydựng một website đặt lịch khám bệnh trực tuyến là một hướng đi tất yếu của các bệnhviện và phòng khám

Trong bối cảnh đó, em đã chọn đề tài "Xây dựng website đặt lịch khám bệnh tạithành phố Đà Nẵng" Đề tài này được đưa ra với mục đích tạo ra một môi trường trựctuyến cho người dùng đặt lịch khám bệnh một cách thuận tiện và nhanh chóng.Website này sẽ giúp cho người dùng có thể đăng ký lịch khám bệnh trực tuyến, chọnbác sĩ hoặc chuyên khoa phù hợp với yêu cầu khám bệnh

2 Mục tiêu đề tài

Mục tiêu: Xây dựng Hệ thống website đặt lịch khám bệnh tại thành phố Đà Nẵng

nhằm mục đích phát triển và mở rộng nhiều chức năng hơn, tạo nên một website quản

lý chuyên nghiệp và hữu ích hơn để có thể đi sâu vào thực tiễn với các mục tiêu cụ thểnhư sau:

- Bệnh nhân tìm được thông tin các phòng khám, chuyên khoa theo yêu cầu cầnkhám bệnh và đặt lịch khám bệnh trực tuyến

- Bác sĩ đưa được thông tin phòng khám, lịch trình khám bệnh của mình lên trên

hệ thống

Nhiệm vụ

- Nghiên cứu đề tài

- Phân tích thiết kế hệ thống

- Thiết kế và xây dựng website

3 Đối tượng nghiên cứu và phạm vi nghiên cứu

a Đối tượng nghiên cứu

- Bệnh nhân có nhu cầu đặt lịch khám bệnh trực tuyến

- Quản lý và bác sĩ trên hệ thống

b Phạm vi nghiên cứu

Website này có thể được ứng dụng cho các phòng khám có mặt trên địa bạn thànhphố Đà Nẵng

4 Phương pháp nghiên cứu

Tham khảo các website đặt lịch khám như Bookingcare, Medpro

5 Giải pháp công nghệ

- Thiết kế cơ sở dữ liệu, sơ đồ usecase, sơ đồ hoạt động: StarUML

- Hỗ trợ soạn thảo mã nguồn: Visual Studio Code

- Ngôn ngữ lập trình:

+ Backend: Nodejs

+ Frontend: Reactjs

- Khác: Git, PostMan, Figma

- Hệ quản trị CSDL: MySQL (chạy trên môi trường XAMPP)

6 Cấu trúc đồ án

Bài báo cáo ngoài các nội dung gồm phần mở đầu và phần kết thúc thì bố cục gồm

có 3 chương:

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

Nêu các cơ sở lý thuyết sẽ áp dụng trong hệ thống: ngôn ngữ REACTJS, SCSS,JavaScript, ngôn ngữ lập trình NODEJS, hệ quản trị cơ sở dữ liệu MySQL

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Trình bày các sơ đồ use case, kịch bản cho các use case, sơ đồ ERD, sơ đồ hoạtđộng của các chức năng trong hệ thống Từ những phân tích ở trên, tiến hành thiết kế

cơ sở dữ liệu cho hệ thống sẽ triển khai

CHƯƠNG 3: XÂY DỰNG CHƯƠNG TRÌNH

Từ những phân tích và thiết kế về hệ thống ở trên, áp dụng xây dựng các chứcnăng hệ thống Trình bày giao diện của phần mềm triển khai

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT1.1 Tổng quan về ngôn ngữ lập trình

1.1.1 REACTJS

ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook,chú trọng vào việc xây dựng giao diện người dùng (UI) ReactJS cho phép các nhàphát triển xây dựng các ứng dụng web đơn trang (Single Page Application - SPA) cóhiệu suất cao và dễ bảo trì

Một trong những đặc điểm nổi bật của ReactJS là hệ thống component.Component trong ReactJS là một khối xây dựng độc lập có thể được sử dụng lại và tái

sử dụng trong các ứng dụng khác nhau Việc sử dụng component giúp giảm thiểu lặplại code, giúp cho ứng dụng dễ bảo trì và phát triển

ReactJS cũng hỗ trợ một cú pháp gọi là JSX, cho phép các nhà phát triển viếtHTML và JavaScript trong cùng một file JSX cho phép code được viết rõ ràng hơn và

dễ đọc hơn

ReactJS cũng có cộng đồng lớn và phong phú, với rất nhiều tài liệu, thư viện vàcông cụ hỗ trợ cho việc phát triển ứng dụng Ngoài ra, ReactJS còn có khả năng tíchhợp với nhiều công nghệ khác như Redux, React Native, NextJS, v.v

Tóm lại, ReactJS là một thư viện JavaScript rất mạnh mẽ, phổ biến trong việc xâydựng các ứng dụng web đơn trang có hiệu suất cao và dễ bảo trì

Hình 1 1: Icon Reactjs

1.1.2 SCSS

SCSS là một phần mở rộng của CSS, cung cấp cho người lập trình nhiều tínhnăng mở rộng và tiện ích hơn so với CSS thông thường SCSS là một ngôn ngữ địnhdạng CSS, nó cung cấp các tính năng như biến, lồng, mixins, toán học và các hàm, cảithiện khả năng tái sử dụng và giảm sự lặp lại của code

SCSS được sử dụng rộng rãi trong các dự án phát triển web để tăng tính hiệu quả,tăng khả năng bảo trì và giảm sự lặp lại của code SCSS có thể được biên dịch thànhCSS thông thường, giúp cho các trình duyệt web có thể hiểu và hiển thị trang web mộtcách chính xác

1.1.3 NODEJS

Node.js là một nền tảng phát triển được xây dựng dựa trên engine JavaScript V8của Google, cho phép chạy mã JavaScript trên server-side Node.js cung cấp cho ngườilập trình một môi trường phát triển dễ sử dụng để xây dựng các ứng dụng web vànetwork I/O, giúp tăng cường hiệu suất và khả năng mở rộng của các ứng dụng

Một số đặc điểm của Node.js bao gồm:

Asynchronous and Event-driven: Node.js được thiết kế để xử lý các tác vụ bấtđồng bộ với hệ thống event-driven, giúp tăng tốc độ và khả năng mở rộng của ứngdụng

Cross-platform: Node.js có thể chạy trên các hệ điều hành khác nhau nhưWindows, Linux, MacOS, v.v

Lightweight and efficient: Node.js có kích thước nhỏ, tiết kiệm tài nguyên và chophép xử lý đồng thời nhiều kết nối trong cùng một lúc

Large and active community: Node.js có một cộng đồng lớn và năng động, vớinhiều tài liệu, thư viện và công cụ hỗ trợ cho việc phát triển ứng dụng

Node.js được sử dụng rộng rãi trong việc phát triển các ứng dụng web, các ứngdụng mạng và các ứng dụng phía server khác Nó cũng có thể được kết hợp với cáccông nghệ khác như ReactJS, ExpressJS, MongoDB, v.v để tạo ra các ứng dụng webhiệu quả và dễ bảo trì

Hình 1 2: Icon Nodejs

1.2 Hệ quản trị cơ sở dữ liệu MySQL

MySQL là một hệ thống quản trị cơ sở dữ liệu quan hệ (RDBMS) hoạt động theo

mô hình client-server RDBMS là một phần mềm hay dịch vụ dùng để tạo và quản lýcác cơ sở dữ liệu (Database) theo hình thức quản lý các mối liên hệ giữa chúng

MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế giới vàđược các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng Vì MySQL

là hệ quản trị cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, hoạtđộng trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh.Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập cơ

sở dữ liệu trên internet

Hình 1 3: Icon MySQL

1.2.1 Công cụ hỗ trợ xây dựng hệ thống

1.2.2 Visual Studio Code

Visual Studio Code được biết đến là một trình biên tập lập trình code miễn phídành cho Windows, Linux và macOS Nó được phát triển bởi Microsoft là sự kết hợphoàn hảo giữa IDE và Code Editor Trình biên tập này được hỗ trợ chức năng debug,

đi kèm với Git, có syntax highlighting, tự hoàn thành mã thông minh, snippets, cùng

đó là cải tiến mã nguồn Ngoài ra, Visual Studio Code còn cho phép người dùng thayđổi theme, phím tắt, và các tùy chọn khác

Những ưu điểm nổi bật của Visual Studio Code:

- Đa dạng ngôn ngữ lập trình giúp bạn thỏa sức sáng tạo như HTML, CSS,JavaScript, C++,…

- Ngôn ngữ, giao diện tối giản, tinh tế, giúp người dùng dễ dàng định hìnhnội dung

- Các tiện ích mở rộng đa dạng, phong phú

- Tích hợp các tính năng bảo mật (Git), tăng tốc xử lý vòng lặp (Debug),…

- Có thể đơn giản trong việc tìm quản lý hết tất cả các Code có trên hệ thống

Hình 1 4: Ảnh minh họa Visual Studio Code

1.2.3 Xampp

Xampp là một phần mềm cho phép giải lập môi trường server hosting ngay trênmáy tính của bạn, cho phép bạn chạy demo website mà không cần phải mua hostinghay VPS Chính vì vậy, Xampp hay được phục vụ cho hoạt động học tập giảng dạy thựhành và phát triển web

Xampp được viết tắt của X + Apache + MySQL + PHP + Perl vì nó được tích hợpsẵn Apache, MySQL, PHP, FTP Server, Mail Server Còn X thể hiện cho sự đa nềntảng của Xampp vì nó có thể dùng được cho 4 hệ điều hành khác nhau: Windows,MacOS, Linus và Solaris

Hình 1 5: Ảnh minh họa XamPP

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

2.1 Khảo sát yêu cầu

2.1.1 Hoạt động nghiệp vụ

Hình 2 1: Sơ đồ nghiệp vụ website đặt lịch khám bệnh

2.1.2 Đặc tả yêu cầu nghiệp vụ

2.1.2.3 Bác sĩ

Bác sĩ xem được thông tin người khám, danh sách người khám, kê đơn thuốc vàhẹn tái khám cho bệnh nhân, cập nhật hồ sơ làm việc, đăng lịch khám bệnh, cập nhậtlịch khám, đăng ký thêm phòng khám, đăng ký thêm chuyên khoa

2.1.2.4 Quản trị viên

Quản trị viên cập nhật tài khoản người dùng, thêm chuyên khoa, thêm phòngkhám, duyệt bác sĩ trên hệ thống, duyệt đăng ký phòng khám, duyệt đăng ký thêmchuyên khoa

- Xem thông tin bác sĩ

- Xem thông tin phòng khám

- Thêm hồ sơ thành viên trong gia đình

- Cập nhật hồ sơ thành viên gia đình

- Xem thông tin bác sĩ

- Xem thông tin phòng khám

- Tìm kiếm bác sĩ

- Tìm kiếm phòng khám

- Tìm kiếm chuyên khoa

- Xem thông tin người khám bệnh

- Xem danh sách người khám bệnh

- Cập nhật tài khoản người dùng

- Thêm chuyên khoa

2.2.3 Sơ đồ usecase

Hình 2 2 Sơ đồ Usecase

2.2.4 Kịch bản cho Usecase

2.2.4.1 Đăng ký tài khoản

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

Bước 1: Actor chọn nút đăng ký tài khoản.

Bước 2: Nhập email, họ và tên, mật khẩu, nhập lại

Đầu vào    Email, mật khẩu

Đầu ra    Hệ thống thông báo đăng nhập thành công

Xử lý 

Bước 1: Actor chọn nút đăng nhập tài khoản.

Bước 2: Nhập email, mật khẩu đã đăng ký lúc tạo tài

khoản

Bước 3: Nhấn nút Đăng nhập.

Bước 4: Hệ thống kiểm tra và thông báo đăng nhập

thành công

2.2.4.3 Tìm kiếm

Use case    Tìm kiếm 

Tác nhân    Khách vãng lai, khách thành viên

Đầu vào    Hình thức tìm kiếm và nhập thông tin cần tìm

Đầu ra    Hiển thị ra thông tin tìm kiếm

Xử lý 

Bước 1: Actor nhấn vào thanh search.

Bước 2: Chọn hình thức tìm kiếm từ các ComboBox

hoặc nhập bác sĩ hoặc phòng khám cần tìm lên thanhsearch

Use case    Cập nhật hồ sơ cá nhân 

Tác nhân    Khách thành viên, lễ tân, bác sĩ, quản trị viên

Đầu vào     Email, họ và tên, mật khẩu, nhập lại mật khẩu, số

điện thoại, địa chỉ, hình ảnh cá nhân, giới tính

Đầu ra    Hệ thống thông báo Cập nhật thành công

Xử lý 

Bước 1: Actor nhấn vào cập nhật hồ sơ cá nhân.

Bước 2: Nhập Email, họ và tên, địa chỉ, số điện

thoại, giới tính, hình ảnh cá nhân muốn cập nhật

Bước 3: Nhấn nút Cập nhật.

Bước 4: Hệ thống kiểm tra và hiển thị thông báo Cập

nhật thành công

Bảng 2 4: Kịch bản cập nhật hồ sơ cá nhân

2.2.4.5 Cập nhật thành viên gia đình

Use case    Thêm thành viên gia đình 

Tác nhân    Khách thành viên

Đầu vào    Chức danh trong gia đình, email, họ, tên, địa chỉ, số

điện thoại, giới tính, hình ảnh cá nhân

Đầu ra    Hệ thống thông báo Thêm thành công

Xử lý 

Bước 1: Actor nhấn vào thêm thành viên gia đình.

Bước 2: Nhập email, họ, tên, địa chỉ, số điện thoại,

giới tính, hình ảnh cá nhân

Bước 3: Nhấn nút Thêm mới.

Bước 4: Hệ thống kiểm tra và hiển thị thông báo

Thêm thành viên thành công

Bảng 2 5: Kịch bản thêm thành viên gia đình

- Usecase liên quan: Cập nhật thành viên gia đình, xóa thành viên gia đình Use case    Cập nhật thành viên gia đình 

Tác nhân    Khách thành viên

Đầu vào    Thành viên cần cập nhật, chức danh, email, họ và tên,

địa chỉ, số điện thoại, giới tính, hình ảnh cần cập nhật

Đầu ra    Hệ thống thông báo Cập nhật thành công

Bước 5: Hệ thống kiểm tra và hiển thị thông báo Cập

nhật thông tin thành công

Use case    Xóa thành viên gia đình 

Tác nhân    Khách thành viên

Đầu vào    Thành viên cần xóa

Đầu ra    Hệ thống thông báo Xóa thành công

Đầu vào    Họ tên, số điện thoại, email, địa chỉ, lý do khám, ngày

sinh, giới tính, người khám

Đầu ra    Hệ thống thông báo Đặt lịch khám thành công 

Xử lý  Bước 1: Actor chọn bác sĩ cần đặt.

Bước 2: Chọn ngày và giờ khám.

Bước 3: Chọn người khám Bước 4: Nhập họ tên, số điện thoại, email, địa chỉ, lý

do khám, ngày sinh, giới tính

Bước 5: Nhấn nút Đặt lịch.

Bước 6: Hệ thống kiểm tra và hiển thị thông báo Đặt

lịch thành công

Bảng 2 8: Kịch bản đặt lịch khám

2.2.4.7 Hủy lịch khám

Use case    Hủy lịch khám 

Tác nhân    Khách thành viên

Đầu vào    Lịch khám đang được đặt

Đầu ra    Hệ thống thông báo Hủy thành công 

Đầu vào    Lịch khám đã hoàn thành

Đầu ra    Hệ thống thông báo Đánh giá bác sĩ thành công 

Xử lý  Bước 1: Actor chọn mục lịch khám.

Bước 2: Trong mục đã khám nhấn nút đánh giá.

Bước 3: Chọn số sao, nhập nội dung đánh giá Bước 4: Nhấn nút Đánh giá.

Đầu ra    Hệ thống thông báo Gửi yêu cầu thành công 

Xử lý 

Bước 1: Actor chọn mục đăng ký trở thành bác sĩ.

Bước 2: Nhập thông tin giới thiệu, khu vực làm việc,

phòng khám ,địa chỉ phòng khám, chuyên khoa, giákhám

Bước 3: Nhấn nút Gửi yêu cầu.

Bước 4: Hệ thống kiểm tra và hiển thị thông báo Gửi

yêu cầu thành công

Bảng 2 11: Kịch bản đăng ký thành bác sĩ

2.2.4.10 Duyệt đăng ký bác sĩ

Use case    Duyệt đăng ký bác sĩ

Tác nhân    Quản trị viên

Đầu vào    Bác sĩ cần duyệt

Đầu ra    Hệ thống thông báo duyệt bác sĩ thành công

Xử lý  Bước 1: Actor chọn mục duyệt đăng ký bác sĩ.

Bước 2: Xem thông tin bác sĩ.

Đầu vào    Ngày khám, giờ khám

Đầu ra    Hệ thống thông báo Đăng lịch thành công

Đầu vào    Ngày khám, giờ khám cần cập nhật

Đầu ra    Hệ thống thông báo Cập nhật lịch thành công

Xử lý  Bước 1: Actor chọn mục cập nhật khám bệnh.

Bước 2: Chọn ngày khám, giờ khám cần cập nhật.

Bước 3: Nhấn nút Xác nhận.