Báo cáo bài tập lớn về Thiết kế website hỗ trợ học lập trình môn Công nghệ phần mềm | Trường Đại học Thủy Lợi

lOMoAR cPSD| 45734214
TRƯỜNG ĐẠI HỌC THỦY LỢI
KHOA CÔNG NGHỆ THÔNG TIN
BÁO CÁO BÀI TẬP LỚN MÔN HỌC
CÔNG NGHỆ PHẦN MỀM Đề tài:
Website hỗ trợ học lập trình
Nhóm sinh viên thực hiện: Nhóm 1
Thành viên nhóm:
1. Nguyễn Hồng Phúc - MSV: 2351170611
2. Nguyễn Hải Ninh - MSV: 2351170609
3. Ngô Quang Tùng - MSV: 2351170631
4. Ngô Đức Nam Khánh - MSV: 235106452
5. Hoàng Tùng - MSV: 2351170630
6. Cao Thái Tuấn - MSV: 2351170627
7. Đào Thị Yến - MSV: 2351170636
8. Đào Hà Thu - MSV: 2351170623
9. Lương Thị Thu Trang - MSV: 1651061144
Giảng viên hướng dẫn: Nguyễn Thị Thu Hương
Hà Nội, tháng 10 năm 2023 NHIỆM VỤ 4/4: SPRINT 2/2
I. Tài liệu đặc tả yêu cầu phần mềm
1.1 Biểu đồ Phân rã chức năng (FDD) lOMoAR cPSD| 45734214
1.2 Biểu đồ Luồng dữ liệu (DFD) 1.2.1 DFD Thêm tài khoản 1.2.2 DFD Xoá tài khoản lOMoAR cPSD| 45734214 1.2.3 DFD Thêm bài tập 1.2.4 DFD Xoá bài tập
1.2.5 DFD Nhận thông báo bài tập mới
1.2.6 DFD Xếp hạng theo số bài đã làm lOMoAR cPSD| 45734214 1.2.7 DFD Thêm bài đăng 1.2.8 DFD Xem bài đăng 1.2.9 DFD Xoá bài đăng 1.2.10 DFD Bình luận lOMoAR cPSD| 45734214 1.2.11 DFD Xoá bình luận
1.3 Sơ đồ Use case tổng quát
1.4 Miêu tả chi tiết các Use cases 1.4.1 Use case Thêm tài khoản Use Case ID 01
Use Case Name Thêm tài khoản Actor Quản trị viên lOMoAR cPSD| 45734214 Description
Chức năng Thêm tài khoản cho phép quản trị viên có thể
thêm tài khoản của sinh viên hoặc giảng viên trực tiếp trên web Trigger
Chức năng này được sử dụng khi quản trị viên điền thông
tin của người dùng và ấn “Submit” Pre-conditions
Quản trị viên truy cập vào website Post conditions
Tài khoản được thêm vào hệ thống Flow of Events
1. Quản trị viên truy cập vào website
2. Hệ thống hiển thị giao diện dành cho quản trị viên
3.Click vào “Account Management”
4.Giao diện chuyển sang trang quản lý tài khoản 5.
Tại phần “Add Account” quản trị viên điền thông tin
của người dùng gồm tên đăng nhập, mật khẩu, tên, vai trò và lớp 6.
Sau khi điền xong click vào “Submit”
7.Nếu thông tin thiếu hệ thống sẽ hiển thị thông báo tại ô trống còn thiếu
8.Nếu thông tin hợp lệ hệ thống cập nhật tài khoản vào dữ liệu của hệ thống
1.4.2 Use case Xóa tài khoản Use Case ID 02
Use Case Name Xóa tài khoản Actor Quản trị viên Description
Chức năng xóa tài khoản cho phép quản trị viên xóa tài khoản khỏi hệ thống Trigger
Chức năng này được sử dụng khi quản trị viên click vào
“Delete” ở trong phần “Actions” của người dùng Pre-conditions
Quản trị viên truy cập vào website Post conditions
Tài khoản được xóa khỏi hệ thống lOMoAR cPSD| 45734214 Flow of Events
1. Quản trị viên truy cập vào website
2. Hệ thống hiển thị giao diện dành cho quản trị viên
3.Click vào “Account Management”
4.Giao diện chuyển sang trang quản lý tài khoản
5.Phía dưới phần thêm tài khoản sẽ là phần xóa tài khoản
6. Quản trị viên click vào “Delete” trong phần “Actions”
7.Hệ thống cập nhật dữ liệu mới
1.4.3 Use case Thêm bài tập Use Case ID 03
Use Case Name Thêm bài tập Actor Quản trị viên Description
Chức năng Thêm bài tập cho phép quản trị viên có thể
thêm bài tập chung hoặc theo từng lớp ngay trên website Trigger
Chức năng này được sử dụng khi quản trị viên click vào “Submit” Pre-conditions
Quản trị viên truy cập vào website
Lớp học (nếu áp dụng) đã được thiết lập trước đó Post conditions
Bài tập mới đã được thêm thành công vào hệ thống và sinh
viên nhận được thông báo nếu bài tập đó được thêm vào lớp học
Sinh viên có thể xem và làm bài tập dựa trên thông tin quản trị viên cung cấp Flow of Events
1. Quản trị viên truy cập vào website
2. Click vào “Add Assignments” lOMoAR cPSD| 45734214 3.
Giao diện chuyển sang phần quản lý bài tập 4.
Tại phần thêm bài tập quản trị viên thêm tiêu đề của
bài tập ở phần “Enter topic title”, thêm nội dung của bài
tập ở phần “Editor”,lựa chọn đó là bài tập chung hay bài
tập riêng ở phần “Chọn lớp”, chọn chủ đề cho bài tập ở
phần “Select a topic”, chọn độ khó cho bài tập ở phần
“Select Difficulty”. Chọn ngôn ngữ lập trình của bài tập
bằng cách click vào “Select language” và chọn ngôn ngữ
mình muốn thêm, mỗi ngôn ngữ thì cần điền đầy đủ thông
tin trong phần “Test Case” và “Template” 5.
Sau khi điền xong click vào “Submit” 6.
Nếu thông tin của bài tập hợp lệ thì hệ thống thêm bài tập vào dữ liệu
1.4.4 Use case Xóa bài tập Use Case ID 04 Use Case Name Xóa bài tập Actor Quản trị viên Description
Chức năng Xóa bài tập cho phép quản trị viên có thể xóa
bài tập khỏi hệ thống nếu bài tập đó không còn cần thiết
hoặc cần chỉnh sửa. Việc xóa bài tập giúp hệ thống duy trì
sự ngăn nắp và tránh nhầm lẫn cho sinh viên. Trigger
Chức năng này được sử dụng khi quản trị viên Pre-conditions
Quản trị viên truy cập vào website
Bài tập tồn tại trong hệ thống và chưa bị xóa trước đó. Post conditions
Bài tập đã bị xóa thành công khỏi hệ thống. Flow of Events 1.
Quản trị viên truy cập vào website 2.
Click vào “Add Assignments” 3.
Giao diện chuyển sang phần quản lý bài tập 4.
Tại dưới phần thêm bài tập sẽ hiển thị những bài tập hiện có trong hệ thống
5.Click “Delete” bên cạnh bài tập
6.Hệ thống tiếp nhận yêu cầu và xóa bài tập và tất cả
những gì liên quan đến nó ra khỏi dữ liệu lOMoAR cPSD| 45734214
1.4.5 Use case Nhận thông báo bài tập mới Use Case ID 05
Use Case Name Nhận thông báo bài tập mới Actor Sinh viên Description
Chức năng Nhận thông báo bài tập mới cho phép sinh viên
nhận thông báo khi có bài tập mới được thêm Trigger
Chức năng này được sử dụng khi sinh viên click vào hình cái chuông bên cạnh avt Pre-conditions
Sinh viên truy cập vào website Post conditions
Sinh viên có thông báo mỗi khi có bài tập mới Flow of Events 1.
Sinh viên truy cập vào website 2.
Tại giao diện chính của trang web click vào biểu
tượng cái chuông bên cạnh avt 3.
Hệ thống hiển thị ra bảng thông báo các bài tập mới
được thêm vào lớp hoặc được thêm vào bài tập chung
1.4.6 Use case Xếp hạng theo số bài đã làm Use Case ID 06
Use Case Name Xếp hạng theo số bài đã làm Actor Sinh viên Description
Hệ thống xếp hạng sinh viên dựa trên số lượng bài tập đã
hoàn thành để tạo sự cạnh tranh và động lực học tập. Trigger
Bảng xếp hạng sẽ hiện ra khi click vào “Contest” Pre-conditions
Sinh viên truy cập vào website Post conditions
Sinh viên đã xem được bảng xếp hạng và có thể nắm bắt
tình hình học tập hoặc sử dụng thông tin để cải thiện. lOMoAR cPSD| 45734214 Flow of Events 1.
Sinh viên truy cập vào website 2.
Tại giao diện chính click vào “Contest” 3.
Hệ thống truy xuất dữ liệu từ cơ sở dữ liệu, tính toán
xếp hạng dựa trên số lượng bài tập đã hoàn thành của từng sinh viên. 4.
Hệ thống hiển thị bảng xếp hạng với danh sách sinh
viêntheo thứ tự giảm dần của số bài đã hoàn thành
1.4.7 Use case Thêm bài đăng Use Case ID 07
Use Case Name Thêm bài đăng Actor Sinh viên Description
Chức năng Thêm bài đăng cho phép sinh viên đăng bài
trên diễn đàn để thảo luận với các bạn khác Trigger
Chức năng này được sử dụng khi người dùng click vào ô “New +” Pre-conditions
Sinh viên truy cập vào website Post conditions
Bài đăng của sinh viên đã được đăng trên diễn đàn Flow of Events
1. Sinh viên truy cập vào website
2. Tại giao diện chính của trang web click vào “Discuss”
3. Hệ thống chuyển giao diện sang trang diễn đàn
4. Click vào ô “New +” để thêm bài đăng
5.Một bảng để thêm bài đăng sẽ được hiện lên
6. Click vào ô “Close” nếu bạn muốn tắt bảng thêm bài đăng
7.Sinh viên nhập tiêu đề vào phần “Enter topic here…”
8.Điền nội dung của bài đăng ở phần “Start writing here…”
9.Bạn có thể lựa chọn các tùy chọn với biểu tượng chấm
đầu dòng để mỗi khi xuống dòng sẽ tự động có dấu chấm, lOMoAR cPSD| 45734214
biểu tượng số đầu dòng để mỗi khi xuống dòng sẽ tự động
điền số theo thứ tự tăng dần hoặc click vào biểu tượng liên
kết để đính kèm file của mình và click vào biểu tượng hình
ảnh để thêm hình ảnh minh họa của mình
10.Sau khi viết xong nội dung click vào “Post” để đăng bài đăng của mình
11.Hệ thống kiểm tra phần tiêu đề và nội dung của bạn có trống hay không
12.Nếu tiêu đề trống thì một thông báo sẽ hiển thị trên
thanh điền tiêu đề “Title should not be blank.”, nếu nội dung
trống sẽ hiển thị ở phần nội dung “Fill in the blank”
13.Nếu không có lỗi sai thì bài đăng của bạn sẽ được đăng tải lên diễn đàn
1.4.8 Use case Xem bài đăng Use Case ID 08 Use Case Name Xem bài đăng Actor Sinh viên Description
Chức năng Xem bài đăng cho phép sinh viên xem nội dung
của bài đăng trên diễn đàn Trigger
Chức năng này được sử dụng khi sinh viên click vào tiêu đề của bài đăng Pre-conditions
Sinh viên truy cập vào website Post conditions
Nội dung của bài đăng sẽ được hiển thị Flow of Events 1.
Sinh viên truy cập vào website 2.
Tại giao diện chính của trang web click vào “Discuss” 3.
Hệ thống chuyển giao diện sang trang diễn đàn 4.
Sinh viên click vào tiêu đề của bài đăng mình muốn
xem5.Hệ thống tiếp nhận yêu cầu và hiển thị ra nội dung bài đăng lOMoAR cPSD| 45734214
1.4.9 Use case Xóa bài đăng Use Case ID 09
Use Case Name Xóa bài đăng Actor Sinh viên Description
Chức năng Xóa bài đăng cho phép sinh viên xóa bài đăng mà mình đã đăng tải Trigger
Chức năng này được sử dụng khi sinh viên click vào biểu
tượng hình thùng rác trong bài đăng của mình Pre-conditions
Sinh viên truy cập vào website Post conditions
Bài đăng của sinh viên đã được xóa khỏi diễn đàn Flow of Events
1. Sinh viên truy cập vào website
2. Tại giao diện chính của trang web click vào “Discuss”
3. Hệ thống chuyển giao diện sang trang diễn đàn
4. Sinh viên click vào tiêu đề của bài đăng mình muốn xóa
5. Hệ thống hiển thị ra bài đăng
6.Click vào biểu tượng thùng rác
7.Hệ thống hiển thị ra bảng thông báo đảm bảo bạn chắc chắn muốn xóa bài
8.Nếu bạn chọn “Yes” hệ thống tiếp nhận yêu cầu và xóa
bài đăng của bạn trên diễn đàn
9.Nếu chọn “No” hệ thống tiếp nhận yêu cầu và hủy bỏ việc xóa bài đăng 1.4.10 Use case Bình luận Use Case ID 010 Use Case Name Bình luận Actor Sinh viên Description
Chức năng bình luận cho phép sinh viên thảo luận trong bài đăng lOMoAR cPSD| 45734214 Trigger
Chức năng này được sử dụng khi sinh viên nhập nội dung
bình luận trong bài đăng và click vào “Post” Pre-conditions
Sinh viên truy cập vào website Post conditions
Bình luận của sinh viên đã được đăng tải Flow of Events
1. Sinh viên truy cập vào website
2. Tại giao diện chính của trang web click vào “Discuss”
3. Hệ thống chuyển giao diện sang trang diễn đàn
4. Sinh viên click vào tiêu đề của bài đăng mình muốn xem
5. Hệ thống hiển thị nội dung bài đăng
6.Sinh viên cuộn xuống dưới sẽ có phần “Comments”
7.Sinh viên nhập nội dung mình muốn bình luận ở phần “Type comment here”
8.Sinh viên click vào “Post” để đăng tải bình luận của mình
1.4.11 Use case Xóa bình luận Use Case ID 011
Use Case Name Xóa bình luận Actor Sinh viên Description
Chức năng Xóa bình luận cho phép sinh viên xóa đi bình
luận của mình trong bài đăng Trigger
Chức năng này được sử dụng khi sinh viên click vào biểu
tượng hình thùng rác bên cạnh bình luận của mình Pre-conditions
Sinh viên truy cập vào website Post conditions
Bình luận của sinh viên sẽ được xóa khỏi bài đăng Flow of Events
1. Sinh viên truy cập vào website
2. Sinh viên chọn bài đăng có bình luận của mình
3. Tại bình luận của mình sinh viên click vào biểu tượng lOMoAR cPSD| 45734214 hình thùng rác 4.
Hệ thống sẽ xác nhận lại liệu sinh viên có muốn xóa không 5.
Sinh viên click vào “Yes” 6.
Hệ thống tiếp nhận yêu cầu và xóa bình luận của sinh viên
7.Nếu click vào “No” hệ thống tiếp nhận yêu cầu và hủy bỏ việc xóa bình luận
1.5 Sơ đồ Trình tự (SD) 1.5.1 SD Thêm tài khoản 1.5.2 SD Xoá tài khoản lOMoAR cPSD| 45734214 1.5.3 SD Thêm bài tập 1.5.4 SD Xóa bài tập
1.5.5 SD Nhận thông báo bài tập mới lOMoAR cPSD| 45734214
1.5.6 SD Nhận thông báo bài tập mới 1.5.7 SD Thêm bài đăng 1.5.8 SD Xem bài đăng lOMoAR cPSD| 45734214 1.5.9 SD Xoá bài đăng 1.5.10 SD Bình luận 1.5.10 SD Xoá bình luận lOMoAR cPSD| 45734214
1.6 Biểu đồ quan hệ thực thể (ERD) lOMoAR cPSD| 45734214
II. Thiết kế phần mềm
1. Thiết kế Kiến trúc
1.1 Mô hình MVC (Model - View - Controller) 1.2 Giải thích Mô hình
- Model: Tượng trưng cho dữ liệu của chương trình phần mềm.
- View: Các thành phần giao diện người dùng, có nhiệm vụ hiển thị thông
tin, tương tác với người dùng.
- Controller: Bộ điều chỉnh, xử lý yêu cầu, quản lý trao đổi giữa dữ liệu và
các nguyên tắc nghề nghiệp trong các thao tác liên quan đến mô hình. - Cách thức hoạt động:
1.3 Cách thức hoạt động:
- Sinh viên hoặc Giảng viên truy cập Web gọi yêu cầu xử lý (Request) như
yêu cầu tạo,đăng nhập tài khoản,cập nhật,thay đổi thông tin, tìm kiếm
nộp bài, giao …sẽ được đưa tới Controller.
- Controller sẽ nhận yêu cầu(Request) của Sinh viên hoặc Giảng viên từ đó
giao tiếp với Model để xác định Model tương ứng và dữ liệu trong cơ sở
dữ liệu để tạo ra và đón nhận các giá trị nhập từ Request để lưu trữ và xử lý.
- Cuối cùng sau khi xử lý yêu cầu xong thì Controller gửi dữ liệu cho View
và hiển thị thông tin cho Sinh viên hoặc Giảng viên trên trình duyệt.
2. Thiết kế hướng đối tượng 2.1 Mô hình hướng đối tượng: lOMoAR cPSD| 45734214