Đồ án tìm hiểu về mô hình mern và xây dựng website mạng xã hội

ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN

BÁO CÁO CUỐI KÌ
ĐỒ ÁN 2
ĐỀ TÀI: TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG
WEBSITE MẠNG XÃ HỘI
Giảng viên hướng dẫn:
ThS. THÁI THỤY HÀN UYỂN
Sinh viên thực hiện:
VÕ TRUNG TÍN

19522353

NGUYỄN MINH THI

19522257

 Tp. Hồ Chí Minh, 6/2022 

1


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................

..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................

……., ngày……...tháng……năm 2022

Người nhận xét
(Ký tên và ghi rõ họ tên)

2


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

LỜI CẢM ƠN
Trước khi đi vào nội dung phần báo cáo đồ án, lời nói đầu tiên chúng em xin
chân thành gửi lời cảm ơn đến ThS. THÁI THỤY HÀN UYỂN – Giảng viên môn ĐỒ
ÁN 2 – người đã truyền đạt các kiến thức trên lớp, hướng dẫn và cung cấp các yêu cầu
hướng về người dùng dựa trên thực tế, tạo điều kiện cho chúng em thực hiện và đồng
thời nhận xét, góp ý để đồ án của chúng em trở nên hồn thiện hơn. Đây là những lời
góp ý vơ cùng sâu sắc, không chỉ liên quan về kiến thức mà còn là những yêu cầu về
thực tế mà một ứng dụng mạng xã hội cần phải có để nhóm em có thể hồn thiện được

đồ án này tốt nhất có thể. Những lời chia sẻ, hướng dẫn đầy nhiệt tình của cơ là động
lực q báu để nhóm chúng em có thể vượt qua những khó khăn khi tìm hiểu và thực
hiện đề tài, khi mơ hình MERN (bao gồm MongoDB, ExpressJS, ReactJS và NodeJS)
là kiến thức còn khá mới mẻ và tụi em vẫn đang trong quá trình tìm hiểu và tích lũy
kiến thức.
Đồng thời, nhóm chúng em cũng muốn gửi lời cảm ơn sâu sắc đến những người
đã hỗ trợ chúng em trong quá trình thực hiện đồ án này, không chỉ là những người bạn
đã tạo điều kiện thuận lợi và động viên chúng em rất nhiều, mà đặc biệt là những anh
chị trong khoa Công Nghệ Phần Mềm vì đã góp ý, chia sẻ những kinh nghiệm quý báu
về môn học cũng như các kiến thức khác có liên quan.
Trong q trình thực hiện, do kiến thức và kinh nghiệm cịn nhiều hạn chế, khó
có thể tránh khỏi những sai sót. Vì vậy, chúng em rất mong nhận được những lời góp ý
q báu từ cơ để nhóm chúng em có thể ngày càng hồn thiện không chỉ là đồ án hiện
tại, các đồ án môn học sắp tới, đồng thời đây cũng là những hành trang góp phần hồn
thiện bản thân chúng em trong tương lai.
Một lần nữa xin chân thành cám ơn cơ!

Nhóm thực hiện
Trường Đại học Công nghệ Thông tin, tháng 6 năm 2022

3


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

MỤC LỤC
NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ......................................................... 2
LỜI CẢM ƠN ............................................................................................................... 3
MỤC LỤC ..................................................................................................................... 4
CHƯƠNG I: GIỚI THIỆU CHUNG .......................................................................... 8

I. ĐỀ TÀI: .............................................................................................................................. 8
II. LÝ DO CHỌN ĐỀ TÀI: .................................................................................................... 8
III. TÓM TẮT ĐỀ TÀI: ......................................................................................................... 9
IV. MỤC TIÊU CỦA ĐỀ TÀI: .............................................................................................. 9
V. PHƯƠNG PHÁP NGHIÊN CỨU: .................................................................................... 9
VI. Ý NGHĨA VÀ KẾT QUẢ CỦA HƯỚNG ĐỀ TÀI: ..................................................... 10
1. Về mặt sản phẩm: ......................................................................................................... 10
2. Về mặt tài liệu: ............................................................................................................. 10

CHƯƠNG II: CƠNG NGHỆ LIÊN QUAN ............................................................. 11
I. TÌM HIỂU VỀ MONGODB:............................................................................................ 11
1. NoSQL là gì: ................................................................................................................. 11
2. MongoDB là gì: ............................................................................................................ 12
3. Ưu điểm của MongoDB: .............................................................................................. 12
4. Nhược điểm của MongoDB: ........................................................................................ 13
II. TÌM HIỂU VỀ EXPRESSJS: .......................................................................................... 14
1. ExpressJS là gì: ............................................................................................................. 14
2. Tại sao nên sử dụng ExpressJS trong lập trình web: .................................................... 15
2.1 Sự phổ biến của Javasript: ...................................................................................... 15
2.2 Hỗ trợ xây dựng website một cách nhanh chóng: ................................................... 15
2.3 ExpressJS hồn tồn miễn phí: ............................................................................... 15
3. Những tính năng của ExpressJS là gì? ......................................................................... 16
III. TÌM HIỂU VỀ REACTJS:............................................................................................. 16
1. ReactJS là gì: ................................................................................................................ 16
2. Các thành phần cơ bản của ReactJS: ............................................................................ 17
3. Lợi ích khi sử dụng ReactJS: ........................................................................................ 17
IV. TÌM HIỂU VỀ NODEJS: .............................................................................................. 18
1. NodeJS là gì: ................................................................................................................. 18
2. Một số ứng dụng của NodeJS: ...................................................................................... 18
3. Ưu điểm của NodeJS: ................................................................................................... 18

4


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

4. Nhược điểm của NodeJS: ............................................................................................. 19

CHƯƠNG III: MƠ HÌNH USE CASE ..................................................................... 20
I. SƠ ĐỒ USE CASE MỨC TỔNG QUÁT: ....................................................................... 20
II. DANH SÁCH CÁC USE CASE: .................................................................................... 21
III. ĐẶC TẢ USE CASE: .................................................................................................... 22
1. Use case Đăng ký: ........................................................................................................ 22
2. Use case Gửi email xác nhận: ....................................................................................... 23
3. Use case Đăng nhập:..................................................................................................... 23
4. Use case Nhớ mật khẩu: ............................................................................................... 24
5. Use case Quên mật khẩu:.............................................................................................. 25
6. Use case Thay đổi mật khẩu: ........................................................................................ 26
7. Use case Đăng xuất: ..................................................................................................... 26
8. Use case Xem thông tin cá nhân:.................................................................................. 27
9. Use case Thay đổi thông tin cá nhân: ........................................................................... 28
10. Use case Xem danh sách bài đăng cá nhân: ............................................................... 28
11. Use case Chỉnh sửa bài viết đã đăng: ......................................................................... 29
12. Use case Xóa bài viết: ................................................................................................ 30
13. Use case Đăng bài viết mới: ....................................................................................... 30
14. Use case Tìm kiếm người dùng: ................................................................................. 31
15. Use case Theo dõi người dùng: .................................................................................. 31
16. Use case Xem bài viết: ............................................................................................... 32
17. Use case Thích bài viết: .............................................................................................. 33
18. Use case Xem bình luận: ............................................................................................ 33

19. Use case Thêm bình luận: ........................................................................................... 34
20. Use case Sửa bình luận: .............................................................................................. 34
21. Use case Thích bình luận: ........................................................................................... 35
22. Use case Xóa bình luận: ............................................................................................. 35
23. Use case Phản hồi bình luận: ...................................................................................... 36
24. Use case Trị chuyện: .................................................................................................. 36
25. Use case Nhắn tin: ...................................................................................................... 37
26. Use case Call: ............................................................................................................. 38

CHƯƠNG IV: PHÂN TÍCH HỆ THỐNG ............................................................... 39
I. SƠ ĐỒ LỚP: ..................................................................................................................... 39
1. Sơ đồ lớp mức phân tích: .............................................................................................. 39
2. Danh sách các lớp đối tượng: ....................................................................................... 39

5


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

3. Mô tả từng lớp đối tượng: ............................................................................................. 40
3.1 Lớp Province: .......................................................................................................... 40
3.2 Lớp District: ............................................................................................................ 40
3.3 Lớp Ward: ............................................................................................................... 40
3.4 Lớp Address: ........................................................................................................... 40
3.5 Lớp Users: ............................................................................................................... 40
3.6 Lớp Post: ................................................................................................................. 41
3.7 Lớp Comment: ........................................................................................................ 42
3.8 Lớp Conversation:................................................................................................... 42
3.9 Lớp Message: .......................................................................................................... 42
II. SƠ ĐỒ TUẦN TỰ:.......................................................................................................... 43

1. Đăng ký / Gửi email xác nhận / Đăng nhập/ Nhớ mật khẩu/ Quên mật khẩu/ Thay đổi
mật khẩu/ Đăng xuất: ........................................................................................................ 43
2. Xem thông tin cá nhân/Thay đổi thông tin cá nhân:..................................................... 45
3. Xem danh sách bài đăng cá nhân / Chỉnh sửa bài viết đã đăng/ Xóa bài viết/ Đăng bài
viết mới: ............................................................................................................................ 45
4. Tìm kiếm người dùng – Theo dõi người dùng/Bỏ theo dõi người dùng: ..................... 47
5. Xem bài viết – Thích bài viết/Bỏ thích bài viết – Xem bình luận – Sửa bình luận đã
viết – Thích bình luận/Bỏ thích bình luận – Xóa bình luận: ............................................ 47
6. Nhắn tin – Gọi thường/video: ....................................................................................... 49

CHƯƠNG V: THIẾT KẾ GIAO DIỆN ................................................................... 50
I. MÀN HÌNH GIỚI THIỆU: ............................................................................................... 50
II. CÁC MÀN HÌNH QUẢN TRỊ TRUY CẬP: .................................................................. 51
1. Màn hình Đăng ký ........................................................................................................ 51
2. Popup Gửi Email xác thực – Email xác thực ............................................................... 51
3. Màn hình Đăng nhập: ................................................................................................... 52
4. Popup Quên mật khẩu – Email Reset Password: .......................................................... 53
5. Màn hình Thay đổi mật khẩu:....................................................................................... 54
III. CÁC MÀN HÌNH CHỨC NĂNG: ................................................................................ 54
1. Màn hình Trang chủ: .................................................................................................... 54
2. Màn hình Profile: .......................................................................................................... 55
3. Màn hình Thay đổi thơng tin cá nhân: .......................................................................... 56
4. Màn hình Chi tiết bài viết: ............................................................................................ 57
5. Popup Thêm bài viết mới: ............................................................................................ 57
6. Giao diện Tìm kiếm người dùng: ................................................................................. 58
7. Giao diện Bình luận: ..................................................................................................... 58

6

ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

8. Giao diện thông báo:..................................................................................................... 59
9. Màn hình Tin nhắn: ...................................................................................................... 59
10. Màn hình Discover – Khám phá bài viết của người dùng khác: ................................ 60

CHƯƠNG VI: TỔNG KẾT ....................................................................................... 61
I. CÔNG NGHỆ SỬ DỤNG: ............................................................................................... 61
II. ĐỘ HOÀN THIỆN CHỨC NĂNG: ................................................................................ 61
III. KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN: ................................................. 62
1. Kết quả đạt được: .......................................................................................................... 62
1.1 Ưu điểm: ................................................................................................................. 62
1.2 Nhược điểm: ........................................................................................................... 62
2. Hướng phát triển: .......................................................................................................... 62

CHƯƠNG VII: BẢNG PHÂN CÔNG CÔNG VIỆC ............................................. 63
CHƯƠNG VIII: TÀI LIỆU THAM KHẢO ............................................................ 64

7


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

CHƯƠNG I: GIỚI THIỆU CHUNG
I. ĐỀ TÀI:
- Cơng nghệ tìm hiểu: MERN (MongoDB, ExpressJS, ReactJS, NodeJS).
- Ứng dụng xây dựng: Website Social Butterfly (Website mạng xã hội).

II. LÝ DO CHỌN ĐỀ TÀI:
Những năm gần đây, mạng xã hội (MXH) đã có bước phát triển mạnh mẽ, tác động

lớn đến đời sống xã hội ở hầu hết các quốc gia trên thế giới, trong đó có Việt Nam.
MXH đã trở thành một thuật ngữ phổ biến với những tính năng đa dạng cho phép người
dùng kết nối, chia sẻ, tiếp nhận thông tin một cách nhanh chóng, hiệu quả.
Nói chung, mạng xã hội đã và đang ảnh hưởng rất lớn (cả tích cực và tiêu cực) đến
mọi hoạt động và sinh hoạt của con người, nhất là giới trẻ. Với đặc điểm nổi trội là tính
kết nối nhanh, chia sẻ rộng, chỉ cần một chiếc điện thoại hay một máy tính kết nối
Internet, chúng ta có thể truy cập và tham gia vào rất nhiều trang mạng như: Facebook,
Zalo, Youtube, Twitter… trong đó, phổ biến nhất là Facebook. Mặc dù mục đích, cách
thức, mức độ tham gia các trang mạng xã hội của mỗi người khác nhau nhưng có một
điểm chung đó là xem nó như là một phần không thể thiếu trong đời sống tinh thần của
con người.
Đặc biệt, trong giai đoạn phòng và chống dịch Covid-19 vơ cùng căng thẳng và khó
khăn như hiện nay, dưới sự chỉ đạo của Nhà nước về các quy định giãn cách xã hội, hạn
chế tụ tập đông người, cũng như hạn chế các hoạt động giao tiếp hằng ngày giữa người
với người với nhau, điều này đã ảnh hưởng rất nhiều đến trải nghiệm của người dùng
đối với các nhu cầu hằng ngày, trong đó có nhu cầu giao tiếp với người thân, bạn bè,
bạn đồng nghiệp và các mối quan hệ khác.
Nhận thấy điều đó, cùng với vị trí và vai trị của thời đại cơng nghệ 5.0, nhóm chúng
em quyết định làm WEBSITE MẠNG XÃ HỘI – SOCIAL BUTTERFLY để trở
thành phương tiện kết nối từ xa hỗ trợ quá trình giao tiếp giữa người với người. Ứng
dụng này khơng những có thể đảm bảo an tồn sức khỏe cho người dùng mà cịn có thể
đáp ứng được các nhu cầu cần thiết về q trình giao tiếp như trị chuyện, chia sẻ những
trải nghiệm cuộc sống thông qua những bài viết, tương tác trực tiếp qua các cuộc gọi.

8


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

III. TÓM TẮT ĐỀ TÀI:

Website mạng xã hội là cầu nối hỗ trợ việc giao tiếp giữa người với người dưới nhiều
hình thức đa dạng như là nhắn tin, tương tác hay bình luận bài viết, trò chuyện qua cuộc
gọi, vv… Trong bối cảnh cơng nghệ đang ngày càng chiếm ưu thế và đóng vai trò to
lớn trong các hoạt động kinh tế lẫn cuộc sống con người hiện nay, đặc biệt là tình hình
dịch bệnh Covid, vì chủ trương hạn chế lây lan, bảo vệ sức khỏe và tính mạng con
người, khi đó hoạt động giao tiếp hằng ngày không thể nào diễn ra một các trực tiếp với
nhau được bởi vì các hoạt động tụ tập thành nhóm bị hạn chế, thậm chí là cấm. Khi đó,
một bài tốn xã hội được đặt ra là làm thế nào để giữa người với người vẫn có thể giao
tiếp được với nhau và vẫn có thể đảm bảo sức khỏe và tuân theo chủ trương phịng
chống dịch bệnh của nhà nước. Bên cạnh đó, một số người mắc phải hội chứng ngại
giao tiếp mặt đối mặt, đối với các hoạt động giao tiếp trực tiếp họ thường lúng túng và
không thể giao tiếp một cách trơi chảy như những người bình thường thường hay làm,
ngược lại họ lại cảm thấy dễ dàng giao tiếp, bày tỏ thông qua các phương tiện thứ ba
khác. Mặt khác, rào cản về địa lý cũng là một điều gây cản trở quá trình giao tiếp. Vì
vậy, mạng xã hội ra đời với mục tiêu giải quyết được các vấn đề trên.

IV. MỤC TIÊU CỦA ĐỀ TÀI:
- Xây dựng Website mạng xã hội cung cấp các chức năng cơ bản hỗ trợ trong quá
trình giao tiếp từ xa giữa người với người với nhau, cụ thể là việc nhắn tin trao đổi, chia
sẽ cuộc sống hằng ngày thông qua các bài đăng, trò chuyện qua cuộc gọi, video call,
tương tác bình luận giữa nhiều người dùng với nhau trên một bài viết, vv…
- Nghiên cứu các công nghệ liên quan để phát triển ứng dụng.
- Đưa ra các báo cáo và tài liệu cho môn học.

V. PHƯƠNG PHÁP NGHIÊN CỨU:
- Nghiên cứu các tài liệu về nghiệp vụ liên quan cách xây dựng giao diện và các hoạt
động của các trang mạng xã hội.
- Tiến hình khảo sát lấy yêu cầu thực tế từ người dùng.
- Tham khảo một số website mạng xã hội như: Facebook, Instagram, Zalo, Twitter,
vv…

- Nghiên cứu các tài liệu, video hướng dẫn liên quan cách sử dụng các cơng nghệ
mới vào q trình xây dựng website, cụ thể là cách xây dựng theo MERN.

9


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

VI. Ý NGHĨA VÀ KẾT QUẢ CỦA HƯỚNG ĐỀ TÀI:
1. Về mặt sản phẩm:
- Tạo ra được website mạng xã hội, đảm bảo có thể kết nối giữa các người dùng
từ xa.
- Các chức năng hướng về người dùng.
- Cung cấp được các chức năng cơ bản của một website mạng xã hội cần có, đặc
biệt là các vấn đề liên quan phản hồi, tương tác theo thời gian thực.
2. Về mặt tài liệu:
- Các thông tin được ghi trong tài liệu trở thành nguồn tham khảo, kiến thức cho
việc áp dụng các công nghệ đã sử dụng vào các đồ án xây dựng ứng dụng có liên
quan như: MongoDB, ExpressJS, ReactJS, NodeJS vv…

10


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

CHƯƠNG II: CÔNG NGHỆ LIÊN QUAN
I. TÌM HIỂU VỀ MONGODB:
1. NoSQL là gì:

- NoSQL là 1 dạng CSDL mã nguồn mở và được viết tắt bởi: None-Relational

SQL hay có nơi thường gọi là Not-Only SQL.
- NoSQL được phát triển trên Javascript Framework với kiểu dữ liệu là JSON và
dạng dữ liệu theo kiểu key và value.
- NoSQL ra đời như là 1 mảnh vá cho những khuyết điểm và thiếu xót cũng như
hạn chế của mơ hình dữ liệu quan hệ RDBMS (Relational Database Management
System - Hệ quản trị cơ sở dữ liệu quan hệ) về tốc độ, tính năng, khả năng mở rộng,...
- Với NoSQL bạn có thể mở rộng dữ liệu mà khơng lo tới những việc như tạo khóa
ngoại, khóa chính, kiểm tra ràng buộc vv…
- NoSQL bỏ qua tính tồn vẹn của dữ liệu và transaction để đổi lấy hiệu suất nhanh
và khả năng mở rộng.
- NoSQL được sử dụng ở rất nhiều cơng ty, tập đồn lớn, ví dụ như FaceBook sử
dụng Cassandra do FaceBook phát triển, Google phát triển và sử dụng BigTable,
vv…

11


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

2. MongoDB là gì:

- MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql
và được hàng triệu người sử dụng.
- MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ
trong document kiểu JSON thay vì dạng bảng như CSDL quan hệ nên truy vấn sẽ rất
nhanh.
- Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như
MySQL hay SQL Server...) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng
ta sẽ dùng khái niệm là collection thay vì bảng
- So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ

ứng với row , MongoDB sẽ dùng các document thay cho row trong RDBMS.
- Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu
lưu trữ không cần tuân theo một cấu trúc nhất định.
- Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông
qua ngôn ngữ truy vấn MongoDB.
3. Ưu điểm của MongoDB:
- Do MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một
collection sẽ có các kích cỡ và các document khác nhau, linh hoạt trong việc lưu trữ
dữ liệu, nên bạn muốn gì thì cứ insert vào thoải mái.
- Dữ liệu trong MongoDB khơng có sự ràng buộc lẫn nhau, khơng có join như
trong RDBMS nên khi insert, xóa hay update nó khơng cần phải mất thời gian kiểm
tra xem có thỏa mãn các ràng buộc dữ liệu như trong RDBMS.
- MongoDB rất dễ mở rộng (Horizontal Scalability). Trong MongoDB có một khái
niệm cluster là cụm các node chứa dữ liệu giao tiếp với nhau, khi muốn mở rộng hệ
thống ta chỉ cần thêm một node với vào cluster:
- Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn
thông tin đạt hiệu suất cao nhất.

12


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

- Khi có một truy vấn dữ liệu, bản ghi được cached lên bộ nhớ Ram, để phục vụ
lượt truy vấn sau diễn ra nhanh hơn mà không cần phải đọc từ ổ cứng.
- Hiệu năng cao: Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanh
hơn hẳn so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS). Với một lượng dữ
liệu đủ lớn thì thử nghiệm cho thấy tốc độ insert của MongoDB có thể nhanh tới gấp
100 lần so với MySQL.

4. Nhược điểm của MongoDB:
- Một ưu điểm của MongoDB cũng chính là nhược điểm của nó. MongoDB khơng
có các tính chất ràng buộc như trong RDBMS nên khi thao tác với mongoDB thì phải
hết sức cẩn thận.
- Tốn bộ nhớ do dữ liệu lưu dưới dạng key-value, các collection chỉ khác về value
do đó key sẽ bị lặp lại. Không hỗ trợ join nên dễ bị dữ thừa dữ liệu.
- Khi insert/update/remove bản ghi, MongoDB sẽ chưa cập nhật ngay xuống ổ
cứng, mà sau 60 giây MongoDB mới thực hiện ghi toàn bộ dữ liệu thay đổi từ RAM
xuống ổ cứng điêù này sẽ là nhược điểm vì sẽ có nguy cơ bị mất dữ liệu khi xảy ra
các tình huống như mất điện...

13


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

II. TÌM HIỂU VỀ EXPRESSJS:
1. ExpressJS là gì:

- ExpressJS hay cịn được viết là Express js, Express.js. Đây là một framework mã
nguồn mở miễn phí cho NodeJS. Express.js được sử dụng trong thiết kế và xây dựng
các ứng dụng web một cách đơn giản và nhanh chóng.
- Vì ExpressJS chỉ u cầu ngơn ngữ lập trình Javascript nên việc xây dựng các
ứng dụng web và API trở nên đơn giản hơn với các lập trình viên và nhà phát triển.
ExpressJS cũng là một khn khổ của NodeJS do đó hầu hết các mã code đã được
viết sẵn cho các lập trình viên có thể làm việc.
- Nhờ có ExpressJS mà các nhà lập trình có thể dễ dàng tạo các ứng dụng 1 web,
nhiều web hoặc kết hợp. Do có dung lượng khá nhẹ, ExpressJS giúp cho việc tổ chức
các ứng dụng web thành một kiến trúc MVC có tổ chức hơn.Để có thể sử dụng được
mã nguồn này, chúng ta cần phải biết về Javascript và HTML.

- Expressjs cũng là một phần của công nghệ giúp quản lý các ứng dụng web một
cách dễ dàng hơn hay còn được gọi là ngăn xếp phần mềm MEAN.Nhờ có thư viện
Javascript của ExpressJS đã giúp cho các nhà lập trình xây dựng nên các ứng dụng
web hiệu quả và nhanh chóng hơn. ExpressJS cũng được sử dụng để nâng cao các
chức năng của NodeJS.
- Trên thực tế, nếu không sử dụng ExpressJS, bạn sẽ phải thực hiện rất nhiều bước
lập trình phức tạp để xây dựng nên một API hiệu quả. ExpressJS đã giúp cho việc
lập trình trong NodeJS trở nên dễ dàng hơn và có nhiều tính năng mới bổ sung.

14


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

2. Tại sao nên sử dụng ExpressJS trong lập trình web:
2.1 Sự phổ biến của Javasript:
- Javascript là một ngơn ngữ lập trình được sử dụng rộng rãi hiện nay, dễ đọc
và được hỗ trợ ở mọi nơi. Mà ExpressJS lại hỗ trợ Javascript, do đó nếu bạn đã
biết đến Javascript thì chắc chắn việc lập trình bằng ExpressJS là vơ cùng đơn
giản. Ngay cả những người mới bắt đầu tham gia vào lĩnh vực phát triển web này
cũng có thể sử dụng ExpressJS.
- Javascript là ngơn ngữ lập trình dễ học với cả những người khơng có bất kỳ
kiến thức gì về ngơn ngữ lập trình khác. Chính vì tính phổ biến, dễ học và dễ sử
dụng này mà ExpressJS cho phép các tài năng trẻ tham gia và đạt được nhiều thành
công trong phát triển ứng dụng web.
2.2 Hỗ trợ xây dựng website một cách nhanh chóng:
- Thời gian chính là tài sản quý giá của bất kỳ doanh nghiệp nào. Hơn thế, nhiều
lập trình viên cịn phải chịu áp lực xây dựng các ứng dụng web một cách hiệu quả
trong thời gian ngắn. Nhưng để thực hiện tốt công việc này cần rất nhiều thời gian
và ExpressJS chính là cơng cụ cứu cánh cho các nhà lập trình.

- ExpressJS có thể giúp làm giảm một nửa thời gian viết mã mà vẫn xây dựng
lên các ứng dụng web hiệu quả. Không chỉ trợ giúp về mặt thời gian Expressjs còn
làm giảm những áp lực cần thiết để xây dựng với sự trợ giúp của các tính năng
khác nhau của nó.ExpressJS cịn cung cấp một phần mềm trung gian đảm nhận
nhiệm vụ đưa ra các quyết định để phản hồi chính xác những u cầu của khách
hàng.
- Nếu khơng có ExpressJS, các lập trình viên phải viết mã code riêng để xây
dựng nên thành phần định tuyến. Đó là một cơng việc vô cùng tẻ nhạt và tốn thời
gian. ExpressJS đã giúp cho công việc này trở nên đơn giản và hiệu quả hơn rất
nhiều.
2.3 ExpressJS hồn tồn miễn phí:
Một trong những yếu tố để tổ chức, doanh nghiệp nên sử dụng cơng cụ, ứng
dụng nào chính là chi phí. Với một ứng dụng web với nhiều tính năng tuyệt vời
như vậy mà lại khơng tốn một chút kinh phí nào thì khơng có lý do gì để khơng sử
dụng nó.

15


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

3. Những tính năng của ExpressJS là gì?
- Phát triển máy chủ nhanh chóng: ExpressJS cung cấp nhiều tính năng dưới dạng
các hàm để dễ dàng sử dụng ở bất kỳ đâu trong chương trình. Điều này đã loại bỏ
nhu cầu viết mã từ đó tiết kiệm được thời gian.
- Phần mềm trung gian Middleware: Đây là phần mềm trung gian có quyền truy
cập vào cơ sở dữ liệu, yêu cầu của khách hàng và những phần mềm trung gian khác.
Phần mềm Middleware này chịu trách nhiệm chính cho việc tổ chức có hệ thống các
chức năng của: ExpressJS.
- Định tuyến - Routing: ExpressJS cung cấp cơ chế định tuyến giúp duy trì trạng

thái của website với sự trợ giúp của URL.
- Tạo mẫu - Templating: Các công cụ tạo khuôn mẫu được ExpressJS cung cấp
cho phép các nhà xây dựng nội dung động trên các website bằng cách tạo dựng các
mẫu HTML ở phía máy chủ.
- Gỡ lỗi - Debugging: Để phát triển thành công các ứng dụng web không thể thiết
đi việc gỡ lỗi. Giờ đây với ExpressJS việc gỡ lỗi đã trở nên dễ dàng hơn nhờ khả
năng xác định chính xác các phần ứng dụng web có lỗi.

III. TÌM HIỂU VỀ REACTJS:
1. ReactJS là gì:

- 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.

16


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

- 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. Các thành phần cơ bản của ReactJS:
- Components: Thành phần cơ bản của React được gọi là components. Syntax để
viết HTML sử dụng Javascript để render. Bạn có thể tạo ra một component bằng các

gọi phương thức createClass của đối tượng React, điểm bắt đầu khi tiếp cận với thư
viện này. Có thể lồng nhiều component vào nhau thơng qua lệnh return của phương
thức render.
- Redux: Trong một chương trình thì có rất nhiều các component, để đơn giản việc
quản lý các component đó người ta sử dụng redux, redux giống như 1 cái kho chứa
các component và khi dùng component nào thì chỉ cần gọi nó ra.
- Virtual DOM: Virtual DOM không được tạo ra bởi Reactjs nhưng lại được sử
dụng rất nhiều. Đây là một chuẩn của W3C được dùng để truy xuất code HTML hoặc
XML. Các Virtual DOM sẽ được tạo ra khi chạy chương trình, đó là nơi chưa các
component. Sử dụng DOM sẽ tiết kiệm được hiệu suất làm việc, khi có thay đổi gì
ReactJS đều tính tốn trước và việc cịn lại chỉ là thực hiện chúng lên DOM.
3. Lợi ích khi sử dụng ReactJS:
- ReactJS giúp cho việc viết các đoạn code Javascript sẽ trở nên dễ dàng hơn vì nó
sử dụng một cú pháp đặc biệt đó chính là cú pháp JSX. Thông qua JSX cho phép
nhúng code HTML và Javascript.
- ReactJS cho phép Developer phá vỡ những cấu tạo UI phức tạp thành những
component độc lập. Dev sẽ không phải lo lắng về tổng thể ứng dụng web, giờ đây
Developer dễ dàng chia nhỏ các cấu trúc UI/UX phức tạp thành từng component đơn
giản hơn.
- Đi kèm với ReactJS là rất nhiều các công cụ phát triển giúp cho việc debug code
một cách dễ dàng hơn.
- Một trong những ưu điểm nữa của ReactJS đó là sự thân thiện với SEO. Hầu như
các JS Frameworks khơng thân thiện với các tìm kiếm mặc dù đã được cải thiện nhiều
nhưng dưới sự hỗ trợ của các render dữ liệu trả về dưới dạng web page giúp cho SEO
chuẩn hơn.

17


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

IV. TÌM HIỂU VỀ NODEJS:
1. NodeJS là gì:

- NodeJS là một mã nguồn mở, một môi trường cho các máy chủ và ứng dụng
mạng.
- NodeJS sử dụng Google V8 JavaScript engine để thực thi mã, và một tỷ lệ lớn
các mô-đun cơ bản được viết bằng JavaScript. Các ứng dụng node.js thì được viết
bằn JavaScript.
- NodeJS chứa một thư viện built-in cho phép các ứng dụng hoạt động như một
Webserver mà không cần phần mềm như Nginx, Apache HTTP Server hoặc IIS.
- NodeJS cung cấp kiến trúc hướng sự kiện (event-driven) và non-blocking I/O
API, tối ưu hóa thơng lượng của ứng dụng và có khả năng mở rộng cao.
- Mọi hàm trong NodeJS là khơng đồng bộ (asynchronous). Do đó, các tác vụ đều
được xử lý và thực thi ở chế độ nền (background processing).
2. Một số ứng dụng của NodeJS:
- Xây dựng websocket server (Chat server)
- Hệ thống Notification (Giống như facebook hayTwitter)
- Ứng dụng upload file trên client
- Các máy chủ quảng cáo
- Các ứng dụng dữ liệu thời gian thực khác.
3. Ưu điểm của NodeJS:
- Đặc điểm nổi bật của NodeJS là nó nhận và xử lý nhiều kết nối chỉ với một
single-thread. Điều này giúp hệ thống tốn ít RAM nhất và chạy nhanh nhất khi không
phải tạo thread mới cho mỗi truy vấn giống PHP. Ngoài ra, tận dụng ưu điểm nonblocking I/O của Javascript mà Node.js tận dụng tối đa tài nguyên của server mà
không tạo ra độ trễ như PHP.

18

ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

- JSON APIs: Với cơ chế event-driven, non-blocking I/O(Input/Output) và mơ
hình kết hợp với Javascript là sự lựa chọn tuyệt vời cho các dịch vụ Webs làm bằng
JSON.
- Ứng dụng trên 1 trang (Single page Application): Nếu bạn định viết 1 ứng dụng
thể hiện trên 1 trang (Gmail?) NodeJS rất phù hợp để làm. Với khả năng xử lý nhiều
Request/s đồng thời thời gian phản hồi nhanh. Các ứng dụng bạn định viết không
muốn nó tải lại trang, gồm rất nhiều request từ người dùng cần sự hoạt động nhanh
để thể hiện sự chuyên nghiệp thì NodeJS sẽ là sự lựa chọn của bạn.
- Shelling tools unix NodeJS sẽ tận dụng tối đa Unix để hoạt động. Tức là NodeJS
có thể xử lý hàng nghìn Process và trả ra 1 luồng khiến cho hiệu xuất hoạt động đạt
mức tối đa nhất và tuyệt vời nhất.
- Streamming Data (Luồng dữ liệu): Các web thông thường gửi HTTP request và
nhận phản hồi lại (Luồng dữ liệu). Giả xử sẽ cần xử lý 1 luồng giữ liệu cực lớn,
NodeJS sẽ xây dựng các Proxy phân vùng các luồng dữ liệu để đảm bảo tối đa hoạt
động cho các luồng dữ liệu khác.
- Ứng dụng Web thời gian thực: Với sự ra đời của các ứng dụng di động & HTML
5 nên Node.js rất hiệu quả khi xây dựng những ứng dụng thời gian thực (real-time
applications) như ứng dụng chat, các dịch vụ mạng xã hội như Facebook, Twitter,…
4. Nhược điểm của NodeJS:
- Ứng dụng nặng tốn tài nguyên Nếu bạn cần xử lý các ứng dụng tốn tài nguyên
CPU như encoding video, convert file, decoding encryption… hoặc các ứng dụng
tương tự như vậy thì khơng nên dùng NodeJS (Lý do: NodeJS được viết bằng C++
& Javascript, nên phải thơng qua thêm 1 trình biên dịch của NodeJS sẽ lâu hơn 1
chút). Trường hợp này bạn hãy viết 1 Addon C++ để tích hợp với NodeJS để tăng
hiệu suất tối đa!
- NodeJS và ngôn ngữ khác NodeJS, PHP, Ruby, Python .NET …thì việc cuối
cùng là phát triển các App Web. NodeJS mới sơ khai như các ngôn ngữ lập trình
khác. Vậy nên bạn đừng hi vọng NodeJS sẽ không hơn PHP, Ruby, Python… ở thời

điểm này. Nhưng với NodeJS bạn có thể có 1 ứng dụng như mong đợi, điều đó là
chắc chắn!

19


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

CHƯƠNG III: MƠ HÌNH USE CASE
I. SƠ ĐỒ USE CASE MỨC TỔNG QUÁT:

20


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

II. DANH SÁCH CÁC USE CASE:
STT
1

Tên Use case
Đăng ký

2

Gửi email xác nhận

Sau khi xác nhận email đăng ký thành công, tài khoản
sẽ được tạo ra

3

Đăng nhập

Dùng tài khoản đã đăng ký hoặc google để đăng nhập
vào website

Nhớ mật khẩu

Lưu tài khoản và mật khẩu để cho lần đăng nhập sau
người dùng không cần phải nhập lại thông tin tên tài
khoản và mật khẩu

5

Quên mật khẩu

Người dùng quên mật khẩu của tài khoản muốn đăng
nhập, thông qua tên tài khoản (email) để tiến hành việc
thay đổi mật khẩu

6

Thay đổi mật khẩu

Thay đổi mật khẩu của tài khoản

7

Đăng xuất

Đăng xuất tài khoản khỏi website

8

Xem thông tin cá nhân

Xem các thông tin của tài khoản như là họ tên người
dùng, địa chỉ, ngày sinh, số điện thoại, vv…

9

Thay đổi thông tin cá nhân

Chỉnh sửa và cập nhật thông tin cá nhân, thông tin tài
khoản

10

Xem danh sách bài đăng
cá nhân

Xem danh sách những bài đăng đã đăng trên trang cá
nhân

11

Chỉnh sửa bài viết đã đăng

12

Xóa bài viết

13

Đăng bài viết mới

14

Tìm kiếm người dùng

Nhập tên người dùng để thực hiện việc tìm kiếm những
người dùng (thành viên) của website

15

Theo dõi người dùng

Chọn theo dõi những người dùng khác, sau khi theo dõi
thì các bài viết sẽ hiển thị lên news feed của người dùng
đã chọn theo dõi

16

Xem bài viết

Chọn và xem nội dung của bài viết

17

Thích bài viết

Chọn biểu tượng trái tim để thể hiện cảm xúc yêu thích
với bài viết

18

Xem bình luận

Hiển thị tồn bộ bình luận của chính bài viết đang xem

19

Thêm bình luận

Thêm một bình luận mới vào bài viết

20

Sửa bình luận

4

Mơ tả chung
Tạo tài khoản mới

Chọn và cập nhật nội dung của bài viết đã đăng
Chọn và xóa bài viết đã đăng
Đăng một bài viết mới lên trang cá nhân

Chọn và cập nhật nội dung của bình luận đó

21


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

21

Thích bình luận

22

Xóa bình luận

23

Phản hồi bình luận

24

Trị chuyện

25

Nhắn tin

26

Call

Chọn biểu tượng trái tim để thể hiện cảm xúc u thích
với bình luận đó
Chọn và xóa một bình luận người dùng muốn
Thêm một bình luận mới nằm trong một bình luận khác
Xem danh sách các đoạn hội thoại với bạn bè
Nhắn tin với một người dùng khác
Gọi điện với một người dùng khác, có thể gọi thường
hoặc gọi video

III. ĐẶC TẢ USE CASE:
1. Use case Đăng ký:
Mô tả
Tác nhân

Người dùng đăng ký tài khoản mới để sử dụng cho việc đăng nhập vào
Người dùng
Hành vi của tác nhân

Hành vi của hệ thống

1. Người dùng chọn button Đăng ký ở 2. Hiển thị màn hình Đăng ký
màn hình Đăng nhập
Luồng
chính

3. Nhập các thơng tin u cầu cho việc 4. Kiểm tra các thông tin xem đã đúng định
tạo tài khoản. Chọn button Đăng ký
dạng đặt ra bởi hệ thống hay chưa
5. Kiểm tra email để tạo tài khoản đã được

đăng ký trước đó hay chưa
6. Hiển thị màn hình thơng báo xác nhận
email để chuẩn bị việc thực hiện xác thực
email với người dùng
A1. Sai định dạng các thông tin đã nhập

Luồng thay
thế

5. Yêu cầu nhập lại đúng định dạng các thông tin sai định dạng
A2. Email đã được đăng ký cho một tài khoản khác
6. Hệ thống yêu cầu người dùng đăng ký bằng email khác

Điều kiện
trước

Đã đăng xuất tài khoản trước đó và từ màn hình Đăng nhập chuyển qua màn hình
Đăng ký thông qua việc click button Đăng ký

Điều kiện
sau

Hiển thị thông báo để người dùng xác nhận lại xem email đã đúng hay chưa để từ đó
quyết định việc tiến hành xác thực email

22


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

2. Use case Gửi email xác nhận:
Mô tả
Tác nhân

Người dùng xác nhận lại email nhập trong tài khoản đăng ký đúng với email dự định
đăng ký và chọn tiến hành việc gửi email xác nhận để tạo tài khoản
Người dùng
Hành vi của tác nhân

Hành vi của hệ thống

1. Người dùng chọn button Gửi email 2. Tạo một email có nội dung, trong đó chứa
xác thực ở popup Xác nhận email
một link xác thực tài khoản có hiệu lực 5
phút gửi đến email của người dùng dùng để
đăng ký tài khoản
3. Hiển thị popup Gửi lại email xác thực
trong trường hợp người dùng vẫn chưa nhận
được email xác thực đã gửi qua địa chỉ email

Luồng
chính

4. Người dùng truy cập hộp thư của 6. Hệ thống kiểm yêu cầu tạo tài khoản
email dự định đăng ký, tìm email xác thơng qua link xác thực
thực vừa được website Social Butterfly
gửi đến và chọn button Xác thực email
7. Hệ thống thông báo đã xác thực thành
công và chuyển về màn hình Đăng nhập
A1. Chưa nhận được email xác thực

4. Chọn button Gửi lại email xác thực
Luồng thay
thế

A2. Link xác thực hết hạn (quá 5 phút sau khi gửi người dùng vẫn chưa xác thực)
7. Hiển thị màn hình với nội dung link xác thực đã hết hạn
8. Chọn button Quay lại trang chủ để quay trở về trang chủ

Điều kiện
trước

Đã qua bước điền thông tin để tạo tài khoản và popup Xác nhận email để hiện lên

Điều kiện
sau

Tạo tài khoản thành công và chuyển tự động về màn hình Đăng nhập

3. Use case Đăng nhập:
Mơ tả
Tác nhân

Người dùng đăng nhập vào website thông qua tài khoản đã tạo trước đó
Người dùng
Hành vi của tác nhân
1. Người dùng truy cập vào website

Luồng
chính

Hành vi của hệ thống
2. Hiển thị màn hình đăng nhập

3. Nhập tên tài khoản, mật khẩu. Chọn 4. Kiểm tra tên tài khoản và mật khẩu
nút Đăng nhập
5. Chuyển đến màn hình Trang chủ

23


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

A1. Sai tài khoản, mật khẩu
5. Yêu cầu đăng nhập lại
6. Quay lại bước 2
A2. Đăng nhập bằng Google
Luồng thay
thế

1. Người dùng chọn button Goolge
2. Chọn tài khoản Google muốn đăng nhập
3. Chuyển đến màn hình Trang chủ
A3. Phiên đăng nhập vẫn cịn hạn
2. Hiển thị màn hình Trang chủ

Điều kiện
trước

Đã đăng xuất khỏi hệ thống hoặc phiên đăng nhập đã hết hạn

Điều kiện
sau

Truy cập vào trang chủ của website

4. Use case Nhớ mật khẩu:
Mô tả
Tác nhân

Người dùng lưu tên đăng nhập và mật khẩu vào cookie để tự động điền vào form đăng
nhập ở lần đăng nhập sau
Người dùng
Hành vi của tác nhân
1. Người dùng truy cập vào website

Luồng
chính

Hành vi của hệ thống
2. Hiển thị màn hình đăng nhập

3. Nhập tên tài khoản, mật khẩu. Chọn
nút Nhớ mật khẩu
4. Chọn nút Đăng nhập

5. Kiểm tra tên tài khoản và mật khẩu
6. Lưu tên tài khoản và mật khẩu vào cookie
và chuyển đến màn hình Trang chủ

Luồng thay

thế

A1. Sai tài khoản, mật khẩu
6. Khơng lưu tên tài khoản và mật khẩu vào cookie

Điều kiện
trước

Đã đăng xuất khỏi hệ thống hoặc phiên đăng nhập đã hết hạn

Điều kiện
sau

Lưu tên tài khoản và mật khẩu vào cookie. Lần đăng nhập kế sẽ tự động điền tên tài
khoản và mật khẩu này vào form Đăng nhập

24


ĐỒ ÁN 2 – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI

5. Use case Quên mật khẩu:
Mô tả
Tác nhân

Người dùng không nhớ mật khẩu tài khoản đã tạo và thực hiện chức năng thay đổi lại
mật khẩu để có thể sử dụng mật khẩu mới đó cho việc đăng nhập
Người dùng
Hành vi của tác nhân
1. Người dùng truy cập vào website

Hành vi của hệ thống
2. Hiển thị màn hình đăng nhập

3. Người dùng chọn Quên mật khẩu 4. Hệ thống xuất hiện popup Quên mật khẩu
trên màn hình Đăng nhập
5. Người dùng điền email đã đăng ký 5. Kiểm tra tên tài khoản và mật khẩu
tài khoản
6. Người dùng chọn button Gửi email

7. Hệ thống kiểm tra tài khoản có tồn tại hay
khơng thơng qua email người dùng đã nhập
8. Hệ thống gửi email thay đổi mật khẩu đến
email đăng ký của người dùng có chứa link
thay đổi mật khẩu và thông báo cho người
dùng biết ở màn hình. Link thay đổi mật
khẩu có hiệu lực trong vịng 5 phút

Luồng
chính

9. Người dùng truy cập hộp thư điện tử 10. Chuyển người dùng tới trang thay đổi
với email đã nhập, và chọn vào đường mật khẩu. Hệ thống kiểm tra link thay đổi
link thay đổi mật khẩu ở email vừa mật khẩu còn hiệu lực sử dụng hay không
được gửi từ website Social Butterfly
11. Hiển thị đầy đủ giao diện thay đổi mật
khẩu
A1. Email chưa được đăng ký (Tài khoản có email đó chưa tồn tại)
Luồng thay
thế

8. Website thông báo tài khoản chưa được đăng ký
A2. Link thay đổi mật khẩu đã hết hạn
11. Hiển thị thông báo link đã hết hạn và không hiển thị trang thay đổi mật khẩu

Điều kiện
trước

Đã đăng xuất khỏi hệ thống hoặc phiên đăng nhập đã hết hạn. Đã tạo tài khoản và
muốn thay đổi mật khẩu tài khoản này

Điều kiện
sau

Hiển thị màn hình thay đổi mật khẩu có các textbox để nhập mật khẩu mới

25