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

Điều đặc biệt hơnviệc tạo ra một website nghe nhạc không chỉ đáp ứng nhu cầu ngày càng tăng của người dùng trong việc tiếp cận và tận hưởng âm nhạc mà còn mang lại cơ hội phát triển cho

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Ở 1

ĐỀ TÀI: THIẾT KẾ GIAO DIỆN WEBSITE NGHE

NHẠC HUYPER’S MUSIC BOX

Sinh viên thực hiện : 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

LỜI MỞ ĐẦU

Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là mộttrong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổchức, cũng như của các công ty, nó đóng vai trò hết sức quan trọng, có thể tạo ranhững bước đột phá mạnh mẽ

Cũng chính internet đã thay đổi cách tiếp cận của con người đối với âm nhạc một cách đáng kể Trước đây, việc nghe nhạc thường liên quan đến việc mua bản sao đĩa

CD hoặc tìm kiếm các đài phát thanh truyền hình để nghe nhạc Tuy nhiên, với sự pháttriển của internet, người dùng có thể truy cập và tận hưởng âm nhạc một cách dễ dàng

và thuận tiện hơn

Việc tạo ra một website nghe nhạc là một bước quan trọng để đáp ứng nhu cầu ngày càng tăng của người dùng Với một website nghe nhạc, người dùng có thể nghe nhạc trực tuyến từ mọi thiết bị có kết nối internet, từ máy tính đến điện thoại di động Điều này mang đến sự linh hoạt và tiện lợi cho người dùng vì họ không cần phải tải xuống hay lưu trữ nhạc trên thiết bị của mình

Một website nghe nhạc cũng cung cấp khả năng tìm kiếm và khám phá âm nhạc một cách rộng rãi Người dùng có thể dễ dàng tìm kiếm các bài hát, album, và nghệ sĩ yêu thích của mình thông qua các chức năng tìm kiếm và sắp xếp trên website Ngoài

ra, website cũng cung cấp các gợi ý và danh mục đa dạng để giúp người dùng khám phá âm nhạc mới và đa dạng hơn

Bên cạnh đó, một website nghe nhạc cũng tạo cơ hội cho các nghệ sĩ và ban nhạcmới có thể quảng bá sự sáng tạo và tài năng của mình Chúng tôi cung cấp không chỉ một nền tảng để chia sẻ âm nhạc mà còn cung cấp các công cụ và tính năng để xây dựng cộng đồng và thu hút sự quan tâm của người hâm mộ

Điều đặc biệt hơnviệc tạo ra một website nghe nhạc không chỉ đáp ứng nhu cầu ngày càng tăng của người dùng trong việc tiếp cận và tận hưởng âm nhạc mà còn mang lại cơ hội phát triển cho các nghệ sĩ và ban nhạc

Do những lý do trên,chúng em đã thực hiện đồ án “THIẾT KẾ GIAO DIỆNCHO WEBSITE NGHE NHẠC HUYPER’S MUSIC BOX”

3

LỜI CẢM ƠN

Lời đầu tiên em muốn bày tỏ lòng biết ơn sâu sắc và chân thành nhất đến tất cả các

cá nhân và tổ chức đã hỗ trợ, giúp đỡ tôi trong suốt quá trình nghiên cứu và phát triển ứng dụng chăm sóc sức khỏe này Em nhận thấy rằng, đây là sự đóng góp quan trọng

và không thể thiếu trong quá trình tìm hiểu, nghiên cứu, thiết kế, phát triển và triển khai sản phẩm của em

Em xin gửi lời cảm ơn đặc biệt đến các Thầy Cô ở khoa Khoa Học Máy Tính, những người đã truyền đạt kiến thức, kinh nghiệm và hỗ trợ em trong suốt quá trình học tập tại trường Và nhiều hơn 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 và cô Nguyễn Ngọc Huyền Trân nhờ sự giúp đỡ tận tình của thầy cô, em mới có thể tích lũy đủ kiến thức để thực hiện được dự án này Đặ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 trong thời gian thực hiện đồ án này.Em xin chân thành cảm ơn và hy vọng nhận được sự tiếp tục

hỗ trợ và động viên của thầy cô trong tương lai

Ngoài ra, với sự đồng lòng, hợp tác, góp ý và giúp đỡ lẫn nhau trong suốt quá trìnhphát triển sản phẩm Dù bài báo cáo còn nhiều hạn chế và chưa được hoàn thiện tối đa,nhưng với sự đóng góp và đánh giá của quý thầy cô, em sẽ có thể hoàn thiện và nâng cao kiến thức của mình hơn nữa Em xin chân thành cảm ơn quý Thầy Cô đã dành thờigian và tâm huyết để giúp đỡ em trong quá trình nghiên cứu và hoàn thiện bài bài báo cáo này

Cuối cùng, chúng em hi vọng sẽ tiếp tục phát triển và cải tiến sản phẩm, và hy vọng có thể đóng góp tích cực cho việc chăm sóc sức khỏe của cộng đồng

Em xin chân thành cảm ơn!

Người thực hiện

4

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

………

……… ………

……… ………

……… ………

……… ………

……… ………

……… ………

……… ………

Xác nhận của giảng viên hướng dẫn

5

MỤC LỤC

MỞ ĐẦU

CHƯƠNG I GIỚI THIỆU

1.Tổng quan về đề tài

2 Lý do chọn đề tài

3 Mục tiêu của đề tài

CHƯƠNG II NGHIÊN CỨU TỔNG QUAN & CƠ SỞ LÝ THUYẾT

1 Tầm quan trọng của vấn đề xây dựng website

2 Tổng quan về website

3 Tổng quan các 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

1 Phân tích yêu cầu

1.1 Yêu cầu về môi trường

1.2 Yêu cầu về giao diện

1.3 Yêu cầu về chức năng

2 Chức năng của hệ thống

2.1 Chức năng đăng nhập, đăng ký

2.2 Chức năng nghe nhạc trên trang web

2.3 Chức năng xem thông tin về nhạc sĩ hoặc danh sách album

3 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 năng

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

2 Giao diện album

3 Giao diện trang nghệ sĩ

4 Giao diện trang đăng nhập

3 Giao diện trang đăng kí

CHƯƠNG 5 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

1 Kết quả thu được

2 Hạn chế

3 Hướng phát triển của đề 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 của 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

1 Tổng quan về lĩnh vực của đề tài:

Đề tài này tập trung vào lĩnh vực phát triển trang web âm nhạc Trang web âm nhạc là nền tảng cung cấp thông tin và giúp người dùng truy cập và thưởng thức các bài hát và album âm nhạc trực tuyến.Mục đích của trang web âm nhạc là tạo ra một nền tảng tốt nhất

để người dùng thưởng thức âm nhạc và khám phá những bài hát mới nhất từ các nghệ sĩ yêuthích của mình

Các ứng dụng và trang web âm nhạc trực tuyến đang trở thành một phần quan trọng của cuộc sống hiện đại, khi mà người dùng có thể truy cập và nghe nhạc từ mọi nơi thông qua các thiết bị di động Vì vậy, sự phát triển của trang web âm nhạc không chỉ là một cách

để phục vụ thị trường âm nhạc mà còn là một phần của việc thúc đẩy sự tiến bộ và phát triểncủa công nghệ và thị trường trực tuyến

Trang web cung cấp một nền tảng trực tuyến để người dùng có thể tìm kiếm, đăng tải

và nghe những bài nhạc yêu thích của ca sĩ họ yêu thích Trang web cần đảm bảo tính thân thiện và dễ sử dụng, giúp người dùng dễ dàng tìm kiếm và lựa chọn các khóa tập thể dục phù hợp với nhu cầu và mục tiêu cá nhân của họ Giao diện trực quan, bố cục hợp lý và 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 và khám phá ra nhữngbài nhạc ưa thích cũng như có nững phút giây thư giãn thoải mái khi sử dụng trang web này

2 Lí do chọn đề tài:

Việc phát triển trang web phát nhạc là một đề tài được quan tâm và phát triển rộng rãi trong thời gian gần đây Điều này là do sự phổ biến và tính cần thiết của âm nhạc trong đời sống hàng ngày của con người, cũng như sự phát triển của công nghệ và internet, giúp mọi người có thể tiếp cận dễ dàng và nghe nhạc mọi lúc mọi nơi.Sự phổ biến của âm nhạc: âm nhạc đã trở thành một phần không thể thiếu trong đời sống của con người Việc phát triển trang web phát nhạc sẽ giúp cộng đồng âm nhạc tiếp cận và thưởng thức âm nhạc dễ dàng hơn đánh vào nhu cầu của ngừoi dung,

Một lý do khác để chọn đề tài trang web phát nhạc là vì nó rất phù hợp với những kiến thức tin học được học trong môn Thiết kế Web.Trang web phát nhạc thường chức năng cụ thể dễ hình dung cùng giao diện đẹp thân thiện và dễ sử dụng, đòi hỏi yêu cầu về khả năng thiết kế giao diện Trong môn thiết kế web, sinh viên sẽ được học cách tạo ra các giao diện một cách và các kỹ thuật thiết kế web đáp ứng (responsive web design) cho phép trang web thích nghi được với các kích thước màn hình khác nhau của các thiết bị nên rất phù hợp để tạo ra một trang web như là web phát nhạc

Ngoài ra, phát triển trang web phát nhạc cũng đòi hỏi kiến thức về lập trình web

chuyên sâu để xây dựng các trang web tối ưu với khả năng tải nhanh và có kết nối mượt mà với các máy chủ, cơ sở dữ liệu, và các API của bên thứ ba Thích hợp để làm đề tài để cho bản thân sinh viên phát triển sau này Vì vậy, phát triển trang web phát nhạc không chỉ cung cấp cơ hội để áp dụng các kiến thức được học trong môn Thiết kế Web, mà còn đóng vai tròquan trọng trong việc nâng cao kỹ năng thiết kế và phát triển web của sinh viên

Trang 1

3. Mục tiêu đề tài:

-Nắm được kiến thức về xây dựng website cũng như ngôn ngữ lập trình web

-Xây dựng website có đầy đủ các chức năng mà đề tài cần phải có

CHƯƠNG II: NGHIÊN CỨU TỔNG QUAN & CƠ SỞ LÝ

THUYẾT

1 Tầm quan trọng của vấn đề xây dựng trang web

Xây dựng một website phát nhạc là một yếu tố không thể thiếu trong việc phát triển vàquảng bá âm nhạc trực tuyến Website phát nhạc không chỉ cung cấp một nền tảng cho người nghe thưởng thức âm nhạc một cách dễ dàng và 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 một website phát nhạc mang đến khả năng tiếp cận âm nhạc toàn cầu cho người nghe Với sự phát triển của công nghệ, người nghe có thể tiếp cận với một bộsưu tập âm nhạc đa dạng từ khắp nơi trên thế giới Bất kể vị trí địa lý, người nghe có thể truy cập và thưởng thức âm nhạc từ các nghệ sĩ và ban nhạc ưa thích của họ mà không gặp bất kỳ rào cản về quốc gia hoặc khu vực

Thứ hai, việc xây dựng website phát nhạc tạo ra một nền tảng quảng bá quan trọng cho nghệ sĩ mới Website này cung cấp một cơ hội quan trọng để nghệ sĩ mới tự quảng bá và chia sẻ âm nhạc của mình với mọi người Điều này giúp họ thu hút được sự chú ý của công chúng và tiếp cận với một lượng lớn người nghe tiềm năng, mở ra cơ hội để xây dựng một

sự nghiệp âm nhạc thành công

Ngoài ra , 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 ý bài hát dựa trên lịch sử nghe và khả năng tìm kiếm tiện lợi giúp người nghe tìm và khám phá âm nhạc mới một cách dễ dàng Điều này tạo nên một trải nghiệm thú vị và tận hưởng tiện ích từ sự phát triển công nghệ

Tổng kết lại, xây dựng một website phát nhạc không chỉ 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 và tạo kết nối với cộng đồng âm nhạc, mà còn đóng góp vào sự phát triển và thànhcông của ngành công nghiệp âm nhạc

Trang 2

2.Tổng quan về website:

Website hay còn gọi là trang web, là một tập hợp trang web, thường chỉ nằm trongmột tên miền hoặc tên miền phụ trên World Wide Web của Internet Một trang web là tậptin HTML hoặc XHTML có thể truy nhập dùng giao thức HTTP Trang mạng có thể đượcxây dựng từ các tệp tin HTML (trang mạng tĩnh) hoặc vận hành bằng các CMS chạy trênmáy chủ (trang mạng động)

Trang mạng có thể được xây dựng bằng nhiều ngôn ngữ lập trình khác nhau(PHP, Java, ) Để một website hoạt động cần 3 yếu tố:

• Cần có tên miền (domain)

• Nơi lưu trữ website (server)

• Nội dung các trang web hoặc cơ sở dữ liệu thông tin

Trang web có thể được thiết kế và phát triển bởi các chuyên gia về thiết kế web hoặccác công ty phát triển web Các công cụ và ngôn ngữ lập trình web như HTML, CSS,JavaScript, PHP và MySQL được sử dụng để tạo ra các trang web chuyên nghiệp và đadạng

Hiện nay, trang web đang phát triển rất nhanh và liên tục thích nghi với sự thay đổi củacông nghệ và nhu cầu của người dùng, cũng như đang phát triển với nhiều xu hướng mới đểtăng cường khả năng tương tác với người dùng, cải thiện trải nghiệm của người dùng vàđảm bảo an toàn và bảo mật cho người dùng Các trang web cũng sử dụng nhiều công nghệmới để tạo ra các trang web đa dạng, chuyên nghiệp và hiệu quả hơn

Trang 3

3.Tổng quan về các công nghệ sử dụng

3.1 Hypertext Markup Language (HTML)

Là ngôn ngữ đánh dấu siêu văn bản sử dụng để tạo nên các trang web HTML địnhnghĩa cấu trúc của một trang web, bao gồm các đoạn văn bản, hình ảnh, liên kết và cácthành phần khác

Hình 2.1: Hypertext Markup Language (HTML)

3.2Cascading Style Sheets (CSS)

Là ngôn ngữ định dạng để tạo nên giao diện của trang web CSS giúp tạo ra các hiệuứng, màu sắc, font chữ và kích thước cho các thành phần trên trang web

Hình 2.2: Cascading Style Sheets (CSS)

Trang 4

3.3JavaScript (JS)

Là ngôn ngữ lập trình để tạo ra các tính năng tương tác trên trang web JavaScriptđược sử dụng để tạo ra các hiệu ứng động, kiểm tra đầu vào của người dùng và thực hiệncác tác vụ khác trên trang web

Hình 2.3: JavaScript (JS)

3.4Responsive design

Là một kỹ thuật thiết kế web để tạo ra các trang web có thể hiển thị tốt trên các thiết bị

di động và máy tính bảng Responsive design sử dụng CSS và JavaScript để điều chỉnh giaodiện trang web theo kích thước màn hình của thiết bị

Trang 5

CHƯƠNG III: Phân tích thiết kế hệ thống

1 Phân tích yêu cầu :

1.1 Yêu cầu về môi trường

Chạy được trên mọi trình duyệt web.

Chạy được trên mọi hệ điều hành, nền tảng khác nhau.

1.2 Yêu cầu về giao diện

Các điều khiển trê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 các trường thông tin, chức năng phải thống nhất toàn bộ giao diện.

1.3 Yêu cầu về chức năng

Website phải có đầy đủ các chức năng cơ bản: đăng nhập, đăng ký, đọc và xem tin tức, thông tin các chiến dịch, diễn đàn về môi trường.

2 Chức năng của hệ thống

2.1 Chức năng đăng nhập, đăng ký

2.1 Chức năng nghe nhạc trên trang web :Khi vào trang web thì người dùng

có thể nghe các bản nhạc có sẵn trên trang

2.3Chức năng xem thông tin về nhạc sĩ hoặc danh sách album: Khi vào trang

thì người dùng có thể xem được các thông tin về nhạc sĩ hoặc danh sách album

3 Thiết kế giao diện

Content: Nội dung, bài viết trên trang web.

Footer: Phần chân trang của website thường chứa các liên kết trong, liên kết ngoài, thông tin liên hệ và bản quyền.

Ngoài ra, còn bao gồm nhiều thành phần khác: Navigation, Sidebar, …

3.2Thiết kế đồ họa, phối màu giao diện

Giao diện đẹp và độc đáo.

Những icon thanh menu bắt mắt, dễ dùng, dễ biết, các màu phối với nhau phải hòa hợp Màu sắc của website thiên về các màu tươi mát và bắt mắt, chẳng hạn màu chủ đạo nên tương thích với màu của logo, banner trên website.

Hình ảnh được 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ể hiện sự đơn giản và trang trọng cho trang web.

3.3Thiết kế chức năng

Thiết kế form đăng nhập, đăng ký của website.

Thiết kế mục phát nhạc,mục album nhạc,danh sách nghệ sĩ.

Trang 7