Xây dựng website nghe nhạc trực tuyến

Việc nghiên cứu và lập trình ra các website, phần mềm, các ứng dụng mới là điều hướng tới của các sinh viên theo học công nghệ thông tin.. Môi trường lập trình và trình soạn thảo Eclipse

Xây dựng website nghe nhạc trực tuyến

Sinh viên thực hiện: Nguyễn Tuấn Thành

Lớp: 52K1-107

Giáo viên hướng dẫn: ThS Nguyễn Thị Hồng Anh

Nghệ An, tháng 01 năm 2016

MỤC LỤC

Trang

LỜI MỞ ĐẦU 2

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT VÀ PHÂN TÍCH HỆ THỐNG 3

1.1 TỔNG QUAN VỀ NGÔN NGỮ LẬP TRÌNH VÀ CÁC THƯ VIỆN DÙNG TRONG PROJECT 3

1.1.1 Môi trường lập trình và trình soạn thảo (ide) Eclipse 3

1.1.2 Ngôn ngữ lập trình Java 3

1.1.3 Tổng quan về Framework Strust1 4

1.1.4 Thư viện Jquery, Bootstrap 6

1.2 PHÂN TÍCH HỆ THỐNG VÀ CHỨC NĂNG 9

1.2.1 Các chức năng chính của hệ thống 9

1.2.2 Các thành phần tham gia hệ thống: 9

1.2.3 Biểu đồ phân cấp chức năng 10

1.2.3 Sơ đồ User Case 11

1.3 PHÂN TÍCH VÀ THIẾT KẾ CƠ SỞ DỮ LIỆU 13

1.3.1 Lập biểu đồ luồng dữ liệu mô hình thực thể - liên kết ERD 13

1.3.2 Chuyển mô hình ERD sang mô hình quan hệ 16

1.3.3 Mô tả chi tiết cho các quan hệ 16

CHƯƠNG 2 THIẾT KẾ GIAO DIỆN HỆ THỐNG 21

2.1 GIAO DIỆN TRANG QUẢN TRỊ 21

2.1.1 Giao diện trang đăng nhập 21

2.1.2 Giao diện trang admin 21

2.1.3 Giao diện quản lý người dùng 22

2.2 GIAO DIỆN NGƯỜI DÙNG 23

2.2.1 Giao diện trang chủ Error! Bookmark not defined KẾT LUẬN 27

TÀI LIỆU THAM KHẢO 28

có hiệu quả hơn, tiết kiệm thời gian và nhân lực

Việc nghiên cứu và lập trình ra các website, phần mềm, các ứng dụng mới là điều hướng tới của các sinh viên theo học công nghệ thông tin Bản báo cáo này trình bày

về trang web nghe nhạc trực tuyến Trong quá trình thực hiện em đã nhận được sự

giúp đỡ nhiệt tình từ các giảng viên trong khoa công nghệ thông tin

Nhân dịp này em xin gửi lời cảm ơn đến khoa công nghệ thông tin đã tạo cơ hội giúp em được tham gia học hỏi, rèn luyện các kỹ năng cần thiết cho đợt thực tập tốt

nghiệp Đặc biệt em xin gửi lời cảm ơn đến giảng viên ThS.Nguyễn Thị Hồng Anh

đã quan tâm góp ý cho bài làm thực tập chuyên nghành và sẵn sàng trả lời những thắc mắc khi cần thiết giúp em hoàn thành tốt bài làm của mình

Mặc dù đã có nhiều cố gắng nhưng do kiến thức còn hạn chế cùng với kinh nghiệm chưa có nên không tránh khỏi thiếu sót.Vì vậy em rất mong nhận được những ý kiến đóng góp bổ sung của thầy cô giáo và các bạn để bài làm thực tập chuyên nghành của

em được hoàn thiện hơn

Sinh viên thực hiện: Nguyễn Tuấn Thành

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT VÀ PHÂN TÍCH HỆ THỐNG

1.1 TỔNG QUAN VỀ NGÔN NGỮ LẬP TRÌNH VÀ CÁC THƯ VIỆN DÙNG TRONG PROJECT

1.1.1 Môi trường lập trình và trình soạn thảo Eclipse

Java Development Kit (JDK - Bộ công cụ cho người phát triển ứng dụng bằng ngôn ngữ lập trình Java) là một tập hợp những công cụ phần mềm được phát triển bởi Sun Microsystems dành cho các nhà phát triển phần mềm, dùng để viết những applet Java hay những ứng dụng Java

Eclipse là phần mềm miễn phí, được các nhà phát triển sử dụng để xây dựng những ứng dụng J2EE, sử dụng Eclipse nhà phát triển có thể tích hợp với nhiều công cụ hỗ trợ khác để có được một bộ công cụ hòan chỉnh mà không cần dùng đến phần mềm riêng nào khác.Eclipse SDK bao gồm 3 phần chính: Platform, Java Development Toolkit (JDT), Plug-in Development Environment (PDE) Với JDT, Eclipse được xem như là một môi trường hỗ trợ phát triển Java mạnh mẽ PDE hỗ trợ việc mở rộng Eclipse, tích hợp các Plug-in vào Eclipse Platform Eclipse Platform là nền tảng của toàn bộ phần mềm Eclipse, mục đích của nó là cung cấp những dịch vụ cần thiết cho việc tích hợp những bộ công cụ phát triển phần mếm khách dưới dạng Plug-in, bản thân JDT cũng có thể được coi như là một Plug-in làm cho Eclipse như là một Java IDE (Integrated Development Enviroment)

1.1.2 Ngôn ngữ lập trình Java

Là một trong những ngôn ngữ lập trình mạnh và được sử dụng đông đảo trong phát triển phần mềm, các trang web, game hay ứng dụng trên các thiết bị di động, ngôn ngữ lập trình Java đã và đang trở nên lớn mạnh hơn bao giờ hết

Java được khởi đầu bởi James Gosling và bạn đồng nghiệp ở Sun MicroSystem năm 1991 Ban đầu Java được tạo ra nhằm mục đích viết phần mềm cho các sản phẩm gia dụng, và có tên là Oak

Đặc điểm nổi bật JAVA:

 Tựa C++, hướng đối tượng hoàn toàn: Java phát triển dựa trên nền ngôn ngữ C++ nhưng được nâng cấp cũng như lược bỏ một số thành phần (VD: thao tác với con trỏ)

 Độc lập phần cứng và hệ điều hành: Java dù chạy ở Windown hay Linux đều ổn định, giao diện chương trình không bị thay đổi

 Ngôn ngữ thông dịch: Ngôn ngữ lập trình Java thuộc loại ngôn ngữ thông

dịch Chính xác hơn, Java là loại ngôn ngữ vừa biên dịch vừa thông dịch.

 Cơ chế gom rác tự động: Khi tạo ra các đối tượng trong Java, JRE sẽ tự động cấp phát không gian bộ nhớ cho các đối tượng ở trên heap Với ngôn ngữ như C \ C++, bạn sẽ phải yêu cầu hủy vùng nhớ mà bạn đã cấp phát, để tránh việc thất thoát vùng nhớ Tuy nhiên vì một lý do nào đó, bạn không hủy một vài vùng nhớ, dẫn đến việc thất thoát và làm giảm hiệu năng chương trình Ngôn ngữ lập trình Java hỗ trợ cho bạn điều đó, nghĩa là bạn không phải tự gọi hủy các vùng nhớ Bộ thu dọn rác của Java sẽ theo vết

các tài nguyên đã được cấp Khi không có tham chiếu nào đến vùng nhớ,

bộ thu dọn rác sẽ tiến hành thu hồi vùng nhớ đã được cấp phát

1.1.3 Tổng quan về Struts 1.0 Framework

a Khái niệm về Struts Framework:

Strust là một framework phục vụ việc phát triển các ứng dụng Web trên Java, Sử dung mẫu thiết kế Model – View – Controller (MVC), Strusts giải quyết rất nhiều các vấn đề liên quan đến các ứng dụng Web hướng business đòi hỏi hiệu năng cao sử dụng Java servlet và JSP Strusts cơ bản định hình lại cách các Web programmer nghĩ về và cấu trúc một ứng dụng Web Struts được phát triển bởi Craig McClanahan và được bảo trợ bởi Apache, nhóm Jakarta

b Các thẻ tag trong strust1

+ <templete>: cung cấp cho nhà phát triển ứng dụng một tập các thẻ JSP

để chia nhỏ giao diện người dùng thành các thành phần có thể dễ dàng tháo rắp

+ <bean>: cung cấp cho nhà phát triển ứng dụng một tập các thẻ JSP để

quản lý đầu ra từ một JavaBean

+ <logic>: có thể được sử dụng để ứng dụng các điều kiện logic trong một

+ Model: tách riêng phần logic và phần hiển thị

 Model.Bean chứa các thực thể, gồm các dữ liệu (private), kèm theo các phương thức set, get

 Model.Form mô hình hóa các Component từ màn hình giao diện thành các class

 Model.DAO thực hiện các công việc lien quan đến cơ sở dữ liệu như kết nối, lấy dữ liệu, truy vấn chỉnh sửa, thêm xóa dữ liệu trực tiếp với database

 Model.BO truy vấn yêu cầu từ Action chuyển qua DAO, lấy dữ liệu từ DAO trả về Action Xử lý các nghiệp vụ

+ View: là các trang JSP, nhiệm vụ trả vè hiển thị cho người dùng

+ Controller: Là các Action có nhiệm vụ nhận yêu cầu từ người dùng, đưa yêu cầu vầ

nhận dữ liệu từ tầng Model, từ đó chuyển hướng trả về tầng View

Một số lưu ý:

Bean chứa các thực thể, có thể sử dụng ở bất cứ nơi nào cần thiết: DAO, BO, JS Các kết nối database chỉ thực hiện ở DAO, các tầng khác không lien quan đến database

BO chỉ cho phép gọi từ Cotroller, các nơi khác không được gọi BO Các nghiệp vụ được xử lý ở BO

- Hạn chế của mô hình MVC:

+ Gia tăng sự phức tạp

+ Sự kết nối chặt chẽ của view và controller đối với model

+ Sự thay đổi đối với giao diện model đòi hỏi sự thay đổi song song trong view

và có thể đòi hỏi sự thay đổi thêm đối với controller Sự thay đổi code nào đó

có thể trở nên khó khăn hơn

+ Tiềm ẩn sự cập nhật dư thừa

+ Cơ chế truyền sự thay đổi có thể không hiệu quả khi model thay đổi thường

xuyên đòi hỏi nhiều thông báo thay đổi Đây không phải là vấn đề chung nếu passive model được sử dụng

+ Sự tách biệt rõ ràng giữa các thành phần là rất khó, đôi khi là không thể

1.1.3 Thư viện JQuery và Bootstrap

jQuery là một thư viện mã nguồn mở dựa trên ngôn ngữ Javascript, được tạo bởi John Resig vào năm 2006 JQuery giúp làm đơn giản hóa việc truyền tải HTML,

xử lý sự kiện, tạo hiệu ứng động và tương tác AJAX Với jQuery, khái niệm Rapid Web Development đã không còn quá xa lạ

Đúng với phương châm đề ra “write less, do more”, jQuery được thiết kế nhằm đơn giản hóa các nhiệm vụ khác nhau bằng cách viết ít mã hơn Dưới đây là danh sách các tính năng cốt lõi được hỗ trợ bởi jQuery:

 Thao tác với DOM

 Xử lý sự kiện

 Hỗ trợ Ajax

 Tạo chuyển động

 Gọn nhẹ

 Được hỗ trợ hầu hết các trình duyệt hiện đại

 Cập nhật và hỗ trợ các công nghệ web mới nhất (như HTML5 và CSS3) Bootstrap là Front-end framework, là một bộ sưu tập miễn phí các công cụ để tạo

ra các trang web và các ứng dụng web Nó chứa HTML và CSS dựa trên các mẫu thiết kế cho kiểu chữ, hình thức, các nút, chuyển hướng và các thành phần giao diện khác, cũng như mở rộng JavaScript tùy chọn

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter như một framework, một công cụ để phục vụ công việc nội bộ của Twitter Trước khi phát triển Bootstrap, có nhiều thư viện khác nhau đã được sử dụng để phát triển giao diện, dẫn đến mâu thuẫn, xung đột.Bootstrap ra đời để khắc phục những yếu tố này, cũng như giúp các nhà phát triển, lập trình tại Twitter có thể triển khai công việc nhanh hơn, tiện lợi và đồng bộ hơn

Bootstrap tương thích với các phiên bản mới nhất của tất cả các trình duyệt nổi tiếng trên thế giới như Chrome, Firefox, IE, Opera

Kể từ phiên bản 2.0 trở l nó cũng hỗ trợ Responsive Web Design Thiết kế và bố trí của các trang web tự động điều chỉnh, tự động tương thích các thiết bị được sử dụng (máy tính để bàn, máy tính bảng, điện thoại di động)

+ Thích, bình luận cho mỗi bài hát

+ Chấm điểm cho thành viên tham gia

1.2.2 Các thành phần tham gia hệ thống

Admin - Là người quản trị hệ thống website: quảnl lý thành viên,

quản lý danh sách bài hát, quản lý playlist, quản lý danh mục bài hát, quản lý ca sỹ, quản lý tác giả, quản lý các báo cáo vi phạm

Mod - Quản lý các báo cáo vi phạm

1.4.3 Biểu đồ phân cấp chức năng

Hình 1.14 Biểu đồ phân cấp chức năng

Dang nhap

Quan ly thanh vien

Quan ly ca sy

Danh sach bai hat

Danh muc bai hat

Quan ly tac gia

Quan ly bao cao vi pham

Them Thay doi thong

tin ca nhan Xoa

Quan ly bao cao vi pham

Khoa tai khoan

Thay doi thong tin ca nhan

Xoa

Upload nhac Tao playlist

1.4.3 Sơ đồ User Case

- Admin, mod:

Hình 1.15 Sơ đồ user case admin, mod

- Thành viên:

Hình 1.16 Sơ đồ user case thành viên

- Khách vãng lai:

Hình 1.18 Sơ đồ user case khách vãng lai

1.5 PHÂN TÍCH VÀ THIẾT KẾ CƠ SỞ DỮ LIỆU

1.5.1 Lập biểu đồ luồng dữ liệu mô hình thực thể - liên kết ERD

 TenDM đây là thuộc tính cho biết tên loại danh mục ứng với mỗi mã danh mục

 MatKhau cho biết mật khẩu của mỗi tài khoản người dùng

 HoTen cho biết họ, tên của người dùng

 NgaySinh cho biết ngày tháng năm sinh

 SoDT cho biết số điện thoại của người dùng

 CMND số chứng minh nhân dân

 Email địa chỉ email

 DiaChi thông tin về nơi ở

 Quyền : bao gồm Admin, Mod và Member

 Image hình đại diện

 DiemThuong là căn cứ để về thông tin hoạt động của người dùng

 TrangThai dùng để block hoặc unlock tài khoản

+ Thực thể thứ 3 (PlayList)

Mỗi thực thể tượng trưng cho một danh sách các bài hát yêu thích của cá nhân

Các thuộc tính:

 MaPL là khóa chính, xác định một bản ghi

 TenPL tên của playlist

 NguoiTao khóa ngoại, xác định đúng thành viên đã tạo playlist

 LuotNghe số lượng lượt nghe

 UpdateTime ngày cập nhật

 ChiaSe chia sẻ playlist

 Block trạng thái của playlist

+ Thực thể thứ 4 (ChiTietPlaylist):

 MaPL xác định một playlist

 MaBH xác định các bài hát nằm trong playlist

+ Thực thể thứ 5 (CaSi):

 MaCS khóa chính, xác định một ca sĩ

 TenCS tên của ca sĩ

 GioiThieu thông tin về ca sĩ

 TrangThai tình trạng ca sĩ, dùng để block

+ Thực thể thứ 6 (TacGia):

 MaTG khóa chính, xác định một tác giả

 TenTG tên của tác giả

 GioiThieu thông tin về tác giả

 TrangThai tình trạng của tác giả

+ Thực thể thứ 7 (BaiHat):

 MaBH khóa chính, xác định một bài hát

 TenBH tên bài hát

 LoiBH lời của bài hát

 MoTa giới thiệu về bài hát

 UploadTime thời gian tải lên

 Block trạng thái bài hát

+ Thực thể thứ 8 (BinhChonPL):

 MaPL khóa chính, xác định một playlist

 TaiKhoan khóa chính, xác định tài khoản đã bình chọn

+ Thực thể thứ 9 (BinhChonBH):

 MaBH xác định mã bài hát

 TaiKhoan xác định người nào đã bình chọn

+ Thực thể 10 (BinhLuan)

 ID khóa chính, xác định một bình luận

 TaiKhoan xác định ai là người đã bình luận

 MaBH xác định bài hát

 MaPL xác định bài hát nằm trong playlist nào

 ThoiGian thời gian bình luận

 NoiDung nội dung bình luận

+ Thực thể 11 (Report)

 ID khóa chính, xác định một báo cáo vi phạm

 NguoiReport xác định ai là người báo cáo

 MaBH bài hát bị vi phạm

 MaPL bài hát nằm trong playlist nào

 ThoiGian thời gian báo cáo

 NguoiXuLy người xử lý

 NoiDung nội dung vi phạm

1.5.2 Chuyển mô hình ERD sang mô hình quan hệ

ThanhVien (TaiKhoan, MatKhau, HoTen, NgaySinh, GioiTinh, CMND, SoDT, Email, DiaChi, Quyen, Image, DiemThuong, TrangThai)

DanhMuc (MaDm, TenDM)

BaiHat (MaBH, TenBH, LoiBH, MoTa, LuotNghe, LuotTai, Images, NguoiUpload, MaTG, MaCS, MaDM, URL, UploadTime, Block)

PlayList (MaPL, TenPL, NguoiTao, MoTa, LuotNghe, UpdateTime, ChiaSe , Block)

ChiTietPL (MaPL, MaBH)

Casi (MaCS, TenCS, GioiThieu, TrangThai)

TacGia (MaTG, TenTG, GioiThieu, TrangThai)

BinhChonPL (MaPL, TaiKhoan)

BinhChonBH (MaBH, TaiKhoan)

BinhLuan (ID, TaiKhoan, MaBH, MaPL, ThoiGian, NoiDung)

Report (ID, NguoiReport, MaBH, MaPL, ThoiGian, NguoiXuLy, NoiDung)

1.5.3 Mô tả chi tiết cho các quan hệ

- Tbl_ThanhVien

+ Mô tả: lưu lại các thông tin của tài khoản

+ Mô tả: lưu các thông tin về bài hát

+ Mô tả: lưu các thông tin về bình chọn

+ Khóa chính: MaPL, TaiKhoan

+ Mô tả: lưu các thông tin về tác giả

+ Khóa chính: MaTG

CHƯƠNG 2 THIẾT KẾ GIAO DIỆN HỆ THỐNG 2.1 GIAO DIỆN TRANG ĐIỀU KHIỂN CHO NGƯỜI QUẢN TRỊ

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

Hình 2.1 Trang đăng nhập Khi đăng nhập thành công, người dùng sẽ có thể lựa chọn vào trang cá nhân, trang được phân quyền

2.1.2 Giao diện trang admin

2.1.3 Giao diện quản lý người dùng :

Hình 2.3 Trang danh sách người dùng 2.1.4 Quản lý danh sách bài hát:

2.1.5 Quản lý

2.2 GIAO DIỆN NGƯỜI DÙNG

Trang dành cho người dùng có bố cục đẹp mắt và hiển thị chức năng nghe nhạc, danh sách các bài hát và một số chức năng khác

Hình 2.6 Giao diện trang chủ

Trên trang chủ hiển thị các thông tin về bài hát mới đƣợc cập nhật, danh sách bài hát đƣợc yêu thích, danh sách bài hát đƣợc nghe nhiều, playlist đƣợc nghe nhiều…

Sau khi click vào bài hát thì chúng ta bắt đầu nghe nhạc và có thể tải bài hát về

Nếu chưa có tài khoản chúng ta có thể tạo:

Hình 2.7 Đăng ký tài khoản

Trường hợp quên mật khẩu: