Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 63 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
63
Dung lượng
1,16 MB
Nội dung
ĐẠ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 BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN 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 BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN 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 BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN 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à khơng phải 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 hồ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 trình hoạt động website Từ nêu lên mục đích, yêu cầu đặt phân tích hệ 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 BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN 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 BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN 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 BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN 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 BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN 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 tốn 29 BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN 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 BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN 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 BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN KẾT LUẬN Sau q trình tìm hiểu em hồ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 BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN BAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYENBAO.cao.mon.PROJECT.2.WEB.NGHE.NHAC.TRUC.TUYEN