Website nghe nhạc trực tuyến

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ
MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG
TIN
KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO ĐỒ ÁN 1
ĐỀ TÀI: WEBSITE NGHE NHẠC TRỰC TUYẾN

Lớp: SE121.N21.PMCL
Giảng viên hướng dẫn: Ths Trần Thị Hồng Yến
Nhóm sinh viên thực hiện:
Đặng Hải Hoàng Sơn 19522131
Trần Đức Tâm

19522166


Tp.HCM, ngày 1 tháng 7 năm
2023

LỜI CẢM ƠN
Trước hết, nhóm chúng em xin gửi lời cảm ơn đến Trường Đại
học Công nghệ thông tin – ĐHQGTPHCM và đến cô Trần Thị
Hồng Yến là giảng viên hướng dẫn trực tiếp đã tạo điều kiện để
nhóm chúng em hồn thành đồ án 1 - Chủ đề website nghe
nhạc trực tuyến.
Trong khoảng thời gian thực hiện đồ án, nhóm chúng em đã
học hỏi thêm được nhiều kiến thức, kinh nghiệm, biết được
thêm về nhiều cơng nghệ mới. Nhóm chúng em đã vận dụng
những kiến thức nền tảng đã tích lũy đồng thời kết hợp với việc
học hỏi và nghiên cứu những kiến thức mới. Từ đó vận dụng tối

đa những gì đã học hỏi được để hoàn thành báo cáo đồ án này.
Mặc dù nhóm chúng em đã cố gắng hồn thành song báo cáo
của nhóm chúng em chắc chắn khơng chắn khỏi những thiếu
xót, chúng em rất mong nhận được sự thơng cảm và góp ý
chân thành tùy q thầy cơ. Nhóm chúng em xin chân thành
cảm ơn.
Nhóm sinh viên thực hiện
Đặng Hải Hoàng Sơn - Trần Đức Tâm


Mục lục
CHƯƠNG 1: GIỚI THIỆU........................................................................................................................5
1.1 Đặt vấn đề...................................................................................................................................5
1.2 Giải pháp.....................................................................................................................................5
1.3 Mục tiêu đề tài............................................................................................................................5
CHƯƠNG 2: CƠ SỞ LÝ THUYẾT.............................................................................................................7
1.

HTML.........................................................................................................................................7

2.

CSS.............................................................................................................................................8

3.

Tailwind.....................................................................................................................................9

4.

Typescript................................................................................................................................10

5.

PHP..........................................................................................................................................11

6.

Laravel Framework.................................................................................................................12

7.

Remix.......................................................................................................................................13

CHƯƠNG 3: PHÂN TÍCH ĐẶC TẢ YÊU CẦU..........................................................................................14
3.1 Class diagram............................................................................................................................14
3.2 Danh sách người dùng..............................................................................................................14
3.3 Danh sách các Usecase..............................................................................................................15
3.3.1 User (khách hàng)..............................................................................................................15
3.3.2 Đặc tả Use-case..................................................................................................................16
CHƯƠNG 4: THIẾT KẾ CƠ SỞ DỮ LIỆU................................................................................................21
4.1 Danh sách các quan hệ..............................................................................................................21
4.1.1 Bảng user............................................................................................................................21
4.1.2 Bảng playlist.......................................................................................................................21
4.1.3 Bảng artist..........................................................................................................................22
4.1.4

Bảng song....................................................................................................................22

4.1.5 Bảng comment...................................................................................................................23

4.1.6 Bảng history.......................................................................................................................23
4.1.7 Bảng notification................................................................................................................23
4.2 Kiến trúc hệ thống.....................................................................................................................24
CHƯƠNG 5: THIẾT KẾ GIAO DIỆN.......................................................................................................25
5.1 Đăng nhập.................................................................................................................................25
5.2 Màn hình chính.........................................................................................................................26
5.3 Màn hình một danh sách bài hát..............................................................................................27
5.4 Màn hình một bài hát...............................................................................................................28
5.5 Tìm kiếm....................................................................................................................................29


5.6 Upload bài hát...........................................................................................................................30
5.7 Tạo danh sách bài hát...............................................................................................................31
5.8 Màn hình thơng tin bản thân....................................................................................................32
5.9 Màn hình sửa thơng tin............................................................................................................33
CHƯƠNG 6: KẾT LUẬN........................................................................................................................34
6.1 Tổng kết........................................................................................................................................34
6.2 Khó khăn...................................................................................................................................34
6.3 Hạn chế......................................................................................................................................34
6.4 Hướng phát triển......................................................................................................................34
TÀI LIỆU THAM KHẢO.........................................................................................................................35


CHƯƠNG 1: GIỚI THIỆU
1.1 Đặt vấn đề
Âm nhạc là một trong những ngành công nghiệp lớn nhất trên thế giới, và
hàng triệu người trên khắp thế giới đều yêu thích và nghe nhạc hàng ngày. Vì
vậy, nghiên cứu về hệ hỗ trợ quyết định là rất cần thiết và có tính ứng dụng cao
trong thực tế.
Việc xây dựng một hệ thống gợi ý bài hát sẽ giúp người dùng có thể tìm

thấy những bài hát mới, phù hợp với sở thích của họ. Ngồi ra hệ thống có thể
cung cấp cho người dùng danh sách các bài hát mà họ có thể thích dựa trên các
yếu tố như sở thích âm nhạc, lịch sử nghe nhạc, thời gian nghe nhạc, v.v.
1.2 Giải pháp
Để giải quyết vấn đề trên thì nhóm tụi em đã phát triển
một website nghe nhạc trực tuyến. Website này sẽ cung cấp
cho người dùng một nền tảng trực tuyến, tiện lợi, hiệu quả, giúp
người dùng

có thể nghe nhạc một cách dễ dàng và nhanh

chóng.
1.3 Mục tiêu đề tài
1.3.1 Lý thuyết
 Tìm hiểu và nghiên cứu về Lavarel, PHP, Tailwind, Remix
React.
 Nắm rõ các thao tác trên công cụ lập trình Visual studio
code.
 Nghiên cứu các webiste nghe nhạc hiện có trên thị trường.
1.3.2 Mục tiêu
 Thiết kế giao diện đẹp mắt, bắt mắt và dễ sử dụng.
 Đảm bảo tính năng an tồn và bảo mật.
 Tối ưu hóa cơng cụ tìm kiếm.


 Người dùng dễ dàng nghe nhạc.
 Người dung có thể đăng bài hát mà mình thích hoặc mình
sáng tác.
 Cập nhật các bài hát mới.
1.3.3 Phạm vi, quy mô

- Phạm vi môi trường: Triển khai ứng dụng trên webite
- Đối tượng sử dụng: Tất cả các đối tượng có nhu cầu nghe
nhạc.
- Phạm vi chức năng:
 Người dùng nghe được nhạc.
 Người dùng có thể sao chép link nhạc.
 Có thể upload các bài nhạc mình thích/sáng tác.
1.3.4 Phương pháp nghiên cứu:
- Phương pháp làm việc: Làm việc nhóm 2 thành viên thơng qua
2 hình thức offline và online dưới sự hướng dẫn của giảng viên.
- Phương pháp nghiên cứu:
 Khảo sát và nghiên cứu nhu cầu nghe nhạc của mọi người.
 Nghiên cứu các tài liệu và công nghệ liên quan.
 Kiểm tra, tham khào các website nghe nhạc như
soundcloud, spotify,… để tối ưu hóa trang web.
- Phương pháp cơng nghệ:
 Tìm hiểu các ngơn ngữ và framework liên quan đến đề tài
 Xây dựng giao diện web để tương tác người dùng và nhận
phản hồi, sửa chữa nếu cần thiết.
 Tìm hiểu các thư viện hỗ trợ cho dự án.





CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
1. HTML
HTML là viết tắt của cụm từ Hypertext Markup
Language (tạm dịch là Ngôn ngữ đánh dấu siêu văn bản).
HTML được sử dụng để tạo và cấu trúc các thành phần trong

trang web hoặc ứng dụng, phân chia các đoạn văn, heading,
titles, blockquotes… và HTML khơng phải là ngơn ngữ lập
trình.
Một tài liệu HTML được hình thành bởi các phần tử HTML
(HTML Elements) được quy định bằng các cặp thẻ (tag và
attributes). Các cặp thẻ này được bao bọc bởi một dấu ngoặc
ngọn (ví dụ <html>) và thường là sẽ được khai báo thành
một cặp, bao gồm thẻ mở và thẻ đóng. Ví dụ, chúng ta có
thể tạo một đoạn văn bằng cách đặt văn bản vào trong cặp
tag mở và đóng văn bản

và

Ưu điểm:


o Được sử dụng rộng rãi, có rất nhiều nguồn tài nguyên
hỗ trợ và cộng đồng sử dụng lớn.
o Học đơn giản và dễ hiểu.
o Mã nguồn mở và hoàn tồn miễn phí.
o Markup gọn gàng và đồng nhất.
o Tiêu chuẩn thế giới được vận hành bởi World Wide
Web Consortium (W3C).
o Dễ dàng tích hợp với các ngơn ngữ backend như PHP,
Python…
Khuyết điểm:
o Được dùng chủ yếu cho web tĩnh. Đối với các tính
năng động như update hay realtime thời gian thực,
bạn cần sử dụng JavaScript hoặc ngôn ngữ backend
bên thứ 3 như PHP.
o Một số trình duyệt chậm hỗ trợ tính năng mới.

2. CSS
CSS là chữ viết tắt của Cascading Style Sheets, nó là một
ngơn ngữ được sử dụng để tìm và định dạng lại các phần tử
được tạo ra bởi các ngơn ngữ đánh dấu (HTML). Nói ngắn gọn
hơn là ngôn ngữ tạo phong cách cho trang web.


Mối tương quan giữa HTML và CSS rất mật thiết. HTML là
ngôn ngữ markup (nền tảng của site) và CSS định hình
phong cách (tất cả những gì tạo nên giao diện website),
chúng là không thể tách rời.

3. Tailwind
Tailwind là một utility-first CSS framework giúp cho bạn
xây dựng giao diện người dùng một cách nhanh nhất.
Tailwind CSS được phát hành lần đầu tiên vào tháng 10/2019
được phát triển bởi Adam Wathan. Nếu so sánh với các nền
tảng

lập

trình

CSS

khác

như

Bootstrap,

Materialize,

Foundation, Material Design… thì giữa chúng có điểm chung
với nhau.


Ưu điểm:


Xây dựng giao diện chỉ cần khai báo class trên file html



Chỉ xuất ra những file css chứa những class đã sử dụng
trong giao diện.



Dễ dàng thiết lập Responsive ngay trên file html



Hỗ trợ tương tác hover, focus… ngay trên class html



Tối ưu những cấu trúc html css có tính lặp lại



Định nghĩa thêm class mới được phối hợp bởi các class có
sẵn trong tailwind



Hỗ trợ chế độ tối Dark Mode



Dễ dàng mở rộng, chỉnh sửa và biến đổi



Tăng tốc độ code với Extension thông minh trên VS Code.

4. Typescript
Typescript Là một ngôn ngữ được Microsoft tặng free cho
chúng ta, nền tảng của TypeScript ít nhiều cũng có sự liên
quan đến JavaScript vì nó là một ngơn ngữ mã nguồn mở của
JavaScript. Vai trò của TypeScript là dùng để thiết kế và xây
dựng các dự án ứng dụng quy mơ lớn mang tính chất phức
tạp.


TypeScript được xem là một phiên bản nâng cao hơn của
JavaScript vì nó được thiết kế thêm nhiều chức năng tiện lợi
hơn, cải tiến hơn từ những điểm yếu của JavaScript như các
lớp hướng đối tượng và Static Structural typing, bên cạnh đó
TypeScript cịn có thể hoạt động rộng rãi cho các ứng dụng

của ngôn ngữ Angular2 và Nodejs.

Ưu điểm:
 Thuận tiện và hồn tồn miễn phí
 Thao tác nhanh chóng và đơn giản
 Tái cấu trúc
 Giảm tỷ lệ mắc lỗi trong hệ thống
 Hợp nhất mã đơn giản

Nhược điểm:
 Bắt buộc dùng biên dịch
 Bước thiết lập cồng kềnh
 Chỉ là phần ngôn ngữ mở rộng hỗ trợ.

5. PHP


Ngôn ngữ PHP là từ viết tắt của Personal Home Page nay
đã chuyển thành Hypertext Preprocessor. Thuật ngữ này là
một dạng mã lệnh hoặc một chuỗi ngôn ngữ kịch bản được
dùng để phát triển các ứng dụng web chạy trên máy chủ. Ki
các lập trình viên PHP viết chương trình, chuỗi lệnh sẽ được
xử lý trên server sau đó sinh ra mã HTML trên client. Dựa vào
đó, các ứng dụng trên website sẽ hoạt động một cách dễ
dàng.

Ưu điểm:
- PHP là một mã nguồn mở nên rất dễ dàng cài đặt.
- Là một ngôn ngữ dễ học.
- Khả năng bảo mật cao.

6. Laravel Framework
Laravel là một trong những PHP Web Framework phổ biến
nhất theo mẫu MVC (Model-View- Controller). Được tạo bởi
Taylor Otwell, Laravel framework là nguồn mở và miễn phí


giúp bạn đưa ra các sản phẩm chất lượng cao. Các code sẽ
được giảm thiểu đi, nhưng vẫn đạt tiêu chuẩn ngành, giúp
bạn tiết kiệm được hàng trăm giờ đồng hồ dành cho việc
phát triển.

Ưu điểm:
 Sử dụng các tính năng mới nhất của PHP
 Tài liệu tuyệt vời
 Tích hợp với dịch vụ mail
 Hỗ trợ cache backend phổ biến
 Cơng cụ tích hợp cho dịng lệnh - Artisan
 Gói và nguồn lực sẵn có
 Giảm chu kỳ phát triển sản phẩm
 Container IoC
 Reverse Routing
 Eloquent ORM
Nhược điểm:
 Khơng hỗ trợ tính năng thanh tốn
 Thiếu sự liên tục giữa các phiên bản
 Một số nâng cấp có thể có vấn đề


 Thường không cung cấp sự phong phú cho ứng dụng

di động
7. Remix
Remix là một framework full-stack dựa trên React và Node
mang đến cho bạn khả năng phát triển web hiện đại mà
không bỏ qua các nguyên tắc cơ bản. Remix cung cấp bộ nhớ
đệm HTTP có sẵn, hỗ trợ thẻ meta và hiển thị máy chủ với
trạng thái code thích hợp. Nó cũng cung cấp cho bạn các
nested route và một cách dễ dàng để load data.


CHƯƠNG 3: PHÂN TÍCH ĐẶC TẢ U CẦU
3.1 Class diagram

Hình 3.1: Bản vẽ sơ đồ lớp của dự án
3.2 Danh sách người dùng
Bảng 3.1: Bảng danh sách người dùng
#
1

Người dùng
Khách hàng

Mơ tả
Khách hàng có thể đăng ký, đăng nhập,
xem album, bài hát, nghe nhạc, tìm
kiếm bài hát, theo dõi,…


3.3 Danh sách các Usecase
3.3.1 User (khách hàng)

Bảng 3.2: Bảng chức năng của khánh hàng
#

Chức năng

Mô tả

1

Đăng ký

Dành cho người mới, cho phép tự
đăng ký tài khoản

2

Đăng nhập

3

Tìm kiếm sản
phẩm

Dành cho người dùng đã có tài
khoản, cho phép người dùng đăng
nhập vào website.
Chức năng cho phép nguồi dùng
tìm kiếm bài hát theo tên

3

Thêm bài hát

Chức năng cho phép người dùng
thêm bài hát

4

Thêm playlist

Cho phép người dùng tạo danh
sách bài hát mới

5

Nghe nhạc

Cho phép người dùng nghe nhạc.

6

Bình luận

Cho phép người dùng bình luận.


3.3.2 Đặc tả Use-case
Bảng 3.3: Đặc tả Use-case nghe nhạc
Mã Use-case

UC-1

Tên Use-case

Nghe nhạc

Tác nhân

Người dùng

Mơ tả tóm tắt

Người dùng ấn vào nút nghe nhạc

Điều kiện trước

Truy cập vào website.

Điều kiện sau

N/A

Dịng sự kiện
chính

Người dùng ấn nút nghe nhạc thì nhạc sẽ
được phát.
Và khi ấn nút lần nữa thì nhạc sẽ dừng.

Dòng sự kiện

phụ
Bảng 3.4: đặc tả Use-case thêm bài hát mới
Mã Use-case

UC-2

Tên Use-case

Thêm bài hát mới

Tác nhân

Người dùng

Mơ tả tóm tắt

Người dùng tiến hành upload bài hát

Điều kiện trước

Truy cập vào website.

Điều kiện sau

N/A

Dịng sự kiện
chính

- Người dùng ấn nút vào phần ‘upload’ trên

header
- Người dùng thêm các thông tin/file nhạc
mong muốn.
- Xác nhận thêm bài hát mới


Dòng sự kiện
phụ

Bảng 3.5: Đặc tả Use-case thêm danh sách bài hát mới
Mã Use-case

UC-3

Tên Use-case

Thêm danh sách bài hát mới

Tác nhân

Người dùng

Mơ tả tóm tắt

Người dùng tiến hành upload bài hát

Điều kiện trước

Truy cập vào website.

Điều kiện sau

N/A

Dịng sự kiện
chính

- Người dùng ấn nút vào phần ‘create
playlist’ trên header
- Người dùng thêm file ảnh đại diện cho
playlist.
- Người dùng thêm thể loại cho playlist.
- Người dùng thêm tên cho playlist.
- Xác nhận tạo playlist mới.

Dòng sự kiện
phụ


Bảng 3.6: Đặc tả Use-case bình luận
Mã Use-case

UC-4

Tên Use-case

Bình luận

Tác nhân

Người dùng

Mơ tả tóm tắt

Người dùng viết bình luận về một bài hát

Điều kiện trước

- Truy cập vào website.
- Truy cập vào page bài hát.

Điều kiện sau

N/A

Dịng sự kiện
chính

- Người dùng ấn nút vào thanh bình luận
phía dưới phần hình nền bài hát.
- Người dùng viết bình luận
- Xác nhận bình luận.

Dịng sự kiện
phụ

- Phần mình bình luận xuất hiện.