Đồ án website nghe nhạc trực tuyến

ĐẠ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 ĐỀ TÀI: WEBSITE NGHE NHẠC TRỰC TUYẾN Lớp: SE121.N21.PMCL Giảng viên hướng dẫn: Ths Trần Thị Hồng Yến Nhóm sinh viên thực hiện: Đặng Hải Hoàng Sơn 19522131 Trần Đức Tâm 19522166 Tp.HCM, ngày tháng năm 2023 LỜI CẢM ƠN Trước hết, nhóm chúng em xin gửi lời cảm ơn đến Trường Đại học Công nghệ thông tin – ĐHQGTPHCM đến cô Trần Thị Hồng Yến giảng viên hướng dẫn trực tiếp tạo điều kiện để nhóm chúng em hoàn thành đồ án - Chủ đề website nghe nhạc trực tuyến Trong khoảng thời gian thực đồ án, nhóm chúng em học hỏi thêm nhiều kiến thức, kinh nghiệm, biết thêm nhiều công nghệ Nhóm chúng em vận dụng kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi nghiên cứu kiến thức Từ vận dụng tối đa học hỏi để hoàn thành báo cáo đồ án Mặc dù nhóm chúng em cố gắng hồn thành song báo cáo nhóm chúng em chắn khơng chắn khỏi thiếu xót, chúng em mong nhận thơng cảm góp ý chân thành tùy q thầy Nhóm chúng em xin chân thành cảm ơn Nhóm sinh viên thực Đặng Hải Hồng Sơn - Trần Đức Tâm Mục lục CHƯƠNG 1: GIỚI THIỆU 1.1 Đặt vấn đề 1.2 Giải pháp 1.3 Mục tiêu đề tài CHƯƠNG 2: CƠ SỞ LÝ THUYẾT HTML CSS Tailwind Typescript 10 PHP 11 Laravel Framework 12 Remix 13 CHƯƠNG 3: PHÂN TÍCH ĐẶC TẢ YÊU CẦU 14 3.1 Class diagram 14 3.2 Danh sách người dùng 14 3.3 Danh sách Usecase 15 3.3.1 User (khách hàng) 15 3.3.2 Đặc tả Use-case 16 CHƯƠNG 4: THIẾT KẾ CƠ SỞ DỮ LIỆU 21 4.1 Danh sách quan hệ 21 4.1.1 Bảng user 21 4.1.2 Bảng playlist 21 4.1.3 Bảng artist 22 4.1.4 Bảng song 22 4.1.5 Bảng comment 23 4.1.6 Bảng history 23 4.1.7 Bảng notification 23 4.2 Kiến trúc hệ thống 24 CHƯƠNG 5: THIẾT KẾ GIAO DIỆN 25 5.1 Đăng nhập 25 5.2 Màn hình 26 5.3 Màn hình danh sách hát 27 5.4 Màn hình hát 28 5.5 Tìm kiếm 29 5.6 Upload hát 30 5.7 Tạo danh sách hát 31 5.8 Màn hình thơng tin thân 32 5.9 Màn hình sửa thơng tin 33 CHƯƠNG 6: KẾT LUẬN 34 6.1 Tổng kết 34 6.2 Khó khăn 34 6.3 Hạn chế 34 6.4 Hướng phát triển 34 TÀI LIỆU THAM KHẢO 35 CHƯƠNG 1: GIỚI THIỆU 1.1 Đặt vấn đề Âm nhạc ngành công nghiệp lớn giới, hàng triệu người khắp giới yêu thích nghe nhạc hàng ngày Vì vậy, nghiên cứu hệ hỗ trợ định cần thiết có tính ứng dụng cao thực tế Việc xây dựng hệ thống gợi ý hát giúp người dùng tìm thấy hát mới, phù hợp với sở thích họ Ngồi hệ thống cung cấp cho người dùng danh sách hát mà họ thích dựa yếu tố sở thích âm nhạc, lịch sử nghe nhạc, thời gian nghe nhạc, v.v 1.2 Giải pháp Để giải vấn đề nhóm tụi em phát triển website nghe nhạc trực tuyến Website cung cấp cho người dùng tảng trực tuyến, tiện lợi, hiệu quả, giúp người dùng nghe nhạc cách dễ dàng nhanh chóng 1.3 Mục tiêu đề tài 1.3.1 Lý thuyết • Tìm hiểu nghiên cứu Lavarel, PHP, Tailwind, Remix React • Nắm rõ thao tác cơng cụ lập trình Visual studio code • Nghiên cứu webiste nghe nhạc có thị trường 1.3.2 Mục tiêu • Thiết kế giao diện đẹp mắt, bắt mắt dễ sử dụng • Đảm bảo tính an tồn bảo mật • Tối ưu hóa cơng cụ tìm kiếm • Người dùng dễ dàng nghe nhạc • Người dung đăng hát mà thích sáng tác • Cập nhật hát 1.3.3 Phạm vi, quy mô - Phạm vi môi trường: Triển khai ứng dụng webite - Đối tượng sử dụng: Tất đối tượng có nhu cầu nghe nhạc - Phạm vi chức năng: • Người dùng nghe nhạc • Người dùng chép link nhạc • Có thể upload nhạc thích/sáng tác 1.3.4 Phương pháp nghiên cứu: - Phương pháp làm việc: Làm việc nhóm thành viên thơng qua hình thức offline online hướng dẫn giảng viên - Phương pháp nghiên cứu: • Khảo sát nghiên cứu nhu cầu nghe nhạc người • Nghiên cứu tài liệu cơng nghệ liên quan • Kiểm tra, tham khào website nghe nhạc soundcloud, spotify,… để tối ưu hóa trang web - Phương pháp cơng nghệ: • Tìm hiểu ngơn ngữ framework liên quan đến đề tài • Xây dựng giao diện web để tương tác người dùng nhận phản hồi, sửa chữa cần thiết • Tìm hiểu thư viện hỗ trợ cho dự án CHƯƠNG 2: CƠ SỞ LÝ THUYẾT HTML HTML viết tắt cụm từ Hypertext Markup Language (tạm dịch Ngôn ngữ đánh dấu siêu văn bản) HTML sử dụng để tạo cấu trúc thành phần trang web ứng dụng, phân chia đoạn văn, heading, titles, blockquotes… HTML khơng phải ngơn ngữ lập trình Một tài liệu HTML hình thành phần tử HTML (HTML Elements) quy định cặp thẻ (tag attributes) Các cặp thẻ bao bọc dấu ngoặc (ví dụ ) thường khai báo thành cặp, bao gồm thẻ mở thẻ đóng Ví dụ, tạo đoạn văn cách đặt văn vào cặp tag mở đóng văn

Ưu điểm: o Được sử dụng rộng rãi, có nhiều nguồn tài nguyên hỗ trợ cộng đồng sử dụng lớn o Học đơn giản dễ hiểu o Mã nguồn mở hồn tồn miễn phí o Markup gọn gàng đồng o Tiêu chuẩn giới vận hành World Wide Web Consortium (W3C) o Dễ dàng tích hợp với ngơn ngữ backend PHP, Python… Khuyết điểm: o Được dùng chủ yếu cho web tĩnh Đối với tính động update hay realtime thời gian thực, bạn cần sử dụng JavaScript ngôn ngữ backend bên thứ PHP o Một số trình duyệt chậm hỗ trợ tính CSS CSS chữ viết tắt Cascading Style Sheets, ngơn ngữ sử dụng để tìm định dạng lại phần tử tạo ngơn ngữ đánh dấu (HTML) Nói ngắn gọn ngôn ngữ tạo phong cách cho trang web Mối tương quan HTML CSS mật thiết HTML ngôn ngữ markup (nền tảng site) CSS định hình phong cách (tất tạo nên giao diện website), chúng khơng thể tách rời Tailwind Tailwind utility-first CSS framework giúp cho bạn xây dựng giao diện người dùng cách nhanh Tailwind CSS phát hành lần vào tháng 10/2019 phát triển Adam Wathan Nếu so sánh với tảng lập trình CSS khác Bootstrap, Materialize, Foundation, Material Design… chúng có điểm chung với Ưu điểm: • Xây dựng giao diện cần khai báo class file html • Chỉ xuất file css chứa class sử dụng giao diện • Dễ dàng thiết lập Responsive file html • Hỗ trợ tương tác hover, focus… class html • Tối ưu cấu trúc html css có tính lặp lại • Định nghĩa thêm class phối hợp class có sẵn tailwind • Hỗ trợ chế độ tối Dark Mode • Dễ dàng mở rộng, chỉnh sửa biến đổi • Tăng tốc độ code với Extension thông minh VS Code Typescript Typescript Là ngôn ngữ Microsoft tặng free cho chúng ta, tảng TypeScript nhiều có liên quan đến JavaScript ngơn ngữ mã nguồn mở JavaScript Vai trò TypeScript dùng để thiết kế xây dựng dự án ứng dụng quy mơ lớn mang tính chất phức tạp TypeScript xem phiên nâng cao JavaScript thiết kế thêm nhiều chức tiện lợi hơn, cải tiến từ điểm yếu JavaScript lớp hướng đối tượng Static Structural typing, bên cạnh TypeScript cịn hoạt động rộng rãi cho ứng dụng ngôn ngữ Angular2 Nodejs Ưu điểm: • Thuận tiện hồn tồn miễn phí • Thao tác nhanh chóng đơn giản • Tái cấu trúc • Giảm tỷ lệ mắc lỗi hệ thống • Hợp mã đơn giản CHƯƠNG 4: THIẾT KẾ CƠ SỞ DỮ LIỆU 4.1 Danh sách quan hệ 4.1.1 Bảng user Bảng 4.1: Cơ sở liệu user STT Thực thể Kiểu liệu Ghi id number Không đổi name string Tên người dùng avtURL string Ảnh đại điện người dùng email string Email người dùng password string Mật người dùng 4.1.2 Bảng playlist Bảng 4.2: sở liệu playlist STT Thực thể Kiểu liệu Ghi id number Độc name string Tên danh sách hát bg_color string Màu giao diện category string Thể loại hát danh sách views number Số lượng người nghe imageURL string Ảnh đại diện danh sách likes number Số lượng thích danh sách User_id number Id user 4.1.3 Bảng artist Bảng 4.3: Cơ sở liệu artist STT Thực thể Kiểu liệu Ghi id number Độc name string Tên tác giả followed number Số lượng người theo dõi User_id number Id user 4.1.4 Bảng song Bảng 4.4: Cơ sở liệu hát STT Thực thể Kiểu liệu Ghi id number Độc name string Tên hát liked number Số lượt thích views number Số lượt nghe imageURL string Ảnh hát audioURL string Bài hát Artist_id number Id tác giả Playlist_id number Id cũa playlist 4.1.5 Bảng comment Bảng 4.5: Cơ sở liệu comment STT Thực thể Kiểu liệu Ghi id number Độc content string Nội dung Song_id number Id hát User_id number Id user 4.1.6 Bảng history Bảng 4.6: Cơ sở liệu history STT Thực thể Kiểu liệu Ghi id Number Độc views number Lượt xem User_id number Id user Song_id number Id song 4.1.7 Bảng notification Bảng 4.7: Cơ sở liệu notification STT Thực thể Kiểu liệu Ghi id number Độc content string Thông báo User_id number Id user Song_id number Id song Bg_url string Hình 4.2 Kiến trúc hệ thống - Backend sử dụng mơ hình MVC (Model-View-Controller) - MVC mẫu kiến trúc phần mềm để tạo lập giao diện người dùng máy tính MVC chia thành ba phần kết nối với thành phần có nhiệm vụ riêng đợc lập với thành phần khác Tên gọi thành phần: + Model (dữ liệu): Quản lý xử lí liệu + View (giao diện): Nơi hiển thị liệu cho người dùng + Controller (bộ điều khiển): Điều khiển tương tác phần Model View CHƯƠNG 5: THIẾT KẾ GIAO DIỆN 5.1 Đăng nhập Hình 5.1: Màn hình đăng nhập Mơ hình chi tiết: - Chọn text ‘username’ để ghi tên người dùng - Chọn text ‘password’ để ghi mật tài khoản - Nhấp button ‘sign in’ để xác nhận đăng nhập 5.2 Màn hình Hình 5.2: hình trang chủ Mô tả chi tiết: - Nhấp biểu tượng ‘Pause’ header để quay trang chủ - Nhấp ‘search’ header để đến giao diện kết tìm kiếm - Nhấp ‘profile’ header để đến giao diện thân - Nhấp ‘edit profile’ header để đến giao diện chỉnh sửa thông tin - Nhấp ‘upload song’ header để đến giao diện thêm hát - Nhấp ‘create playlist’ header để đến giao diện thêm hát - Ghi text ‘search’ để đến giao diện kết tìm kiểm - Nhấp vào hình album để đến giao diện album - Nhấp vào icon music bar để tương tác với nhạc 5.3 Màn hình mợt danh sách hát Hình 5.3: Màn hình album Mơ tả chi tiết: - Nhấp vào tên hát để đến giao diện hát - Nhấp vào tên tác giả để đến giao diện tác giả - Nhấp vào hát sidebar để đến giao diện hát 5.4 Màn hình mợt hát Hình 5.4: Màn hình hát Mơ tả chi tiết: Nhấp vào icon play để phát hát Nhập nội dung phần bình luận ấn submit để đăng bình luận Nhấp vào ảnh đại diện để đến giao diện tác giả Nhấp vào hát bên tay phải để qua giao diện hát nghe gần - Nhấp vào chữ ‘viewall’ để sang giao diện hát vừa nghe - 5.5 Tìm kiếm Hình 5.5: Màn hình kết tìm kiếm Mô tả chi tiết: - Nhấp icon play để phát nhạc - Nhấp tên hát để đến giao diện hát - Nhấp tên tác giả để đến giao diện tác giả - Nhấp button ‘copy link’ để chép đường dẫn đến hát 5.6 Upload hát Hình 5.6: Màn hình thêm hát Mơ tả chi tiết: - Nhấp ‘upload image’ để thêm ảnh cho hát - Nhấp ‘upload audio’ để thêm file mp3 cho hát - Nhấp ‘Playlist’ để chọn playlist cho hát - Nhập tên hát phần ‘name’ - Nhấp button ‘upload song’ để thêm hát 5.7 Tạo danh sách hát Hình 5.7: Màn hình tạo playlist Mơ tả chi tiết: - Nhấp ‘upload image’ để thêm ảnh cho playlist - Nhấp ‘category’ để chọn thể loại cho playlist - Nhập tên playlist phần ‘playlist’s name’ - Nhấp button ‘create’ để xác nhận tạo playlist 5.8 Màn hình thơng tin thân Hình 5.8: Màn hình thơng tin cá nhân Mơ tả chi tiết: - Nhấp tên hát để đến giao diện hát - Nhấp button ‘copy link’ để lấy đường dẫn đến giao diện hát - Nhấp button play hát người dùng để nghe nhạc - Nhấp hát ỏ sidebar để đến giao diện hát 5.9 Màn hình sửa thơng tin Hình 5.9: Màn hình chỉnh sửa thơng tin thân Mô tả chi tiết: - Nhấp ‘upload image’ để thêm ảnh giao diện - Nhập tên phần ‘new name’ - Nhấp button ‘comfirm’ để xác nhận thông tin muốn thay đổi CHƯƠNG 6: KẾT LUẬN 6.1 Tổng kết • Điều quan trọng làm website nghe nhạc trực tuyến phải có đầy đủ tính cần thiết trang web mua hàng trực tuyến đa dạng sản phẩm giao diện thân thiện dễ nhìn để phục vụ đáp ứng nhu cầu người dùng • Cần phân tích kỹ xác định tính trước thực code, thiết kế giao diện, thiết kế sở liệu • Cần xếp thời gian code cho chức cách hợp lý hơn, không nên tốn nhiều thời gian cho phần • Có khả đọc tài liệu tiếng anh lợi hướng dẫn bản, hay tài liệu đa số viết tiếng Anh 6.2 Khó khăn • Việc làm đồ án gặp nhiều trở ngại cơng đoạn xác định tính ứng dụng, phần việc xếp theo thứ tự chưa thật hợp lý, khơng có nhiều thời gian để hồn thành đồ án • Nhóm tốn nhiều thời gian cho việc xây dựng giao diện người dùng cách hợp lý cố gắng thực mục tiêu đề 6.3 Hạn chế • Code chưa tối ưu tốt nên load website cịn chậm • Giao diện người dùng mức • Cịn nhiều tính chưa tối ưu, chưa tiện dụng người dùng • Chưa sử dụng nhiều ngơn ngữ 6.4 Hướng phát triển • Đầu tư, phát triển thiết kế giao diện • Sử dụng đa dạng ngơn ngữ • Tối ưu hóa code • Nâng cấp thêm tính tiện ích hỗ trợ người dùng TÀI LIỆU THAM KHẢO Laravel: https://laravel.com Tailwind: https://tailwind.com Remix: https://remix.run MVC: https://fptcloud.com/mvc-la-gi PHP:https://topdev.vn/blog/ngon-ngu-lap-trinh-php-la-gi-tat-tan-tat nhung-dieu-ban-can-biet-ve-php/