Báo cáo cuối kỳ 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"

lOMoARcPSD| 37054152
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 BÁO CÁO CUỐI KỲ
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
HỌC KỲ 2 – NĂM HỌC 2021 – 2022
MÃ MÔN HỌC: 212IPPA233277
Giảng viên hướng dẫn: Th.S Nguyễn Văn Thành
NHÓM SINH VIÊN THỰC HIỆN: Huỳnh Công Quyền 20110258 Nguyễn Thanh Sang 20110710 Lê Anh Kiệt 20110664 Võ Văn Nghĩa 20110684 1 lOMoARcPSD| 37054152 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ên chính 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ên chính của Web........................................................................12̣
Hình 3 Trending Songs trên Web........................................................................13
Hình 4 Hiển thị tất cả bài hát trên Web...............................................................14
Hình 5 Giao diên 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ên đăng nhậ p cho
User................................................................17̣ Hình 9 Giao diên đăng kí cho
User....................................................................17̣ Hình 10 Giao diên khi user
đăng nhậ p thành công.............................................18̣
Hình 11 Giao diên khi thêm bài hát danh sách cá nhân......................................19̣
Hình 12 Giao diên hiển thị danh sách bài hát cá nhân........................................20̣
Hình 13 Giao diên hiển thị lịch sử những bài hát đã nghe.................................20̣ lOMoARcPSD| 37054152 PHẦN 1: MỞ ĐẦU
1.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ành hàng
đầu, có nhiều bước phát triển nhanh chóng về ứng dụng của nó trong mọi lĩ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 đất nước. Thông qua máy vi tính cùng
với những phần mềm hỗ trợ đã giúp chúng ta quản lý , tổ chức, sắp xếp và xử lý
công việc một cách nhanh chóng và hiệu quả.
Theo thống kê hiện nay, ta thấy hơn 24.3 triệu người đang sử dung Internet
trên toàn thế giới .Trong đó, Việt Nam là một nước có tỷ lệ sử dụng đứng thứ 20
trên thế giới sử dụng mạng để truy cập thông tin. Âm nhạc online là một trong
những loại thông tin được tìm kiếm nhiều nhất chiếm 76%. Nắm bắt được những
thông tin đó , nhóm chúng em đã cùng nhau xây dựng một trình nghe nhạc trực
tuyến trên web với mục đích đem lại cho những người yêu âm nhạ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át
triển âm nhạc ở Việt Nam , chúng em tin đây là một đề tài có tiềm năng phát triể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ột sả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
Sử dụng cơ sở dữ liệu để lưu trữ và trích xuất
Tìm hiểu các công nghệ hỗ trợ:Django Framework, Html, Http, CSS lOMoARcPSD| 37054152 PHẦN 2 : NỘI DUNG
2.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âp trình weḅ
- 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ập
trình viên kinh nghiệm, Django tập trung lớn những vấn đề 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à tích hợp toàn bộ, chỉ cần gọi ra mà dùng). Nó cung cấp mọi
thứ cho developer không cần phải nghĩ phải dùng cái ngoài. Chúng ta chỉ
cần tập trung vào sản phẩm, tất 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 xã hội hay web tin
tức. Nó có thể làm việc với framework client-side, và chuyển nội dung
hầ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 cấp framework rằng có những kĩ thuật "phải làm
như vậy" để bảo vệ website. Ví dụ: Django cung cấp bảo mật quản lý tên
tài khoản và mật khẩu, tránh các lỗi cơ bản như để thông tin session lên
cookie, mã hóa mật khẩu thay vì lưu thẳng.
● Dễ Scale: Django sử 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 sửa
đổi nếu cần thiết). Có sự chia tách rõ ràng giữa các phần nghĩa là nó có thể
scale cho việc gia tăng traffic bằng cách thêm phần cứng ở mỗi cấp độ:
caching, servers, database servers, hoặc application servers. Nhiều web về
kinh doanh đã 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 khích ý tưởng bảo trì và tái sử dụng code. Trên thực tế, nó sự lOMoARcPSD| 37054152
theo khái niệm Don't Repeat Yourself làm cho không có sự lặp lại khô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 cấp hosting, họ sẽ cung cấp hạ
tầng và tài liệu cụ thể cho hosting web Django.
Hình 1 Mô hình MVT của Django - Cài đăt Djangọ
Ta sẽ cài đặt Django bằng trình lệnh pip của Python.
Cài đặt Django trên Windows ●
Nhấn tổ hợp phím Window + R, ●
Gõ cmd nhấn enter để mở một cửa sổ terminal, sau đó gõ: pip install django
Cài đặt Django trên Linux, Mac
● Tổ hợp phím 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 cấu trúc và hành vi của
dữ liệu bạn muốn lưu trữ thông qua trang web của mình. Mỗi mô hình Django
bạn tạo sẽ tạo ra một bảng cơ sở dữ liệu tương ứng, trong đó mỗi thuộc tính của
mô hình sẽ trở thành một trường trong bảng. Cấu trúc tệp dự án Django mẫu hiện
có mysite/ mysite/ _pycache_ _init_.py asgi.py settings.py urls.py wsgi.py lOMoARcPSD| 37054152
migration _init_.py admin.py apps.py models.py test.py views.py db.sqlite3 manage.py
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ẽ được
xem như là 1 Python package.
● settings.py là file chứa các settings của project. Trong file này chứa các
setting 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êṇ - View: Xử lý logic
2.2. Giao diện và chức năng
2.2.1. Giao diên chính của Weḅ
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ên chính của Weḅ
- All Songs: Hiển thị tất 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âp và đăng ki ̣ lOMoARcPSD| 37054152
Hình 2 Giao diên chính của Weḅ 2.2.2. Trending Songs
Thông qua việc phân tích 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ên chính là những bài hát có số lượng ̣ nghe nổi bật. lOMoARcPSD| 37054152
Hình 3 Trending Songs trên Web 2.2.3. All Songs
Web có thể truy câp vào tất cả bài hát từ CSDL khi click vào All Songṣ trên header
- Để xem danh sách các bài hát, người dùng click vào All Songs trên header để xem
- Xây dựng All Sóng bằng việc áp dụng lưu trữ trích xuất CSDL của SQLite
Hình 4 Hiển thị tất cả bài hát trên Web
- Khi người dùng nhấn vào Nút Listen thì sẽ vào được giao diên và có thê ̣
nghe được bài hát mình chọn lOMoARcPSD| 37054152
Hình 5 Giao diên khi nghe bài háṭ
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ồm
tê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âp.̣ 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
Hình 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 ở header như hình bên dưới. lOMoARcPSD| 37054152
Hình 7 Hiển thị kết quả khi Search bài hát Hình
ảnh trên là ví dụ cho đang tìm kiếm bài hát có tên là Nevada lOMoARcPSD| 37054152 2.2.6. Login, SignUp
Ngoài ra Web còn thiết kế chức năng Login cho người dùng:
Hình 8 Giao diên đăng nhậ p cho Useṛ
- Nếu người dùng chưa có tài khoản thì chỉ càn nhấn vào chữ SignUp ở dưới
phần đăng nhập để tạo tài khoản
Hình 9 Giao diên đăng kí cho Useṛ
Ở phần giao diện gồm có những chức năng như sau: - UserName lOMoARcPSD| 37054152 - FirstName - LastName - Email address - PassWord
Khi đã đăng nhâp thành công thì Web có giao diện như sau:̣
Hình 10 Giao diên khi user đăng nhập thành công ̣
Khi đã đăng nhâp thì Web cũng có những chức năng tương tự như khị user
chưa đăng nhâp là xem được tất cả các bài hát hay là những Album bài háṭ theo
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 nhấn vào Listen của bài há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 lOMoARcPSD| 37054152
Hình 11 Giao diên khi thêm bài hát danh sách cá nhâṇ 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 lOMoARcPSD| 37054152
Để xem lại các bài hát mình đã chọn người dùng chỉ cần nhất vào PersonalList
trên header. Sau khi nhấn thì sẽ thấy danh sách nhạc của mình như hình bên dưới
Hình 12 Giao diên hiển thị danh sách bài hát cá nhâṇ
Ngoài ra còn có thể xem lại lịch sử những bài mình đã nghe bằng cách nhấn
vào History trên Header (chỉ khi đăng nhập người dùng mới xem được) lOMoARcPSD| 37054152
Hình 13 Giao diên hiển thị lịch sử những bài hát đã nghẹ 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 tính 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. https://viblo.asia/p/tim-hieu-ve-django-framework-ho-tro-python- trong-
lap-trinh-web-QpmlexbkZrd
2. https://howkteam.vn/course/gioi-thieu-ve-python-django/gioi-thieu-ve- python-django-1515
3. https://getbootstrap.com/
4. https://www.section.io/engineering-education/how-to-build-a-music- player- using-django/?
fbclid=IwAR0qbamXPH3WDgSzZCxrkK4G3MEnMQKHJa0QTluu oplOcPiaXDvYDeDRTZc