Bài tập lớn chủ Đề web nghe nhạc online môn học lập trình hướng Đối tượng

Cập Nhật Lượt Nghe: Mỗi khi một bài hát được phát, hệ thống sẽ tự động tăng số lượt nghe và lưu lại thông tin này trong cơ sở dữ liệu.. Phân Quyền Người Dùng: Các tính năng quản trị sẽ c

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

KHOA CÔNG NGHỆ THÔNG TIN

- -

-BÀI TẬP LỚN

Chủ đề: Web nghe nhạc online

Môn học: Lập Trình Hướng Đối Tượng

Số thứ tự nhóm: 6

Giảng viên hướng dẫn: Nguyễn Mạnh Sơn

HÀ NỘI, 12/2024

MỤC LỤC

1 Giới thiệu kỹ thuật/ công nghệ: 3

2 Giới thiệu bài toán và các chức năng dự định thực hiện: 3

2.1 Giới thiệu bài toán: 3

2.2 Các chức năng dự định thực hiện: 4

3 Kiến trúc hệ thống: 5

3.1 Tạo Các Thực Thể và Liên Kết Cơ Sở Dữ Liệu 5

3.2 Thiết Lập Repository Mở Rộng Từ JPA 5

3.3 Xây Dựng Controller và Xử Lý Tương Tác 5

3.4 Thiết Kế Giao Diện Người Dùng 9

3.5 Tạo Các File HTML 9

3.6 Thiết Lập CSS và Phong Cách 9

3.7 Tích Hợp JavaScript để Xử Lý Logic 10

3.8 Phát Triển Playlist 10

3.9 Danh Sách Yêu Thích 10

4 Kết quả cài đặt 11

1 Giới thiệu kỹ thuật/ công nghệ:

dụng web, đặc biệt là dịch vụ RESTful Spring Boot rất dễ cấu hình qua file application.properties, giúp quản lý các thiết lập của server, kết nối cơ sở dữ liệu, và nhiều thứ khác

o spring.datasource.url spring.datasource.username, ,

spring.datasource.password: Cấu hình MySQL làm nguồn dữ liệu.

o spring.datasource.driver-class-name: Chỉ định driver của MySQL sẽ được sử

dụng

o spring.jpa.properties.hibernate.dialect: Định nghĩa SQL dialect cho Hibernate

(dùng cho ORM), giúp Hibernate tối ưu hóa truy vấn dành cho MySQL

o spring.jpa.hibernate.ddl-auto: Điều khiển việc tạo schema trong Hibernate.

Thiết lập update cho phép Hibernate tự động cập nhật schema cơ sở dữ liệu dựa trên các lớp entity

o spring.thymeleaf.cache=false: Vô hiệu hóa bộ nhớ đệm của template, hữu ích khi phát triển để xem thay đổi mà không cần khởi động lại

o spring.mvc.view.prefix và spring.mvc.view.suffix: Xác định vị trí của các views (template HTML) và phần mở rộng file

o Các thuộc tính spring.thymeleaf.* cấu hình Thymeleaf cho chế độ HTML, mã hóa UTF-8, và kiểu nội dung, phù hợp cho việc hiển thị nội dung động trong các views HTML

o spring.servlet.multipart.enabled spring.servlet.multipart.max-file-size, ,

spring.servlet.multipart.max-request-size: Bật và cấu hình kích thước file tối

đa cho các lần tải lên kiểu multipart, rất hữu ích để xử lý việc tải lên file nhạc như bạn đã đề cập

o Cấu hình toolchain Java để sử dụng JDK 23

o Các thư viện như spring-boot-starter-thymeleaf, spring-boot-starter-web,

spring-boot-starter-data-jpa, và mysql-connector-java được bao gồm để xây dựng ứng dụng Spring MVC có khả năng kết nối cơ sở dữ liệu và render template

o Thư viện javax.servlet-api bổ sung hỗ trợ servlet, có thể hữu ích cho việc xử

lý các yêu cầu HTTP trong một ứng dụng web

2 Giới thiệu bài toán và các chức năng dự định thực hiện:

2.1 Giới thiệu bài toán:

Ngày nay, các nền tảng nghe nhạc trực tuyến như Spotify, Apple Music đã trở thành một phần quan trọng trong cuộc sống giải trí hàng ngày của người dùng Việc xây dựng một website nghe nhạc online giúp tiếp cận và đáp ứng nhu cầu giải trí của nhiều người, đặc biệt là khi lượng

người dùng internet và thiết bị di động ngày càng gia tăng Đó là lí do nhóm chúng em quyết định chọn đề tài xây dựng website nghe nhạc online

2.2 Các chức năng dự định thực hiện:

Thêm và Xóa Bài Hát: Admin có thể thêm bài hát mới vào hệ thống, bao gồm tên, tác giả

và đường dẫn nhạc Bên cạnh đó, admin có thể xóa hoặc chỉnh sửa thông tin bài hát nếu cần thiết

Cập Nhật Lượt Nghe: Mỗi khi một bài hát được phát, hệ thống sẽ tự động tăng số lượt nghe và lưu lại thông tin này trong cơ sở dữ liệu

Tìm Kiếm Theo Tên Bài Hát: Cho phép người dùng nhập từ khóa để tìm kiếm bài hát nhanh chóng

Gợi Ý Ngẫu Nhiên: Hệ thống sẽ tự động gợi ý các bài hát ngẫu nhiên hoặc các bài hát phổ biến để người dùng có thêm lựa chọn khi khám phá nhạc

Đăng Ký và Đăng Nhập: Người dùng có thể đăng ký tài khoản mới và đăng nhập để truy cập các chức năng cá nhân hóa

Phân Quyền Người Dùng: Các tính năng quản trị sẽ chỉ hiển thị khi đăng nhập

Danh Sách Yêu Thích: Người dùng có thể lưu các bài hát yêu thích để dễ dàng truy cập lại sau

Tạo Playlist Cá Nhân: Cho phép người dùng tạo và quản lý các playlist của riêng mình, giúp họ tùy chỉnh và sắp xếp nhạc theo ý muốn

Upload Ảnh Cho Bài Hát: Admin hoặc người dùng có thể upload hình ảnh minh họa cho các bài hát, nhằm tăng tính trực quan cho người nghe

Quản Lý Thư Viện Ảnh: Ảnh sẽ được lưu vào thư mục cụ thể và hiển thị khi người dùng nghe bài hát

Giao Diện Liệt Kê Bài Hát: Sử dụng Thymeleaf để hiển thị danh sách bài hát động, tích hợp CSS và JavaScript giúp giao diện đẹp mắt và dễ dùng

Cập Nhật Giao Diện Theo Lượt Xem: Các bài hát được yêu thích hoặc nghe nhiều sẽ được hiển thị ở vị trí nổi bật trên trang

3 Kiến trúc hệ thống:

3.1 Tạo Các Thực Thể và Liên Kết Cơ Sở Dữ Liệu

Các thực thể (entities) được xây dựng để phản ánh cấu trúc bảng trong cơ sở dữ liệu, đại diện cho các đối tượng như bài hát, ảnh và người dùng Mỗi thực thể đi kèm với các thuộc tính

và phương thức get, set, đảm bảo dữ liệu được truy cập và cập nhật dễ dàng

Các thực thể bao gồm:

3.2 Thiết Lập Repository Mở Rộng Từ JPA

Các repository được mở rộng từ JpaRepository giúp lưu trữ danh sách các thực thể, như bài hát, người dùng, hoặc hình ảnh, cho phép truy xuất dữ liệu nhanh chóng mà không cần viết truy vấn SQL thủ công

Đây là các Repository được sử dụng:

3.3 Xây Dựng Controller và Xử Lý Tương Tác

Các controller xử lý tìm kiếm bài hát, tạo truy vấn tới cơ sở dữ liệu và lưu trữ file bài hát

Sử dụng các phương thức HTTP (GET, POST, PUT, ) để kết nối trực tiếp với HTML và dưới đây là các controller:

- AdminController:

Với annotation @GetMapping được dùng để xử lý các yêu cầu HTTP GET

khi người dùng truy cập đường dẫn /admin, phương thức getAllSongs() sẽ được gọi Nó lấy toàn bộ danh sách bài hát từ cơ sở dữ liệu thông qua songRepository findAll () Thêm danh sách này vào Model và trả về view có tên "admin

Với annotation @PostMapping người dùng gửi yêu cầu POST đến /admin (thông qua form trên trang quản lý) Dữ liệu từ form (name, author, link) được Spring Boot tự động ánh xạ vào các tham số của phương thức (addSong) Phương thức tạo một đối tượng Song mới, gán các giá trị từ form vào và lưu đối tượng này vào cơ sở dữ liệu thông qua songRepository Thông báo "Song added successfully" được thêm vào model để hiển thị trên giao diện Trả về view "admin", nơi có thể cập nhật danh sách bài hát hoặc hiển thị thông báo

- SongController:

Trong hàm getSongs() sẽ thực hiện các bước:

o Gọi phương thức từ songRepository để lấy dữ liệu

o Sau đó thêm dữ liệu vào model

o Cuối cùng là trả về view “songs”

Hàm handleFileUpload():

Nhận file tải lên từ người dùng

o Trích xuất và lưu thông tin file vào cơ sở dữ liệu

o Thông báo trạng thái (thành công hoặc thất bại)

o Chuyển hướng về trang /upload

- SearchController:

Hàm searchSongs() thực hiện các bước:

o Nhận tên bài hát mà người dùng yêu cầu

o Sau đó findByNameContainingIgnoreCase(query) tìm bài hát không phân biệt chữ hoa hay thường

o Cuối cùng trả về danh sách kết quả tìm kiếm

- ImageController:

o uploadImage và handleFileUpload: Cho phép người dùng upload hình ảnh minh

họa, lưu vào thư mục và cập nhật vào cơ sở dữ liệu

o getAllSongs: Lấy danh sách toàn bộ bài hát và hiển thị trong trang quản trị.

o addSong: Thêm bài hát mới vào cơ sở dữ liệu, hỗ trợ quản lý nhạc từ góc nhìn của

admin

- UserController cung cấp hai tính năng chính:

Hàm registerSubmit():

Nhận thông tin username, email, pass từ người dùng

o Sau đó tạo ra một newUser mới và set username, email và pass

o Cuối cùng lưu thông tin người mới vào cơ sở dữ liệu, thông báo đăng ký thành công và chuyển lại về trang “register”

Hàm loginSubmit():

o Nhận thông tin email và pass từ người đăng nhập

o Sau đó kiểm tra xem có tồn tại tài khoản hay không, nếu người dùng nhập sai hoặc không đúng yêu cầu về tài khoản và mật khẩu thì thông báo lỗi và yêu cầu nhập lại

o Còn nếu đúng thì chuyển về trang chủ

3.4 Thiết Kế Giao Diện Người Dùng

Phần giao diện được thiết kế tham khảo các ý tưởng từ GPT, bao gồm các thành phần như thanh tìm kiếm, danh sách bài hát và nút điều khiển phát nhạc để cải thiện trải nghiệm người dùng

3.5 Tạo Các File HTML

Các file HTML sử dụng Thymeleaf để liệt kê danh sách bài hát, danh sách yêu thích và các thông tin chi tiết Giao diện HTML cũng tích hợp CSS và JavaScript để tăng cường tính tương tác

3.6 Thiết Lập CSS và Phong Cách

Phong cách CSS được tham khảo từ các ý tưởng của GPT, tạo ra bố cục hài hòa và thân thiện với người dùng

3.7 Tích Hợp JavaScript để Xử Lý Logic

- JavaScript được dùng để gọi API, quản lý logic bài hát và đồ họa:

- Đề xuất bài hát ngẫu nhiên khi chuyển bài

- Cập nhật số lượt xem mỗi khi người dùng phát bài hát

- Tìm kiếm bài hát theo tên

3.8 Phát Triển Playlist

Hiện tại, tính năng playlist chưa được triển khai nhưng sẽ là phần mở rộng cần thiết trong các phiên bản tiếp theo

3.9 Danh Sách Yêu Thích

Danh sách yêu thích đã được cập nhật nhưng cần bổ sung dung tính năng lưu và truy xuất

dữ liệu để hoàn thiện trải nghiệm người dung

4 Kết quả cài đặt

 Trang chủ:

 Đăng ký:

 Đăng nhập:

 Tính năng của admin:

 Giao diện khi nghe nhạc:

 Giao diện đăng tải nhạc của client: