Đồ á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 2

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 cuộc sống của chúng ta, có lẽ ai cũng đã từng thất bại hoặc thành công, dù như
thế nào thì đó cũng là kết quả nỗ lực của mỗi cá nhân cũng như tập thể. Và đằng sau đó
chính là sự hỗ trợ giúp đỡ từ mọi người. Xét về mặt thành công, trong thực tế không có
sự thành cơng nào mà khơng có sự giúp đỡ, nhất là trong học tập. Dân gian ta có câu
“Khơng thầy đố mày làm nên” quả thật là đúng, học sinh khơng thể thành cơng nếu
khơng có sự giúp đỡ, truyền đạt cũng như chỉ bảo tận tình của người Thầy, người Cơ.
Hơm nay, để có thể hồn thành được đồ án môn học này, em rất 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ơ đã cùng với tri thức và tâm huyết của
mình để truyền đạt vốn kiến thức quý báu cho em trong suốt thời gian học tập tại trường.
Cô đã hướng dẫn cho em cụ thể chi tiết quy trình cách làm đồ án cũng như nhiều kiến
thức quý báu và lời góp ý cho đồ án này.

Với những gì đã được giúp đỡ, cuối cùng em đã hoà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 một học kỳ thực hiện đề tài. Với sự
hướng dẫn tận tình cùng những đóng góp q báu của Cơ giúp em hồn thành tốt báo
cáo mơn học của mình. Bên cạnh việc vận dụng những kiến thức được học trên lớp đồng
thời kết hợp với việc học hỏi và tìm hiểu những kiến thức mới. Từ đó, em đã vận dụng
tối đa những gì đã tiếp thu được để hoàn thành một báo cáo đồ án tốt nhất. Tuy nhiên,
trong quá trình thực hiện, khơng tránh khỏi những sai sót. Do đó, rất mong nhận được
những sự góp ý từ phía Cơ nhằm hồn thiện những kiến thức đã học tập và cũng là hành
trang để thực hiện tiếp các đề tài khác trong 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 hiện
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ý do 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ế dữ liệu
4.1. Sơ đồ hoàn chỉnh
4.2. Danh sách các table trong sơ đồ:
4.3. Mô tả từng 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ả các thành phần trong kiến trúc
Chương 6: Thiết kế giao diện
6.1. Danh sách các màn hình
6.2. Mơ tả chi tiết từng màn hình
6.2.1. Đăng nhập
6.2.2. Đăng ký

7
7
7
7
7
8
8
8
9
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ý bài viết
6.2.7. Chi tiết bài 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ý bài viết ........................................................................................ 28
Hình 3.10. Mành hình Chi tiết bài 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 các 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ý bài viết” ................................................................... 14
Bảng 3.6. Bảng danh sách các 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 các thành phần trong kiến trúc ...................................................................... 20
Bảng 3.13. Bảng danh sách các màn hình ................................................................................ 21
Bảng 3.14. Bảng mơ tả màn hình đăng nhập ............................................................................ 22
Bảng 3.15. Bảng mơ tả màn hình đăng ký ................................................................................ 23
Bảng 3.16. Bảng mơ tả màn hình Admin ................................................................................. 27


1. 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ý do chọn đề tài
-

Web site tạo ra nhầm mục đích giúp đỡ những sinh viên có khúc mắc hay vấn đề
về sức khỏe tâm lý.

-

Giúp sinh viên tiếp cận đến những vấn đề tâm lý có thể mắc phải trong tương lai

-

Giúp sinh viên chia sẻ những tâm tư kín đáo.

1.3. Đối tượng sử dụng
-

Sinh viên cẩn tư vấn về 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 trên website

-

Chức năng:
. Xem bài viết, thông tin về các vấn đề sức khỏe tâm lý.
. Hỗ trợ tư vấn riêng với chuyên gia.
. CRUD bài viết về các thông tin sức khỏe tâm lý.


2. Cơ sở lý thuyết
2.1. Visual Code:
Là một trình biên tập lập trình code miễn phí dành cho Windows, Linux và macOS,
Visual Studio Code được phát triển bởi Microsoft. Nó được xem là một sự kết hợp
hoàn hảo giữa IDE và Code Editor.
Visual Studio Code hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting,
tự hồn thành mã thơng minh, snippets, và cải tiến mã nguồn. Nhờ tính năng tùy

chỉnh, visual Studio Code cũng cho phép người dùng thay đổi theme, phím tắt, và
các tùy chọn khác.
·
·

Hỗ trợ đa nền 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 năng mạnh mẽ

·

Intellisense chuyên nghiệp

·

Giao diện thân thiện

2.2. Library React
Reactjs là một thư viện Javascript mã nguồn mở hỗ trợ xây dựng các thành phần giao
diện nhanh gọn và tiện lợi. Bình thường các lập trình viên sẽ nhúng javascript vào
code HTML thông qua các attribute như AngularJS nhưng với Reactjs làm việc như
một thư viện cho phép nhúng HTML vào javascript thơng qua JSX. Qua đó bạn có

thể dễ dàng lồng các đoạn HTML vào trong JSX làm cho các component dễ hiểu và
dễ sử dụng hơn.
Trong Reactjs thường dùng javascript để thiết kế bố cục cho trang web, nhưng nhược
điểm là cấu trúc khá là khó. Thay vào đó sử dụng JSX và nhúng các đoạn HTML vào
javascript, ta thấy cú pháp dễ hiểu hơn và JSX cũng có thể tối ưu code khi 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 là một nền tảng được xây dựng trên V8 JavaScript Engine – trình thơng dịch
thực thi mã JavaScript, giúp xây dựng các ứng dụng web một cách đơn giản và dễ
dàng mở rộng.
NodeJS được phát triển bởi Ryan Dahl vào năm 2009 và có thể chạy trên nhiều hệ
điều hành khác nhau: OS X, Microsoft Windows, Linux.
·

NodeJS được viết bằng JavaScript với cộng đồng người dùng lớn mạnh.
Nếu bạn cần hỗ trợ gì về NodeJS, sẽ nhanh chóng có người hỗ trợ bạn.

·

Tốc độ xử lý nhanh. Nhờ cơ chế xử lý bất đồng bộ (non-blocking), NodeJS
có thể xử lý hàng ngàn kết nối cùng lúc mà khơng gặp bất cứ khó khăn nào.

·

Dễ dàng mở rộng. Nếu bạn có nhu cầu phát triển website thì tính năng dễ
dàng mở rộng của NodeJS là một lợi thế cực kỳ quan trọng.

Expressjs là một framework được xây dựng trên nền tảng của Nodejs. Nó cung cấp

các tính năng mạnh mẽ để phát triển web hoặc mobile. Expressjs hỗ trợ các method
HTTP và middleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng.


2.4. Database: MySQL Workbench
MySQL Workbench là một công cụ quản lý cơ sở dữ liệu mạnh mẽ và miễn phí được
phát triển bởi Oracle Corporation. Nó cung cấp một giao diện trực quan và dễ sử
dụng cho việc quản lý cơ sở dữ liệu MySQL, từ việc tạo và quản lý kết nối đến việc
thiết kế cơ sở dữ liệu và tối ưu hóa truy vấn.
MySQL Workbench được thiết kế để giúp người dùng quản lý cơ sở dữ liệu MySQL
một cách hiệu quả. Với MySQL Workbench, người dùng có thể thực hiện các tác vụ
quan trọng như thiết kế cơ sở dữ liệu, tạo và quản lý kết nối, truy vấn và tối ưu hóa,
đồ họa hóa và mơ phỏng, gỡ lỗi và sửa lỗi.
●

Mọi cơ sở dữ liệu hoạt động đều dựa vào các mơ hình của nó.

●

MySQL Workbench với các công cụ hỗ trợ nhà phát triển và quản trị viên
triển khai các mơ hình thiết kế cơ sở dữ liệu vật lý dễ dàng hơn.

●

Cho phép họ có thể dịch chúng sang cơ sở dữ liệu MySQL bằng kỹ thuật
chuyển tiếp.

●

Hỗ trợ tạo nhiều mơ hình trong cùng một môi trường hoạt động.

●

Hỗ trợ nhiều đối tượng khác nhau như 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 các vấn đề đáng ngờ
nhanh chóng hơn.

●

Hỗ trợ mở rộng các ký hiệu mơ hình thơng qua LUA.


3. Phân tích và thiết kế hệ thống
3.1. Đặc tả use case
3.1.1. Sơ đồ use case

Hình 3.1. Sơ đồ use case

3.1.2. Danh sách tác nhân

STT

Tác nhân

Mô tả

1

Sinh viên

2

Admin

Là người dùng, sửa dụng website để xem thông tin, yêu cầu
tư vấn sức khỏe tâm lý.
Là người quản lý bài viết trên website, phản hồi, tư vấn những
vấn đề của sinh viên
Bảng 3.1. Bảng danh sách các tác nhân

3.1.3. Danh sách use case
STT

Tính năng

1

Đăng nhập

2

Đăng ký

4

Mơ tả
Đăng nhập vào hệ thống website bằng tài khoản
cá nhân
Dành cho sinh viên: đăng ký tài khoản để đăng
nhập vào hệ thống

Xem thông tin bài
viết

Xem thông tin bài viết về sức khỏe tâm lý được đăng
tải.
Chat hỗ trợ tư vấn sức khỏe tâm lý

5

Chatbox

6

Tính BMI

7

Cài đặt tài khoản

8

Quản lý bài viết

Tính chỉ số sức khỏe BMI cho sinh viên

Dành cho sinh viên: chỉnh sửa thông tin cá nhân
Dành cho Admin: các thao tác thêm, sửa, xóa
nội dung các bài viết liên quan đến sức khỏe
tâm lý
Bảng 3.2. Bảng danh sách use case

3.1.4. Mô tả use case
Mô tả “Đăng nhập”
Mô tả chi tiết

Người dùng sở hữu tài khoản, sử dụng
tài khoản truy cập hệ thống

Luồng sự kiện
Luồng chính

1. Chọn đến trang đăng nhập


2. Nhập thông tin tài khoản gồm tên
tài khoản và mật khẩu
3. Nhấn nút đăng nhập
Luồng phụ

1. Thực hiện các bước ở luồng chính
2. Hệ thống thơng báo đăng nhập
thất bại do sai thông tin

Điều kiện trước

Yêu cầu tài khoản

Điều kiện sau
Bảng 3.3. Bảng mô tả use case “Đăng nhập”

Mô tả “Đăng ký”
Mô tả chi tiết

Người dùng thực hiện tạo tài khoản cá
nhân để truy cập hệ thống

Luồng sự kiện
Luồng chính

1. Chọn đến trang đăng ký
2. Nhập thơng tin của tài khoản
mới
3. Nhấn nút đăng ký

Luồng phụ

1. Thực hiện các bước luồng chính 2.
Hệ thống hiện thơng báo khơng
đăng ký được do trùng tên đăng
nhập hoặc email

Điều kiện trước

Truy cập website

Điều kiện sau
Bảng 3.4. Bảng mô tả use case “Đăng ký”


Mô tả “Quản lý bài viết”
Mô tả chi tiết

Cho phép Admin thực hiện các thao tác
thêm/ sửa – xóa 1 bài viết

Luồng sự kiện
Luồng chính

1. Chọn đến trang bài viết
2. Thực hiện thao tác thêm/ sửa -xóa
2.1 Nếu thêm bài viết mới:
• Chọn nút thêm
• Nhập thơng tin bài viết mới
• Nhấn nút lưu thay đổi
2.2 Nếu sửa – xóa bài viết:
• Chọn bài viết muốn sửa – xóa
• Thay đổi thông tin nếu muốn sửa
và nhấn lưu thay đổi
3. Nhấn xóa nếu muốn loại bài viết
khỏi hệ thống

Luồng phụ

1. Thực hiện các bước ở luồng chính
2. Hệ thống báo lỗi nếu thông tin

nhập vào không hợp lệ

Điều kiện trước

Đăng nhập trước vào hệ thống bằng tài
khoản admin

Điều kiện sau

Hệ thống xác nhận và lưu trữ
Bảng 3.5. Bảng mô tả use case “Quản lý bài viết”


3.2. Thiết kế dữ liệu
3.2.1. Sơ đồ hồn chỉnh

Hình 3.2. Sơ đồ hoàn chỉnh

3.2.2. Danh sách các table trong sơ đồ:
STT

Tên bảng dữ liệu

Diễn giải

1

User

Người truy cập website

2

Student

Sinh viên đã đăng nhập

3

Admin

Admin hỗ trợ tư vấn

4

Post

Thông tin bài viết

5

Chatbox

Chat hỗ trợ tư vấn sức khỏe tâm lý
Bảng 3.6. Bảng danh sách các table


3.2.3. Mơ tả từng table:
a/ Bảng User
STT

Thuộc tính Kiểu dữ liệu

1

userId

string

Ràng buộc
Khóa chính,

Diễn giải
Not

null

Mã người dùng
truy cập website

Bảng 3.6. Bảng user

b/ Bảng Student
STT

Thuộc tính

Kiểu
dữ liệu

Ràng buộc

Diễn giải

1

id

string

Khóa chính, not null

Mã sinh viên

2

Name

string

not null

Tên sinh viên

3

Phone Number

string

not null

Số điện thoại

4

Email

string

not null

Địa chỉ email

Bảng 3.7. Bảng student

c/ Bảng Admin
STT

Thuộc tính

Kiểu
dữ liệu

Ràng buộc

1

id

string

Khóa chính, not null

Tên đăng nhập

2

Password

string

not null

Mật khẩu

Bảng 3.8. Bảng admin

Diễn giải


d/ Bảng Post
STT

Thuộc tính

Kiểu
dữ liệu

Ràng buộc

Diễn giải

1

id

string

Khóa chính, not null

Mã bài viết

2

Content

string

not null

Nội dung

3

Media

binary

Hình ảnh

Bảng 3.9. Bảng Post

e/ Bảng Chatbox
STT

Thuộc tính

Kiểu
dữ liệu

Ràng buộc

1

id

string

Khóa chính, not null

Mã
cuộc
chuyện

2

Commet

string

not null

Nội dung

Bảng 3.10. Bảng Chatbox

Diễn giải
trò


3.3. Thiết kế hệ thống
3.3.1. Kiến trúc hệ thống

Hình 3.3. Mơ hình MVC

MVC là từ viết tắt bởi 3 từ Model – View – Controller. Đây là mơ hình thiết kế sử dụng
trong kỹ thuật phần mềm. Mơ hình source code thành 3 phần, tương ứng mỗi từ. Mỗi từ
tương ứng với một hoạt động tách biệt trong một mô hình.
Mơ hình MVC nổi bật với ưu điểm:
-

Kiểm tra dễ dàng: Với MVC, bạn có thể dễ dàng kiểm tra, rà soát lỗi phần
mềm trước khi tới tay người tiêu dùng, đảm bảo chất lượng và độ uy tín cao
hơn.


-

Chức năng control: Trên các nền website thì ngơn ngữ lập trình như CSS,

HTML, Javascript có một vai trị vơ cùng quan trọng. Việc sử dụng mơ hình
MVC sẽ giúp bạn có một bộ control ưu việt trên nền tảng các ngơn ngữ hiện
đại với nhiều hình thức khác nhau.

-

View và size: View sẽ là nơi lưu trữ các dữ liệu. Càng nhiều u cầu được
thực hiện thì kích thước càng tệp càng lớn. Khi đó, đường truyền mạng cũng
giảm tốc độ load. Việc sử dụng mơ hình MVC sẽ giúp bạn tiết kiệm được diện
tích băng thơng một cách tối ưu.

-

Chức năng Soc (Separation of Concern): Chức năng này cho phép bạn phân
tách rõ ràng các phần như Model, giao diện, data, nghiệp vụ.

-

Tính kết hợp: Việc tích hợp ở mơ hình MVC cho phép bạn thoải mái viết
code trên nền tảng website. Khi đó, server của bạn sẽ được giảm tải khá nhiều.

-

Đơn giản: Đây là một mô hình với kết cấu tương đối đơn giản. Dù bạn
khơng có q nhiều chun mơn cũng có thể sử dụng được.

3.3.2. Mô tả các thành phần trong kiến trúc
STT

Thành phần

Diễn giải

1

Lớp View

Cung cấp giao diện người dùng thực hiện các thao tác
nhập xuất dữ liệu, thông báo lỗi xảy ra trong quá trình
sử dụng.
Ứng dụng làm lớp này là trình duyệt Chrome.


Lớp Controller

2

Xử lí các yêu cầu của ứng dụng như nhập, xuất để kiểm
tra xem có thoả các yêu cầu hay không.
Ứng dụng làm lớp này là IIS.

Lớp Model

3

Để quản lí dữ liệu của ứng dụng, ở đây là quản lí tất cả
dữ liệu của cửa hàng.
Ứng dụng làm lớp này là SQL Server.
Bảng 3.11. Bảng các thành phần trong kiến trúc

3.4. Thiết kế giao diện
3.4.1. Danh sách các màn hình

STT

Tên màn hình

Loại

1

Đăng nhập

Đăng nhập

2

Đăng ký

Đăng nhập

3

Trang chủ

Hiển thị

4

Bản tin

Hiển thị


5

Admin

Hiển thị

6

Quản lý bài viết

Hiển thị

7

Chi tiết bài viết – người dùng

Hiển thị

8

Hồ sơ người dùng – người dùng

Hiển thị và nhập liệu

9

Lịch sử đặt tour

Hiển thị

10

Trang chủ - Admin

Hiển thị

11

Tour – Admin

Hiển thị và Nhập liệu

12

Tin tức – Admin

Hiển thị và Nhập liệu

13

Lịch sử đặt tour – Admin

Hiển thị và nhập liệu

14

Hồ sơ người dùng - Admin

Hiển thị và nhập liệu

Bảng 3.12. Bảng danh sách các màn hình


3.4.2. Mơ tả chi tiết từng màn 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ả màn hình:

STT

Tên đối tượng

Loại

Chức năng

1

Username

Input

Nhập tên đăng nhập

2

Password

Input

Nhập mật khẩu tương ứng

3

Đăng nhập

Button

Yêu cầu đăng nhập

4

Tạo tài khoản

Button

Mở trang đăng ký

Bảng 3.14. Bảng mô tả màn 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ả màn hình:
STT

Tên đối tượng

Loại

Chức năng

1

Username

Input

Nhập tên đăng nhập

2

Email

Input

Nhập địa chỉ email

3

Phone Number

Input

Nhập số điện thoại

4

Password

Input

Nhập mật khẩu

5

Đăng Ký

Button

Xác nhận đăng ký

Bảng 3.13. Bảng mơ tả màn hình đăng ký


c/ Trang chủ


Hình 3.6. Màn hình trang chủ