XÂY DỰNG ỨNG DỤNG WEBSITE hệ THỐNG THÔNG TIN QUẢN lý KHAI báo y tế điện tử sử DỤNG NODEJS, REACTJS và MONGODB

BỘ CÔNG THƯƠNG TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI - ĐỒ ÁN TỐT NGHIỆP NGÀNH KỸ THUẬT PHẦN MỀM XÂY DỰNG ỨNG DỤNG WEBSITE HỆ THỐNG THÔNG TIN QUẢN LÝ KHAI BÁO Y TẾ ĐIỆN TỬ SỬ DỤNG NODEJS, REACTJS VÀ MONGODB CBHD : ThS Nguyễn Đức Lưu Sinh viên : Nguyễn Thị Ngọc Ánh Mã số sinh viên : 2018604140 Hà Nội – Năm 2022 MỤC LỤC LỜI CẢM ƠN i DANH MỤC BẢNG BIỂU ii MỤC LỤC HÌNH VẼ iii MỞ ĐẦU CHƯƠNG CƠ SỞ LÝ THUYẾT 1.1 Tổng quan website khai báo y tế 1.1.1 Khai báo y tế 1.1.2 Tình hình khai báo y tế 1.2 Các công cụ thiết kế website hệ thống thông tin khai báo y tế 1.2.1 NodeJS 1.2.2 Javascript 1.2.3 ReactJS 1.2.4 MongoDB 1.3 Kiến trúc phần mềm CHƯƠNG PHÂN TÍCH THIẾT KẾ HỆ THỐNG 10 2.1 Phân tích yêu cầu 10 2.2 Các yêu cầu phi chức 11 2.3 Biểu đồ use case 11 2.3.1 Biểu đồ use case tổng quan 11 2.3.2 Use case phân rã người dân đăng nhập 12 2.3.3 Use case phân rã quản lý thông tin cá nhân người dân 13 2.3.4 Use case phân rã quản lý thông tin người dân 13 2.3.5 Use case phân rã tạo mã QR 14 2.4 Mô tả chi tiết use case 14 2.4.1 Mô tả use case Đăng nhập nhân viên y tế 14 2.4.2 Mô tả use case Đăng nhập người dân 15 2.4.3 Mô tả use case Tạo QR code 17 2.4.4 Mô tả use case quản lý thông tin người dân 18 2.4.5 Mô tả use case người dân cập nhật thông tin 19 2.4.6 Mô tả use case người dân khai báo khẩn 20 2.5 Biểu đồ trình tự 22 2.5.1 Chức đăng nhập người dân 22 2.5.2 Chức đăng nhập nhân viên y tế 23 2.5.3 Chức tạo mã QR code 24 2.5.4 Chức cập nhật thông tin khai báo người dân 25 2.5.5 Chức quản lý thông tin người dân 26 2.6 Sơ đồ hoạt động 27 2.6.1 Chức đăng nhập nhân viên y tế 27 2.6.2 Chức đăng nhập người dân 28 2.6.3 Chức tạo QR code người dân 29 2.6.4 Chức quản lý thông tin người dân 30 2.6.5 Chức xem khai báo chi tiết người dân 31 2.7 Thiết kế sở liệu 32 2.7.1 Quan hệ bảng 32 2.7.2 Chi tiết bảng 32 2.8 Thiết kế giao diện 35 2.8.1 Màn hình đăng nhập 35 2.8.2 Màn hình nhập mã otp 35 2.8.3 Màn hình khai báo y tế 36 2.8.4 Màn hình mã QR 37 2.8.5 Màn hình khai báo khẩn cấp 37 2.8.6 Màn hình danh sách khai báo y tế 38 CHƯƠNG CÀI ĐẶT CHƯƠNG TRÌNH VÀ KIỂM THỬ HỆ THỐNG 39 3.1 Cài đặt chương trình 39 3.2 Phần mềm khai báo y tế điện tử 40 3.2.1 Màn hình chức đăng nhập người dân 40 3.2.2 Màn hình trang chủ khai báo y tế 42 3.2.3 Màn hình hướng dẫn khai báo y tế 44 3.2.4 Màn hình thống kê khai báo y tế nhân viên y tế 44 3.3 Kiểm thử phần mềm khai báo y tế điện tử 46 3.3.1 Kiểm thử chức đăng nhập người dân 46 3.3.2 Kiểm thử chức đăng nhập nhân viên y tế 48 3.3.3 Kiểm thử chức khai báo y tế 49 3.3.4 Kiểm thử chức khai báo khẩn cấp 55 KẾT LUẬN 59 TÀI LIỆU THAM KHẢO 60 PHỤ LỤC 61 LỜI CẢM ƠN Là sinh viên trường đại học Công nghiệp Hà Nội, đồ án tốt nghiệp minh chứng cho kiến thức có sau bốn năm học tập Trong q trình hồn thành đồ án tốt nghiệp, cố gắng thân em nhận hướng dẫn tận tình thầy cô anh chị bạn bè Qua đây, em xin chân thành cảm ơn khoa Công nghệ thông tin, trường đại học Công nghiệp Hà Nội trang bị kiến thức cho em suốt trình học tập tạo hội để em làm đồ án tốt nghiệp Đặc biệt, em cảm ơn tới thầy ThS Nguyễn Đức Lưu giúp đỡ, hướng dẫn, bảo tận tình để em hồn thành tốt đồ án Em cố gắng hồn thành đồ án tốt nghiệp mong nhận đóng góp ý thầy bạn để đồ án em hoàn thiện Em xin chân thành cảm ơn! ii DANH MỤC BẢNG BIỂU Bảng 1.1: Các yêu cầu phi chức 11 Bảng 2.1: Chi tiết bảng admin 33 Bảng 2.2: Chi tiết bảng user 35 Bảng 2.3: Chi tiết bảng form 36 Bảng 2.4: Chi tiết bảng formtype 36 Bảng 2.5: Chi tiết bảng question 37 Bảng 2.6: Chi tiết bảng answer 37 Bảng 3.1: Kiểm thử chức đăng nhập người dân 50 Bảng 3.2: Kiểm thử chức đăng nhập nhân viên y tế 52 Bảng 3.3: Kiểm thử chức khai báo y tế 54 Bảng 3.4: Kiểm thử chức khai báo khẩn cấp 60 iii MỤC LỤC HÌNH VẼ Hình 2.1 Biểu đồ use case tổng quan 11 Hình 2.2: Biểu đồ use case phân rã đăng nhập người dân 12 Hình 2.3: Biểu đồ use case phân rã quản lý thông tin cá nhân 13 Hình 2.4: Biểu đồ use case phân rã quản lý thông tin người dân 13 Hình 2.5: Biểu đồ use case phân rã quản lý tài khoản 14 Hình 2.6: Biểu đồ trình tự chức đăng nhập người dân 22 Hình 2.7: Biểu đồ trình tự chức đăng nhập admin nhân viên y tế 23 Hình 2.8: Biểu đồ trình tự chức tạo mã QR Code 24 Hình 2.9: Biểu đồ trình tự chức cập nhật thơng tin người dân 25 Hình 2.10: Sơ đồ hoạt động nhân viên y tế đăng nhập 27 Hình 2.11: Sơ đồ hoạt động chức người dân đăng nhập 28 Hình 2.12: Sơ đồ hoạt động người dân tạo QR code 29 Hình 2.13: Sơ đồ hoạt động quản lý thông tin người dân 30 Hình 2.14: Sơ đồ hoạt động xem khai báo chi tiết người dân 31 Hình 2.15: Cơ sở liệu 32 Hình 2.16: Giao diện đăng nhập 35 Hình 2.17: Giao diện nhập mã otp 35 Hình 2.18: Giao diện khai báo y tế 36 Hình 2.19: Giao diện mã QR 37 Hình 2.20: Giao diện khai báo khẩn cấp 37 Hình 2.21: Màn hình danh sách khai báo y tế 38 Hình 3.22: Màn hình khởi chạy dự án 39 Hình 3.23: Mở terminal chạy chương trình 39 Hình 3.24: Màn hình đăng nhập 40 Hình 3.25: Màn hinh mail nhận mã otp 40 Hình 3.26: Màn hình nhập mã otp đăng nhập 41 Hình 3.27: Màn hình khai báo y tế 42 iv Hình 3.28: Màn hình tạo mã QR code 43 Hình 3.29: Màn hình khai báo y tế khẩn cấp 44 Hình 3.30: Màn hình hướng dẫn khai báo y tế 44 Hình 3.31: Màn hình danh sách khai báo y tế 44 Hình 3.32: Màn hình xem chi tiết khai báo y tế 45 MỞ ĐẦU Tên đề tài Xây dựng ứng dụng Website hệ thống thông tin quản lý khai báo y tế điện tử sử dụng NodeJS, ReactJS MongoDB Lý chọn đề tài Cuối năm 2019, đại dịch Covid-19 xảy cướp sinh mạng hàng triệu người khắp giới Một vấn đề lớn khó giải lúc làm cách kiểm sốt thơng tin lịch trình di chuyển người dân, người có nguy mang mầm bệnh khoanh vùng dịch Khai báo y tế việc người dân cung cấp thông tin y tế cá nhân, thơng tin lịch sử nơi đi, nơi nơi đến nhằm mục đích kiểm sốt phịng chống dịch bệnh COVID-19 Căn thông tin cập nhật, quan y tế địa bàn nắm bắt diễn biến sức khỏe, lịch trình lại, di chuyển cá nhân để theo dõi, hỗ trợ tình cần thiết Đặc biệt, người liên quan đến ca bệnh, người từ tâm dịch trở về, người có biểu sốt, ho, khó thở,… cách ly tập trung lấy mẫu xét nghiệm chỗ Các trường hợp khác tư vấn, hướng dẫn thực biện pháp phòng chống dịch địa phương Với tình hình người nhiễm Covid cách ly nhà nhiều, hệ thống khai báo y tế giúp cán y tế cập nhật thông tin tình hình sức khỏe bệnh nhân cách nhanh chóng có phương pháp điều trị kịp thời hạn chế rủi ro đáng tiếc xảy Chính lý trên, em chọn đề tài “Xây dựng ứng dụng Website hệ thống thông tin quản lý khai báo y tế điện tử sử dụng NodeJS, ReactJS MongoDB” có tính thực tiễn Mục tiêu nghiên cứu - Tổng hợp kiến thức NodeJS, ReactJS MongoDB để áp dụng vào xây dựng Website hệ thống thông tin khai báo y tế điện tử - Nghiên cứu, khảo sát thực tế ứng dụng website hệ thống thông tin quản ký tờ khai y tế, khai báo y tế - Phát biểu toán cần xử lý cho ứng dụng website khai báo y tế - Nghiên cứu đưa hướng làm công cụ công nghệ việc phát triển ứng dụng website hệ thống khai báo y tế - Phân tích thiết kế cho hệ thống thơng tin khai báo y tế - Cài đặt triển khai ứng dụng - Website hệ thống thông tin khai báo y tế điện tử hướng tới tất người dân sinh sống lãnh thổ Việt Nam có ý định nhập cảnh Việt Nam giúp cho người dân dễ dàng khai báo y tế mà trực tiếp đến quan có thẩm quyền khai báo làm giảm tình trạng lây nhiễm chéo - Hệ thống khai báo y tế có giao diện thân thiện phù hợp với người dùng Nội dung nghiên cứu - Khảo sát yêu cầu, trình khai báo y tế - Nghiên cứu, phân tích yêu cầu chức năng, phi chức website - Thiết kế phát triển hệ thống website hệ thống thông tin khai báo y tế điện tử: o Người dân hoàn thành chức năng: Khai báo y tế, khai hộ, khai báo khẩn cấp, hướng dẫn khai báo y tế o Nhân viên y tế: Thống kê khai báo khẩn cấp, tìm kiếm khai báo y tế theo tình trạng, trạng thái khai báo, xử lý thông tin khai báo … - Cài đặt website kiểm thử chức Phạm vi đề tài - Về chức khai báo y tế: Khi người dân muốn khai báo y tế đăng nhập hệ thống khai báo email Đăng nhập hệ thống thành công, người dân tiến hành nhập thông tin khai báo y tế Khai báo y tế thành cơng hiển thị hình mã QR Code, người dân tải mã QR Code máy Ngoài chức khai báo, người dân thực chức 48 3.3.2 Kiểm thử chức đăng nhập nhân viên y tế Bảng 3.2: Kiểm thử chức đăng nhập nhân viên y tế ID Mô tả trường hợp kiểm tra Kiểm tra Tài khoản thành công Kiểm tra Tên đăng nhập sai Kiểm tra Mật nhập sai Kiểm tra Rỗng hết Kiểm tra Tên đăng nhập Rỗng Kiểm tra Mật Rỗng Kiểm tra mã hóa textbox mật Các bước thực Nhập tài khoản có database Nhấn vào đăng nhập Nhập tên đăng nhập ko có DB Nhập mật Nhấn vào đăng nhập Nhập tên đăng nhập có DB Nhập mật = rỗng Nhấn vào đăng nhập Nhập tên đăng nhập = Rỗng Nhập mật khẩu= Rỗng Nhấn vào đăng nhập Nhập tên đăng nhập = Rỗng Nhập mật khẩu= có DB Nhấn vào đăng nhập Nhập tên đăng nhập = có DB Nhập mật khẩu= Rỗng Nhấn vào đăng nhập Kết mong đợi Kết Đăng nhập thành công Đạt - Thông báo Tên đăng nhập sai Đạt - Set focus highlight vào trường lỗi - Thông báo Mật nhập sai Đạt - Set focus highlight vào trường lỗi - Thông báo Tên đăng nhập, Mật nhập chưa đc nhập Đạt - Set focus highlight vào trường lỗi - Thông báo Tên đăng nhập chưa đc nhập Đạt - Set focus highlight vào trường lỗi - Thông báo Mật chưa đc nhập Đạt - Set focus highlight vào trường lỗi Nhập tên đăng nhập - Textbox mật tồn DB hiển thị dạng mã Nhập mật hợp lệ hóa ******** Đạt 49 3.3.3 Kiểm thử chức khai báo y tế Bảng 3.3: Kiểm thử chức khai báo y tế ID Mô tả trường hợp kiểm tra Các bước thực Kết mong đợi Kết Họ tên * textbox Nhập Họ tên = ký tự Các thông tin khác Test nhập Họ tên nhập hợp lệ hợp lệ Click vào "Gửi tờ khai" button - Tạo Họ tên thành công - Hiển thị Tên người Đạt khai báo trang quản lý khai báo y tế Tại ''Họ tên" = Rỗng Các thông tin khác Test không nhập nhập hợp lệ Họ tên Click vào "Gửi tờ khai" button - Message thông báo "Họ tên không để trống" Đạt - Hightlight màu đỏ chuột focus vào ''Họ tên" textbox Số chứng minh nhân dân 1.Nhập số chứng minh thư hợp lệ = số dương Test nhập Số Các thông tin khác chứng minh nhân nhập hợp lệ dân hợp lệ Click vào "Gửi tờ khai" button - Tại trang quản lý khai báo y tế hiển thị số chứng minh thư Đạt người khai báo y tế - Số lượng mà bạn nhập lưu CSDL 1.Nhập số chứng minh nhân dân = chữ Test nhập Số Các thông tin khác - Hiển thị thông báo "Số chứng minh nhân Đạt nhập hợp lệ CMT không đúng" dân không hợp lệ Click vào "Gửi tờ khai" button Nhập Số chứng minh nhân dân = Rỗng Test không nhập Các thông tin khác Số chứng minh nhập hợp lệ nhân dân Click vào "Gửi tờ khai" button - Message thông báo "Số chứng minh nhân dân không hợp lệ " - Hightlight màu đỏ chuột focus vào ''Số chứng minh nhân dân" Đạt 50 Năm sinh 1.Nhập Năm sinh hàng hóa hợp lệ = số dương Test nhập Năm Các thông tin khác sinh hợp lệ nhập hợp lệ Click vào "Gửi tờ khai" button 1.Nhập Năm sinh = chữ Test nhập Năm Các thông tin khác sinh không hợp nhập hợp lệ lệ Click vào "Gửi tờ khai" button Nhập Năm sinh = Rỗng Các thông tin khác Test không nhập nhập hợp lệ Năm sinh Click vào "Gửi tờ khai" button - Tại trang quản lý khai báo y tế hiển thị Đạt năm sinh người khai báo y tế - Chặn bàn phím Đạt - Message thơng báo "Năm sinh khơng hợp lệ " Đạt - Hightlight màu đỏ chuột focus vào ''Năm sinh" textbox Giới tính Test chế độ mặc định giới tính Mặc định chọn giới tính Đạt nam Chọn giới tính = Nam Các thông tin khác Test chọn giới 10 nhập hợp lệ tính = Nam Click vào "Gửi tờ khai" button - Tại trang quản lý khai báo y tế hiển thị Đạt giới tính người khai báo y tế Chọn giới tính = Nữ Các thông tin khác Test chọn giới 11 nhập hợp lệ tính = Nữ Click vào "Gửi tờ khai" button - Tại trang quản lý khai báo y tế hiển thị Đạt giới tính người khai báo y tế Chọn giới tính = Khác Các thông tin khác Test chọn giới 12 nhập hợp lệ tính = Khác Click vào "Gửi tờ khai" button - Tại trang quản lý khai báo y tế hiển thị Đạt giới tính người khai báo y tế 51 Quốc tịch text box 13 Test nhập Quốc tịch hợp lệ Nhập Quốc tịch = ký tự Các thông tin khác nhập hợp lệ Click vào "Gửi tờ khai" button Tại ''Quốc tịch" = Rỗng Các thông tin khác Test không nhập 14 nhập hợp lệ Quốc tịch Click vào "Gửi tờ khai" button Test nhập Quốc 15 tịch = ký tự khoảng trắng Nhập Quốc tịch = ký tự toàn khoảng trắng Các thông tin khác nhập hợp lệ Click vào "Gửi tờ khai" button Tỉnh Test chế độ mặc 16 định giới tính 17 Test giá trị combobox tỉnh Click vào combobox Chọn tỉnh = Bắc Giang 18 Test chọn combobox 19 Chọn tỉnh = Hà Nội 20 Không chọn tỉnh Các thông tin khác nhập hợp lệ Click vào "Gửi tờ khai" button Test không chọn combobox - Tạo Quốc tịch thành công - Tại trang quản lý khai Đạt báo y tế hiển thị quốc tịch người khai báo y tế - Message thông báo "Quốc tịch không để trống" Đạt - Hightlight màu đỏ chuột focus vào ''Quốc tịch" textbox - Message thông báo "Quốc tịch không để trống" Đạt - Hightlight màu đỏ chuột focus vào ''Quốc tịch" textbox Mặc định không chọn tỉnh Hiển thị 63 tỉnh thành cho phép người dùng chọn - Tại trang quản lý khai báo y tế hiển thị tỉnh người khai báo y tế - Khai báo thành công - Tại trang quản lý khai báo y tế hiển thị tỉnh người khai báo y tế - Khai báo thành công Đạt Đạt Đạt Đạt - Hightlight đỏ vào trường tỉnh Đạt - Disable trường Quận/huyện, Phường/xã 52 Quận/Huyện combobox Test chế độ mặc 21 định giới tính 22 23 24 25 26 27 28 29 30 Mặc định không chọn Quận/Huyện Hiển thị Test giá trị Quận/Huyện tương ứng combobox Click vào combobox với tỉnh cho phép người Quận/Huyện dùng chọn - Tại trang quản lý khai báo y tế hiển thị Chọn Quận/Huyện = Việt Quận/Huyện người Yên khai báo y tế Test chọn - Khai báo thành công combobox tương ứng với tỉnh - Tại trang quản lý khai chọn báo y tế hiển thị Chọn Quận/Huyện = Bắc Quận/Huyện người Từ Liêm khai báo y tế - Khai báo thành công Không chọn Quận/Huyện - Hightlight đỏ vào Test không Các thông tin khác trường Quận/Huyện chọn combobox nhập hợp lệ - Disable trường Click vào "Gửi tờ khai" Phường/xã button Phường/Xã Test chế độ mặc Mặc định không chọn định giới tính Phường/Xã Test giá trị Hiển thị Phường/Xã combobox Click vào combobox tương ứng với tỉnh cho Phường/Xã phép người dùng chọn - Tại trang quản lý khai báo y tế hiển thị Chọn Phường/Xã = Quang Phường/Xã người Châu khai báo y tế Test chọn - Khai báo thành công combobox tương ứng với tỉnh - Tại trang quản lý khai chọn báo y tế hiển thị Chọn Phường/Xã = Minh Phường/Xã người Khai khai báo y tế - Khai báo thành công Không chọn Phường/Xã Test không - Hightlight đỏ vào Các thông tin khác chọn combobox trường Phường/Xã nhập hợp lệ Đạt Đạt Đạt Đạt Đạt Đạt Đạt Đạt Đạt Đạt 53 Số nhà - Tạo Số nhà thành công - Dữ liệu bạn vừa nhập lưu CSDL Đạt - Hiển thị Tên người khai báo trang quản lý khai báo y tế - Message thông báo Tại ''Số nhà" = Rỗng "Số nhà không để Các thông tin khác Test không nhập trống" 32 nhập hợp lệ Đạt Số nhà - Hightlight màu đỏ Click vào "Gửi tờ khai" chuột focus vào ''Số button nhà" textbox Số điện thoại textbox - Tại trang quản lý khai 1.Nhập số điện thoại hợp báo y tế hiển thị lệ = số dương số điện thoại người Test nhập Số điện Các thông tin khác 33 khai báo y tế Đạt thoại hợp lệ nhập hợp lệ - Số điện thoại mà bạn Click vào "Gửi tờ khai" nhập lưu button CSDL Nhập Số điện thoại không định dạng Test nhập Số điện Các thông tin khác - Hiển thị thông báo "Số 34 thoại không Đạt nhập hợp lệ điện thoại không đúng" định dạng Click vào "Gửi tờ khai" button Nhập Số nhà = ký tự Các thông tin khác Test nhập Số nhà 31 nhập hợp lệ hợp lệ Click vào "Gửi tờ khai" button 1.Nhập số điện thoại = chữ Test nhập Số điện Các thông tin khác - Hiển thị thông báo "Số 35 thoại không hợp Đạt nhập hợp lệ điện thoại không đúng" lệ Click vào "Gửi tờ khai" button Nhập Số điện thoại = Rỗng Test không nhập Các thông tin khác 36 Số điện thoại nhập hợp lệ Click vào "Gửi tờ khai" button - Message thông báo "Số điện thoại không hợp lệ " - Hightlight màu đỏ chuột focus vào ''Số điện thoại" textbox Đạt 54 Email textbox Kiểm tra địa 37 email mặc định 38 39 40 41 42 43 Tự động fill email giống với mail đăng Đạt nhập Nhập email = rỗng - Hightlight focus Kiểm tra Các thông tin khác vào trường email người dùng xóa nhập hợp lệ - Hiển thị thông báo Đạt hết email Click vào "Gửi tờ khai" "Email không để button trống" Sửa email không giống Kiểm tra sửa với mail đăng nhập - Hiển thị thông báo email không Các thông tin khác "Email không đúng" Đạt với mail đăng nhập hợp lệ - Set focus highlight nhập Click button "Gửi tờ vào trường lỗi khai" Các vấn đề khai báo y tế Kiểm tra trạng thái mặc định Trạng thái mặc định = Đạt nội dung khai Không báo Chọn khai báo = Có Các thơng tin khác Kiểm tra chọn nhập hợp lệ Khai báo thành cơng Đạt khai báo = Có Click vào "Gửi tờ khai" button Mã QR code Khai báo y tế thành Hiển thị lên hình Hiển thị mã QR Đạt công mã QR code Khai báo y tế thành Hiển thị link tự động fill Kiểm tra quét mã công thông tin khai báo y Đạt QR Quét mã QR tế 55 3.3.4 Kiểm thử chức khai báo khẩn cấp Bảng 3.4: Kiểm thử chức khai báo khẩn cấp ID Mô tả trường Các bước thực hợp kiểm tra Kết mong đợi Kết Họ tên Test nhập Họ tên hợp lệ Test không nhập Họ tên Test nhập Họ tên = ký tự khoảng trắng Nhập Họ tên = ký tự Các thông tin khác nhập hợp lệ Click vào "Gửi tờ khai" button Tại ''Họ tên" = Rỗng Các thông tin khác nhập hợp lệ Click vào "Gửi tờ khai" button Nhập Họ tên = ký tự tồn khoảng trắng Các thơng tin khác nhập hợp lệ Click vào "Gửi tờ khai" button - Tạo Họ tên thành công - Hiển thị Tên người khai Đạt báo trang quản lý khai báo y tế - Message thông báo "Họ tên không để trống" - Hightlight màu đỏ Đạt chuột focus vào ''Họ tên" textbox - Message thông báo "Họ tên không để trống" - Hightlight màu đỏ Đạt chuột focus vào ''Họ tên" textbox Số điện thoại textbox 1.Nhập số điện thoại hợp lệ = số dương Test nhập Số Các thông tin khác điện thoại hợp nhập hợp lệ lệ Click vào "Gửi tờ khai" button Test nhập Số Nhập Số điện thoại không điện thoại định dạng không định dạng Nhập số điện thoại = chữ 1.Nhập số điện thoại = số Test nhập Số âm điện thoại Các thông tin khác không hợp lệ nhập hợp lệ Click vào "Gửi tờ khai" button - Tại trang quản lý khai báo y tế hiển thị số điện thoại người khai Đạt báo y tế - Số điện thoại mà bạn nhập lưu CSDL - Hiển thị thông báo "Số điện thoại không đúng" Đạt - Hiển thị thông báo "Số điện thoại không đúng" Đạt - Hiển thị thông báo "Số điện thoại không đúng" Đạt 56 Test không 10 nhập Số điện thoại Nhập Số điện thoại = Rỗng Các thông tin khác nhập hợp lệ Click vào "Gửi tờ khai" button Tỉnh combobox Test chế độ 11 mặc định giới tính Test giá trị 12 Click vào combobox combobox tỉnh Chọn tỉnh = Bắc Giang Các thông tin khác 13 nhập hợp lệ Click vào "Gửi tờ khai" Test chọn button combobox Chọn tỉnh = Hà Nội Các thông tin khác 14 nhập hợp lệ Click vào "Gửi tờ khai" button Không chọn tỉnh Test không Các thông tin khác 15 chọn nhập hợp lệ combobox Click vào "Gửi tờ khai" button Quận/Huyện combobox Test chế độ 16 mặc định giới tính Test giá trị 17 combobox Click vào combobox Quận/Huyện - Message thông báo "Số điện thoại không hợp lệ " - Hightlight màu đỏ chuột focus vào ''Số điện thoại" textbox Đạt Mặc định không chọn tỉnh Đạt Hiển thị 63 tỉnh thành cho Đạt phép người dùng chọn - Tại trang quản lý khai báo y tế hiển thị tỉnh Đạt người khai báo y tế - Khai báo thành công - Tại trang quản lý khai báo y tế hiển thị tỉnh Đạt người khai báo y tế - Khai báo thành công - Hightlight đỏ vào trường tỉnh Đạt - Disable trường Quận/huyện, Phường/xã Mặc định không chọn Quận/Huyện Đạt Hiển thị Quận/Huyện tương ứng với tỉnh cho Đạt phép người dùng chọn - Tại trang quản lý khai Chọn Quận/Huyện = báo y tế hiển thị Test chọn Việt Yên Quận/Huyện người combobox Các thông tin khác 18 khai báo y tế Đạt tương ứng với nhập hợp lệ - Quận/Huyện mà bạn tỉnh chọn Click vào "Gửi tờ khai" nhập lưu CSDL button - Khai báo thành công 57 19 Chọn Quận/Huyện = Bắc Từ Liêm Các thông tin khác nhập hợp lệ Click vào "Gửi tờ khai" button Không chọn Quận/Huyện Test không Các thông tin khác 20 chọn nhập hợp lệ combobox Click vào "Gửi tờ khai" button Phường/Xã combobox Test chế độ 21 mặc định giới tính Test giá trị 22 combobox Phường/Xã Click vào combobox - Tại trang quản lý khai báo y tế hiển thị Quận/Huyện người khai báo y tế - Quận/Huyện mà bạn nhập lưu CSDL - Khai báo thành công Đạt - Hightlight đỏ vào trường Quận/Huyện Đạt - Disable trường Phường/xã Mặc định không chọn Phường/Xã Đạt Hiển thị Phường/Xã tương ứng với tỉnh cho phép người dùng chọn Đạt - Tại trang quản lý khai Chọn Phường/Xã = Quang báo y tế hiển thị 23 Châu Phường/Xã người khai Đạt báo y tế Test chọn - Khai báo thành công combobox tương ứng với - Tại trang quản lý khai tỉnh chọn báo y tế hiển thị Chọn Phường/Xã = Minh 24 Phường/Xã người khai Đạt Khai báo y tế - Khai báo thành công Không chọn Phường/Xã Test không Các thông tin khác - Hightlight đỏ vào trường 25 chọn nhập hợp lệ Đạt Phường/Xã combobox Click vào "Gửi tờ khai" button 58 Số nhà * textbox 26 27 Test nhập Số nhà hợp lệ Test không nhập Số nhà Các vấn đề khai báo y tế radio button Kiểm tra trạng thái mặc định 28 nội dung khai báo 29 Kiểm tra chọn khai báo Nhập Số nhà = ký tự Các thông tin khác nhập hợp lệ Click vào "Gửi tờ khai" button Tại ''Số nhà" = Rỗng Các thông tin khác nhập hợp lệ Click vào "Gửi tờ khai" button - Tạo Số nhà thành công - Hiển thị Tên người khai Đạt báo trang quản lý khai báo y tế - Message thông báo "Số nhà không để trống" - Hightlight màu đỏ Đạt chuột focus vào ''Số nhà" textbox Trạng thái mặc định = Khơng Chọn tình trạng khai báo Các thông tin khác Khai báo thành công nhập hợp lệ Click vào "Gửi tờ khai" button Đạt Đạt 59 KẾT LUẬN Qua trình làm đồ án, mang lại nhiều kinh nghiệm, kiến thức bổ ích có hội áp dụng kiến thức tích lũy sau năm tháng học tập trường Đại học Công nghiệp Hà Nội, phải kể đến kiến thức bật, hệ quản trị sở liệu, thiết kế trang Website để hoàn thành đề tài tốt nghiệp “Xây dựng ứng dụng Website hệ thống thông tin khai báo y tế sử dụng ReactJS, NodeJS MongoDB”, đạt kết như:  Hoàn thành khảo sát phân tích thiết kế hệ thống, thiết kế sở liệu, thiết kế giao diện  Hệ thống xây dựng chức theo yêu cầu ban đầu phía người dùng người quản trị Thiết kế rõ ràng, mô tả chi tiết dễ hình dung  Trải nghiệm người dùng: Khai báo y tế, khai báo khẩn cấp, chỉnh sửa thông tin khai báo y tế,…  Hoạt động người quản trị: Quản lý khai báo y tế, khai báo khẩn cấp, xử lý liệu khai báo, tìm kiếm, sửa, xóa thơng tin khai báo y tế Trong thời gian tới để hoàn thiện Website cách toàn diện qua việc bổ sung thêm chức đăng ký địa điểm khai báo y tế, đăng ký tiêm phịng covid cập nhật tính theo tình hình diễn biến bệnh dịch covid Cuối cùng, lần em xin gửi lời cảm ơn sâu sắc đến quý thầy cô trường Đại học Công nghiệp Hà Nội dạy cho em nhiều kiến thức bổ ích đặc biệt thầy Nguyễn Đức Lưu nhiệt tình hướng dẫn em hồn thành đề tài 60 TÀI LIỆU THAM KHẢO [1] Hoàng Quang Huy (2016), “Giáo trình sở liệu”, H Giáo dục Việt Nam 2011 [2].Vũ Thị Dương, Phùng Đức Hòa, Nguyễn Thị Hương Lan (2015), “Giáo trình Phân tích thiết kế hướng đối tượng”, NXB Khoa học Kỹ thuật [3] Https://topdev.vn/blog/reactjs-nhung-dieu-ban-can-phai-biet/ [4] Https://freetuts.net/reactjs/tu-hoc-reactjs [5] Https://viblo.asia/p/reactjs-nhung-kien-thuc-co-ban-de-bat-dau-jvElaPzA 61 PHỤ LỤC https://drive.google.com/drive/folders/1bZcpFx0CfCWim7fGlRBPqY55sCX Etjp?usp=sharing ... sách khai báo y tế 44 Hình 3.32: Màn hình xem chi tiết khai báo y tế 45 MỞ ĐẦU Tên đề tài X? ?y dựng ứng dụng Website hệ thống thông tin quản lý khai báo y tế điện tử sử dụng NodeJS, ReactJS. .. Website hệ thống thông tin khai báo y tế điện tử - Nghiên cứu, khảo sát thực tế ứng dụng website hệ thống thông tin quản ký tờ khai y tế, khai báo y tế 2 - Phát biểu toán cần xử lý cho ứng dụng website. .. hệ thống thông tin quản lý khai báo y tế điện tử sử dụng NodeJS, ReactJS MongoDB? ?? có tính thực tiễn Mục tiêu nghiên cứu - Tổng hợp kiến thức NodeJS, ReactJS MongoDB để áp dụng vào x? ?y dựng Website