TRƯỜNG ĐẠI HỌC TÀI NGUYÊN VÀ MÔI TRƯỜNG HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO THỰC TẬP TỐT NGHIỆP NGHIÊN CỨU VÀ TRIỂN KHAI WEBSITE ÂM NHẠC VỚI VUE.JS VÀ SPRINGBOOT Đơn vị thực tập tốt nghiệp : Cơng ty cổ phần dịch vụ giải trí Thăng Long Cán hướng dẫn : ThS Phan Huy Anh & ThS Dương Thị Thúy Sinh viên thực : Nguyễn Ngọc Ngân Lớp : ĐH9C5 Hệ Đại học : Chính quy Khóa học : 2019 - 2023 Hà Nội, tháng 02 năm 2023 h LỜI CẢM ƠN Trên thực tế khơng có thành cơng mà khơng gắn liền với giúp đỡ người dù hay nhiều, dù trực tiếp hay gián tiếp Trong suốt thời gian học tập trình thực tập, em nhận nhiều quan tâm giúp đỡ nhiệt tình … Vì thời gian, điều kiện cịn có hạn, em cố gắng nhiều để hoàn thành đợt thực tập tốt nghiệp, cịn nhiều hạn chế khơng thể tránh khỏi thiếu sót, mong thầy bạn có ý kiến đóng góp để em hồn thiện phát triển đề tài Em xin chân thành cảm ơn! Sinh viên thực Nguyễn Ngọc Ngân h MỤC LỤC LỜI CẢM ƠN .2 DANH MỤC HÌNH ẢNH TÌM HIỂU VỀ ĐƠN VỊ THỰC TẬP NỘI DUNG THỰC TẬP Ở CÔNG TY CỔ PHẦN DỊCH VỤ VÀ GIẢI TRÍ THĂNG LONG PHẦN MỞ ĐẦU 14 CHƯƠNG Phân tích hệ thống Website nghe nhạc trực tuyến 18 1.1 Phân tích hệ thống mặt chức 18 1.2 Phân tích quy trình hoạt động website 18 1.3 Yêu cầu đặt cho hệ thống website 20 CHƯƠNG Phân tích thiết kế hệ thống 21 2.1 Xác định chức cần thiết đưa mối quan hệ thành phần website 21 2.3 Quy trình đăng nhập chế độ thành viên 24 2.4 Yêu cầu hệ thống .25 2.4.1 Yêu cầu chức .25 2.4.2 Yêu cầu phi chức 25 CHƯƠNG Xây dựng website 26 3.1 Xây dựng sở liệu 26 3.2 Xây dựng trang Đăng ký, Đăng nhập 27 3.2.1 Trang đăng ký cho thành viên 27 h 3.2.2 Trang đăng ký cho thành viên 27 3.3 Xây dựng trang quản trị Admin 28 3.4 Giao diện website 29 3.5 Danh sách thể loại nhạc, quốc gia ca sĩ 29 3.6 Gói chi phí sử dụng 31 CHƯƠNG Kết đạt 32 Hướng rèn luyện , phấn đấu thân thời gian tới 34 TÀI LIỆU THAM KHẢO 35 DANH MỤC HÌNH ẢNH Hình Quy trình đăng ký thành viên Hình 2: Quy trình đăng nhập thành viên Hình : Cơ sở liệu Hình 4: Giao diện đăng nhập trang Hình 5: Giao diện trang đăng nhập cho thành viên Hình 6: Trang web hiển thị người dùng Quản trị viên (Admin) quản lý Hình 7: Giao diện website sau đăng nhập thành viên Hình 8: Các thể loại nhạc website Hình 9: Danh sách ca sĩ quản lý Admin Hình 10: Danh sách quốc gia phát triển âm nhạc website Hình 11: Gói chi phí sử dụng cho người dùng có trải nghiệm hồn hảo h PHẦN MỞ ĐẦU Tính cấp thiết đề tài Ngày công nghệ thông tin phát triển nhanh chóng, nắm giữ vai trị quan trọng việc thúc tăng trưởng kinh tế, với đời nhiều công nghệ mới, dịch vụ CNTT đáp ứng nhu cầu người dùng doanh nghiệp, Tuy nhiên, giai đoạn suy thoái kinh tế nay, việc ứng dụng cơng nghệ hay dịch vụ CNTT đáp ứng việc quản lý tốt, hiệu liệu riêng công ty liệu khách hàng, đối tác toán ưu tiên hàng đầu cho doanh nghiệp Để quản lý nguồn liệu đó, ban đầu doanh nghiệp phải đầu tư, tính tốn nhiều loại chi phí chi phí cho phần cứng, phần mềm, mạng, chi phí cho quản trị viên, chi phí bảo trì, sửa chữa,…Ngồi họ cịn phải tính tốn khả mở rộng, nâng cấp thiết bị; phải kiểm sốt việc bảo mật liệu tính sẵn sàng cao liệu Để giải vấn đề thấy có nơi tin cậy giúp doanh nghiệp quản lý tốt nguồn liệu đó, doanh nghiệp khơng cịn quan tâm đến sở hạ tầng, công nghệ mà tập trung vào cơng việc kinh doanh họ mang lại cho họ hiệu lợi nhuận ngày cao Khái niệm “điện toán đám mây” đời hồn cảnh dần trở nên quen thuộc doanh nghiệp, đặc biệt doanh nghiệp vừa nhỏ Trang web khác với hồ sơ theo cách thức chúng thiết kế để hiểu trình duyệt Microsoft Internet Explorer (IE) Netscape Navigator hiểu phần tử văn bản, đồ họa chí phần tử tương tác, Form h nhập, âm thanh, video cho phép người truy cập chúng từ website Internet dần biết đến với tên gọi Word, Wide, Web vị trí mạng gọi website Có thể nói trang web cơng cụ khơng thể thiếu lĩnh vực như: Âm nhạc, du lịch, văn hóa,… Ngày âm nhạc nhu cầu khơng thể thiếu đời sống người Chính vật trang web ca nhạc giúp cho người giải trí sau phút làm việc mệt mỏi thêm yêu âm nhạc Do nhiều vấn đề, nhiều yếu tố nguyên nhân khách quan chủ quan mà tập tốt nghiệp hạn chế thiếu sót Tuy nhiên, em thực cố gắng để hồn thành tốt vấn đề nghiên cứu, xây dựng phát triển web nên nói phần hồn thành mục tiêu mà khóa luận đặt Tổng quan đề tài nghiên cứu Website nghe nhạc trực tuyến trang âm nhạc phổ biến vai trị giúp cho người dùng với tất loại nhạc với kho tàng âm nhạc phong phú đa dạng toàn giới Vì vậy, người yêu cầu nghe nhạc thỏa sức tìm kiếm hát mà u thích quản lý album nhạc thành viên trang web Điều thật thú vị hay bạn trao đổi với người bạn khác website cảm nhận âm nhạc, chia sẻ cho qua bình luận, đóng góp ý kiến cho website Mục đích nghiên cứu Hướng tới việc đáp ứng nhu cầu giải trí chia sẻ âm nhạc rộng rãi Xây dựng chức đăng ký, đăng nhập Xây dựng chức upload nhạc (được kiểm duyệt qua admin web) h Thiết kế giao diện đơn giản, dễ nhìn, thân thiện, dễ sử dụng, mang lại cảm giác thoải mái cho người dùng Đối tượng nghiên cứu phạm vi nghiên cứu Đối tượng nghiên cứu gồm có: Cơ sở lý thuyết ngơn ngữ vue.js srpingtool Xu hướng âm nhạc thị trường Phạm vi nghiên cứu: Khái niệm, đặc điểm, mơ hình hướng dịch vụ, cách thức hoạt động, mơ hình triển khai, ưu điểm, nhược điểm website Khái niệm, kiến trúc hoạt động, thành phần chức website âm nhạc Phương pháp nghiên cứu Phương pháp nghiên cứu lý thuyết: tiến hành thu nhập tài liệu, thông tin liên quan đến đề tài Tham khảo trang web âm nhạc mắt từ trước Thống kê tốn học để phân tích số liệu điều tra thực nghiệm tính phần trăm, tính trung bình Những đóng góp báo cáo Đồ án hồn thành có đóng góp chủ yếu sau đây: Tạo trang web thân thiện, dễ nhìn, dễ sử dụng mang đến âm nhạc phù hợp cho đối tượng khách hàng h Có đủ chức bản: đăng ký, đăng nhập, quản lý ca sĩ, quản lý hát, quyền quản trị admin Tải nhạc lên dễ dàng có kiểm duyệt quản trị viên Thanh toán paypal dễ dàng, tiện lợi: mã QR toán riêng cho trang web, toán quốc tế v.v Kết cấu báo cáo Đồ án gồm có chương sau: Chương Phân tích hệ thống 1.1 Bài tốn quản lý thơng tin cho người dùng 1.2 Phân tích quy trình hoạt động website 1.3 Yêu cầu đặt phân tích hệ thống website Chương Thiết kế website 2.1 Xác định chức cần thiết đưa mối quan hệ thành phần website 2.2 Quy trình đăng ký thành viên 2.3 Quy trình đăng nhập chế độ thành viên 2.4 Yêu cầu hệ thống Chương Xây dựng website 3.1.Xây dựng sở liệu 3.2 Xây dựng trang đăng ký, đăng nhập 3.3 Xây dựng trang Admin 3.4 Giao diện website 3.5 Danh sách thể loại nhạc, quốc gia ca sĩ 3.6 Gói chi phí sử dụng dịch vụ h TÌM HIỂU VỀ ĐƠN VỊ THỰC TẬP I Giới thiệu công ty Giới thiệu chung - Tên công ty: Công ty Cổ phần Dịch vụ Giải trí Thăng Long (TLC) - Trụ sở: Số 05, P Tú Mỡ, Trung Hoà, Cầu Giấy, Hà Nội - Văn phịng: Số 05, P Tú Mỡ, Trung Hồ, Cầu Giấy, Hà Nội - Chi nhánh: Số 9, Ngõ 1A, Nguyễn Cơ Thạch, Mỹ Đình 2, Nam Từ Liêm, Hà Nội - Điện thoại: (024) 629 24788 - E-mail: mkt.tlcvn@gmail.com - Website: http://tlcgroup.vn/ - Đăng ký Kinh doanh: số 0108637940 Sở Kế hoạch Đầu tư Hà Nội cấp Sứ mệnh cơng ty Ngồi kinh doanh lĩnh vực : Chuỗi nhà hàng Vườn thượng đế, Chuỗi Dịch vụ chăm sóc sức khỏe Lặng Spa, Khu nghỉ dưỡng, Khách sạn, Đầu tư tài Thì lĩnh vực Nghệ Thuật TLC trọng phát triển để mang tới quý khán giả tiếng cười, câu chuyện nhân văn sâu sắc qua phim TLC Công ty đặt mục tiêu chất lượng lên hàng đầu, bao gồm chất lượng sản phẩm dịch vụ, kỹ thuật cao chất lượng dịch vụ sau bán hàng Chính công ty đối tác tin cậy nhiều doanh nghiệp Sản xuất XNK, Giao nhận Logistics h nước Thành công Công ty ghi nhận qua nhiều hợp đồng, dự án có giá trị "Nỗ lực - sáng tạo - liên tục cải tiến chất lượng" không trách nhiệm, niềm hạnh phúc tồn thể lãnh đạo, cơng nhân viên tập đồn Thăng Long Việt Nam mang tới sản phẩm, dịch vụ tốt sức khỏe lợi ích cộng đồng II Các lĩnh vực Ẩm thực Đứng trước cạnh tranh gay gắt thị trường, phong phú số lượng, đa dạng văn hóa ẩm thực, F&C mạnh mẽ chinh phục chiếm lĩnh thị trường ngành kinh doanh ẩm thực TLC F&C không đáp ứng ăn vượt trội giá cả, chất lượng, không gian ẩm thực chăm chút tỉ mỉ, tinh tế, đảm bảo trình thưởng thức thực khách thoải mái, tiện nghi Du lịch nghỉ dưỡng Khu nghỉ dưỡng The Billionaires Hill (Ngọn Đồi Tỷ Phú): dự án đặt xóm Cời, huyện Lương Sơn, Thành phố Hịa Bình TLC đầu tư cho dự án thời gian phát triển xây dựng Nghệ thuật giải trí Lĩnh vực Nghệ Thuật TLC trọng phát triển để mang tới quý khán giả tiếng cười, câu chuyện nhân văn sâu sắc qua phim 10 h thông qua điều khoản đưa website Nếu người dùng vi phạm bị xóa tên theo mức độ quy định - Phân quyền hệ thống giúp cho việc hạn chế tối đa truy cập tràn lan, tránh thơng tin bảo mật Vì vậy, hệ thống chia hai cấp bậc để quản lý tốt nhất: - Người sử dụng: xem bên website sử dụng chức cho phép - Người quản trị website: sử dụng tất chức trang web - Quản lý nhạc (hệ thống): thêm, sửa, xóa thơng tin ca sĩ, hát, album danh sách mà người quản trị cập nhật - Quản lý nhạc cá nhân (Upload/Download): cho phép người dùng đăng hát lên trang web yêu cầu tải hát website máy tính - Cảm nhận: Người dùng tham gia bình luận chủ đề hát, ca sĩ yêu thích bên mục phát nhạc - Nghe nhạc: Cho phép người dùng lựa chọn nghe theo hát, nghe theo album, nghe theo top xếp hạng Tìm kiếm theo tiêu chí: Tìm kiếm theo tên hát Tìm kiếm theo tên ca sĩ 23 h Tìm kiếm theo tên album - Tìm kiếm theo lời hát 2.2 Quy trình đăng ký thành viên Hình Quy trình đăng ký thành viên Mô tả: Người sử dụng đăng nhập vào website, click đăng ký đăng ký cho phép người dùng sử dụng nhập thông tin cần thiết Hệ thống kiểm tra 24 h xác nhận thông tin mà người sử dụng đưa đồng thời đưa thông báo theo thơng tin 25 h 2.3 Quy trình đăng nhập chế độ thành viên Hình 2: Quy trình đăng nhập thành viên Mô tả: Thành viên tiến hành đăng nhập mục đăng nhập website, hệ thống kiểm tra thông tin thành viên đưa vào, hợp lệ thành viên đăng nhập bình thường, thực quyền thành viên duyệt web, nghe nhạc, tìm kiếm hát, tải lên hát,… ngược lại hệ thống yêu cầu thành viên cung cấp thơng tin xác u cầu cấp lại tài khoản 26 h 2.4 Yêu cầu hệ thống 2.4.1 Yêu cầu chức Chức website: Đăng nhập website Đăng ký thành viên Hiệu chỉnh thông tin thành viên Chức cập nhật thông tin Cập nhật hát theo chuyên mục Cập nhật thông tin thành viên ban quản trị Chức xử lý Tìm kiếm Liên hệ 2.4.2 Yêu cầu phi chức - Giao diện trực quan, dễ sử dụng, thân thiện - Chương trình chạy ổn định, xác an tồn - Tốn tài ngun hệ thống - Dễ dàng nhập/xuất liệu, nâng cấp sửa chữa website 27 h CHƯƠNG Xây dựng website 3.1 Xây dựng sở liệu Sử dụng xampp, hệ quản trị sở liệu để tạo nên bảng chứa thông tin, cụ thể: Bảng account: Lưu thông tin thành viên đăng ký Bảng album: Lưu thông tin hát thuộc xu hướng/thể loại hát đa dạng Bảng category: Lưu thông tin thể loại nhạc Bảng comment: Lưu thơng tin bình luận người dùng Bảng country: Lưu thông tin quốc gia Bảng draft_song: Lưu thơng tin hát thể loại Hình : Cơ sở liệu 28 h 3.2 Xây dựng trang Đăng ký, Đăng nhập 3.2.1 Trang đăng ký cho thành viên Mục 1: Người dùng tiến hành đăng ký Hình 4: Giao diện đăng nhập trang 3.2.2 Trang đăng ký cho thành viên Mục 2: Người dùng tiến hành đăng nhập Hình 5: Giao diện trang đăng nhập cho thành viên 29 h 3.3 Xây dựng trang quản trị Admin Quản trị người dùng: chức lưu trữ thông tin chung người dung (tên, email, giới tính, số điện thoại, ngày tháng năm sinh), quản lý thư viện nhạc website, quản lý ca sĩ đăng ký với chức thêm, sửa, xóa, tìm kiếm Hình 6: Trang web hiển thị người dùng Quản trị viên (Admin) quản lý 30 h 3.4 Giao diện website Hình 7: Giao diện website sau đăng nhập thành viên 3.5 Danh sách thể loại nhạc, quốc gia ca sĩ - Danh sách thể loại nhạc với chức năng: thêm, sửa, xóa, tìm kiếm Hình 8: Các thể loại nhạc website 31 h - Danh sách ca sĩ phê duyệt hệ thống lưu trữ website: chức thêm, sửa, xóa, tìm kiếm Hình 9: Danh sách ca sĩ quản lý Admin - Danh sách quốc gia phát hành âm nhạc website với chức thêm, sửa, xóa, tìm kiếm Hình 10: Danh sách quốc gia phát triển âm nhạc website h 32 3.6 Gói chi phí sử dụng - PACKAGE LIST: Gói chi phí nghe nhạc website với chức thêm, sửa, xóa, tìm kiếm gói mua Hình 11: Gói chi phí sử dụng cho người dùng có trải nghiệm hồn hảo 33 h CHƯƠNG Kết đạt Về kỹ Trải qua thời gian thực tập công ty, em rút nhiều kĩ làm việc nhóm thơng qua việc trao đổi mặt kiến thức giúp đỡ lúc gặp vấn đề khó, tìm hướng giải triệt vấn đề Hiểu biết cách tìm tài liệu để bổ sung mặt kiến thức cần thiết việc hiểu định nghĩa mới, tài liệu lĩnh vực Application Developer Thơng qua việc tìm hiểu tài liệu nói Application Developer em nâng cao thêm khả đọc hiểu tài liệu tiếng Anh Hay thông qua việc trao đổi công việc giải vấn đề chung giúp em nâng cao việc làm việc nhóm Việc báo cáo cơng việc hàng ngày giúp em nâng cao vấn đề tin học văn phòng, đưa vấn đề khúc mắc để hiểu, học tập sâu vấn đề Những thu hoạch bổ ích thân Thơng qua việc thực tập cơng ty, em có kiến thức Application Developer hiểu cách làm việc với Git, phát triển ứng dụng, phân quyền người dùng, cải thiện kỹ lập trình với Vue.js, tầm hiểu biết mở rộng thiết bị điện tử, biết cách thực công việc theo kế hoạch, Về mặt tác phong nghiệp vụ, giúp em có nhìn tổng quan phong cách làm việc việc: làm giờ, giúp đỡ đồng nghiệp, teamwork, viết báo cáo ngày, tuân thủ nguyên tắc an ninh mạng, bảo mật liệu… 34 h Thời gian thực tập dài đủ để em học hỏi tích lũy kiến thức, kinh nghiệm, sẵn sàng cho bước Đầu tiên, qua thời gian thực tập thân em có điều kiện làm quen tiếp xúc với môi trường mới, mơi trường học đường mà em có năm qua, mơi trường hồn tồn lạ lẫm không cá nhân em mà nhiều sinh viên khác.Trong thời gian này, em học hỏi nhiều điều từ phong cách làm việc nghiêm túc, thái độ làm việc nhiệt tình mơi trường làm việc động Thứ hai, q trình thực tập em có điều kiện tiếp xúc thực tế với công việc ngành nghề mình, có điều kiện áp dụng kiến thức học vào thực tiễn công việc giúp em tự tin trường lập nghiệp Ngoài ra, qua thời gian em hiểu sâu sắc ngành nghề chọn, để khẳng định hướng nghiệp em năm qua phù hợp đắn Những hạn chế thân + Kỹ năng: Còn cần phải trau dồi thêm kỹ tra tài liệu, tư giải vấn đề + Kỹ mềm: Cần nâng cao khả teamwork, giao tiếp tin học văn phòng 35 h Hướng rèn luyện , phấn đấu thân thời gian tới Kiến nghị + Về hình thức thực tập: Vẫn thực tập doanh nghiệp, trải nghiệm vai trị nhỏ dự án thực tế + Về thời gian: Có thể tăng thời gian thực tập kéo dài thêm lên thành tháng theo cảm nhận em thời gian tháng đủ để tìm hiểu mặt kiến thức chưa thể ứng dụng nhiều vào việc xây dựng ứng dụng, trang web + Về GVHD: Khơng có kiến nghị + Các kiến nghị khác (nếu có): Khơng có Đánh giá GVHD trường Đại Học Tài nguyên Môi trường Điểm số Nhận Xét GVHD trường 36 h TÀI LIỆU THAM KHẢO [1] Effective storage managementand data protection for cloudcomputing IBM Software Thought Leadership White Paper December 2011; [2] IBM presents staged approach to virtualization management WHITE PAPER | © 2010 IDEAS INTERNATIONAL, INC June 2010 [3] IBM WebSphere Application Server Hypervisor Edition Copyright IBM Corporation 2009 IBM Corporationc Software Group Route 100 Somers, NY 10589 U.S.A Produced in the United States of America June 2009 [4] Axel Buecker, Koos Lodewijkx, Harold Moss, Kevin Skapinetz, Michael Waidner Cloud Security Guidance: IBM Recommendations for the Implementation of Cloud Security © Copyright International Business Machines Corporation 2009 [5] IBM WebSphere VirtualEnterprise: Maximize server use while monitoring application health Copyright IBM Corporation 2011 IBM Corporationc Software Group Route 100 Somers, NY 10589 U.S.A Produced in the United States of America April 2011 [6] https://vi.vuejs.org/v2/guide/ 37 h