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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (864.83 KB, 43 trang )

Trang 1<div class="page_container" data-page="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

</div>Trang 2<div class="page_container" data-page="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 q 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ừ q 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

</div>Trang 3<div class="page_container" data-page="3">

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

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

</div>Trang 4<div class="page_container" data-page="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

</div>Trang 5<div class="page_container" data-page="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

</div>Trang 6<div class="page_container" data-page="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

</div>Trang 7<div class="page_container" data-page="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.

</div>Trang 9<div class="page_container" data-page="9">

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

2.1.Sơ đồ usecase

Hình 2-1 Sơ đồ usecase

</div>Trang 10<div class="page_container" data-page="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 thốt khỏi màn hình đăng nhập. Use-case đăng nhập dừng

</div>Trang 11<div class="page_container" data-page="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

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 “Đặ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”

</div>Trang 12<div class="page_container" data-page="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ệ

Thốt khỏi màn hình Qn 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

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

</div>Trang 13<div class="page_container" data-page="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”

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ệ

Thố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

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

</div>Trang 14<div class="page_container" data-page="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ó

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

Thố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

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.

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

</div>Trang 15<div class="page_container" data-page="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

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

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

Actors Người dùng

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

</div>Trang 16<div class="page_container" data-page="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ó.

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

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ủ

Actors Người dùng

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

</div>Trang 17<div class="page_container" data-page="17">

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

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”

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

Người dùng thố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

</div>Trang 18<div class="page_container" data-page="18">

Actors Người dùng

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

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.

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

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

</div>Trang 19<div class="page_container" data-page="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

Actors Người dùng

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

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”

</div>Trang 20<div class="page_container" data-page="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”

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ệ

Người dùng thố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

Actors Người dùng

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

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

</div>Trang 21<div class="page_container" data-page="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.

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

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ọ

Actors Người dùng

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

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

</div>Trang 22<div class="page_container" data-page="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.

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

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.

Actors Người dùng

</div>Trang 23<div class="page_container" data-page="23">

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

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.

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

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

</div>Trang 24<div class="page_container" data-page="24">

mà họ đã tham gia..

Actors Người dùng

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

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.

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

Khơng có

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

</div>