Báo cáo xây dựng website đặt lịch khám bệnh online

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA HỆ THỐNG THÔNG TIN BÁO CÁO ĐỒ ÁN ĐỀ TÀI: XÂY DỰNG WEBSITE ĐẶT LỊCH KHÁM BỆNH ONLINE Lớp: SE121.N11 Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Nguyễn Bảo Duy – 19520488 🙡 TP Hồ Chí Minh, 10/2022 🙣 ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN KHOA HỆ THỐNG THÔNG TIN BÁO CÁO ĐỒ ÁN ĐỀ TÀI: XÂY DỰNG WEBSITE ĐẶT LỊCH KHÁM BỆNH ONLINE Lớp: SE121.N11 Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Nguyễn Bảo Duy – 19520488 🙡 TP Hồ Chí Minh, 10/2022 🙣 LỜI CẢM ƠN Em xin gửi lời cảm ơn tới cô Trần Thị Hồng Yến tận tình giúp đỡ, hướng dẫn, định hướng cách làm việc em suốt trình thực đồ án Em vơ biết ơn tận tình dẫn em thực đề tài Bước đầu vào thực tế em hạn chế cịn nhiều khó khăn nên khơng tránh khỏi thiếu sót Nhưng nhờ góp ý, hướng dẫn q báu mà em có thêm cho nhiều kiến thức bổ ích, tinh thần học tập hiệu quả, nghiêm túc Em xin chân thành cảm ơn cơ! TP Hồ Chí Minh, ngày 24 tháng 12 năm 2022 Sinh viên thực Nguyễn Bảo Duy NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………… ………………, ngày ……… tháng ……… năm ……… Giảng viên hướng dẫn Trần Thị Hồng Yến ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: Xây dựng website đặt lịch khám bệnh online Cán hướng dẫn: ThS Trần Thị Hồng Yến Thời gian thực hiện: Từ ngày 05/09/2022 đến ngày 31/12/2022 Sinh viên thực hiện: Nguyễn Bảo Duy - 19520488 Nội dung đề tài: Lý do chọn đề tài:  Trong thời đại khoa học công nghệ ngày phát triển, người dễ dàng kết nối với internet sử dụng công cụ cách tiện lợi, nhanh chóng Nhu cầu kiểm tra sức khỏe thông qua website ngày tăng cao Để đáp ứng u cầu tiện ích đó, em xây dựng website đăng ký khám bệnh online nhằm giúp người dùng đặt lịch hẹn với bác sĩ cách dễ dàng, thuận thiện Mục tiêu: - Xây dựng website đăng ký lịch hẹn với bác sĩ online - Xây dựng diễn đàn viết bác sĩ - Hệ thống danh sách bác sĩ Phạm vi: ➢ Phạm vi môi trường: - Triển khai sản phẩm môi trường web ➢ Phạm vi chức năng: - Hệ thống đăng ký lịch hẹn với bác sĩ - Thông tin thời gian biểu bác sĩ - Diễn đàn viết bác sĩ - Quản lý hồ sơ khám bệnh - Quản lý tài khoản Đối tượng sử dụng:  - Những người dùng có nhu cầu đăng ký lịch hẹn online Nhân viên điều hành website Phương pháp thực hiện:  - Tìm hiểu Reactjs, Nodetjs, Expressjs - Khảo sát website tương tự thị trường Nền tảng cơng nghệ: • Front-end: Reactjs, MUI • Back-end: Nodetjs, Expressjs, Mongoose • Security Standard: JWT • Database: MongoDB Kết quả mong đợi:  - Áp dụng công nghệ để hoàn thành sản phẩm đề tài - Xây dựng website hoàn chỉnh đáp ứng yêu cầu người dùng Kế hoạch thực hiện: Thời gian Công việc 05/09 – 11/09 • Xác định yêu cầu chức đề tài 12/09 – 18/09 19/09 – 02/10 03/10 – 16/10 17/10 – 30/11 31/11– 13/12 14/12 – 31/12 • Tìm hiểu cơng nghệ Reactjs, Nodetjs • Tìm hiểu JWT • Phân tích u cầu nghiệp vụ chức đề tài • Viết tài liệu mơ tả hệ thống website • Xây dựng vẽ sơ đồ lớp • Thiết kế database • Xây dựng giao diện website • Xây dựng tính quản lý tài khoản • Xây dựng tính đặt lịch, tốn • Viết báo cáo • Kiểm thử, sửa lỗi hoàn thiện chức sản phẩm • Hồn thiện tài liệu báo cáo TP HCM, ngày 16 tháng 09 năm 2022 Xác nhận CBHD Sinh viên (Ký tên ghi rõ họ tên) (Ký tên ghi rõ họ tên) Trần Thị Hồng Yến Nguyễn Bảo Duy MỤC LỤC DANH MỤC HÌNH ẢNH DANH MỤC BẢNG Chương Tổng quan đề tài 10 1.1 Lý chọn đề tài 10 1.2 Đối tượng sử dụng 10 1.3 Phạm vi nghiên cứu 10 1.4 Phương pháp thực 10 Chương Cơ sở lý thuyết 11 2.1 JavaScript 11 2.2 Reactjs 12 2.3 Nodetjs 14 2.4 Expressjs 15 2.5 MongoDB 16 2.6 Mongoose 16 2.7 JSON Web Token 17 Chương Phân tích thiết kế hệ thống 19 3.1 Xây dựng hệ thống 19 3.1.1 Kiến trúc hệ thống 19 3.1.2 Mô tả chi tiết 19 3.2 Phân tích yêu cầu 19 3.2.1 Yêu cầu chức 19 3.2.2 Yêu cầu phi chức 20 3.3 Sơ đồ use-case 21 3.3.1 Danh sách actor 22 3.3.2 Danh sách use-case 22 3.4 Sơ đồ use-case 23 3.4.1 Đăng ký 23 3.4.2 Đăng nhập 23 3.4.3 Đặt lịch khám bệnh 24 3.4.4 Xem tin tức y khoa 24 3.4.5 Xem lịch sử phiếu khám bệnh 25 3.4.6 Tạo hồ sơ 25 3.4.7 Sửa hồ sơ 26 3.4.8 Xóa hồ sơ 26 3.4.9 Xử lý phiếu khám bệnh 27 3.4.10 Thêm dịch vụ 27 3.4.11 Sửa dịch vụ 28 3.4.12 Xóa dịch vụ 28 3.4.13 Thêm tin tức 29 3.4.14 Sửa tin tức 29 3.4.15 Xóa tin tức 30 Chương Xây dựng website 31 4.1 Danh sách giao diện 31 4.2 Chi tiết giao diện 31 4.2.1 Trang chủ 31 4.2.2 Đăng nhập 33 4.2.3 Đăng ký 33 4.2.4 Giới thiệu 34 4.2.5 Tin tức 34 4.2.6 Dịch vụ 35 4.2.7 Thông tin tài khoản 38 KẾT LUẬN 39 TÀI LIỆU THAM KHẢO 40 DANH MỤC HÌNH ẢNH Hình 2.1 JavaScript 11 Hình 2.2 ReactJS 12 Hình 2.3 NodeJS 14 Hình 2.4 ExpressJS 15 Hình 2.5 MongoDB 16 Hình 2.6 Mongoose 16 Hình 2.7 JWT 17 Hình 3.1 Sơ đồ kiến trúc hệ thống 19 Hình 3.2 Sơ đồ use-case 21 Hình 3.3 Sơ đồ phân rã use-case 21 Hình 4.1 Màn hình 31 Hình 4.2 Khi chưa đăng nhập 32 Hình 4.3 Khi đăng nhập 32 Hình 4.4 Màn hình đăng nhập 33 Hình 4.5 Màn hình đăng ký 33 Hình 4.6 Màn hình giới thiệu 34 Hình 4.7 Màn hình tin tức 34 Hình 4.8 Màn hình chọn bệnh viện 35 Hình 4.9 Màn hình chọn hồ sơ khám bệnh 35 Hình 4.10 Màn hình chọn bác sĩ 36 Hình 4.11 Màn hình chọn ngày 36 Hình 4.12 Màn hình xác nhận 37 Hình 4.13 Màn hình thành cơng 37 Hình 4.14 Màn hình thơng tin tài khoản - Mục hồ sơ bệnh nhân 38 Hình 4.15 Màn hình thơng tin tài khoản - Mục phiếu khám bệnh 38 Luồng phụ Thông báo lỗi người dùng nhập sai định dạng u cầu đặc biệt Khơng có Điều kiện trước Người dùng đăng nhập trước Điều kiện sau Tạo hồ sơ khám bệnh cho người dùng Mở rộng Khơng có Bảng 3.10 Đặc tả use-case Tạo hồ sơ 3.4.7.Sửa hồ sơ Usecase Nội dung Tên use-case Sửa hồ sơ Mô tả Người dùng sửa hồ sơ khám bệnh chọn Luồng Người dùng nhấn vào avatar Người dùng nhấn vào hồ sơ tài khoản Nhấn hồ sơ bệnh nhân Nhấn nút sửa hồ sơ bệnh nhân chọn Người dùng nhập thông tin để sửa hồ sơ Người dùng xác nhận nhấn nút sửa Thông báo sửa hồ sơ thành công Luồng phụ Thông báo lỗi người dùng nhập sai định dạng u cầu đặc biệt Khơng có Điều kiện trước Người dùng đăng nhập trước Điều kiện sau Sửa hồ sơ khám bệnh cho người dùng Mở rộng Khơng có Bảng 3.11 Đặc tả use-case Sửa hồ sơ 3.4.8.Xóa hồ sơ Usecase Nội dung Tên use-case Xóa hồ sơ Mơ tả Người dùng xóa hồ sơ khám bệnh chọn Luồng Người dùng nhấn vào avatar 26 Người dùng nhấn vào hồ sơ tài khoản Nhấn hồ sơ bệnh nhân Nhấn nút xóa hồ sơ bệnh nhân chọn Người dùng xác nhận nhấn nút xóa Thơng báo xóa hồ sơ thành công Luồng phụ Thông báo lỗi người dùng nhập sai định dạng Yêu cầu đặc biệt Không có Điều kiện trước Người dùng đăng nhập trước Điều kiện sau Xóa hồ sơ khám bệnh cho người dùng Mở rộng Khơng có Bảng 3.12 Đặc tả use-case Xóa hồ sơ 3.4.9.Xử lý phiếu khám bệnh Usecase Nội dung Tên use-case Xử lý phiếu khám bệnh Mô tả Quản lý xử lý phiếu khám bệnh cho người dùng Luồng Quản lý nhân vào danh sách phiếu khám bệnh Chọn phiếu khám bệnh để xử lý Thông báo xử lý thành công Luồng phụ Khơng có u cầu đặc biệt Khơng có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Cập nhật phiếu khám bệnh hệ thống Mở rộng Khơng có Bảng 3.13 Đặc tả use-case Xử lý phiếu khám bệnh 3.4.10.Thêm dịch vụ Usecase Nội dung Tên use-case Tạo dịch vụ Mô tả Quản lý tạo dịch vụ 27 Luồng Quản lý nhấn vào dịch vụ Thêm dịch vụ Nhập thông tin cần thiết để thêm dịch vụ Thông báo thêm thành công Luồng phụ Thông báo lỗi người dùng nhập sai định dạng Yêu cầu đặc biệt Khơng có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Thêm dịch vụ hệ thống Mở rộng Khơng có Bảng 3.14 Đặc tả use-case Thêm dịch vụ 3.4.11.Sửa dịch vụ Usecase Nội dung Tên use-case Sửa dịch vụ Mô tả Quản lý sửa dịch vụ chọn Luồng Quản lý nhấn vào dịch vụ Sửa dịch vụ chọn Nhập thông tin cần thiết để sửa dịch vụ Thông báo sửa thành công Luồng phụ Thông báo lỗi người dùng nhập sai định dạng u cầu đặc biệt Khơng có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Sửa dịch vụ chọn hệ thống Mở rộng Khơng có Bảng 3.15 Đặc tả use-case Sửa dịch vụ 3.4.12.Xóa dịch vụ Usecase Nội dung Tên use-case Xóa dịch vụ Mơ tả Quản lý xóa dịch vụ 28 Luồng Quản lý nhấn vào dịch vụ Nhấn xóa dịch vụ chọn Bấm xác nhận xóa Thơng báo xóa thành cơng Luồng phụ Khơng có u cầu đặc biệt Khơng có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Xóa dịch vụ hệ thống Mở rộng Khơng có Bảng 3.16 Đặc tả use-case Xóa dịch vụ 3.4.13.Thêm tin tức Usecase Nội dung Tên use-case Thêm tin tức Mô tả Quản lý thêm tin tức Luồng Quản lý nhấn vào tin tức Thêm tin tức Nhập thông tin cần thiết để thêm tin tức Thông báo thêm thành công Luồng phụ Thông báo lỗi người dùng nhập sai định dạng u cầu đặc biệt Khơng có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Thêm tin tức hệ thống Mở rộng Khơng có Bảng 3.17 Đặc tả use-case Thêm tin tức 3.4.14.Sửa tin tức Usecase Nội dung Tên use-case Sửa tin tức Mô tả Quản lý sửa tin tức 29 Luồng Quản lý nhấn vào tin tức Sửa tin tức chọn Nhập thông tin cần thiết để sửa tin tức Thông báo sửa thành công Luồng phụ Thông báo lỗi người dùng nhập sai định dạng Yêu cầu đặc biệt Khơng có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Sửa tin tức chọn hệ thống Mở rộng Không có Bảng 3.18 Đặc tả use-case Sửa tin tức 3.4.15.Xóa tin tức Usecase Nội dung Tên use-case Xóa dịch vụ Mơ tả Quản lý xóa dịch vụ chọn Luồng Quản lý nhấn vào dịch vụ Nhân xóa dịch vụ chọn Nhấn xác nhận xóa Thơng báo xóa thành cơng Luồng phụ Khơng có u cầu đặc biệt Khơng có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Xóa dịch vụ chọn hệ thống Mở rộng Khơng có Bảng 3.19 Đặc tả use-case Xóa tin tức 30 Chương Xây dựng website 4.1.Danh sách giao diện STT Tên hình Ý nghĩa Trang chủ Màn hình website Giới thiệu Giới thiệu website Tin tức Danh sách tin tức y khoa Dịch vụ Đặt lịch khám bệnh cho người dùng Đăng nhập Người dùng đăng nhập vào tài khoản Đăng ký Người dùng đăng ký tài khoản Bảng 4.1 Danh sách giao diện 4.2.Chi tiết giao diện 4.2.1.Trang chủ Hình 4.1 Màn hình - Màn hình có menu để chuyển đổi trang: o Trang chủ: chuyển tới trang chủ o Giới thiệu: chuyển tới trang giới thiệu o Tin tức: chuyển tới trang tin tức o Dịch vụ: chuyển tới trang dịch vụ 31 Hình 4.2 Khi chưa đăng nhập - Nếu chưa đăng nhập tài khoản, menu hiển thị nút Đăng nhập Đăng ký - Nhấn đăng nhập chuyển tới trang đăng nhập - Nhấn đăng ký chuyển tới trang đăng ký Hình 4.3 Khi đăng nhập - Nếu đăng nhập hiển thị Icon, nhấn vào icon hiển thị hộp thoại - Nhấn vào đăng xuất tiến hành đăng xuất khỏi tài khoản - Nhấn vào thông tin tài khoản chuyển đến trang thơng tin tài khoản 32 4.2.2.Đăng nhập Hình 4.4 Màn hình đăng nhập - Ở hình đăng nhập, người dùng nhập vào tên tài khoản mật để đăng nhập - Nhấn vào nút Đăng ký để chuyển tới trang Đăng ký - Nhấn vào nút Quay lại trang chủ để chuyển tới trang chủ 4.2.3.Đăng ký Hình 4.5 Màn hình đăng ký 33 - Ở hình đăng ký, người dùng nhập vào tên tài khoản, email mật để đăng ký - Nhấn vào nút Đã có tài khoản để chuyển tới trang Đăng nhập - Nhấn vào nút Quay lại trang chủ để chuyển tới trang chủ 4.2.4.Giới thiệu Hình 4.6 Màn hình giới thiệu 4.2.5.Tin tức Hình 4.7 Màn hình tin tức 34 - Nhấn vào tin tức để xem chi tiết tin tức 4.2.6.Dịch vụ Hình 4.8 Màn hình chọn bệnh viện - Sẽ có danh sách bệnh viện, nhấn vào bệnh viện để tiếp tục việc đặt lịch khám bệnh Hình 4.9 Màn hình chọn hồ sơ khám bệnh - Sẽ có danh sách hồ sơ khám bệnh tạo trước, khơng có hiển thị chưa có hồ sơ bệnh nhận - Người dùng chọn thêm, xóa sửa hồ sơ bệnh nhân với nút tương ứng - Nhấn tiếp tục hồ sơ bệnh nhân mong muôn để tiếp tục 35 Hình 4.10 Màn hình chọn bác sĩ - Sẽ có danh sách bác sĩ, nhấn vào bác sĩ để tiếp tục việc đặt lịch khám bệnh Hình 4.11 Màn hình chọn ngày - Người dùng tiến hành chọn ngày khám bệnh - Nhấn tiếp tục để tiến tục việc đặt lịch khám bệnh 36 Hình 4.12 Màn hình xác nhận - Nhấn xác nhận để kết thúc việc đặt lịch khám bệnh Hình 4.13 Màn hình thành cơng - Màn hình hiển thị thông tin phiếu mã phiếu khám bệnh 37 4.2.7.Thơng tin tài khoản Hình 4.14 Màn hình thơng tin tài khoản - Mục hồ sơ bệnh nhân - Người dùng chọn thêm, xóa sửa hồ sơ bệnh nhân với nút tương ứng Hình 4.15 Màn hình thơng tin tài khoản - Mục phiếu khám bệnh - Hiển thị danh sách phiếu khám bệnh đặt trước 38 KẾT LUẬN • Thuận lợi - Nhận hỗ trợ từ giảng viên - Có mẫu phần mềm để tham khảo • Khó khăn - Vì chưa quên với việc sử dụng ReactJS nên gặp nhiều khó khăn tốn nhiều thời gian - Vì làm nên có nhiều chức chưa hồn thiện • Ưu điểm đồ án - Nhờ sử dụng thư viện MUI nên giao diện trang web sinh động - Đáp ứng tín website đặt lịch khám bệnh • Nhược điểm đồ án - Cịn số tính chưa hồn thiện - Code chưa tối ưu hóa - Phân bố thời gian khơng tốt khiến số tính chưa hồn thiện • Hướng phát triển đề tài - Hoàn thiện tính - Thêm tính tốn online - Tích hợp chatbot để hỗ trợ người dùng - Thêm tính theo dõi, đánh giá viết 39 TÀI LIỆU THAM KHẢO [1] Từ Quốc Hưng, “ReactJS gì? Những điều bạn chưa biết ReactJS”, https://200lab.io/blog/Reactjs-la-gi/, truy cập ngày 26/12/2022 [2] AWS, “JavaScript gì?”, https://aws.amazon.com/vi/what-is/javascript/ , truy cập ngày 25/12/2022 [3] Medium, “Node.js thực gì?”, https://topdev.vn/blog/node-js-la-gi/ , truy cập ngày 25/12/2022 [4] Hoang Hung, “Mongoose cho MongoDB, NodeJS”, https://viblo.asia/p/mongoose-cho-mongodb-nodejs-Qbq5QWvJZD8 , truy cập ngày 27/12/2022 [5] Topdev, “JSON Web Token (JWT) gì?”, https://topdev.vn/blog/jwt-la-gi/, truy cập ngày 27/12/2022 [6] Medium, “ExpressJS gì? Tất tần tật Express.js” , https://topdev.vn/blog/express-js-la-gi/ , truy cập ngày 26/12/2022 40 ... liệu mơ tả hệ thống website • Xây dựng vẽ sơ đồ lớp • Thiết kế database • Xây dựng giao diện website • Xây dựng tính quản lý tài khoản • Xây dựng tính đặt lịch, tốn • Viết báo cáo • Kiểm thử, sửa... Đặt lịch khám bệnh Xem tin tức y khoa Người dùng tiến hành nhập thông tin để đặt lịch khám bệnh Trang tin tức y khoa cho người dùng Xem lịch sử phiếu Người dùng xem phiếu khám bệnh đặt khám bệnh. .. 19 Đặt lịch khám bệnh Xem tin tức y khoa Người dùng tiến hành nhập thông tin để đặt lịch khám bệnh Trang tin tức y khoa cho người dùng Xem lịch sử phiếu Người dùng xem phiếu khám bệnh khám bệnh