TÌM HIỂU VỀ CÔNG NGHỆ MERN STACK VÀ XÂY DỰNG WEBSITE BÁN THIẾT BỊ ĐIỆN TỬ

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHÊ ̣ THÔNG TIN -🙞🙜🕮🙞🙜 - ĐỖ THÁI SANG - 14110164 HÀ HẢI LONG - 17110326 ĐỀ TÀI: TÌM HIỂU VỀ CƠNG NGHỆ MERN STACK VÀ XÂY DỰNG WEBSITE BÁN THIẾT BỊ ĐIỆN TỬ TIỂU LUẬN CHUYÊN NGÀNH HỆ THỐNG THÔNG TIN GIÁO VIÊN HƯỚNG DẪN TS NGUYỄN THÀNH SƠN CHƯƠNG 1: TÌM HIỂU VỀ CƠNG NGHỆ MERN STACK MERN stack tâ ̣p hợp của bốn công nghệ mã nguồn mở liên quan đến Javascript được sử dụng rô ̣ng rãi đó là: MongoDB, ExpressJS, React/React Native, NodeJS Người ta dùng MERN stack để xây dựng React Universal App I MongoDB MongoDB sở liệu mã nguồn mở sở liệu NoSQL (*) hàng đầu, hàng triệu người sử dụng MongoDB viết C++ Ngoài ra, MongoDB sở liệu đa tảng, hoạt động khái niệm Collection Document, cung cấp hiệu suất cao, tính khả dụng cao khả mở rộng dễ dàng II ExpressJS Expressjs là framework xây dựng tảng của Nodejs Nó cung cấp tính mạnh mẽ để phát triển web mobile. Expressjs hỗ trợ method HTTP middleware tạo API vô mạnh mẽ dễ sử dụng Để áp dụng cơng nghệ cho đề tài, nhóm sử dụng Expressjs để phát triển services Rest API Mục đích việc dùng Rest API dễ dàng phát triển hệ thống nhiều tảng khác không riêng cho việc viết web trực tuyến, đồng thời nói cơng dụng Microservices phát triển hệ thống chia hệ thống thành thành phần server client Server services chia nhỏ với ExpressJS Framework, xử lý liệu sau trả liệu có ích cho Client hiển thị cho người dùng III React React thư viện JavaScript mã nguồn mở, giao diện người dùng để xây dựng giao diện người dùng thành phần UI Nó trì Facebook cộng đồng nhà phát triển công ty cá nhân React sử dụng sở để phát triển ứng dụng trang web di động IV NodeJS Node.js hệ thống phần mềm thiết kế để viết ứng dụng internet có khả mở rộng, đặc biệt máy chủ web Chương trình viết C, C++, JavaScript, sử dụng kỹ thuật điều khiển theo kiện, nhập/xuất khơng đồng để tối thiểu tổng chi phí tối đa khả mở rộng NodeJS giống với trình duyệt nay, chạy dựa V8 JavaScript engine - cơng cụ giúp trình duyệt dịch thực thi JavaScript Ngoài ra, NodeJS cung cấp số thư viện khơng có sẵn V8 engine CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG I Phân tích hiêṇ trạng: Trong môi trường kinh tế phát triển mạnh công nghệ thông tin thương mại điện tử lên lĩnh vực quan trọng kinh tế Nó có mặt hầu hết lĩnh vực sống trở thành công cụ hỗ trợ đắc lực công tác quản lý kinh doanh Vì việc bán hàng qua mạng khơng cịn hình thức xa lạ người tiêu dùng cịn hình thức phổ biến doanh nghiệp lựa chọn Do đó, nhu cầu xây dựng website trở nên thiết yếu Chính vậy, nhóm định chọn đề tài “Xây dựng thiết kế website bán Laptop” này, mục đích tạo sản phẩm đáp ứng nhu cầu thị trường II Phân tích yêu cầu Yêu cầu chức nghiêp̣ vụ: Lưu trữ: - Người dùng: tên, email, mật - Sản phẩm: tên, giá tiền, bảo hành, nhãn hiệu, mơ tả, nơ ̣i dung, hình ảnh, loại sản phẩm, số lượng sản phẩm, số lượng sản phẩm bán, sản phẩm xoá Hãng sản phẩm: tên hãng Đơn hàng: thông tin người mua, địa chỉ, giỏ hàng, số lượng, giá, tổng giá, trạng thái đơn hàng, chi phí giao hàng Tra cứu: - Sản phẩm: Theo mô ̣t tiêu chuẩn nào đó - Đơn hàng: Theo mô ̣t tiêu chuẩn nào đó - Hãng sản phẩm: Theo mô ̣t tiêu chuẩn nào đó Tính toán: - Tính tổng tiền mua sản phẩm - Thống kê doanh thu Kết xuất: - Báo cáo doanh thu III Khảo sát số website bán laptop Đánh giá website www.phongvu.vn: Trang chủ website phong vũ Khối Menu, Slide Menu gồm có thơng tin để hỗ trợ khác hàng như: - Thanh menu thông tin hệ thống showroom, số điện thoại tư vấn, CSKH, bảng tin cơng nghệ xây dựng cấu hình - Thanh menu thứ hai thông tin khuyến mại, đơn hàng, đăng nhập giỏ hàng Thanh menu website phongvu.com - Thanh menu dọc thông tin danh mục sản phẩm Danh mục sản phẩm cửa hàng Phong Vũ Slide thiết kế dạng trượt tự động khách hàng biết thông tin khuyến mại Slide hiển thị thông tin khuyến mại cửa hàng Phong Vũ Khối khuyến mại Khối khuyến mại thể sản phẩm chương trình khuyến mại Khối mặt hàng thương hiệu công ty hợp tác Các thương hiệu laptop mà cửa hàng bán Khối sản phẩm bán chạy Các sản phẩm bán chạy cửa hàng Khối Footer Thể đầy đủ sách cơng ty thông tin liên hệ khác cuả công ty Thơng tin, sách cửa hàng Chi tiết sản phẩm Thơng tin, chương trình khuyến mại sản phẩm CHƯƠNG 3: ĐẶC TẢ, SƠ ĐỒ DỮ LIỆU, THÀNH PHẦN CHỨC NĂNG Sơ đồ chức website Xác định yêu cầu nghiệp vụ Yêu cầu chung hệ thống Hệ thống áp dụng rộng rãi, phổ biến cho đối tượng Giao diện đơn giản, thân thiện, đẹp dễ nhìn, dễ sử dụng cho đối tượng mà khơng cần trình độ cao Phải có tính bảo mật cao Thao tác nhanh chóng, hợp lý, hiệu quả, xác Cập nhật, phục hồi lưu liệu ❖ ⮚ ⮚ ⮚ ⮚ ⮚ ⮚ ❖ Các thành phần liệu: 1) Users(người dùng): Danh sách thông tin người dùng( khách hàng người quản trị) Bao gồm: - Mã người dùng, Tên, email, mật khẩu, địa chỉ, quyền 2) Products(sản phẩm): Danh sách thơng tin chi tiết sản phẩm có cửa hàng Bao gồm: - Mã sản phẩm, tên sản phẩm, giá tiền, bảo hành, số lượng, mô tả tiết, hãng, ảnh, loại sản phẩm 3) Checkout(Hóa đơn): Thơng tin chi tiết giao dịch mua bán sản phẩm Bao gồm: - Tên người mua, Mã giỏ hàng, địa chỉ, tổng tiền, phương thức toán, ngày tạo 4) Category(Loại sản phẩm): Danh sách loại sản phẩm Bao gồm: - Mã loại, tên loại 5) Cart(Giỏ hàng): Chi tiết danh sách sản phẩm số tiền mua hàng Bao gồm: - Mã sản phẩm, tên sản phẩm, số lượng, giá tiền ❖ Các chức năng: 1) Quản trị hệ thống - Quản lý đơn hàng - Quản lý sản phẩm - Quản lý khách hàng - Thống kê doanh thu - Lập báo cáo 2) Nhóm người dùng - Trang chủ: Giới thiệu thông tin cửa hàng, hiển thị thông tin khuyến mãi, hàng mới, hàng ưa chuộng - Hiển thị chi tiết thông tin sản phẩm - Tìm kiếm: Cho phép khách hàng ghé thăm website cửa hàng tìm kiếm sản phẩm theo số tiêu chí như: Tên sản phẩm, tên hãng sản xuất, giá sản phẩm, hay dựa vào số đặc điểm khác… - Giỏ hàng: đựng sản phẩm mà khách hàng chọn - Đặt hàng: Cho phép khách hàng đặt mua hàng ❖ Yêu cầu cụ thể chức - Khi khách hàng có nhu cầu mua hàng sau xem kỹ thông tin mặt hàng thông qua trang web cửa hàng, khách hàng đặt hàng thông qua website - - - - - o o o o Mỗi khách hàng muốn mua hàng phải thành viên phải đăng ký thành công trang web cửa hàng, sau khách hàng đăng nhập thực mua hàng website cửa hàng Trên trang web cửa hàng hiển thị đầy đủ mặt hàng hình, case, loa, linh kiện khác…khách hàng lựa chọn để xem tìm kiếm cơng cụ tìm kiếm sản phẩm sản phẩm mà cần tìm Khi tìm sản phẩm cần mua, khách hàng cần click vào sản phẩm để xem thông tin chi tiết sản phẩm đặt mua ln sản phẩm Sản phẩm mà khách hàng lựa chọn đưa vào giỏ hàng, khách hàng khơng hài lịng với sản phẩm lựa chọn xóa sản phẩm lựa chọn sản phẩm khác thay xóa giỏ hàng khơng muốn mua Sau chọn sản phẩm mà quý khách cần mua, khách hàng ấn vào nút đặt hàng để gửi yêu cầu đặt hàng cho cửa hàng Khách hàng cần phải kiểm tra lại thơng tin cá nhân chủng loại hàng hóa mà đặt mua để thuận lợi cho việc thực giao dịch Để thuận tiện cho việc thực đơn hàng, khách hàng cần ghi đúng, đủ thông tin mục đăng ký thành viên Mọi đơn hàng thiếu số thông tin cần thiết (họ tên, địa chỉ, số điện thoại…) bị loại bỏ Những đơn hàng mà cửa hàng cho không hợp lý bị loại bỏ mà khơng cần báo trước Khách hàng lựa chọn nhiều phương thức toán khác như: Thanh toán qua paypal Thanh toán trực tiếp Và khách hàng lựa chọn phương thức giao hàng Nhận hàng cửa hàng (nếu gần địa điểm cửa hàng) Nhận hàng nhà Biểu đồ usecase tìm kiếm sản phẩm Biểu đồ usecase quản lý đơn hàng Biểu đồ usecase mua hàng khách hàng Sơ đồ thống kê ĐẶC TẢ USECASE Đặc tả use-case đăng nhập Use Case Đăng nhập Mô tả Cho phép đăng nhập vào hệ thống Tác nhân kích hoạt Người dùng, admin Tiền điều kiện Người dùng chưa đăng nhập vào hệ thống Các bước thực (1) Click vào nút đăng nhập (2) Nhập email password (3) Nhấn nút “Đăng Nhập” nhấn Enter (4) Nếu đăng nhập thất bại, có thơng báo lỗi (5) Nếu đăng nhập thành cơng thực tác vụ cho phép Luồng kiện rẽ nhánh: - Thành viên đăng nhập không thành công: hệ thống báo q trình đăng nhập khơng thành cơng Chọn đăng ký hay đăng nhập lại - Hệ thống yêu cầu nhập lại tên mật Nếu đồng ý quay trở lại bước UC kết thúc - Thành viên đăng nhập thành cơng sử dụng chức mà hệ thống cung cấp Bảng Đặc tả use case đăng nhập Đặc tả use-case đăng ký Use Case Đăng Kí Mơ tả Cho phép khách xem đăng ký làm thành viên hệ thống Tác nhân kích hoạt Khách xem Tiền điều kiện Chưa có tài khoản Các bước thực (1) Vào trang chủ website (2) Chọn Login sau chọn Register giao diện Login (3) Tiến hành nhập thông tin khách hàng muốn thêm vào, bao gồm : tên, email, password (4) Nhập xong bấm nút “Register” (5) Nếu thêm thành công, thông tin đọc giả cập nhật vào CSDL hiển thị thơng báo “Đăng kí thành cơng” UC kết thúc (6) Nếu thêm thất bại, thông báo lỗi quay lại bước Thành viên đăng nhập thành cơng sử dụng chức mà hệ thống cung cấp Bảng Đặc tả use case đăng ký Đặc tả use-case toán Use Case Thanh Tốn Mơ tả Khách hàng muốn tốn sản phẩm đưa giỏ hàng Tác nhân kích hoạt Khách hàng Tiền điều kiện Đã đăng nhập thành cơng có sản phẩm giỏ hàng Các bước thực (1) Click vào biểu tượng giỏ hàng (2) Điều chỉnh số lượng sản phẩm giỏ hàng (3) Khách hàng kiểm tra lại thông tin tên, địa chỉ, số điện thoại… nhập vào địa giao hàng, thời gian giao hàng, hình thức tốn (chuyển khoản hay tiền mặt) (4) Nếu thành công có thơng báo hình:” Đã tốn thành cơng” UC kết thúc (5) Ngược lại thơng báo:” Thanh toán thất bại” Quay lại bước Bảng Đặc tả use case toán Đặc tả use-case tìm kiếm sản phẩm Use Case Tìm Kiếm Sản Phẩm Mơ tả Cho phép tìm kiếm thơng tin sản phẩm Tác nhân kích hoạt Khách hàng, quản trị viên Tiền điều kiện Sản phẩm cần tìm phải có CSDL Các bước thực (1) Người dung chọn mục tìm kiếm (2) Chọn tìm kiếm theo tên, tìm theo nhà cung cấp, tìm theo giá (3) Bấm nút Search enter (4) Hệ thống báo kết tìm kiếm Kết thúc UC Bảng Đặc tả use case tìm kiếm sản phẩm Đặc tả use-case thêm sản phẩm Use Case Thêm Sản Phẩm Mô tả Thêm sản phẩm vào trang web Tác nhân kích hoạt Admin Tiền điều kiện Admin phải đăng nhập thành công Các bước thực (1) Click vào Products trang admin (2) Chọn Create Product (3) Thêm thông tin sản phẩm (4) Sau điền đầy đủ thông tin, chọn Save (5) Xuất sản phẩm thêm thành cơng, khơng thơng báo lỗi Bảng Đặc tả use case thêm sản phẩm Use Case Xóa Sản Phẩm Mơ tả Khi cửa hàng khơng kinh doanh sản phẩm Tác nhân kích hoạt Admin Tiền điều kiện Sản phẩm cần xóa phải có CSDL Các bước thực (1) Click vào Product trang admin (2) Chọn sản phẩm cần xóa (3) Bấm icon “Drop” (4) Sản phẩm xóa thành cơng, khơng thơng báo lỗi Bảng 10 Đặc tả use case xoá sản phẩm Đặc tả use-case xem sản phẩm Use Case Xem Sản Phẩm Mơ tả Cho phép tìm kiếm thơng tin sản phẩm Tác nhân kích hoạt Khách hàng, quản trị viên Tiền điều kiện Các bước thực (1) Người dùng chọn sản phẩm cần xem (2) Hệ thống hiển thị thông tin sản phẩm chọn (3) Kết thúc UC Bảng 11 Đặc tả use case xem sản phẩm Đặc tả use-case xem thông tin cá nhân Use Case Xem Thông Tin Cá Nhân Mô tả Cho phép thành viên thay đổi thông tin đăng ký Tác nhân kích hoạt Khách hàng, quản trị viên Tiền điều kiện Thành viên phải đăng nhập vào hệ thống Các bước thực (1) Thành viên chọn chức xem thông tin cá nhân (2) Hệ thống hiển thị form thông tin với thông tin khách hàng (3) UC kết thúc Bảng 12 Đặc tả use case xem thông tin cá nhân Đặc tả use-case thêm giỏ hàng Use Case Thêm giỏ hàng Mô tả Cho phép khách hàng đưa sản phẩm chọn vào giỏ hàng Tác nhân kích hoạt Khách hàng Tiền điều kiện Sản phẩm chọn Các bước thực (1) Chọn chức thêm vào giỏ hàng để đưa sản phẩm chọn vào lưu trữ giỏ hàng (2) Nếu chưa chọn sản phẩm mà nhấn nút thêm vào giỏ hàng thực luồng rẽ nhánh A1 (3) - Hệ thống hiển thị thông tin sản phẩm đưa vào giỏ hàng (4) - UC kết thúc e (5) Luồng rẽ nhánh A1: chưa chọn sản phẩm cần mua - Hệ thống thông báo sản phẩm chưa chọn - Hiển thị sản phẩm để khách hàng chọn - Quay lại bước luồng kiện Bảng 13 Đặc tả use case thêm vào giỏ hàng Đặc tả use-case xác nhận đơn hàng Use Case Xác nhận đơn hàng Mô tả UC cho phép nhân viên nhận đơn hàng giao hàng theo yêu cầu Tác nhân kích hoạt Nhân viên hệ thống Tiền điều kiện Thành viên phải đăng nhập vào hệ thống Các bước thực (1) Nhân viên nhận đơn hàng cần thực (2) Thay đổi trạng thái đơn hàng (3) Gửi thông tin phản hồi (4) Kết thúc UC Bảng 14 Đặc tả use case nhận giao hàng 10 Đặc tả use-case cập nhật thông tin sản phẩm Use Case Cập Nhật Thông Tin Sản Phẩm Mô tả Khi có sai sót thơng tin thêm sản phẩm sửa đổi thông tin sản phẩm Tác nhân kích hoạt Admin Tiền điều kiện Phải có sản phẩm cần chỉnh sửa CSDL Các bước thực (1) Click vào Product trang admin (2) Chọn sản phẩm cần chỉnh sửa thông tin (3) Click icon “Edit” để chỉnh sửa (4) Tiến hành sửa thông tin cần thiết cho sản phẩm (5) Sửa xong bấm nút “Save” (6) Nếu sửa thành công, thông tin sản phẩm cập nhật vào CSDL hiển thị thông báo “Sửa thông tin sản phẩm thành công” Nếu chỉnh sửa thất bại, thông báo lỗi nhập lại Bảng 15 Đặc tả use case cập nhật thông tin sản phẩm 11 Đặc tả use-case thêm loại sản phẩm Use Case Thêm Loại Sản Phẩm Mô tả Thêm loại sản phẩm vào trang web Tác nhân kích hoạt Admin Tiền điều kiện Admin đăng nhập thành công Các bước thực (1) Click vào Category trang admin (2) Chọn New (3) Thêm thông tin sản phẩm (4) Sau điền đầy đủ thông tin, chọn Save (5) Thông báo “created category” thêm loại sản phẩm thành cơng, khơng thơng báo lỗi Bảng 16 Đặc tả use case thêm loại sản phẩm 12 Đặc tả use-case xoá loại sản phẩm Use Case Xóa Loại Sản Phẩm Mơ tả Khi cửa hàng khơng kinh doanh loại sản phẩm Tác nhân kích hoạt Admin Tiền điều kiện Loại sản phẩm cần xóa phải có CSDL Các bước thực (1) Click vào Category trang admin (2) Chọn loại sản phẩm cần xóa (3) Bấm nút “Delete” (4) Thơng báo “deleted category” xóa loại sản phẩm thành cơng, khơng thơng báo lỗi Bảng 17 Đặc tả use case xóa loại sản phẩm 13 Đặc tả use-case cập nhật thông tin loại sản phẩm Use Case Cập Nhật Thơng Tin Loại Sản Phẩm Mơ tả Khi có sai sót thơng tin thêm loại sản phẩm sửa đổi thơng tin loại sản phẩm Tác nhân kích hoạt Admin Tiền điều kiện Phải có loại sản phẩm cần chỉnh sửa CSDL Các bước thực (1) Click vào Category trang admin (2) Chọn loại sản phẩm cần chỉnh sửa thông tin (3) Click “Edit” để chỉnh sửa (4) Tiến hành sửa thông tin cần thiết cho loại sản phẩm (5) Sửa xong bấm nút “Save” (6) Nếu sửa thành công, thông tin loại sản phẩm cập nhật vào CSDL hiển thị thông báo “thành công” Nếu chỉnh sửa thất bại, thông báo lỗi nhập lại Bảng 18 Đặc tả use case cập nhật loại sản phẩm 14 Đặc tả use-case quên mật Use Case Quên Mật Khẩu Mô tả Cho phép thay đổi mật tài khoản thành viên Tác nhân kích hoạt Thành viên Tiền điều kiện Đã có tài khoản mật đăng nhập khơng Các bước thực (1) Vào trang chủ website (2) Chọn Login sau chọn Forgot my password giao diện Login (3) Tiến hành nhập email sử dụng để đăng ký tài khoản (4) Nhập xong bấm nút “submit” (5) Đăng nhập vào tài khoản email kiểm tra hộp thư (6) Nhấn vào link nhận để tới giao diện thay đổi mật Nhập mật xác nhận mật Nếu xác nhận thành công nhận thông báo “Đổi mật thành công” Quay trang Login tiến hành đăng nhập lại UC kết thúc (7) Nếu thất bại, thông báo lỗi quay lại bước Thành viên đăng nhập thành cơng sử dụng chức mà hệ thống cung cấp Bảng 19 Đặc tả use case quên mật IV BIỂU ĐỒ HOẠT ĐỘNG Đăng ký thành viên: Biểu đồ hoạt động đăng ký thành viên Đăng nhập vào hệ thống: Biểu đồ hoạt động đăng nhập hệ thống Đổi mật khẩu: Biểu đồ hoạt động đổi mật Tìm kiếm sản phẩm: Biểu đồ hoạt động tìm kiếm sản phẩm Xem sản phẩm: Biểu đồ hoạt động xem sản phẩm Xem giỏ hàng: Biểu đồ hoạt động xem giỏ hàng Xem thông tin cá nhân: Biểu đồ hoạt động xem thông tin cá nhân ...CHƯƠNG 1: TÌM HIỂU VỀ CƠNG NGHỆ MERN STACK MERN stack tâ ̣p hợp của bốn công nghệ mã nguồn mở liên quan đến Javascript được sử dụng... Thống kê doanh thu Kết xuất: - Báo cáo doanh thu III Khảo sát số website bán laptop Đánh giá website www.phongvu.vn: Trang chủ website phong vũ Khối Menu, Slide Menu gồm có thông tin để hỗ trợ... thức phổ biến doanh nghiệp lựa chọn Do đó, nhu cầu xây dựng website trở nên thiết yếu Chính vậy, nhóm định chọn đề tài “Xây dựng thiết kế website bán Laptop” này, mục đích tạo sản phẩm đáp ứng nhu