4.2. Use Case
4.2.1. Các tác nhân của hệ thống
STT Actor Ý nghĩa, nhiệm vụ của tác nhân
1 Tác nhân Admin là tác nhân giữ vai trị chính của hệ thống website, là người điều hành, quản lý và theo dõi mọi hoạt động của hệ thống.
Tác nhân Admin có thể thực hiện được tất cả các chức năng có trong hệ thống của quản trị.
2
Khách hàng truy cập vào website, xem các nội dung của website.
Khách hàng truy cập có thể thực hiện tìm kiếm, xem, chọn, nghe các bài hát trên website.
Khách hàng được hỗ trợ trực tuyến và đóng góp ý kiến về website cũng như sản phẩm.
Bảng 4.1. Danh sách tác nhân
27
4.2.3. Đặc tả Use Case
4.2.3.1. UC đăng ký
Use case name Đăng ký
Scenario Đăng nhập vào hệ bằng tên đăng nhập và mật khẩu Triggering
Event
Người dùng nhập tên đăng nhập và mật khẩu sau đó nhấn nút submit
Brief
Description
Sau khi đăng ký tài khoản, lúc đó người dùng mới có thể đăng nhập vào Website và thực hiện được các chức năng.
Actors Admin, User
Pre-conditions Tài khoản người dùng đã được tạo Post-conditions Người dùng đã đăng nhập vào hệ thống
Flow of events
1. Khách xem chọn mục đăng ký thành viên. 2. Form đăng ký thành viên hiển thị.
3. Khách xem nhập thông tin cá nhân vào form đăng ký. 4. Nhấn nút Đăng ký.
5. Hệ thống thơng báo kết quả q trình nhập thơng tin cá nhân. Nếu thơng tin nhập khơng chính xác thì thực hiện luồng nhánh A1. Nếu nhập chính xác thì thực hiện bước 6.
6. Hệ thống cập nhật thông tin của khách xem vào danh sách thành viên.
7. UC kết thúc.
Bảng 4.2. UC đăng ký
4.2.3.2. UC đăng nhập
Use case name Đăng nhập
Scenario Đăng nhập vào hệ bằng tên đăng nhập và mật khẩu
Triggering Event Người dùng nhập tên đăng nhập và mật khẩu sau đó nhấn nút submit
28 Brief Description
Khi người dùng submit tên đăng nhập và mật khẩu, hệ thống sẽ kiểm tra sự chính xác sau đó chuyển người dùng đến màn hình chính
Actors Admin/User
Pre-conditions Tài khoản người dùng đã được tạo Post-conditions Người dùng đã đăng nhập vào hệ thống
Flow of events
1. Hệ thống yêu cầu nhập tên đăng nhập và mật khẩu 2. Người dùng nhập tên đăng nhập và mật khẩu và click
nút đăng nhập
3. Hệ thống kiểm tra thông tin và thông báo thành công/thất bại. Nếu thành cơng thì hệ thống dựa trên thông tin đăng nhập sẽ phân quyền. Nếu thất bại, hệ thống hiện thông báo cho người dùng và yêu cầu đăng nhập lại.
Exception Conditions
Nếu tên đăng nhập và mật khẩu không hợp lệ, hệ thống sẽ yêu cầu người dùng nhập lại
Bảng 4.3. UC đăng nhập
4.2.3.3. UC xem thông tin
Use case name Xem thông tin các nhân
Scenario Đăng nhập vào hệ bằng tên đăng nhập và mật khẩu Triggering Event Người dùng click vào avatar cá nhân
Brief Description Khi người dùng đã click vào avatar thì chuyển sang trang cá nhân của người dùng
Actors Admin/User
Pre-conditions Người dùng đã đăng nhập vào hệ thống Post-conditions Người dùng đã đăng nhập vào hệ thống
Flow of events
1. Thành viên chọn mục Xem thông tin cá nhân
2. Form xem thông tin thành viên xuất hiện, hệ thống hiển thị thông tin cá nhân của thành viên
29 3. Hệ thống cung cấp liên kết để thành viên có thể sửa đổi
thơng tin cá nhân 4. UC kết thúc Exception
Conditions
Nếu tên đăng nhập và mật khẩu không hợp lệ, hệ thống sẽ yêu cầu người dùng nhập lại
Bảng 4.4. UC xem thông tin
4.2.3.4. UC sửa thông tin cá nhân
Use case name Sửa thông tin các nhân
Scenario Đăng nhập vào hệ bằng tên đăng nhập và mật khẩu
Triggering Event Người dùng nhập tên đăng nhập và mật khẩu sau đó nhấn nút submit
Brief Description Khi người dùng đã click vào avatar thì chuyển sang trang cá nhân của người dùng và chọn các phần cần sửa đổi
Actors Admin/User
Pre-conditions Người dùng đã đăng nhập vào hệ thống Post-conditions Người dùng đã đăng nhập vào hệ thống
Flow of events
1. Thành viên chọn chức năng sửa thông tin cá nhân. 2. Hệ thống hiển thị form sửa thông tin với các thông tin
cũ của thành viên hiện tại
3. Thành viên nhập các thông tin mới 4. Nhấn nút lưu thông tin
5. Nếu việc cập nhật thành cơng thì thực hiện bước 6. Nếu sai thực hiện luồng sự kiện rẽ nhánh A1
6. Lưu thông tin 7. UC kết thúc Exception
Conditions
Nếu tên đăng nhập và mật khẩu không hợp lệ, hệ thống sẽ yêu cầu người dùng nhập lại
Bảng 4.5. UC Sửa thông tin
30 Use case name Nghe nhạc
Scenario Đăng nhập vào hệ bằng tên đăng nhập và mật khẩu Triggering Event Người dùng click nút play vào các bài nhạc và các album Brief Description Khi người dùng click nút play thì bài hát bắt đầu phát và hiển
thị lên màn hình Actors Admin/User
Pre-conditions Người dùng đã đăng nhập vào hệ thống Post-conditions Người dùng đã đăng nhập vào hệ thống
Flow of events
1. Thành viên chọn mục Khám phá/Cá nhân
2. Danh sách các bài hát và album xuất hiện, hệ thống hiển thị thông tin.
3. User có thể play các bài hát nghe tuỳ thích. 4. UC kết thúc
Exception Conditions
Nếu tên đăng nhập và mật khẩu không hợp lệ, hệ thống sẽ yêu cầu người dùng nhập lại
Bảng 4.6. UC nghe nhạc
4.2.3.6. UC tạo playlist
Use case name Tạo playlist
Scenario Đăng nhập vào hệ bằng tên đăng nhập và mật khẩu Triggering
Event Người dùng click vào button tạo playlist Brief
Description
Khi người dùng click vào button tạo playlist thì sẽ hiển thị lên màn hình yêu cầu nhập tên playlist
Actors Admin/User
Pre-conditions Người dùng đã đăng nhập vào hệ thống Post-conditions Người dùng đã đăng nhập vào hệ thống
Flow of events
1. Thành viên chọn chức năng tạo playlist 2. Hệ thống hiển thị playlist mới tạo
3. User nhập các bài hát để thêm vào playlist 4. Nhấn nút lưu thông tin
31 5. UC kết thúc
Exception Conditions
Nếu tên đăng nhập và mật khẩu không hợp lệ, hệ thống sẽ yêu cầu người dùng nhập lại
Bảng 4.7. UC tạo playlist
4.2.3.7. UC Download
Use case name Download
Scenario Đăng nhập vào hệ bằng tên đăng nhập và mật khẩu Triggering Event Người dùng click vào icon download ở các bài nhạc
Brief Description Khi người dùng click vào icon download thì sẽ popup lên nơi lưu trữ file nhạc
Actors Admin/User
Pre-conditions Người dùng đã đăng nhập vào hệ thống Post-conditions Người dùng đã đăng nhập vào hệ thống
Flow of events
1. Thành viên chọn vào phần thông tin của bài hát
2. Hệ thống hiển thị các chức năng muốn thực hiện của bài hát
3. Thành viên nhấn nút tải xuống 4. Hệ thống tải file mp3 của bài hát về
5. Nếu việc tải thành cơng thì thực hiện bước 6. Nếu sai thực hiện luồng sự kiện rẽ nhánh A1
6. UC kết thúc Exception
Conditions
Nếu tên đăng nhập và mật khẩu không hợp lệ, hệ thống sẽ yêu cầu người dùng nhập lại
Bảng 4.8. UC download
4.2.3.8. UC Upload
Use case name Upload
Scenario Đăng nhập vào hệ bằng tên đăng nhập và mật khẩu Triggering Event Người dùng click vào icon upload
32 Brief Description Khi người dùng nhấn vào icon upload thì mở lên các file cần
tải ở nơi lưu trữ của người dùng Actors Admin/User
Pre-conditions Người dùng đã đăng nhập vào hệ thống Post-conditions Người dùng đã đăng nhập vào hệ thống
Flow of events
1. Thành viên chọn vào phần tải lên trong cá nhân 2. Thành viên nhấn nút tải lên
3. Hệ thống hiển thị lên local của người dùng 4. Chọn file mp3 để tải lên và nhấn xác nhận.
5. Nếu việc tải thành cơng thì thực hiện bước 6. Nếu sai thực hiện luồng sự kiện rẽ nhánh A1
6. UC kết thúc
Exception Conditions
Nếu tên đăng nhập và mật khẩu không hợp lệ, hệ thống sẽ yêu cầu người dùng nhập lại
Bảng 4.9. UC upload
4.3. Activity diagram
33 Hình 4.2. Activity đăng ký 4.3.2. Đăng nhập Hình 4.3. Activity đăng nhập 4.3.3. Tìm kiếm Hình 4.4 Activity tìm kiếm
35
4.3.4. Xem thơng tin cá nhân
Hình 4.5. Activity xem thơng tin cá nhân
4.3.5. Sửa thông tin cá nhân
36
4.3.6. Upload nhạc
Hình 4.7. Activity upload nhạc
4.3.7. Download nhạc
37
4.3.8. Tạo playlist
Hình 4.9. Activity tạo playlist
4.4. Sequence diagram
4.4.1. Đăng ký
38
4.4.2. Đăng nhập
Hình 4.11. Sequence đăng nhập
4.4.3. Tìm kiếm
39
4.4.4. Xem thơng tin cá nhân
Hình 4.13. Sequence xem thơng tin cá nhân
4.4.5. Sửa thông tin cá nhân
40
4.4.6. Upload nhạc
Hình 4.15. Sequence upload nhạc
4.4.7. Download nhạc
41
4.4.8. Tạo playlist
Hình 4.17. Sequence tạo playlist
4.5. Class diagram
42
4.6. ER diagram
Hình 4.18. ERD
4.7. Domain model
43
4.8. Workflow
44
Chương 5:
THIẾT KẾ KIẾN TRÚC
5.1. Kiến trúc hệ thống
- Sau giai đoạn phân tích đến giai đoạn thiết kế, xây dựng hệ thống thành một giải pháp thực thi. Mơ hình sẽ được thiết kế chi tiết và xem xét đến các vấn đề kỹ thuật. Các lớp giải quyết vấn đề cơ bản như: cơ sở dữ liệu (database), giao diện người dùng (user interface), ... Một số lớp mới có thể được phát hiện bổ sung.
- Để xây dựng website, chúng em xây dựng chương trình dựa trên mơ hình Client – Server.
- Hai lớp Client Server có thể chạy trên hai máy tính riêng biệt hoặc trên cùng thiết bị. 5.2. Mô tả các thành phần trong hệ thống STT Thành phần Diễn giải 1 Client Giao diện
Hiển thị các thành phần giao diện để tương tác với người dùng như tiếp nhận thơng tin, thơng báo lỗi, …
Nó gồm các thành phần giao diện (page) và thực hiện các công việc như nhập liệu, hiển thị dữ liệu, gửi yêu cầu đến phần xử lý
Xử lý Bao gồm các lớp đối tượng dựa trên sơ đồ các lớp đối tượng chính của hệ thống đã đưa ra ở phần phân tích. Đây là nơi đáp ứng các yêu cầu thao tác dữ liệu của GUI, xử lý chính nguồn dữ liệu từ người dùng trước khi lưu xuống CSDL.
Đây còn là nơi kiểm tra các ràng buộc, tính tồn vẹn và hợp lệ dữ liệu, thực hiện tính tốn và xử lý các u cầu nghiệp vụ, trước khi trả kết quả về cho phần UI
45 2 Server Cơ sở
dữ liệu
Bao gồm các bảng, các ràng buộc, view cho lớp xử lý để thực hiện các chức năng truy xuất dữ liệu, thêm, xóa, cập nhật dữ liệu.
Bảng 5.1. Mô tả các thành phần
5.3. Mơ hình sử dụng
Hình 5.1. Kiến trúc hệ thống
Website bán hàng là ứng dụng web được thiết kế theo mơ hình 3 Tier, một kiến trúc kiểu Client-Server. Mục đích của thiết kế này là để tách tách các lớp riêng biệt, hoạt động riêng biệt, cải thiện khả năng bảo trì và tái sử dụng.
5.3.1. Presentation tier
Lớp giao diện, bao gồm các thành phần xử lý giao diện GUI, được người dùng nhìn thấy, lớp này bao gồm phần đầu và phần cuối của các yêu cầu và dữ liệu xử lý. Nhiệm vụ chính là hiển thị dữ liệu và nhận dữ liệu từ người dùng.
5.3.2. Logic tier
Lớp này sử dụng máy chủ ứng dụng và các xử lý logic nghiệp vụ, cung cấp chức năng cho ứng dụng để lưu và xử lý dữ liệu. Ví dụ, lớp này theo dõi và lưu các tùy chọn của người dùng khi người dùng đăng nhập vào trang web và mua hàng của họ. Lúc này, khách hàng đăng nhập vào trang web và được hiển thị phương thức vận chuyển đã chọn trước đó hoặc hàng hóa đã duyệt trước đó. Các loại thanh tốn do người dùng này thực hiện cũng có thể được lưu trong lớp nghiệp vụ và sau đó được sử dụng khi người dùng đăng nhập lại.
5.3.3. Data tier
Lớp cuối cùng để xử lý các yêu cầu dữ liệu cuối cùng, dữ liệu thu được ở lớp nghiệp vụ cũng có ở đây, có thể tìm kiếm, trích xuất, cập nhật. Lớp này là một hệ thống quản
46 lý cơ sở dữ liệu, cung cấp quyền truy cập cho người dùng vào dữ liệu ứng dụng. Lớp dữ liệu có thể được kết nối trực tiếp với cơ sở dữ liệu hoặc nó có thể gửi dữ liệu đến dịch vụ dữ liệu để xử lý chúng.
47 Chương 6: THỰC HIỆN 6.1. Màn hình chính: 6.1.1. Giao diện Hình 6.1. Màn hình home 6.1.2. Mơ tả
Màn hình Home là nơi hiển thị tổng quan của trang web. Người dùng có thể xem các bài hát nổi bật, các bài hát gợi ý muốn nghe, bài hát yêu thích, các đối tác âm nhạc.
6.2. Màn hình xếp hàng
6.2.1. Giao diện
Hình 6.2. Màn hình xếp hạng
48 Màn hình xếp hạng bao gồm các bài hát nổi bật, người nghe vào có thể nghe các bài hát yêu thích, tải về, thêm vào danh sách yêu thích
6.3. Màn hình radio
6.3.1. Giao diện
Hình 6.3. Màn hình radio nổi bật
6.3.2. Mơ tả
Màn hình radio này bao gồm các Radio nổi bật, postcast, radio nghe lại hoặc các tin tức của âm nhạc mới nhất.
6.4. Màn hình theo dõi
6.4.1. Giao diện
49
6.4.2. Mơ tả
Màn hình này hiển thị tất cả các danh sách, các tin tức về các nghệ sĩ, các bài hát, tin về nghệ sĩ đó, người dùng có thể nhấn vào để xem, nghe các bài hát của nghệ sĩ đó.
6.5. Màn hình cá nhân
6.5.1. Giao diện
Hình 6.5. Màn hình các bài hả u thích, playlist
6.5.2. Mơ tả
Màn hình này bao gồm các bài hát đã yêu thích, playlist, album, mv, nghệ sĩ, tải lên, người dùng có thể lựa chọn nghe từng bài hát hoặc phát tất cả các bài trong danh sách.
6.6. Màn hình thay đổi giao diện
6.6.1. Giao diện
50
6.6.2. Mơ tả
Màn hình này giúp người dùng có thể thay đổi hình nền của website nghe nhạc, có nhiều sự lựa chọn về giao diện như giao diện theo chủ đề, giao diện theo hình nghệ sĩ, giao diện màu tối, giao diện màu sáng.
6.7. Màn hình chi tiết bài hát
6.7.1. Giao diện
Hình 6.7. Màn hình play nhạc
6.7.2. Mơ tả
Màn hình này hiển thị thơng tin chi tiết của bài hát người dùng đang nghe. Tại đây:
- Nếu người dùng muốn dừng thì bấm nút pause.
- Nếu người dùng muốn nghe sang bài kế tiếp hoặc bài trước thì nhấn nút next left, right
- Nếu người dùng muốn lặp lại bài hát thì nhấn nút bên trái nút left.
- Người dùng muốn tua nhanh thì kéo thanh timeline và tăng giảm âm lượng thì kéo thanh loa.
51
KẾT LUẬN
7.1. Ưu điểm của đồ án:
- Giao diện đơn giản, người dùng dễ thao tác trên website. - Tốc độ phản hồi nhanh.
7.2. Hạn chế của đồ án:
- Tuy đã đáp ứng được nhu cầu cơ bản của đề tài đưa ra nhưng cịn rất nhiều thiếu sót, chưa hồn thiện các chức năng như đã đưa ra lúc ban đầu.
7.3. Hướng phát triển của đồ án:
- Mở rộng quy mô ứng dụng phần mềm.
- Cải thiện các chức năng đã được phát triển của phần mềm.
- Xây dựng thêm các chức năng mới, khuyến nghị, cũng như hoàn thiện các chức năng cũ.
- Tiếp tục nâng cao chất lượng của UI và UX.
- Hoàn thiện các chức năng chưa được phát triển như trong kế hoạch ban đầu.
7.4. Kết quả đạt được
- Các chức năng cơ bản như nghe nhạc theo bài hát, album, tải nhạc, yêu thích. - Làm quen các sơ đồ UML như usecase, class, object, … và thiết kế hệ thống
bằng thiết kế UML.
52
TÀI LIỆU THAM KHẢO
[1] Phan Trung Hiếu (2021), Bài giảng môn Công nghệ Web và Ứng dụng, Khoa CNPM, Trường ĐH. Công Nghệ Thông Tin.
[2] Thương Nguyễn, “Tất tần tật về jQuery- Các phương thức hay sử dụng”, [Online], Available: https://viblo.asia/p/tat-tan-tat-ve-jquery-cac-phuong-thuc-hay-su-dung- p1-Az45bz2z5xY.