đồ án 1 ứng dụng chia sẻ kinh nghiệm học tập

Trang 1

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINHTRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 1

ỨNG DỤNG CHIA SẺ KINH NGHIỆM HỌC TẬP

GIẢNG VIÊN HƯỚNG DẪNThS LÊ THANH TRỌNG

SINH VIÊN THỰC HIỆN

Trang 2

LỜI CẢM ƠN

Đầu tiên, nhóm xin gửi lời cảm ơn đến quý thầy cô tại trường Đạihọc Công nghệ Thông tin – ĐHQG TP.HCM đã truyền đạt cho chúngem những kiến thức để có thể thực hiện được đồ án “Ứng dụngchia sẻ kinh nghiệm học tập”.

Nhóm cũng muốn gửi lời cảm ơn sâu sắc đến ThS Lê Thanh Trọnglà giảng viên hướng dẫn của nhóm, đã đưa ra những sự chỉ dẫn,góp ý, những kiến thức bổ ích cho nhóm để phát triển đồ án Đócòn là những bài học cho nhóm trên con đường phía trước.

Tuy nhiên, trong quá trình làm đồ án, nhóm cũng không tránh khỏinhững sai sót, chúng em mong nhận được sự góp ý từ quý thầy côđể chúng em ngày càng phát triển hơn trong môn học Đồ án 1.

TP.HCM, ngày 30 tháng 12 năm 2023

Nhóm sinh viên thực hiệnTrương Đức Thiện – Tạ Hoàng Long

Trang 3

2.4.3 Trang chú khi chưa đăng nhập 30

2.4.4 Trang chú khi đăng nhập 31

Trang 4

2.4.10. Màn hình thêm bài viết33

Chương 3 CÔNG NGHỆ SỬ DỤNG VÀ SẢN PHẨM KẾT QUẢ 34

Trang 5

Hình 2-5 Màn hình trang chủ khi chưa đăng nhập 30

Hình 2-6 Màn hình trang chủ khi đăng nhập 31

Hình 2-7 Màn hình trang cá nhân 31

Hình 2-8 Màn hình cập nhật trang cá nhân 32

Hình 2-9 Màn hình FAQs 32

Hình 2-10 Màn hình thêm FAQs 33

Hình 2-11 Màn hình xem bài viết 33

Hình 2-12 Màn hình thêm bài viết 33

Hình 3-1 HTML 34

Hình 3-2 CSS 35

Hình 3-3 EXPRESS JS 35

Hình 3-4 MONGODB 36

Trang 6

DANH MỤC BẢNG

Bảng 2-1 Đặc tả usecase Đăng nhập 5

Bảng 2-2 Đặc tả usecase Quên mật khẩu 6

Bảng 2-3 Đặc tả usecase Đăng ký 7

Bảng 2-4 Đặc tả usecase xem bài viết 8

Bảng 2-5 Đặc tả usecase tìm kiếm bài viết 10

Bảng 2-6 Đặc tả usecase lọc bài viết 11

Bảng 2-7 Đặc tả usecase xem bài viết 12

Bảng 2-8 Đặc tả usecase xóa bài viết 13

Bảng 2-9 Đặc tả usecase sửa bài viết 15

Bảng 2-10 Đặc tả usecase bình luận bài viết 16

Bảng 2-11 Đặc tả usecase xem bình luận bài viết đã đăng 17

Bảng 2-12 Đặc tả usecase sửa hoặc xóa bình luận của mình 18

Bảng 2-13 Đặc tả usecase thông báo về các bình luận mới 20

Bảng 2-14 Đặc tả usecase phản hồi bài viết 21

Bảng 2-15 Đặc tả usecase đánh giá bài viết 22

Bảng 2-16 Đặc tả usecase xóa bài viết người dùng 24

Bảng 2-17 Đặc tả usecase quản lí tài khoản người dùng 25

Bảng 2-18 Đặc tả usecase FAQs và giải đáp thắc mắc 27

Bảng 2-19 Đặc tả usecase báo cáo thống kê 28

Trang 7

TỔNG QUAN VỀ ĐỀ TÀI

1.1 Tổng quan về đề tài

Đề tài của chúng em tập trung vào việc phát triển một hệ thốngtrao đổi kinh nghiệm học tập trực tuyến, nhằm tạo ra một cộngđồng học tập chủ động và đa dạng Với sự tăng cường của côngnghệ, nhu cầu chia sẻ thông tin và kinh nghiệm giữa các học sinh,sinh viên ngày càng lớn

1.2.Mục tiêu

 Xây Dựng Cộng Đồng Học Tập Linh Hoạt: Tạo nên một nền tảngnơi mọi người có thể chia sẻ, thảo luận, và tìm kiếm thông tinliên quan đến học tập.

 Đa Dạng Nội Dung và Chủ Đề: Cung cấp một môi trường đadạng cho người dùng chia sẻ kinh nghiệm và kiến thức trongnhiều lĩnh vực học thuật và nghề nghiệp.

 Khuyến Khích Sự Tương Tác: Tạo ra các tính năng khuyến khíchtương tác như bình luận, đánh giá, và chia sẻ để mọi người cảmthấy họ là một phần của cộng đồng.

 Chất Lượng Nội Dung: Khuyến khích nội dung chất lượng thôngqua đánh giá và xếp hạng từ cộng đồng.

1.3 Phạm vi

Website sẽ bao gôm các chức năng chính như: đăng nhập/đăngxuất, đăng tải bài post, đăng tải và lưu trữ các tệp document.

Trang 9

Chương 2 PHÂN TÍCH VÀ THIẾT KẾ

2.1.Sơ đồ usecase

Hình 2-1 Sơ đồ usecase

Trang 10

2.2.Đặc tả use-case

2.2.1 Tài khoản

2.2.1.1.Use-case Đăng nhập

Tên Use-case Usecase Đăng nhập

Mô tả Use-case Đăng nhập vào forum

Kích hoạt (Trigger) Mở website

Actors Guest

Use-case liên quan Không có

Tiền điều kiện Hệ thống phải kết nối đến cơ sở dữ liệu

Hậu điều kiện Guest sẽ được thông báo là đăng nhập thành công

Luồng sự kiện chính 1 Guest nhập thông tin đăng nhập

2 Hệ thống xác thực đăng nhập thành công

3 Hệ thống xác nhận và thông báo đăng nhập thành công

Luồng sự kiện phụ 2a Guest nhập xài thông tin đăng nhập.Quay lại bước 1.2b Guest nhập thông tin tài khoản đã bị cấm hoặc xóa.Quaylại bước 1

Luồng sự kiện ngoại Guest thoát khỏi màn hình đăng nhập Use-case đăng nhập dừng

Trang 11

lệ lại.

Bảng 2-1 Đặc tả usecase Đăng nhập

2.2.1.2.Use-case Quên mật khẩu

Tên Use-case Quên mật khẩu

Mô tả Use-case Tạo lại mật khẩu cho tài khoản

Kích hoạt (Trigger) Guest nhấn vào nút quên mật khẩu ở màn hình đăng nhập

Actors Guest

Hậu điều kiện Guest sẽ được thông báo “Đặt lại mật khẩu thành công” và mậtkhẩu mới được cập nhật vào cơ sở dữ liệu

Luồng sự kiện chính 1 Guest click vào “Quên mật khẩu”2 Guest nhập vào mật khẩu hiện tại

3 Hệ thống gửi đến mã OTP thông qua gmail được đăng kíchung với tài khoản

4 Nhập mã OTP

5 Hệ thống đặt lại mật khẩu cho người dùng

6 Hệ thống thông báo “Đặt lại mật khẩu thành công”

Trang 12

Luồng sự kiện phụ 2a Guest nhập sai mật khẩu lúc này sẽ hiện thôngbáo”Thông tin tài khoản không chính xác”

4a.Nhập sai mã OTP lúc này sẽ hiện thông báo “Mã OTPkhông trùng khớp”

Luồng sự kiện ngoạilệ

Thoát khỏi màn hình Quên mật khẩu Use-case quên mật khẩudừng lại.

Bảng 2-2 Đặc tả usecase Quên mật khẩu

2.2.1.3.Use-case Đăng ký

Tên Use-case Đăng ký

Mô tả Use-case Guest đăng kí tài khoản

Kích hoạt (Trigger) Guest nhấn vào nút đăng kí ở màn hình đăng nhập

Actors Guest

Hậu điều kiện Guest sẽ được thông báo “Tạo tài khoản thành công” và tàikhoản mới được cập nhật vào cơ sở dữ liệu

Luồng sự kiện chính 1 Guest click vào “Đăng kí ”

2 Guest nhập vào mật khẩu hiện tại

Trang 13

3 Hệ thống gửi đến mã xác nhận thông qua gmail đượcđăng kí chung với tài khoản

4 Click vào nút đăng kí

5 Hệ thống lưu thông tin người dùng vào Database6 Hệ thống thông báo “Tạo tài khoản thành công”

Luồng sự kiện phụ 2a Guest nhập sai mật khẩu lúc này sẽ hiện thôngbáo”Thông tin tài khoản không chính xác”

Thoát khỏi màn hình đăng kí Use-case quên đăng kí kết thúcBảng 2-3 Đặc tả usecase Đăng ký

2.2.2 Bài viết

2.2.2.1.Use-case xem bài viết

Tên Use-case Xem bài biết

Mô tả Use-case Người dùng xem bài viết hiện hữu

Kích hoạt (Trigger) Người dùng click vào 1 bài viết bất kì ở website

Actors Người dùng, Guest

Trang 14

Tiền điều kiện Hệ thống phải kết nối đến cơ sở dữ liệu.

Nếu là người dùng thì phải đăng nhập tài khoản.

Hậu điều kiện Không có.

Luồng sự kiện chính 1 Người dùng hoặc guest click vào bài viết muốn xem

Luồng sự kiện phụ Không có

Thoát khỏi màn hình trang chủ Use-case xem bài viết kết thúc.Bảng 2-4 Đặc tả usecase xem bài viết

2.2.2.2.Use-case tìm kiếm bài viết

Tên Use-case Tìm kiếm bài viết

Mô tả Use-case Người dùng tìm kiếm bài viết

Kích hoạt (Trigger) Người dùng click vào ô tìm kiếm ở trang chủ

Actors Người dùng

Người dùng đăng nhập thành công vào website và đang ở giaodiện trang chủ

Trang 15

Hậu điều kiện Người dùng sẽ được thông báo “Tạo tài khoản thành công” vàtài khoản mới được cập nhật vào cơ sở dữ liệu

Luồng sự kiện chính 1 Người dùng click vào thanh tìm kiếm2 Người dùng nhập vào từ khóa

3 Màn hình sẽ chuyển đến nội dung liên quan đến từ khóabạn nhập

Luồng sự kiện phụ 2a.Người dùng nhập từ khóa không tồn tại lúc này sẽ hiệnmàn hình “không tìm tháy từ khóa trùng khớp

Người dùng thoát khỏi màn hình tìm kiếm Use-case tìm kiếmkết thúc.

Bảng 2-5 Đặc tả usecase tìm kiếm bài viết

2.2.2.3.Use-case lọc bài viết

Tên Use-case Lọc bài viết

Mô tả Use-case Người dùng lọc bài viết

Kích hoạt (Trigger) Người dùng nhất vào tag mà người dùng muốn lọc

Trang 16

Tiền điều kiện Hệ thống phải kết nối đến cơ sở dữ liệuNgười dùng phải đăng nhập tài khỏan

Hậu điều kiện Màn hình sẽ được lọc nhưng bài viết theo tiêu chí được chọn

Luồng sự kiện chính 1 Người dùng click tag lọc bài viết2 Người dùng click vào tag muốn lọc

3 Màn hình trnag chủ sẽ trích xuất ra những bài viết theotag được chọn

Luồng sự kiện phụ 2a.Người dùng không chọn tag để lọc lúc này màn hình sẽxuất ra tất cả bài viết đang có.

Người dùng thoát khỏi màn hình trang chủ Use-case lọc bài viếtkết thúc.

Bảng 2-6 Đặc tả usecase lọc bài viết

2.2.2.4.Use-case thêm bài viết

Tên Use-case Thêm bài viết

Mô tả Use-case Người dùng thêm 1 bài viết vào diễn đàn

Kích hoạt (Trigger) Người dùng nhấn vào thêm bài viết ở trang chủ

Trang 17

Người dùng phải đăng nhập tài khoản để thực hiện chứ năng này

Hậu điều kiện Người dùng sẽ được thông báo “Tạo bài viết thành công” và bàiviết mới được cập nhật vào cơ sở dữ liệu

Luồng sự kiện chính 1 Người dùng click vào “Thêm bài viết2 Người dùng nhập vào nội dung bài viết

3 Khi nhập xong bài viết người dùng chọn đăng bài viết4 Hệ thống sẽ đăng tải bài viết của người dùng vào diễn

Luồng sự kiện phụ 2a.Người dùng không nhập thông tin hoặc nhập không đủthông tin màn hình sẽ hiện lên thông báo “vui lòng nhập đủthông tin bài viết”

Người dùng thoát khỏi màn hình thêm bài viết Use-case thêmbài viết kết thúc.

Bảng 2-7 Đặc tả usecase xem bài viết

2.2.2.5.Use-case xóa bài viết

Tên Use-case Xóa bài viết

Mô tả Use-case Người dùng xóa bài viết của bản thân

Kích hoạt (Trigger) Người dùng nhấn vào xóa bài viết ở giao diện của bài viết

Trang 18

Tài khoản người dùng phải được đăng nhập và bài viết muốnxóa phải từ cùng 1 người đăng

Hậu điều kiện Người dùng sẽ được thông báo “Xóa bài viết thành công” và bàiviết sẽ bị xóa khỏi cơ sở dữ liệu

Luồng sự kiện chính 1 Người dùng click vào bài viết muốn xóa2 Người dùng click vào xóa bài viết

3 Hệ thống gửi đến thông báo “Bạn có chắc chắn muốn xóabài viết này”

4 Click vào nút xóa

5 Hệ thống xóa bài viết khỏi vào Database6 Hệ thống thông báo “Xóa bài viết thành công”

Luồng sự kiện phụ 4a.Người dùng nhấn vào nút hủy Màn hình trở về màn hìnhbài viết.

Người dùng thoát khỏi màn hình xóa bài viết Use-case xóa bàiviết kết thúc.

Bảng 2-8 Đặc tả usecase xóa bài viết

Trang 19

2.2.2.6.Use-case sửa bài viết

Tên Use-case Sửa bài viết

Mô tả Use-case Người dùng sửa bài viết

Kích hoạt (Trigger) Người dùng nhấn vào nút chỉnh sửa bài viết ở trang bài viết

Người dùng phải đăng nhập vào hệ thống và bài viết phải đượccùng 1 người đăng.

Hậu điều kiện Người dùng sẽ được thông báo “Chỉnh sửa bài viết thành công”và tài khoản mới được cập nhật vào cơ sở dữ liệu

Luồng sự kiện chính 1 Người dùng click vào “Đăng kí ”2 Người dùng nhập vào mật khẩu hiện tại

3 Hệ thống gửi đến mã xác nhận thông qua gmail đượcđăng kí chung với tài khoản

4 Click vào nút đăng kí

5 Hệ thống lưu thông tin người dùng vào Database6 Hệ thống thông báo “Tạo tài khoản thành công”

Trang 20

Luồng sự kiện phụ 2a.Người dùng nhập sai mật khẩu lúc này sẽ hiện thôngbáo”Thông tin tài khoản không chính xác”

Người dùng thoát khỏi màn hình sửa bài viết Use case sửa bàiviết kết thúc.

Bảng 2-9 Đặc tả usecase sửa bài viết

2.2.2.7.Use-case bình luận bài viết

Tên Use-case Bình luận bài viết

Mô tả Use-case Người dùng bình luận bài viết

Kích hoạt (Trigger) Người dùng bình luận vào 1 bài viết ở 1 bài viết được đăng ởdiễn đàng

Người dùng đã đăng nhập vào tài khoản của họ và đã tìm thấybài viết mà họ muốn bình luận

Hậu điều kiện Bình luận mới đã được thêm vào bài viết, và diễn đàn hiển thịthông báo cho người dùng rằng bình luận đã được đăng thànhcông

Trang 21

Luồng sự kiện chính 1 Tìm và xem bài viết mà họ muốn bình luận.2 Nhấn vào nút "Bình luận" bên dưới bài đăng.3 Nhập nội dung bình luận

4 Click vào nút đăng kí5 Nhấn nút "Gửi".

Luồng sự kiện phụ 3a Nếu bình luận không hợp lệ (ví dụ: chứa nội dung viphạm quy tắc diễn đàn), hệ thống sẽ hiển thị thông báo lỗi vàyêu cầu người dùng sửa nội dung trước khi đăng bình luận.

Không có

Bảng 2-10 Đặc tả usecase bình luận bài viết

2.2.2.8.Use-case xem bình luận bài viết đã đăng

Tên Use-case Xem bình luận đã đăng

Mô tả Use-case Người dùng xem bình luận đã đăng

Kích hoạt (Trigger) Người dùng xem danh sách các bình luận mà họ đã đăng trongbài viết hoặc trong phần cá nhân của họ

Use-case liên quan Sửa hoặc xóa bình luận.

Trang 22

Người dùng đã đăng nhập vào tài khoản của họ.

Hậu điều kiện Người dùng có thể xem danh sách các bình luận đã đăng, và họcó thể tìm hiểu về hoạt động của mình trên diễn đàn

Luồng sự kiện chính 1 Truy cập vào phần "Bình luận của tôi" hoặc "Hoạt độngcủa tôi".

2 Xem danh sách các bình luận đã đăng và bài viết màchúng được đăng.

Luồng sự kiện phụ 2a Nếu có thay đổi trong trạng thái bài viết hoặc bình luận(ví dụ: bài viết bị xóa hoặc bình luận bị từ chối), hệ thốngcập nhật danh sách bình luận một cách tương ứng.

Không có

Bảng 2-11 Đặc tả usecase xem bình luận bài viết đã đăng

2.2.2.9.Use-case Sửa hoặc xóa bình luận của mình

Tên Use-case Sửa/xóa bình luận

Mô tả Use-case Người dùng xửa hoặc xóa bình luận đã đăng

Kích hoạt (Trigger) Người dùng sửa hoặc xóa bình luận mà họ đã đăng nếu họ muốnchỉnh sửa hoặc gỡ bỏ chúng.

Trang 23

Người dùng đã đăng nhập vào tài khoản của họ.

Hậu điều kiện Sửa: Bình luận đã được chỉnh sửa và cập nhật thành công.

Xóa: Bình luận đã bị xóa khỏi bài viết và không còn hiển thịnữa.

Luồng sự kiện chính 1 Tìm và xem bình luận mà họ muốn sửa hoặc xóa2 Chọn tùy chọn "Sửa" hoặc "Xóa" gần bình luận.

3 Nếu chọn "Sửa," chỉnh sửa nội dung và lưu lại Nếu chọn"Xóa," xác nhận hành động xóa.

Luồng sự kiện phụ 2a Nếu bình luận đã bị xóa, hệ thống sẽ cung cấp thông báoxác nhận xóa và bình luận đã bị xóa khỏi bài viết.

Không có

Bảng 2-12 Đặc tả usecase sửa hoặc xóa bình luận của mình2.2.2.10 Use-case Thông báo về các bình luận mới

Tên Use-case Thông báo về các bình luận mới

Mô tả Use-case Người dùng nhận được thông báo về các bình luận mới

Kích hoạt (Trigger) Người dùng nhận thông báo khi có bình luận mới trên bài viết

Trang 24

mà họ đã tham gia

Người dùng đã đăng nhập vào tài khoản của họ và đã chọn tùychọn "Theo dõi" hoặc "Bình luận" trên bài viết mà họ muốnnhận thông báo.

Hậu điều kiện Người dùng đã nhận được thông báo về bình luận mới, và họ cóthể truy cập để xem bình luận mới.

Luồng sự kiện chính 1 Hệ thống gửi thông báo ngay lập tức khi có bình luậnmới

2 Thông báo có thể xuất hiện dưới dạng cửa sổ bật lên,thông báo trình duyệt, hoặc thông báo điện thoại di động.

Luồng sự kiện phụ 1a Người dùng có thể tùy chỉnh cài đặt thông báo trong phầncài đặt tài khoản Họ có thể chọn loại thông báo (real-time,tổng hợp), loại nội dung (bài viết, hình ảnh, video), hoặcthiết lập khung giờ nhận thông báo.

Không có

Bảng 2-13 Đặc tả usecase thông báo về các bình luận mới