Đồ án website hát karaoke online

ĐẠ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 MÔN HỌC
Đồ án 2
Đề tài: Website hát karaoke online
GVHD: Thái Thụy Hàn Uyển
Lớp: SE122.L11.PMCL
DANH SÁCH NHÓM SINH VIÊN THỰC HIỆN
1. Nguyễn Đức Hiếu- 17520478
2. Hoàng Tiến Sỹ – 17520994

Ngày 10 tháng 1 năm 2020


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

..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
........................ ,ngày ...... tháng ...... năm 2020
Người nhận xét

Trang 2


MỤC LỤC ................................................................ Error! Bookmark not defined.
Chương 1: TỔNG QUAN .......................................... Error! Bookmark not defined.
I.

Tổng quan về nghiên cứu ..................................................................................... 4
1. Ngành Karaoke là gì ......................................................................................... 4
2. Hát karaoke qua web ......................................................................................... 4

II. Lý do chọn đề tài .................................................................................................. 5
III. Mục tiêu nghiên cứu ............................................................................................. 5
IV. Nhiệm vụ nghiên cứu ........................................................................................... 5
V. Đối tượng nghiên cứu ........................................................................................... 5
VI. Công nghệ ............................................................................................................. 5
VII. Đóng góp đề tài .................................................................................................... 6
VIII.Kế hoạch nghiên cứu và các giai đoạn thực hiện ................................................ 6

IX. Đặc tả .................................................................................................................... 7
CHƯƠNG 2: PHÂN TÍCH .......................................................................................... 9
I.

Giải pháp phân tích ............................................................................................... 9

II. Mơ hình cơ sở dữ liệu........................................................................................... 9
CHƯƠNG 3: THIẾT KẾ ........................................................................................... 11
I.

Sơ đồ use case .................................................................................................... 11

II. Đặc tả use case ................................................................................................... 12
III. Mơ hình cơ sở dữ liệu......................................................................................... 15
II. Thiết kế giao diện ............................................................................................... 16
CHƯƠNG 4: THỰC THI VÀ PHÁT TRIỂN .......................................................... 22
I.

Môi trường phát triển và triển khai .................................................................... 22

II. Giao diện chức năng ........................................................................................... 22
CHƯƠNG 5: TEST .................................................................................................... 22
I.

Test trình phát karaoke ....................................................................................... 23

CHƯƠNG 6: KẾT LUẬN .......................................................................................... 25
I.

Kết quả đạt được................................................................................................. 25

II. Hạn chế đề tài ..................................................................................................... 26
III. Hướng phát triển ................................................................................................. 25
IV. Phân chia công việc ............................................................................................ 26

Trang 3


CHƯƠNG 1: TỔNG QUAN

I.

Tổng quan về tình hình nghiên cứu
1. Ngành karaoke là gì?
karaoke là dịch vụ cung cấp âm thanh, ánh sáng, nhạc, lời bài hát và hình
ảnh thể hiện trên màn hình (hoặc hình thức tương tự) phục vụ cho hoạt
động ca hát tại các cơ sở đủ điều kiện kinh doanh dịch vụ karaoke theo quy
định của Nghị định này. Ngành karaoke là dịch vụ giải trí gần như hàng đầu
hiện nay. Doanh thu từ ngành này thật sự đáng để quan tâm. Giúp đem lại
lợi nhuận lớn dành cho doanh nghiệp hoặc hộ kinh doanh ngành giải trí này.
2. Hát karaoke qua website
Hiện nay với sự phát triển của cơng nghệ và mạng, hình thức karaoke
trực tuyến trở nên hot hơn bao giờ hết. Đem lại sự tiện lợi, dễ dàng và
nhanh chóng cho người sử dụng, Hơn nữa tiết kiệm được chi phí đầu
máy cho cửa hàng, đem lại lợi nhuận cho website bằng việc thu quảng
cáo.

Trang 4

II.

Lý do chọn đề tài

Hát karaoke trực tuyến giúp mọi người yêu âm nhạc dễ dàng sử dụng, nhanh
chóng và tiện lợi. Mọi người có thể hát mọi lúc mọi nơi với tất cả các thiết bị. Mục
tiêu chính của nhóm là lấy lượng truy cập đơng đủ, và sau đó chạy quảng cáo, trên
website, và trong tương lai gần việc mở rộng dịch vụ nạp tiền tài khoản cho các
cửa hàng và user có trải nghiệm tốt hơn. Đem lại lợi nhuận cho website.
III.

Mục tiêu nghiên cứu
Website hỗ trợ trong việc giúp người dùng dễ dàng, tiện lợi hát phục vụ cho
mục đích giải trí ví dụ mọi người đều có thể truy cập trang website và hát
mọi lúc mọi nơi khi có kết nối mạng. Tạo cảm giác tiện lợi thoải mái cho
người dụng. Mặt khác kiếm thêm lợi nhuận cho website, và dễ dàng sử
dụng và quản lí
• Xây dựng một hệ thống mới phù hợp, dể hiểu, dể sử dụng cho người dùng
Website. Hiểu được hệ thống website, xây dựng ứng dụng cho phù hợp nhu
cầu thực tiễn.
• Giúp bản thân có thêm khả năng sáng tạo, tư duy thông qua thiết kế giao
diện tương tác với người dùng, vận dụng kiến thức bản thân vào thực tiễn.
Trang 5


IV.

Nhiệm vụ nghiên cứu
Website này được tạo ra nhằm hy vọng đem đến sự thuận tiện cho người sử
dụng cũng như giúp cho các chủ quán có thể xem xét một cách tổng quát

tình trạng đơn ra và mặt hàng của qn mình. Phần mềm cịn mang lại lợi
ích kinh tế khi là giải pháp giúp việc quản lý trở nên đơn giản và thân thiện
với mọi người.

V.

Đối tượng nghiên cứu
Đối tượng nghiên cứu: Website hát karaoke online
- Khách thể nghiên cứu:
+ Những ngưởi có nhu cầu hát karaoke online
+ Quy trình hoạt động của một Website hát karaoke online
Cơng nghệ
-

Nghiên cứu cơ sở lý thuyết về phân tích và thiết kế hệ thống thông tin.

-

Hệ quản trị csdl và ngơn ngữ lập trình Nodejs.

-

Sử dụng các ngơn ngữ như html,css,javascript,reactjs, bootstrap để thiết
kế giao diện và xử lý.

VI.

Sử dụng hệ quản trị csdl Mysql để quản trị csdl cho đề tài.

Đóng góp của đề tài

- Mở ra một hướng đi mới trong việc dịch vụ hát karaoke online có ích hơn.
- Tổng hợp các chức năng cần thiết để hát karaoke dễ dàng hơn, nhanh gọn
hơn, góp phần giúp ích cho việc kinh doanh và quảng cáo đem lại lợi nhuận
kinh tế

VII. Kế hoạch nghiên cứu và các giai đoạn thực hiện
1. Kế hoạch nghiên cứu

Trang 6


Bảng kế hoạch nghiên cứu

2. Giai đoạn thực hiện
Giai đoạn 1. Thu thập tài liệu: Khảo sát tình hình thực tiễn , thu thập dữ
liệu (nhu cầu, phương pháp mô hình kinh doanh online qua website hát
karaoke online, các phần mềm, website đã được phát hành trong nước,
các tài liệu liên quan…). Tham khảo những website đang được sử dụng
phổ biến. Tìm hiểu các cơng cụ, ngơn ngữ lập trình, các kiến thức cơ
bản liên quan đến đề tài. Giai đoạn 2. Nghiên cứu vấn đề: Đọc hiểu các
tài liệu liên quan. Nắm rõ vai trò, chức năng của các cơng cụ, ngơn ngữ
lập trình (Visual Studio 2017, Microsoft SQL Server 2017, ngơn ngữ
C#,powerdesigner 16.1). Tìm hiểu các mơ hình hát karaoke khác, đề ra
phương án giải quyết thích hợp. Giai đoạn 3. Xây dựng website: Dựa
vào các kiến thức đã tìm hiểu và các dữ liệu đã phân tích, xây dựng phần
mềm dựa vào các công cụ và ngôn ngữ lập trình đã chọn. Giai đoạn 4.
Kiểm thử chương trình: Chạy demo, kiểm thử chương trình. Xem xét,
đánh giá hiệu quả của từng chức năng. Sửa lỗi và hoàn thiện chương
trình. Giai đoạn 5. Kết luận: Tổng kết, viết báo cáo, rút ra kết luận
chung cho đề tài.

Trang 7


VIII. Đặc tả
Website hát karaoke online bao gồm các chức năng: hát online, đăng nhập,
đăng xuất, chọn bài, điều chỉnh bài hát, admin, u thích, điều khiển, tìm
kiếm
➢ hát online: là chức năng chính của phần mềm, đảm nhiệm vai trị truyền
hình ảnh và âm thanh cho người dùng.
➢ điều khiển: dừng, phá và next bài hát với mã phòng hát là có thể điều
khiển.
➢tìm kiếm: tìm kiếm bài hát muốn hát.
➢u thích bài hát thơng qua đăng nhập: sau khi đăng nhập sẽ có các chức
năng u thích và lưu bài hát đã thích.
➢admin: điều chỉnh quản lí các content và tiêu đề các bài viết quảng cáo,
xóa sửa user.

Quy trình thực hiện: Giao diện chính khi mở website ra là giao diện lựa
chọn. Một là trình phát, hai là giao diện điều khiển. Khi click vào giao diện
hát karaoke thì cho ra một trình phát auto play, dưới trình phát là có button
chọn bài và điều khiển bài. Tại đây các bài hát trending, và các bài hát theo
thể loại, được hát nhiều sẽ được hiện thị. Có các combobox lựa chọn filter
theo từng thể loại nhạc. Khi chọn bài, bài hát sẽ được lưu vào bài đã chọn.
Ngồi ra cịn các chức năng ưu tiên bài hát tiếp theo, điều chỉnh âm lượng,
tạm dừng bài, và next bài.
Nêú chọn giao diện điều khiển, web sẽ show ra giao diện ta điền mã phịng
được hiển thị trên trình phát, sau đó sẽ kết nối trực tiếp với phịng player
đang phát. Tương tự và đầy đủ như các chức năng ở giao diện hát karaoke.
Ngoài ra trên thanh tabbar cịn có các mục xem video khác nhau, và có các
chức năng đăng nhập admin.

Trang 8


CHƯƠNG 2: PHÂN TÍCH

I.

Giải pháp phân tích
Sau khi thu thập thơng tin, dựa theo u cầu của bài tốn đặt ra, có thể liệt
kê những chức năng chính của chương trình.
1. Chức năng và yếu cầu đặt ra
- Chức năng hát, lưu trữ thông tin.
- Chức năng dừng, chạy, chọn bài, ưu tiên bài, xóa bài đã chọn
- Chức năng quản lý user.
- Chức năng tìm kiếm bài hát.
- Chức năng xem video không quảng cáo
2.

Các thực thể
a. Giới thiệu các thực thể trong hệ thống

Trang 9


 Thực thể admin
 Thực thể user
 Thực thể phòng
 Thực thể contact
b. Liệt kê các thành phần thực thể

1. Thực thể admin
- Tên thực thể: admin
+Các thuộc tính của thực thể:
 password
2. Thực thể user
- Tên thực thể: user
+Khoá thực thể: uid
+Các thuộc tính của thực thể:
 email
 listFavorite
 name
 password
 phone
 surname
3. Thực thể phòng
- Tên thực thể: giohang
+Khố thực thể: code
+Các thuộc tính của thực thể:
 code
 ip
Trang 10


 oknext
 time_created
 volume
4. Thực thể contact
- Tên thực thể: contact
+Khố thực thể: uid
+Các thuộc tính của thực thể:

 email
 address
 message
 name
 phone

CHƯƠNG 3: THIẾT KẾ
I, Sơ đồ use case:
1. Danh sách các actor và usecase tương ứng:

STT

Actor

Các usecase

1

Guest



Đăng ký tài khoản

2

User

3

Admin







Đăng nhập/ Đăng xuất
Chỉnh sửa thông tin tài khoản
Đổi mật khẩu
hát
Quản lý content

2. Sơ đồng tổng quát :

Trang 11


II.

Đặc tả use case
1. use case đăng nhập :

Trang 12


Tên chức năng

Đăng kí

Tóm tắt

Use-case được tạo ra để người truy cập web có thể
đăng kí tài khoản truy cập hện thống.

Dịng sự kiện chính

1. Hệ thống hiển thị form đăng ký.
2. Người dùng nhập đầy đủ thông tin đăng kí mà
hệ thống yêu cầu và nhấn “Đăng kí”.
3. Hệ thống kiểm tra thơng tin đăng kí
(Dịng sự kiện khác: Thơng tin đăng kí khơng
hợp lệ).
4. Hệ thống hiển thị giao diện trang chủ web.
1. Thơng tin đăng kí khơng hợp lệ ( Trường

Dòng sự kiện khác

hợp mail/ SDT đã được đăng kí trước đó) :

Hệ thống hiển thị thơng báo thơng tin đăng kí
khơng hợp lệ và u cầu đăng kí lại.
Các u cầu đặc biệt

Khơng có

Trạng thái hệ thống trước Actor: tất cả các actor
khi thực thiện use case

Điều kiện: khơng có

Trạng thái hệ thống sau Người dùng đăng kí thành cơng, có thể truy cập
khi thực hiện use case

vào hệ thống, có thể sử dụng các quyền mà hệ
thống cho phép.

Điểm mở rộng

Khơng có

2. use case đăng xuất:
Tên chức năng

Đăng Xuất

Tóm tắt

Use-case được tạo ra để người dùng thoát khỏi tài
khoản cũng như thoát khỏi hệ thống.

Trang 13


Dịng sự kiện chính

1. Người dùng chọn chức năng đăng xuất.
2. Hệ thống xác nhận yêu cầu người dùng, người
dùng đăng xuất thành cơng

Dịng sự kiện khác

Khơng

Các u cầu đặc biệt

Khơng có

Trạng thái hệ thống trước Actor: tất cả các user hệ thống
khi thực thiện use case

Điều kiện: khơng có

Trạng thái hệ thống sau Người dùng thốt hồn tồn khỏi hệ thống,
khi thực hiện use case

muốn thực hiện các chức năng xem sản phẩm
và mua hàng phải đăng nhập lại.

Điểm mở rộng

Khơng có

3. use case đổi mật khẩu :
Tên chức năng

Đổi mật khẩu

Tóm tắt

Use-case được tạo ra để người dùng muốn đổi mật
khẩu tài khoản của mình.

Dịng sự kiện chính

1. Người dùng chọn chức năng đổi mật khẩu.
2. Hệ thống yêu cầu người dùng nhập mật khẩu
hiện tại và mật khẩu mới.
3. Người dùng nhập đầy đủ theo yêu cầu hện thống.
4. Hệ thống thông báo đổi mật khẩu thành cơng.

Dịng sự kiện khác

Người dùng nhập mật khẩu hiện tại khơng chính
xác.

Các u cầu đặc biệt

Khơng có

Trạng thái hệ thống trước Actor: tất cả các user hệ thống
khi thực thiện use case

Điều kiện: khơng có

Trạng thái hệ thống sau Hệ thống sẵn sàng cho chức năng đổi mật khẩu
khi thực hiện use case

tiếp theo.

Điểm mở rộng

Khơng có

Trang 14


4. Use case Đổi thông tin tài khoản:
Tên chức năng

Đổi thơng tin cá nhân tài khoản

Tóm tắt

Use-case được tạo ra để người dùng muốn thay đổi
thông tin cá nhân tài khoản.

Dịng sự kiện chính

1. Người dùng chọn chức năng thay đổi thông tin
cá nhân.
2. Hệ thống hiển thị giao diện thay đổi thông tin cá
nhân yêu cầu người dùng nhập đầy đủ.
3. Người dùng nhập đầy đủ theo yêu cầu hện thống.
4. Hệ thống thơng báo thay đổi thành cơng.

Dịng sự kiện khác

Thông tin thay đổi không hợp lệ.

Các yêu cầu đặc biệt

Khơng có

Trạng thái hệ thống trước Actor: tất cả các user hệ thống
khi thực thiện use case

Điều kiện: khơng có

Trạng thái hệ thống sau Hệ thống sẵn sàng cho chức năng thay đổi
khi thực hiện use case

thông tin cá nhân tiếp theo.

Điểm mở rộng

Khơng có

III.

Mơ hình cơ sở dữ liệu:

Trang 15


IV.

Thiết kế Giao diện website hát online:
Đây là bước đầu tiên để vào hệ thống

Ta có các danh mục hát và remote, ngồi ra cịn các thành phần trên tabbar

Trang 16


Giao diện karaoke :

Giao diện remote :

Trang 17


Nhập mã số phòng hát

V.

Giao diện chức năng
1. Hiển thị giao diện user

Trang 18


Sau khi chọn karaoke web sẽ show ra màn hình trình phát, trong trình phát có chọn
bài, và các chức năng tìm kiếm, tạm dừng, chạy và next bài.
Sau khi chọn remote thì ra màn hình nhập phịng kết nối mã số, sau đó có các chức
năng điều khiển như bên kara
Giao diện karaoke youtube :

Giao diện bên liên hệ :

Trang 19


Giao diện bên đăng nhập :

Giao diện bên đăng kí :

Trang 20


Giao diện điều khiển chính trên web

Giao diện điều chỉnh chính trong remote

Trang 21


CHƯƠNG 4: THỰC THI VÀ PHÁT TRIỂN

I.

Môi trường phát triển và triển khai
1. Môi trường phát triển:
-

Website

-

Hệ quản trị csdl và ngơn ngữ lập trình Nodejs.

-

Sử dụng các ngơn ngữ như html,css,javascript,reactjs, bootstrap để thiết
kế giao diện và xử lý.

-

Sử dụng hệ quản trị csdl Mysql để quản trị csdl cho đề tài.

2. Môi trường triển khai ứng dụng:
-

Hệ điều hành: Microsoft Windows

-

VScode, Chrome, Các cơng cụ trình duyệt web,...

CHƯƠNG 5: TESTING
I.

Test chức năng trình phát:

Trang 22


-

Chọn mục karaoke, tìm kiếm video và chọn bài hát

-

Chức năng điều khiển khi nhập đúng số phòng:

Trang 23


-

Màn hình kết nối điều khiển:

-

Trong màn hình này có thể chọn các bài hát xóa và ưu tiên, ngồi ra
chức năng u thích có tích hợp trong đăng nhập.

Trang 24


CHƯƠNG 6: KẾT LUẬN

I.

Kết quả đạt được
1. Về kiến thức và học tập
Về kiến thức & học tập Nắm vững kiến thức lý thuyết cơ bản phục vụ tốt
cho việc thiết kế chương trình. Thiết kế được CSDL tương đối hồn
chỉnh, đáp ứng tốt cho việc viết chương trình. Xây dựng được một

website quản lý với đầy đủ các chức năng cần thiết cho việc quản lý bán
hàng, minh họa tốt cho các vấn đề lý thuyết đã trình bày. Củng cố lại các
kiến thức đã được học, đặc biệt là kỹ năng phân tích, giải quyết vấn đề.
Biết cách áp dụng các kiến thức lý thuyết vào ứng dụng thực tế.
2. Về phần mềm
Hoàn thiện đầy đủ chức năng cơ bản của một phầm mềm : thêm, sửa,
xóa, cập nhật thông tin. Thống kê. Báo cáo ,thống kê. Giao diện chương
trình thân thiện, dễ sử dụng, trực quan và linh hoạt.

II.

Hạn chế của đề tài
Do thời gian nghiên cứu còn hạn chế, nên việc nghiên cứu các vấn đề còn
chưa đầy đủ. Kiến thức thực tế và kiến thức lập trình cịn hạn chế, nên tính
chun nghiệp của chương trình chưa cao, bắt lỗi chưa kỹ ở một số chỗ và
một số tính năng chưa được tối ưu. Chương trình chưa thực sự đầy đủ các
tính năng như mong muốn.

III.

Hướng phát triển
Thiết kế chương trình và chỉnh sửa giao diện mang tính chun nghiệp hơn.
Tình hiểu các biện pháp về bảo mật cho ứng dụng quản lý

Trang 25