đồ án cdio đề tài ứng dụng web nghe nhạc trực tuyến

Thay vì card visit giấy truyền thống, người khác phải lưu giữ card của bạn, thì với thẻ thông minh, việc chia sẻ trở nên hiện đại hơn.Đặc trưng của dòng thẻ thông minhChỉ với 1 tấm card

ĐỒ ÁN CDIO

Đề tài: ỨNG DỤNG WEB NGHE NHẠC TRỰC TUYẾN

GVHD: ThS Phan Long

Nhóm SVTH: Đinh Thái Toàn

Trương Quang Huynh Hoàng Nhật Tiến

Đà Nẵng, ngày 29, tháng 9, năm 2021

1.1.1 Ý tưởng 1 6

1.1.2 Ý tưởng 2 8

1.1.3 Ý Tưởng 3 9

1.1.4 Ý Tưởng 4 11

1.1.5 Ý Tưởng 5 12

1.2 ĐÁNH GIÁ Ý TƯỞNG SẢN PHẨM TRONG NHÓM 14

1.3 Ý TƯỞNG ĐỀ XUẤT - Tên nhóm: Nhóm 2 17

PHẦN II: DESIGN (PHÂN TÍCH VÀ THIẾT KẾ) 18

2.1 Khảo sát hiện trạng 18

2.2 Phân tích chức năng của hệ thống 18

2.3.1 Gói Use case đăng nhập 20

2.3.2 Gói use case đăng ký 22

2.3.3 Gói use case tìm kiếm 25

2.3.4 Gói use case đánh giá sản phẩm 27

2.3.5 Gói use case chi tiết sản phẩm 30

2.3.6 Gói use case giỏ hàng 33

2.3.7 Gói use case thanh toán 37

2.3.8 Gói use case quản lý tài khoản 39

2.3.9 Gói quản lý sản phẩm 44

2.3.10 Gói quản lý đơn hàng 49

2.5.1 Chi tiết đơn đặt hàng 59

2.5.2 Chi tiết đơn hàng 60

2.5.3 Bảng đăng kí 60

2.5.4 Bảng danh mục 60

2.5.5 Đơn đặt hàng 61

2.5.6 Bảng hóa đơn 61

2.5.7 Bảng khách hàng 62

2.5.8 Bảng màu 62

2.5.9 Bảng quyền đăng nhập 62

2.5.10 Bảng sản phẩm 63

2.5.11 Bảng size 63

2.6 Thiết kế prototype 64

2.6.1 Trang chủ 64

2.6.1.1 Bản mẫu 64

2.6.1.2 Đặc điểm chi tiết 64

2.6.2 Đăng ký 66

2.6.2.1 Bản mẫu 66

2.6.2.2 Đặc điểm chi tiết 66

2.6.3 Đăng nhập 67

2.6.3.1 Bản mẫu 67

2.6.3.2 Đặc điểm chi tiết 67

2.6.4 Trang sản phẩm 68

2.6.4.1 Bản mẫu 68

2.6.4.2 Đặc điểm chi tiết 68

2.6.5 Chi tiết sản phẩm 69

2.6.5.1 Bản mẫu 69

2.6.5.2 Đặc điểm chi tiết 70

2.6.6 Quản lí giỏ hàng và thanh toán 71

2.6.6.1 Bản mẫu 71

2.6.6.2 Đặc điểm chi tiết 71

2.6.7 Thay đổi mật khẩu 73

2.6.7.1 Bản mẫu 73

2.6.7.2 Đặc điểm chi tiết 73

2.6.8 Tìm kiếm 74

2.6.8.1 Bản mẫu 74

2.6.8.2 Đặc điểm chi tiết 75

2.6.9 Quản lý tài khoản 75

2.6.9.1 Bản mẫu 75

2.6.9.2 Đặc điểm chi tiết 76

2.6.10 Quản lý sản phẩm 77

2.6.10.1 Bản mẫu 77

2.6.10.2 Đặc điểm chi tiết 79

2.6.11 Quản lý danh mục 80

2.6.11.1 Bản mẫu 80

2.6.11.2 Đặc điểm chi tiết 82

2.6.12 Quản lý khách hàng 83

2.6.12.1 Bản mẫu 83

2.6.12.2 Đặc điểm chi tiết 83

2.6.13 Quản lý Báo cáo thông kê 84

2.6.13.1 Bản mẫu 84

2.6.13.2 Đặc điểm chi tiết 84

PHẦN III: IMPEMENTATION (THỰC HIỆN) 84

3.1 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 84

3.1.1 Những vấn đề đã làm được 84

3.1.2 Những vấn đề chưa đạt được 85

3.1.3 Hướng phát triển 85

3.2 TÀI LIỆU THAM KHẢO 85

PHẦN I: CONCEIVE (Ý TƯỞNG)

1.1 Xây dựng ý tưởng cá nhân

1.1.1 Ý tưởng 1

- Họ & Tên (Sinh viên): Đinh Thái Toàn

- Chuyên ngành (của Sinh viên): Công nghệ phần mềm

- Tên Ý tưởng (Sản phẩm): Xây dựng website bán đồ ăn trực tuyến

- Ngày/Tháng/Năm: 25/08/2021

a Mô tả ý tưởng sản phẩm

Theo thói quen tìm kiếm và sử dụng dịch vụ của đại đa số người dùng hiện nay, trước khi đi đến một quán ăn, quán nước hay cửa hiệu nào đó, họ đều cũng sẽ tìm kiếm trên Internet trước khi đưa ra quyết định, điều này giúp họ tiết kiệm được thời gian đi lại, đồng thời dễ đưa ra các lựa chọn đúng, phù hợp với nhu cầu Và việc truy cập các thiết kế website ẩm thực online, review quán ăn chuyên nghiệp chính là một cách để giúp họ làm điều đó.

Việc thiết kế web bán đồ ăn vặt, thức ăn nhanh hỗ trợ mạnh mẽ cho bạn trong việc kinh doanh Nếu bạn kinh doanh đồ ăn hoặc đồ uống thì cách tốt nhất

để làm tiếp thị nội dung (content marketing) chính là chia sẻ kinh nghiệm

Bạn chia sẻ càng nhiều nhận xét hữu ích thì Google sẽ càng đánh giá cao website bán hàng của bạn dựa vào những từ khóa liên quan.

Không chỉ vậy, thiết kế web bán đồ ăn vặt, thức ăn nhanh online còn giúp cho đơn vị sở hữu các trang web như thế này tiếp cận được đến nhiều khách hàng và đối tác hơn Nếu hoạt động hiệu quả và theo đúng các chiến lược đã

đề ra, chắc chắn các thiết kế website ẩm thực online sẽ mang lại nguồn doanh thu rất lớn Đây được xem là một lĩnh vực cũng như thị trường còn mới trong những năm gần đây Và nếu như bạn muốn thử sức kinh doanh, việc thiết kế một website riêng là điều cần thiết nên được ưu tiên hàng đầu.

a Đánh giá cơ sở kiến thức của sinh viên

- HTML, CSS, ASP.net

- Bootstrap 4

a Đánh giá khả năng phát triển của sản phẩm

Ước tính số lượng người sẽ hưởng lợi từ sản phẩm của bạn 3000 Ước tính số lượng người sẽ bỏ

tiền ra mua sản phẩm của bạn 500 Liệt kê các loại đối tượng sẽ được

hưởng lợi từ ý tưởng sản phẩm của bạn (ít nhất là 1, nhiều nhất là 5).

- Chủ quản lý các cửa hàng bán đồ ăn

- Nhân viên quản lý của cửa hàng.

- Người mua đồ ăn online.

Không cao Trung

Đánh giá khả năng các nhà đầu tư

sẽ bỏ tiền ra cho ý tưởng sản phẩm của bạn:

Ước lượng số năm sản phẩm của bạn sẽ ở trên thị trường cho đến khi bị thay thế.

3 năm

1.1.2 Ý tưởng 2

- Họ & Tên ( sinh viên ): Trương Quang Huynh

- Chuyên ngành (của sinh viên): Công nghệ phần mềm

- Tên ý tưởng( sản phẩm): Thiết kế website bán hàng thời trang cao cấp.

- Ngày/Tháng/Năm: 25/08/2021

a) Mô tả ý tưởng sản phẩm

Kinh doanh thời trang cao cấp đang rất hấp dẫn, tuy nhiên vẫn rất ít nơi và trang web trao đổi buôn bán quần áo thời trang cao cấp Nhằm mục đích trao đổi và buôn bán những mặt hàng xịn xò của nhiều cá nhân sử dụng sản phẩm 1-2 lần và muốn bán nó đi Với mục đích mã hóa thương mại ngành thời trang cao cấp này nên em đã quyết định ra ý tưởng xây dựng trang web mua bán thời trang cao cấp.

Người dùng có thể đăng sản phẩm của mình lên để bán hoặc mua sản phẩm của người khác, tất cả người dùng đều có thể đưa ra mức hợp lí để cạnh tranh.

Đánh giá cơ sở kiến thức:

Trung bình Khá Cao Rấốt cao Đánh giá kh ả

năng các nhà đấều t sẽẽ b ư ỏ tềền ra cho ý

- Họ và tên: Hoàng Nhật Tiến

công nghệ NFC Tận dụng những công nghệ đó Mình sẽ tạo một dự án kinh doanh thẻ cá nhân thông minh Một nền tảng chia sẽ mạng xã hội, thông tin liên lac, Những dữ liệu này sẽ đuợc chứa trên một website Website đó sẽ như một mạng xã hội của việc chia sẽ thông tin.

b. Mô tả sản phẩm

Thẻ cá nhân thông minh là gì?

Là dòng thẻ card visit công nghệ NFC, giúp bạn chia sẻ thông tin liên hệ với người khác bằng cách CHẠM thẻ vào Smartphone của họ, hoặc đối tác của bạn cũng có thể QUÉT MÃ QR CODE ở mặt sau thẻ của bạn Thay vì card visit giấy truyền thống, người khác phải lưu giữ card của bạn, thì với thẻ thông minh, việc chia sẻ trở nên hiện đại hơn.

Đặc trưng của dòng thẻ thông minh Chỉ với 1 tấm card hiện đại, chỉ cần bạn CHẠM thẻ vào Smartphone người khác là thông tin liên hệ của bạn sẽ hiển thị trên điện thoại người đó Hoặc họ cũng có thể QUÉT MÃ QR CODE ở mặt sau thẻ của bạn để xin thông tin liên lạc.

Bạn có thể chia sẻ nhiều thông tin liên hệ (Ví dụ như: Facebook, Zalo, Instagram, Tiktok, SĐT, Email, và rất nhiều thứ nữa)

Bạn có thể tự chủ động thay đổi thông tin Nếu như card visit giấy trước đây, mỗi lần thay đổi thông tin là bạn phải in lại những tấm card mới thì với thẻ thông minh, bạn có thể thay đổi hoặc thêm nhiều thông tin chia sẻ cùng lúc mà không cần phải đổi thẻ card.

An toàn & Bảo mật Với thẻ này, bạn chia sẻ thông tin cực tiện Người khác sẽ có được những liên kết đến mạng xã hội của bạn, hoặc SĐT, Email, Tất nhiên, bạn sẽ được cấp cho tài khoản riêng (Gồm tài khoản & Mật khẩu đăng nhập) để tha hồ chỉnh sửa thông tin Chính vì điều này, chỉ chủ thẻ mới có quyền chỉnh sửa thông tin, do đó việc bảo mật thông tin chia sẻ của bạn cực kỳ cao.

Vậy, cách sử dụng thẻ cá nhân thông minh như thế nào?

Thẻ Vivu sẽ mách bạn 2 cách có thể chia sẻ thông tin đó là: CHẠM thẻ vào điện thoại người khác, hoặc họ QUÉT MÃ QR CODE ở mặt sau thẻ của bạn để có thông tin liên lạc Vậy để sử dụng thì tôi phải làm thế nào?

- Bước 1: Đặt mua thẻ (Nếu chưa có, hãy đặt mua tại đây)

- Bước 2: Sau khi đặt mua, bạn sẽ được cấp thẻ cứng kèm tờ hướng dẫn kích hoạt thẻ bên trong Bạn làm theo hướng dẫn và tạo tài khoản đăng nhập và mật khẩu cho thẻ Như vậy thẻ đã có thể sử dụng

- Bước 3: Đăng nhập theo tờ hướng dẫn bằng các thông tin bạn vừa tạo

- Bước 4: Bạn thay đổi Avatar, ảnh bìa các liên kết mà bạn muốn chia sẻ

Đánh giá cơ sở kiến thức của sinh viên

- Lập trình, PHP,HTML,CSS,Js…

- Photoshop cs5

- Microsoft SQL Server.

b Đánh giá khả năng phát triển của sản phẩm

Ước tính số lượng người sẽ hưởng lợi từ

- Quản lý cửa hàng điện thoại.

- Khách hàng có nhu cầu xem và mua điện thoại Smartphone trực tuyến.

Trung bình Khá Cao Rất Cao

Đánh giá khả năng các nhà đầu tư sẽ bỏ tiền ra cho ý tưởng sản phẩm của bạn:

x

Ước tính độ khó để phát triển thành công sản phẩm của bạn: x

3 Tháng

c l Ướ ượ ng sốố năm cấền thiềốt đ phát ể tri n s n ph m c a b n: ể ả ẩ ủ ạ

1.2 ĐÁNH GIÁ Ý TƯỞNG SẢN PHẨM TRONG NHÓM

- Tên ý tưởng sản phẩm: Ứng dụng Web nghe nhạc trực tuyến

- Ngày 19 tháng 8 năm 2021

Liệt kê 3 mảng kiến thức chuyên ngành cần thiết cho việc phát triển sản phẩm

Chuyên Ngành 1 Chuyên Ngành 2 Chuyên Ngành 3 Thành viên 1 Lập trình ASP.NET HTML, CSS BOOSTRAP 4

Thành viên 2 Lập trình Winform C# Net MVC5 Lập trình Java

Thành viên 3 NodeJs, PHP, Python HTML, CSS, SCSS JS(ReactJS)

Liệt kê các loại đối tượng hưởng lợi từ sản phẩm

Thành viên 1 Người dùng cuối Cửa hàng mua sản phẩm Thành viên 2 Người dùng cuối Chủ cửa hàng

Thành viên 3 Người dùng cuối Chủ cửa hàng

Ước tính số lượng người sẽ hưởng lợi từ sản phẩm của bạn

Thành viên 1 Thành viên 2 Thành viên 3 Thành viên 4 Thành viên 5

50000 700 65500

Ước tính số lượng người sẽ bỏ tiền ra mua sản phẩm của bạn

Thành viên 1 Thành viên 2 Thành viên 3 Thành viên

Ước lượng độ khó trong việc phát triển thành công ý tưởng sản phẩm đã nêu:

Trung bình Khá Cao Rất Cao

Thành viên 3 x

Ước lượng thời gian cần thiết để phát triển đầy đủ sản phẩm đã nêu:

Thành viên 1 Thành viên 2 Thành viên 3 Thành viên 4 Thành viên 5

1.3 Ý TƯỞNG ĐỀ XUẤT - Tên nhóm: Nhóm 9

- Nhóm trưởng: Hoàng Nhật Tiến

- Thành viên:

 1 Đinh Thái Toàn

 2. Trương Quang Huynh

- Tên sản phẩm: Ứng dụng Web nghe nhạc trực tuyến

PHẦN II: DESIGN (PHÂN TÍCH VÀ THIẾT KẾ) 2.1 Khảo sát hiện trạng

Trong tình hình diễn biến dịch bệnh phức tạp hiện nay, thì nhu cầu nghe nhạc trực tuyến rất được quan tâm Để giúp mọi người nghe nhạc dễ dàng hơn Website nghe nhạc trực tuyến ra đời, mọi người có thể nghe nhạc mọi lúc mọi nơi.

2.2 Phân tích chức năng của hệ thống

❖ Các thông tin đầu ra đầu vào của hệ thống a) Thông tin đầu vào:

● Thông tin khách hàng

● Thanh toán

● Đánh giá bài hát

● Các phản hồi b) Thông tin đầu ra:

● Chi tiết bài hát

● Hóa đơn thanh toán khi mua nhạc

- Khách vạn lai: là thành viên không có tài khoản trong hệ thống, có chức năng: Đăng ký, tìm kiếm, xem thông tin sản phẩm.

- Khách hàng: là hệ thống thành viên có chức năng: Đăng ký, đăng nhập, đăng xuất, tìm kiếm, xem, thanh toán, đánh giá.

- 2.3 Gói use case tổng quát

Biểu đồ Use case

Hình 2.3.1 Use case tổng quát

tượng có trong hệ thống

Bảng 2.3.1 Đặc tả use case tổng quát

2.3.1 Gói Use case đăng nhập

a Biểu đồ use case đăng nhập

Hình 2.3.1.1 Use case đăng nhập

b Đặc tả luồng sự kiện đăng nhập

Bảng : Đặc tả chi tiết luồng sự kiện đăng nhập

1 Người dùng chọn chức năng đăng

3 Người dùng nhập thông tin đăng nhập.

4 Gửi thông tin đã nhập đến hệ thống.

5 Kiểm tra thông tin đăng nhập, nếu đúng thì cho phép truy cập, sai thì thông báo yêu cầu nhập lại.

Luồng thay thế

4.1 Nếu người dùng nhập sai thông tin thì yêu cầu nhập lại nhưng chỉ trong giới hạn cho phép.

Các yêu cầu cụ thể Tên đăng nhập và mật khẩu khớp với thông tin đã đăng ký.

Điều kiện trước Nguời dùng đã đăng ký thành viên trong hệ thống

Điều kiện sau Thông báo đăng nhập thành công/ thất bại

Các yêu cầu mở rộng Use case “đăng xuất” xuất hiện sau khi đăng nhập thành công.

c Biểu đồ tuần tự đăng nhập

Hình 2.3.1.2 Biểu đồ tuần tự đăng nhập

d Biểu đồ hoạt động đăng nhập

Hình 2.3.1.3 Biểu đồ hoạt động đăng nhập

2.3.2 Gói use case đăng ký

a Biểu đồ use case đăng ký

Hình 2.3.2.1 Biểu đồ use case đăng ký

b Đặc tả luồng sự kiện đăng ký

Mục đích Đăng ký tài khoản mới để có thể đăng nhập với tư cách thành viên

Mô tả chung Người dùng lần đầu sử dụng ứng dụng, trước hết phải đăng ký tài khoản Luồng sự kiện chính

1 Người dùng chọn chức năng đăng

3 Người dùng nhập thông tin đăng ký

4.1 Nếu người dùng nhập sai định dạng email trong ô email, hệ thống sẽ thông báo

4.2 Nếu số ký tự trong tên tài khoản hoặc mật khẩu ít hơn quy định, hệ thống sẽ thông báo

Các yêu cầu cụ thể

Định dạng email phải đúng, email phải tồn tại và chinh xác, tên username không được trùng lặp với các tài khoản

đã có trong hệ thống

Điều kiện trước Người dùng lần đầu đăng ký tài khoản

Điều kiện sau Thông báo đăng ký thành công/ thất bại

Các yêu cầu mở rộng Không có.

Bảng 2.3.2.2 Biểu diễn dòng dữ liệu đăng ký

c Biểu đồ tuần tự đăng ký

Hình 2.3.2.2 Biểu đồ tuần tự đăng ký

d Biểu đồ hoạt động đăng ký

Hình 2.3.2.3 Biểu đồ hoạt động đăng ký

2.3.3 Gói use case tìm kiếm

a Biểu đồ use case tìm kiếm

Hình 2.3.3.1 Biểu đồ use case tìm kiếm

b Đặc tả luồng sự kiện quản lý tài khoản

1 Người dùng nhấp vào ô tìm kiếm 2 Hệ thống hiển thị giao diện tìm kiếm

3 Người dùng nhập tên máy tính

4 Hệ thống hiện danh sách các loại may tính tương ứng với từ khóa người dùng nhập vào Nếu không tìm thấy thì hệ thống báo không tìm thấy

Luồng thay thế

3.1 Nếu người dùng nhập sai định dạng tên trong ô tìm kiếm thì thông báo nhập lại tên truyện hợp lệ

Các yêu cầu cụ thể Định dạng tên phải đúng không chứa các kí tự đặc biệt như “/ ? * …” Điều kiện trước Người dung nhập thông tin vào ô tìm kiếm

Điều kiện sau Hiện thông báo tìm kiếm

Các yêu cầu mở rộng Không có.

Bảng 2.3.3.2 Biểu diễn dòng dữ liệu tìm kiếm

c Biểu đồ tuần tự tìm kiếm

Hình 2.3.3.2 Biểu đồ tuần tự tìm kiếm

2.3.4 Gói use case đánh giá sản phẩm

a Biểu đồ use case đánh giá sản phẩm

Hình 2.3.4.1 Use case đánh giá sản phẩm

b Đặc tả luồng sự kiện đánh giá sản phẩm

Mô tả chung Người xem có thể xem máy để đánh giá của bài hát

Luồng sự kiện chính

1 Chọn sản phẩm cần đánh giá 2 Hiển thị sản phẩm cần đánh giá

3 Truy cập vào mục đánh giá bài hát 4 Hiển thị giao diện đánh giá

5 Đánh giá bằng về bài hát 6 Hệ thống lưu vào database và hiển thị

đánh giá của người dùng

Các yêu cầu cụ thể Người dùng đã đăng nhập vào hệ thống.

Điều kiện trước Người dùng đã đăng nhập vào hệ thống.

Điều kiện sau Nếu use case thành công, người dùng có thể đăng xuất khỏi hệ thống, ngược lại sẽ tiếp tục thực hiện các use case khác. Các yêu cầu mở rộng Không có.

Bảng 2.3.4.2 Biểu diễn dòng dữ liệu đánh giá sản phẩm

c Biểu đồ tuần tự đánh giá bài hát

Hình 2.3.4.2 Biểu đồ tuần tự đánh giá bài hát

2.3.7 Gói use case thanh toán

a Biểu đồ use case thanh toán

Hình 2.3.7.1 Gói use case thanh toán

b Đặc tả luồng sự kiện thanh toán

Luồng thay thế Không có.

Các yêu cầu cụ thể Người dùng phải chọn bài hát mà cần thanh toán

Điều kiện trước Người dùng phải đăng nhập trước đó.

Điều kiện sau Thông báo giao diện sản phẩm bình thường hoặc thông báo lỗi xảy ra nếu có.

Các yêu cầu mở

Bảng 2.3.7.2 Dòng sự kiện thanh toán

c Biểu đồ tuần tự thanh toán

Hình 2.3.7.2 Biểu đồ tuần tự thanh toán

2.3.8 Gói use case quản lý tài khoản

a Biểu đồ use case quản lý tài khoản

Hình: Biểu đồ use-case quản lý tài khoản

b Đặc tả chi tiết use-case cập nhật tài khoản

Use case Quản lý tài khoản

Mục đích Thêm Xóa Sửa tài khoản