Xây dựng WEBSITE nghe nhạc trực tuyến

Lập trình xử lý phần mềm với các chức năng sau: o Nghe nhạc theo bài hát, theo album, tải nhạc o Thêm bài hát yêu thích o Thay đổi background toàn website o Trang quản trị 4.. Xây dựng m

GIỚI THIỆU ĐỀ TÀI

Tên đề tài

XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN

Mô tả đề tài

TSMusic là một website nghe nhạc miễn phí xây dựng trên nền tảng Internet, cho phép người dùng nghe nhạc trực tuyến, đăng tải và chia sẻ các bài hát yêu thích một cách dễ dàng Nền tảng luôn cập nhật nhạc mới và các ca khúc hot nhất thị trường, đáp ứng nhu cầu giải trí và khám phá âm nhạc của người dùng Việt Vì mục tiêu mở rộng kinh doanh và nâng cao chất lượng dịch vụ, TSMusic tập trung đẩy mạnh quảng bá và phát triển mảng kinh doanh online, đồng thời xây dựng hệ sinh thái giới thiệu, nghe và đăng tải nhạc trực tuyến và có hỗ trợ khách hàng đầy đủ thông tin cần thiết Đây là giải pháp quản lý một nền tảng nghe nhạc trực tuyến tại Việt Nam với chi phí và mức đầu tư ở mức trung bình.

Lý do chọn đề tài

Ngày nay Internet ngày càng mở rộng và phổ biến, đặc biệt khi giới trẻ luôn mang theo smartphone để làm việc, lướt web và xem phim Nghe nhạc đã trở thành một phần không thể thiếu của cuộc sống, được thưởng thức khi đi làm, đi chơi, thư giãn hoặc để cập nhật các giai điệu mới từ thần tượng Việc trao đổi cảm nhận âm nhạc, chia sẻ trải nghiệm và đóng góp ý kiến trên các website giúp người nghe giao lưu và tạo nên cộng đồng âm nhạc sôi động Dựa trên khảo sát thực tế, tôi quyết định xây dựng một website nghe nhạc miễn phí nhằm đáp ứng nhu cầu thưởng thức âm nhạc của người dùng trên Internet.

Mục đích của website

- Các cơ quan xác định bản quyền

- Các bên cung cấp dịch vụ thứ ba

Xây dựng một website nghe nhạc trực tuyến đơn giản và thân thiện với người dùng, có giao diện màu sắc bắt mắt và dễ nhìn để người dùng phổ thông có thể trải nghiệm dễ dàng Nền tảng cho phép nghe nhạc trực tuyến, tải nhạc về thiết bị và xem các thông tin về xếp hạng cũng như cập nhật các ca sĩ và nhạc sĩ hot nhất hiện nay.

Kiểm tra các số liệu chỉ định rõ về:

- Không gian: trên nền tảng web

- Thời gian: hoạt động 24/24 (trừ một số thời điểm bảo trì trang web)

- Con người: Lập trình viên, Kiểm thử viên, Người dùng

Cách thức sử dụng ứng dụng được thiết kế hướng tới mọi đối tượng người dùng, không yêu cầu trình độ tin học Thiết kế cần đảm bảo giao diện trực quan, quy trình thao tác đơn giản và hướng dẫn rõ ràng để người dùng có thể tiếp cận và sử dụng dễ dàng ngay từ lần đầu, từ đó nâng cao trải nghiệm người dùng và sự hài lòng với sản phẩm.

- Sử dụng tập trung đối với quản trị viên

- Sử dụng phân tán đối với khách hàng – người dùng phổ thông: với các chức năng liên quan đến vấn đề nghe nhạc

Khách hàng: tất cả mọi người

Cách thức sử dụng sản phẩm: được sử dụng trên trình duyệt web, tất cả thiết bị có trình duyệt web đều có thể sử dụng,

Xác định các thành phần phi chức năng:

- Bố cục: dễ nhìn, dễ sử dụng vì ứng dụng cần tiếp cận mọi đối tượng, không yêu cầu trình độ tin học

- Bảo mật thông tin khách hàng: do việc giao dịch diễn ra trực tuyến => ưu tiên bảo mật thông tin cá nhân và thông tin tài khoản khách hàng

- Khả năng chịu tải giờ cao điểm: có thể xử lý đồng thời vài trăm nghìn đến vài triệu yêu cầu truy cập ứng dụng cùng thời điểm

- Khả năng mở rộng tốt: có thể mở rộng một cách dễ dàng để đáp ứng số lượng người dùng lớn

Đối tượng nguyên cứu

- Đối tượng nghiên cứu: các chức năng cần có của một website nghe nhạc như là playlist nhạc, tải nhạc…

- Khách thể nghiên cứu: các website nổi bật hiện nay như ZingMP3, NhacCuaTui, Spotify.

Phạm vi nghiên cứu

- Tất cả các nền tảng nghe nhạc trên Internet

- Lĩnh vực nghiên cứu: các website nghe nhạc trực tuyến trên Internet.

Phương pháp nguyên cứu

Sử dụng phương pháp nghiên cứu thu thập thông tin:

- Đọc tài liệu về các vấn đề và cách giải quyết cùng đề tài nghiên cứu của các tác giả khác

- Nghiên cứu, tham khảo về các đối thủ hiện tại

- Đọc về công nghệ được áp dụng để giải quyết các vấn đề

- Khảo sát người dùng về các vấn đề của nghiên cứu

GIỚI THIỆU CÔNG NGHỆ

Thiết kế giao diện (Bootstrap)

Bootstrap là một framework bao gồm các HTML, CSS và JavaScript template dùng để phát triển website chuẩn responsive

Bootstrap speeds up the website design process by providing a comprehensive set of ready-made components—typography, forms, buttons, tables, grids, navigations, and image carousels—that empower designers to build polished interfaces quickly With its responsive grid system and mobile-first approach, Bootstrap ensures a consistent UI across devices while reducing the amount of custom code needed By leveraging these built-in elements, developers can achieve faster development cycles, standardized styling, and easier maintenance for modern, scalable websites.

Bootstrap là một bộ khung front-end miễn phí và nguồn mở, tập hợp các mã nguồn và công cụ được thiết kế để tạo nhanh một mẫu website hoàn chỉnh Nhờ các thuộc tính giao diện được quy định sẵn như kích thước, màu sắc, độ cao và độ rộng, Bootstrap cho phép các designer và nhà phát triển có thể sáng tạo các sản phẩm web mới mẻ mà vẫn tiết kiệm thời gian trong quá trình thiết kế giao diện website, đồng thời tối ưu hóa hiệu suất và tính nhất quán trên nhiều nền tảng và trình duyệt.

Bootstrap là sản phẩm của Mark Otto và Jacob Thornton tại Twitter, được phát hành dưới dạng mã nguồn mở vào ngày 19/8/2011 trên GitHub, ban đầu có tên Twitter Blueprint Đến ngày 31/1/2012, Bootstrap phiên bản 2 được ra mắt với bố cục lưới 12 cột và thiết kế đáp ứng cho nhiều kích thước màn hình Tiếp nối thành công của phiên bản 2, Bootstrap 3 được ra mắt vào ngày 19/8/2013 với giao diện tương thích với smartphone.

Chỉ 3 năm sau ngày ra mắt, Bootstrap đã trở thành No.1 project trên GitHub Vào tháng 10/2014, Mark Otto công bố phiên bản Bootstrap 4 đang được phát triển Phiên bản alpha đầu tiên của Bootstrap 4 đã được triển khai vào tháng 8/2015 Phiên bản mới nhất của Bootstrap được giới thiệu đến người dùng là Bootstrap 4.3.1 Cho đến nay, Bootstrap vẫn là một trong những framework thiết kế website có lượng người dùng lớn nhất

Hiện nay có nhiều ứng dụng thiết kế website tuy nhiên Bootstrap vẫn có khả năng cạnh tranh cao là nhờ những đặc điểm nổi bật sau:

- Chất lượng sản phẩm đầu ra hoàn hảo

Bootstrap hoạt động dựa trên ba công nghệ mã nguồn mở là HTML, CSS và JavaScript Để sử dụng Bootstrap hiệu quả, người dùng cần nắm vững kiến thức căn bản về HTML, CSS và JavaScript Bên cạnh đó, các công nghệ này cho phép chỉnh sửa và tùy biến dễ dàng để phù hợp với mọi dự án.

Bootstrap, dựa trên mã nguồn mở, mang lại sự linh hoạt cho designer khi có thể chọn lựa các thuộc tính và phần tử phù hợp với dự án đang theo đuổi Việc sử dụng CDN của Bootstrap giúp tối ưu dung lượng tải và tăng tốc độ hiển thị trang, vì người dùng không cần tải toàn bộ mã nguồn về máy.

Chất lượng sản phẩm đầu ra hoàn hảo

Bootstrap là sáng tạo của các lập trình viên giỏi trên khắp thế giới, được nghiên cứu và thử nghiệm trên nhiều thiết bị và đã trải qua nhiều vòng kiểm tra trước khi đưa vào sử dụng Khi chọn Bootstrap, bạn có thể tin rằng mình sẽ phát triển những sản phẩm chất lượng tốt và ổn định Độ tương thích của Bootstrap rất cao và là điểm cộng lớn nhất, vì nó hoạt động được trên mọi trình duyệt và nền tảng, yếu tố này cực kỳ quan trọng cho trải nghiệm người dùng.

Bootstrap kết hợp Grid System với hai bộ tiền xử lý Less và Sass, cho phép xây dựng giao diện responsive và ưu tiên cho trải nghiệm trên thiết bị di động Với đặc tính mobile-first và khả năng tự động điều chỉnh kích thước trang theo khung trình duyệt, Bootstrap tối ưu hóa giao diện cho màn hình máy tính để bàn, tablet và laptop một cách linh hoạt và nhất quán.

2.1.4 Cấu trúc và tình năng

Bootstrap cung cấp các tập tin JavaScript, CSS và font chữ đã được biên dịch và nén để tối ưu hóa hiệu suất cho trang web Được thiết kế dưới dạng các module, Bootstrap cho phép tích hợp dễ dàng với nhiều dự án web khác nhau, đồng thời hỗ trợ tùy biến và mở rộng linh hoạt theo nhu cầu phát triển frontend.

19 hầu hết các mã nguồn mở như WordPress, Joomla, Magento, …Trong đó, Bootstrap mang đến nhiều chức năng nổi bật:

Bootstrap là thư viện frontend phổ biến cho phép người dùng tiếp cận một kho thành phần phong phú để xây dựng giao diện cho một website hoàn chỉnh Nó cung cấp các yếu tố thiết kế như font chữ, typography, form, table và grid, cùng nhiều thành phần khác giúp phát triển giao diện người dùng nhanh chóng, nhất quán và tương thích trên nhiều nền tảng.

- Bootstrap cho phép bạn tùy chỉnh framework của website trước khi tải xuống và sử dụng nó tại trang web của khung

- Tái sử dụng các thành phần lặp đi lặp lại trên trang web

- Bootstrap được tích hợp jQuery Bạn chỉ cần khai báo chính xác các tính năng trong quá trình lập trình web của bạn

- Định nghĩa glyphicons nhằm giảm thiểu việc sử dụng hình ảnh làm biểu tượng và tăng tốc độ tải trang

Bootstrap 4 Grid System là mấu chốt cho khả năng tương thích giao diện (web responsive) của Bootstrap Khi khởi động Bootstrap, giao diện của nó sẽ hiển thị dưới dạng lưới (grid) Bootstrap được chia thành 12 cột đặt trong một class row Trong đó, mỗi cột sẽ bao gồm các Padding tương ứng với từng độ phân giải của mỗi thiết bị (điện thoại, tablet, máy tính)

Mô hình Grid System của Bootstrap 4:

Bootstrap 4 Grid System có 5 lớp:

- col- (extra small devices – chiều rộng màn hình < 576px)

- col-sm- (small devices – chiều rộng màn hình >= 576px)

- col-md- (medium devices – chiều rộng màn hình >= 768px)

- col-lg- (large devices – chiều rộng màn hình >= 992px)

- col-xl- (xlarge devices – chiều rộng màn hình >= 1200px)

2.1.6 Cài dặt và áp dụng

jQuery

2.2.1 Giới thiệu jQuery là thư viện được viết từ JavaScript, jQuery giúp xây dựng các chức năng bằng Javascript dễ dàng, nhanh và giàu tính năng hơn jQuery được tích hợp nhiều module khác nhau Từ module hiệu ứng cho đến module truy vấn selector jQuery được sử dụng đến 99% trên tổng số website trên thế giới Vậy các module chính của jQuery là gì?

Các module phổ biến của jQuery bao gồm:

- Attributes – Xử lý các thuộc tính của đối tượng HTML

- Effect – xử lý hiệu ứng

- Event – xử lý sự kiện

- Form – xử lý sự kiện liên quan tới form

- DOM – xử lý Data Object Model

jQuery là một thư viện JavaScript, không phải một ngôn ngữ lập trình riêng biệt, hoạt động liên kết với JavaScript để mở rộng khả năng thao tác trên HTML Với jQuery, bạn có thể làm được nhiều việc hơn với ít công sức thông qua các API cho duyệt tài liệu HTML (DOM), hoạt hình, xử lý sự kiện và thao tác AJAX dễ dàng hơn jQuery hoạt động tốt trên nhiều trình duyệt khác nhau, giúp tối ưu hóa sự tương thích và hiệu suất của ứng dụng web Trong thế giới phát triển frontend hiện nay, một trong những đối thủ đáng chú ý của jQuery là các JS Framework.

2.2.2 Lịch sử jQuery được phát hành vào tháng 1 năm 2006 bởi John Resig tại BarCamp NYC Nó được duy trì và phát triển bởi một nhóm các nhà phát triển của Google đứng đầu là Timmy Wilson

Dưới đây là lịch sử các phiên bản của jQuery:

- Gọn nhẹ: jQuery là một thư viện khá gọn nhẹ – có kích cỡ khoảng 19KB (gzipped)

- Tương thích đa nền tảng: Nó tự động sửa lỗi và chạy được trên mọi trình duyệt phổ biến như Chrome, Firefox, Safari, MS Edge, IE, Android và iOS

Với jQuery, việc triển khai Ajax trở nên dễ dàng và nhanh chóng Nhờ thư viện này, mã Ajax có thể tương tác hiệu quả với máy chủ và gửi nhận dữ liệu bất đồng bộ mà không cần tải lại trang Nhờ đó, nội dung trên trang được cập nhật tự động khi có dữ liệu mới, mang lại trải nghiệm người dùng mượt mà và tối ưu hóa hiệu suất cho các ứng dụng web.

jQuery cho phép xử lý DOM nhanh nhạy bằng cách dễ dàng chọn và duyệt các phần tử DOM, đồng thời chỉnh sửa nội dung của chúng thông qua bộ chọn mã nguồn mở Sizzle Nhờ khả năng này, thao tác DOM trở nên hiệu quả hơn và giúp tối ưu hoá trải nghiệm người dùng trên trang web.

Đơn giản hóa việc tạo hiệu ứng bằng cách tiếp cận giống như một code snippet có hiệu ứng animation: các hiệu ứng được áp lên các dòng mã và bạn chỉ việc thêm biến hoặc nội dung vào là xong Cách làm này rút ngắn quy trình phát triển, đảm bảo tính nhất quán và dễ bảo trì cho toàn bộ dự án Việc tách riêng biến và nội dung cho phép tối ưu hóa từ khóa và nội dung mô tả để phù hợp với chuẩn SEO, đồng thời cải thiện trải nghiệm người dùng với hiệu ứng mượt mà Bạn có thể nhanh chóng điều chỉnh nội dung mà không chạm tới phần trình diễn, nhờ đó hiệu suất và tính linh hoạt được nâng cao.

jQuery cung cấp phương thức xử lý sự kiện HTML mạnh mẽ, cho phép xử lý các sự kiện đa dạng mà không làm cho mã HTML trở nên lộn xộn với các Event Handler Việc sử dụng các công cụ xử lý sự kiện của jQuery giúp quản lý sự kiện hiệu quả, giữ cho mã HTML và JavaScript gọn gàng, dễ bảo trì và tối ưu hóa hiệu suất của trang web.

- jQuery xử lý code rất nhanh và có khả năng mở rộng

- jQuery tạo điều kiện cho người dùng viết các mã chức năng bằng các dòng tối thiểu

- jQuery cải thiện hiệu suất lập trình web

- jQuery phát triển các ứng dụng có tương thích với trình duyệt

- Hầu hết các tính năng mới của trình duyệt mới đều được jQuery sử dụng

Có hai cách để tích hợp jQuery vào dự án web: Cách 1 – tải thư viện jQuery từ trang chính thức (ví dụ http://jQuery.com/download) và chọn phiên bản phù hợp với trình duyệt bạn đang dùng và nơi bạn triển khai jQuery, sau đó nhúng thư viện vào file HTML; Cách 2 – sử dụng CDN để nhúng jQuery nhanh chóng mà không cần tải xuống, giúp tăng tốc độ tải trang và dễ quản lý phiên bản.

Với cách làm này, thay vì tải thư viện jQuery về máy chủ hoặc hosting của bạn, bạn sẽ liên kết tới thư viện jQuery từ các CDN uy tín như cộng đồng jQuery, Google hoặc Microsoft Các CDN phổ biến và đáng tin cậy nhất hiện nay bao gồm Google Hosted Libraries, Microsoft Ajax CDN, và các dịch vụ như jsDelivr hay CDNJS, giúp tải nhanh hơn và tối ưu hiệu suất cho trang web.

TỔNG QUAN

Phân tích đánh giá hướng nghiên cứu của các tác giả khác (NhacCuaTui,

3.1.1 Những hướng nghiên cứu chính về vấn đề cửa đề tài

Trang web liên kết với các đối tác và nhà sản xuất âm nhạc để đăng tải sản phẩm âm nhạc của họ lên nền tảng, mang đến một thư viện nhạc đa dạng cho người dùng Người dùng có thể nghe các bài hát theo sở thích hoặc theo danh sách phát được biên soạn, đồng thời khám phá các thể loại, nghệ sĩ và xu hướng mới thông qua chức năng tìm kiếm và đề xuất thông minh.

Website cho phép người dùng tạo các playlist gồm các bài hát ưa thích để nghe cũng như tải về các file nhạc để về máy của mình

3.1.2 Những phương pháp đã được sử dụng

3.1.2.1 Phương pháp thu thập thông tin

- Tiến hành khảo sát về sự thay đổi về hành vi của người dùng

- Đọc tài liệu về sự phát triển công nghệ, về sự tăng trưởng kinh tế trong lĩnh vực âm nhạc

- Nắm bắt xu hướng của xã hội

3.1.2.2 Phương pháp xử lí thông tin

- Phân tích các dữ liệu về người dùng như sở thích, tìm kiếm… để đưa ra các gợi ý hợp lý trong âm nhạc

Phân tích dữ liệu về sự tăng trưởng kinh tế của lĩnh vực nhằm xác định quy mô triển khai và ngân sách quảng cáo phù hợp, từ đó tối ưu hoá nguồn lực và chi phí Việc đánh giá các chỉ số tăng trưởng cho phép đề xuất các loại ưu đãi và chương trình khuyến mãi hấp dẫn nhằm thu hút người dùng và nâng cao tỷ lệ chuyển đổi Kết quả phân tích sẽ làm căn cứ cho kế hoạch phát triển của website, bao gồm định vị thương hiệu, chiến lược nội dung và phân bổ ngân sách marketing trên các kênh hiệu quả Đồng thời, đánh giá tiềm năng mở rộng thị trường và dự báo lưu lượng truy cập để xác định mức độ đầu tư dài hạn và các mục tiêu tăng trưởng bền vững cho website.

Các ứng dụng nghe nhạc khác có chức năng tương tự nhau, đáp ứng đầy đủ các nhu cầu cơ bản về phát nhạc và quản lý thư viện Tuy nhiên, zingmp3 lại ghi điểm ở giao diện người dùng với sự đa dạng màu sắc, bố trí trực quan và dễ sử dụng hơn Spotify và Nhaccuatui, mang lại trải nghiệm mượt mà và tiện lợi cho người dùng.

Các vấn đề cần tập trung và giải quyết

Giao diện: giao diện và các biểu tượng nên sinh động, dễ nhìn, đẹp nhưng vẫn phải đảm bảo tính trực quan, dễ sử dụng

Kế hoạch

PHÂN TÍCH THIẾT KẾ

Sơ đồ cơ cấu tố chức

Hình 4.1 Cơ cấu tổ chức

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

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

4.2.2 Các chức năng của hệ thống

Use case name Đăng ký

Scenario Đăng nhập vào hệ bằng tên đăng nhập và mật khẩu

Người dùng nhập tên đăng nhập và mật khẩu sau đó nhấn nút submit

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.

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

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ý

5 Hệ thống thông báo kết quả quá 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 Hệ thống cập nhật thông tin của khách xem vào danh sách thành viên

Use case name Đăng nhập

Triggering Event Người dùng nhập tên đăng nhập và mật khẩu sau đó nhấn nút submit

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

Pre-conditions Tài khoản người dùng đã được tạo

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.

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

Use case name Xem thông tin các nhân

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

Pre-conditions Người dùng đã đăng nhập vào hệ thống

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

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

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

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

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

Bảng 4.5 UC Sửa thông tin

Use case name Nghe nhạc

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

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

Use case name Tạo playlist

Event Người dùng click vào button tạo playlist

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

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

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

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

Triggering Event Người dùng click vào icon upload

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

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

Activity diagram

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

Hình 4.6 Activity sửa thông tin cá nhân

Sequence diagram

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

Hình 4.14 Sequence sửa thông tin cá nhân

Class diagram

ER diagram

Domain model

Workflow

THIẾT KẾ KIẾN TRÚC

Kiến trúc hệ thống

Từ giai đoạn phân tích đến thiết kế, hệ thống được xây dựng thành một giải pháp thực thi toàn diện Mô hình được thiết kế chi tiết, xem xét kỹ thuật và phân chia thành các lớp giải quyết các vấn đề cơ bản như cơ sở dữ liệu (database) và giao diện người dùng (user interface), đồng thời có thể phát hiện và bổ sung thêm các lớp mới khi cần thiết Quá trình này đảm bảo tính khả thi, linh hoạt và mở rộng của hệ thống, tối ưu hóa hiệu suất và đáp ứng các yêu cầu kinh doanh.

- Để 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ị.

Mô tả các thành phần trong hệ thống

STT Thành phần Diễn giải

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ý

Quá trình xử lý được xây dựng dựa trên sơ đồ lớp của hệ thống và các lớp đối tượng chính đã được phân tích thiết kế Đây là phần đáp ứng các yêu cầu thao tác dữ liệu từ GUI và xử lý nguồn dữ liệu từ người dùng trước khi lưu xuống cơ sở dữ liệu (CSDL) Đồng thời, khu vực này kiểm tra các ràng buộc, tính toàn vẹn và tính hợp lệ của dữ liệu, thực hiện các tính toán và xử lý các nghiệp vụ, trước khi trả kết quả về cho phần UI.

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

Mô hình sử dụng

Hình 5.1 Kiến trúc hệ thống

Website bán hàng là một ứng dụng web được thiết kế theo kiến trúc 3-tier (3 lớp) theo mô hình Client-Server, nhằm tách rời các tầng chức năng và cho phép chúng hoạt động độc lập với nhau Thiết kế này phân chia rõ ràng giữa giao diện người dùng, logic nghiệp vụ và quản lý dữ liệu, từ đó tăng khả năng bảo trì, tái sử dụng mã nguồn và mở rộng hệ thống.

Lớp giao diện, hay giao diện người dùng của GUI, là phần người dùng trực tiếp nhìn thấy và tương tác, quy định cách dữ liệu được trình bày và thu thập Lớp này quản lý phần đầu và phần cuối của mọi yêu cầu và dữ liệu xử lý, đảm bảo sự liên kết giữa người dùng và hệ thống Nhiệm vụ chính của lớp giao diện là hiển thị dữ liệu một cách trực quan và nhận dữ liệu từ người dùng để xử lý, mang lại trải nghiệm người dùng nhanh nhạy và dễ sử dụng.

Lớp này là tầng ứng dụng chịu trách nhiệm xử lý nghiệp vụ và cung cấp các chức năng cho ứng dụng để lưu trữ và xử lý dữ liệu Nó theo dõi và lưu trữ các tùy chọn của người dùng khi họ đăng nhập và thực hiện mua hàng Khi khách hàng đăng nhập vào trang web, hệ thống sẽ hiển thị phương thức vận chuyển đã chọn trước đó hoặc các hàng hóa đã được duyệt trước đó Các loại thanh toán mà người dùng đã thực hiện có thể được lưu ở lớp nghiệp vụ và được sử dụng lại khi người dùng đăng nhập lần sau.

Lớp cuối cùng đảm nhận việc xử lý các yêu cầu dữ liệu cuối cùng từ người dùng và các ứng dụng Dữ liệu được thu thập ở lớp nghiệp vụ cũng có mặt tại đây, cho phép tìm kiếm nhanh, trích xuất thông tin và cập nhật dữ liệu một cách đồng nhất Đây là một hệ thống quản lý dữ liệu toàn diện, tập trung vào cung cấp truy cập an toàn, hiệu quả và nhất quán cho toàn bộ kiến trúc hệ thống cũng như các dịch vụ phụ trợ.

Lớp dữ liệu là thành phần cung cấp quyền truy cập cho người dùng vào dữ liệu của ứng dụng Lớp này có thể được kết nối trực tiếp với cơ sở dữ liệu để truy vấn và cập nhật dữ liệu, hoặc có thể gửi dữ liệu đến các dịch vụ dữ liệu để xử lý và trả kết quả Việc tách riêng lớp dữ liệu giúp tăng khả năng mở rộng, bảo mật và hiệu quả quản lý dữ liệu của hệ thống.

THỰC HIỆN

Màn hình chính

Màn hình Home cung cấp cái nhìn tổng quan về trang web nhạc, cho phép người dùng dễ dàng xem các bài hát nổi bật, nghe các gợi ý bài hát được đề xuất phù hợp, quản lý danh sách bài hát yêu thích và khám phá các đối tác âm nhạc uy tín.

Màn hình xếp hàng

Hình 6.2 Màn hình xếp hạng

Màn hình xếp hạng hiển thị các bài hát nổi bật, giúp người nghe dễ dàng khám phá và thưởng thức âm nhạc mới Bạn có thể nghe trực tiếp các ca khúc được đề xuất, tải về để nghe offline và thêm chúng vào danh sách yêu thích để truy cập nhanh lần sau Việc lưu bài hát vào danh sách yêu thích cho phép người dùng xây dựng thư viện cá nhân với những bài hát yêu thích nhất.

Màn hình radio

Hình 6.3 Màn hình radio nổi bậ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.

Màn hình theo dõi

Hình 6.4 Màn hình theo dõi ca sĩ

Màn hình này hiển thị toàn bộ danh sách, tin tức về các nghệ sĩ và các bài hát liên quan, giúp người dùng nắm bắt thông tin nhanh chóng và thưởng thức nhạc thuận tiện Bạn có thể nhấn vào từng mục để xem chi tiết tin tức hoặc nghe các bài hát của nghệ sĩ đó ngay trên giao diện.

Màn hình cá nhân

Hình 6.5 Màn hình các bài hả yêu thích, playlist

Màn hình này tích hợp các bài hát đã yêu thích, playlist, album, MV, nghệ sĩ và các bài tải lên của người dùng, cho phép người nghe duyệt và chọn nghe từng bài hát riêng lẻ hoặc phát toàn bộ danh sách để trải nghiệm nhạc một cách liên tục.

Màn hình thay đổi giao diện

Hình 6.6 Màn hình đổi background

Màn hình này cho phép người dùng thay đổi hình nền của website nghe nhạc, mang đến nhiều lựa chọn giao diện để tùy biến trải nghiệm người dùng Bạn có thể chọn giao diện theo chủ đề, giao diện theo hình nghệ sĩ, hoặc bật chế độ tối và sáng Việc đa dạng hóa giao diện giúp người dùng có trải nghiệm nghe nhạc thoải mái hơn và tăng mức độ tương tác trên trang, đồng thời hỗ trợ SEO bằng cách kéo dài thời gian ở lại trang và cải thiện khả năng tối ưu hóa trải nghiệm người dùng.

Màn hình chi tiết bài hát

Hình 6.7 Màn hình play nhạc

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

- 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

Định dạng
Số trang	52
Dung lượng	2,04 MB