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

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN MÔN HỌC

ĐỒ ÁN 1
XÂY DỰNG WEBSITE
NGHE NHẠC TRỰC TUYẾN

Giảng viên hướng dẫn
Sinh viên thực hiện
Mã sinh viên
Lớp
Bộ môn

:
:
:
:
:

ThS. Trần Thị Hồng Yến
Nguyễn Anh Duy
18520663
SE121.M11
Phát triển phần mềm

TP HCM, tháng 1 năm 2022

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH

CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM

TRƯỜNG ĐẠI HỌC

Độc Lập - Tự Do - Hạnh Phúc

CÔNG NGHỆ THÔNG TIN
TP. HCM, ngày….. tháng ….. năm 2022
ĐỀ CƯƠNG CHI TIẾT
TÊN ĐỀ TÀI: Xây dựng website nghe nhạc trực tuyến
Giảng viên hướng dẫn: ThS. Trần Thị Hồng Yến
Thời gian thực hiện: Từ ngày 15/09/2021 đến ngày 01/01/2022
Sinh viên thực hiện:
NGUYỄN ANH DUY – 18520663
Nội dung đề tài
1. Lý do chọn đề tài:
Ngày nay Internet ngày càng được mở rộng, phổ biến hơn, nên nhu cầu về việc giải
trí cũng trở nên thiết yếu hơn và âm nhạc là một trong những lĩnh vực giải trí mọi
thời đại. Việc xây dựng một website nghe nhạc trực tuyến sẽ giúp trải nghiệm của
người dùng trở nên thú vị và càng hay hơn là bạn có thể trao đổi với những người
khác qua website về cảm nhận âm nhạc, chia sẻ cho nhau, đóng góp ý kiến cho
website. Qua thực nghiệm khảo sát thì em đã quyết định xây dựng website nghe
nhạc miễn phí nhằm giải quyết nhu cầu của con người về mặt âm nhạc.
2. Mục tiêu:
Xây dựng website nghe nhạc trực tuyến

3. Phạm vi:

Phạm vi môi trường: Web.
Phạm vi chức năng:
− Tìm kiếm bài hát
− Download bài hát
− Nghe nhạc trực tuyến
2


4. Đối tượng sử dụng:
− Những người có nhu cầu nghe nhạc trực tuyến trên web site
5. Phương pháp thực hiện:
Phương pháp làm việc:
− Làm việc thông qua phương thức online dưới sự hướng dẫn của giảng viên
hướng dẫn.
Phương pháp nghiên cứu:
− Phân tích nhu cầu sử dụng của đối tượng người dùng.
− Nghiên cứu tài liệu các công nghệ liên quan.
6. Nền tảng công nghệ:
− Nền tảng: PHP, HTML, CSS, JS.
− Database: Mysql.
7. Kết quả mong đợi:
−

Website có thể nghe nhạc trực tuyến

8. Hướng phát triển của đề tài:
- Phát triển danh mục ca sĩ yêu tích, bài hát yêu thích.
- Tạo playlist bài hát riêng
- Upload bài hát của cá nhân
- Bình luận bài hát

9. Kế hoạch làm việc:
Thời gian thực hiện từ ngày 15/09/2021 đến ngày 01/01/2022.

Giai đoạn 1:Khảo sát dự án
Thời gian

Công việc

15/09/2021

- Đề xuất ý tưởng

– 21/09/2021
Giai đoạn 2: Xác định yêu cầu

3


Thời gian

Công việc

22/09/2021

- Xác định danh sách yêu cầu

– 4/10/2021
Giai đoạn 3: Phân tích u cầu:
Thời gian

Cơng việc

5/10/2021

- Đặc tả, xác định các quy định

– 18/10/2021 - Phân tích khả thi
19/10/2021- - Thiết kế sơ đồ ULM
25/10/2021
Giai đoạn 4:Thiết kế:
Thời gian

Công việc

25/10/2021

- Thiết kế dữ liệu

– 07/11/2021 - Thiết kế giao diện
- Tạo sơ đồ logic hoàn chỉnh
Giai đoạn 5: Cài đặt
Thời gian

Công việc

08/11/2021

- Thiết lập cơ sở dữ liệu

– 14/11/2021

15/11/2021 – - Thiết lập giao diện
21/11/2021
22/11/2021- - Cài các chức năng
12/12/2021
Giai đoạn 6: Kiểm thử, bảo trì
Thời gian

Cơng việc

13/12/2021

- Lựa chọn công cụ kiểm thử

– 15/12/2021
4


16/12/2021 – - Lập kế hoạch kiểm thử
20/12/2021

- Phân tích và thiết kế test
- Kiểm chứng các module chức năng

Giai đoạn 7: Chuẩn bị tài liệu báo cáo
Thời gian

Công việc

21/12/2021

- Tài liệu báo cáo

– 23/12/2021
24/09/2021 – - Demo sản phẩm
26/12/2021
Xác nhận của GVHD

TP. HCM, ngày… tháng… năm 2022

(Ký tên và ghi rõ họ tên)

5


LỜI CẢM ƠN

Trong quá trình làm bài báo cáo, em đã nhận được sự giúp đỡ, đóng góp ý kiến
và chỉ bảo nhiệt tình của thầy cơ, gia đình và bạn bè.
Em xin gửi lời cảm ơn chân thành đến cô Trần Thị Hồng Yến - giảng viên
khoa Công nghệ phần mềm - Trường ĐH CNTT- ĐHQG TP HCM người đã tận tình
hướng dẫn, góp ý và chỉ bảo em trong suốt q trình làm báo cáo.
Ngồi ra, em cũng xin gửi lời cảm ơn đến những thầy cô giáo trong trường
ĐH CNTT- ĐHQG TP HCM nói chung, các thầy cơ trong Khoa Cơng nghệ phần
mềm nói riêng đã dạy dỗ cho em kiến thức về lập trình, qua đó em có được cơ sở lý
thuyết vững vàng và từ đó hồn thành tốt đồ án.
Cuối cùng, em xin chân thành cảm ơn gia đình và bạn bè, đã ln tạo điều
kiện, quan tâm, giúp đỡ, động viên em trong suốt q trình hồn thành đồ án.
Sinh viên thực hiện

NGUYỄN ANH DUY

6


NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................

.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
Tp.HCM, ngày … tháng 1 năm 2022
GVHD
ThS. Trần Thị Hồng Yến

7


Mục lục
CHƯƠNG 1: TỔNG QUAN .....................................................................................10
1.1 Tên đề tài: Website nghe nhạc trực tuyến trực tuyến......................................10
1.2 Lựa chọn giải pháp cơng nghệ ........................................................................10
1.3 Thơng tin nhóm ...............................................................................................10
CHƯƠNG 2. CƠ SỞ LÝ THUYẾT .........................................................................11
2.1 Ngơn ngữ lập trình PHP ..................................................................................11
2.1.1 PHP là gì ......................................................................................................................... 11
2.1.2 Lịch sử phát triển ............................................................................................................ 11

2.2 Tổng quan về hệ quản trị cơ sở dữ liệu MySQL .............................................12
CHƯƠNG 3: KHẢO SÁT VÀ PHÂN TÍCH HỆ THỐNG ......................................13
3.1 Đối tượng và phạm vi nghiên cứu và lựa chọn giải pháp công nghệ ..............13
3.1.1 Đối tượng nghiên cứu...................................................................................................... 13
3.1.2 Phạm vi nghiên cứu ......................................................................................................... 13
3.1.3 Lựa chọn giải pháp công nghệ ........................................................................................ 13

3.2 Đối tượng sử dụng hệ thống ............................................................................13
3.3 Phân tích ..........................................................................................................14
3.3.1 Yêu cầu chất lượng ......................................................................................................... 14
3.3.2 Yêu cầu chức năng .......................................................................................................... 14

3.4 Tổng quát chức năng .......................................................................................15
3.4.1 Sơ đồ usecase .................................................................................................................. 15
3.4.2 Usecase khách hàng ........................................................................................................ 16
3.4.3 Usecase khách vãng lai ................................................................................................... 16
3.4.4 Usecase quản trị viên ...................................................................................................... 17
3.4.5 Sơ đồ hoạt động nghe nhạc ............................................................................................. 17
3.4.7 Sơ đồ hoạt động cập nhật bài hát, ca/ nhạc sĩ.................................................................. 18

3.5 Thiết kế hệ thống .............................................................................................19
3.5.1 Sơ đồ mối quan hệ giữa các thực thể .............................................................................. 19
3.5.2 Thiết kế cơ sở dữ liệu ...................................................................................................... 19

CHƯƠNG 4: THIẾT KẾ, HIỆN THỰC GIAO DIỆN .............................................20
8


4.1 Màn hình trang chủ .........................................................................................20
4.2 Màn hình đăng ký đăng nhập ..........................................................................21

4.3 Màn hình phát nhạc .........................................................................................22
4.4 Màn hình tìm kiếm ..........................................................................................23
4.5 Màn hình bảng xếp hạng bài hát .....................................................................24
4.6 Màn hình thay đổi thơng tin tài khoản ............................................................25
KẾT LUẬN ...............................................................................................................26
*Ưu điểm ..................................................................................................................26
*Nhược điểm ............................................................................................................26
*Hướng phát triển ...................................................................................................26
*Kết quả đạt được ...................................................................................................26
TÀI LIỆU THAM KHẢO .........................................................................................27
MỤC LỤC HÌNH ẢNH
Hình 3. 1 Sơ đồ usecase ............................................................................................15
Hình 3. 2 Sơ đồ usecase ............................................................................................16
Hình 3. 3 Usecase khách vãng lai .............................................................................16
Hình 3. 4 Usecase quản trị viên ................................................................................17
Hình 3. 5 Khách hàng và khách hàng vãng lai..........................................................17
Hình 3. 6 Sơ đồ hoạt động cập nhật bài hát, ca/ nhạc sĩ ..........................................18
Hình 3. 7 Sơ đồ mối quan hệ giữa các thực thể ........................................................19
Hình 4. 1 Màn hình trang chủ ...................................................................................20
Hình 4. 2 Màn hình đăng ký và đăng nhập ...............................................................21
Hình 4. 3 Màn hình phát nhạc ...................................................................................22
Hình 4. 4 Màn hình tìm kiếm ....................................................................................23
Hình 4. 5 Màn hình bảng xếp hạng bài hát ...............................................................24
Hình 4. 6 Màn hình thay đổi thơng tin tài khoản ......................................................25

9


CHƯƠNG 1: TỔNG QUAN
1.1 Tên đề tài: Website nghe nhạc trực tuyến trực tuyến

1.2 Lựa chọn giải pháp công nghệ
Sử dụng ngơn ngữ lập trình HTML, CSS và Javascript để thiết kế giao diện
cho website.
Sử dụng hệ quản trị cơ sở dữ liệu MySQL để thiết lập cơ sở dữ liệu cho
website.
Sử dụng ngơn ngữ lập trình PHP để tạo các chức năng của website.
1.3 Thơng tin nhóm
STT

MSSV

Họ và tên

Email

1

18520663

Nguyễn Anh Duy



10


CHƯƠNG 2. CƠ SỞ LÝ THUYẾT
2.1 Ngơn ngữ lập trình PHP
2.1.1 PHP là gì
▪ PHP: Hypertext Preprocessor, thường được viết tắt thành PHP là một ngơn ngữ lập trình

kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ, mã
nguồn mở, dùng cho mục đích tổng qt. Nó rất thích hợp với web và có thể dễ dàng nhúng vào
trang HTML. Do được tối ưu hóa cho các ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C
và Java, dễ học và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữ khác nên
PHP đã nhanh chóng trở thành một ngơn ngữ lập trình web phổ biến nhất thế giới.

2.1.2 Lịch sử phát triển
▪ PHP được phát triển từ một sản phẩm có tên là PHP/FI. PHP/FI do Rasmus
Lerdorf tạo ra năm 1994, ban đầu được xem như là một tập con đơn giản của các
mã kịch bản Perl để theo dõi tình hình truy cập đến bản sơ yếu lý lịch của ông trên
mạng. Ông đã đặt tên cho bộ mã kịch bản này là 'Personal Home Page Tools'. Khi
cần đến các chức năng rộng hơn, Rasmus đã viết ra một bộ thực thi bằng C lớn hơn
để có thể truy vấn tới các cơ sở dữ liệu và giúp cho người sử dụng phát triển các
ứng dụng web đơn giản. Rasmus đã quyết định công bố mã nguồn của PHP/FI cho
mọi người xem, sử dụng cũng như sửa các lỗi có trong nó đồng thời cải tiến mã
nguồn. PHP/FI, viết tắt từ "Personal Home Page/Forms Interpreter", bao gồm một
số các chức năng cơ bản cho PHP như ta đã biết đến chúng ngày nay. Nó có các
biến kiểu như Perl, thơng dịch tự động các biến của form và cú pháp HTML nhúng.
Cú pháp này giống như của Perl, mặc dù hạn chế hơn nhiều, đơn giản và có phần
thiếu nhất quán. Vào năm 1997, PHP/FI 2.0, lần viết lại thứ hai của phiên bản C,
đã thu hút được hàng ngàn người sử dụng trên toàn thế giới với xấp xỉ 50.000 tên
miền đã được ghi nhận là có cài đặt nó, chiếm khoảng 1% số tên miền có trên mạng
Internet. Tuy đã có tới hàng nghìn người tham gia đóng góp vào việc tu chỉnh mã
nguồn của dự án này thì vào thời đó nó vẫn chủ yếu chỉ là dự án của một người.
PHP/FI 2.0 được chính thức cơng bố vào tháng 11 năm 1997, sau một thời gian
khá dài chỉ được công bố dưới dạng các bản beta.
▪ Các phiên bản của PHP:
+ PHP/FI
11

+ PHP3, PHP4,PHP5,PHP6,PHP7.
2.2 Tổng quan về hệ quản trị cơ sở dữ liệu MySQL
MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế giới
và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng. Vì
MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển,
hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất
mạnh. Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có
truy cập CSDL trên internet. MySQL miễn phí hồn tồn cho nên bạn có thể tải về
MySQL từ trang chủ. Nó có nhiều phiên bản cho các hệ điều hành khác nhau: phiên
bản Win32 cho các hệ điều hành dòng Windows, Linux, Mac OS X, Unix,
FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS,…

12


CHƯƠNG 3: KHẢO SÁT VÀ PHÂN TÍCH HỆ THỐNG
3.1 Đối tượng và phạm vi nghiên cứu và lựa chọn giải pháp công nghệ
3.1.1 Đối tượng nghiên cứu
▪ Các website nghe nhạc trực tuyến như: Zingmp3, Nhaccuatui,…
▪ Đố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,….
3.1.2 Phạm vi nghiên cứu
▪ Tất cả các nền tảng nghe nhạc trên Internet.
▪ Thời gian: 1/10/2021 - 25/12/2021.
▪ Tham khảo và thu thập thông tin qua các website nghe nhạc trực tuyến.
3.1.3 Lựa chọn giải pháp cơng nghệ
▪ Sử dụng ngơn ngữ lập trình HTML, CSS và Javascript để thiết kế giao
diện cho website.
▪ Sử dụng hệ quản trị cơ sở dữ liệu MySQL để thiết lập cơ sở dữ liệu cho

website.
▪ Sử dụng ngôn ngữ lập trình PHP để tạo các chức năng của website.
3.2 Đối tượng sử dụng hệ thống
Website nghe nhạc trực tuyến này hoạt động chủ yếu phục vụ cho các đối
tượng : quản trị viên, khách hàng, khách hàng vãng lai các cơ quan xác
định bản quyền.
-

Quản trị viên
o Cập nhật bài hát
o Cập nhật danh mục bảng xếp hạng
o Cập nhật ca/ nhạc sĩ

-

Khách hàng

o Nghe nhạc
o Download bài hát
-

Khách hàng vãng lai

o Xem thông tin bài hát
13


o Nghe nhạc
o Đăng ký tài khoản
o Đăng nhập vào website

3.3 Phân tích
3.3.1 Yêu cầu chất lượng
- Xây dựng một website nghe nhạc trực tuyến đơn giản, thân thiện, dễ nhìn, người
dùng phổ thơng dễ dàng sử dụng, cho phép người dùng nghe nhạc, tải nhạc, xem các
thông tin về xếp hạng cũng như các thông tin về các ca, nhạc sĩ hot nhất.
3.3.2 Yêu cầu chức năng
Tác nhân

Mô tả
Là người nắm tất cả các quyền trong hệ

Quản trị viên

thống. Họ có thể cập nhật tất cả thơng tin
bài hát, danh mục, nhạc sĩ, ca sĩ.
Là người nghe nhạc trên website, họ có
thể tìm kiếm những bài hát mà họ u
thích. Họ tìm kiếm và lựa chọn bài hát,

Khách hàng

ca/ nhạc sĩ. Khách hàng là những thành
viên đã đăng ký tài khoản và mật khẩu
để thuận tiện cho việc download và
upload bài hát cá nhân (phát triển sau
này).
Là những người chỉ có thể nghe nhạc, có
thể xem thơng tin bài hát, ca/ nhạc sĩ.

Khách hàng vãng lai

Khách hàng vãng lai muốn download và
upload bài hát cá nhân(phát triển sau
này) phải đăng ký và đăng nhập vào hệ
thống.

14


3.4 Tổng quát chức năng
3.4.1 Sơ đồ usecase

Hình 3. 1 Sơ đồ usecase

15


3.4.2 Usecase khách hàng

Hình 3. 2 Sơ đồ usecase

3.4.3 Usecase khách vãng lai

Hình
Hình 3.
3.33 Usecase
Usecase khách
khách vãng
vãng lai

lai

16


3.4.4 Usecase quản trị viên

Hình 3. 4 Usecase quản trị viên
3.4.5 Sơ đồ hoạt động nghe nhạc

Hình 3. 5 Khách hàng và khách hàng vãng lai

17


3.4.7 Sơ đồ hoạt động cập nhật bài hát, ca/ nhạc sĩ

Hình 3. 6 Sơ đồ hoạt động cập nhật bài hát, ca/ nhạc sĩ

18


3.5 Thiết kế hệ thống
3.5.1 Sơ đồ mối quan hệ giữa các thực thể

Hình 3. 7 Sơ đồ mối quan hệ giữa các thực thể
3.5.2 Thiết kế cơ sở dữ liệu
STT

Tên bảng

Diễn giải

1

QuanTriVien

Bảng quản trị

2

BaiHat

Bảng Bài hát

3

DanhMuc

Bảng danh mục bài hát

4

CaNhacSi

Bảng ca/ nhạc sĩ

5

TheLoai

Bảng thể loại bài hát

6

KhachHang

Bảng khách hàng
19


CHƯƠNG 4: THIẾT KẾ, HIỆN THỰC GIAO DIỆN
4.1 Màn hình trang chủ
a. Giao diện

Hình 4. 1 Màn hình trang chủ
b. Mơ tả
- Màn hình trang chủ là nơi hiển thị tổng quan của trang web. Người dùng có thể
xem thơng tin bài hát, ca/ nhạc sĩ nổi bật, các bài hát gợi ý.

20


4.2 Màn hình đăng ký đăng nhập
a. Giao diện

Hình 4. 2 Màn hình đăng ký và đăng nhập

21

4.3 Màn hình phát nhạc
a. Giao diện

Hình 4. 3 Màn hình phát nhạc
22


Hình 4.4. Màn hình phát nhạc
b. 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.
-

Có thể tải bài hát

-

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.

4.4 Màn hình tìm kiếm
a. Giao diện

Hình 4. 4 Màn hình tìm kiếm
b. Mơ tả
- Cho phép người dùng tìm kiếm bài hát, ca/ nhạc sĩ theo tên (có dấu hoặc khơng).

23

4.5 Màn hình bảng xếp hạng bài hát
a. Giao diện

Hình 4. 5 Màn hình bảng xếp hạng bài hát

b. Mơ tả
- Hiển thị bảng xép hạng dựa theo lượt nghe trên web site

24


4.6 Màn hình thay đổi thơng tin tài khoản
a. Giao diện

Hình 4. 6 Màn hình thay đổi thơng tin tài khoản
b. Mô tả
- Cho phép ngời dùng sửa đổi các thông tin cơ bản

25