2.1.2. Đăng nhập sai tài khoản hoặc mật khẩu
Tại trang đăng nhập vào hệ thống website, người dùng phải điền đầy đủ thông tin tài khoản và mật khẩu, nếu sai tài khoản hoặc mật khẩu hoặc thông tin tài khoản không tồn tại trong CSDL của hệ thống, giao diện sẽ hiển thị thông tin báo lỗi như Hình 26.
Hình 26: Thơng báo đăng nhập sai tài khoản hoặc mật khẩu
2.1.3. Đăng nhập thành công
Sau khi đăng nhập thành công sẽ hiển thị giao diện trang quản lý chính Bảng điều khiển của quản trị viên. Trong giao diện trang bảng điều khiển hiển thị các tính năng liên quan, các thanh menu điều hướng (bên trái) rất thuận tiện khi khách hàng cần sử dụng thử bất kỳ tính năng nào đã được tích hợp vào trong hệ thống website, giao diện sẽ hiển thị như Hình 27.
Đề tài đồ án tốt nghiệp 2018 – 2021 Trường Đại học Bà Rịa – Vũng Tàu
SINH VIÊN THỰC HIỆN: BÙI VĂN HUÂN 42
Hình 27: Trang quản trị sau khi đăng nhập thành công
2.2. Tạo tài khoản
Đối với khách hàng có nhu cầu sử dụng thử các tính năng của hệ thống trước khi sử dụng sẽ cần phải nhấn Tạo mới (Create New), điền vào thông tin truy cập và nhấn đăng ký để sử dụng, giao diện đăng ký sẽ hiển thị như Hình 28.
Hình 28: Trang đăng ký tài khoản dùng thử tính năng trên hệ thống website
Tại trang đăng ký tài khoản để sử dụng tính năng trên hệ thống website, người dùng phải điền đầy đủ thông tin tài khoản và mật khẩu, nếu không thành công giao diện sẽ hiển thị như Hình 29.
Hình 29: Thơng báo nếu một trong những thông tin đăng ký chưa đúng
Khi đăng ký tài khoản thành công, hệ thống sẽ lưu thông tin tài khoản vào CSDL. Đồng thời chuyển hướng người dùng quay trở lại trang đăng nhập để khách truy cập web từ tài khoản đã đăng ký thành công.
Đề tài đồ án tốt nghiệp 2018 – 2021 Trường Đại học Bà Rịa – Vũng Tàu
SINH VIÊN THỰC HIỆN: BÙI VĂN HUÂN 43
2.3. Trang quản trị
Thanh menu trên cùng (bên phải) bao gồm cách chức năng xem hồ sơ, đăng xuất, tìm kiếm thơng tin, giao diện sẽ hiển thị như Hình 30.
Hình 30: Thanh menu top & chức năng
Thanh menu (bên trái) bao gồm các chức năng bảng điều khiển (dashboard), khách hàng (customer), điểm bán hàng (point of sale), sản phẩm (product), dự án (project), công việc (task), nhiệm vụ (checklist to-to), giao diện sẽ hiển thị như Hình 31.
Hình 31: Thanh menu left & Chức năng
2.4. Quản lý thông tin khách hàng 2.4.1. Xem danh sách khách hàng 2.4.1. Xem danh sách khách hàng
Chức năng quản lý thông tin khách hàng, lưu trữ thông tin của khách hàng bao gồm tên công ty, email liên hệ, số điện thoại công ty,… giao diện sẽ hiển thị như Hình 32.
Đề tài đồ án tốt nghiệp 2018 – 2021 Trường Đại học Bà Rịa – Vũng Tàu
SINH VIÊN THỰC HIỆN: BÙI VĂN HUÂN 44
Trong đó: (1) Menu xem tất cả danh sách khách hàng. (2) Thêm mới thông tin khách hàng vào hệ thống. (3) Trạng thái hoạt động của khách hàng (hoạt động hoặc khơng hoạt động). (4) Các chức năng xem, xóa, sửa thông tin khách hàng trên hệ thống.
2.4.2. Xem thông tin chi tiết khách hàng
Khi người dùng nhấn vào xem thông tin chi tiết hệ thống sẽ điều hướng sang trang chi tiết thông tin khách hàng, giao diện chi tiết thông tin khách hàng sẽ hiển thị như Hình 33.
Hình 33: Quản lý thơng tin khách hàng - Thơng tin chi tiết
Trong đó, tại trang chi tiết thơng tin khách hàng bao gồm (1) thông tin công ty (customer details), (2) liên hệ (contacts), (3) dự án (projects), (4) nhiệm vụ (tasks) của khách hàng đó.
2.4.3. Tạo thông tin khách hàng
Khi người dùng chọn vào chức năng New Client hoặc Add Customer, sẽ được chuyển hướng sang trang biểu mẫu thêm thông tin khách hàng bao gồm: tên công ty, số điện thoại, địa chỉ email, liên kết website, mã số thuế, địa chỉ, mã vùng, trạng thái, quốc gia, đơn vị tiền sử dụng của khách, giao diện sẽ hiển thị như Hình 34 & 35.
Đề tài đồ án tốt nghiệp 2018 – 2021 Trường Đại học Bà Rịa – Vũng Tàu
SINH VIÊN THỰC HIỆN: BÙI VĂN HUÂN 45
Hình 35: Quản lý thơng tin khách hàng - Thêm thông tin
Khi điền đầy đủ thông tin, khách hàng nhấn vào nút Submit hệ thống sẽ lưu trữ lại thông tin khách hàng.
Nếu khách hàng nhấn vào nút Cancel trên giao diện thêm thông tin khách hàng, hệ thống đồng thời chuyển hướng về trang danh sách khách hàng.
2.4.4. Chỉnh sửa thông tin khách hàng
Khi người dùng nhấn vào tính năng chỉnh sửa, hệ thống sẽ điều hướng sang trang biểu mẫu cập nhật thông tin khách hàng đã được lưu trữ trên hệ thống. Sau đó điền thơng tin mới và nhấn vào submit để hệ thống cập nhật lại thông tin của khách hàng.
Khi thông tin khách hàng cập nhật thành công, hệ thống sẽ chuyển hướng trở lại trang danh sách khách hàng, giao diện chỉnh sửa thông tin khách hàng sẽ hiển thị như Hình 36 & 37. Cho phép người dùng cập nhật lại thông tin của khách hàng.
Đề tài đồ án tốt nghiệp 2018 – 2021 Trường Đại học Bà Rịa – Vũng Tàu
SINH VIÊN THỰC HIỆN: BÙI VĂN HUÂN 46
Hình 37: Quản lý thông tin khách hàng - Sửa thông tin
2.4.5. Xóa thơng tin khách hàng
Khi người dùng chọn vào chức năng Xóa (4) thì thơng tin khách hàng sẽ được xóa khỏi CSDL và khơng cịn được hiển thị trong danh sách khách hàng, giao diện thông tin chức năng sẽ hiển thị như Hình 38.
2.5. Quản lý thông tin liên hệ 2.5.1. Xem danh sách liên hệ 2.5.1. Xem danh sách liên hệ
Khi người dùng nhấn vào contacts sẽ hiển thị tất cả những liên hệ của khách hàng bao gồm thông tin công ty, họ tên, số điện thoại, email, chức vụ, cũng như các hành động xem, xóa, chỉnh sửa thơng tin liên hệ, giao diện thông tin liên hệ sẽ hiển thị như Hình 38.
Hình 38: Quản lý thơng tin khách hàng - Thông tin liên hệ
2.5.2. Xem thông tin chi tiết liên hệ
Khi người dùng nhấn vào biểu tượng xem thông tin liên hệ, hệ thống sẽ gửi thông tin đã truy xuất từ CSDL về giao diện người dùng và hiển thị model pop-up thơng tin như Hình 39.
Đề tài đồ án tốt nghiệp 2018 – 2021 Trường Đại học Bà Rịa – Vũng Tàu
SINH VIÊN THỰC HIỆN: BÙI VĂN HUÂN 47
2.5.3. Tạo thông tin liên hệ
Khi người dùng nhấn vào thêm mới thông tin liên hệ, hệ thống sẽ chuyển hướng sang biểu mẫu thêm thông tin liên hệ, giao diện sẽ hiển thị như Hình 40.
Hình 40: Quản lý thông tin khách hàng – Thêm thông tin liên hệ
2.5.4. Chỉnh sửa thông tin liên hệ
Khi người dùng nhấn vào biểu tượng chỉnh sửa thông tin liên hệ, hệ thống sẽ gửi thông tin về giao diện người dùng và hiển thị trang chỉnh sửa thơng tin như Hình 41 & 42.
Đề tài đồ án tốt nghiệp 2018 – 2021 Trường Đại học Bà Rịa – Vũng Tàu
SINH VIÊN THỰC HIỆN: BÙI VĂN HN 48
Hình 42: Quản lý thơng tin khách hàng - Sửa thơng tin liên hệ
2.5.5. Xóa thơng tin liên hệ
Khi người dùng nhấn vào biểu tượng xóa thơng tin liên hệ, hệ thống sẽ nhận yêu cầu và tiến hành xóa thơng tin liên hệ trong CSDL và sẽ tải lại trang.
2.6. Quản lý dự án
2.6.1. Xem danh sách dự án
Khi người dùng nhấn vào Projects sẽ hiển thị tất cả những dự án hiện có của khách hàng cơng ty bao gồm tên dự án, ngày bắt đầu, ngày kết thúc, trạng thái dự án, thẻ dự án.
Thêm vào đó, người dùng có thể xem, xóa, chỉnh sửa thơng tin dự án, giao diện thông tin dự án sẽ hiển thị như Hình 43.
Hình 43: Quản lý thơng tin dự án - Thông tin dự án
2.6.2. Xem thông tin chi tiết dự án
Khi người dùng nhấn vào biểu tượng xem thông tin chi tiết dự án, hệ thống sẽ gửi thông tin đã truy xuất từ CSDL về giao diện người dùng và hiển thị thơng tin như Hình 44.
Đề tài đồ án tốt nghiệp 2018 – 2021 Trường Đại học Bà Rịa – Vũng Tàu
SINH VIÊN THỰC HIỆN: BÙI VĂN HUÂN 49
Hình 44: Quản lý thơng tin dự án - Xem thông tin chi tiết dự án
2.6.3. Tạo thông tin dự án
Khi người dùng nhấn vào thêm mới (New Project), hệ thống sẽ chuyển hướng sang biểu mẫu thêm thông tin dự án, giao diện sẽ hiển thị như Hình 45.
Hình 45: Quản lý thơng tin dự án - Thêm thông tin dự án
2.6.4. Chỉnh sửa thông tin dự án
Khi người dùng nhấn vào biểu tượng chỉnh sửa thông tin dự án, hệ thống sẽ gửi thông tin về giao diện người dùng và hiển thị trang chỉnh sửa thơng tin như Hình 46 & 47.
Đề tài đồ án tốt nghiệp 2018 – 2021 Trường Đại học Bà Rịa – Vũng Tàu
SINH VIÊN THỰC HIỆN: BÙI VĂN HUÂN 50
Hình 47: Quản lý thông tin dự án - Sửa thông tin dự án
2.6.5. Xóa thơng tin dự án
Khi người dùng nhấn vào biểu tượng xóa dự án hệ thống sẽ nhận yêu cầu và tiến hành xóa thơng tin đồng thời sẽ tải lại trang.
2.7. Quản lý nhiệm vụ
2.7.1. Xem danh sách nhiệm vụ
Khi người dùng nhấn vào biểu tượng xem nhiệm vụ, hệ thống sẽ gửi thông tin đã truy xuất từ CSDL về giao diện người dùng và hiển thị giao diện thông tin nhiệm vụ cần làm chi tiết trong tasks đó như Hình 48.
Hình 48: Quản lý thơng tin khách hàng – Chi tiết thông tin việc cần làm trong task của dự án
2.7.2. Chỉnh sửa nhiệm vụ
Khi người dùng nhấn vào biểu tượng chỉnh sửa thông tin nhiệm vụ, hệ thống sẽ gửi thông tin về giao diện người dùng và hiển thị trang chỉnh sửa thơng tin như Hình 49.
Hình 49: Quản lý thông tin khách hàng – Sửa chi tiết thông tin việc cần làm trong task của dự án
2.7.3. Xóa nhiệm vụ
Khi người dùng nhấn vào biểu tượng xóa thơng tin nhiệm vụ của dự án hệ thống sẽ nhận u cầu và tiến hành xóa thơng tin, đồng thời sẽ tải lại trang.
2.8. Quản lý công việc
2.8.1. Xem danh sách công việc
Khi người dùng nhấn vào công việc trong menu chức năng (bên trái) và chọn All task hệ thống sẽ gửi thông tin tất cả cơng việc có trong hệ thống về giao diện người dùng trong đó sẽ hiển thị tên của task, ngày bắt đầu, ngày kết thúc, trạng thái, mức độ ưu tiên và thẻ dự án.
Đề tài đồ án tốt nghiệp 2018 – 2021 Trường Đại học Bà Rịa – Vũng Tàu
SINH VIÊN THỰC HIỆN: BÙI VĂN HUÂN 51
Thêm vào đó người dùng có thể lựa chọn các tính năng xem, thêm, xóa, sửa thơng tin của công việc trong dự án hiển thị trang thơng tin như Hình 50.
Hình 50: Quản lý cơng việc – Danh sách công việc
2.8.2. Xem thông tin chi tiết công việc
Khi người dùng nhấn vào biểu tượng xem thông tin chi tiết công việc, hệ thống sẽ gửi thông tin đã truy xuất từ CSDL về giao diện người dùng và hiển thị thơng tin như Hình 51.
Hình 51: Quản lý cơng việc – Xem thơng tin chi tiết công việc
2.8.3. Tạo thông tin công việc
Khi người dùng nhấn vào thêm mới (new task), hệ thống sẽ chuyển hướng sang biểu mẫu thêm thông tin công việc, giao diện sẽ hiển thị như Hình 52 & 53.
Hình 52: Quản lý cơng việc – Thêm công việc
Đề tài đồ án tốt nghiệp 2018 – 2021 Trường Đại học Bà Rịa – Vũng Tàu
SINH VIÊN THỰC HIỆN: BÙI VĂN HUÂN 52
2.8.4. Chỉnh sửa thông tin công việc
Khi người dùng nhấn vào biểu tượng chỉnh sửa thông tin, hệ thống sẽ gửi thông tin về giao diện người dùng và hiển thị trang chỉnh sửa thơng tin như Hình 54 & 55.
Hình 54: Quản lý cơng việc – Chỉnh sửa thơng tin cơng việc
Hình 55: Quản lý cơng việc – Chỉnh sửa thông tin công việc
2.8.5. Xóa thơng tin cơng việc
Khi người dùng nhấn vào biểu tượng xóa thơng tin, hệ thống sẽ nhận yêu cầu và tiến hành xóa thơng tin đồng thời sẽ tải lại trang.
2.9. Quản lý sản phẩm
2.9.1. Xem danh sách sản phẩm
Tiếp theo là chức năng quản lý sản phẩm. Danh sách sản phẩm sẽ hiển thị mã thiết sản phẩm, tên, loại sản phẩm, số lượng, ngày đăng như Hình 56 & 57. Trong đó (1) Thêm mới: Thêm mới sản phẩm. (2) Xem: Xem chi tiết sản phẩm. (3) Sửa: Chỉnh sửa thông tin sản phẩm. (4) Xóa: Xóa thơng tin sản phẩm.
Đề tài đồ án tốt nghiệp 2018 – 2021 Trường Đại học Bà Rịa – Vũng Tàu
SINH VIÊN THỰC HIỆN: BÙI VĂN HUÂN 53
Hình 57: Quản lý sản phẩm – Danh sách sản phẩm
2.9.2. Xem thông tin sản phẩm
Khi người dùng chọn vào chức năng xem chi tiết sản phẩm, giao diện sẽ hiển thị như Hình 58. Cho phép người dùng xem thêm thơng tin chi tiết của sản phẩm.
Hình 58: Quản lý sản phẩm – Chi tiết thông tin sản phẩm
2.9.2. Tạo thông tin sản phẩm
Khi người dùng chọn vào chức năng Thêm mới, giao diện sẽ hiển thị như Hình 59 & 60. Người dùng phải thêm tên của sản phẩm, chọn loại sản phẩm, số lượng, thông số kỹ thuật, màu sắc, miêu tả, thương hiệu, sanh mục, ảnh sản sản phẩm và nhấn vào submit để lưu thông tin sản phẩm vào hệ thống CSDL.
Đề tài đồ án tốt nghiệp 2018 – 2021 Trường Đại học Bà Rịa – Vũng Tàu
SINH VIÊN THỰC HIỆN: BÙI VĂN HUÂN 54
Hình 60: Quản lý sản phẩm – Thêm mới sản phẩm
2.9.3. Chỉnh sửa thông tin sản phẩm
Khi người dùng chọn vào chức năng chỉnh sửa, giao diện chỉnh sửa sẽ hiển thị như Hình 61 & 62. Cho phép người dùng cập nhật lại thơng tin sản phẩm.
Hình 61: Quản lý sản phẩm – Sửa thơng tin sản phẩm
Hình 62: Quản lý sản phẩm – Sửa thơng tin sản phẩm
2.9.5. Xóa thơng tin sản phẩm
Khi người dùng chọn vào chức năng Xóa, sản phẩm sẽ bị xóa khỏi CSDL và khơng cịn được hiển thị trong danh sách sản phẩm.
Đề tài đồ án tốt nghiệp 2018 – 2021 Trường Đại học Bà Rịa – Vũng Tàu
SINH VIÊN THỰC HIỆN: BÙI VĂN HUÂN 55
2.10. Quản lý danh mục sản phẩm
2.10.1. Xem danh sách danh mục sản phẩm
Khi chọn vào trang menu (bên trái) Products trong đó bao gồm quản lý sản phẩm, thêm mới, danh mục, thương hiệu của sản phẩm và chọn vào category sẽ hiển thị thông tin danh sách các danh mục của sản phẩm, giao diện sẽ hiển thị như Hình 63.
Hình 63: Quản lý sản phẩm – Danh mục sản phẩm
Trong đó: (1) Thêm mới: Thêm mới danh mục. (2) Sửa: Sửa tên danh mục sản phẩm. (3) Xóa: Xóa danh mục sản phẩm.
2.10.2. Tạo danh mục sản phẩm
Khi người dùng chọn vào chức năng Thêm mới và nhấn submit, danh mục sản phẩm sẽ được thêm vào CSDL và sẽ hiển thị trong danh sách sản phẩm, giao diện sẽ hiển thị như Hình 64.
2.10.3. Chỉnh sửa danh mục sản phẩm
Khi người dùng chọn vào chức năng chỉnh sửa thì giao diện chỉnh sửa sẽ hiển thị như Hình 58. Cho phép người dùng cập nhật lại tên của danh mục sản phẩm.
Hình 64: Quản lý sản phẩm – Sửa danh mục sản phẩm
2.10.4. Xóa danh mục sản phẩm
Khi người dùng chọn vào chức năng Xóa, danh mục sản phẩm sẽ bị xóa khỏi CSDL và khơng cịn được hiển thị trong danh sách danh mục sản phẩm.
2.11. Quản lý thương hiệu sản phẩm
2.11.1. Xem danh sách thương hiệu sản phẩm
Khi chọn người dùng vào trang menu left products và chọn vào brand sẽ hiển thị thông tin danh sách các thương hiệu của sản phẩm, giao diện sẽ hiển thị như Hình 65.
Đề tài đồ án tốt nghiệp 2018 – 2021 Trường Đại học Bà Rịa – Vũng Tàu
SINH VIÊN THỰC HIỆN: BÙI VĂN HUÂN 56
Hình 65: Quản lý sản phẩm – Thương hiệu sản phẩm