Professional Documents
Culture Documents
ĐỒ ÁN CƠ SỞ 1
Lớp : 22AD
ĐỒ ÁN CƠ SỞ 1
Lớp : 22AD
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ạc
mớ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.
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ình
phá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ời
gian 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.
4
NHẬN XÉT 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í................................................................................................
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ển
củ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ững
bà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ó.
Đầ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ành
cô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 trong
mộ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ập
tin HTML hoặc XHTML có thể truy nhập dùng giao thức HTTP. Trang mạng có thể được
xâ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ên
má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ố:
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 định
nghĩ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ác
thành phần khác.
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.
Trang 4
3.3 JavaScript (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ện
các tác vụ khác trên trang web.
Trang 5
CHƯƠNG III: Phân tích thiết kế hệ thống
1. Phân tích yêu cầu :
3.1 Bố cục
Gồm 3 phần chính: Header (đầu trang), Content (nội dung của trang) và cuối
cùng là Footer (chân trang).
Header: Phần đầu trang của website thường chứa logo, thanh menu và ô tìm kiếm.
Trang 6
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.2 Thiết kế đồ họa, phối màu giao diện
Trang 7
CHƯƠNG IV : CÀI ĐẶT VÀ XÂY DỰNG DEMO
1.Giao diện trang chủ
Hình 4.1b- Thanh navigation ở dạng trang web danh cho di động
Trang 8
Hình 4.3 : Phần nội dung
1.5 Footer
Hình4.5:Footer
Trang 9
2.Giao diện trang album
Trang 10
3.Giao diện trang nghệ sĩ
Trang 11
4.Giao diện trang đăng nhập
Trang 12
CHƯƠNG V:KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
5.1. Kết quả thu được
- Sau khi nghiên cứu, nhóm đã cơ bản xây dựng được một trang web tuyên truyền về bảo
vệ môi trường, tìm hiểu, thiết kế slide và viết báo cáo.
- Tích lũy nhiều kiến thức nền tảng thiết kế, xây dựng website, hỗ trợ tốt cho công việc
trong tương lai.
5.2. Hạn chế
- Website vẫn còn khá sơ khai, chưa thể thao tác nhiều, một số chức năng vẫn chưa hoạt
động được.
5.3. Hướng phát triển của đề tài
- Cần cải thiện sản phẩm và nâng cao kỹ năng thiết kế website, slide và viết báo cáo.
- Rèn luyện thêm khả năng làm việc nhóm.
- Hỗ trợ thêm nhiều tính năng mới cho trang web.
Trang 13
:
Trang 14