Và để thực hiện việc bán hàng, trước tiên sinh viên phải thực hiện xác minh danh tính bằng cách xác minh khuôn mặt, nhằm đảm bảo an toàn, uy tín trong việc mua và bán, tiếp đến sinh viên
Lịch sử giải quyết vấn đề
Hiện nay đã có rất nhiều website giúp cho người dùng có thể trao đổi mua bán những món đồ cũ một cách dễ dàng như:
Chợ tốt (chotot.com): Website kinh doanh rao vặt của người Việt với hàng ngàn món hời đang được rao bán mỗi ngày
Oreka (oreka.vn): Nơi mua đồ cũ uy tín - Giao dịch được đảm bảo hoàn tiền 100% nếu không đúng mô tả Nền tảng mua bán đồ cũ hiệu quả tại Việt Nam Đăng bán miễn phí không cần gặp mặt
Chợ đồ cũ (chodocu.com): Chodocu.com là website hàng đầu Việt Nam về thông tin mua bán đồ cũ, thanh lý đồ cũ, đồ đã qua sử dụng với đa dạng rất nhiều mặt hàng
Các website này cung cấp đầy đủ các chức năng cơ bản của một website thương mại điện tử, cho phép người dùng có thể dễ dàng chọn lựa, mua sắm Tuy nhiên giao đa số các website trên có giao diện chưa hoàn thiện, một số tính năng hỗ trợ người dùng còn thiếu như gợi ý mua sản phẩm, hay tính an toàn về việc mua và bán hàng
Bảng so sánh tiêu chí của hệ thống cũ và mới
Tiêu chí Hệ thống đã có Hệ thống dự định xây dựng
Xem danh sách sản phẩm X X
Có danh mục sản phẩm miễn phí X X
Xếp hạng, khen thưởng, những cá nhân có nhiều đóng góp X
Yêu cầu về xác minh nguồn gốc, các giấy tờ có liên quan đến sản phẩm
Tổ chức sự kiện bán đồ cũ X
Gợi ý mua những sản phẩm phù hợp với nhu cầu người mua X
Kết hợp với đối tác bên ngoài để cung cấp sản phẩm X
Tìm kiếm sản phẩm tương tự X
Mục tiêu đề tài
Tìm hiểu quy trình nghiệp vụ mua bán sản phẩm trực tuyến tại website đã có sẵn trên thị trường Để ứng dụng xây dựng website mua bán đồ cũ cho sinh viên.
Tìm hiểu HTML, CSS, Javascript, ReactJS, MySQL và mô hình MVC để xây dựng website kinh doanh đồ cũ cho sinh viên thỏa mãn các tiêu chí sau:
Xây dựng một website thương mại điện tử theo mô hình MVC
Giúp các bạn sinh viên xem sản phẩm một cách trực quan
Giúp các bạn sinh viên thực hiện mua, bán sản phẩm một cách dễ dàng, an toàn và nhanh chóng
Giúp các cửa hàng, doanh nghiệp có thể liên kết với nhà trường để thực hiện việc bán hàng
Xây dựng tính năng gợi ý mua sản phẩm phù hợp
Hỗ trợ tìm kiếm cách sản phẩm tốt một cách dễ dàng
Giao diện thân thiện, đơn giản, dễ sử dụng.
Nội dung nghiên cứu
Quy trình nghiên cứu
Tìm hiểu về quy trình mua bán sản phẩm từ các hệ thống đã sẵn có trên thị trường. Phân tích hệ thống và thiết kế cơ sở dữ liệu phù hợp
Thiết kế giao diện website một cách trực quan và dễ dàng tiếp cận
Xây dựng các chức năng của website
Kiểm thử website và sửa lỗi phát sinh.
Các công nghệ sử dụng
Các công nghệ được sử dụng để thiết kế website như: HTML, Javascript, CSS, Tailwindcss, ReactJS, MySQL,…
Những đóng góp chính của đề tài
Xây dựng được website kinh doanh đồ cũ cho sinh viên với những tính năng mới mẽ, những yêu cầu, ràng buộc đối với người bán nhằm mục đích đảm bảo an toàn tuyệt đối cho việc mua bán hàng của sinh viên.
Xây dựng giao diện đơn giản, trực quan, thân thiện với người dùng, dễ dàng sử dụng
Thiết kế xem chi tiết sản phẩm và thông tin về sản phẩm
Thực hiện các chức năng mua bán sản phẩm với vài thao tác đơn giản
Tích hợp tính năng gợi ý mua hàng phù hợp với nhu cầu.
Bố cục quyển luận văn
Giới thiệu chung Đặt vấn đề
Lịch sử giải quyết vấn đề
Mục tiêu đề tài Đối tượng và phạm vi nghiên cứu
Những đóng góp chính của đề tài
Chương 1: Mô tả bài toán
Mô hình vai trò người dùng Phân tích yêu cầu
Chương 2: Cơ sở lý thuyết
Chương 3: Thiết kế và cài đặt giải pháp
Tổng quan hệ thống Kiến trúc tổng quan
Sơ đồ dữ liệu mức quan niệm (CDM)
Mô hình luận lý (LDM) Kết quả thực hiện yêu cầu chức năng Kết quả thực hiện yêu cầu giao diện Chương 4: Kiểm thử
Mục tiêu kiểm thử Kịch bản kiểm thử Kết quả kiểm thử Phần 3: Kết luận và hướng phát triển
Phần 5: Tài liệu tham khảo
MÔ TẢ BÀI TOÁN
Mô tả hệ thống
Website “Kinh doanh đồ cũ cho sinh viên” là nơi cung cấp các giao diện để sinh viên có thể trao đổi, mua bán sản phẩm một các trực tuyến, giúp sinh viên tránh lãng phí và tiết kiệm được một tiền không nhỏ đồng thời góp phần bảo vệ môi trường
Hiện nay, do đồ cũ thường có giá rẻ hơn so với đồ mới Tùy vào phạm vi sử dụng của mỗi người mà họ sẽ tùy chọn mua đồ cũ hay mua đồ mới Ngoài ra, nhiều sinh viên thường không có cơ hội để họ đến các cửa hàng, do đó, họ sẽ lựa chọn mua đồ cũ trực tuyến với mục đích tiết kiệm thời gian Để có thể mua bán sản phẩm sinh viên chỉ cần truy cập vào website và đăng nhập vào hệ thống với tài khoản được nhà trường cung cấp, sau khi đăng nhập vào hệ thống, sinh viên có thể tùy chọn mua hàng bằng cách tìm kiếm sản phẩm theo tên, danh mục hay lựa chọn sản phẩm hệ thống đã đề xuất, sau đó chọn số lượng sản phẩm cần mua và chọn nút thêm vào giỏ hàng hoặc đặt hàng Khi đã xác nhận đặt hàng, người bán sẽ dựa vào thông tin của người mua để liên hệ trao đổi và thực hiện giao hàng (người mua cũng có thể liên hệ với người bán thông qua thông tin mà người bán cung cấp), đồng thời người mua cũng có thể thực hiện thanh toán đơn hàng một cách trực tuyến Và để thực hiện việc bán hàng, trước tiên sinh viên phải thực hiện xác minh danh tính bằng cách xác minh khuôn mặt, nhằm đảm bảo an toàn, uy tín trong việc mua và bán, tiếp đến sinh viên vào chức năng bán hàng và điền đầy đủ các thông tin của sản phẩm cần bán như tên sản phẩm, số lượng sản phẩm hiện có, tình trạng hiện tại của sản phẩm, giá tiền, hình thức thanh toán, thương hiệu, các giấy tờ có liên quan… và thực hiện đăng bán sản phẩm Bên cạnh đó, hệ thống cung cấp một số chức năng để thuận tiện cho việc sử dụng như quản lý sản phẩm, quản lý đơn đặt hàng, quản lý các thông tin cá nhân (họ tên, địa chỉ nhận hàng) để thuận tiện cho việc mua bán hàng
Các cửa hàng, doanh nghiệp bán đồ cũ có thể liên hệ với nhà trường để có thể đăng ký việc bán hàng trên hệ thống Khi nhà trường chấp nhận hợp tác với doanh nghiệp, quản trị viên sẽ cấp cho doanh nghiệp tài khoản để có thể thực hiện bán hàng
Ngoài ra, website kinh doanh đồ cũ cho sinh viên chức năng tặng lại đồ cũ (hay bán những món đồ với giá 0 đồng), nhằm khuyến khích việc tặng lại đồ cũ, những món đồ không dùng đến nên hệ thống sẽ vinh danh những sinh viên đã tặng được nhiều sản phẩm nhất trong tháng, kết quả sẽ được đặt lại mỗi tháng.
Mô tả vai trò người dùng
Website “Kinh doanh đồ cũ cho sinh viên” đáp ứng những yêu cầu sau: Đối với quản trị viên: Đăng nhập và đăng xuất
Quản lý tài khoản người dùng
Quản lý đơn khiếu nại Đối với người dùng đã có tài khoản: Đăng nhập và đăng xuất
Xem danh sách sản phẩm có sẵn trên website
Xem chi tiết sản phẩm
Xác nhận đặt hàng Đăng sản phẩm của mình lên website
Quản lý sản phẩm đã đăng bán trên website
Quản lý thông tin cá nhân Đối với người dùng mới:
Xem danh sách sản phẩm có sẵn trên website
Xem chi tiết sản phẩm
Tổng quan về vai trò: người dùng quản trị viên được gán cứng một tài khoản và đăng nhập tài khoản đó để vào trang quản trị viên thực hiện các vai trò của chính mình nhằm quản lý các tài khoản và danh mục trên hệ thống Để có thể sử dụng các chức năng như bán hàng, mua hàng,… Người dùng được quản trị viên cung cấp tài khoản để đăng nhập vào hệ thống.
Phân tích yêu cầu
1.3.1.1 Sơ đồ usecase tổng quát
Sơ đồ usecase tổng quát [1] của website “Kinh doanh đồ cũ cho sinh viên” được thể hiện ở hình Hình 1.1 Hệ thống gồm 4 tác nhân chính như: Sinh viên đã có tài khoản, sinh viên chưa có tài khoản, quản trị viên, cửa hàng bên ngoài Các chức năng cụ thể của từng tác nhân được mô tả ở các mục sau:
Hình 1.1 Sơ đồ usecase tổng quát
1.3.1.2 Sơ đồ usecase tác nhân “Sinh viên chưa có tài khoản”
Sơ đồ usecase của tác nhân “Sinh viên chưa có tài khoản” được thể hiện ở Hình 1.2, bao gồm các chức năng chính: Xem danh sách sản phẩm, xem chi tiết thông tin sản phẩm, tìm kiếm sản phẩm
Hình 1.2 Sơ đồ usecase của tác nhân “Sinh viên chưa có tài khoản”
1.3.1.3 Sơ đồ usecase tác nhân “Sinh viên đã có tài khoản”
Sơ đồ usecase của tác nhân “Sinh viên đã có tài khoản” được thể hiện ở Hình 1.3, bao gồm các chức năng chính: Xem danh sách sản phẩm, tìm kiếm sản phẩm, xem chi tiết sản phẩm, nhận xét sản phẩm, quản lý mua hàng (thanh toán đơn hàng, đặt hàng, hủy đơn hàng, xem thông tin đơn hàng), quản lý bán hàng (đăng bán sản phẩm, cập nhật thông tin sản phẩm, xem đơn đặt hàng đã nhận, cập nhật tình trạng đơn hàng), quản lý giỏ hàng (thêm sản phẩm vào giỏ hàng, xóa sản phẩm khỏi giỏ hàng, cập nhật giỏ hàng), cập nhật thông tin cá nhân, thêm thông tin giao dịch, quản lý địa chỉ nhận hàng và tất cả các chức năng trên bắt buộc phải đăng nhập với tài khoản là sinh viên
Hình 1.3 Sơ đồ usecase của tác nhân “Sinh viên đã có tài khoản”
1.3.1.4 Sơ đồ usecase tác nhân “Quản trị viên”
Sơ đồ usecase của tác nhân “Quản trị viên” được thể hiện ở Hình 1.4, bao gồm các chức năng chính như: Quản lý tài khoản người dùng (cập nhật tài khoản, thêm tài khoản, khóa tài khoản), quản lý danh mục sản phẩm (thêm danh mục sản phẩm, xóa danh mục sản phẩm, cập nhật danh mục sản phẩm), quản lý thông tin hỗ trợ người dùng, quản lý khiếu nại, báo cáo, quản lý sự kiện bán đồ cũ (tạo sự kiện, cập nhật sự kiện), xác nhận thanh toán phí bán hàng và tất cả chức năng trên đều bắt buộc phải đăng nhập với tài khoản quản trị viên
Hình 1.4 Sơ đồ usecase của tác nhân “Quản trị viên”
1.3.1.5 Sơ đồ usecase tác nhân “Cửa hàng bên ngoài”
Sơ đồ usecase của tác nhân “Cửa hàng bên ngoài” được thể hiện ở Hình 1.5, bao gồm các chức năng chính như: Quản lý đơn hàng đã nhận, cập nhật thông tin người dùng, thêm thông tin giao dịch, quản lý sản phẩm và tất cả chức năng trên yêu cầu người dùng phải đăng nhập với tài khoản cửa hàng
Hình 1.5 Sơ đồ usecase tác nhân “Cửa hàng bên ngoài”
1.3.2 Mô tả các chức năng
Bảng 1.1 Mô tả chức năng đăng nhập
Sinh viên có thể đăng nhập vào thể thống để sử dụng các chức năng
Mức độ cần thiết: Bắt buộc Phân loại: Cao
Tác nhân Quản trị viên, sinh viên đã có tài khoản, cửa hàng bên ngoài Điều kiện trước Không có
2 Chọn chức năng đăng nhập
3 Nhập vào tài khoản, mật khẩu đã được cấp từ trước
4 Chọn vào nút “Đăng nhập”
Kết quả Sinh viên đăng nhập thành công vào hệ thống
Bảng 1.1 mô tả chức năng đăng nhập của “Website kinh doanh đồ cũ cho sinh viên”, bảng trình bày chi tiết tác nhân có thực hiện chức năng, điều kiện trước, mức độ cần thiết, phân loại chức năng ưu tiên, luồng sự kiện chính và kết quả sao khi thực hiện chức năng
1.3.2.2 Chức năng cập nhật thông tin tài khoản
Bảng 1.2 Mô tả chức năng cập nhật thông tin tài khoản
Quản trị viên có thể cập nhật lại thông tin tài khoản người dùng
Mức độ cần thiết: Trung bình Phân loại: Trung bình
Tác nhân Quản trị viên Điều kiện trước Phải đăng nhập với vai trò là quản trị viên
1 Quản trị viên truy cập vào website
2 Đăng nhập với quyền quản trị viên
3 Chọn vào chức năng cập nhật tài khoản ở phần quản lý tài khoản người dùng
4 Chọn tài khoản cần được cập nhật
5 Nhập vào thông tin cần được cập nhật
Kết quả Quản trị viên cập nhật thông tin tài khoản thành công
Bảng 1.2 mô tả chức năng cập nhật thông tài khoản của “Website kinh doanh đồ cũ cho sinh viên”, bảng trình bày chi tiết tác nhân có thực hiện chức năng, điều kiện trước, mức độ cần thiết, phân loại chức năng ưu tiên, luồng sự kiện chính và kết quả sao khi thực hiện chức năng
1.3.2.3 Chức năng khóa tài khoản người dùng
Bảng 1.3 Mô tả chức năng khóa tài khoản người dùng
Mô tả Quản trị viên có thể khóa tài khoản người dùng
Mức độ cần thiết: Trung bình Phân loại: Trung bình
Tác nhân Quản trị viên Điều kiện trước Phải đăng nhập với vai trò là quản trị viên
1 Quản trị viên truy cập vào website
2 Đăng nhập với quyền quản trị viên
3 Chọn tài khoản cần khóa và ấn nút “Khóa tài khoản”
4 Chọn nút “Xác nhận” để khóa tài khoản đã chọn
Kết quả Quản trị viên khóa tài khoản người dùng thành công
Bảng 1.3 mô tả chức năng khóa tài khoản người dùng của “Website kinh doanh đồ cũ cho sinh viên”, bảng trình bày chi tiết tác nhân có thực hiện chức năng, điều kiện trước, mức độ cần thiết, phân loại chức năng ưu tiên, luồng sự kiện chính và kết quả sao khi thực hiện chức năng
1.3.2.4 Chức năng thêm danh mục sản phẩm
Bảng 1.4 Mô tả chức năng thêm danh mục sản phẩm
Mô tả Quản trị viên có thể thêm danh mục sản phẩm
Mức độ cần thiết: Cao Phân loại: Cao
Tác nhân Quản trị viên Điều kiện trước Phải đăng nhập với vai trò là quản trị viên
1 Quản trị viên truy cập vào website
2 Đăng nhập với quyền quản trị viên
3 Chọn vào phần quản lý danh mục
4 Nhập vào tên danh mục cần thêm và chọn danh mục cha sau đó chọn nút “Xác nhận”
Kết quả Quản trị viên thêm danh mục sản phẩm mới thành công
Bảng 1.4 mô tả chức năng thêm danh mục sản phẩm của “Website kinh doanh đồ cũ cho sinh viên”, bảng trình bày chi tiết tác nhân có thực hiện chức năng, điều kiện trước, mức độ cần thiết, phân loại chức năng ưu tiên, luồng sự kiện chính và kết quả sao khi thực hiện chức năng
1.3.2.5 Chức năng xóa danh mục sản phẩm
Bảng 1.5 Mô tả chức năng xóa danh mục sản phẩm
Mô tả Quản trị viên có thể xóa danh mục sản phẩm
Mức độ cần thiết: Trung bình Phân loại: Trung bình
Tác nhân Quản trị viên Điều kiện trước Phải đăng nhập với vai trò là quản trị viên
1 Quản trị viên truy cập vào website
2 Đăng nhập với quyền quản trị viên
3 Chọn vào phần quản lý danh mục
4 Chọn vào danh mục cần xóa và chọn nút “Xác nhận”
Kết quả Quản trị viên xóa danh mục sản phẩm thành công
Bảng 1.5 mô tả chức năng xóa danh mục sản phẩm của “Website kinh doanh đồ cũ cho sinh viên”, bảng trình bày chi tiết tác nhân có thực hiện chức năng, điều kiện trước, mức độ cần thiết, phân loại chức năng ưu tiên, luồng sự kiện chính và kết quả sao khi thực hiện chức năng
1.3.2.6 Chức năng cập nhật danh mục sản phẩm
Bảng 1.6 Mô tả chức cập nhật danh mục sản phẩm
Mô tả Quản trị viên có thể cập nhật danh mục sản phẩm
Mức độ cần thiết: Trung bình Phân loại: Trung bình
Tác nhân Quản trị viên Điều kiện trước Phải đăng nhập với vai trò là quản trị viên
1 Quản trị viên truy cập vào website
2 Đăng nhập với quyền quản trị viên
3 Chọn vào phần quản lý danh mục
4 Chọn vào danh mục cần cập nhật
5 Nhập vào tên danh mục mới hoặc cập nhật danh mục cha và chọn nút “Xác nhận”
Kết quả Quản trị viên cập nhật danh mục sản phẩm thành công
Bảng 1.6 mô tả chức năng cập nhật danh mục sản phẩm của “Website kinh doanh đồ cũ cho sinh viên”, bảng trình bày chi tiết tác nhân có thực hiện chức năng, điều kiện trước, mức độ cần thiết, phân loại chức năng ưu tiên, luồng sự kiện chính và kết quả sao khi thực hiện chức năng
1.3.2.7 Chức năng xem danh sách sản phẩm
Bảng 1.7 Mô tả chức năng xem danh sách sản phẩm
Mô tả Sinh viên có thể xem danh sách sản phẩm
Mức độ cần thiết: Bắt buộc Phân loại: Cao
Tác nhân Tất cả sinh viên Điều kiện trước Không có
1 Sinh viên truy cập vào website
2 Hệ thống sẽ hiển thị danh sách các sản phẩm và Sinh viên có thể lựa chọn xem sản phẩm theo danh mục
Kết quả Sinh viên xem được danh sách sản phẩm
Bảng 1.7 mô tả chức năng xem danh sách sản phẩm của “Website kinh doanh đồ cũ cho sinh viên”, bảng trình bày chi tiết tác nhân có thực hiện chức năng, điều kiện trước, mức độ cần thiết, phân loại chức năng ưu tiên, luồng sự kiện chính và kết quả sao khi thực hiện chức năng
1.3.2.8 Chức năng xem chi tiết sản phẩm
Bảng 1.8 Mô tả chức năng xem chi tiết sản phẩm
Mô tả Sinh viên có thể xem chi tiết thông tin sản phẩm
Mức độ cần thiết: Bắt buộc Phân loại: Cao
Tác nhân Tất cả sinh viên Điều kiện trước Không có
1 Sinh viên truy cập vào website
2 Hệ thống sẽ hiển thị danh sách các sản phẩm và Sinh viên có thể lựa chọn xem sản phẩm theo danh mục
3 Sinh viên chọn vào sản phẩm cần xem chi tiết thông tin
4 Hệ thống hiển thị đầy đủ thông tin chi tiết của sản phẩm
Kết quả Sinh viên xem được thông tin chi tiết của sản phẩm
Bảng 1.8 mô tả chức năng xem thông tin chi tiết sản phẩm của “Website kinh doanh đồ cũ cho sinh viên”, bảng trình bày chi tiết tác nhân có thực hiện chức năng, điều kiện trước, mức độ cần thiết, phân loại chức năng ưu tiên, luồng sự kiện chính và kết quả sao khi thực hiện chức năng
1.3.2.9 Chức năng tìm kiếm sản phẩm
Bảng 1.9 Mô tả chức năng tìm kiếm sản phẩm
Mô tả Sinh viên có thể tìm kiếm sản phẩm theo tên sản phẩm
Mức độ cần thiết: Cao Phân loại: Cao
Tác nhân Tất cả sinh viên Điều kiện trước Không có
1 Sinh viên truy cập vào website
2 Sinh viên nhấp vào ô tìm kiếm và nhập tên sản phẩm cần tìm kiếm sau đó ấn “Enter” hoặc chọn nút “Tìm kiếm”
3 Hệ thống hiển thị danh sách sản phẩm theo tên mà sinh viên đã nhập
4 Sinh viên chọn vào sản phẩm cần xem chi tiết thông tin
5 Hệ thống hiển thị đầy đủ thông tin chi tiết của sản phẩm
Kết quả Sinh viên có thể tìm kiếm sản phẩm theo tên sản phẩm
Bảng 1.9 mô tả chức năng tìm kiếm sản phẩm theo tên sản phẩm của “Website kinh doanh đồ cũ cho sinh viên”, bảng trình bày chi tiết tác nhân có thực hiện chức năng, điều kiện trước, mức độ cần thiết, phân loại chức năng ưu tiên, luồng sự kiện chính và kết quả sao khi thực hiện chức năng
1.3.2.10 Chức năng thêm sản phẩm vào giỏ hàng
Bảng 1.10 Mô tả chức năng thêm sản phẩm vào giỏ hàng
Sinh viên có thể thêm sản phẩm vào giỏ hàng trước khi xác nhận mua hàng
Mức độ cần thiết: Cao Phân loại: Cao
Tác nhân Tất cả sinh viên Điều kiện trước Không có
1 Sinh viên truy cập vào website
2 Sinh viên chọn vào sản phẩm và xem chi tiết sản phẩm
3 Chọn vào nút “Thêm vào giỏ hàng” để thêm vào giỏ hàng trước khi xác nhận mua hàng
Kết quả Sinh viên thêm sản phẩm vào giỏ hàng thành công
Bảng 1.10 mô tả chức năng thêm sản phẩm vào giỏ hàng của “Website kinh doanh đồ cũ cho sinh viên”, bảng trình bày chi tiết tác nhân có thực hiện chức năng, điều kiện trước, mức độ cần thiết, phân loại chức năng ưu tiên, luồng sự kiện chính và kết quả sao khi thực hiện chức năng
1.3.2.11 Chức năng xóa sản phẩm khỏi giỏ hàng
Bảng 1.11 Mô tả chức năng xóa sản phẩm khỏi giỏ hàng
Mô tả Sinh viên có thể xóa sản phẩm ra khỏi giỏ hàng
Mức độ cần thiết: Cao Phân loại: Cao
Tác nhân Tất cả sinh viên Điều kiện trước Không có
1 Sinh viên truy cập vào website
2 Chọn vào chức năng quản lý giỏ hàng
3 Chọn sản phẩm cần xóa khỏi giỏ hàng và ấn vào biểu tượng xóa sản phẩm
Kết quả Sinh viên xóa sản phẩm khỏi giỏ hàng thành công
Các yêu cầu phi chức năng
Bảng 1.28 Yêu cầu thực thi
Mã yêu cầu Yêu cầu tối thiểu
YC_001 Máy tính cần có kết nối internet và được cài đặt đầy đủ các phần mềm hỗ trợ chạy website
Sau khi người dùng thực hiện chức năng trên website, hệ thống phải thực thi đúng yêu cầu người dùng và trả về kết quả thực thi hoặc thông báo
YC_003 Thông tin, dữ liệu cũng như bố cục website phải được sắp xếp một cách trực quan, khoa học, giúp người dùng dễ sử dụng.
YC_004 Không lỗi khi thực thi chương trình
Bảng 1.28 mô tả các yêu cầu thực thi của “Website kinh doanh đồ cũ cho sinh viên” bao gồm mã yêu cầu và mô tả chi tiết yêu cầu thực thi
Bảng 1.29 Yêu cầu hiệu suất
Mã yêu cầu Yêu cầu tối thiểu
YC_005 Hệ thống đảm bảo hoạt động tốt với nhiều lượt truy cập cùng lúc, thời gian chờ tối đa không quá 5s.
YC_006 Có khả năng hoạt động tốt trên nhiều loại thiết bị cũng như hệ điều hành khác nhau.
Bảng 1.29 mô tả các yêu cầu hiệu suất của “Website kinh doanh đồ cũ cho sinh viên” bao gồm mã yêu cầu và mô tả chi tiết yêu cầu hiệu suất
Bảng 1.30 Yêu cầu an toàn
Mã yêu cầu Yêu cầu tối thiểu
YC_007 Đảm bảo về mặt lưu trữ nếu có yêu cầu lưu trữ lượng lớn dữ liệu
YC_008 Người dùng chỉ được thao tác các chức năng nằm trong phạm vi cho phép được định sẵn.
YC_009 Hệ thống không chứa virus, không chứa các đường link độc hại, bao gồm các đường link chứa mã độc
Mỗi tài khoản thành viên trong website được bảo vệ một các nghiêm túc, tránh tình trạng đánh cắp thông tin trái phép bằng bất kỳ hình thức nào
Bảng 1.30 mô tả các yêu cầu an toàn của “Website kinh doanh đồ cũ cho sinh viên” bao gồm mã yêu cầu và mô tả chi tiết yêu cầu an toàn
Bảng 1.31 Yêu cầu bảo mật
Mã yêu cầu Yêu cầu tối thiểu
YC_011 Hệ thống cần được bảo vệ bởi một hệ thống mã hóa mật khẩu tiên tiến
Mỗi tài khoản cá nhân ở website được bảo vệ một cách nghiêm túc, tránh tình trạng đánh cắp thông tin trái phép bằng bất kỳ hình thức nào
Hình 3.31 mô tả các yêu cầu bảo mật của “Website kinh doanh đồ cũ cho sinh viên” bao gồm mã yêu cầu và mô tả chi tiết yêu cầu bảo mật.
Các yêu cầu giao tiếp bên ngoài
Yêu cầu hỗ trợ phần cứng được sử dụng trong dự án bao gồm:
Máy tính cá nhân: dùng để sử dụng cho quản trị viên và các người dùng có đầy đủ phần mềm hỗ trợ chạy website
Cơ sở dữ liệu: Có thể chứa lượng lớn dữ liệu của website, cho phép kết nối nhanh chóng, section lưu lượng truy cập được phản hồi liên tục cho người dùng, có thể mở rộng và cải tiến cơ sở dữ liệu trong tương lai khi hệ thống có nhu cầu phát triển thêm chức năng, website có thể tương tác với người dùng bằng chuột, màn hình, bàn phím
Hệ thống vận hành tốt trên các trình duyệt: Chrome, Firefox,
Cơ sở dữ liệu MySQL
Visual studio code để biên soạn các đoạn code
Website chạy ổn định trên máy tính sử dụng các hệ điều hành Windows phiên bản
1.5.3 Các đặc điểm chất lượng sản phẩm
Tính đúng đắn: Các chức năng của hệ thống phải thực hiện đúng theo yêu cầu Tính khoa học: Cách xây dựng, tổ chức các chức năng của hệ thống phải khoa học Xây dựng cơ sở dữ liệu hợp lý với hệ thống, giảm tài nguyên lưu trữ dữ liệu
Tính tinh cậy: Hệ thống phải đảm bảo các chức năng thực hiện tốt
Website sử dụng giao thức truyền HTTP, sử dụng giao thức GET, POST để truyền tải dữ liệu và các thông báo, các form đến người dùng
Ngôn ngữ sử dụng trong website phải thuần Việt, từ ngữ đơn giản, dễ hiểu
Các nút lệnh được sắp xếp hợp lý.
Giao diện trực quan, thân thiện và dễ nhìn
Mức độ bảo mật cao, tin cậy
Tốc độ xử lý nhanh chóng, chính xác
Dễ dàng bảo trì cũng như là nâng cấp hệ thống.
CƠ SỞ LÝ THUYẾT
HTML
HTML là viết tắt của cụm từ Hypertext Markup Language (tạm dịch là Ngôn ngữ đánh dấu siêu văn bản) Được coi là xương sống của một website, sử dụng để định dạng và hiển thị văn bản trên trình duyệt HTML được sử dụng để tạo và cấu trúc các thành phần trong website hoặc ứng dụng, phân chia các đoạn văn, heading, titles, blockquotes… Cha đẻ của HTML là Tim Berners-Lee, cũng là người khai sinh ra World Wide Web và chủ tịch của World Wide Web Consortium (W3C – tổ chức thiết lập ra các chuẩn trên môi trường Internet) Các thiết lập và cấu trúc HTML được vận hành và phát triển bởi World Wide Web Consortium (W3C)
Với cấu trúc HTML, hình ảnh và các đối tượng khác như biểu mẫu tương tác có thể được nhúng vào trang được hiển thị Các trình duyệt không hiển thị các thẻ HTML, nhưng sử dụng chúng để diễn giải nội dung của trang.
CSS
CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML) Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho website
CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì HTML không được thiết kế để gắn tag để giúp định dạng website
Mối tương quan giữa HTML và CSS rất mật thiết HTML là ngôn ngữ markup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diện website), chúng là không thể tách rời.
Javascript
Javascript là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa Javascript được sử dụng rộng rãi trong các ứng dụng Website
Javascript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome, trên máy tính lẫn điện thoại
Nhiệm vụ của Javascript là xử lý những đối tượng HTML trên trình duyệt Nó có thể can thiệp với các hành động như thêm / xóa / sửa các thuộc tính CSS và các thẻ HTML một cách dễ dàng Hay nói cách khác, Javascript là một ngôn ngữ lập trình trên trình duyệt ở phía client Tuy nhiên, hiện nay với sự xuất hiện của NodeJS đã giúp cho Javascript có thể làm việc ở backend.
NodeJS
Nodejs [8] là một nền tảng (Platform) phát triển độc lập được xây dựng trên V8 JavaScript Engine – trình thông dịch thực thi mã JavaScript giúp chúng ta có thể xây dựng được các ứng dụng web như các trang video clip, các forum và đặc biệt là trang mạng xã hội phạm vi hẹp một cách nhanh chóng và dễ dàng mở rộng
NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window cho tới Linux, OS X nên đó cũng là một lợi thế NodeJS cung cấp các thư viện phong phú ở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp nhất
Node.js được xây dựng và phát triển từ năm 2009, bảo trợ bởi đơn vị thực tập Joyent, trụ sở tại California, Hoa Kỳ.
ReactJS
ReactJS [7] là một thư viện JavaScript chuyên giúp các nhà phát triển xây dựng giao diện người dùng hay UI Trong lập trình ứng dụng front-end, lập trình viên thường sẽ phải làm việc chính trên 2 thành phần sau: UI và xử lý tương tác của người dùng UI là tập hợp những thành phần mà bạn nhìn thấy được trên bất kỳ một ứng dụng nào, ví dụ có thể kể đến bao gồm: menu, thanh tìm kiếm, những nút nhấn, card,… Giả sử chúng ta đang lập trình một website thương mại điện tử, sau khi người dùng chọn được sản phẩm ưng ý rồi và nhấn vào nút “Thêm vào giỏ hàng”, thì việc tiếp theo mà bạn phải làm đó là thêm sản phẩm được chọn vào giỏ hàng và hiển thị lại sản phẩm đó khi người dùng chọn vào chức năng xem giỏ hàng
React sử dụng cơ chế Virtual DOM để làm cho việc tương tác với ứng dụng nhanh hơn và đảm bảo sự ổn định của ứng dụng Nó cũng sử dụng JSX để giúp lập trình viên tạo các giao diện người dùng tốt hơn.
Cơ sở dữ liệu MySQL
Database Management System, (viết tắt là RDBMS) hoạt động theo mô hình client- server RDBMS là một phần mềm hay dịch vụ dùng để tạo và quản lý các cơ sở dữ liệu (Database) theo hình thức quản lý các mối liên hệ giữa chúng
Database là tập hợp dữ liệu theo cùng một cấu trúc Cơ sở dữ liệu [2] , hay database, là nơi chứa và sắp đặt dữ liệu Dữ liệu được đặt trong một bộ dữ liệu chung, dataset, được tổ chức sắp xếp giống như một bảng tính Mỗi “bảng” này có liên hệ với nhau theo cách nào đó Vì vậy từ Relational (liên hệ) trong RDBMS có ý nghĩa như vậy Nếu phần mềm không hỗ trợ mô hình dữ liệu quan hệ với nhau như vậy thì gọi là DBMS
MySQL Server là máy tính hay một hệ các máy tính cài đặt phần mềm MySQL dành cho server để giúp chúng ta lưu trữ dữ liệu trên đó, để máy khách có thể truy cập vào quản lý
MySQL Client là nói chung của mọi phần mềm có thể thực hiện truy vấn lên một MySQL Server và nhận kết quả trả về
Khi kết hợp với XAMPP (là một bản phân phối miễn phí và mã nguồn mở của Apache, bao gồm các công cụ cần thiết để phát triển và triển khai ứng dụng web trên máy tính cá nhân), MySQL có thể được sử dụng để lưu trữ dữ liệu cho các ứng dụng web động được phát triển trên máy tính cá nhân của người dùng Khi cài đặt XAMPP (cách cài đặt được đề cập ở phụ lục A), MySQL cũng được cài đặt sẵn và được kích hoạt mặc định Điều này có nghĩa là khi chúng ta sử dụng XAMPP để phát triển ứng dụng web động trên máy tính của mình, ta có thể sử dụng MySQL để lưu trữ dữ liệu cho các ứng dụng đó.
Mô hình MVC tổng quát
Mô hình MVC là một mô hình mẫu (Model-View-Controller) thiết kế để phân tách logic của ứng dụng, cho phép mã được dễ dàng quản lý, bảo trì và thay đổi Cấu trúc này thường được sử dụng trong các ứng dụng web và các ứng dụng mạnh mẽ
Mô hình MVC bao gồm các phần sau (được mô tả ở Hình 2.1):
- Model: Model là một phần của ứng dụng đại diện cho dữ liệu và các thuộc tính liên quan đến nó
- View: Là phần của ứng dụng đại diện cho việc xử lý giao diện, chịu trách nhiệm hiển thị dữ liệu trên màn hình người dùng
- Controller: Controller là một phần của ứng dụng đại diện cho logistic xử lý dữ liệu trước khi gửi nó đến view Nó cũng nhận dữ liệu từ người dùng và xử lý nó
Hình 2.1 Mô hình MVC tổng quát
2.7.2 Ưu nhược điểm của mô hình MVC
Hỗ trợ quá trình phát triển nhanh chóng: Với đặc điểm hoạt động độc lập của từng thành phần, chúng ta có thể làm việc đồng thời trên từng bộ phận khác nhau của mô hình này MVC giúp tiết kiệm rất nhiều thời gian
Khả năng cung cấp đồng thời nhiều khung View: Với mô hình MVC, chúng ta có thể tạo ra đồng thời nhiều khung View cho Model
Dễ dàng thao tác chỉnh sửa: Bộ phận Model hoạt động tách biệt với View đồng nghĩa với việc chúng ta có thể đưa ra các thay đổi, chỉnh sửa hoặc cập nhật dễ dàng ở từng bộ phận
Giữ nguyên trạng thái dữ liệu: Mô hình MVC truyền lại dữ liệu nhưng không định dạng lại dữ liệu Do đó, các dữ liệu này có thể được dùng lại cho các thay đổi sau này
Hỗ trợ các nền tảng phát triển SEO: Với mô hình MVC, bạn có thể dễ dàng tạo ra
SVTH: Huỳnh Thanh Thảo 44 các mã SEO URL để thu hút lượng truy cập đối với ứng dụng bất kỳ
Khó khăn trong quá trình điều hướng code: Điều hướng khung có thể phức tạp vì mô hình này bao gồm nhiều lớp và yêu cầu người dùng thích ứng với các tiêu chí phân tách của MVC
Không thích hợp việc phát triển các ứng dụng nhỏ vì mô hình này yêu cầu bạn lưu trữ một số lượng lớn các file
Nhiều khung hoạt động đồng thời: Việc phân tách một tính năng thành ba bộ phận khác nhau dễ dẫn đến hiện tượng phân tán Do đó, đòi hỏi các nhà phát triển phải duy trì tính nhất quán của nhiều bộ phận cùng một lúc.
Thuật toán gợi ý sản phẩm dựa trên sở thích
Thuật toán gợi ý sản phẩm dựa trên sở thích [5] hoạt động bằng cách tìm kiếm sự tương đồng giữa người dùng và sản phẩm dựa trên dữ liệu sở thích của người dùng Sự tương đồng này được định nghĩa bởi các đặc trưng chung giữa người dùng và sản phẩm, chẳng hạn như loại sản phẩm, mức độ quan tâm, giá cả, đánh giá, v.v
Thuật toán gợi ý sản phẩm dựa trên sở thích được chia thành hai loại chính:
User-based Collaborative Filtering: dựa trên sự tương đồng giữa người dùng Thuật toán sử dụng dữ liệu sở thích của người dùng để tìm kiếm các người dùng khác có sở thích tương tự và đề xuất các sản phẩm được ưa thích bởi những người dùng này
Item-based Collaborative Filtering: dựa trên sự tương đồng giữa các sản phẩm Thuật toán sử dụng dữ liệu về các sản phẩm để tìm kiếm các sản phẩm tương tự và đề xuất cho người dùng các sản phẩm này
Thuật toán gợi ý sản phẩm dựa trên sở thích là một trong những thuật toán phổ biến và hiệu quả được sử dụng trong các website bán hàng, dịch vụ đề xuất phim và các ứng dụng khác để đề xuất sản phẩm tương tự cho người dùng
Website kinh doanh đồ cũ cho sinh viên ứng dụng giải thuật gợi ý dựa trên sở thích của các người dùng, sau khi thuật toán gợi ý sản phẩm dựa trên sở thích được áp dụng cho website kinh doanh đồ cũ cho sinh viên, người dùng sẽ nhận được các đề xuất sản phẩm dựa trên sở thích của họ và của những người dùng khác có sở thích tương tự ví dụ ở Hình 2.2
Hình 2.2 Mô tả giải thuật gợi ý sản phẩm
Cụ thể, khi người dùng đăng nhập vào website, họ sẽ thực hiện hành động yêu thích sản phẩm Thông tin này sẽ được lưu trữ trong cơ sở dữ liệu và sử dụng để tạo ra các đề xuất sản phẩm phù hợp với sở thích của người dùng
Ví dụ ta có bảng dữ liệu chứa thông tin về sở thích của các người dùng (sản phẩm có đánh dấu x tức là người dùng đã thích sản phẩm đó):
Bảng 2.1 Dữ liệu thông tin về sở thích của người dùng
Sản phẩm Người dùng A Người dùng B Người dùng C Người dùng D
Từ bảng dữ liệu Bảng 2.1 hệ thống sẽ gợi ý sản phẩm cho một người dùng cụ thể
Ví dụ: nếu người dùng A đang truy cập vào website và muốn tìm kiếm sản phẩm mới, hệ thống sẽ dựa trên đánh giá của những người dùng có sở thích tương tự để đưa ra gợi ý cho người dùng A
Ta thấy người dùng A và người dùng C đều thích sản phẩm 1, 4 vì thế hệ thống sẽ đề xuất những sản phẩm người dùng C thích nhưng người dùng A chưa thích là sản phẩm
2 Hệ thống sẽ gợi ý sản phẩm 2 cho người dùng A
Trường hợp người dùng chưa yêu thích sản phẩm nào hệ thống sẽ đề xuất các sản phẩm được tất cả người dùng yêu thích nhất Luồng xử lý cụ thể ở Hình 2.3
Hình 2.3 Mô hình gợi ý sản phẩm của website bán đồ cũ
Teachable Machine
Teachable Machine là một công cụ trực tuyến miễn phí được phát triển bởi Google, cho phép người dùng huấn luyện mô hình học máy bằng cách tải lên các tập dữ liệu hình ảnh, âm thanh hoặc cảm giác của các đối tượng hoặc hành động mà họ muốn phân loại Sau đó, công cụ này sẽ sử dụng các thuật toán học máy để xử lý và phân tích dữ liệu của người dùng và đưa ra một mô hình học máy được tạo ra dựa trên tập dữ liệu này
Teachable Machine là một công cụ rất hữu ích để giúp người dùng tìm hiểu về học máy và ứng dụng nó vào các dự án của mình Nó có thể được sử dụng để tạo ra các ứng dụng thực tế, như hệ thống nhận dạng khuôn mặt, các ứng dụng hỗ trợ cho người khuyết tật, hay các ứng dụng giáo dục
Website kinh doanh đồ cũ cho sinh viên sử dụng mạng CNN (Convolutional Neural Network) để huấn luyện mô hình phân loại hình ảnh Mạng CNN là một giải thuật học sâu được thiết kế đặc biệt để xử lý dữ liệu hình ảnh Nó có khả năng tự động trích xuất các đặc trưng quan trọng của hình ảnh và sử dụng chúng để phân loại các đối tượng trong hình ảnh
Khi chúng ta sử dụng chức năng phân loại hình ảnh trên Teachable Machine, chúng ta cần cung cấp cho nó một tập dữ liệu hình ảnh để huấn luyện mô hình Hình 2.4 chúng ta đặt tên cho Class và có thể chọn hình ảnh từ máy hoặc dùng webcam để cung cấp dữ liệu Sau đó chọn nút “Train Model”, Teachable Machine sử dụng mạng CNN để xử lý dữ liệu này và huấn luyện mô hình phân loại dữ liệu tùy chỉnh
Hình 2.4 Giao diện chính của Teachable Machine
Sau khi mô hình được huấn luyện, chúng ta có thể sử dụng nó để phân loại các hình ảnh mới một cách tự động Mô hình sẽ dựa trên các đặc trưng của hình ảnh đầu vào và đưa ra dự đoán về lớp của đối tượng trong hình ảnh đó
Website kinh doanh đồ cũ cho sinh viên sử dụng tính năng này của Teachable Machine để phân loại giấy tờ nguồn gốc, xuất xứ của sản phẩm Đầu tiên, website có thể yêu cầu người dùng tải lên hình ảnh xuất xứ của sản phẩm mà họ muốn bán Sau đó, hình ảnh này sẽ được đưa vào Teachable Machine để xử lý và phân loại dữ liệu này có hợp lệ hay không, nếu không hợp lệ người dùng sẽ không thể tải lên hình ảnh này Để phân loại hình ảnh giấy tờ nguồn gốc xuất xứ sản phẩm bằng CNN và sử dụng Teachable Machine cho website bán đồ cũ cho sinh viên, chúng ta có thể thực hiện theo các bước sau:
Bước 1 Chuẩn bị dữ liệu: Tập dữ liệu cần được thu thập và chia thành các lớp tương ứng với từng loại giấy tờ nguồn gốc xuất xứ của sản phẩm Dữ liệu này có thể được thu thập bằng cách sử dụng camera hoặc tải xuống từ internet
Bước 2 Tiền xử lý dữ liệu: Dữ liệu ảnh cần được tiền xử lý để có thể sử dụng cho việc huấn luyện mô hình Tiền xử lý có thể bao gồm các bước như thay đổi kích thước ảnh, chuyển đổi sang định dạng đen trắng, hoặc tăng cường dữ liệu để đảm bảo độ đa dạng của tập dữ liệu
Bước 3 Xây dựng mô hình CNN: CNN là một loại mô hình học sâu được sử dụng rộng rãi trong việc phân loại hình ảnh Mô hình này sử dụng các tầng tích chập (convolutional layers) để trích xuất đặc trưng từ ảnh, sau đó sử dụng các tầng kết nối đầy đủ (fully connected layers) để phân loại các ảnh vào từng lớp tương ứng
Bước 4 Huấn luyện mô hình CNN: Sau khi xây dựng mô hình CNN, chúng ta cần huấn luyện mô hình với tập dữ liệu đã chuẩn bị Quá trình huấn luyện sẽ tối ưu các tham số của mô hình để đạt được kết quả tốt nhất Chúng ta có thể sử dụng Teachable Machine, một công cụ trực quan và dễ sử dụng, để huấn luyện mô hình và tinh chỉnh các tham số của nó
Bước 5 Kiểm định mô hình: Sau khi mô hình đã được huấn luyện, cần kiểm định mô hình trên tập dữ liệu kiểm tra để đánh giá hiệu suất của nó Nếu mô hình đạt kết quả tốt trên tập kiểm tra, chúng ta có thể sử dụng nó để phân loại các giấy tờ nguồn gốc xuất xứ của sản phẩm
Bước 6 Sử dụng mô hình CNN: Cuối cùng, chúng ta có thể sử dụng mô hình CNN đã huấn luyện để nhận dạng giấy tờ nguồn gốc xuất xứ của sản phẩm trong website bán đồ cũ cho sinh viên .
THIẾT KẾ VÀ CÀI ĐẶT GIẢI PHÁP
Tổng quan hệ thống
Website “Kinh doanh đồ cũ cho sinh viên” bao gồm 4 loại người dùng chính: Quản trị viên, sinh viên đã có tài khoản, sinh viên chưa có tài khoản và cửa hàng bên ngoài
Quản trị viên: Người có vai trò quan trọng trong việc quản lý tài khoản người dùng, quản lý các danh mục sản phẩm trên hệ thống
Sinh viên chưa có tài khoản: Người dùng này có thể truy cập vào website sử dụng một số tính năng như tìm kiếm sản phẩm, xem chi tiết sản phẩm Tuy nhiên không thể thực hiện việc quản lý mua hàng, bán hàng,…
Sinh viên đã có tài khoản: Người dùng này có thể thực hiện tìm kiếm sản phẩm, xem chi tiết sản phẩm, quản lý việc mua hàng, bán hàng, quản lý thông tin cá nhân,…
Cửa hàng bên ngoài: Cửa hàng hoặc doanh nghiệp kinh doanh đồ cũ được nhà trường cho phép bán hàng trên hệ thống.
Kiến trúc tổng quan
3.2.1 Thiết kế kiến trúc MVC
Kiến trúc hệ thống của “Website kinh doanh đồ cũ” được xây dựng theo kiến trúc MVC [4] (Model - View - Controller) Hình 3.1 là mô hình chuẩn cho ứng dụng website được sử dụng phổ biến hiện nay Trong đó:
- Controller: là nơi tiếp nhận các yêu cầu xử lý từ phía khách hàng, có nhiệm vụ xử lý giữa, Model và View tương tác và kết nối với nhau Controller nhận các yêu cầu (request) từ phía khách hàng (browser), sau đó gọi các phương thức để thực hiện các hoạt động được yêu cầu xử lý và gửi ra View Lúc này View sẽ chịu trách nhiệm format lại các dữ liệu (data) từ phía Controller gửi ra và trình bày các dữ liệu đó theo một định dạng chuẩn ra HTML
- Model: là nơi chịu trách nhiệm quản lý tất cả các dữ liệu, là nơi lưu trữ và truy xuất các thực thể từ cơ sở dữ liệu MySQL và chứa các logic được thực thi bởi ứng dụng
- View: là nơi chịu trách nhiệm hiển thị ra tất cả dữ liệu và giúp tương tác với hệ thống đã được truy xuất từ Model theo chuẩn đã được quy ước từ lập trình viên
❖ Đối với Website kinh doanh đồ cũ cho sinh viên sẽ được thiết kế như sau:
- Về phía giao diện người dùng (client) sẽ được xây dựng bằng ReactJS Còn API sẽ được viết ở phía server bằng Nodejs cùng với cơ sở dữ liệu là MySQL.
- Client gửi 1 yêu cầu HTTP đến API bằng các phương thức GET, POST, PUT, DELETE Máy chủ Nodejs tiếp nhận và xử lý yêu cầu bằng cách tương tác với cơ sở dữ liệu, sau đó trả về dữ liệu theo định dạng JSON Phía client sẽ xử lý dữ liệu này và trả về giao diện cho người dùng
Hình 3.1 Mô hình MVC của hệ thống kinh doanh đồ cũ cho sinh viên
Tổng quan các lớp của mô hình MVC
Lớp Controller tiếp nhận các yêu cầu xử lý từ phía khách hàng, có nhiệm vụ xử lý giữa, Model và View tương tác và kết nối với nhau Controller nhận các yêu cầu (request) từ phía khách hàng, sau đó gọi các phương thức để thực hiện các hoạt động được yêu cầu xử lý và gửi ra View Lúc này View sẽ chịu trách nhiệm format lại các dữ liệu (data) từ phía Controller gửi ra và trình bày các dữ liệu đó theo một định dạng chuẩn ra HTML
Hình 3.2 Sơ đồ tuần tự chức năng thêm sản phẩm mới
Sơ đồ tuần tự trong Hình 3.2 ở trên thể hiện luồng xử lý cho chức năng thêm sản phẩm mới Khi người dùng nhập thông tin từ giao diện thêm sản phẩm mới và gửi yêu cầu thêm sản phẩm mới cho Controller, Product Controller sẽ được gọi để xử lý yêu cầu, sau đó thao tác với các lớp Model tương ứng là Product Model Lớp Model này sẽ gọi các hàm để thêm dữ liệu vào bảng Product trong CSDL, sau đó truy vấn dữ liệu gửi về Controller
Controller tiếp tục trả về dữ liệu JSON cho lớp View để xử lý và cuối cùng hiển thị thông báo thêm sản phẩm mới thành công đến người dùng
3.3.2 Lớp Model Đối với website kinh doanh đồ cũ cho sinh viên thì lớp Model là nơi chịu trách nhiệm lưu trữ, quản lý tất cả các dữ liệu, là nơi truy xuất các thực thể từ cơ sở dữ liệu MySQL và chứa các logic được thực thi bởi ứng dụng Nó cũng là cầu nối giữa hai lớp còn lại lớp View và lớp Controller Một số thành phần trong lớp Model được mô tả ở Hình 3.3
Hình 3.3 Các thành phần trong lớp Model
Bảng 3.1 Giải thích các thành phần trong lớp Model
STT Tên bảng Diễn giải
2 DIA_CHI_NHAN_HANG Địa chỉ nhận hàng của sinh viên
3 CHI_TIET_DON_HANG Chi tiết đơn hàng
7 CUA_HANG_BEN_NGOAI Cửa hàng bên ngoài
9 CIHI_TIET_HOA_DON Chi tiết hóa đơn
11 QUAN_TRI_VIEN Quản trị viên
13 DIA_CHI_NHAN_HANG Địa chỉ nhận hàng
14 BAO_CAO Đơn báo cáo của sinh viên với sản phẩm
15 THONG_TIN_GIAO_DICH Thông tin giao dịch của người bán gồm: tên chủ tài khoản, số tài khoản, tên ngân hàng
17 PHI_BAN_HANG Phí bán hàng
Bảng 3.1 mô tả các thành phần trong lớp Model (thành phần trong mô hình MVC) của website kinh doanh đồ cũ cho sinh viên bao gồm tên bảng và giải thích ý nghĩa
Lớp View được xây dựng ở phía Front-end bằng công nghệ ReactJS cùng với một số thư viện node modules và tailwind css Lớp View sẽ bao gồm nhiều trang giao diện khác nhau, giao diện sẽ được chia nhỏ thành các component nhằm mục đích để tái sử dụng,tránh lặp lại cùng một logic ở nhiều trang ví dụ mô tả ở Hình 3.4
Hình 3.4 Mô tả tái sử dụng component
Lớp View được tách biệt hoàn toàn với Model và Controller Điều này thực thi việc tách các vai trò của lập trình viên Lập trình viên Front-end có thể tập trung vào lập trình giao diện Bố cục của website có thể được thay đổi dễ dàng Các lập trình viên Front-end và Back-end có thể làm việc độc lập Và thời gian phát triển có thể được rút ngắn.
Sơ đồ phân rã chức năng
Các chức năng trong hệ thống mua bán đồ cũ cho sinh viên được thể hiện cụ thể như trong Hình 3.5
Hình 3.5 Sơ đồ phân rã chức năng
Sơ đồ dữ liệu mức quan niệm CDM
Sơ đồ thực thể quan hệ của hệ thống được thể hiện như Hình 3.6 thể hiện các mối quan hệ giữa các thực thể trong hệ thống Một sinh viên sẽ có thể có nhiều địa chỉ nhận hàng, sở thích, sản phẩm, đơn báo cáo, đơn hàng (one to many) Một sinh viên chỉ có một thông tin giao dịch, giỏ hàng (one to one) Một cửa hàng bên ngoài chỉ có một thông tin giao dịch (one to one) và có thể đăng bán nhiều sản phẩm, nhận nhiều đơn hàng (one to many) Mỗi quản trị viên có thể tạo nhiều sự kiện bán đồ cũ và nhiều danh mục sản phẩm (one to many)
Hình 3.6 Sơ đồ thực thể quan hệ của hệ thống
Cơ sở dữ liệu
3.6.1 Bảng dữ liệu SINH_VIEN
Bảng 3.2 Mô tả bảng dữ liệu SINH_VIEN
Tên trường Kiểu dữ liệu
Khóa ngoại Được rỗng Ghi chú username string x Tên người dùng để đăng nhập password string Mật khẩu đăng nhập fullName string Họ tên đầy đủ email string x Email liên hệ address string x Địa chỉ của người dùng phoneNumber string x Số điện thoại của người dùng
Các thông tin có trong bảng SINH_VIEN (Bảng 3.2) có liên quan đến các tài khoản sinh viên có trong hệ thống
3.6.2 Bảng dữ liệu DON_HANG
Bảng 3.3 Mô tả bảng dữ liệu DON_HANG
Tên trường Kiểu dữ liệu Khóa chính
Khóa ngoại Được rỗng Ghi chú orderId string x Mã đơn hàng orderer string x Tên tài khoản của người đặt hàng orderReceiver string x
Tên tài khoản của người tiếp nhận đơn hàng status boolean Trạng thái đơn hàng productList array Danh sách sản phẩm total double Tổng tiền cần thanh toán
Các thông tin có trong bảng DON_HANG (Bảng 3.3) có liên quan đến các đơn hàng đã đặt, hoặc đã nhận của sinh viên
3.6.3 Bảng dữ liệu GIO_HANG
Bảng 3.4 Mô tả bảng dữ liệu GIO_HANG
Tên trường Kiểu dữ liệu Khóa chính
Khóa ngoại Được rỗng Ghi chú cartId string x Mã giỏ hàng owner string x Tên người dùng là chủ sở hữu của giỏ hàng productList array Danh sách sản phẩm total double Tổng tiền cần thanh toán amount int Số lượng sản phẩm
Các thông tin có trong bảng GIO_HANG (Bảng 3.4) có liên quan đến thông tin giỏ hàng của sinh viên
3.6.4 Bảng dữ liệu SU_KIEN
Bảng 3.5 Mô tả bảng dữ liệu SU_KIEN
Tên trường Kiểu dữ liệu Khóa chính
Khóa ngoại Được rỗng Ghi chú eventId string x Mã sự kiện mua bán đồ cũ startTime Date Thời gian bắt đầu sự kiện endTime Date Thời gian kết thúc sự kiện address string Nơi tổ chức sự kiện purpose string x Mục đích của sự kiện
Các thông tin có trong bảng SU_KIEN (Bảng 3.5) có liên quan đến thông tin sự kiện mua bán đồ cũ cho sinh viên
3.6.5 Bảng dữ liệu SAN_PHAM
Bảng 3.6 Mô tả bảng dữ liệu SAN_PHAM
Tên trường Kiểu dữ liệu Khóa chính
Khóa ngoại Được rỗng Ghi chú id string x Mã sản phẩm seller string x Tên người dùng là chủ sở hữu của sản phẩm nameProduct string Tên sản phẩm priceProduct double Giá sản phẩm quantityAvailable int Số lượng sản phẩm sẵn có status string Tình trạng hiện tại của sản phẩm description string Mô tả chi tiết sản phẩm categoryId string x Mã danh mục sản phẩm size string x Kích thước sản phẩm images Array Danh sách hình ảnh sản phẩm imageSource Array Danh sách hình ảnh nguồn gốc sản phẩm
Các thông tin có trong bảng SAN_PHAM (Bảng 3.6) có liên quan đến thông tin sản phẩm trên hệ thống
3.6.6 Bảng dữ liệu CHI_TIET_SAN_PHAM
Bảng 3.7 Mô tả bảng dữ liệu CHI_TIET_SAN_PHAM
Tên trường Kiểu dữ liệu Khóa chính
Khóa ngoại Được rỗng Ghi chú status string Tình trạng hiện tại của sản phẩm trademark string x Thương hiệu sản phẩm size string x Kích thước sản phẩm
Các thông tin có trong bảng CHI_TIET_SAN_PHAM (Bảng 3.7) có liên quan đến thông tin chi tiết sản phẩm trên hệ thống Thông tin chi tiết sản phẩm phải thuộc về một sản phẩm nào đó nên quan hệ giữa CHI_TIET_SAN_PHAM và SAN_PHAM là one to one
3.6.7 Bảng dữ liệu BAO_CAO
Bảng 3.8 Mô tả bảng dữ liệu BAO_CAO
Tên trường Kiểu dữ liệu Khóa chính
Khóa ngoại Được rỗng Ghi chú reportId string x Mã phiếu báo cáo reporter string x
Tên người dùng là chủ sở hữu của phiếu báo cáo reportedProduct string x Mã sản phẩm bị báo cáo, khiếu nại title string Tiêu đề của phiếu báo cáo content string x Nội dung báo cáo, khiếu nại chi tiết
Các thông tin có trong bảng BAO_CAO (Bảng 3.8) có liên quan đến các đơn khiếu nại hoặc báo cáo sản phẩm từ sinh viên gửi đến quản trị viên Mỗi báo cáo thuộc về sinh viên nào đó trên hệ thống nên mối quan hệ giữa BAO_CAO và SINH_VIEN là one to one
3.6.8 Bảng dữ liệu DANH_MUC
Bảng 3.9 Mô tả bảng dữ liệu DANH_MUC
Tên trường Kiểu dữ liệu Khóa chính
Khóa ngoại Được rỗng Ghi chú categoryId string x Mã danh mục sản phẩm categoryName string Tên danh mục sản phẩm productList Array x Danh sách sản phẩm
ParentId string Mã danh mục cha
Các thông tin có trong bảng DANH_MUC (Bảng 3.9) có liên quan đến danh mục sản phẩm trên hệ thống Mỗi danh mục sẽ có danh mục cha nên DANH_MUC có quan hệ tự thân và mỗi danh mục sẽ có nhiều sản phẩm nên mối quan hệ giữa DANH_MUC và SAN_PHAM là one to many
3.6.9 Bảng dữ liệu SO_THICH
Bảng 3.10 Mô tả bảng dữ liệu SO_THICH
Tên trường Kiểu dữ liệu Khóa chính
Khóa ngoại Được rỗng Ghi chú studentId string x Tên người dùng productId string x Mã sản phẩm mà người dùng đã mua
Các thông tin có trong bảng SO_THICH (Bảng 3.10) có liên quan đến sở thích của sinh viên trên hệ thống Mỗi sinh viên sẽ có nhiều sở thích nên mối quan hệ giữa SINH_VIEN và SO_THICH là one to many
3.6.10 Bảng dữ liệu DIA_CHI_NHAN_HANG
Bảng 3.11 Mô tả bảng dữ liệu DIA_CHI_NHAN_HANG
Tên trường Kiểu dữ liệu Khóa chính
Khóa ngoại Được rỗng Ghi chú id string x Mã địa chỉ address string Chi tiết địa chỉ nhận hàng fullName string Tên người nhận
Các thông tin có trong bảng DIA_CHI_NHAN_HANG (Bảng 3.11) có liên quan đến thông tin địa chỉ nhận hàng của sinh viên Mỗi sinh viên sẽ có một hoặc nhiều địa chỉ nhận hàng nên mối quan hệ giữa SINH_VIEN và DIA_CHI_NHAN_HANG là one to many
3.6.11 Bảng dữ liệu THONG_TIN_GIAO_DICH
Bảng 3.12 Mô tả bảng dữ liệu THONG_TIN_GIAO_DICH
Tên trường Kiểu dữ liệu Khóa chính
Khóa ngoại Được rỗng Ghi chú id string x Mã thông tin giao dịch fullName string Tên chủ sở hữu bankNumber number Số tài khoản bankName string Tên ngân hàng
Các thông tin có trong THONG_TIN_GIAO_DICH (Bảng 3.12) có liên quan đến thông tin giao dịch của người bán, để người mua có thể thanh toán trực tuyến với thông tin giao dịch này Mỗi sinh viên (hoặc cửa hàng) sẽ có một thông tin giao dịch nên mối quan hệ giữa SINH_VIEN và THONG_TIN_GIAO_DICH là one to one
3.6.12 Bảng dữ liệu HOA_DON
Bảng 3.13 Mô tả bảng dữ liệu HOA_DON
Tên trường Kiểu dữ liệu Khóa chính
Khóa ngoại Được rỗng Ghi chú id string x Mã hóa đơn timeDate Date Ngày tạo
IdOrder string x Mã đơn hàng
Các thông tin có trong HOA_DON (Bảng 3.13) có liên quan đến hóa đơn trên hệ thống Mỗi HOA_DON bao gồm một đơn hàng nên mối quan hệ giữa HOA_DON và DON_HANG là one to one
3.6.13 Bảng dữ liệu PHI_BAN_HANG
Bảng 3.14 Mô tả bảng dữ liệu PHI_BAN_HANG
Tên trường Kiểu dữ liệu Khóa chính
Khóa ngoại Được rỗng Ghi chú id string x Mã phí total Double Tổng chi phí cần thanh toán bills Array Danh sách hóa đơn deadline Date Hạn cuối thanh toán
Các thông tin có trong PHI_BAN_HANG (Bảng 3.14) có liên quan đến phí bán hàng trên hệ thống Mỗi PHI_BAN_HANG bao gồm danh sách đơn hàng trạng thái và hạn cuối nộp phí, tổng số tiền cần nộp phải nộp.
Mô hình dữ liệu luận lý (LDM)
Hình 3.7 Mô hình dữ liệu luận lý của hệ thống
Mô hình dữ liệu luận lý cung cấp tổng quan chi tiết về toàn bộ tập hợp dữ liệu được tạo trong hệ thống quản lý sinh viên thực tập thực tế được thể hiện như trong Hình 3.3.1
Một mô hình dữ liệu logic thường bao gồm các thực thể dữ liệu, khóa và các thuộc tính và mối quan hệ giữa các thực thể Nó thường được coi là việc thực hiện mô hình dữ liệu khái niệm.
Kết quả thực hiện yêu cầu chức năng
Sinh viên hay cửa hàng bên ngoài được cung cấp tài khoản đăng nhập từ quản trị viên có thể thực hiện đăng nhập vào hệ thống Hình 3.8 mô tả giao diện chức năng đăng nhập
Hình 3.8 Giao diện chức năng đăng nhập
Bảng 3.15 Mô tả các thành phần trong giao diện đăng nhập
STT Loại điều khiển Nội dung thực hiện Giá trị mặc định
1 Textbox Nhập tên đăng nhập
3 Button Thực hiện đăng nhập
4 Button Đóng giao diện đăng nhập
Bảng 3.15 mô tả các thành phần chính trong giao diện đăng nhập bao gồm tên loại điều khiển, mô tả nội dung thực hiện và giá trị mặc định
Bảng 3.16 Bảng dữ liệu dùng cho chức năng đăng nhập
Thêm Sửa Xóa Truy vấn
Bảng 3.16 mô tả bảng dữ liệu được dùng khi thực hiện chức năng đăng nhập bao gôm tên bảng và phương thức thực hiện
Sơ đồ tuần tự chức năng đăng nhập được mô tả ở Hình 3.9 Đầu tiên người dùng truy cập vào website và chọn chức năng đăng nhập Sau đó người dùng cần nhập vào thông tin đăng nhập như tên tài khoản, mật khẩu và ấn nút đăng nhập Hệ thống sẽ kiểm tra tên người dùng và mật khẩu có hợp lệ hay không và thông báo kết quả đăng nhập đến người dùng
Hình 3.9 Sơ đồ tuần tự chức năng đăng nhập
3.8.2 Chức năng tìm kiếm sản phẩm
Sinh viên có thể thực hiện tìm kiếm sản phẩm mà mình mong muốn bằng cách nhập tên sản phẩm từ ô tìm kiếm và nhấn nút tìm kiếm, hệ thống sẽ lọc các sản phẩm theo từ khóa được nhập vào, chi tiết giao diện được mô tả ở Hình 3.10
Hình 3.10 Giao diện chức năng tìm kiếm sản phẩm
Bảng 3.17 Mô tả các thành phần trong giao diện tìm kiếm sản phẩm
STT Loại điều khiển Nội dung thực hiện Giá trị mặc định
1 Textbox Nhập từ khóa cần tìm kiếm
2 Button Thực hiện tìm kiếm
Bảng 3.17 mô tả các thành phần chính trong giao diện tìm kiếm sản phẩm bao gồm tên loại điều khiển, mô tả nội dung thực hiện và giá trị mặc định
Bảng 3.18 Bảng dữ liệu dùng cho chức năng tìm kiếm sản phẩm
Thêm Sửa Xóa Truy vấn
Bảng 3.18 mô tả bảng dữ liệu được dùng khi thực hiện chức năng tìm kiếm sản phẩm bao gồm tên bảng và phương thức thực hiện
Sơ đồ tuần tự chức năng tìm kiếm sản phẩm được mô tả ở Hình 3.11 Đầu tiên sinh viên truy cập vào website và chọn vào ô tìm kiếm ở phần Header Sau đó nhập từ khóa cần tìm vào ô tìm kiếm và ấn vào biểu tượng tìm kiếm Hệ thống sẽ chọn ra những sản phẩm khớp với từ khóa tìm kiếm của sinh viên
Hình 3.11 Sơ đồ tuần tự chức năng tìm kiếm sản phẩm
3.8.3 Chức năng thêm sản phẩm vào giỏ hàng
Giỏ hàng là nơi lưu giữ các sản phẩm mà sinh viên muốn mua, sinh viên có thể thêm các sản phẩm vào giỏ hàng trước khi thanh toán và cũng có thể cập nhật hoặc xóa sản phẩm khỏi giỏ hàng của mình Thực hiện việc thêm sản phẩm vào giỏ hàng, sinh viên không nhất thiết phải đăng nhập, chi tiết giao diện được mô tả ở Hình 3.12
Hình 3.12 Giao diện chức năng thêm sản phẩm vào giỏ hàng
Bảng 3.19 Mô tả các thành phần trong giao diện thêm sản phẩm vào giỏ hàng
STT Loại điều khiển Nội dung thực hiện Giá trị mặc định
1 Textbox Nhập số lượng sản phẩm 1
2 Button Thực hiện thêm sản phẩm vào giỏ hàng
3 Image Hình ảnh sản phẩm
4 Button Thực hiện mua hàng
Bảng 3.19 mô tả các thành phần chính trong giao diện thêm sản phẩm vào giỏ hàng bao gồm tên loại điều khiển, mô tả nội dung thực hiện và giá trị mặc định
Bảng 3.20 Bảng dữ liệu dùng cho chức năng thêm sản phẩm vào giỏ hàng
Thêm Sửa Xóa Truy vấn
Bảng 3.20 mô tả bảng dữ liệu được dùng khi thực hiện chức năng thêm sản phẩm vào giỏ hàng bao gồm tên bảng và phương thức thực hiện
Sơ đồ tuần tự chức năng thêm sản phẩm vào giỏ hàng được mô tả ở Hình 3.13 Đầu tiên sinh viên truy cập vào website và chọn sản phẩm cần thêm vào giỏ và chọn xem chi tiết, lúc này sinh viên có thể thực hiện ngay việc đặt hàng hoặc có thể thêm sản phẩm vào giỏ hàng và thực hiện thanh toán sau, để thêm sản phẩm vào giỏ sinh viên phải nhập vào số lượng sản phẩm cần mua (giá trị mặc định là 1)
Hình 3.13 Sơ đồ tuần tự chức năng thêm sản phẩm vào giỏ hàng
Khi đã đăng nhập vào hệ thống sinh viên có thể thực hiện được chức năng đặt hàng, chức năng này khá tương đồng với chức năng thêm sản phẩm vào giỏ Sinh viên lựa chọn được sản phẩm muốn đặt hàng, chọn vào xem chi tiết thông tin sản phẩm, nhập vào số lượng cần đặt và chọn nút đặt hàng, hệ thống sẽ chuyển đến giao diện chi tiết đơn đặt hàng, sinh viên kiểm tra lại thông tin như: số lượng sản phẩm, thông tin có liên quan đến sản phẩm và xác nhận đặt hàng, chi tiết giao diện được mô tả ở Hình 3.14
Hình 3.14 Giao diện chức năng đặt hàng
Bảng 3.21 Mô tả các thành phần trong giao diện chức năng đặt hàng
STT Loại điều khiển Nội dung thực hiện Giá trị mặc định
1 Textbox Nhập số lượng sản phẩm 1
2 Button Xác nhận đặt hàng
3 Button Hủy quá trình đặt hàng
4 Image Hình ảnh sản phẩm
5 Button Chỉnh sửa địa chỉ nhận hàng
Bảng 3.21 mô tả các thành phần chính trong giao diện chức năng đặt hàng bao gồm tên loại điều khiển, mô tả nội dung thực hiện và giá trị mặc định
Bảng 3.22 Bảng dữ liệu dùng cho chức năng đặt hàng
Thêm Sửa Xóa Truy vấn
Bảng 3.22 mô tả bảng dữ liệu được dùng khi thực hiện chức năng đặt hàng bao gồm tên bảng và phương thức thực hiện
Sơ đồ tuần tự chức năng đặt hàng được mô tả ở Hình 3.15 Sơ đồ tuần tự chức năng đặt hàng Đầu tiên sinh viên đăng nhập vào hệ thống và chọn sản phẩm muốn đặt mua và chọn xem chi tiết, lúc này sinh viên có thể thực hiện ngay việc đặt hàng bằng cách nhập vào số lượng và chọn nút đặt hàng, hệ thống sẽ hiển thị thông tin chi tiết đơn hàng để sinh viên xác nhận lại, khi kiểm tra xong, sinh viên chọn vào nút xác nhận đặt hàng để hoàn tất, chi tiết giao diện được mô tả ở Hình 3.15
Hình 3.15 Sơ đồ tuần tự chức năng đặt hàng
3.8.5 Chức năng hủy đơn đặt hàng
Sau khi đơn hàng đã được đặt, sinh viên có thể thực hiện việc hủy đơn hàng trong thời gian cho phép, để thực hiện chức năng này, sinh viên truy cập vào phần quản lý đơn hàng đã đặt và chọn vào đơn hàng cần hủy Tiếp theo, sinh viên chọn vào nút hủy đơn hàng và xác nhận hủy đơn đặt hàng, chi tiết giao diện được mô tả ở Hình 3.16
Hình 3.16 Giao diện chức năng hủy đơn đặt hàng
Bảng 3.23 Mô tả các thành phần trong giao diện chức năng hủy đơn đặt hàng
STT Loại điều khiển Nội dung thực hiện Giá trị mặc định
1 Button Hủy đơn đặt hàng
2 Button Đóng giao diện xem chi tiết đơn hàng
3 Button Chỉnh sửa đơn đặt hàng
4 Image Hình ảnh sản phẩm
Bảng 3.23 mô tả các thành phần chính trong giao diện hủy đơn đặt hàng bao gồm tên loại điều khiển, mô tả nội dung thực hiện và giá trị mặc định
Bảng 3.24 Bảng dữ liệu dùng cho chức năng hủy đơn đặt hàng
Thêm Sửa Xóa Truy vấn
Bảng 3.24 mô tả bảng dữ liệu được dùng khi thực hiện chức năng hủy đơn đặt hàng bao gồm tên bảng và phương thức thực hiện
Sơ đồ tuần tự chức năng hủy đơn đặt hàng được mô tả ở Hình 3.17 Đầu tiên sinh viên đăng nhập vào hệ thống và vào danh mục đơn hàng đã đặt, sinh viên chọn vào đơn hàng cần hủy, hệ thống sẽ hiển thị thông tin chi tiết đơn hàng Sinh viên chọn và nút hủy đơn hàng và xác nhận để thực hiện hủy đơn đặt hàng Tuy nhiên, sinh viên chỉ có thể hủy đơn đặt hàng trong khi người bán chưa thực hiện giao hàng
Hình 3.17 Sơ đồ tuần tự chức năng hủy đơn đặt hàng
3.8.6 Chức năng từ chối đơn hàng
Sau khi nhận được đơn đặt hàng từ người mua, sinh viên hoặc cửa hàng (người bán) có thể thực hiện việc từ chối đơn đặt hàng vì lý do nào đó, để thực hiện chức năng này, người bán truy cập vào phần quản lý đơn hàng đã nhận và chọn vào đơn hàng cần từ chối Tiếp theo, người bán chọn vào nút từ chối đơn hàng và xác nhận từ chối nhận đơn hàng, chi tiết giao diện được mô tả ở Hình 3.18
Hình 3.18 Giao diện chức năng từ chối nhận đơn hàng
Bảng 3.25 Mô tả các thành phần trong giao diện chức năng từ chối nhận đơn hàng STT Loại điều khiển Nội dung thực hiện Giá trị mặc định
1 Button Từ chối nhận đơn hàng
2 Button Đóng giao diện xem chi tiết đơn hàng
3 Image Hình ảnh sản phẩm
4 Button Chấp nhận đơn hàng
Kết quả thực hiện yêu cầu giao diện
3.9.1 Giao diện trang chủ của ứng dụng với người dùng là sinh viên
Giao diện trang của ứng dụng với người dùng là sinh viên được thể hiện ở Hình 3.42 Bao gồm thông tin sự kiện mua bán đồ cũ, bảng xếp hạng sinh viên có nhiều đóng góp những sản phẩm miễn phí, danh mục sản phẩm và danh sách các sản phẩm được hiển thị theo chủ đề
Hình 3.42 Giao diện trang chủ của ứng dụng với người dùng là sinh viên
3.9.2 Giao diện hiển thị sản phẩm
Giao diện hiển thị sản phẩm được thể hiện chi tiết ở Hình 3.43 Giao diện gồm các chủ đề sản phẩm và danh sách sản phẩm tương ứng Mỗi sản phẩm có các thông tin như hình ảnh đại diện, tên sản phẩm, giá bán sản phẩm, thông tin vận chuyển, người dùng có thể nhấp vào sản phẩm để xem thông tin chi tiết của sản phẩm
Hình 3.43 Giao diện hiển thị sản phẩm
Giao diện giỏ hàng được thể hiện ở hình Hình 3.44, gồm danh sách các sản phẩm người dùng đã thêm vào giỏ hàng và phần thông tin giá tiền người dùng cần thanh toán khi chọn mua các sản phẩm
Hình 3.44 Giao diện giỏ hàng
3.9.4 Giao diện xác nhận thông tin trước khi đặt hàng
Giao diện xác nhận thông tin trước khi đặt hàng được thể hiện ở Hình 3.45 Giao diện bao gồm thông tin địa chỉ nhận hàng của khách hàng, chọn phương thức thanh toán, thông tin sản phẩm và số tiền người dùng cần phải thanh toán đơn hàng
Hình 3.45 Giao diện xác nhận đơn hàng
3.9.5 Giao diện cập nhật thông tin cá nhân
Giao diện cập nhật thông tin cá nhân được thể hiện ở hình Hình 3.46 Giao diện bao gồm các thông tin người dùng cần chỉnh sửa như họ tên, số điện thoại, ảnh đại diện, email, mật khẩu
Hình 3.46 Giao diện cập nhật thông tin cá nhân
3.9.6 Giao diện thanh toán online
Giao diện thanh toán online được thể hiện ở hình Hình 3.47 Giao diện bao gồm mã đơn hàng, số tiền cần thanh toán Các thông tin người thanh toán như số thẻ, tên chủ thẻ, mã phát hành thẻ, sau đó sẽ nhập mã OTP để hoàn tất thanh toán
Hình 3.47 Giao diện thanh toán trực tuyến
3.9.7 Giao diện trang chủ của quản trị viên
Giao diện trang chủ của quản trị viên được thể hiện ở hình Hình 3.48 Bao gồm các danh mục quản lý như tài khoản, danh mục sản phẩm, sự kiện, đơn khiếu nại
Hình 3.48 Giao diện trang chủ của quản trị viên
3.9.8 Giao diện quản lý danh mục sản phẩm
Giao diện quản lý danh mục sản phẩm được thể hiện ở Hình 3.49 Giao diện bao gồm danh sách các danh mục có các thông tin như tên danh mục, danh mục phụ thuộc và các chức năng tùy chọn như chỉnh sửa và xóa danh mục
Hình 3.49 Giao diện quản lý danh mục sản phẩm
KIỂM THỬ VÀ ĐÁNH GIÁ
Kiểm thử
Kiểm thử “Website kinh doanh đồ cũ cho sinh viên” nhằm mục đích đánh giá lại tính chính xác của từng chức năng trong website và mức độ hoàn thiện của phần mềm khi hoàn thành, bên cạnh đó việc kiểm thử cũng nhằm mục đích phát hiện các lỗi trong chương trình, các lỗi phát sinh trong quá trình hoạt động để có biện pháp, kế hoạch ngăn chặn kịp thời, góp phần đảm bảo website được đưa vào hoạt động chính xác nhất, kiểm thử bao gồm các mục tiêu sau:
Nhằm để xác định các lỗi xảy ra trong hệ thống Đảm bảo các tính năng của hệ thống được thực hiện tốt và đúng theo các yêu cầu của người sử dụng
Nhằm để đảm bảo tính hoàn thiện của website trước khi báo cáo hội đồng nhằm để xác minh lại và thẩm định các hoạt động đang diễn ra theo đúng các yêu cầu đặt ra
Phát hiện các lỗi, những rủi ro trong quá trình thực hiện kiểm thử để khắc phục và sửa chữa kịp thời
Trải nghiệm lại các tính năng của website, cung cấp cái nhìn tổng quan và toàn diện hơn.
Phạm vi kiểm thử
Những trường hợp kiểm thử sẽ tương ứng với các chức năng được mô tả trong tài liệu Kịch bản kiểm thử sẽ kiểm thử bao gồm các chức năng sau:
Chức năng thêm danh mục sản phẩm
Chức năng tìm kiếm sản phẩm
Chức năng thêm sản phẩm vào giỏ hàng
Chức năng cập nhật tình trạng đơn hàng
Chức năng đăng bán sản phẩm
Chức năng xóa sản phẩm
Chức năng tạo sự kiện mua bán đồ cũ
Chức năng tìm kiếm sản phẩm tương tự
Chức năng cập nhật thông tin cá nhân
Chức năng lọc sản phẩm.
Nội dung kiểm thử
Trước khi bắt đầu kiểm thử, cần tìm hiểu kỹ và nắm rõ cơ cấu hoạt động của website, thực thi chạy thử nghiệm website trước khi đưa vào kiểm thử và đảm bảo nhận đầy đủ kết quả và không bỏ sót chức năng nào trong quá trình kiểm thử
Hoàn thành tất cả các chức năng đã được định nghĩa qua nhiều lần kiểm thử
Hệ thống chạy ổn định trong kiểm nghiệm giả định thực tế, trên nhiều máy tính khác nhau với nhiều người truy cập cùng lúc
Tiêu chí kiểm thử thành công đặt ra là hệ thống có 95% các chức năng (Test case) vượt qua quá trình kiểm thử mà không xảy ra lỗi hoặc được sửa lỗi thành công (Mức độ hoàn thành của Test Case cao)
Dự kiến kiểm thử 2 lần với 5% các Test Case có thể thất bại nhưng ở mức độ ưu tiên thấp và sẽ được sửa lỗi trong thời gian còn lại của kiểm thử
Tỷ lệ chạy được (Run) của phần mềm bắt buộc là 100% trừ khi có lý do rõ ràng được đưa ra
Mục tiêu là đạt được tỷ lệ chạy cao trong quá trình kiểm thử toàn bộ chức năng của phần mềm
4.3.3 Tiêu chí đình chỉ và yêu cầu đánh giá lại
Nếu trong quá trình kiểm thử có 45% trường hợp kiểm thử không thành công thì quá trình kiểm thử sẽ được tạm dừng cho đến khi phần mềm khắc phục được tất cả các trường hợp không thành công thì quá trình kiểm thử sẽ được tiếp tục
Quá trình kiểm thử sẽ được dừng lại khi hầu hết các mục tiêu sau đây được hoàn thành:
Tất cả các trường hợp kiểm thử được thực hiện ít nhật một lần
Xác định mức độ hoàn thiện của tất cả các Test Case
Xác định số lỗi có đạt được như dự kiến không
Tất cả các Fault đều được kiểm tra và khắc phục
Cạn kiệt ngân sách dự đoán
Thời gian cho kiểm thử đã hết
Các tài liệu kiểm thử được xem xét và lưu hành.
Kịch bản kiểm thử
Bảng 4.1 Kịch bản kiểm thử cho website kinh doanh đồ cũ cho sinh viên
Tên dự án Xây dựng website kinh doanh đồ cũ cho sinh viên tích hợp chức năng gợi ý
Người kiểm thử Huỳnh Thanh Thảo B1906570
Test scenario ID Vị trí trong tài liệu Mô tả
TS01 Chức năng UC01 Kiểm tra người dùng có đăng nhập vào hệ thống được hay không?
TS02 Chức năng UC04 Kiểm tra người dùng có thể thêm danh mục được hay không?
TS03 Chức năng UC09 Kiểm tra người dùng có thực hiện chức năng tìm kiếm sản phẩm được hay không?
TS04 Chức năng UC10 Kiểm tra người dùng có thể thêm sản phẩm vào giỏ hàng được hay không?
TS05 Chức năng UC12 Kiểm tra người dùng có thể cập nhật tình trạng đơn hàng được hay không?
TS06 Chức năng UC14 Kiểm tra người dùng có thể thực hiện chức năng đặt hàng được hay không?
TS07 Chức năng UC16 Kiểm tra người dùng có thể đăng bán sản phẩm được hay không?
TS08 Chức năng UC17 Kiểm tra người dùng có thể xóa sản phẩm của mình được hay không?
TS09 Chức năng UC19 Kiểm tra người dùng có thể cập nhật thông tin cá nhân được hay không?
TS10 Chức năng UC23 Kiểm tra quản trị viên có thể tạo sự kiện bán đồ cũ được hay không?
Kiểm tra người dùng có thể thực hiện chức năng tìm kiếm sản phẩm tương tự được hay không?
TS12 Chức năng UC27 Kiểm tra người dùng có thể thực hiện chức năng lọc sản phẩm được hay không?
Bảng 4.1 thể hiện kịch bản kiểm thử cho website kinh doanh đồ cũ cho sinh viên, bao gồm các thông tin chính như người kiểm thử, ngày kiểm thử, mã kịch bản kiểm thử, vị trí chức năng mô tả trong tài liệu và mục đích kiểm thử.
Các trường hợp kiểm thử
Hình 4.1 mô tả các trường hợp kiểm thử cho chức năng đăng nhập của “Website kinh doanh đồ cũ cho sinh viên” bao gồm 6 test case và tất cả kết quả kiểm thử điều cho ra kết quả thực tế giống với kết quả mong đợi, hệ thống không có lỗi phát sinh
Hình 4.1 Kiểm thử chức năng đăng nhập
4.5.2 Chức năng thêm danh mục sản phẩm
Hình 4.2 mô tả các trường hợp kiểm thử cho chức năng thêm danh mục sản phẩm của “Website kinh doanh đồ cũ cho sinh viên”, chức năng này dành cho người dùng là quản trị viên và bao gồm 2 test case và tất cả kết quả kiểm thử điều cho ra kết quả thực tế giống với kết quả mong đợi, hệ thống không có lỗi phát sinh
Hình 4.2 Kiểm thử chức năng thêm danh mục sản phẩm
4.5.3 Chức năng tìm kiếm sản phẩm
Hình 4.3 mô tả các trường hợp kiểm thử cho chức năng tìm kiếm sản phẩm của “Website kinh doanh đồ cũ cho sinh viên”, chức năng này dành cho tài khoản sinh viên hoặc những người dùng chưa có tài khoản đăng nhập bao gồm 2 test case và tất cả kết quả kiểm thử điều cho ra kết quả thực tế giống với kết quả mong đợi, hệ thống không có lỗi phát sinh
Hình 4.3 Kiểm thử chức năng tìm kiếm sản phẩm
4.5.4 Chức năng thêm sản phẩm vào giỏ hàng
Hình 4.4 mô tả các trường hợp kiểm thử cho chức năng thêm sản phẩm vào giỏ hàng của “Website kinh doanh đồ cũ cho sinh viên”, bao gồm 4 test case và tất cả kết quả kiểm thử điều cho ra kết quả thực tế giống với kết quả mong đợi, hệ thống không có lỗi phát sinh
Hình 4.4 Kiểm thử chức năng thêm sản phẩm vào giỏ hàng
4.5.5 Chức năng cập nhật tình trạng đơn hàng
Hình 4.5 mô tả các trường hợp kiểm thử cho chức năng cập nhật tình trạng đơn hàng của “Website kinh doanh đồ cũ cho sinh viên”, bao gồm 5 test case và tất cả kết quả kiểm thử điều cho ra kết quả thực tế giống với kết quả mong đợi, hệ thống không có lỗi phát sinh
Hình 4.5 Kiểm thử chức năng cập nhật tình trạng đơn hàng
Hình 4.6 mô tả các trường hợp kiểm thử cho chức năng đặt hàng của “Website kinh doanh đồ cũ cho sinh viên”, bao gồm 4 test case và tất cả kết quả kiểm thử điều cho ra kết quả thực tế giống với kết quả mong đợi, hệ thống không có lỗi phát sinh
Hình 4.6 Kiểm thử chức năng đặt hàng
4.5.7 Chức năng đăng bán sản phẩm
Hình 4.7 và Hình 4.8 mô tả các trường hợp kiểm thử cho chức năng đăng bán sản phẩm của “Website kinh doanh đồ cũ cho sinh viên”, bao gồm 5 test case và tất cả kết quả kiểm thử điều cho ra kết quả thực tế giống với kết quả mong đợi, hệ thống không có lỗi phát sinh
Hình 4.7 Kiểm thử chức năng đăng bán sản phẩm (1)
Hình 4.8 Kiểm thử chức năng đăng bán sản phẩm (2)
4.5.8 Chức năng xóa sản phẩm
Hình 4.9 mô tả các trường hợp kiểm thử cho chức năng xóa sản phẩm của “Website kinh doanh đồ cũ cho sinh viên”, bao gồm 1 test case và cho ra kết quả thực tế giống với kết quả mong đợi, hệ thống không có lỗi phát sinh
4.5.9 Chức năng cập nhật thông tin cá nhân
Hình 4.10 mô tả các trường hợp kiểm thử cho chức năng cập nhật thông tin cá nhân của “Website kinh doanh đồ cũ cho sinh viên”, bao gồm 4 test case và tất cả kết quả kiểm thử điều cho ra kết quả thực tế giống với kết quả mong đợi, hệ thống không có lỗi phát sinh
Hình 4.10 Kiểm thử chức năng cập nhật thông tin cá nhân
4.5.10 Chức năng tạo sự kiện mua bán đồ cũ
Hình 4.11 và Hình 4.12 mô tả các trường hợp kiểm thử cho chức năng tạo sự kiện mua bán đồ cũ của “Website kinh doanh đồ cũ cho sinh viên”, bao gồm 4 test case và tất cả kết quả kiểm thử điều cho ra kết quả thực tế giống với kết quả mong đợi, hệ thống không có lỗi phát sinh
Hình 4.11 Kiểm thử chức năng tạo sự kiện mua bán đồ cũ (1)
Hình 4.12 Kiểm thử chức năng tạo sự kiện mua bán đồ cũ (2)
4.5.11 Chức năng tìm kiếm sản phẩm tương tự
Hình 4.13 mô tả các trường hợp kiểm thử cho chức năng tìm kiếm sản phẩm tương tự của “Website kinh doanh đồ cũ cho sinh viên”, bao gồm 1 test case và tất cả kết quả kiểm thử điều cho ra kết quả thực tế giống với kết quả mong đợi, hệ thống không có lỗi phát sinh
Hình 4.13 Kiểm thử chức năng tìm kiếm sản phẩm tương tự
4.5.12 Chức năng lọc sản phẩm
Hình 4.14 mô tả các trường hợp kiểm thử cho chức năng lọc sản phẩm của “Website kinh doanh đồ cũ cho sinh viên”, bao gồm 5 test case và tất cả kết quả kiểm thử điều cho ra kết quả thực tế giống với kết quả mong đợi, hệ thống không có lỗi phát sinh
Hình 4.14 Kiểm thử chức năng lọc sản phẩm
Kiểm thử được thực hiện trên 12 kịch bản kiểm thử với 44 trường hợp kiểm thử thành công là 44/44 và lần kiểm thử thất bại là 0/44, từ đó cho thấy hệ thống sau khi đã trãi qua các trường hợp kiểm thử đều thành công Từ kết quả này ta có thể đánh giá hệ thống hoạt động ổn định, không xảy ra lỗi trong quá trình kiểm thử
PHẦN KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
Kết quả đạt được
Giúp bản thân hiểu thêm về quy trình, cách vận hành thực tế của một hệ thống thương mại điện tử, biết thêm về thư viện ReactJS cũng như cách sử dụng mô hình MVC Giúp bản thân biết thêm được một số thư viện hỗ trợ thiết kế giao diện như Tailwind, HTML, CSS Ngoài ra, trong khi xây dựng website, giúp em biết thêm về hệ thống gợi ý, cách áp dụng vào website thương mại điện tử và cách sử dụng một số thư viện hỗ trợ cho việc tìm kiếm và máy học
Có khả năng phân tích, thiết kế, lập trình với ReactJS Sử dụng tốt các công cụ hỗ trợ cho việc phác thảo và lập trình Hiểu được phương pháp kiểm thử phần mềm, có thể áp dụng vào dự án
Nâng cao kinh nghiệm lập trình, tư duy sáng tạo, khả năng phân tích và giải quyết vấn đề, phân tích hệ thống, tìm hiểu và học hỏi thêm các công nghệ mới
Về cơ bản “Website kinh doanh đồ cũ cho sinh viên” được xây dựng tương đối hoàn chỉnh, hoàn thành tốt các yêu cầu đặt ra, xây dựng được đầy đủ chức năng cho từng người dùng khác nhau
Xây dựng website với giao diện thân thiện, dễ sử giúp khách hàng có thể dễ dàng theo dõi và mua sắm và có trải nghiệm tốt nhất khi sử dụng website
Hệ thống cũng được tích hợp thanh toán trực tuyến [6] , giúp cho việc mua hàng trở nên nhanh chóng và thuận tiện hơn Đặc biệt website còn được tích hợp hệ thống gợi ý giúp người dùng có thể tìm kiếm và khám phá sản phẩm một cách dễ dàng và nhanh chóng
Giao diện website trên thiết bị di động chưa được tối ưu
Chức năng hỗ trợ phân biệt giấy tờ chứng minh nguồn gốc sản phẩm hợp lệ và xuất xứ sản phẩm chưa hoàn thiện, thông tin về giấy tờ nguồn gốc chỉ để giúp người dùng tham khảo
1.4 Khả năng ứng dụng thực tiễn
Nhìn chung, “Website kinh doanh đồ cũ cho sinh viên” đã được xây dựng thành công đáp ứng được các chức năng của website thương mại điện tử, ngoài ra website còn có giao diện khá bắt mắt, trực quan giúp khách hàng dễ dàng chọn mua sản phẩm Vì vậy, website đã có thể được triển khai sử dụng để kinh doanh sản phẩm giày, dép ngoài thực tế cho các cửa hàng.
Hướng phát triển
Hoàn thiện chức năng nhận biết giấy tờ nguồn gốc xuất xứ sản phẩm hợp lệ
Xây dựng thêm các chức năng cho bên phía quản trị viên để họ có thể hỗ trợ tốt hơn việc quản lý website cũng như cửa hàng kinh doanh
Phát triển hệ thống trên nền tảng Android và IOS, người dùng không cần truy cập vào website, mà chỉ cần truy cập vào ứng dụng di động, giúp người dùng dễ dàng mua sắm mọi lúc mọi nơi
Phát triển thêm tính năng trò chuyện trực tuyến để người dùng có thể dễ dàng liên hệ, trao đổi với nhau.
PHẦN PHỤ LỤC PHỤ LỤC A: Hướng dẫn cài đặt Xampp
XAMPP là một bản phân phối của Apache, MySQL, PHP và Perl Nó giúp bạn dễ dàng cài đặt và cấu hình môi trường máy chủ web trên máy tính của mình Sau đây là hướng dẫn cài đặt và sử dụng XAMPP trên Windows:
Tải xuống XAMPP: Bạn có thể tải xuống phiên bản XAMPP mới nhất tại địa chỉ https://www.apachefriends.org/download.html
Cài đặt XAMPP: Sau khi tải xuống, bạn chạy tệp cài đặt và làm theo hướng dẫn trên màn hình để cài đặt XAMPP Trong quá trình cài đặt, bạn có thể chọn các thành phần mà bạn muốn cài đặt (ví dụ: Apache, MySQL, PHP, phpMyAdmin)
Khởi động XAMPP: Sau khi cài đặt, bạn mở XAMPP Control Panel bằng cách nhấp đúp vào biểu tượng XAMPP trên màn hình hoặc bằng cách tìm kiếm "XAMPP Control Panel" trên menu Start Bạn sau đó khởi động các thành phần mà bạn đã cài đặt bằng cách nhấp vào nút "Start" bên cạnh từng thành phần
Hình A.1 Giao diện của Xampp
Quản lý MySQL: XAMPP cũng cung cấp giao diện web cho MySQL thông qua phpMyAdmin Bạn có thể truy cập phpMyAdmin bằng cách mở trình duyệt và nhập địa chỉ
"http://localhost/phpmyadmin" Tại đây, bạn có thể quản lý cơ sở dữ liệu của mình, tạo bảng và thực hiện các thao tác khác trên dữ liệu
Hình A.2 Giao diện của Xampp
PHỤ LỤC B: Hướng dẫn cài đặt ứng dụng
1 Cài đặt Git: Nếu bạn chưa cài đặt Git, bạn có thể tải xuống và cài đặt Git theo hướng dẫn tại địa chỉ https://git-scm.com/downloads
2 Clone repository: Bạn cần clone repository từ GitHub Để làm điều này, hãy mở trình dòng lệnh và nhập lệnh: git clone https://github.com/huynhthanhthao/shand-ecommerce
3 Sau khi clone repository thành công Tiếp theo, ta cài đặt các phụ thuộc bằng lệnh: npm i
4 Cuối cùng ta cd vào cả 2 thư mục frontend và backend để khởi chạy ứng dụng bằng lệnh: npm start