Đồ án 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 hoà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 để hồn thành báo cáo đồ án này.
Mặc dù nhóm chúng em đã cố gắng hoà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 Hồ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à hồ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.


Bảng 3.8: Đặc tả Use-case tìm kiếm
Mã Use-case

UC-5

Tên Use-case

Tìm kiếm bài hát

Tác nhân

Người dùng

Mơ tả tóm tắt

Người dùng tìm kiếm bài hát mình muốn.

Đ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 vào phần tìm kiếm trên header.
- Người dùng nhập thơng tin liên quan đến tên bài hát.
- Xác nhận thông tin muốn tìm kiếm.
- Website chuyển người dùng đến giao diện kết quả tìm
kiếm.
Dịng sự kiện phụ


Bảng 3.7: Đặc tả Use-case sửa thông tin cá nhân
Mã Use-case

UC-6

Tên Use-case

Sửa thơng tin cá nhân

Tác nhân

Người dùng

Mơ tả tóm tắt

Người dùng sửa thơng tin của mình.

Đ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 vào ‘edit profile’ trên thanh header.
- Người dùng có thể thêm file ảnh để đổi giao diện mới.
- Người dùng có thể sửa tên người dùng.
- Xác nhận thơn tin đổi.
Dịng sự kiện phụ


CHƯƠNG 4: THIẾT KẾ CƠ SỞ DỮ LIỆU
4.1 Danh sách các quan hệ
4.1.1 Bảng user
Bảng 4.1: Cơ sở dữ liệu của user
STT

Thực thể

Kiểu dữ liệu

Ghi chú

1

id

number

Không đổi

2

name

string

Tên người dùng

3

avtURL

string

Ảnh đại điện người dùng

4

email

string

Email người dùng

5

password

string

Mật khẩu người dùng

4.1.2 Bảng playlist
Bảng 4.2: cơ sở dữ liệu playlist
STT

Thực thể

Kiểu dữ liệu

Ghi chú

1

id

number

Độc nhất

2

name

string

Tên danh sách bài hát

3

bg_color

string

Màu giao diện

4

category

string

Thể loại bài hát của danh sách

5

views

number

Số lượng người nghe

6

imageURL

string

Ảnh đại diện của danh sách

7

likes

number

Số lượng thích danh sách

8

User_id

number

Id của user


4.1.3 Bảng artist
Bảng 4.3: Cơ sở dữ liệu artist

STT

Thực thể

Kiểu dữ liệu

Ghi chú

1

id

number

Độc nhất

2

name

string

Tên tác giả

3

followed

number

Số lượng người theo dõi

4

User_id

number

Id của user

4.1.4 Bảng song
Bảng 4.4: Cơ sở dữ liệu bài hát
STT

Thực thể

Kiểu dữ liệu

Ghi chú

1

id

number

Độc nhất

2

name

string

Tên bài hát

3

liked

number

Số lượt thích

4

views

number

Số lượt nghe

5

imageURL

string

Ảnh bài hát

6

audioURL

string

Bài hát

7

Artist_id

number

Id của tác giả

8

Playlist_id

number

Id cũa playlist


4.1.5 Bảng comment
Bảng 4.5: Cơ sở dữ liệu comment
STT

Thực thể

Kiểu dữ liệu

Ghi chú

1

id

number

Độc nhất

2

content

string

Nội dung

3

Song_id

number

Id của bài hát

4

User_id

number

Id của user

4.1.6 Bảng history
Bảng 4.6: Cơ sở dữ liệu history
STT

Thực thể

Kiểu dữ liệu

Ghi chú

1

id

Number

Độc nhất

2

views

number

Lượt xem

3

User_id

number

Id của user

4

Song_id

number

Id của song

4.1.7 Bảng notification
Bảng 4.7: Cơ sở dữ liệu notification
STT

Thực thể

Kiểu dữ liệu

Ghi chú

1

id

number

Độc nhất

2

content

string

Thơng báo

3

User_id

number

Id của user

4

Song_id

number

Id của song

5

Bg_url

string

Hình nền


4.2 Kiến trúc hệ thống

- Backend sử dụng mơ hình MVC (Model-View-Controller).
- MVC là một mẫu kiến trúc phần mềm để tạo lập giao diện người dùng trên
máy tính. MVC chia thành ba phần được kết nối với nhau và mỗi thành phần đều
có một nhiệm vụ riêng của nó và độc lập với các thành phần khác. Tên gọi 3
thành phần:
+ Model (dữ liệu): Quản lý xử lí dữ liệu.
+ View (giao diện): Nơi hiển thị dữ liệu cho người dùng.
+ Controller (bộ điều khiển): Điều khiển sự tương tác của 2 phần Model và
View.


CHƯƠNG 5: THIẾT KẾ GIAO DIỆN
5.1 Đăng nhập

Hình 5.1: Màn hình đăng nhập

Mơ hình chi tiết:
- Chọn text ‘username’ để ghi tên người dùng.

- Chọn text ‘password’ để ghi mật khẩu tài khoản.
- Nhấp button ‘sign in’ để xác nhận đăng nhập.