Đồ án xây dựng website tư vấn sức khỏe, tâm lý cho sinh viên

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM *** BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE TƯ VẤN SỨC KHỎE, TÂM LÝ CHO SINH VIÊN GVHD: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Nguyễn Anh Duy – 18520663 TP Hồ Chí Minh, ngày tháng năm 2023 LỜI CẢM ƠN Trong sống chúng ta, có lẽ thất bại thành cơng, dù kết nỗ lực cá nhân tập thể Và đằng sau hỗ trợ giúp đỡ từ người Xét mặt thành cơng, thực tế khơng có thành cơng mà khơng có giúp đỡ, học tập Dân gian ta có câu “Khơng thầy đố mày làm nên” thật đúng, học sinh thành cơng khơng có giúp đỡ, truyền đạt bảo tận tình người Thầy, người Cơ Hơm nay, để hồn thành đồ án môn học này, em biết ơn ThS Trần Thị Hồng Yến hỗ trợ tận tình cho em Với lòng biết ơn sâu sắc nhất, em xin gửi đến Cô với tri thức tâm huyết để truyền đạt vốn kiến thức quý báu cho em suốt thời gian học tập trường Cô hướng dẫn cho em cụ thể chi tiết quy trình cách làm đồ án nhiều kiến thức quý báu lời góp ý cho đồ án Với giúp đỡ, cuối em hồn thành đồ án có tên: “Website tư vấn sức khỏe tâm lý sinh viên” Trải qua thời gian học đề tài Với hướng dẫn tận tình đóng góp q báu Cơ giúp em hồn thành tốt báo cáo mơn học Bên cạnh việc vận dụng kiến thức học lớp đồng thời kết hợp với việc học hỏi tìm hiểu kiến thức Từ đó, em vận dụng tối đa tiếp thu để hồn thành báo cáo đồ án tốt Tuy nhiên, trình thực hiện, khơng tránh khỏi sai sót Do đó, mong nhận góp ý từ phía Cơ nhằm hồn thiện kiến thức học tập hành trang để thực tiếp đề tài khác tương lai Xin chân thành cảm ơn Cơ! Thành phố Hồ Chí Minh, tháng năm 2023 Sinh viên thực Nguyễn Anh Duy NHẬN XÉT CỦA GIÁO VIÊN …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… Mục lục Chương 1: Tóm tắt đề tài 1.1 Tổng quan đề tài 1.2 Lý chọn đề tài 1.3 Đối tượng sử dụng 1.4 Phạm vi nghiên cứu Chương 2: Cơ sở lý thuyết 2.1 Visual Code: 2.2 Library React 2.3 NodeJS + ExpressJS 2.4 Database: MySQL Workbench Chương 3: Đặc tả use case 3.1 Sơ đồ use case 3.2 Danh sách tác nhân 3.3 Danh sách use case 3.4 Mô tả use case Chương 4: Thiết kế liệu 4.1 Sơ đồ hoàn chỉnh 4.2 Danh sách table sơ đồ: 4.3 Mô tả table: 4.3.1 Bảng User 4.3.2 Bảng Student 4.3.2 Bảng Admin 4.3.4 Bảng Post 4.3.5 Bảng Chatbox Chương 5: Thiết kế hệ thống 5.1 Kiến trúc hệ thống 5.2 Mô tả thành phần kiến trúc Chương 6: Thiết kế giao diện 6.1 Danh sách hình 6.2 Mơ tả chi tiết hình 6.2.1 Đăng nhập 6.2.2 Đăng ký 7 7 8 10 11 11 11 12 12 15 15 15 15 16 16 16 16 17 18 18 19 20 20 21 22 22 6.3.3 Trang chủ 6.2.4 Bản tin 6.2.5 Admin 6.2.6 Quản lý viết 6.2.7 Chi tiết viết 6.2.8 Chatbox 6.2.9 Phản hồi chat 6.2.10 Màn 404 TỔNG KẾT HƯỚNG PHÁT TRIỂN TÀI LIỆU THAM KHẢO 24 25 26 27 28 29 30 31 32 33 34 Mục lục hình Hình 3.1 Sơ đồ use case 11 Hình 3.2 Sơ đồ hồn chỉnh 15 Hình 3.3 Mơ hình MVC 18 Hình 3.4 Màn hình Đăng nhập 22 Hình 3.5 Màn hình Đăng ký 23 Hình 3.6 Màn hình trang chủ 25 Hình 3.7 Màn hình Bản tin 26 Hình 3.8 Màn hình Admin 27 Hình 3.9 Màn hình Quản lý viết 28 Hình 3.10 Mành hình Chi tiết viết 29 Hình 3.11 Màn hình Chatbox 30 Hình 3.12 Màn hình Tư vấn 31 Hình 3.13 Màn hình 404 32 Mục lục bảng Bảng 3.1 Bảng danh sách tác nhân 12 Bảng 3.2 Bảng danh sách use case 12 Bảng 3.3 Bảng mô tả use case “Đăng nhập” 13 Bảng 3.4 Bảng mô tả use case “Đăng ký” 13 Bảng 3.5 Bảng mô tả use case “Quản lý viết” 14 Bảng 3.6 Bảng danh sách table 15 Bảng 3.7 Bảng user 16 Bảng 3.8 Bảng student 16 Bảng 3.9 Bảng admin 16 Bảng 3.10 Bảng Post 17 Bảng 3.11 Bảng Chatbox 17 Bảng 3.12 Bảng thành phần kiến trúc 20 Bảng 3.13 Bảng danh sách hình 21 Bảng 3.14 Bảng mơ tả hình đăng nhập 22 Bảng 3.15 Bảng mơ tả hình đăng ký 23 Bảng 3.16 Bảng mơ tả hình Admin 27 Tóm tắt đề tài 1.1 Tổng quan đề tài - Tên đề tài: Website tư vấn sức khỏe tâm lý cho sinh viên - Tên web: Savior 1.2 Lý chọn đề tài - Web site tạo nhầm mục đích giúp đỡ sinh viên có khúc mắc hay vấn đề sức khỏe tâm lý - Giúp sinh viên tiếp cận đến vấn đề tâm lý mắc phải tương lai - Giúp sinh viên chia sẻ tâm tư kín đáo 1.3 Đối tượng sử dụng - Sinh viên cẩn tư vấn sức khỏe tâm lý 1.4 Phạm vi nghiên cứu - Nền tảng hỗ trợ: Triển khai website - Chức năng: Xem viết, thông tin vấn đề sức khỏe tâm lý Hỗ trợ tư vấn riêng với chuyên gia CRUD viết thông tin sức khỏe tâm lý Cơ sở lý thuyết 2.1 Visual Code: Là trình biên tập lập trình code miễn phí dành cho Windows, Linux macOS, Visual Studio Code phát triển Microsoft Nó xem kết hợp hoàn hảo IDE Code Editor Visual Studio Code hỗ trợ chức debug, kèm với Git, có syntax highlighting, tự hồn thành mã thơng minh, snippets, cải tiến mã nguồn Nhờ tính tùy chỉnh, visual Studio Code cho phép người dùng thay đổi theme, phím tắt, tùy chọn khác · · Hỗ trợ đa tảng: Windows, Linux, Mac Hỗ trợ đa ngôn ngữ: C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, JSON · Ít dung lượng · Tính mạnh mẽ · Intellisense chuyên nghiệp · Giao diện thân thiện 2.2 Library React Reactjs thư viện Javascript mã nguồn mở hỗ trợ xây dựng thành phần giao diện nhanh gọn tiện lợi Bình thường lập trình viên nhúng javascript vào code HTML thông qua attribute AngularJS với Reactjs làm việc thư viện cho phép nhúng HTML vào javascript thơng qua JSX Qua bạn dễ dàng lồng đoạn HTML vào JSX làm cho component dễ hiểu dễ sử dụng Trong Reactjs thường dùng javascript để thiết kế bố cục cho trang web, nhược điểm cấu trúc khó Thay vào sử dụng JSX nhúng đoạn HTML vào javascript, ta thấy cú pháp dễ hiểu JSX tối ưu code biên soạn Vừa dễ cho người lập trình mà vừa tiện cho việc biên dịch 2.3 NodeJS + ExpressJS NodeJS tảng xây dựng V8 JavaScript Engine – trình thơng dịch thực thi mã JavaScript, giúp xây dựng ứng dụng web cách đơn giản dễ dàng mở rộng NodeJS phát triển Ryan Dahl vào năm 2009 chạy nhiều hệ điều hành khác nhau: OS X, Microsoft Windows, Linux · NodeJS viết JavaScript với cộng đồng người dùng lớn mạnh Nếu bạn cần hỗ trợ NodeJS, nhanh chóng có người hỗ trợ bạn · Tốc độ xử lý nhanh Nhờ chế xử lý bất đồng (non-blocking), NodeJS xử lý hàng ngàn kết nối lúc mà khơng gặp khó khăn · Dễ dàng mở rộng Nếu bạn có nhu cầu phát triển website tính dễ dàng mở rộng NodeJS lợi quan trọng Expressjs framework xây dựng tảng Nodejs Nó cung cấp tính mạnh mẽ để phát triển web mobile Expressjs hỗ trợ method HTTP middleware tạo API vô mạnh mẽ dễ sử dụng 2.4 Database: MySQL Workbench MySQL Workbench công cụ quản lý sở liệu mạnh mẽ miễn phí phát triển Oracle Corporation Nó cung cấp giao diện trực quan dễ sử dụng cho việc quản lý sở liệu MySQL, từ việc tạo quản lý kết nối đến việc thiết kế sở liệu tối ưu hóa truy vấn MySQL Workbench thiết kế để giúp người dùng quản lý sở liệu MySQL cách hiệu Với MySQL Workbench, người dùng thực tác vụ quan trọng thiết kế sở liệu, tạo quản lý kết nối, truy vấn tối ưu hóa, đồ họa hóa mô phỏng, gỡ lỗi sửa lỗi ● Mọi sở liệu hoạt động dựa vào mơ hình ● MySQL Workbench với cơng cụ hỗ trợ nhà phát triển quản trị viên triển khai mơ hình thiết kế sở liệu vật lý dễ dàng ● Cho phép họ dịch chúng sang sở liệu MySQL kỹ thuật chuyển tiếp ● Hỗ trợ tạo nhiều mơ hình mơi trường hoạt động ● Hỗ trợ nhiều đối tượng khác tables, views, stored procedures, triggers… ● Tiện ích xác thực mơ hình tích hợp sẵn giúp báo cáo vấn đề đáng ngờ nhanh chóng ● Hỗ trợ mở rộng ký hiệu mơ hình thơng qua LUA Admin Hiển thị Quản lý viết Hiển thị Chi tiết viết – người dùng Hiển thị Hồ sơ người dùng – người dùng Hiển thị nhập liệu Lịch sử đặt tour Hiển thị 10 Trang chủ - Admin Hiển thị 11 Tour – Admin Hiển thị Nhập liệu 12 Tin tức – Admin Hiển thị Nhập liệu 13 Lịch sử đặt tour – Admin Hiển thị nhập liệu 14 Hồ sơ người dùng - Admin Hiển thị nhập liệu Bảng 3.12 Bảng danh sách hình 3.4.2 Mơ tả chi tiết hình a/ Đăng nhập Hình 3.4 Màn hình Đăng nhập Chức năng: Cho phép người dùng đăng nhập vào hệ thống Mơ tả hình: STT Tên đối tượng Loại Chức Username Input Nhập tên đăng nhập Password Input Nhập mật tương ứng Đăng nhập Button Yêu cầu đăng nhập Tạo tài khoản Button Mở trang đăng ký Bảng 3.14 Bảng mơ tả hình đăng nhập b/ Đăng ký Hình 3.5 Màn hình Đăng ký Chức năng: Cho phép người dùng đăng ký tài khoản vào hệ thống Mô tả hình: STT Tên đối tượng Loại Chức Username Input Nhập tên đăng nhập Email Input Nhập địa email Phone Number Input Nhập số điện thoại Password Input Nhập mật Đăng Ký Button Xác nhận đăng ký Bảng 3.13 Bảng mô tả hình đăng ký c/ Trang chủ Hình 3.6 Màn hình trang chủ d/ Bản tin Hình 3.7 Màn hình Bản tin Chức năng: Hiển thị viết liên quan đến sức khỏe tâm lý e/ Admin Hình 3.8 Màn hình Admin Chức năng: Hỗ trợ tư vấn sức khỏe tâm lý cho sinh viên thông qua chat realtime Mơ tả hình STT Tên đối tượng Loại Chức Quản lý viết Button Mở trang quản lý viết Chat Button Mở trò chuyện với người dùng Bảng 3.14 Bảng mô tả hình Admin f/ Quản lý viết Hình 3.9 Màn hình Quản lý viết Chức năng: CRUD viết website g/ Chi tiết viết Hình 3.10 Mành hình Chi tiết viết Chức năng: Hiển thị chi tiết viết h/ Chatbox Hình 3.11 Màn hình Chatbox Chức năng: Hỗ trợ chat với admin để nhận tư vấn sức khỏe tâm lý, đặt lịch i/ Màn hình Tư vấn Hình 3.12 Màn hình Tư vấn Chức năng: Hỗ trợ tư vấn cho sinh viên qua chat real time j Màn 404 Hình 3.13 Màn hình 404 TỔNG KẾT Savior ứng dụng Web hỗ trợ tư vấn sức khỏe tâm lý cho sinh viên Với giúp đỡ hỗ trợ cô, em xây dựng website với chức bản: hỗ trợ tư vấn sức khỏe cho sinh viên, đăng tải viết liên quan đến sức khỏe tâm lý Với nỗ lực hết mình, nhiên website cịn nhiều thiếu sót Em tiếp tục hoàn thiện phát triển ứng dụng để đáp ứng nhu cầu thực tế Tiếp tục phát triển để hồn thiện chức cịn thiếu sót HƯỚNG PHÁT TRIỂN Một số chức em tiếp tục phát triển: - Hoàn thiện cho phép sinh viên nhắn tin chuyên gia - Xây dựng giao diện admin - Đa dạng hóa viết thông tin, thường xuyên cập nhật - Thêm chức comment viết - Tối ưu hóa code PHỤ LỤC STT MSSV Họ tên Công việc Mức độ hoàn thành (%) 18520663 Nguyễn Anh Duy Thiết kế giao diện Thiết kế Database Lập trình FE, BE Viết báo cáo 60% TÀI LIỆU THAM KHẢO Tiếng Việt [1] https://viblo.asia/ [2] https://topdev.vn/ Tiếng Anh [1] http://expressjs.com/ [2] https://reactjs.org/tutorial/tutorial.html [3] MySQL :: MySQL Workbench Manual [4] https://www.npmjs.com/package