1. Trang chủ
  2. » Giáo Dục - Đào Tạo

Hướng dẫn cài Đặt và sử dụng website bán mỹ phẩm

34 0 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Hướng dẫn cài đặt và sử dụng website bán mỹ phẩm
Tác giả Nguyễn Lê Trúc Quỳnh, Nguyễn Đăng Quang, Nguyễn Thị Thêu, Phùng Thị Ngọc Anh, Bùi Mạnh Phúc
Người hướng dẫn Đỗ Quang Hưng
Trường học Học viện Công nghệ Bưu chính Viễn thông
Chuyên ngành Công nghệ thông tin
Thể loại Bài tập lớn
Năm xuất bản 2024
Thành phố Hà Nội
Định dạng
Số trang 34
Dung lượng 10,62 MB

Cấu trúc

  • I. Môi trường cài đặt hệ thống và các công cụ sử dụng (4)
  • II. Các bước cài đặt (4)
    • 1. Cài đặt cơ sở dữ liệu (4)
    • 2. Cài đặt phần backend (5)
    • 3. Cài đặt phần frontend (6)
      • 3.1. Cài đặt website mua hàng (6)
      • 3.2. Cài đặt hệ thống quản lý (7)
  • III. Hướng dẫn sử dụng (9)
    • 1. Tổng quan (9)
    • 2. Khách hàng (9)
      • 2.1. Đăng nhập và đăng ký (9)
      • 2.2. Tìm kiếm và xem sản phẩm (11)
      • 2.3. Thêm sản phẩm vào giỏ hàng (13)
      • 2.4. Đặt hàng (14)
      • 2.5. Xem đơn hàng đã đặt (15)
      • 2.6. Sửa thông tin cá nhân (16)
      • 2.7. Đánh giá sản phẩm (19)
      • 2.8. Đánh giá hệ thống (20)
    • 3. Nhân viên bán hàng (20)
      • 3.1. Đăng nhập hệ thống (20)
      • 3.2. Quản lý sản phẩm (21)
      • 3.3. Quản lý loại hàng (24)
      • 3.4. Quản lý đơn hàng (25)
      • 3.5. Quản lý giao hàng (26)
      • 3.6. Quản lý mã khuyến mãi (27)
      • 3.7. Trả lời đánh giá sản phẩm (28)
    • 4. Quản trị (29)

Nội dung

Thêm sản phẩm vào giỏ hàngChọn loại sản phẩm muốn đặt, chọn số lượng và nhấn nút Add to cart, hệ thống thông báothêm hàng vào giỏ thành công H.2.3.1.. Thêm sản phẩm vào giỏ Click vào ico

Môi trường cài đặt hệ thống và các công cụ sử dụng

˗ Ngôn ngữ chính được sử dụng là Javascript và Typescript bên cạnh có sự hỗ trợ của các library và framework là ViteJS và SailsJS ˗ Sử dụng hệ quản trị cơ sở dữ liệu MySQL ˗ Yêu cầu các phiên bản:

Các bước cài đặt

Cài đặt cơ sở dữ liệu

 Tải xuống và cài đặt MySQL từ trang chủ: https://dev.mysql.com/downloads/mysql/

 Sau khi đăng nhập thành công, import file Database.sql: ˗ Bước 1 : Chọn Server → Data Import ˗ Bước 2: Chọn Import from Self-Contained File và chọn đường dẫn đến thư mục chứa file Database.sql ˗ Bước 3: Ấn Start import và Reconnect to DBMS, database tmdt xuất hiện trong danh sách schema

Cài đặt phần backend

 Cài đặt Node.js và npm: ˗ Bước 1: Tải xuống và cài đặt Node.js từ trang chủ (https://nodejs.org/). ˗ Bước 2: Sau khi cài đặt xong, kiểm tra phiên bản Node.js và npm bằng cách mở

Command Prompt (hoặc PowerShell) và chạy lệnh sau: node -v npm -v

 Cài đặt SailsJS: npm install sails –g

 Giải nén file romand-be và mở folder bằng vscode

 Cấu hình file env: tạo file env, copy và chỉnh sửa nội dung sau

MYSQL_PASS=[your mysql password]

 Chạy lệnh để cài đặt các dependencies cần thiết: npm install

 Khởi động server SailsJS: sails lift

Server sẽ khởi động trên http://localhost:1337.

Cài đặt phần frontend

3.1 Cài đặt website mua hàng

 Giải nén file romand-fe và mở folder bằng vscode

 Tạo file env tại thư mục gốc và thêm dòng sau

 Chạy lệnh để cài đặt các dependencies cần thiết: npm install

 Khởi động website bằng câu lệnh: npm run dev

Frontend sẽ khởi động trên http://localhost: 5173

 Kiểm tra và chạy website: Mở trình duyệt web và truy cập vào http://localhost: 5173 để xem giao diện frontend của website.

3.2 Cài đặt hệ thống quản lý

 Giải nén file romand-admin và mở folder bằng vscode

 Tạo file env tại thư mục gốc và thêm dòng sau

 Chạy lệnh để cài đặt các dependencies cần thiết: npm install

 Khởi động website bằng câu lệnh: npm run dev

Frontend sẽ khởi động trên http://localhost: 5174

 Kiểm tra và chạy website: Mở trình duyệt web và truy cập vào http://localhost: 5174 để xem giao diện frontend của website.

Hướng dẫn sử dụng

Tổng quan

Website bán mỹ phẩm Romand cung cấp trải nghiệm mua sắm dễ dàng và đa dạng, với các sản phẩm được thiết kế hiện đại và đa tông màu, phục vụ cho nhu cầu làm đẹp của mọi lứa tuổi Romand là thương hiệu mỹ phẩm Hàn Quốc nổi tiếng, chuyên cung cấp các sản phẩm trang điểm và chăm sóc da cao cấp.

Người dùng của website bao gồm: ˗ Khách hàng ˗ Nhân viên bán hàng ˗ Người quản trị

Khách hàng

2.1 Đăng nhập và đăng ký

Khách hàng điền đầy đủ thông tin: tài khoản, họ tên, email, số điện thoại, giới tính,mật khẩu sau đó ấn nút Created để đăng ký tài khoản Sau khi nhận thông báo tạo tài khoản thành công, chuyển sang màn hình Sign In (đăng nhập) điền username và password vừa tạo để đăng nhập vào hệ thống

2.2 Tìm kiếm và xem sản phẩm

Chọn icon tìm kiếm trên header, nhập tên từ khóa muốn tìm kiếm, giao diện hiển thị danh sách các sản phẩm có tên chứa từ khóa vừa nhập

Chọn sản phẩm muốn xem chi tiết, trang web chuyển hướng đến giao diện xem chi tiết sản phẩm

2.3 Thêm sản phẩm vào giỏ hàng

Chọn loại sản phẩm muốn đặt, chọn số lượng và nhấn nút Add to cart, hệ thống thông báo thêm hàng vào giỏ thành công

H.2.3.1 Thêm sản phẩm vào giỏ

Click vào icon giỏ hàng để xem chi tiết giỏ hàng, tại đây người dùng có thể chỉnh sửa lại số lượng sản phẩm trong giỏ hoặc xóa sản phẩm khỏi giỏ

Sau khi chọn sản phẩm trong giỏ hàng, nhấn Checkout để chuyển sang giao diện thanh toán

Chọn địa chỉ, phương thức vận chuyển, phương thức thanh toán, mã khuyến mãi sau đó

H.2.4.2 Giao diện đặt hàng thành công

2.5 Xem đơn hàng đã đặt

Xem danh sách đơn hàng đã đặt bằng cách chọn Icon Avatar → My Purchase Tại đây người dùng có thể xem tất cả đơn hàng hoặc lọc đơn hàng theo trạng thái (Processing, Delivering, Completed, Cancelled)

H.2.5.1 Danh sách hàng đã đặt

Nhấn vào Order ID để xem chi tiết đơn hàng

H.2.5.2 Chi tiết đơn hàng đã đặt

2.6 Sửa thông tin cá nhân

Người dùng chọn icon avatar trên header, chọnMy Account, hệ thống hiện giao diện thông tin người dùng Tại đây người dùng có thể sửa họ tên, giới tính, ngày sinh và ảnh đại diện

Chọn Addresses trên menu bên trái xem danh sách địa chỉ Tại đây người dùng có thể thêm, sửa, xóa địa chỉ

H.2.6.3 Giao diện thêm địa chỉ

Tại trang chi tiết sản phẩm, nhấn vào nút Write Review để viết đánh giá sản phẩm (Lưu ý: chỉ khi đã mua hàng thành công mới có thể đánh giá sản phẩm, mỗi người chỉ có thể đánh giá sản phẩm 1 lần, nếu đã đánh giá khi nhấn Write Review sẽ sửa đánh giá trước đó)

Chọn số sao bạn muốn đánh giá, thêm nhận xét, nhận xét nhắn gọn và ấn gửi

H.2.7.1 Giao diện đánh giá sản phẩm

Tại màn hình chính của website chọn icon message màu hồng ở góc phải bên dưới, 1 cửa số chứa danh sách đánh giá hệ thống hiện ra Người dùng có thể xem danh sách đánh giá, hoặc để lại nhận xét của mình và nhấn nút Send

Nhân viên bán hàng

Nhân viên điền thông tin username và password đã được cung cấp sau đó nhấn Log in để đăng nhập vào hệ thống

Có thể sử dụng thông tin sau để đăng nhập: binhtt / password456

Sau khi đăng nhập hiển thị giao diện sau

Nhân viên chọn menu quản lý sản phẩm, hệ thống hiển thị danh sách sản phẩm Tại đây nhân viên có thể tìm kiếm, thêm, sửa, xóa sản phẩm Ngoài ra có thể lọc sản phẩm theo loại hàng, sắp xếp thep giá thành, số lượng

H.3.2.1 Giao diện quản lý sản phẩm

Nhân viên nhấn vào icon edit, chuyển hướng sang trang chi tiết sản phẩm Tại đây có thể xem, sửa và xóa thông tin chung và các phân loại của sản phẩm

H.3.2.2 Chi tiết sản phẩm (thông tin chung)

H.3.2.3 Chi tiết sản phẩm (thông tin từng loại)

H.3.2.3 Sửa thông tin option của sản phẩm

Chọn menu Category Management để quản lý loại hàng, tại đây có thể thêm, sửa, xóa, tìm kiếm loại hàng

H.3.3.1 Giao diện quản lý loại hàng

Nhấn vào nút Edit để sửa loại hàng

Chọn menu Order Management để quản lý đơn hàng, tại đây có thể thêm, sửa, xóa, tìm kiếm đơn hàng, lọc đơn hàn theo trạng thái,…

H.3.4.1 Giao diện quản lý đơn hàng

Nhấn Detail để xem chi tiết đơn hàng

H.3.4.1 Giao diện chi tiết đơn hàng

Nhân viên chọn trạng thái của đơn hàng để cập nhật trạng thái của đơn

Chọn menu Shipping Type để quản lý phương thức giao hàng, tại đây có thể thêm, sửa, xóa, tìm kiếm phương thức giao hàng

H.3.5.1 Giao diện quản lý giao hàng

3.6 Quản lý mã khuyến mãi

Chọn menu Voucher Management để quản lý mã khuyến mãi, tại đây có thể thêm, sửa, xóa, tìm kiếm mã khuyến mãi

H.3.6.1 Giao diện quản lý mã khuyến mãi

Nhấn Edit để sửa hoặc create để thêm mã, có thể chọn 1 trong 2 loại mã là mã giảm theo giá trị và giảm theo phần trăm

3.7 Trả lời đánh giá sản phẩm

Chọn menu Product Review để quản lý đánh giá sản phẩm, tại đây có thể trả lời đánh giá sản phẩm, sửa hoặc xóa câu trả lời, lọc theo đã đánh giá hay chưa, rating, sắp xếp thep ngày đánh giá

H.3.7.1 Giao diện quản lý đánh giá sản phẩm

Quản trị

Nhà quản trị thực hiện đăng nhập giống như nhân viên bán hàng, giao diện của nhà quản trị sau khi đăng nhập

Chọn menu User Management để quản lý người dùng, tại đây có thể thêm, sửa, xóa, tìm kiếm người dùng

H.4.1.1 Giao diện quản lý người dùng

Nhấn Edit để sửa người dùng hoặc Create để thêm người dùng, có thể thêm các thông tin về họ tên đầy đủ, email, giới tính, ngày sinh Khi tạo mới người dùng, mật khẩu của người dùng được tạo tự động từ ngày sinh (DDMMYYYY) + username

Chọn menu Staff Management để quản lý nhân viên, tại đây có thể thêm, sửa, xóa, tìm kiếm nhân viên

H.4.2.1 Giao diện quản lý nhân viên

Nhấn Edit để sửa hoặc Create để thêm nhân viên, có thể thêm các thông tin về họ tên đầy đủ, email, giới tính, ngày sinh Khi tạo mới người dùng, mật khẩu của người dùng được tạo tự động từ ngày sinh (DDMMYYYY) + ‘St’

4.3 Trả lời đánh giá hệ thống

Chọn menu Website Feedback để quản lý đánh giá hệ thống, tại đây có thể trả lời đánh giá hệ thống, sửa hoặc xóa câu trả lời, lọc theo đã đánh giá hay chưa, sắp xếp thep ngày đánh giá

H.4.3.1 Giao diện quản lý đánh giá hệ thống

Nhấn vào icon edit để tạo câu trả lời hoặc sửa câu trả lời đánh giá

4.4 Xem báo cáo thống kê

Chọn menu Statistics để xem báo cáo thống kê

 Thống kê theo doanh thu:

H.4.4.1 Thống kê doanh thu theo tháng

Chọn thống kê doanh thu theo ngày, sau đó chọn khoảng thời gian:

H.4.4.2 Thống kê doanh thu theo ngày

Ngày đăng: 01/11/2024, 10:19

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w