(TIỂU LUẬN) đồ án CDIO đề tài ỨNG DỤNG WEB NGHE NHẠC TRỰC TUYẾN

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 sa

ĐẠI HỌC DUY TÂN KHOA CÔNG NGHỆ THÔNG TIN

ĐỒ Á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 HuynhHoàng Nhật Tiến

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

MỤC LỤC

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

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

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.3.11 Báo cáo thống kê 56

2.4 Lược đồ quan hệ 59

2.5 Thiết kế cơ sở dữ liệu 59

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

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

Ướ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àynê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ẩmcủ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 ả

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

- Chuyên ngành: Công nghệ phần mềm

- Tên ý tưởng: Website chia sẽ thông tin cá nhân (Mạng Xã Hội)

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

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

Ngày nay, là thời kỳ của công nghệ hiện đại Chúng ta chỉ cần một chiếc

thẻ để xác minh danh tính, thanh toán nhanh Những thứ này đuợc biết đến như

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àikhoả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ậtthô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ừ

Ước tính số lượng người sẽ bỏ tiền ra

mua sản phẩm của bạn

50

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):

- 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

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ồib) 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 đúngthì cho phép truy cập, sai thì thông báo yêucầ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ạncho 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áchthà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 đăngký 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ạngemail trong ô email, hệ thống sẽ thôngbáo

4.2 Nếu số ký tự trong tên tài khoản hoặcmậ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à chinhxá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

Tác nhân Khách hàng, Khách vãng lai

Mô tả chung Người dùng nhập tên máy tính vào ô tìm kiếm và hệ thống

hiện thông báo kết quả

Luồng sự kiện chính

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 maytính tương ứng với từ khóa người dùngnhập vào Nếu không tìm thấy thì hệ thốngbá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êntrong ô tìm kiếm thì thông báo nhập lại têntruyệ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ục đích Người dùng muốn đánh giá bài hát

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

1 Người dùng chọn bài hát cần thanh

toán 2 Gửi thông tin người dùng thanh toánbài hát lên hệ thống

3 Hệ thống kiểm tra các request từngười dùng và gởi thông báo xác nhậnthông tin người dùng cùng với bài hát đãchọn Hoặc trả về thông báo lỗi nếu cóxảy ra

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