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 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 : Nguyễn Ngọc Sơn Mã sinh viên : 18521350 Sinh viên thực : Phạm Hoàng Nhật Trường Mã sinh viên : 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ự – Hạnh phúc   NHIỆM VỤ ĐỒ ÁN MÔN HỌC Họ tên SV 1: Nguyễn Ngọc Sơn MSSV: 18521350 Họ 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: Xây dựng CSDL NoSQL Thiết kế giao diện website Lập trình xử lý phần mềm với chức sau: o Nghe nhạc theo hát, theo album, tải nhạc o Thêm hát u thích o Thay đổi background tồn website o Trang quản trị 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), 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ý ghi rõ họ tên) ThS Trần Thị Hồng Yến 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 Công việc 1: Thiết kế hình(Home, khám phá, xếp hạng) Cơng việc 2: Thêm hát u thích, tải nhạc Cơng việc 3: Thực chức nghe nhạc theo hát Tạo Powerpoint báo cáo, viết báo cáo Công việc 1: Thiết kế hình(Radio, theo dõi, player) Công việc 2: Nghe nhạc theo album, thay đổi background Công việc 3: Trang quản trị Công việc 4: Viết báo cáo SV thực SV thực (Ký tên) (Ký tên) NGUYỄN NGỌC SƠN PHẠM HỒNG NHẬT TRƯỜNG LỜI CẢM ƠN Trong q trình làm báo cáo, chúng em nhận giúp đỡ, đóng góp ý kiến bảo nhiệt tình thầy cơ, gia đình 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 ý bảo em suốt q trình làm báo cáo Ngồi ra, chúng em xin gửi lời cảm ơn đến thầy cô giáo trường ĐH CNTT- ĐHQG TP HCM nói chung, thầy Khoa Cơng nghệ phần mềm nói riêng dạy dỗ cho em kiến thức lập trình, qua em có sở lý thuyết vững vàng 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 bạn bè, ln tạo điều kiện, quan tâm, giúp đỡ, động viên em suốt q trình hồn thành đồ án Nhóm sinh viên thực NGUYỄN NGỌC SƠN – PHẠM HOÀNG NHẬT TRƯỜNG 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 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ý chọn đề tài: 14 1.4 Mục đích website 14 1.4.1 Đối tượng 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í sử dụng 17 2.1.4 Cấu trúc tình 18 2.1.5 Bootstrap grid system 19 2.1.6 Cài dặt á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 22 2.2.4 Ưu điểm 22 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 tác giả khác (NhacCuaTui, Zing MP3,Spotify) 24 3.1.1 Những hướng nghiên cứu 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 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 đạt 24 3.2 Các vấn đề cần tập trung giải 24 3.3 Kế hoạch 25 Chương 4: PHÂN TÍCH THIẾT KẾ 26 4.1 Sơ đồ cấu tố chức: 26 4.2 Use Case 26 4.2.1 Các tác nhân hệ thống 26 4.2.2 Các chức 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 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 5.1 Kiến trúc hệ thống 44 5.2 Mô tả thành phần 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 6.7 Màn hình chi tiết 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 đồ án: 51 7.2 Hạn chế đồ án: 51 7.3 Hướng phát triển đồ án: 51 TÀI LIỆU THAM KHẢO 52 10 4.4.2 Đăng nhập Hình 4.11 Sequence đăng nhập 4.4.3 Tìm kiếm Hình 4.12 Sequence tìm kiếm 38 4.4.4 Xem thơng tin cá nhân Hình 4.13 Sequence xem thông tin cá nhân 4.4.5 Sửa thông tin cá nhân Hình 4.14 Sequence sửa thơng tin cá nhân 39 4.4.6 Upload nhạc Hình 4.15 Sequence upload nhạc 4.4.7 Download nhạc Hình 4.16 Sequence download nhạc 40 4.4.8 Tạo playlist Hình 4.17 Sequence tạo playlist 4.5 Class diagram Hình 4.17 Class diagram 41 4.6 ER diagram Hình 4.18 ERD 4.7 Domain model Hình 4.19 Domain model 42 4.8 Workflow Hình 4.20 Workflow 43 Chương 5: THIẾT KẾ KIẾN TRÚC 5.1 - Kiến trúc hệ thống Sau giai đoạn phân tích đến giai đoạn thiết kế, xây dựng hệ thống thành giải pháp thực thi Mơ hình thiết kế chi tiết xem xét đến vấn đề kỹ thuật Các lớp giải vấn đề như: sở liệu (database), giao diện người dùng (user interface), Một số lớp phát bổ sung - Để xây dựng website, chúng em xây dựng chương trình dựa mơ hình Client – Server - Hai lớp Client Server chạy hai máy tính riêng biệt thiết bị 5.2 STT Mô tả thành phần hệ thống Thành phần Client Giao diện Diễn giải Hiển thị thành phần giao diện để tương tác với người dùng tiếp nhận thông tin, thông báo lỗi, … Nó gồm thành phần giao diện (page) thực công việc nhập liệu, hiển thị liệu, gửi yêu cầu đến phần xử lý Xử lý Bao gồm lớp đối tượng dựa sơ đồ lớp đối tượng hệ thống đưa phần phân tích Đây nơi đáp ứng yêu cầu thao tác liệu GUI, xử lý nguồn liệu từ người dùng trước lưu xuống CSDL Đây nơi kiểm tra ràng buộc, tính tồn vẹn hợp lệ liệu, thực tính tốn xử lý yêu cầu nghiệp vụ, trước trả kết cho phần UI 44 Server Cơ sở liệu Bao gồm bảng, ràng buộc, view cho lớp xử lý để thực chức truy xuất liệu, thêm, xóa, cập nhật liệu Bảng 5.1 Mơ tả thành phần 5.3 Mơ hình sử dụng Hình 5.1 Kiến trúc hệ thống Website bán hàng ứng dụng web thiết kế theo mơ hình Tier, kiến trúc kiểu Client-Server Mục đích thiết kế để tách tách lớp riêng biệt, hoạt động riêng biệt, cải thiện khả bảo trì tái sử dụng 5.3.1 Presentation tier Lớp giao diện, bao gồm thành phần xử lý giao diện GUI, người dùng nhìn thấy, lớp bao gồm phần đầu phần cuối yêu cầu liệu xử lý Nhiệm vụ hiển thị liệu nhận liệu từ người dùng 5.3.2 Logic tier Lớp sử dụng máy chủ ứng dụng xử lý logic nghiệp vụ, cung cấp chức cho ứng dụng để lưu xử lý liệu Ví dụ, lớp theo dõi lưu tùy chọn người dùng người dùng đăng nhập vào trang web mua hàng họ Lúc này, khách hàng đăng nhập vào trang web hiển thị phương thức vận chuyển chọn trước hàng hóa duyệt trước Các loại tốn người dùng thực lưu lớp nghiệp vụ sau sử dụng người dùng đăng nhập lại 5.3.3 Data tier Lớp cuối để xử lý yêu cầu liệu cuối cùng, liệu thu lớp nghiệp vụ có đây, tìm kiếm, trích xuất, cập nhật Lớp hệ thống quản 45 lý sở liệu, cung cấp quyền truy cập cho người dùng vào liệu ứng dụng Lớp liệu kết nối trực tiếp với sở liệu gửi liệu đến dịch vụ liệu để xử lý chúng 46 Chương 6: THỰC HIỆN 6.1 Màn hình chính: 6.1.1 Giao diện Hình 6.1 Màn hình home 6.1.2 Mơ tả Màn hình Home nơi hiển thị tổng quan trang web Người dùng xem hát bật, hát gợi ý muốn nghe, hát yêu thích, đối tác âm nhạc 6.2 Màn hình xếp hàng 6.2.1 Giao diện Hình 6.2 Màn hình xếp hạng 6.2.2 Mơ tả 47 Màn hình xếp hạng bao gồm hát bật, người nghe vào nghe hát u thích, tải về, thêm vào danh sách u thích 6.3 Màn hình radio 6.3.1 Giao diện Hình 6.3 Màn hình radio bật 6.3.2 Mơ tả Màn hình radio bao gồm Radio bật, postcast, radio nghe lại tin tức âm nhạc 6.4 Màn hình theo dõi 6.4.1 Giao diện Hình 6.4 Màn hình theo dõi ca sĩ 48 6.4.2 Mơ tả Màn hình hiển thị tất danh sách, tin tức nghệ sĩ, hát, tin nghệ sĩ đó, người dùng nhấn vào để xem, nghe hát nghệ sĩ 6.5 Màn hình cá nhân 6.5.1 Giao diện Hình 6.5 Màn hình u thích, playlist 6.5.2 Mơ tả Màn hình bao gồm hát yêu thích, playlist, album, mv, nghệ sĩ, tải lên, người dùng lựa chọn nghe hát phát tất danh sách 6.6 Màn hình thay đổi giao diện 6.6.1 Giao diện Hình 6.6 Màn hình đổi background 49 6.6.2 Mơ tả Màn hình giúp người dùng thay đổi hình website nghe nhạc, có nhiều lựa chọn giao diện giao diện theo chủ đề, giao diện theo hình nghệ sĩ, giao diện màu tối, giao diện màu sáng 6.7 Màn hình chi tiết hát 6.7.1 Giao diện Hình 6.7 Màn hình play nhạc 6.7.2 Mơ tả Màn hình hiển thị thông tin chi tiết hát người dùng nghe Tại đây: - Nếu người dùng muốn dừng bấm nút pause - Nếu người dùng muốn nghe sang trước nhấn nút next left, right - Nếu người dùng muốn lặp lại hát nhấn nút bên trái nút left - Người dùng muốn tua nhanh kéo timeline tăng giảm âm lượng kéo loa 50 KẾT LUẬN 7.1 Ưu điểm đồ án: - Giao diện đơn giản, người dùng dễ thao tác website - Tốc độ phản hồi nhanh 7.2 - Hạn chế đồ án: Tuy đáp ứng nhu cầu đề tài đưa nhiều thiếu sót, chưa hồn thiện chức đưa lúc ban đầu 7.3 Hướng phát triển đồ án: - Mở rộng quy mô ứng dụng phần mềm - Cải thiện chức phát triển phần mềm - Xây dựng thêm chức mới, khuyến nghị, hoàn thiện chức cũ - Tiếp tục nâng cao chất lượng UI UX - Hoàn thiện chức chưa phát triển kế hoạch ban đầu 7.4 Kết đạt - Các chức nghe nhạc theo hát, album, tải nhạc, yêu thích Làm quen sơ đồ UML usecase, class, object, … thiết kế hệ thống thiết kế UML Cải thiện nâng cao kỹ làm việc nhóm 51 TÀI LIỆU THAM KHẢO [1] Phan Trung Hiếu (2021), Bài giảng môn Công nghệ Web Ứng dụng, Khoa CNPM, Trường ĐH Công Nghệ Thông Tin [2] Thương Nguyễn, “Tất tần tật jQuery- Các phương thức hay sử dụng”, [Online], Available: https://viblo.asia/p/tat-tan-tat-ve-jquery-cac-phuong-thuc-hay-su-dung- p1-Az45bz2z5xY [3] Webcoban, “Danh sách thuộc tính CSS”, [Online], Available: https://webcoban.vn/css/danh-sach-tat-ca-thuoc-tinh-css.html 52 ... 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 website nghe nhạc xây dựng tảng mạng Internet cho phép người dùng nghe nhạc miễn phí, đăng... chất lượng website, đặc biệt mảng kinh doanh online, cần website giới thiệu, nghe, đăng tải nhạc trực tuyến hỗ trợ khách hàng thông tin cần thiết Đây toán quản lý tảng nghe nhạc trực tuyến, áp... 1.4.2 Đặc điểm 14 Xây dựng 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 thông