Nắm bắt được nhu cầu đó với việc chọn và thực hiện đề tài “Xây dựng Website bán quà lưu niệm sử dụng công nghệ Vuejs và Laravel”, với mong muốn xây dựng một Website nhằm đáp ứng các nhu
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Phân tích nghiệp vụ và hệ thống
2.1.1 Đặc tả Actor Khách hàng
Website thương mại điện tử cung cấp nhiều chức năng hữu ích cho khách hàng, mang đến sự thuận tiện khi mua sắm như: cập nhật tin tức, xem thông tin chi tiết sản phẩm, tìm kiếm sản phẩm theo nhu cầu, thêm sản phẩm vào giỏ hàng, điều chỉnh giỏ hàng, đặt hàng và hỗ trợ trò chuyện trực tuyến với nhân viên tư vấn.
2.1.2 Đặc tả Actor Quản trị viên
Người quản trị Website đăng nhập vào hệ thống nhằm mục đích điều hành quản lí và theo dõi mọi hoạt động của hệ thống quản lý thông tin, có toàn quyền sử dụng cấu hình và xem xóa sửa cơ sở dữ liệu, xem các chi tiết đơn hàng, quản lý danh mục, quản lý sản phẩm, quản lý bài viết, …
Biểu đồ luồng dữ liệu
2.2.1 Biểu đồ luồng dữ liệu mức khung cảnh
Hình 5 Biểu đồ luồng dữ liệu mức khung cảnh
2.2.2 Biểu đồ luồng dữ liệu mức đỉnh
Hình 6 Biểu đồ luồng dữ liệu mức đỉnh
2.2.3 Biểu đồ luồng dữ liệu mức dưới đỉnh
2.2.3.1 Chức năng quản lý bán hàng
Hình 7 Biểu đồ luồng dữ liệu mức dưới đỉnh chức năng quản lý bán hàng
2.2.3.2 Chức năng quản lý user
Hình 8 Biểu đồ luồng dữ liệu mức dưới đỉnh chức năng quản lý user
2.2.3.3 Chức năng quản lý sản phẩm
Hình 9 Biểu đồ luồng dữ liệu mức dưới đỉnh chức năng quản lý sản phẩm
Biểu đồ phân rã chức năng
Hình 10 Biểu đồ phân rã chức năng hệ thống
- Xem tin tức, bài viết
- Tìm kiếm, lọc sản phẩm
+ Thêm sản phẩm vào giỏ hàng
+ Xóa sản phẩm khỏi giỏ hang
- Đăng nhập vào hệ thống
- Quản lý danh mục sản phẩm
+ Tìm kiếm danh mục sản phẩm
+ Thêm danh mục sản phẩm
+ Sửa danh mục sản phẩm
+ Xóa danh mục sản phẩm
- Quản lý bài viết, tin tức
+ Tìm kiếm bài viết, tin tức
+ Thêm bài viết, tin tức
+ Sửa bài viết, tin tức
+ Xóa bài viết, tin tức
Biểu đồ Use Case và mô tả kịch bản ca sử dụng
Hình 11 Biểu đồ Use Case
2.4.2 Mô tả kịch bản ca sử dụng
2.4.2.1.1 Mô tả kịch bản xem sản phẩm
Bảng 2 Mô tả kịch bản xem sản phẩm
- Người dùng chọn vào hình ảnh hay thông tin, giá, tên sản phẩm tại giao diện trang chủ hoặc trang danh sách sản phẩm
- Hệ thống sẽ lấy thông tin sản phẩm và chuyển hướng người dùng đến 1 trang mới hiển thị chi tiết thông tin sản phẩm
Kết quả Hiển thị chi tiết mô tả sản phẩm
2.4.2.1.2 Mô tả kịch bản tìm kiếm sản phẩm
Bảng 3 Mô tả kịch tìm kiếm sản phẩm
- Người dùng chọn chức năng tìm kiếm trên giao diện
- Hệ thống hiển thị 1 text box để nguời dùng nhập từ khóa tìm kiếm
- Người dùng nhập từ khóa tìm kiếm và bấm nút tìm kiếm
- Hệ thống sẽ kiểm tra trong hệ thống với từ khóa giống hoặc gần giống để trả về danh sách kết quả các sản phẩm, nếu không có sản phẩm nào trùng với từ khóa tìm kiếm thì thực hiện luồng sự kiện phụ 1
- Sự kiện 1: thông báo không tìm thấy sản phầm nào phù hợp với kết quả
Kết quả Danh sách sản phẩm người dùng muốn tìm kiếm
2.4.2.1.3 Mô tả kịch bản xem bài viết tin tức
Bảng 4 Mô tả kịch bản xem bài viết tin tức
- Người dùng click chọn vào tiêu đề hoặc hình ảnh bài viết trong trang danh sách bài viết
- Hệ thống sẽ lấy thống tin trả về và chuyển hướng đến trang chi tiết bài viết
- Người dùng xem tin tức từ kết quả trả về Kết quả Chi tiết của bài viết, tin tức
2.4.2.1.4 Mô tả kịch bản thêm/cập nhật sản phẩm trong giỏ hàng
Bảng 5 Mô tả kịch bản thêm/cập nhật sản phẩm trong giỏ hàng
- Người dùng click vào nút Thêm vào giỏ hàng khi đang xem sản phẩm để thêm sản phẩm vào giỏ hàng
- Hệ thống sẽ đưa ra thông báo Thêm giỏ hàng thành công
Người dùng có thể dễ dàng cập nhật số lượng sản phẩm hoặc xóa sản phẩm đơn giản bằng cách bấm vào biểu tượng giỏ hàng trên thanh header trang chủ Sau đó, hệ thống sẽ tự động chuyển đến trang giỏ hàng, nơi người dùng có thể thực hiện các thay đổi và tùy chỉnh giỏ hàng của mình.
Kết quả Sản phẩm đã được thêm/cập nhật trong giỏ hàng
2.4.2.2.1 Mô tả kịch bản quản lý danh mục
Bảng 6 Mô tả kịch bản quản lý danh mục
Tác nhân Quản trị viên Điều kiện Đăng nhập vào hệ thống quản trị
Luồng sự kiện chính Luồng sự kiện chính:
+ Quản trị viên nhập thông tin danh mục ở form thêm bài viết
+ Hệ thống kiểm tra tính hợp lệ của thông tin nhập vào nếu các thông nhập vào đã đúng với định dạng yêu cầu thì thêm mới vào database
+ Nếu thông tin nhập vào không hợp lệ thì chuyển hướng đến luồng sự kiện phụ 1
+ Quản trị viên tiến hành cập nhật lại dữ liệu cho đúng với định dạng yêu cầu, hệ thống sẽ kiểm tra tính hợp lệ của thông tin nhập vào, nếu thông tin đúng định dạng thì tiến hành cập nhật, nếu thông tin nhập vào không đúng định dạng thì chuyển hướng đến luồng sự kiện phụ 1
+ Quản trị click chọn danh mục muốn xóa
+ Hệ thống thông báo có chắc chắn muốn xóa hay không, nếu có thì sẽ tiến hành xóa danh mục, nếu không thì chuyển hướng đến luồng sự kiện phụ 2
- Sự kiện 1: Thông báo thông tin nhập vào không hợp lệ và yêu cầu nhập lại
- Sự kiện 2: Quay trở lại trang hiện tại
Kết quả Hệ thống thông báo thành công hoặc báo lỗi
2.4.2.2.2 Mô tả kịch bản quản lý sản phẩm
Bảng 7 Mô tả kịch bản quản lý sản phẩm
Tác nhân Quản trị viên Điều kiện Đăng nhập vào hệ thống quản trị
Luồng sự kiện chính Luồng sự kiện chính:
+ Quản trị viên nhập thông tin sản phẩm ở form thêm sản phẩm
+ Hệ thống kiểm tra tính hợp lệ của thông tin nhập vào, nếu thông tin nhập đúng định dạng
31 thì tiến hành thêm mới vào database, nếu thông tin không đúng định dạng thì chuyển hướng đến luồng sự kiện phụ 1
+ Quản trị viên tiến hành cập nhật thông tin sản phẩm, hệ thống sẽ kiểm tra tính hợp lệ của thông tin nhập vào, nếu thông tin đúng định dạng thì tiến hành cập nhật, ngược lại sẽ chuyển hướng đến luồng sự kiện phụ 1
+ Quản trị click chọn sản phẩm muốn xóa, hệ thống thông báo có chắc chắn xóa không, nếu có thì tiến hành xóa sản phẩm, nếu không thì chuyển hướng đến luồng sự kiện phụ 2 Luồng sự kiện phụ:
- Sự kiện phụ 1: Thông báo thông tin nhập vào không hợp lệ và yêu cầu nhập lại
- Sự kiện phụ 2: Quay trở lại trang hiện tại
Kết quả Hệ thống thông báo thành công hoặc báo lỗi
2.4.2.2.3 Mô tả kịch bản quản lý đơn hàng
Bảng 8 Mô tả kịch bản quản lý đơn hàng
Tác nhân Quản trị viên Điều kiện Đăng nhập vào hệ thống quản trị
Luồng sự kiện chính Luồng sự kiện chính:
- Quản trị viên xem danh sách các đơn hàng
- Quản trị viên cập nhật trạng thái đơn hàng
+ Đơn hàng đang xử lý sẽ được phép cập nhật trạng thái lên thành công hoặc hủy
+ Đơn hàng thành công không được cập nhật trạng thái
Kết quả Hệ thống thông báo thành công hoặc báo lỗi
2.4.2.2.6 Mô tả kịch bản quản lý người dùng
Bảng 9 Mô tả kịch bản quản lý người dùng
Tác nhân Quản trị viên Điều kiện Đăng nhập vào hệ thống quản trị
Luồng sự kiện chính Luồng sự kiện chính:
+ Quản trị viên nhập thông tin người dùng
+ Quản trị viên tiến hành sửa đổi thông tin của mã giảm giá tại form cập nhật người dùng
+ Cập nhật sửa đổi người dùng
+ Chọn người dùng muốn xóa
+ Xóa người dùng Kết quả Hệ thống thông báo thành công hoặc báo lỗi
Biểu đồ tuần tự
Hình 12 Biểu đồ tuần tự xem sản phẩm
Hình 13 Biểu đồ tuần tìm kiếm sản phẩm
Hình 14 Biểu đồ tuần thêm giỏ hàng
Hình 15 Biểu đồ tuần tự xóa giỏ hàng
Hình 16 Biểu đồ tuần tự đăng nhập admin
Hình 17 Biểu đồ tuần tự duyệt đơn hàng
Phân tích cơ sở dữ liệu
2.6.1 Cấu trúc bảng cơ sở dữ liệu
Tên trường Kiểu dữ liệu Mô tả id Integer Khóa chính name String Tiêu đề
Created_at Datetime Thời điểm tạo danh mục
Updated_at Datetime Thời điểm cập nhật lần cuối
Tên trường Kiểu dữ liệu Mô tả id Integer Khóa chính name String Tiêu đề sản phẩm description Text Mô tả sản phẩm price Integer Giá sản phẩm images String Url ảnh của sản phẩm type Enum Loại sản phẩm (hot trend, nổi bật, bán chạy) category_id Integer Khóa ngoại (danh mục)
Created_at Datetime Thời điểm tạo ảnh sản phẩm
Updated_at Datetime Thời điểm cập nhật lần cuối
Tên trường Kiểu dữ liệu Mô tả id Integer Khóa chính fullname String Tên khách hàng total Integer Tổng giá trị đơn hàng note Text Ghi chú cho đơn hàng
38 status Enum Trạng thái của đơn hàng paid_method Enum Phương thức thanh toán phone String Số điện thoại của khách hàng email String Email của khách hàng address Text Địa chỉ nhận hàng
Created_at Datetime Thời điểm tạo ảnh sản phẩm Updated_at Datetime Thời điểm cập nhật lần cuối
2.6.1.10 Bảng chi tiết đơn hàng
Bảng 13 Bảng chi tiết đơn hàng
Tên trường Kiểu dữ liệu Mô tả id Integer Khóa chính
Product_id Integer Khóa ngoại (sản phẩm) cnt Integer Số lượng sản phẩm
Oder_id Integer Khóa ngoại (Đơn hàng)
Created_at Datetime Thời điểm tạo ảnh sản phẩm Updated_at Datetime Thời điểm cập nhật lần cuối
Tên trường Kiểu dữ liệu Mô tả id Integer Khóa chính password String Mật khẩu username String Tên đăng nhập fullname String Họ và tên
Created_at Datetime Thời điểm tạo
Updated_at Datetime Thời điểm cập nhật lần cuối
Token Text Mã token đăng nhập
2.6.3.1 Xác định các thực thể và các quan hệ giữa các thực thể
2.6.3.2 Mối quan hệ giữa các thực thể
2.6.3.2.1 Mối quan hệ has (có)
− Thực thể tham gia category (danh mục sản phẩm) và product (sản phẩm)
Một danh mục sản phẩm thì có thể có nhiều sản phẩm (quan hệ một - nhiều)
− Thực thể tham gia category_post (danh mục bài viết) và post (bài viết) Một danh mục bài viết thì có thể có nhiều bài viết (quan hệ một - nhiều)
2.6.3.2.2 Mối quan hệ contains (thuộc, chứa đựng, bao gồm)
- Thực thể tham gia product (sản phẩm) và order (đơn hàng)
Một sản phẩm thì thuộc nhiều đơn hàng, một đơn hàng có nhiều sản phẩm (quan hệ nhiều – nhiều)
THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG KIỂM THỬ VÀ ĐÁNH GIÁ
Trang người dùng
Giao diện trang chủ website bao gồm các banner quảng cáo, thanh tìm kiếm sản phẩm và giỏ hàng, trong đó giỏ hàng yêu thích hiển thị danh sách sản phẩm nổi bật và bán chạy nhất Ngoài ra, trang chủ còn có tính năng theo dõi đơn hàng, giúp khách hàng tiện lợi theo dõi quá trình mua sắm của mình.
Tại đây người dùng có thể xem các sản phẩm nổi bật của cửa hàng, sản phẩm bán chạy, xem chi tiết của sản phẩm, xem bài viết, tin tức liên quan đến công nghệ cũng như là đặt hàng
Trong giao diện người dùng, trang chủ
Hình 21 Sản phẩm nổi bật
Hiển thị các sản nổi bật của cửa hàng, các sản phẩm này sẽ có số lượt xem nhiều nhất được sắp xếp từ cao xuống thấp
Trong giao diện người dùng, trang chủ của Website
Hình 22 Sản phẩm bán chạy
Hiển thị các sản phẩm bán chạy của cửa hàng, dựa theo tiêu chí sản phẩm nào có số lượng đã bán nhiều nhất Người dùng có thể tham khảo ở danh sách này để tìm mua một sản phẩm phù hợp cho bản thân
Trong giao diện người dùng, trang chủ của Website
Hình 23 Sản phẩm theo từng danh mục
Hiển thị danh sách các sản phẩm theo từng danh mục Tại đây người dùng có thể đặt hàng, mua ngay và cũng có thể lọc theo các tiêu chí Mới nhất, Cũ nhất, Giá tăng dần hay Giá giảm dần, hệ thống sẽ không cần phải tải lại trang mỗi lần thực thi chức năng, tạo cảm giác mượt mà, thoải mái cho người dùng
Trong giao diện người dùng, trang Sản phẩm
Khi khách hàng tương tác với danh mục bên thanh trượt hoặc chọn các tùy chọn sắp xếp như Mới nhất, Cũ nhất, Giá tăng dần hoặc Giá giảm dần, hệ thống sẽ tổng hợp và hiển thị danh sách sản phẩm phù hợp với tiêu chí lọc do người dùng lựa chọn.
Chức năng này cho phép người dùng xem và quản lý các sản phẩm đã thêm vào giỏ hàng
Trong giao diện người dùng, trang giỏ hàng Các thông tin hiển thị bao gồm tên sản phẩm, ảnh sản phẩm, đơn giá, số lượng, thành tiền và phân loại sản phẩm (nếu có)
Chức năng này cho phép người dùng có thể quản lý danh sách, số lượng, phân loại sản phẩm trong giỏ hàng Nếu khách hàng có nhu cầu đặt hàng thì có thể click vào nút Đặt hàng
Hình 25 Phương thức thanh toán
Chức năng này cho phép người dùng có thể chọn phương thức thanh toán, nhập địa chỉ nhận hàn, ghi chú cho cửa hàng và tiến hành đặt hàng Thông tin của đơn hàng sẽ được gửi lên hệ thống
Trong giao diện người dùng, trang Tạo đơn hàng
Sau khi người dùng điền đầy đủ thông tin và bấm đặt hàng, thông tin của đơn hàng sẽ được gửi lên hệ thống và người dùng sẽ nhận được thông báo Đặt hàng thành công và hệ thống sẽ chuyển hướng đến trang theo dõi đơn hàng trong Trang cá nhân
Chức năng này cho phép người dùng có thể để lại lời nhắn cho cửa hàng
Trong giao diện người dùng, trang Liên hệ
Sau khi người dùng điền đầy đủ thông tin và bấm Liên hệ, hệ thống sẽ gửi lời nhắn thông báo cho cửa hàng Sau đó các nhân viên sẽ chủ động liên hệ tới khách hàng thông qua thông tin liên hệ đã nhập bên trên
Trang quản trị
Hình 27 Đăng nhập trang quản trị
Chức năng này cho phép người quản trị Website đăng nhập vào hệ thống
Trong giao diện quản trị, trang đăng nhập
Sau khi người dùng điền đầy đủ và chính xác thông tin về tài khoản quản trị sẽ tiến hành đăng nhập vào hệ thống
Hình 28 Bảng điều khiển trang quản trị
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên
Trang này cho phép người dùng xem thống kê số lượng của các module cần quản lý trong hệ thống
Trong giao diện quản trị, trang chủ quản trị
Hình 29 Quản lý sản phẩm
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên
Trang này cho phép người dùng xem và quản lý các thông tin về sản phẩm
Trong giao diện quản trị, trang sản phẩm
Người dùng có thể thực hiện các thao tác như cập nhật trạng thái sản phẩm, xóa nhiều sản phẩm cùng lúc và tìm kiếm sản phẩm bằng từ khóa.
Hình 30 Quản lý thêm sản phẩm
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên
Trang này cho phép người dùng thêm sản phẩm mới
Trong giao diện quản trị, trang sản phẩm
Khi người dùng click vào nút Thêm mới, hệ thống sẽ mở popup Thêm sản phẩm Sau đó người dùng tiến hành điền đầy đủ thông tin về sản phẩm, ảnh sản phẩm và thêm mới sản phẩm
Hình 31 Quản lý danh mục sản phẩm
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên
Trang này cho phép người dùng xem và quản lý các thông tin về danh mục sản phẩm
Trong giao diện quản trị, trang danh mục
Người dùng tiến hành chọn thao tác và cập nhật trạng thái danh mục sản phẩm, xóa nhiều danh mục cùng một lúc Và người dùng có thể có từ khóa để tìm kiếm danh mục sản phẩm
Hình 32 Quản lý thêm danh mục sản phẩm
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên
Trang này cho phép người dùng thêm mới danh mục sản phẩm
Trong giao diện quản trị, trang danh mục
Khi người dùng click vào nút Thêm mới, hệ thống sẽ mở popup Thêm danh mục Sau đó người dùng tiến hành điền đầy đủ thông tin về danh mục và thêm mới danh mục sản phẩm
Hình 33 Quản lý sửa danh mục sản phẩm
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên
Trang này cho phép người dùng xem và cập nhật thông tin danh mục sản phẩm
Trong giao diện quản trị, trang danh mục
Khi người dùng click vào biểu tượng Sửa trên từng dòng danh mục, hệ thống sẽ mở popup Sửa danh mục Sau đó người dùng có thể xem, chỉnh sửa thông tin danh mục sản phẩm
Hình 34 Quản lý đơn hàng
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên
Trang này cho phép người dùng xem và quản lý các thông tin về các đơn hàng
Trong giao diện quản trị, trang thêm bài viết
Người dùng tiến hành chọn thao tác và xóa nhiều đơn hàng cùng một lúc Và người dùng có thể có từ khóa để tìm kiếm đơn hàng
Hình 35 Quản lý cập nhật đơn hàng
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên
Trang này cho phép người dùng xem và cập nhật trạng thái đơn hàng
Trong giao diện quản trị, trang thêm bài viết
Khi người dùng click vào biểu tượng Sửa trên từng dòng đơn hàng, hệ thống sẽ mở popup Sửa đơn hàng Sau đó người dùng có thể xem, chỉnh sửa trang thái của đơn hàng
Triển khai
- Yêu cầu đối với phần cứng:
+ CPU từ 1.6 GHz trở lên
+ RAM từ 1 GB trở lên
- Yêu cầu đối với phần mềm:
+ Công cụ lập trình Visual Studio Code
+ Node.js (1 nền tảng của Javascript) phiên bản 16 trở lên
+ Npm (1 trình quản lý gói cho Node.js) phiên bản 8.1.3 trở lên
+ Composer phiên bản 2.0 trở lên
+ Vue Cli (CLI – Command Line Interface) phiên bản 4.5 trở lên
+ Quasar Cli phiên bản 1.2 trở lên
+Firebase phiên bản 10.2 trở lên
- Yêu cầu về tài khoản:
Tài khoản Google, kết nối với Firebase
Kiểm thử
Laptop Dell Precision M4800: Intel core i5, ram 8Gb
Hệ điều hành: Window 10 64bit
Đánh giá
Trang chủ, trang đăng nhập quản trị, danh sách và chi tiết sản phẩm, giỏ hàng và trang đặt hàng, giao diện quản trị, quản lý sản phẩm, đơn hàng và danh mục sản phẩm đều là các trang cần thiết của một trang thương mại điện tử.
- Quản trị viên có thể đăng nhập vào hệ thống
- Khách hàng đăng nhập để sử dụng chức năng Giỏ hàng không cần đăng nhập và tiến hành đặt hàng
- Khách hàng có thể xem và tìm kiếm sản phẩm theo Tên, Danh mục
- Hiển thị nội dung danh mục sản phẩm và chi tiết sản phẩm
- Đối với Admin, đã có thể quản lý người dùng, quản lý danh mục, sản phẩm và quản lý đơn hàng tại trang quản trị riêng
- Chưa có chức năng cập nhật bài viết, tin tức
- Chưa tích hợp được tính năng thanh toán online
- Tốc độ lấy dữ liệu từ server còn chậm
- Chưa có hiển thị biểu đồ thống kê số liệu
- Chưa có chức năng gợi ý sản phẩm phù hợp cho khách hàng
