Xây dựng WEBSITE nghe nhạc trực tuyến
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.04 MB, 52 trang )
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 2
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
Sinh viên thực hiện 1 :
Nguyễn Ngọc Sơn
Mã sinh viên 1
:
18521350
Sinh viên thực hiện 2
:
Phạm Hoàng Nhật Trường
Mã sinh viên 2
:
18521570
Lớp
:
SE122.M11.PMCL
Bộ môn
:
Phát triển phần mềm
TP HCM, tháng 12 năm 2021
TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN
CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM
KHOA CÔNG NGHỆ PHẦN MỀM
Độc lập – Tự do – Hạnh phúc
NHIỆM VỤ ĐỒ ÁN MÔN HỌC
Họ và tên SV 1: Nguyễn Ngọc Sơn........................ MSSV: 18521350 ......................
Họ và tên SV 2: Phạm Hoàng Nhật Trường......... MSSV: 18521570 ......................
Lớp: SE122.M11.PMCL .....................................
Tên đề tài: XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN .....................
Giảng viên giảng dạy: ThS. Trần Thị Hồng Yến .....................................................
Thời gian thực hiện: 09/2021 đến 12/2021
Nhiệm vụ đồ án môn học:
1. Xây dựng CSDL trong NoSQL
2. Thiết kế giao diện website
3. Lập trình xử lý phần mềm với các chức năng sau:
o Nghe nhạc theo bài hát, theo album, tải nhạc
o Thêm bài hát yêu thích
o Thay đổi background toàn website
o Trang quản trị
4. Nộp file nén (*.rar) lưu sản phẩm đề tài bao gồm:
-
File báo cáo word (*.docx)
-
File thuyết trình (*.pptx)
-
Thư mục chứa dự án (project), các class thư viện, CSDL, hình ảnh, ...)
Tp.HCM, ngày 25 tháng 12 năm 2021
GIẢNG VIÊN GIẢNG DẠY
(Ký và ghi rõ họ tên)
ThS. Trần Thị Hồng Yến
2
BẢNG PHÂN CÔNG THỰC HIỆN ĐỒ ÁN MÔN HỌC
Họ tên SV1: Nguyễn Ngọc Sơn
Họ tên SV2: Phạm Hoàng Nhật Trường
MSSV: 18521350
MSSV: 18521570
1. Cơng việc 1: Thiết kế các màn
hình(Home, khám phá, xếp hạng).
2. Cơng việc 2: Thêm bài hát u
thích, tải nhạc.
3. Công việc 3: Thực hiện chức
năng nghe nhạc theo bài hát.
4. Tạo Powerpoint báo cáo, viết báo
cáo.
1. Công việc 1: Thiết kế các màn
hình(Radio, theo dõi, player).
2. Cơng việc 2: Nghe nhạc theo
album, thay đổi background.
3. Công việc 3: Trang quản trị.
4. Công việc 4: Viết báo cáo.
SV thực hiện 1
SV thực hiện 2
(Ký tên)
(Ký tên)
NGUYỄN NGỌC SƠN
PHẠM HOÀNG NHẬT TRƯỜNG
3
LỜI CẢM ƠN
Trong quá trình làm bài báo cáo, chúng 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è.
Chúng 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, chúng 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, chúng em xin chân thành cảm ơn gia đình và bạn bè, đã luôn 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.
Nhóm sinh viên thực hiện
NGUYỄN NGỌC SƠN – PHẠM HỒNG NHẬT TRƯỜNG
4
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
Tp.HCM, ngày … tháng 12 năm 2021
GVHD
ThS. Trần Thị Hồng Yến
5
MỤC LỤC
Chương 1: GIỚI THIỆU ĐỀ TÀI ......................................................................... 14
1.1. Tên đề tài: ................................................................................................ 14
1.2. Mô tả đề tài: ............................................................................................. 14
1.3. Lý do chọn đề tài: ..................................................................................... 14
1.4. Mục đích của website ............................................................................... 14
1.4.1. Đối tượng của website ........................................................................... 14
1.4.2. Đặc điểm ............................................................................................... 14
1.5. Đối tượng nguyên cứu .............................................................................. 15
1.6. Phạm vi nghiên cứu .................................................................................. 16
1.7. Phương pháp nguyên cứu ......................................................................... 16
Chương 2: GIỚI THIỆU CÔNG NGHỆ ............................................................... 17
2.1. Thiết kế giao diện (Bootstrap) .................................................................. 17
2.1.1. Giới thiệu .............................................................................................. 17
2.1.2. Lịch sử phát triển .................................................................................. 17
2.1.3. Lí do sử dụng ........................................................................................ 17
2.1.4. Cấu trúc và tình năng ............................................................................ 18
2.1.5. Bootstrap 4 grid system ......................................................................... 19
2.1.6. Cài dặt và áp dụng................................................................................. 20
2.2. jQuery: ..................................................................................................... 20
2.2.1. Giới thiệu .............................................................................................. 20
2.2.2. Lịch sử .................................................................................................. 21
2.2.3. Tính năng .............................................................................................. 22
2.2.4. Ưu điểm ................................................................................................ 22
6
2.2.5. Cài đặt................................................................................................... 22
Chương 3: TỔNG QUAN ...................................................................................... 24
3.1. Phân tích đánh giá hướng nghiên cứu của các tác giả khác (NhacCuaTui,
Zing MP3,Spotify) ............................................................................................. 24
3.1.1. Những hướng nghiên cứu chính về vấn đề cửa đề tài ............................ 24
3.1.1.1.
Nghe nhạc .......................................................................................... 24
3.1.1.2.
Tạo playlist ........................................................................................ 24
3.1.2. Những phương pháp đã được sử dụng ................................................... 24
3.1.2.1.
Phương pháp thu thập thông tin ......................................................... 24
3.1.2.2.
Phương pháp xử lí thơng tin ............................................................... 24
3.1.3. Kết quả đạt được ................................................................................... 24
3.2. Các vấn đề cần tập trung và giải quyết ...................................................... 24
3.3. Kế hoạch .................................................................................................. 25
Chương 4: PHÂN TÍCH THIẾT KẾ ..................................................................... 26
4.1. Sơ đồ cơ cấu tố chức: ............................................................................... 26
4.2. Use Case .................................................................................................. 26
4.2.1. Các tác nhân của hệ thống ..................................................................... 26
4.2.2. Các chức năng của hệ thống .................................................................. 26
4.2.3. Đặc tả Use Case .................................................................................... 27
4.2.3.1.
UC đăng ký ........................................................................................ 27
4.2.3.2.
UC đăng nhập .................................................................................... 27
4.2.3.3.
UC xem thông tin .............................................................................. 28
4.2.3.4.
UC sửa thông tin cá nhân ................................................................... 29
4.2.3.5.
UC nghe nhạc .................................................................................... 29
4.2.3.6.
UC tạo playlist ................................................................................... 30
7
4.2.3.7.
UC Download .................................................................................... 31
4.2.3.8.
UC Upload......................................................................................... 31
4.3. Activity diagram....................................................................................... 32
4.3.1. Đăng ký ................................................................................................ 32
4.3.2. Đăng nhập ............................................................................................. 33
4.3.3. Tìm kiếm .............................................................................................. 33
4.3.4. Xem thông tin cá nhân .......................................................................... 35
4.3.5. Sửa thông tin cá nhân ............................................................................ 35
4.3.6. Upload nhạc .......................................................................................... 36
4.3.7. Download nhạc ..................................................................................... 36
4.3.8. Tạo playlist ........................................................................................... 37
4.4. Sequence diagram .................................................................................... 37
4.4.1. Đăng ký ................................................................................................ 37
4.4.2. Đăng nhập ............................................................................................. 38
4.4.3. Tìm kiếm .............................................................................................. 38
4.4.4. Xem thông tin cá nhân .......................................................................... 39
4.4.5. Sửa thông tin cá nhân ............................................................................ 39
4.4.6. Upload nhạc .......................................................................................... 40
4.4.7. Download nhạc ..................................................................................... 40
4.4.8. Tạo playlist ........................................................................................... 41
4.5. Class diagram ........................................................................................... 41
4.6. ER diagram .............................................................................................. 42
4.7. Domain model .......................................................................................... 42
4.8. Workflow ................................................................................................. 43
Chương 5: THIẾT KẾ KIẾN TRÚC ...................................................................... 44
8
5.1. Kiến trúc hệ thống .................................................................................... 44
5.2. Mô tả các thành phần trong hệ thống ........................................................ 44
5.3. Mơ hình sử dụng ...................................................................................... 45
5.3.1. Presentation tier .................................................................................... 45
5.3.2. Logic tier .............................................................................................. 45
5.3.3. Data tier ................................................................................................ 45
Chương 6: THỰC HIỆN........................................................................................ 47
6.1. Màn hình chính: ....................................................................................... 47
6.1.1. Giao diện .............................................................................................. 47
6.1.2. Mơ tả .................................................................................................... 47
6.2. Màn hình xếp hàng ................................................................................... 47
6.2.1. Giao diện .............................................................................................. 47
6.2.2. Mơ tả .................................................................................................... 47
6.3. Màn hình radio ......................................................................................... 48
6.3.1. Giao diện .............................................................................................. 48
6.3.2. Mô tả .................................................................................................... 48
6.4. Màn hình theo dõi .................................................................................... 48
6.4.1. Giao diện .............................................................................................. 48
6.4.2. Mơ tả .................................................................................................... 49
6.5. Màn hình cá nhân ..................................................................................... 49
6.5.1. Giao diện .............................................................................................. 49
6.5.2. Mơ tả .................................................................................................... 49
6.6. Màn hình thay đổi giao diện ..................................................................... 49
6.6.1. Giao diện .............................................................................................. 49
6.6.2. Mô tả .................................................................................................... 50
9
6.7. Màn hình chi tiết bài hát ........................................................................... 50
6.7.1. Giao diện .............................................................................................. 50
6.7.2. Mô tả .................................................................................................... 50
KẾT LUẬN ........................................................................................................... 51
7.1. Ưu điểm của đồ án: .................................................................................. 51
7.2. Hạn chế của đồ án: ................................................................................... 51
7.3. Hướng phát triển của đồ án:...................................................................... 51
TÀI LIỆU THAM KHẢO ..................................................................................... 52
10
MỤC LỤC HÌNH ẢNH
Hình 2.1. Bootstrap 4 grid system .......................................................................... 19
Hình 3.1. Kế hoạch ................................................................................................ 25
Hình 4.1. Cơ cấu tổ chức ....................................................................................... 26
Hình 4.2. Activity đăng ký .................................................................................... 33
Hình 4.3. Activity đăng nhập ................................................................................. 33
Hình 4.4 Activity tìm kiếm .................................................................................... 33
Hình 4.5. Activity xem thơng tin cá nhân .............................................................. 35
Hình 4.6. Activity sửa thơng tin cá nhân ................................................................ 35
Hình 4.7. Activity upload nhạc .............................................................................. 36
Hình 4.8. Activity download nhạc ......................................................................... 36
Hình 4.9. Activity tạo playlist ................................................................................ 37
Hình 4.10. Sequence đăng ký ................................................................................ 37
Hình 4.11. Sequence đăng nhập ............................................................................. 38
Hình 4.12. Sequence tìm kiếm ............................................................................... 38
Hình 4.13. Sequence xem thơng tin cá nhân .......................................................... 39
Hình 4.14. Sequence sửa thơng tin cá nhân ............................................................ 39
Hình 4.15. Sequence upload nhạc .......................................................................... 40
Hình 4.16. Sequence download nhạc ..................................................................... 40
Hình 4.17. Sequence tạo playlist ............................................................................ 41
Hình 4.17. Class diagram....................................................................................... 41
Hình 4.18. ERD ..................................................................................................... 42
Hình 4.19. Domain model ..................................................................................... 42
Hình 4.20. Workflow ............................................................................................. 43
11
Hình 5.1. Kiến trúc hệ thống.................................................................................. 45
Hình 6.1. Màn hình home ...................................................................................... 47
Hình 6.2. Màn hình xếp hạng................................................................................. 47
Hình 6.3. Màn hình radio nổi bật ........................................................................... 48
Hình 6.4. Màn hình theo dõi ca sĩ .......................................................................... 48
Hình 6.5. Màn hình các bài hả u thích, playlist................................................... 49
Hình 6.6. Màn hình đổi background ...................................................................... 49
Hình 6.7. Màn hình play nhạc ................................................................................ 50
12
MỤC LỤC BẢNG
Bảng 4.1. Danh sách tác nhân ................................................................................ 26
Bảng 4.2. UC đăng ký ........................................................................................... 27
Bảng 4.3. UC đăng nhập ........................................................................................ 28
Bảng 4.4. UC xem thông tin .................................................................................. 29
Bảng 4.5. UC Sửa thông tin ................................................................................... 29
Bảng 4.6. UC nghe nhạc ........................................................................................ 30
Bảng 4.7. UC tạo playlist....................................................................................... 31
Bảng 4.8. UC download ........................................................................................ 31
Bảng 4.9. UC upload ............................................................................................. 32
Bảng 5.1. Mô tả các thành phần ............................................................................. 45
13
Chương 1:
GIỚI THIỆU ĐỀ TÀI
1.1. Tên đề tài:
XÂY DỰNG WEBSITE NGHE NHẠC TRỰC TUYẾN
1.2. Mô tả đề tài:
Website nghe nhạc TSMusic là một website nghe nhạc xây dựng trên nền tảng mạng
Internet cho phép người dùng nghe nhạc miễn phí, đăng tải, chia sẻ bài hát các bài
hát yêu thích. Tại đây luôn cập nhật những ca khúc mới, hot nhất trên thị trường hiện
tại. Với nhu cầu mở rộng kinh doanh, quảng bả và nâng cao chất lượng của website,
đặc biệt là mảng kinh doanh online, vì vậy cần một website giới thiệu, nghe, đăng tải
nhạc trực tuyến cũng như hỗ trợ khách hàng các thông tin cần thiết.
Đây là bài toán quản lý một nền tảng nghe nhạc trực tuyến, áp dụng trong phạm vi
Việt Nam do đó chi phí và mức đầu tư ở mức trung bình.
1.3. Lý do chọn đề tài:
Ngày nay Internet ngày càng được mở rộng, phổ biến hơn, con người đặc biệt là giới
trẻ ln ln trong tay của mình chiếc smartphone để để làm việc, lướt web, xem
phim...Nghe nhạc cũng đã trở thành một phần không thể thiếu trong cuộc sống. Chúng
ta nghe nhạc khi đi làm, đi chơi, thư giãn hoặc khi chúng ta muốn cập nhật những
giai điệu mới nhất của thần tượng. Điều đó thật 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.
1.4. Mục đích của website
1.4.1. Đối tượng của website
-
Quản trị viên
-
Người dùng
-
Các cơ quan xác định bản quyền
-
Các bên cung cấp dịch vụ thứ ba
1.4.2. Đặc điểm
14
Xây dựng một website nghe nhạc trực tuyến đơn giản, thân thiện, màu sắc bắt mắt,
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.
Kiểm tra các số liệu chỉ định rõ về:
-
Không gian: trên nền tảng web
-
Thời gian: hoạt động 24/24 (trừ một số thời điểm bảo trì trang web)
-
Con người: Lập trình viên, Kiểm thử viên, Người dùng
-
Cách thức sử dụng sản phẩm: Ứng dụng hướng đến mọi đối tượng (không yêu
cầu phải có trình độ về tin học) => Cần thiết kế sao cho dễ sử dụng và dễ tiếp
cần với người dùng
Phạm vi địa lý:
-
Sử dụng tập trung đối với quản trị viên.
-
Sử dụng phân tán đối với khách hàng – người dùng phổ thông: với các chức
năng liên quan đến vấn đề nghe nhạc.
Khách hàng: tất cả mọi người.
Cách thức sử dụng sản phẩm: được sử dụng trên trình duyệt web, tất cả thiết bị có
trình duyệt web đều có thể sử dụng,
Xác định các thành phần phi chức năng:
-
Bố cục: dễ nhìn, dễ sử dụng vì ứng dụng cần tiếp cận mọi đối tượng, khơng u
cầu trình độ tin học
-
Bảo mật thông tin khách hàng: do việc giao dịch diễn ra trực tuyến => ưu tiên
bảo mật thông tin cá nhân và thông tin tài khoản khách hàng
-
Khả năng chịu tải giờ cao điểm: có thể xử lý đồng thời vài trăm nghìn đến vài
triệu yêu cầu truy cập ứng dụng cùng thời điểm
-
Khả năng mở rộng tốt: có thể mở rộng một cách dễ dàng để đáp ứng số lượng
người dùng lớn
1.5. Đối tượng nguyên cứu
-
Đố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…
15
-
Khách thể nghiên cứu: các website nổi bật hiện nay như ZingMP3,
NhacCuaTui, Spotify.
1.6. 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.
-
Lĩnh vực nghiên cứu: các website nghe nhạc trực tuyến trên Internet.
1.7. Phương pháp nguyên cứu
Sử dụng phương pháp nghiên cứu thu thập thông tin:
-
Đọc tài liệu về các vấn đề và cách giải quyết cùng đề tài nghiên cứu của các
tác giả khác
-
Nghiên cứu, tham khảo về các đối thủ hiện tại.
-
Đọc về công nghệ được áp dụng để giải quyết các vấn đề.
-
Khảo sát người dùng về các vấn đề của nghiên cứu.
16
Chương 2:
GIỚI THIỆU CÔNG NGHỆ
2.1. Thiết kế giao diện (Bootstrap)
2.1.1. Giới thiệu
Bootstrap là một framework bao gồm các HTML, CSS và JavaScript template
dùng để phát triển website chuẩn responsive
Bootstrap cho phép q trình thiết kế website diễn ra nhanh chóng và dễ dàng hơn
dựa trên những thành tố cơ bản sẵn có như typography, forms, button, tables, grids,
navigations, image carousels…
Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để
tạo ra một mẫu website hồn chỉnh, Với các thuộc tính về giao diện được quy định
sẵn như kích thước, màu sắc, độ cao, độ rộng… các designer có thể sáng tạo nhiều
sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework này
trong quá trình thiết kế giao diện website
2.1.2. Lịch sử phát triển
Bootstrap là sản phẩm của Mark Otto và Jacob Thornton tại Twitter. Nó được xuất
bản như là một mã nguồn mở vào ngày 19/8/2011 trên GitHub. Tên gọi ban đầu là
Twitter Blueprint.
Đến ngày 31/1/2012, Bootstrap phiên bản 2 đã được phát hành. Bootstrap 2 được
bổ sung bố cục lưới 12 cột với thiết kế tùy chỉnh đáp ứng cho nhiều màn hình kích
thước. Tiếp nối sự thành công của phiên bản 2, Bootstrap 3 ra đời vào ngày
19/8/2013 với giao diện tương thích với smartphone.
Chỉ 3 năm sau ngày ra mắt, Bootstrap đã trở thành No.1 project trên GitHub. Vào
tháng 10/2014, Mark Otto công bố phiên bản Bootstrap 4 đang được phát triển.
Phiên bản alpha đầu tiên của Bootstrap 4 đã được triển khai vào tháng 8/2015.
Phiên bản mới nhất của Bootstrap được giới thiệu đến người dùng là Bootstrap
4.3.1. Cho đến nay, Bootstrap vẫn là một trong những framework thiết kế website
có lượng người dùng lớn nhất
2.1.3. Lí do sử dụng
17
Hiện nay có nhiều ứng dụng thiết kế website tuy nhiên Bootstrap vẫn có khả năng
cạnh tranh cao là nhờ những đặc điểm nổi bật sau:
-
Dễ dàng thao tác
-
Tùy chỉnh dễ dàng
-
Chất lượng sản phẩm đầu ra hoàn hảo
-
Độ tương thích cao
Dễ dàng thao tác
Cơ chế hoạt động của Bootstrap là dựa trên xu hướng mã nguồn mở HTML, CSS và
Javascript. Người dùng cần trang bị kiến thức cơ bản 3 mã này mới có thể sử dụng
Bootstrap hiệu quả. Bên cạnh đó, các mã nguồn này cũng có thể dễ dàng thay đổi và
chỉnh sửa tùy ý.
Tùy chỉnh dễ dàng
Bootstrap được tạo ra từ các mã nguồn mở cho phép designer linh hoạt hơn. Giờ đây
có thể lựa chọn những thuộc tính, phần tử phù hợp với dự án họ đang theo đuổi. CDN
Bootstrap còn giúp bạn tiết kiệm dung lượng vì khơng cần tải mã nguồn về máy.
Chất lượng sản phẩm đầu ra hoàn hảo
Bootstrap là sáng tạo của các lập trình viên giỏi trên khắp thế giới. Bootstrap đã được
nghiên cứu và thử nghiệm trên các thiết bị. Được kiểm tra nhiều lần trước khi đưa
vào sử dụng. Do đó, khi chọn Bootstrap, bạn có thể tin rằng mình sẽ tạo nên những
sản phẩm với chất lượng tốt nhất.
Độ tương thích cao
Điểm cộng lớn nhất của Bootstrap là khả năng tương thích với mọi trình duyệt và nền
tảng. Đây là một điều cực kì quan trọng và cần thiết trong trải nghiệm người dùng.
Sử dụng Grid System cùng với hai bộ tiền xử lý Less và Sass, Bootstrap mặc định hỗ
trợ Responsive và ưu tiên cho các giao diện trên thiết bị di động hơn. Bootstrap có
khả năng tự động điều chỉnh kích thước trang website theo khung browser. Mục đích
để phù hợp với màn hình của máy tính để bàn, tablet hay laptop.
2.1.4. Cấu trúc và tình năng
Bootstrap chứa các tập tin JavaScript, CSS và fonts đã được biên dịch và nén lại.
Ngoài ra, Bootstrap được thiết kế dưới dạng các model. Do đó, dễ dàng tích hợp với
18
hầu hết các mã nguồn mở như WordPress, Joomla, Magento, …Trong đó, Bootstrap
mang đến nhiều chức năng nổi bật:
-
Bootstrap cho phép người dùng truy cập vào thư viện lớn các thành tố dùng để
tạo nên giao diện của một website hoàn chỉnh như font, typography, form, table,
grid…
-
Bootstrap cho phép bạn tùy chỉnh framework của website trước khi tải xuống
và sử dụng nó tại trang web của khung.
-
Tái sử dụng các thành phần lặp đi lặp lại trên trang web.
-
Bootstrap được tích hợp jQuery. Bạn chỉ cần khai báo chính xác các tính năng
trong q trình lập trình web của bạn.
-
Định nghĩa glyphicons nhằm giảm thiểu việc sử dụng hình ảnh làm biểu tượng
và tăng tốc độ tải trang.
2.1.5. Bootstrap 4 grid system
Bootstrap 4 Grid System là mấu chốt cho khả năng tương thích giao diện (web
responsive) của Bootstrap. Khi khởi động Bootstrap, giao diện của nó sẽ hiển thị dưới
dạng lưới (grid). Bootstrap được chia thành 12 cột đặt trong một class row. Trong đó,
mỗi cột sẽ bao gồm các Padding tương ứng với từng độ phân giải của mỗi thiết bị
(điện thoại, tablet, máy tính).
Mơ hình Grid System của Bootstrap 4:
Hình 2.1. Bootstrap 4 grid system
Bootstrap 4 Grid System có 5 lớp:
-
.col- (extra small devices – chiều rộng màn hình < 576px)
-
.col-sm- (small devices – chiều rộng màn hình >= 576px)
-
.col-md- (medium devices – chiều rộng màn hình >= 768px)
-
.col-lg- (large devices – chiều rộng màn hình >= 992px)
19
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
.col-xl- (xlarge devices – chiều rộng màn hình >= 1200px)
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
2.1.6. Cài dặt và áp dụng
Nhúng Bootstrap vào website
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
Learning Bootstrap
<script src=" /><script src="js/bootstrap.min.js"></script>
</body>
</html>
2.2. jQuery:
2.2.1. Giới thiệu
jQuery là thư viện được viết từ JavaScript, jQuery giúp xây dựng các chức năng bằng
Javascript dễ dàng, nhanh và giàu tính năng hơn.
jQuery được tích hợp nhiều module khác nhau. Từ module hiệu ứng cho đến module
truy vấn selector. jQuery được sử dụng đến 99% trên tổng số website trên thế giới.
Vậy các module chính của jQuery là gì?
20
Các module phổ biến của jQuery bao gồm:
-
Ajax – xử lý Ajax
-
Attributes – Xử lý các thuộc tính của đối tượng HTML
-
Effect – xử lý hiệu ứng
-
Event – xử lý sự kiện
-
Form – xử lý sự kiện liên quan tới form
-
DOM – xử lý Data Object Model
-
Selector – xử lý luồng lách giữa các đối tượng HTML
jQuery không phải là một ngơn ngữ lập trình riêng biệt mà hoạt động liên kết với
JavaScript. Với jQuery, bạn có thể làm được nhiều việc hơn mà lại tốn ít cơng sức
hơn. jQuery cung cấp các API giúp việc duyệt tài liệu HTML, hoạt ảnh, xử lý sự kiện
và thao tác AJAX đơn giản hơn. jQuery hoạt động tốt trên nhiều loại trình duyệt khác
nhau. Một trong những đối thủ nặng ký của jQuery đó là JS Framework.
2.2.2.
Lịch sử
jQuery được phát hành vào tháng 1 năm 2006 bởi John Resig tại BarCamp NYC. Nó
được duy trì và phát triển bởi một nhóm các nhà phát triển của Google đứng đầu là
Timmy Wilson.
Dưới đây là lịch sử các phiên bản của jQuery:
-
1.0 26,August,2006
-
1.1 14,January,2007
-
1.2 10, September, 2007
-
1.3 14, January, 2009
-
1.4 14, January, 2010
-
1.5 31, January, 2011
-
1.6 3, May, 2011
-
1.7 3, November, 2011
-
1.8 9, August, 2012
-
1.9 15, January, 2013
-
1.10 24,May, 2013
-
1.11 24, January, 2014
-
2.0 18, April, 2013
21
-
2.1 24, January, 2014
2.2.3.
-
Tính năng
Gọn nhẹ: jQuery là một thư viện khá gọn nhẹ – có kích cỡ khoảng 19KB
(gzipped).
-
Tương thích đa nền tảng: Nó tự động sửa lỗi và chạy được trên mọi trình duyệt
phổ biến như Chrome, Firefox, Safari, MS Edge, IE, Android và iOS.
-
Dễ dàng tạo Ajax: Nhờ thư viện jQuery, code được viết bởi Ajax có thể dễ dàng
tương tác với server và cập nhật nội dung tự động mà không cần phải tải lại
trang.
-
Xử lý nhanh nhạy thao tác DOM: jQuery giúp lựa chọn các phần tử DOM để
traverse (duyệt) một cách dễ dàng, và chỉnh sửa nội dung của chúng bằng cách
sử dụng Selector mã nguồn mở, mà còn được gọi là Sizzle.
-
Đơn giản hóa việc tạo hiệu ứng: Giống với code snippet có hiệu ứng animation,
nó phủ các dịng code và bạn chỉ việc thêm biến/nội dung vào thôi.
-
Hỗ trợ tốt phương thức sự kiện HTML: Xử lý sự kiện − jQuery xử lý các sự
kiện đa dạng mà không làm cho HTML code trở nên lộn xộn với các Event
Handler.
2.2.4.
Ưu điểm
-
jQuery xử lý code rất nhanh và có khả năng mở rộng.
-
jQuery tạo điều kiện cho người dùng viết các mã chức năng bằng các dòng tối
thiểu.
-
jQuery cải thiện hiệu suất lập trình web.
-
jQuery phát triển các ứng dụng có tương thích với trình duyệt.
-
Hầu hết các tính năng mới của trình duyệt mới đều được jQuery sử dụng.
2.2.5.
Cài đặt
Cách thứ nhất là tải thư viện jQuery từ trang Lựa chọn
phiên bản nào tuỳ thuộc vào hai yếu tố: trình duyệt web mà bạn đang sử dụng và nơi
bạn dùng jQuery. Sau đó, bạn có thể include thư viện jQuery vào trong HTML file.
Cách thứ hai là sử dụng CDN:
22
Với cách làm này thay vì tải thư viện jQuery về web hosting hay máy chủ, chúng ta
sẽ liên kết đến thư viện jQuery của một số nhà cung cấp như cộng đồng jQuery,
Google hay Microsoft. Các CDN phổ biến và tin cậy nhất hiện nay là:
-
jQuery CDN
-
Google CDN
-
Microsoft CDN
23
Chương 3:
TỔNG QUAN
3.1.
Phân tích đánh giá hướng nghiên cứu của các tác giả khác
(NhacCuaTui, Zing MP3,Spotify)
3.1.1. Những hướng nghiên cứu chính về vấn đề cửa đề tài
3.1.1.1.
Nghe nhạc
Website sẽ liên kết với các đối tác, nhà sản xuất âm nhạc từ đó đăng các sản phẩm
âm nhạc của họ lên website, người dùng có thể nghe các bài hát tùy chọn hoặc nghe
theo danh sách.
3.1.1.2.
Tạo playlist
Website cho phép người dùng tạo các playlist gồm các bài hát ưa thích để nghe cũng
như tải về các file nhạc để về máy của mình.
3.1.2. Những phương pháp đã được sử dụng
3.1.2.1.
Phương pháp thu thập thông tin
-
Tiến hành khảo sát về sự thay đổi về hành vi của người dùng.
-
Đọc tài liệu về sự phát triển công nghệ, về sự tăng trưởng kinh tế trong lĩnh vực
âm nhạc.
-
Nắm bắt xu hướng của xã hội
3.1.2.2.
-
Phương pháp xử lí thơng tin
Phân tích các dữ liệu về người dùng như sở thích, tìm kiếm… để đưa ra các gợi
ý hợp lý trong âm nhạc.
-
Phân tích các dữ liệu về sự tăng trưởng kinh tế của lĩnh vực nhằm đưa ra quy
mơ triển khai, kinh phí quảng cáo, các loại ưu đưa đưa ra nhằm thu hút người
dùng, tiềm năng phát triển của website.
3.1.3. Kết quả đạt được
Kết quả đạt được của các ứng dụng khác tương đồng về mặt chức năng. Nhưng về
mặt giao diện thì zingmp3 đa dạng màu sắc, giao diện trực quan, dễ dùng hơn Spotify
và Nhaccuatui
3.2.
Các vấn đề cần tập trung và giải quyết
Giao diện: giao diện và các biểu tượng nên sinh động, dễ nhìn, đẹp nhưng vẫn phải
đảm bảo tính trực quan, dễ sử dụng.
24
3.3.
Kế hoạch
Hình 3.1. Kế hoạch
25
