ĐẠI HỌC BÁCH KHOA HÀ NỘI

Trường công nghệ thông tin và truyền thông

──────── * ───────

BÁO CÁO
MÔN: Project 3- IT3943

Tên đề tài:
Xây dựng web nghe nhạc

Giáo viên hướng dẫn : TS. Nguyễn Kim Khánh

Sinh viên thực hiện : Phạm Văn Hưởng - 20183763

Hà Nội, tháng 9 năm 2022

Contents
LỜI CẢM ƠN................................................................................................................... 3

CHƯƠNG I: GIỚI THIỆU.............................................................................................4

1. Mục đích hệ thống....................................................................................................4
2. Phạm vi hệ thống......................................................................................................4

CHƯƠNG II: PHÂN TÍCH YÊU CẦU..........................................................................5

1. Tổng quan chức năng...............................................................................................5
2. Biểu đồ user-case......................................................................................................6
3. Đặc tả user-case......................................................................................................10
4. Biểu đồ hoạt động...................................................................................................19
5. Biểu đồ trình tự.......................................................................................................25

Chương III. Thiết kế......................................................................................................30

1. Cơ sở dữ liệu...........................................................................................................30
a) Biểu đồ lớp...........................................................................................................30
b) Đặc tả cơ sở dữ liệu..............................................................................................31
2. Giao diện.................................................................................................................35

Chương IV: Cài đặt thử nghiệm...................................................................................37

 LỜI CẢM ƠN
Em xin được gửi lời cảm ơn chân thành tới thầy Nguyễn Kim Khánh
đã hướng dẫn, chỉ bảo và đôn đốc chúng em trong suốt quá trình thực hiện
project này, từ đó giúp em hoàn thành môn học một cách tốt nhất.
Đồng cảm ơn sâu sắc đến tất cả quý thầy cô trường Đại Học Bách
Khoa Hà Nội, các thầy cô khoa công nghệ thông tin đã tạo điều kiện hỗ trợ
chúng em về cơ sở vật chất cũng như truyền đạt em những kiến thức trong
công nghệ thông tin.
Trong quá trình thực hiện em vẫn còn nhiều thiếu sót chưa hoàn
chỉnh. Em rất mong nhận được sự thông cảm, góp ý và tận tình chỉ bảo của
thầy.
CHƯƠNG I: GIỚI THIỆU
1. Mục đích hệ thống
Ngày nay cuộc sống con người ngày càng cải thiện, mạng internet ngày
càng phổ biến dẫn đến nhu cầu giải trí tại nhà ngày càng tăng cao. Nghe
nhạc ngày trực tuyến ngày càng trở lên phổ biến hơn. Vậy nên em quyết
định xây dụng 1 trang web cho phép người dùng nghe nhạc trực tuyến.
2. Phạm vi hệ thống
- Phạm vi chức năng: Cho phép người dùng có thể truy cập và nghe nhạc
trên web khi có kết nối mạng.
- Phạm vi người dùng: Hướng tới tất cả những người yêu thích nghe nhạc
CHƯƠNG II: PHÂN TÍCH YÊU CẦU
1. Tổng quan chức năng
 Khách
- Đăng nhập
- Đăng kí thành viên
- Nghe nhạc: Nghe theo bài hát, nghe theo album, nghe theo top,
nghe ngẫu nhiên, nghe lặp lại.
 Admin
- Quản lí thành viên: Xem thông tin thành viên, xóa tài khoản của
thành viên.
- Quản lí bài hát: Xem danh sách các bài hát đang có trên hệ
thống, sửa thông tin bài hát, xóa bài hát, thêm bài hát mới.
- Quản lí album: Xem danh sách album, sửa album, xóa album,
thêm mới album.
- Đăng xuất.
 Thành viên
- Nghe nhạc: Nghe theo bài hát, nghe theo album, nghe theo top,
nghe ngẫu nhiên, nghe lặp lại.
- Tìm kiếm: Tìm kiếm theo tên bài hát, tìm kiếm theo tên nghệ sĩ.
- Quản lí tài khoản: Sửa thông tin tài khoản.
- Đăng xuất.
2. Biểu đồ user-case
 User-case tổng quan
 User-case nghe nhạc (khách, thành viên)

 User-case quản lí bài hát (admin)

 User-case quản lí album (Admin)

 User-case tìm kiếm bài hát (thành viên)

 User-case quản lí thành viên (admin)
3. Đặc tả user-case
 Đăng nhập
Use Case ID UC-1
Use Case Name Đăng nhập
Actor(s)  Khách
 Hệ thống
Trigger  Người dùng muốn đăng nhập vào hệ thống
Pre-Condition(s):  Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Người dùng đăng nhập thành công
Basic Flow 1. Người dùng chọn đăng nhập và nhập thông tin tài khoản
2. Hệ thống kiểm tra thông tin user name và password
3. Hệ thống thông báo đăng nhập thành công và chuyển giao diện sang
người dùng
Exception Flow 3.1 Hệ thống thông báo đăng nhập thất bại (sai user name, password), ưu
cầu đăng nhập lại

 Đăng kí
Use Case ID UC-2
Use Case Name Đăng kí thành viên
Actor(s)  Khách
 Hệ thống
Trigger  Người dùng muốn tạo 1 tài khoản mới
Pre-Condition(s):  Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Người dùng đăng kí tài khoản thành công
Basic Flow 1. Người dùng chọn đăng kí và nhập thông tin tài khoản
2. Hệ thống kiểm tra thông tin
3. Hệ thống thông báo đăng kí thành công và chuyển sang giao diện đăng
nhập
Exception Flow 3.1 Hệ thống thông báo đăng kí thất bại và ưu cầu đăng kí lại

 Đăng xuất
Use Case ID UC-3
Use Case Name Đăng xuất
Actor(s)  Thành viên (Admin)
 Hệ thống
Trigger  Thành viên (Admin) muốn đăng xuất tài khoản
Pre-Condition(s):  Người dùng đã đăng nhập tài khoản
 Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Đăng xuất tài khoản hiện tại
Basic Flow 1. Thành viên (Admin) chọn đăng xuất
2. Hệ thống đăng xuất tài khoản hiện tại
  Nghe nhạc theo bài
Use Case ID UC-4.1
Use Case Name Nghe nhạc theo bài
Actor(s)  Thành viên (khách)
 Hệ thống
Trigger  Thành viên (khách) muốn nghe nhạc
Pre-Condition(s):  Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Phát bản nhạc thành viên (khách) đã chọn
Basic Flow 1. Thành viên (khách) xác định vị trí bài hát muốn nghe và ấn play
2. Hệ thống chuyển sang giao diện phát nhạc và phát bản nhạc được
chọn

 Nghe nhạc theo album

Use Case ID UC-4.2
Use Case Name Nghe nhạc theo album
Actor(s)  Thành viên (khách)
 Hệ thống
Trigger  Thành viên (khách) muốn nghe các bài hát trong 1 album
Pre-Condition(s):  Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Phát album nhạc thành viên (khách) đã chọn
Basic Flow 1. Thành viên (khách) xác định vị trí album nhạc muốn nghe và ấn vào
hình đại diện
2. Hệ thống hiển thị thông tin album và danh sách các bài hát
3. Thành viên (khách) ấn play 1 bài bất kì trong album
4. Hệ thống chuyển sang giao diện phát nhạc và phát album nhạc bắt đầu
với bài hát được chọn

 Nghe nhạc ngẫu nhiên

Use Case ID UC-4.3
Use Case Name Nghe nhạc ngẫu nhiên
Actor(s)  Thành viên (khách)
 Hệ thống
Trigger  Thành viên (khách) muốn nghe nhạc 1 cách ngẫu nhiên
Pre-Condition(s):  Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Phát các bài hát ngẫu nhiên
Basic Flow 1. Thành viên (khách) ấn chọn chế độ ngẫu nhiên ở giao diện phát nhạc
2. Hệ thống phát các bài hát ngẫu nhiên (nếu trước đó đang phát nhạc ở
trong 1 album thì sẽ phát ngẫu nhiên các bài hát trong album đó)
  Nghe lặp lại 1 bài hát
Use Case ID UC-4.4
Use Case Name Nghe lặp lại 1 bài hát
Actor(s)  Thành viên (khách)
 Hệ thống
Trigger  Thành viên (khách) muốn nghe lặp lại 1 bài hát
Pre-Condition(s):  Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Phát bài hát được chọn lặp lại
Basic Flow 1. Thành viên (khách) chọn 1 bài hát và ấn play
2. Hệ thống chuyển sang giao diện phát nhạc và phát các bài hát được
chọn
3. Thành viên (khách) chọn chế độ lặp lại trong giao diện phát nhạc
4. Hệ thống phát lặp lại bài hát đó

 Xem thông tin danh sách thành viên

Use Case ID UC-5.1
Use Case Name Xem danh sách thành viên
Actor(s)  Admin
 Hệ thống
Trigger  Admin muốn xem danh sách thông tin các thành viên đã đăng kí thành
công trong hệ thống
Pre-Condition(s):  Admin đã đăng nhập
 Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Hiển thị danh sách thông tin thành viên
Basic Flow 1. Admin chọn mục quản lí thành viên
2. Hệ thống hiển thị danh sách thông tin các thành viên
  Xóa tài khoản
Use Case ID UC-5.2
Use Case Name Xóa tài khoản của thành viên
Actor(s)  Admin
 Hệ thống
Trigger  Admin xóa 1 thành viên khỏi hệ thống
Pre-Condition(s):  Admin đã đăng nhập
 Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Xóa tài khoản thành viên ra khỏi hệ thống
Basic Flow 1. Admin chọn mục quản lí thành viên
2. Hệ thống hiển thị danh sách thông tin các thành viên
3. Admin xác định tài khoản muốn xóa và chọn xóa
4. Hệ thống ưu cầu xác nhận lại
5. Admin ấn xác nhận
6. Hệ thống xóa tài khoản người dùng hiển thị lại danh sách thành viên
đã cập nhật
Exception Flow 5.1 Người dùng chọn hủy yêu cầu xóa
5.2 Hệ thống hủy hành động xóa và trở lại giao diện quản lí thành viên

 Xem danh sách bài hát

Use Case ID UC-6.1
Use Case Name Xem danh sách bài hát
Actor(s)  Admin
 Hệ thống
Trigger  Admin muốn xem danh sách tất cả bài hát có trong hệ thống
Pre-Condition(s):  Admin đã đăng nhập
 Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Hiển thị thông tin tất cả bài hát có trong hệ thống
Basic Flow 1. Admin chọn mục quản lí bài hát
2. Hệ thống hiển thị thông tin tất cả bài hát
  Thêm mới bài hát
Use Case ID UC-6.2
Use Case Name Thêm bài hát mới
Actor(s)  Admin
 Hệ thống
Trigger  Admin muốn thêm bài hát mới vào hệ thống
Pre-Condition(s):  Admin đã đăng nhập
 Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Thêm bài hát mới vào hệ thống thành công
Basic Flow 1. Admin chọn mục quản lí bài hát
2. Hệ thống hiển thị thông tin tất cả bài hát
3. Admin chọn thêm mới bài hát
4. Hệ thống hiển thị form thêm mới bài hát
5. Admin nhập các thông tin về bài hát (tên, nghệ sĩ, file nhạc)
6. Hệ thống kiểm tra thông tin
7. Hệ thống thông báo thêm mới thành công và hiển thị lại giao diện
quản lí bài hát sau khi cập nhật
Exception Flow 7.1 Hệ thống thông báo thêm mới bài hát thất bại (thông tin nhập thiếu,
bài hát đã có trên hệ thống) và trở lại giao diện quản lí bài hát

 Xóa bài hát

Use Case ID UC-6.3
Use Case Name Xóa bài hát
Actor(s)  Admin
 Hệ thống
Trigger  Admin muốn xóa 1 bài hát khỏi hệ thống
Pre-Condition(s):  Admin đã đăng nhập
 Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Xóa bài hát khỏi hệ thống thành công
Basic Flow 1. Admin chọn mục quản lí bài hát
2. Hệ thống hiển thị thông tin tất cả bài hát
3. Admin xác định bài hát cần xóa và ấn nút xóa ngay bên cạnh bài hát
4. Hệ thống ưu cầu xác nhận lại việc xóa
5. Admin ấn xác nhận
6. Hệ thống thông báo xóa thành công và hiển thị lại giao diện quản lí bài
hát sau khi cập nhật
Exception Flow 5.1 Admin ấn hủy ưu cầu xóa
5.2 Hệ thống hủy hành động xóa và trở lại giao diện quản lí bài hát
  Xem danh sách album
Use Case ID UC-7.1
Use Case Name Xem danh sách album
Actor(s)  Admin (thành viên)
 Hệ thống
Trigger  Admin muốn xem danh sách tất cả bài hát có trong hệ thống
 Thành viên muốn xem danh sách album cá nhân
Pre-Condition(s):  Admin (thành viên) đã đăng nhập
 Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Hiển thị thông tin tất cả album của hệ thống (của cá nhân nếu là thành
viên)
Basic Flow 1. Admin (thành viên) chọn mục quản lí album
2. Hệ thống hiển thị danh sách các album

 Tạo album mới

Use Case ID UC-7.2
Use Case Name Tạo album nhạc mới
Actor(s)  Admin (thành viên)
 Hệ thống
Trigger  Admin (thành viên) muốn tạo album nhạc mới
Pre-Condition(s):  Admin (thành viên) đã đăng nhập
 Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Thêm album nhạc mới vào hệ thống
Basic Flow 1. Admin (thành viên) chọn mục quản lí album
2. Hệ thống hiển thị danh sách các album
3. Admin (thành viên) chọn thêm mới album
4. Hệ thống hiển thị giao diện thêm mới album nhạc
5. Admin (thành viên) nhập các thông tin cần thiết
6. Hệ thống thông báo thêm mới thành công
Exception Flow 6.1 Hệ thống thông báo thêm mới thất bại (thông tin nhập không đúng yêu
cầu)
  Thêm bài hát vào album
Use Case ID UC-7.2
Use Case Name Thêm bài hát vào album
Actor(s)  Admin (thành viên)
 Hệ thống
Trigger  Admin (thành viên) muốn thêm bài hát vào album
Pre-Condition(s):  Admin (thành viên) đã đăng nhập
 Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Thêm bài hát vào album đã chọn
Basic Flow 1. Admin (thành viên) chọn mục quản lí album
2. Hệ thống hiển thị danh sách các album
3. Admin (thành viên) chọn 1 album
4. Hệ thống hiển thị thông tin album và danh sách các bài hát có trong
album đó
5. Admin (thành viên) chọn thêm mới bài hát
6. Hệ thống ưu cầu nhập tên bài hát cần thêm vào album
7. Admin (thành viên) nhập tên bài hát
8. Hệ thống thêm báo thêm mới thành công và hiển thị lại album đã cập
nhật
Exception Flow 8.1 Hệ thống thông báo thêm mới thất bại (tên bài hát không tồn tại, bài
hát đã có trong album)

 Xóa bài hát khỏi album

Use Case ID UC-7.3
Use Case Name Xóa bài hát khỏi album
Actor(s)  Admin (thành viên)
 Hệ thống
Trigger  Admin (thành viên) muốn xóa 1 bài hát khỏi album
Pre-Condition(s):  Admin (thành viên) đã đăng nhập
 Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Thêm bài hát vào album đã chọn
Basic Flow 1. Admin (thành viên) chọn mục quản lí album
2. Hệ thống hiển thị danh sách các album
3. Admin (thành viên) chọn 1 album
4. Hệ thống hiển thị thông tin album và danh sách các bài hát có trong
album đó
5. Admin (thành viên) xác định bài hát cần xóa và ấn xóa
6. Hệ thống ưu cầu xác nhận lại
7. Admin (thành viên) ấn xác nhận
8. Hệ thống thêm báo xóa thành công và hiển thị lại album đã cập nhật
Exception Flow 7.1 Admin (thành viên) ấn hủy yêu cầu xóa
8.1 Hệ thống hủy hành động xóa trở lại giao diên album nhạc
  Xóa album
Use Case ID UC-7.4
Use Case Name Xóa album
Actor(s)  Admin (thành viên)
 Hệ thống
Trigger  Admin (thành viên) muốn xóa 1 album nhạc
Pre-Condition(s):  Admin (thành viên) đã đăng nhập
 Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Xóa album nhạc đã chọn khỏi hệ thống
Basic Flow 1. Admin (thành viên) chọn mục quản lí album
2. Hệ thống hiển thị danh sách các album
3. Admin (thành viên) chọn 1 album
4. Hệ thống hiển thị thông tin album và danh sách các bài hát có trong
album đó
5. Admin (thành viên) ấn xóa album
6. Hệ thống ưu cầu xác nhận lại
7. Admin (thành viên) ấn xác nhận
8. Hệ thống thêm báo xóa thành công và trở lại giao diện quản lí album
Exception Flow 7.1 Admin (thành viên) ấn hủy yêu cầu xóa
8.1 Hệ thống hủy hành động xóa trở lại giao diện album nhạc

 Tìm kiếm theo tên bài hát

Use Case ID UC-10.1
Use Case Name Tìm kiếm bài hát theo tên bài hát
Actor(s)  Khách (thành viên)
 Hệ thống
Trigger  Khách (thành viên) muốn tìm kiếm bài hát theo tên bài hát
Pre-Condition(s):  Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Hiển thị danh sách bài hát tìm kiếm được
Basic Flow 1. Khách (thành viên) nhập tên bài hát cần tìm lên ô tìm kiếm
2. Khách (thành viên) chọn tìm theo tên bài hát
3. Hệ thống hiển thị danh sách kết quả
Exception Flow 3.1 Hệ thống thông báo không tìm thấy bài hát phù hợp
  Tìm kiếm theo tên nghệ sĩ
Use Case ID UC-10.2
Use Case Name Tìm kiếm bài hát theo tên nghệ sĩ
Actor(s)  Khách (thành viên)
 Hệ thống
Trigger  Khách (thành viên) muốn tìm kiếm bài hát theo tên nghệ sĩ
Pre-Condition(s):  Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Hiển thị danh sách bài hát tìm kiếm được
Basic Flow 4. Khách (thành viên) nhập tên nghệ sĩ cần tìm lên ô tìm kiếm
5. Khách (thành viên) chọn tìm theo tên nghệ sĩ
6. Hệ thống hiển thị danh sách kết quả
Exception Flow 3.1 Hệ thống thông báo không tìm thấy bài hát phù hợp

 Sửa thông tin tài khoản

Use Case ID UC-11
Use Case Name Sửa thông tin tài khoản
Actor(s)  Thành viên
 Hệ thống
Trigger  Thành viên muốn sửa thông tin cá nhân
Pre-Condition(s):  Thành viên đã đăng nhập
 Thiết bị người dùng có kết nối internet khi thực hiện
Post-Condition(s):  Cập nhật lại thông tin thành viên
Basic Flow 1. Thành viên chọn sửa thông tin cá nhân
2. Hệ thống hiển thị giao diện sửa thông tin
3. Thành viên nhập thông tin cần sửa
4. Hệ thống kiểm tra và thông báo thành công
Exception Flow 4.1 Hệ thống kiểm tra và thông báo thất bại (thông tin không hợp lệ)
4. Biểu đồ hoạt động
 Đăng nhập

 Đăng kí
 Sửa thông tin tài khoản
 Đăng xuất

 Nghe nhạc theo bài

 Nghe nhạc theo album

 Nghe nhạc chế độ ngẫu nhiên

 Nghe nhạc chế độ lặp lại

 Xóa bài hát

5. Biểu đồ trình tự
Đăng nhập

Đăng kí
Nghe nhạc theo bài

Nghe nhạc theo album

Nghe nhạc theo nghệ sĩ

Nghe nhạc theo thể loại

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

Tạo album
Đăng xuất
Chương III. Thiết kế
1. Cơ sở dữ liệu
a) Biểu đồ lớp
b) Đặc tả cơ sở dữ liệu
Bảng User: Lưu thông tin các tài khoản

STT Tên trường Kiểu dữ liệu Nullable Ràng Mô tả

buộc

1 Id INT No PK Mã người dùng

2 Name VARCHAR No Tên người dùng

3 Email VARCHAR No Email người dùng

4 Phone VARCHAR No Số điện thoại

5 Sex VARCHAR No Giới tính

6 Address VARCHAR No Giới tính

7 Role INT No Loại tài khoản

0: Admin
1: Thành viên thường
2: Thành viên Vip
Bảng Song: Lưu thông tin bài hát

STT Tên trường Kiểu dữ liệu Nullable Ràng Mô tả

buộc

1 Id INT No PK Mã bài hát

2 Name VARCHAR No Tên bài hát

3 Artist_id INT No FK Mã nghệ sĩ

4 View INT No Số lượt nghe

5 Vip INT No Thành viên vip mới

nghe được bài hát này
0: Không phải Vip
1: Bài hát Vip

6 File VARCHAR No Đường dẫn bài hát

Bảng Category: Lưu các thể loại nhạc

STT Tên trường Kiểu dữ liệu Nullable Ràng Mô tả

buộc

1 Id INT No PK Mã thể loại

2 Category_id VARCHAR No FK Tên thể loại

Bảng Song_Category: Lưu các thể loại của từng bài hát

STT Tên trường Kiểu dữ liệu Nullable Ràng Mô tả

buộc

1 Id INT No PK Số thứ tự

2 Song_id INT No FK Mã bài hát

3 Category_id INT No FK Mã thể loại

Bảng Artist: Lưu thông tin nghệ sĩ

STT Tên trường Kiểu dữ liệu Nullable Ràng Mô tả

buộc

1 Id INT No PK Mã nghệ sĩ

2 Name VARCHAR No Tên nghệ sĩ

Bảng Album: Lưu thông tin Ablum

STT Tên trường Kiểu dữ liệu Nullable Ràng Mô tả

buộc

1 Id INT No PK Mã album

2 Name VARCHAR No Tên album

3 Note VARCHAR No Ghi chú

Bảng Album_Song: Lưu các bài hát có trong album

STT Tên trường Kiểu dữ liệu Nullable Ràng Mô tả

buộc

1 Id INT No PK Số thứ tự

2 Album_id INT No FK Mã album

3 Song_id INT No FK Mã bài hát

2. Giao diện
Đăng nhập

Đăng kí
Trang chủ
Chương IV: Cài đặt thử nghiệm
Link code: https://github.com/phamhuongpv/Music_web