(TIỂU LUẬN) báo cáo môn PROJECT 2 WEB NGHE NHẠC TRỰC TUYẾN

ĐẠI HỌC BÁCH KHOA HÀ NỘI TRƯỜNG CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG ───────***─────── BÁO CÁO MÔN: PROJECT WEB NGHE NHẠC TRỰC TUYẾN Sinh viên thực hiện: Tiến Nguyễn Công MSSV: 20194382 – K64 Giáo viên hướng dẫn : Trịnh Văn Chiến Hà Nội, tháng năm 2022 MỤC LỤC Danh mục hình ảnh LỜI MỞ ĐẦU Chương Cơ sở lý thuyết công nghệ sử dụng 1.1 Express JS 1.2 NodeJS 1.3 MongoDB Chương Tổng quan hệ thống 10 2.1 Biểu đồ use case 10 2.1.1 Biểu đồ use case tổng quan 10 2.1.2 Phân rã use case quản lý sản phẩm 11 2.1.3 Phân rã use case quản lý khách hàng 11 2.1.4 Phân rã use case quản lý đơn hàng 12 2.2 Đặc tả use case 12 2.2.1 Đặc tả use case đăng nhập 12 2.2.2 Đặc tả use case đăng ký .13 2.2.3 Đặc tả use case tìm kiếm sản phẩm 13 2.2.4 Đặc tả use case xem chi tiết sản phẩm .14 2.2.5 Đặc tả use case đăng xuất 14 2.2.6 Đặc tả use case xem giỏ hàng 15 2.2.7 Đặc tả use case xóa sản phẩm khỏi giỏ hàng .15 2.2.8 Đặc tả use case đặt hàng 15 2.2.9 Đặc tả use case xem lịch sử đơn hàng .16 2.2.10 Đặc tả use case xem chi tiết đơn hàng 16 2.2.11 Đặc tả use case hủy đơn hàng 17 2.2.12 Đặc tả use case quản lý sản phẩm 17 2.2.13 Đặc tả use case quản lý khách hàng .19 2.2.14 Dặc tả use case quản lý đơn hàng 20 2.3 Biểu đồ 21 2.3.1 UC đăng nhập 21 2.3.2 UC đăng ký 21 2.3.3 UC đăng xuất .22 2.3.4 UC thêm sản phẩm 22 2.3.5 UC Tìm kiếm sản phẩm .23 2.3.6 UC xem danh sách sản phẩm .23 2.3.7 UC xem chi tiết sản phẩm 24 2.3.8 UC sủa sản phẩm 24 2.3.9 UC xóa sản phẩm .24 2.3.10 UC tìm kiếm khách hàng 24 2.3.11 UC xem danh sách khách hàng 25 Chương Thiết kế xây dựng website bán hàng .25 3.1 Giao diện trang đăng nhập 25 3.2 Giao diện trang đăng ký 25 3.3 Giao diện quên mật 26 3.4 Giao diện trang chủ 26 3.5 Giao diện danh sách sản phẩm 27 3.6 Giao diện xem chi tiết sản phẩm .28 3.7 Giao diện giỏ hàng 28 3.8 Giao diện trang toán 28 3.9 Giao diện trang thông tin tài khoản 29 Chương Triển khai thử nghiệm đánh giá 29 4.1 Triển khai hệ thống 29 4.2 Đánh giá hệ thống 30 KẾT LUẬN 31 TÀI LIỆU THAM KHẢO 32 Danh mục hình ảnh Hình 1.1 Cấu trúc ExpressJs………………………………………………………………6 Hình 2.1 Biểu đồ Use case tổng quan…………………………………………………….11 Hình 2.2 Biểu đồ phân rã use case quản lý sản phẩm…………………………………….11 Hình 2.3 Biểu đồ phân rã use case quản lý khách hàng………………………………… 12 Hình 2.4 Biểu đồ phân rã use case quản lý đơn hàng…………………………………… 12 Hình 2.5 Biểu đồ use case đăng nhập…………………………………………… 21 Hình 2.6 Biểu đồ use case đăng ký……………………………………………….22 Hình 2.7 Biểu đồ use case đăng xuất…………………………………………… 22 Hình 2.8 Biểu đồ use case thêm sản phẩm……………………………………… 23 Hình 2.9 Biểu đồ use case tìm kiếm sản phẩm…………………………………… 23 Hình 2.10 Biểu đồ use case xem danh sách sản phẩm……………………………23 Hình 2.11 Biểu đồ use case xem chi tiết sản phẩm……………………………….24 Hình 2.11 Biểu đồ use case sửa sản phẩm……………………………………… 24 Hình 2.12 Biểu đồ use case xóa sản phẩm……………………………………… 24 Hình 2.13 Biểu đồ use case tìm kiếm khách hàng……………………………… 24 Hình 2.14 Biểu đồ use case xem danh sách khách hàng………………………….25 Hình 3.1 Giao diện trang đăng nhập………………………………………………………25 Hình 3.2 Giao diện trang đăng ký tài khoản………………………………………………26 Hình 3.3 Giao diện trang quên mật khẩu………………………………………………….26 Hình 3.4 Giao diện trang chủ…………………………………………………………… 27 Hình 3.5 Giao diện trang danh sách sản phẩm……………………………………………27 Hình 3.6 Giao diện trang xem chi tiết sản phẩm…………………………………………28 Hình 3.7 Giao diện trang giỏ hàng……………………………………………………… 28 Hình 3.8 Giao diện trang tốn…………………………………………………… 29 Hình 3.9 Giao diện trang thơng tin tài khoản…………………………………………… 29 LỜI MỞ ĐẦU Ngày với phát triển mạnh mẽ công nghệ thông tin ứng dụng đời sống Máy tính điện tử khơng cịn thứ phương tiện lã lẫm người mà trở thành cơng cụ làm việc giải trí thơng dụng hữu ích chúng ta, không công sở mà cịn gia đình Trong kinh tế nay, với xu tồn cầu hố kinh tế giới, mặt đời sống xã hội ngày nâng cao, đặc biệt nhu cầu trao đổi hàng hoá người ngày tăng số lượng chất lượng.Hiện công ty tin học hàng đầu giới không ngừng đầu tư cải thiện giải pháp sản phẩm nhằm cho phép tiến hành thương mại hóa Internet Thông qua sản phẩm công nghệ này, dễ dàng nhận tầm quan trọng tính tất yếu thương mại điện tử Với thao tác đơn giản máy có nối mạng Internet bạn có tận tay cần mà nhiều thời gian Bạn cần vào trang dịch vụ thương mại điện tử, làm theo hướng dẫn click vào bạn cần Các nhà dịch vụ mang đến tận nhà cho bạn Để tiếp cận góp phần đẩy mạnh phổ biến thương mại điện tử Việt Nam, Em tìm hiểu, xây dựng cài đặt “Website bán hàng trực tuyến” với mặt hàng là: Quần áo Qua khảo sát thực tế, Việt Nam hình thức bán hàng qua mạng phổ biến Cùng với bảo tận tình thầy Trịnh Văn Chiến em hồn thành website này.Trong q trình phân tích thiết kế hệ thống khơng thể tránh khỏi sai sót mong đóng góp ý kiến để trang Web hoàn thiện Cách triển khai: MongoDB dùng để xử lý yêu cầu liệu ExpressJS web application framework cho NodeJS, cung cấpcác tính mạnh mẽ cho việc xây dựng ứng dụng web đúngnghĩa ngược lại NodeJS tảng xây dựng “V8 Javascript engine”được viết c++ Javasccript Sử dụng HTML/ CSS để xây dựng giao diện website Đồ án bao gồm chương: Chương Cơ sở lý thuyết công nghệ sử dụng Chương nêu công nghệ sử dụng đề tài tổng quan lý thuyết công nghệ sử dụng Chương Phân tích thiết kế hệ thống Chương nêu tốn quản lí thơng tin cho người dùng, phân tích quy trinh hoạt động website Từ nêu lên mục đích, u cầu đặt phân tich thông Chương Thiết kế xây dựng website bán hàng Chương Triển khai thử nghiệm đánh giá Chương nêu cách cài đặt chương trình mơi trường Chương Cơ sở lý thuyết công nghệ sử dụng 1.1 Express JS 1.1.1 Khái niêm Express js Framework nhỏ, linh hoạt xây dựng tảngcủa Nodejs Nó cung cấp tính mạnh mẽ để phát triển web mobile Về package hỗ trợ: Expressjs có vơ số package hỗ trợ Về performance: Express cung cấp thêm tính (feature) để dev lập trình tốt Chứ khơng làm giảm tốc độ NodeJS Và hết, Framework tiếng NodeJS sử dụng ExpressJS core function, chẳng hạn: SailsJS, MERN, 1.1.2 Cấu trúc Express JS Hình 1.1 Cấu trúc Epress JS Cấu trúc Express JS vô đơn giản: Root app.js chứa thơng tin cấu hình, khai báo, định nghĩa, để ứngdụng chạy ok package.json chứa package cho ứng dụng chạy Nếu bạn làm với PHP RoR file có chức tương tự composer.jsonhoặc Gemfile Folder routes: chứa route có ứng dụng Folder view: chứa view/template cho ứng dụng Folder public chứa file css, js, images, cho ứng dụng 1.1.3 Tìm hiểu Router Express 1.1.3.1 Khái niệm Router Object (khác Routing nhé), instance riêngcủa middleware routes (Hai khái niệm tìm hiểu saunhé) Chính instance middleware route nên có chứcnăng hai Chúng ta gọi mini-application Các Application dùng ExpressJS làm core có phần Router tích hợp sẵn Router hoạt động middleware nên dùng nhưmột arguments Hoặc dùng arguments cho route khác Chúng ta sử dụng Router để chia route 1.1.3.2 Tìm hiểu method all router router.all() Method phù hợp với việc định nghĩa mang tính chất tồn cục cho prefix Nếu ta đặt route (top) u cầu tất route bên phải requireAuthentication Có nghĩa xác thực trước thực mộthành động hay task 1.1.4 Tìm hiều router.METHOD() Router.METHOD() cung cấp cho chức Routing ExpressJS.Cụ thể METHOD() HTTP method mà thường xuyên sửdụng Chẳng hạn GET, POST, PUT, Tên METHOD phải viết thường Để bảo mật tốt sử dụng Regex để bắt Endpoint 1.2 NodeJS 1.2.1 Khái niệm NodeJS mã nguồn xây dựng dựa tảng Javascript V8 Engine,nó sử dụng để xây dựng ứng dụng web trang video clip, forumvà đặc biệt trang mạng xã hội phạm vi hẹp NodeJS mã nguồn mở sửdụng rộng hàng ngàn lập trình viên tồn giới NodeJS chạy nhiều tảng hệ điều hành khác từ WIndow chotới Linux, OS X nên lợi NodeJS cung cấp thư viện phong phúở dạng Javascript Module khác giúp đơn giản hóa việc lập trình giảm thờigian mức thấp Khi nói đến NodeJS phải nghĩ tới vấn đề Realtime Realtime làxử lý giao tiếp từ client tới máy chủ theo thời gian thực 1.2.2 Các đặc tính NodeJS Khơng đồng bộ: Tất API NodeJS khơng đồng bộ( noneblocking), chủ yếu dựa NodeJS Server chờ đợi Server trả liệu Việc di chuyển máy chủ đến API sau gọi chế thông báo kiện NodeJS giúp máy chủ để có phản ứng từ gọi API trươc(realtime) Chạy nhanh: NodeJ xây dựng dựa vào tảng V8 JavascriptEngine nên việc thực thi chương trình nhanh Đơn luồng khả mở rộng cao: Node.js sử dụng mơ hìnhluồng với kiện lặp chế tổ chức kiện giúp máy chủ đểđáp ứng cách không ngăn chặn làm cho máy chủ cao khả mở rộng trái ngược với máy chủ truyền thống mà tạo đề hạn chế để xửlý yêu cầu Node.js sử dụng chương trình đơn luồng chươngtrình tương tự cung cấp dịch vụ cho số lượng lớn nhiều sovới yêu cầu máy chủ truyền thống Apache HTTP Server Không đệm: NodeJS khơng đệm liệu ứng dụng chủ yếu đầu liệu Có giấy phép: NodeJS cấp giấy phép bởiMIT License 1.2.3 Hai NodeJS framework sử dụng 1.2.3.1 Express ExpressJS framework phổ biến dùng để xây dựng API vàWebsite phổ biến NodeJS Nó sử dụng rộng rãi đến mức mọidự án Web bắt đầu việc tích hợp Express Có nhiều lý để chọnExpressJS: Có nhiều tính hỗ trợ tất bạn cần việc xây dựng Web vàAPI Quản lý router dễ dàng Cung cấp tảng phát triển cho API Hỗ trợ nhiều thư viện plugin Bảo mật an toàn so với việc code Hỗ trợ cồng đồng tuyệt vời 1.2.3.2 SocketIO SocketIO web-socket framework có sẵn cho nhiều ngơn ngữ lập trình Trong NodeJS, SocketIO cho phép xây dựng ứng dụng realtime chatbot, tickers, dashboard APIs, nhiều ứng dụng khác SocketIO có lợi íchhơn so với NodeJS thông thường Hỗ trợ route URL tùy chỉnh cho web socket Tích hợp dễ dàng với Express JS Hỗ trợ clustering với Redis 1.3 MongoDB 1.3.1 Khái niệm MongoDB phần mềm sở liệu mã nguồn mở NoSQL hỗ trợ đa tảngđược thiết kế theo hướng đối tượng Các bảng (trong MongoDB gọi collection) có cấu trúc linh hoạt cho phép liệu khơng cần tn theo dạng cấu trúc nào.Vì thế, dùng để lưu trữ liệu có cấu trúc phức tạp đa dạng Dữ liệuđược gọi Big Data Đặc biệt, chương trình lưu trữ liệu vào collection theohướng tài liệu kiểu JSON thay bảng nên có hiệu suất cao tính khả dụng cao 1.3.2 NoSQL NoSQL (Non-Relational SQL) dạng sở liệu mã nguồn mở đờinhư mơ hình tiến tốc độ, tính năng,… so với hệ quản trị sở liệuquan hệ RDBMS NoSQL có kiểu liệu JSON Đây dạng liệu kiểu key vàvalue với hiệu suất nhanh khả mở rộng khơng bị ràng buộc việc tạokhóa ngoại, khóa chính,… nên ưa chuộng sử dụng phổ biến 1.3.3 Tính MongoDB 1.3.3.1 Truy vấn ad học Truy vấn ad hoc tính tốt chương trình Nó hỗtrợ trường, truy vấn phạm vi tìm kiếm biểu thức để trả trường tài liệucụ thể bao gồm hàm JavaScript người dùng xác định truy vấn nàyđược cấu hình trả mẫu kết ngẫu nhiên có kích thước định Bên cạnh đó,các trường MongoDB dùng để lập mục mục phụ 1.3.3.2 Nhân rộng Đây tính mà chương trình cung cấp Replica set Nó bao gồm hai hoặcnhiều liệu Trong đóng vai trị phụ Trong trình nhân rộng, tất liệu ghi đọc thực Bản thứ cấp sử dụng tích hợp để trì liệu Trong trường hợp thất bại, Replica set chọn saothứ cấp để trở thành Replica thứ cấp tùy chọn phục vụcác hoạt động liệu cuối quán theo mặc định 1.3.3.3 Cân tải Bằng cách sử dụng Sharding, MongoDB chia tỷ lệ theo chiều ngang để ngườidùng chọn Shard key Xác định liệu phân phối collection Nhìnchung, liệu chia thành phạm vi phân phối đồng dựa Shard key Nó chạy nhiều máy chủ, cân tải chép liệu để giữhệ thống hoạt động trường hợp có lỗi phần cứng 1.3.3.4 Lưu trữ tệp Với tính lưu trữ tệp, MongoDB sử dụng hệ thống tệp(GridFS) giúp cân tải chép liệu nhiều máy tính để lưu trữ tệp.Trong đó, GridFS chia tệp thành phần đoạn lưu trữ thànhnhững tài liệu riêng biệt Bạn truy cập GridFS tiện ích Mongofiles plugin cho Nginx Lighttpd 1.3.3.5 Tập hợp Ở tính tập hợp, chương trình cung cấp ba cách để thực tậphợp Aggregation Pipeline, chức Mapreduce Single-purpose Aggregation.Trong đó, theo tài liệu MongoDB Aggregation Pipeline cơng nhận làcung cấp hiệu suất tốt hầu hết hoạt động tổng hợp 1.3.3.6 Thực thi Javascript phía máy chủ JavaScript thường thực thi truy vấn, hàm tổng hợp đượcgửi trực tiếp đến sở liệu 1.3.3.7 Giới hạn kích thước collection MongoDB hỗ trợ collection có kích thước cố định gọi collection giớihạn Nó có kích cỡ cố định theo sau thứ tự chèn làm tăng hiệu suất hoạt động kháccó liên quan đến liệu Khi liệu vượt mức giới hạn tài liệu cũ bị xóamà khơng cần dùng dịng lệnh 1.3.3.8 Giao dịch MongoDB cịn có tính hỗ trợ cho giao dịch ACID đa tài liệu, bắt đầu cóhiệu dụng từ phiên 4.0 vào tháng năm 2018 1.3.4 Ưu điểm MongoDB 10 Luồng kiện Luồng kiện thay Xóa(D) ST T Luồng kiện Thực Admin Hệ thống Admin 19 Luồng kiện thay Thêm(C) Thêm (C): Luồng kiện Luồng kiện thay Hậu điều kiện - R, S: Hệ thống hiển thị danh sách sản phẩm thỏa mãn - C, U, D: Hệ thống hiển thị thơng báo xác nhận cập nhật (Thêm, sửa, xóa) sản phẩm hay khơng, có thể, cập nhật lại liệu sở liệu Bảng 2.12 Đặc tả use case quản lý sản phẩm 2.2.13 Đặc tả use case quản lý khách hàng Mã Use case Tác nhân Mơ tả Sự kiện kích hoạt Tiền điều kiện 20 Tìm kiếm (S): Tương tự UC Tìm kiếm sản phẩm Xem danh sách (R): Tương tự UC Xem danh sách sản phẩm Xem thông tin (R): Tương tự UC Xem chi tiết sản phẩm Xoá (D): Tương tự UC Xóa sản phẩm 2.2.14 Dặc tả use case quản lý đơn hàng Mã Use case Tác nhân Mơ tả Sự kiện kích hoạt Tiền điều kiện Tìm kiếm (S): Tương tự UC Tìm kiếm sản phẩm Xem danh sách (R): Tương tự UC Xem danh sách sản phẩm Xem thông tin (R): Tương tự UC Xem chi tiết sản phẩm Xố (D): Tương tự UC Xóa sản phẩm Hậu điều kiện 2.3 Biểu đồ 2.3.1 UC đăng nhập 21 Hình 2.5 Biểu đồ use case đăng nhập 2.3.2 UC đăng ký 22 Hình 2.6 Biểu đồ use case đăng ký 2.3.3 UC đăng xuất Hình 2.7 Biểu đồ use case đăng xuất 2.3.4 UC thêm sản phẩm 23 Hình 2.8 Biểu đồ use case thêm sản phẩm 2.3.5 UC Tìm kiếm sản phẩm Hình 2.9 Biểu đồ use case tìm kiếm sản phẩm 2.3.6 UC xem danh sách sản phẩm Hình 2.10 Biểu đồ use case xem danh sách sản phẩm 24 2.3.7 UC xem chi tiết sản phẩm Hình 2.11 Biểu đồ use case xem chi tiết sản phẩm 2.3.8 UC sủa sản phẩm Hình 2.11 Biểu đồ use case sửa sản phẩm 2.3.9 UC xóa sản phẩm Hình 2.12 Biểu đồ use case xóa sản phẩm 2.3.10 UC tìm kiếm khách hàng Hình 2.13 Biểu đồ use case tìm kiếm khách hàng 2.3.11 UC xem danh sách khách hàng Hình 2.14 Biểu đồ use case xem danh sách khách hàng Chương Thiết kế xây dựng website bán hàng 3.1 Giao diện trang đăng nhập Hình 3.1 Giao diện trang đăng nhập 3.2 Giao diện trang đăng ký 26 Hình 3.2 Giao diện trang đăng ký tài khoản 3.3 Giao diện quên mật Hình 3.3 Giao diện trang quên mật 3.4 Giao diện trang chủ 27 Hình 3.4 Giao diện trang chủ 3.5 Giao diện danh sách sản phẩm Hình 3.5 Giao diện trang danh sách sản phẩm 28 3.6 Giao diện xem chi tiết sản phẩm Hình 3.6 Giao diện trang xem chi tiết sản phẩm 3.7 Giao diện giỏ hàng Hình 3.7 Giao diện trang giỏ hàng 3.8 Giao diện trang toán 29 Hình 3.8 Giao diện trang tốn 3.9 Giao diện trang thơng tin tài khoản Hình 3.9 Giao diện trang thông tin tài khoản Chương Triển khai thử nghiệm đánh giá 4.1 Triển khai hệ thống Do hệ thống phát triển môi trường NodeJS nên để chạy cần số bước sau: B1 Máy tính cần cài NodeJs Nếu máy tính chưa cài đặt tải xuống theo đường link: https://nodejs.org/dist/v16.16.0/node-v16.16.0-x64.msi B2 Download mã nguồn project B3 Mở cmd đến file mã nguồn chạy câu lệnh ‘npm init’ để cài thư viện cần thiết B4 Tiếp tục chạy câu lệnh ‘npm run dev’ để khởi chạy chương trình 30 B5 Mở trình duyệt web truy cập đường link: http://localhost:3000 4.2 Đánh giá hệ thống Hệ thống hoạt động bình thường Tuy nhiên UI/UX chưa tối ưu nên mang lại trải nghiệm chưa tốt cho người dùng Hệ thống chưa hoàn chỉnh 31 KẾT LUẬN Sau trình tìm hiểu em hoàn thiện sản phẩm trang web thương mại điện tử Về trang web đáp ứng yêu cầu toán đặt ban đầu Trang web cho phép người dùng xem sản phẩm cửa hàng đặt mua chúng Tuy nhiên, sản phẩm đầu tay thân em nên tránh sai sót hạn chế so với ban đầu đặt Trang web có ui/ux cịn chưa mang lại trải nghiệm tốt cho người dùng Một số chức hoạt động kỳ vọng Cũng sau trình tìm hiểu học tập, giúp em tích lũy nhiều kinh nghiệm Đầu tiên khả tự tìm hiểu, đọc tài liệu chuyên ngành Biết cách xây dựng, tổ chức cách hoạt động website Cũng qua môn học thân em tích lũy nhiều kiến thức việc phân tích thiết kế hệ thống Bản thân em thấy ứng dụng nghe nhạc trực tuyến sản phẩm có tiềm Do em cố gắng phát triển hoàn thiện sản phẩm cách tốt Cuối em xin cảm ơn thầy Trịnh Văn Chiến giúp đỡ em nhiều trình xây dựng sản phẩm thân Em xin chân thành cảm ơn thầy! 32 TÀI LIỆU THAM KHẢO Tìm hiểu NodeJS https://stackjava.com/tu-hoc-nodejs Authentication sử dụng JWT https://vntalking.com/node-authentication-va- authorization-su-dung-jwt.html Login google https://www.loginradius.com/blog/engineering/googleauthentication-with-nodejs-and-passportjs/ 33 ... hàng 12 2 .2 Đặc tả use case 12 2 .2. 1 Đặc tả use case đăng nhập 12 2 .2. 2 Đặc tả use case đăng ký .13 2. 2.3 Đặc tả use case tìm kiếm sản phẩm 13 2. 2.4 Đặc tả... hàng .19 2. 2.14 Dặc tả use case quản lý đơn hàng 20 2. 3 Biểu đồ 21 2. 3.1 UC đăng nhập 21 2. 3 .2 UC đăng ký 21 2. 3.3 UC đăng xuất .22 2. 3.4 UC thêm... 22 2. 3.5 UC Tìm kiếm sản phẩm .23 2. 3.6 UC xem danh sách sản phẩm .23 2. 3.7 UC xem chi tiết sản phẩm 24 2. 3.8 UC sủa sản phẩm 24 2. 3.9 UC xóa sản phẩm .24