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 .7 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 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ở hoàn toà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 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