Đồ án cơ sở 1 đề tài thiết kế giao diện website nghe nhạc huyper’s music box

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT HÀN Khoa Khoa Học Máy Tính ĐỒ ÁN CƠ SỞ ĐỀ TÀI: THIẾT KẾ GIAO DIỆN WEBSITE NGHE NHẠC HUYPER’S MUSIC BOX Sinh viên thực : HUỲNH TÔN MINH QUÂN (22AD041) Giảng viên hướng dẫn : THS NGUYỄN NGỌC HUYỀN TRÂN Lớp : 22AD Đà Nẵng, ngày 20 tháng 06 năm 2023 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT HÀN Khoa Khoa Học Máy Tính ĐỒ ÁN CƠ SỞ ĐỀ TÀI: THIẾT KẾ GIAO DIỆN WEBSITE NGHE NHẠC HUYPER’S MUSIC BOX Sinh viên HUỲNH TÔN MINH QUÂN (22AD041) Lớp : 22AD Giảng viên hướng dẫn: THS NGUYỄN NGỌC HUYỀN TRÂN Đà Nẵng, ngày 20 tháng 06 năm 2023 LỜI MỞ ĐẦU Ngày nay, ứng dụng công nghệ thông tin việc tin học hóa xem yếu tố mang tính định hoạt động phủ, tổ chức, cơng ty, đóng vai trị quan trọng, tạo bước đột phá mạnh mẽ Cũng internet thay đổi cách tiếp cận người âm nhạc cách đáng kể Trước đây, việc nghe nhạc thường liên quan đến việc mua đĩa CD tìm kiếm đài phát truyền hình để nghe nhạc Tuy nhiên, với phát triển internet, người dùng truy cập tận hưởng âm nhạc cách dễ dàng thuận tiện Việc tạo website nghe nhạc bước quan trọng để đáp ứng nhu cầu ngày tăng người dùng Với website nghe nhạc, người dùng nghe nhạc trực tuyến từ thiết bị có kết nối internet, từ máy tính đến điện thoại di động Điều mang đến linh hoạt tiện lợi cho người dùng họ khơng cần phải tải xuống hay lưu trữ nhạc thiết bị Một website nghe nhạc cung cấp khả tìm kiếm khám phá âm nhạc cách rộng rãi Người dùng dễ dàng tìm kiếm hát, album, nghệ sĩ yêu thích thơng qua chức tìm kiếm xếp website Ngoài ra, website cung cấp gợi ý danh mục đa dạng để giúp người dùng khám phá âm nhạc đa dạng Bên cạnh đó, website nghe nhạc tạo hội cho nghệ sĩ ban nhạc quảng bá sáng tạo tài Chúng tơi cung cấp khơng tảng để chia sẻ âm nhạc mà cung cấp cơng cụ tính để xây dựng cộng đồng thu hút quan tâm người hâm mộ Điều đặc biệt hơnviệc tạo website nghe nhạc không đáp ứng nhu cầu ngày tăng người dùng việc tiếp cận tận hưởng âm nhạc mà mang lại hội phát triển cho nghệ sĩ ban nhạc Do lý trên,chúng em thực đồ án “THIẾT KẾ GIAO DIỆN CHO WEBSITE NGHE NHẠC HUYPER’S MUSIC BOX” LỜI CẢM ƠN Lời em muốn bày tỏ lòng biết ơn sâu sắc chân thành đến tất cá nhân tổ chức hỗ trợ, giúp đỡ tơi suốt q trình nghiên cứu phát triển ứng dụng chăm sóc sức khỏe Em nhận thấy rằng, đóng góp quan trọng khơng thể thiếu q trình tìm hiểu, nghiên cứu, thiết kế, phát triển triển khai sản phẩm em Em xin gửi lời cảm ơn đặc biệt đến Thầy Cơ khoa Khoa Học Máy Tính, người truyền đạt kiến thức, kinh nghiệm hỗ trợ em suốt trình học tập trường Và nhiều nữa, em xin gửi lời càm ơn chân thành đến thầy giáo Nguyễn Văn Sang cô Nguyễn Ngọc Huyền Trân nhờ giúp đỡ tận tình thầy cơ, em tích lũy đủ kiến thức để thực dự án Đặc biệt xin chân thành cảm ơn ThS Nguyễn Ngọc Huyền Trân, người trực tiếp hướng dẫn chúng em thời gian thực đồ án này.Em xin chân thành cảm ơn hy vọng nhận tiếp tục hỗ trợ động viên thầy cô tương lai Ngồi ra, với đồng lịng, hợp tác, góp ý giúp đỡ lẫn suốt trình phát triển sản phẩm Dù báo cáo cịn nhiều hạn chế chưa hoàn thiện tối đa, với đóng góp đánh giá quý thầy cơ, em hồn thiện nâng cao kiến thức Em xin chân thành cảm ơn quý Thầy Cô dành thời gian tâm huyết để giúp đỡ em trình nghiên cứu hoàn thiện bài báo cáo Cuối cùng, chúng em hi vọng tiếp tục phát triển cải tiến sản phẩm, hy vọng đóng góp tích cực cho việc chăm sóc sức khỏe cộng đồng Em xin chân thành cảm ơn! Người thực NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN …………………………………………………………………………………… …………………………………………………………………………… ……… …………………………………………………………………………… ……… …………………………………………………………………………… ……… …………………………………………………………………………… ……… …………………………………………………………………………… ……… …………………………………………………………………………… ……… …………………………………………………………………………… ……… Xác nhận giảng viên hướng dẫn MỤC LỤC MỞ ĐẦU CHƯƠNG I GIỚI THIỆU 1.Tổng quan đề tài Lý chọn đề tài Mục tiêu đề tài CHƯƠNG II NGHIÊN CỨU TỔNG QUAN & CƠ SỞ LÝ THUYẾT Tầm quan trọng vấn đề xây dựng website Tổng quan website Tổng quan công nghệ sử dụng 3.1 Hypertext Markup Language (HTML) 3.2 Cascading Style Sheets (CSS) 3.3 JavaScript (JS) 3.4 Responsive design CHƯƠNG III PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG Phân tích yêu cầu 1.1 Yêu cầu môi trường 1.2 Yêu cầu giao diện 1.3 Yêu cầu chức Chức hệ thống 2.1 Chức đăng nhập, đăng ký 2.2 Chức nghe nhạc trang web 2.3 Chức xem thông tin nhạc sĩ danh sách album Thiết kế giao diện 3.1 Bố cục 3.2 Thiết kế đồ họa, phối màu giao diện 3.3 Thiết kế chức CHƯƠNG IV CÀI ĐẶT VÀ XÂY DỰNG DEMO 1.Giao diện trang chủ 1.1 Thanh navigation 1.2 Thanh sidebar 1.3 Phần nội dung 1.4 Ô phát nhạc 1.5 Footer Giao diện album Giao diện trang nghệ sĩ Giao diện trang đăng nhập Giao diện trang đăng kí CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Kết thu Hạn chế Hướng phát triển đề tài DANH MỤC TÀI LIỆU THAM KHẢO DANH MỤC HÌNH Hình 2.1: Hypertext Markup Language (HTML) Hình 2.2: Cascading Style Sheets (CSS) Hình 2.3: JavaScript (JS) Hình 4.1: Thanh navigation Hình 4.2: Thanh sidebar Hình 4.3: Phần nội dung trang chủ Hình 4.4: Ô phát nhạc trang chủ Hình 4.5: Footer Hình 4.6: Trang album Hình 4.7: Trang nghệ sĩ Hình 4.8: Trang đăng nhập Hình 4.9: Trang đăng kí Hình 4.10: Trang liên hệ CHƯƠNG I: GIỚI THIỆU Tổng quan lĩnh vực đề tài: Đề tài tập trung vào lĩnh vực phát triển trang web âm nhạc Trang web âm nhạc tảng cung cấp thông tin giúp người dùng truy cập thưởng thức hát album âm nhạc trực tuyến Mục đích trang web âm nhạc tạo tảng tốt để người dùng thưởng thức âm nhạc khám phá hát từ nghệ sĩ yêu thích Các ứng dụng trang web âm nhạc trực tuyến trở thành phần quan trọng sống đại, mà người dùng truy cập nghe nhạc từ nơi thông qua thiết bị di động Vì vậy, phát triển trang web âm nhạc không cách để phục vụ thị trường âm nhạc mà phần việc thúc đẩy tiến phát triển công nghệ thị trường trực tuyến Trang web cung cấp tảng trực tuyến để người dùng tìm kiếm, đăng tải nghe nhạc yêu thích ca sĩ họ yêu thích Trang web cần đảm bảo tính thân thiện dễ sử dụng, giúp người dùng dễ dàng tìm kiếm lựa chọn khóa tập thể dục phù hợp với nhu cầu mục tiêu cá nhân họ Giao diện trực quan, bố cục hợp lý hệ thống điều hướng rõ ràng giúp người dùng dễ dàng tìm thấy thơng tin khám phá nhạc ưa thích có nững phút giây thư giãn thoải mái sử dụng trang web Lí chọn đề tài: Việc phát triển trang web phát nhạc đề tài quan tâm phát triển rộng rãi thời gian gần Điều phổ biến tính cần thiết âm nhạc đời sống hàng ngày người, phát triển công nghệ internet, giúp người tiếp cận dễ dàng nghe nhạc lúc nơi Sự phổ biến âm nhạc: âm nhạc trở thành phần thiếu đời sống người Việc phát triển trang web phát nhạc giúp cộng đồng âm nhạc tiếp cận thưởng thức âm nhạc dễ dàng đánh vào nhu cầu ngừoi dung, Một lý khác để chọn đề tài trang web phát nhạc phù hợp với kiến thức tin học học môn Thiết kế Web.Trang web phát nhạc thường chức cụ thể dễ hình dung giao diện đẹp thân thiện dễ sử dụng, đòi hỏi yêu cầu khả thiết kế giao diện Trong môn thiết kế web, sinh viên học cách tạo giao diện cách kỹ thuật thiết kế web đáp ứng (responsive web design) cho phép trang web thích nghi với kích thước hình khác thiết bị nên phù hợp để tạo trang web web phát nhạc Ngoài ra, phát triển trang web phát nhạc đòi hỏi kiến thức lập trình web chuyên sâu để xây dựng trang web tối ưu với khả tải nhanh có kết nối mượt mà với máy chủ, sở liệu, API bên thứ ba Thích hợp để làm đề tài thân sinh viên phát triển sau Vì vậy, phát triển trang web phát nhạc không cung cấp hội để áp dụng kiến thức học môn Thiết kế Web, mà cịn đóng vai trị quan trọng việc nâng cao kỹ thiết kế phát triển web sinh viên Trang Mục tiêu đề tài: -Nắm kiến thức xây dựng website ngơn ngữ lập trình web -Xây dựng website có đầy đủ chức mà đề tài cần phải có CHƯƠNG II: NGHIÊN CỨU TỔNG QUAN & CƠ SỞ LÝ THUYẾT Tầm quan trọng vấn đề xây dựng trang web Xây dựng website phát nhạc yếu tố thiếu việc phát triển quảng bá âm nhạc trực tuyến Website phát nhạc không cung cấp tảng cho người nghe thưởng thức âm nhạc cách dễ dàng thuận tiện, mà cịn mang lại nhiều lợi ích quan trọng khác cho ngành công nghiệp âm nhạc Đầu tiên, xây dựng website phát nhạc mang đến khả tiếp cận âm nhạc toàn cầu cho người nghe Với phát triển cơng nghệ, người nghe tiếp cận với sưu tập âm nhạc đa dạng từ khắp nơi giới Bất kể vị trí địa lý, người nghe truy cập thưởng thức âm nhạc từ nghệ sĩ ban nhạc ưa thích họ mà khơng gặp rào cản quốc gia khu vực Thứ hai, việc xây dựng website phát nhạc tạo tảng quảng bá quan trọng cho nghệ sĩ Website cung cấp hội quan trọng để nghệ sĩ tự quảng bá chia sẻ âm nhạc với người Điều giúp họ thu hút ý công chúng tiếp cận với lượng lớn người nghe tiềm năng, mở hội để xây dựng nghiệp âm nhạc thành cơng Ngồi , website phát nhạc cho phép người nghe tận hưởng trải nghiệm cá nhân hóa Các playlist cá nhân, gợi ý hát dựa lịch sử nghe khả tìm kiếm tiện lợi giúp người nghe tìm khám phá âm nhạc cách dễ dàng Điều tạo nên trải nghiệm thú vị tận hưởng tiện ích từ phát triển công nghệ Tổng kết lại, xây dựng website phát nhạc không giúp người nghe thưởng thức âm nhạc toàn cầu, quảng bá cho nghệ sĩ mới, tương tác với người nghe, tạo trải nghiệm cá nhân hóa tạo kết nối với cộng đồng âm nhạc, mà cịn đóng góp vào phát triển thành cơng ngành công nghiệp âm nhạc Trang 2.Tổng quan website: Website hay gọi trang web, tập hợp trang web, thường nằm tên miền tên miền phụ World Wide Web Internet Một trang web tập tin HTML XHTML truy nhập dùng giao thức HTTP Trang mạng xây dựng từ tệp tin HTML (trang mạng tĩnh) vận hành CMS chạy máy chủ (trang mạng động) Trang mạng xây dựng nhiều ngơn ngữ lập trình khác (PHP, Java, ) Để website hoạt động cần yếu tố: • Cần có tên miền (domain) • Nơi lưu trữ website (server) • Nội dung trang web sở liệu thông tin Trang web thiết kế phát triển chuyên gia thiết kế web công ty phát triển web Các công cụ ngôn ngữ lập trình web HTML, CSS, JavaScript, PHP MySQL sử dụng để tạo trang web chuyên nghiệp đa dạng Hiện nay, trang web phát triển nhanh liên tục thích nghi với thay đổi công nghệ nhu cầu người dùng, phát triển với nhiều xu hướng để tăng cường khả tương tác với người dùng, cải thiện trải nghiệm người dùng đảm bảo an toàn bảo mật cho người dùng Các trang web sử dụng nhiều công nghệ để tạo trang web đa dạng, chuyên nghiệp hiệu Trang 3.Tổng quan công nghệ sử dụng 3.1 Hypertext Markup Language (HTML) Là ngôn ngữ đánh dấu siêu văn sử dụng để tạo nên trang web HTML định nghĩa cấu trúc trang web, bao gồm đoạn văn bản, hình ảnh, liên kết thành phần khác Hình 2.1: Hypertext Markup Language (HTML) 3.2 Cascading Style Sheets (CSS) Là ngôn ngữ định dạng để tạo nên giao diện trang web CSS giúp tạo hiệu ứng, màu sắc, font chữ kích thước cho thành phần trang web Hình 2.2: Cascading Style Sheets (CSS) Trang 3.3 JavaScript (JS) Là ngơn ngữ lập trình để tạo tính tương tác trang web JavaScript sử dụng để tạo hiệu ứng động, kiểm tra đầu vào người dùng thực tác vụ khác trang web Hình 2.3: JavaScript (JS) 3.4 Responsive design Là kỹ thuật thiết kế web để tạo trang web hiển thị tốt thiết bị di động máy tính bảng Responsive design sử dụng CSS JavaScript để điều chỉnh giao diện trang web theo kích thước hình thiết bị Trang CHƯƠNG III: Phân tích thiết kế hệ thống Phân tích yêu cầu : 1.1 Yêu cầu môi trường Chạy trình duyệt web Chạy hệ điều hành, tảng khác 1.2 Yêu cầu giao diện Các điều khiển trang web cần quen thuộc, dễ thao tác với người dùng Thơng tin hình ảnh bao quát, đẹp, giao diện đơn giản, màu sắc hài hịa Tên trường thơng tin, chức phải thống toàn giao diện 1.3 Yêu cầu chức Website phải có đầy đủ chức bản: đăng nhập, đăng ký, đọc xem tin tức, thông tin chiến dịch, diễn đàn môi trường 2.Chức hệ thống 2.1 Chức đăng nhập, đăng ký 2.1 Chức nghe nhạc trang web :Khi vào trang web người dùng nghe nhạc có sẵn trang 2.3Chức xem thông tin nhạc sĩ danh sách album: Khi vào trang người dùng xem thông tin nhạc sĩ danh sách album 3.Thiết kế giao diện 3.1 Bố cục Gồm phần chính: Header (đầu trang), Content (nội dung trang) cuối Footer (chân trang) Header: Phần đầu trang website thường chứa logo, menu tìm kiếm Trang Content: Nội dung, viết trang web Footer: Phần chân trang website thường chứa liên kết trong, liên kết ngồi, thơng tin liên hệ quyền Ngồi ra, cịn bao gồm nhiều thành phần khác: Navigation, Sidebar, … 3.2 Thiết kế đồ họa, phối màu giao diện Giao diện đẹp độc đáo Những icon menu bắt mắt, dễ dùng, dễ biết, màu phối với phải hòa hợp Màu sắc website thiên màu tươi mát bắt mắt, chẳng hạn màu chủ đạo nên tương thích với màu logo, banner website Hình ảnh sử dụng cần phải có kích thước hợp lý để khơng làm ảnh hưởng đến tốc độ tải trang Font chữ thể đơn giản trang trọng cho trang web 3.3 Thiết kế chức Thiết kế form đăng nhập, đăng ký website Thiết kế mục phát nhạc,mục album nhạc,danh sách nghệ sĩ Trang CHƯƠNG IV : CÀI ĐẶT VÀ XÂY DỰNG DEMO 1.Giao diện trang chủ 1.1 Thanh navigation Hình 4.1a – Thanh navigation Hình 4.1b- Thanh navigation dạng trang web danh cho di động 1.2 Thanh sidebar Hình 4.2 Thanh sidebar 1.3 Phần nội dung Trang Hình 4.3 : Phần nội dung 1.4 Ô phát nhạc Hình 4.4 :Ô phát nhạc 1.5 Footer Hình4.5:Footer Trang 2.Giao diện trang album Hình 4.6:Trang album Trang 10 3.Giao diện trang nghệ sĩ Hình 4.7:Trang nghệ sĩ Trang 11 4.Giao diện trang đăng nhập Hình 4.8: Trang đăng nhập 5.Giao diện trang đăng kí Hình 4.9:Trang đăng kí Trang 12 CHƯƠNG V:KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 5.1 Kết thu - Sau nghiên cứu, nhóm xây dựng trang web tun truyền bảo vệ mơi trường, tìm hiểu, thiết kế slide viết báo cáo - Tích lũy nhiều kiến thức tảng thiết kế, xây dựng website, hỗ trợ tốt cho công việc tương lai 5.2 Hạn chế - Website sơ khai, chưa thể thao tác nhiều, số chức chưa hoạt động 5.3 Hướng phát triển đề tài - Cần cải thiện sản phẩm nâng cao kỹ thiết kế website, slide viết báo cáo - Rèn luyện thêm khả làm việc nhóm - Hỗ trợ thêm nhiều tính cho trang web Trang 13 : DANH MỤC TÀI LIỆU THAM KHẢO Tiếng Việt: Website gì? Có loại website nào?, Nguyễn Hưng, 17/01/2022 https://vietnix.vn/website-la-gi/ WWW gì? Tìm hiểu lịch sử World Wide Web, Nguyễn Hưng, 23/11/2022 https://vietnix.vn/www-la-gi/ Vai trị lập trình HTML, CSS JavaScript việc xây dựng website, Codegym, 05/02/2019 https://codegym.vn/blog/2019/02/05/vai-tro-cua-lap-trinh-html-css-va-javascript-trongviec-xay-dung-website/ Báo cáo mơn học - Mơn phân tích thiết kế hệ thống thơng tin, Lương Thúy Hịa, Nguyễn Võ Quốc Huy, Tp Hồ Chí Minh, 12/2021 https://www.studocu.com/vn/document/truong-dai-hoc-tai-chinh-marketing/phan-tichva-du-bao-trong-kinh-doanh/bao-cao-mon-hoc-mon-phan-tich-thiet-ke-he-thong-thongtin/25562587 Báo cáo thiết kế lập trình web, Nhi Nguyễn, Đà Nẵng, 01/2022 https://www.studocu.com/vn/document/dai-hoc-da-nang/information-tecnology/bao-caothiet-ke-va-lap-trinh-web-nhom-8/36745490 Trang 14