MÔN học NHẬP môn lập TRÌNH PYTHON CHO PHÂN TÍCH đ) tài xây D+NG WEB TRÌNH PHÁT NHẠC

Xây dựng giao diện v chức năng yêu cầu cập nhật nhạcupload Nguyn Thanh Sang T^m hi_u FrameWork Django, xậy dựng chức năng t^m kiếm bi hátSearch, xây dựng giao diện v cập nhật xu hướn

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA CÔNG NGHỆ THÔNG TIN

Huỳnh Công Quyền 20110258Nguyn Thanh Sang 20110710

Thành phố Hồ Chí Minh, Tháng 5 năm 202

MỤC LỤC

PHẦN 1: MỞ ĐẦU 7

1.1 Lý do chọn đề ti 7

1.2.Mục tiêu của đề ti 8

1.3.Phương pháp nghiên cứu của đề ti 8

PHẦN 2 : NỘI DUNG 8

2.1 Giới thiệu về framework 8

Ci đặt Django trên Windows 10

Ci đặt Django trên Linux, Mac 10

2.2 Giao diện v chức năng 12

2.2.1 Giao diê Nn chOnh của Web 12

2.2.2 Trending Songs 13

2.2.3 All Songs 14

2.2.4 Album 16

2.2.5.Search 16

2.2.6.Login 17

2.2.7.Personal List 19

PHẦN 3: KẾT LUẬN 22

1 Những điều đạt được 22

2 Hướng cải tiến đề ti 22

PHẦN 4: TÀI LIỆU THAM KHẢO 23

PHỤ LỤC HÌNH ẢNH

H^nh 1 Mô h^nh MVT của Django 9

H^nh 2 Giao diê Nn chOnh của Web 12

H^nh 3 Trending Songs trên Web 13

H^nh 4 Hi_n th` tat cả bi hát trên Web 14

H^nh 5 Giao diê Nn khi nghe bi hát 14

H^nh 6 Hi_n t` những Album trên Web 15

H^nh 7 Hi_n th` kết quả khi Search bi hát 16

H^nh 8 Giao diê Nn đăng nhâ Np cho User 17

H^nh 9 Giao diê Nn đăng kO cho User 17

H^nh 10 Giao diê Nn khi user đăng nhâ Np thnh công 18

H^nh 11 Giao diê Nn khi thêm bi hát danh sách cá nhân 19

H^nh 12 Giao diê Nn hi_n th` danh sách bi hát cá nhân 20

H^nh 13 Giao diê Nn hi_n th` l`ch sd những bi hát đe nghe 20

DANH SÁCH THÀNH VIÊN NHÓM 2

ST

Lê Anh Kiê Nt

T^m hi_u FrameWork Django, xây dựng chức năng đăng

kO, đăng nhập Xây dựng giao diện v chức năng yêu cầu cập nhật nhạc(upload)

Nguyn Thanh Sang

T^m hi_u FrameWork Django, xậy dựng chức năng t^m kiếm bi hát(Search), xây dựng giao diện v cập nhật xu hướng nhạc (trending songs)

Huỳnh Công Quyền

T^m hi_u FrameWork Django, chức năng thêm bi nhạc vo danh sách cá nhân Xây dựng chức năng xem l`ch sd nghe nhạc,tạo cơ sở dữ liệu,quản lO admin

- Đánh giá kết quả: Các thnh viên hon thnh các nhiệm vụ đúng thời

hạn,hon thnh nhiệm vụ tốt.Mặc dù có chút khó khăn trong quá tr^nh t^mhi_u các kiến thức mới nhưng được sự hỗ trợ từ các bạn trong nhóm,cùnglớp đe hon thnh đề ti đúng thời hạn

NHẬN XÉT CỦA GIẢNG VIÊN

● H^nh thức:

………

………

………

………

● Nội dung: ………

………

………

………

………

………

………

● Đi_m: ……

GIẢNG VIÊN

ThS NGUYỄN VĂN THÀNH

Lời nói đầu

Lời đầu tiên, chúng em xin trân trọng cảm ơn v by tỏ lòng biết ơn sâusắc nhat tới thầy Nguyễn Văn Thành – Giảng viên khoa Công Nghệ thông TinTrường Đại Học Sư Phạm Kỹ Thuật TPHCM, giáo viên hướng dẫn lm đề tiny đe nhiệt t^nh hướng dẫn v chỉ bảo chúng em

Chúng em xin trân thnh cảm ơn các thầy cô giáo đang giảng dạy tại khoaCông Nghệ thông Tin Trường Đại Học Sư Phạm Kỹ Thuật TPHCM đe nhiệtt^nh ủng hộ, cung cap ti liệu v đưa ra những ý kiến đóng góp quý báu đ_nhóm em hon thnh tốt đề ti của m^nh!

Xin chân thành cảm ơn!

PHẦN 1: MỞ ĐẦU1.1 Lý do chọn đề tài

Thời đại 4.0 hiện nay, Công nghệ thông tin l một trong những ngnhhng đầu, có nhiều bước phát tri_n nhanh chóng về ứng dụng của nó trong mọilĩnh vực Nó l một phần không th_ thiếu của cuộc sống văn minh, góp phầnđẩy mạnh công cuộc công nghiệp hóa hiện đại hóa đat nước Thông qua máy vitOnh cùng với những phần mềm hỗ trợ đe giúp chúng ta quản lý , tổ chức, sắpxếp v xd lý công việc một cách nhanh chóng v hiệu quả

Theo thống kê hiện nay, ta thay hơn 24.3 triệu người đang sd dungInternet trên ton thế giới Trong đó, Việt Nam l một nước có tỷ lệ sd dụngđứng thứ 20 trên thế giới sd dụng mạng đ_ truy cập thông tin Âm nhạc onlinel một trong những loại thông tin được t^m kiếm nhiều nhat chiếm 76% Nắmbắt được những thông tin đó , nhóm chúng em đe cùng nhau xây dựng một tr^nhnghe nhạc trực tuyến trên web với mục đOch đem lại cho những người yêu âmnhạc có những trải nghiệm mới, đưa đến những sản phẩm âm nhạc hay v phùhợp với mọi đối tượng khách hng

Với những yếu tố thuận lợi cả trong lẫn ngoi, cùng với tiềm năng pháttri_n âm nhạc ở Việt Nam , chúng em tin đây l một đề ti có tiềm năng pháttri_n Đ_ học hỏi v hi_u rõ hơn về Python cũng như các ngôn ngữ khác, chúng

em hy vọng đây l một đề ti phù hợp vừa nâng cao kiến thức vừa đem đến mộtsản phẩm mang giúp mọi người nghe nhạc thư giản sau những giờ lm mệt mỏi

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

 Xây dựng Website Tr^nh Phát Nhạc

 Nghiên cứu, học học các Framework : Django,…

 Vận dụng kiến thức ngôn ngữ Python

1.3.Phương pháp nghiên cứu của đề tài

 T^m hi_u v ứng dụng ngôn ngữ Python

 Sd dụng cơ sở dữ liệu đ_ lưu trữ v trOch xuat

 T^m hi_u các công nghệ hỗ trợ:Django Framework, Html, Http, CSS

PHẦN 2 : NỘI DUNG2.1 Giới thiệu về framework

Web tr^nh phát nhạc được viết dựa trên Django - framework hỗ trợ Python trong

lâ Np tr^nh web

- Django l một framework bậc cao của Python có th_ thúc đẩy việc phát tri_n

phần mềm thần tốc v clean, thiết kế thực dụng Được xây dựng bởi nhiều lậptr^nh viên kinh nghiệm, Django tập trung lớn những van đề phát tri_n Web, bạn

có th_ phát tri_n trang web của bạn m không cần xây dựng từ những căn bản

- Những lợi thế của Django:

● Hoàn thiện: Django phát tri_n theo tư tưởng "Batteries included" (cóth_ hi_u ý nghĩa l tOch hợp ton bộ, chỉ cần gọi ra m dùng) Nó cung capmọi thứ cho developer không cần phải nghĩ phải dùng cái ngoi Chúng tachỉ cần tập trung vo sản phẩm, tat cả đều hoạt động liền mạch với nhau

● Đa năng: Django có th_ được dùng đ_ xây dựng hầu hết các loại website,

từ hệ thống quản lý nội dung, cho đến các trang mạng xe hội hay web tintức Nó có th_ lm việc với framework client-side, v chuy_n nội dunghầu hết các loại format (HTML, RESS, JSON, XML, )

● Bảo mật: Django giúp các developer coi trọng các lỗi bảo mật thông

thường bằng cách cung cap framework rằng có những kĩ thuật "phải lmnhư vậy" đ_ bảo vệ website VO dụ: Django cung cap bảo mật quản lý tênti khoản v mật khẩu, tránh các lỗi cơ bản như đ_ thông tin session lêncookie, me hóa mật khẩu thay v^ lưu thẳng

● Dễ Scale: Django sd dụng kiến trúc shared-nothing dựa

vo component (mỗi phần của kiến trúc sẽ độc lập với nhau, v có th_thay thế hoặc sda đổi nếu cần thiết) Có sự chia tách rõ rng giữa cácphần nghĩa l nó có th_ scale cho việc gia tăng traffic bằng cách thêmphần cứng ở mỗi cap độ: caching, servers, database servers, hoặc

application servers Nhiều web về kinh doanh đe thnh công khi Djangođược scale đáp ứng yêu cầu của họ

● Dễ maintain: code Django được viết theo nguyên tắc thiết kế v pattern

có th_ khuyến khOch ý tưởng bảo tr^ v tái sd dụng code Trên thực tế, nó

sự theo khái niệm Don't Repeat Yourself lm cho không có sự lặp lạikhông cần thiết, giảm một lượng code

● Tính linh động: Django được viết bằng Python, nó có th_ chạy đa nền tảng Nó có nghĩa rằng bạn không rng buộc một platform server cụ th_.Django được hỗ trợ tốt ở nhiều nh cung cap hosting, họ sẽ cung cap hạtầng v ti liệu cụ th_ cho hosting web Django

Hwnh 1 Mô hwnh MVT của Django

- Cài đă y t Django

Ta sẽ ci đặt Django bằng tr^nh lệnh pip của Python

Ci đặt Django trên Windows

● Nhan tổ hợp phOm Window + R,

● Gõ cmd nhan enter đ_ mở một cda sổ terminal, sau đó gõ:

pip install django

Ci đặt Django trên Linux, Mac

● Tổ hợp phOm Ctrl + Alt + T để mở Terminal

● Gõ:

sudo apt-get install python3-django

Mô h^nh trong kiến trúc MVT của Django xác đ`nh cau trúc v hnh vicủa dữ liệu bạn muốn lưu trữ thông qua trang web của m^nh Mỗi mô h^nhDjango bạn tạo sẽ tạo ra một bảng cơ sở dữ liệu tương ứng, trong đó mỗi thuộctOnh của mô h^nh sẽ trở thnh một trường trong bảng

Cau trúc tệp dự án Django mẫu hiện có

Những file trong ny đều có 1 chức năng riêng v cụ th_ nó sẽ như sau:

● init .py l 1 file rỗng chỉ đ`nh việc cái đường dẫn folder ny sẽ đượcxem như l 1 Python package

● settings.py l file chứa các settings của project Trong file ny chứa cácsetting cơ bản như DEBUG, ALLOWED_HOSTS, INSTALLED_APP,DATABASES,

● urls.py l file khai báo các URL của project (ki_u như routing, với đ`a chỉno th^ sẽ thực thi hm no)

● wsgi.py l file dùng deploy project lên server

● manage.py l file đ_ tạo app, migrate,

- Đề ti xây dựng trên mô h^nh MVT (Model,Template,View)

- Model : Lm việc với cơ sở dữ liệu

- Template: Hi_n th` giao diê Nn

- View: Xd lý logic

2.2 Giao diện và chức năng

2.2.1 Giao diê y n chính của Web

Trên mn h^nh giao diện gồm các chức năng như sau

- Home: Chuy_n đến giao diê Nn chOnh của Web

- All Songs: Hi_n th` tat cả những bi hát từ CSDL

- Album: Hi_n th` những album bi hát theo th_ loại từ CSDL

- Search: T^m kiếm bi hát

- Login/Signup: Đăng nhâ Np v đăng kO

Hwnh 2 Giao diê y n chính của Web 2.2.2 Trending Songs

Thông qua việc phân tOch dữ liệu v ki_m tra dữ liệu truy cập.Những bi hát Trending sẽ được hi_n th` trên giao diê Nn chOnh l những bi hát có số lượng

Hwnh 4 Hiển th€ t•t cả bài hát trên Web

- Khi người dùng nhan vo Nút Listen th^ sẽ vo được giao diê Nn v có th_nghe được bi hát m^nh chọn

Hwnh 5 Giao diê y n khi nghe bài hát

Trên mn h^nh lúc ny hi_n th` bi hát được chọn.Thông tin bi hát gồmtên ca sĩ/nhóm nhạc , link MV v bản dowload

Nếu muốn thêm bi hát vo danh sách cá nhân th^ cần phải đăng nhâ Np

2.2.4 Album

- L nơi tập hợp các bi hát theo chủ đề/th_ loại :Nhạc việt, Hn, Us-Uk

- Đ_ truy cập vo Album ta click vo Album trên header

Hwnh 6 Hiển t€ những Album trên Web 2.2.5 Search

- Search l công cụ hỗ trợ cho người dùng t^m kiếm tên bi hát, ca sĩ theo ýmuốn, giúp người dùng đỡ tốn thao tác t^m kiếm bi hát muốn nghe

- Đ_ t^m kiếm bi hát /ca sĩ ta chỉ cần điền vo textBox Search ở headernhư h^nh bên dưới

Hwnh 7 Hiển th€ kết quả khi Search bài hát

H^nh ảnh trên l vO dụ cho đang t^m kiếm bi hát có tên l Nevada

2.2.6 Login, SignUp

Ngoi ra Web còn thiết kế chức năng Login cho người dùng:

Hwnh 8 Giao diê y n đăng nhâ y p cho User

- Nếu người dùng chưa có ti khoản th^ chỉ cn nhan vo chữ SignUp ởdưới phần đăng nhập đ_ tạo ti khoản

Hwnh 9 Giao diê y n đăng kí cho User

Ở phần giao diện gồm có những chức năng như sau:

Hwnh 10 Giao diê y n khi user đăng nhâ y p thành công

Khi đe đăng nhâ Np th^ Web cũng có những chức năng tương tự như khiuser chưa đăng nhâ Np l xem được tat cả các bi hát hay l những Album bi háttheo th_ loại, t^m kiếm bi hát theo tên bi hát Ngoi ra, sau khi đăng nhập th^

có thêm chức năng Personal List, History

2.2.7 Personal List

- L nơi lưu trữ danh sách nhạc các nhân m người dùng thêm vo

- Đ_ thêm bi hát vo danh sách cá nhân, ta vo nhan vo Listen của bihát cần thêm.Tại giao diện phát nhạc ta chọn Add to PersonalList

- Sau khi thêm nhạc thnh công người dùng sẽ nhận được thông báo nhưh^nh bên dưới

Hwnh 11 Giao diê y n khi thêm bài hát danh sách cá nhân

Lưu ý: Đ_ thêm nhạc vo danh sách cá nhân , người dùng cần phải đăng nhập

Đ_ xem lại các bi hát m^nh đe chọn người dùng chỉ cần nhat voPersonalList trên header Sau khi nhan th^ sẽ thay danh sách nhạc của m^nh như

Hwnh 12 Giao diê y n hiển th€ danh sách bài hát cá nhân

Ngoi ra còn có th_ xem lại l`ch sd những bi m^nh đe nghe bằng cáchnhan vo History trên Header (chỉ khi đăng nhập người dùng mới xem được)

Hwnh 13 Giao diê y n hiển th€ l€ch s‡ những bài hát đã nghe

PHẦN 3: KẾT LUẬN

1 Những điều đạt được

- Hi_u được cách vận hnh server của website

- Cách lm việc với database của website

- Kết hợp cùng nhiều website lớn đ_ tạo giao diện html, css như bootstrap,bootdey, codepen tiết kiệm thời gian code

- Lm việc nhóm hiệu quả

2 Hướng cải tiến đề tài

- Vận dụng hiệu quả các website đ_ phát tri_n giao diện

- Tiếp tục phát tri_n các tOnh năng của website theo nhu cầu người dùng

- Hosting website đ_ tiếp cận người dùng

- Cải tiến Searching

PHẦN 4: TÀI LIỆU THAM KHẢO

1 trong-lap-trinh-web-QpmlexbkZrd

https://viblo.asia/p/tim-hieu-ve-django-framework-ho-tro-python-2 python-django-1515

https://howkteam.vn/course/gioi-thieu-ve-python-django/gioi-thieu-ve-3 https://getbootstrap.com/

4 player-using-django/?

https://www.section.io/engineering-education/how-to-build-a-music-fbclid=IwAR0qbamXPH3WDgSzZCxrkK4G3MEnMQKHJa0QTluu oplOcPiaXDvYDeDRTZc