6. Đặc tả các Use Case
6.1. Mơ tả q trình đăng nhập
Đặc tả: Use case mơ tả q trình đăng nhập vào hệ thống được trình bày bởi Hình 11.
Đề 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 26
Hình 11: Sơ đồ tuần tự - Q trình đăng nhập thành cơng
Nếu tài khoản được xác minh tồn tại và đúng mật khẩu, hiển thị giao diện trang màn hình chính. Nếu tài khoản khơng chính xác u cầu đăng nhập lại được trình bày bởi Hình 12.
Hình 12: Quá trình đăng nhập tài khoản hoặc mật khẩu sai
6.2. Mơ tả q trình quản lý
Đặc tả: Khi người dùng đăng nhập, tài khoản và mật khẩu đã được xác minh là đúng,
hệ thống hiển thị trang màn hình chính được trình bày bởi Hình 13.
Sau đó người dùng lựa chọn danh mục cần thao tác, chọn chức năng cần thực hiện. Giao diện hiển thị chức năng đồng thời yêu cầu hệ thống truy xuất dữ liệu trả về dữ liệu (nếu đúng).
Tiếp theo, giao diện nhận được thông báo hiển thị dữ liệu trên giao diện người dùng. Trường hợp người dùng chỉnh sửa thông tin từ giao diện sẽ gửi yêu cầu cập nhật dữ liệu tới hệ thống, khi đó hệ thống lưu và cập nhật dữ liệu (thành công) và trả lại thông báo cập nhật thành công tới giao diện.
Sau khi giao diện nhận được thông báo từ hệ thống sẽ hiển thị thông báo cập nhật thành công cho người dùng trên giao diện của ứng dụng web.
Đề 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 27
Hình 13: Sơ đồ tuần tự - Quá trình quản lý
6.3. Mơ tả q trình dự án
Đặc tả: Khi người dùng đăng nhập tài khoản và mật khẩu đã được xác minh là đúng,
hệ thống hiển thị trang màn hình chính, người dùng lựa chọn chức năng Dự án:
- Xem danh sách dự án: Người dùng chọn chức năng Tất cả dự án, giao diện
gửi yêu cầu lấy thông tin dự án tới hệ thống. Sau đó hệ thống truy xuất dữ liệu và trả về thông tin dữ liệu của dự án. Tiếp theo đó giao diện hiển thị dữ liệu lên giao diện của người dùng được trình bày bởi Hình 14.
Đề 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 28
- Thêm dự án: Người dùng chọn chức năng Thêm dự án, giao diện hiển thị biểu
mẫu thêm thơng tin dự án. Sau đó người dùng điền vào thơng tin dự án và nhấn vào gửi, khi đó giao diện gửi yêu cầu về hệ thống và yêu cầu hệ thống lưu dữ liệu (nếu dữ liệu là đúng) hệ thống lưu dữ liệu vào Cơ sở dữ liệu (CSDL).
Tiếp theo, hệ thống trả về thông báo thêm dữ liệu dự án thành công, đồng thời giao diện sẽ gửi thông báo tới người dùng “Thêm thông tin dự án thành công” và trả về trang thông tin dự án được trình bày bởi Hình 15.
Hình 15: Sơ đồ tuần tự - Thêm dự án
- Chỉnh sửa dự án: Sau khi người dùng xem danh sách dự án thành công, nhấn
vào biểu tượng chỉnh sửa trên giao diện, khi đó giao diện gửi yêu cầu lấy thông tin chi tiết dự án tới hệ thống.
Sau đó, hệ thống truy xuất dữ liệu và trả về thông tin chi tiết dữ liệu của dự án. Đồng thời giao diện hiển thị dữ liệu lên giao diện chỉnh sửa thông tin của người dùng.
Tiếp theo người dùng điền vào thông tin cần cập nhật và nhấn vào gửi, giao diện yêu cầu về hệ thống lưu dữ liệu (nếu dữ liệu là đúng), hệ thống lưu dữ liệu vào CSDL.
Đồng thời hệ thống trả về thông báo cập nhật dữ liệu dự án thành công, đồng thời giao diện sẽ gửi thông báo tới người dùng cập nhật thông tin dự án thành công và trả về trang thơng tin dự án được trình bày bởi Hình 16.
Đề 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 29
Hình 16: Sơ đồ tuần tự - Cập nhật thơng tin dự án
- Xóa dự án: Sau khi người dùng xem danh sách dự án thành công, nhấn vào
biểu tượng xóa trên giao diện. Tiếp theo là giao diện gửi yêu cầu xóa dữ liệu trong CSDL tới hệ thống, hệ thống truy xuất dữ liệu và tiến hành xóa dữ liệu theo u cầu (thành cơng).
Đồng thời hệ thống thơng báo đã xóa dữ liệu trong CSDL, khi đó giao diện hiển thị thơng báo xóa thơng tin dự án thành cơng và trả về giao diện danh sách dự án sau khi yêu cầu hệ thống truy xuất thông tin dữ liệu của dự án còn lại trong hệ thống lên giao diện người dùng được trình bày bởi Hình 17.
Đề 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 30
Hình 17: Sơ đồ tuần tự - Xóa thơng tin dự án
7. Thiết kế hệ thống 7.1. Sơ đồ cơ sở dữ liệu 7.1. Sơ đồ cơ sở dữ liệu
Sơ đồ cơ sở dữ liệu (CSDL) phân tích nhằm lưu trữ thơng tin dự án, cơng việc, danh sách nhiệm vụ, thông tin khách hàng, thông tin liên hệ, thông tin tài khoản, thông tin sản phẩm, đơn hàng, đơn vị tiền tệ của sản phẩm và phương thức thanh tốn.
Ngồi ra, CSDL trong hệ thống được lưu trữ theo một quy trình tương tác và kết nối lẫn nhau từ khi tư vấn khách hàng cho đến q trình cơng việc, các đơn hàng khách đặt được lưu trữ trên hệ thống để quản lý và chăm sóc khách hàng một cách thuận tiện được trình bày bởi Hình 18 & 19.
Đề 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 31
Đề 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 32
Hình 19: Sơ đồ cơ sở dữ liệu
7.2. Chi tiết cơ sở dữ liệu
Lưu ý: Các trường In đậm gạch dưới là khóa chính của bảng. In đậm nghiêng gạch
dưới là khóa ngoại liên kết tới các bảng dữ liệu khác. Viết thường là các trường dữ liệu cần lưu
Đề 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 33
Bảng 1: Quản lý User
Quản lý User
STT Tên bảng Tên cột Kiểu Mục đích
1
User
Email String(100) Mã người dùng
2 First_name String(30) Tên
3 Last_name String(20) Họ
4 Password_hash String(255) Mã hóa mật khẩu
Bảng 2: Quản lý Role
Quản lý Role
STT Tên bảng Tên cột Kiểu Mục đích
1
Role Id Integer Mã vai trò
2 Name String(30) Tên vai trò
Bảng 3: Quản lý User Role
Quản lý UserRole
STT Tên bảng Tên cột Kiểu Mục đích
1
UserRole User_email String(100) Mã vai trò
2 Role_id Integer Tên vai trò
Bảng 4: Quản lý Tag
Quản lý Tag
STT Tên bảng Tên cột Kiểu Mục đích
1
Tag Id Integer Mã thẻ
2 Name String(25) Tên thẻ
Bảng 5: Quản lý Project
Quản lý Project
STT Tên bảng Tên cột Kiểu Mục đích
1 Project Id Integer Mã dự án 2 User_id Mã người dùng 3 Project_status_id Mã trạng thái 4 Client_id Mã khách hàng
5 Name String(50) Tên dự án
6 Start_date
DateTime Ngày bắt đầu
Đề 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 34
Bảng 6: Quản lý Project Status
Quản lý Project Status
STT Tên bảng Tên cột Kiểu Mục đích
1
ProjectStatus Id Integer Mã trạng thái
2 Text String(50) Tên trạng thái
Bảng 7: Quản lý Project Tag
Quản lý Project Tag
STT Tên bảng Tên cột Kiểu Mục đích
1
ProjectTag Project_id Integer Mã dự án
2 Tag_id Mã thẻ
Bảng 8: Quản lý Task
Quản lý Task
STT Tên bảng Tên cột Kiểu Mục đích
1 Task Id Integer Mã công việc 2 User_id Mã người dùng 3 Task_status_id Mã trạng thái
Task_priority_id Mã ưu tiên
4 Project_id Mã dự án
5 Name String(50) Tên dự án
6 Start_date
DateTime Ngày bắt đầu
7 Dead_line Ngày kết thúc
Bảng 9: Quản lý Task Status
Quản lý Task Status
STT Tên bảng Tên cột Kiểu Mục đích
1
TaskStatus Id Integer Mã trạng thái
2 Name String(50) Tên trạng thái
Bảng 10: Quản lý Task Tag
Quản lý Task Priority
STT Tên bảng Tên cột Kiểu Mục đích
1
TaskPriority Id Integer Mã ưu tiê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 35
Bảng 11: Quản lý Task Tag
Quản lý Task Tag
STT Tên bảng Tên cột Kiểu Mục đích
1
TaskTag Task_id Integer Mã công việc
2 Tag_id Mã thẻ
Bảng 12: Quản lý Task checklist-items
Quản lý Task Checklist-items
STT Tên bảng Tên cột Kiểu Mục đích
1 TaskCheckListItem Id Integer Mã to-do 2 User_id Mã người dùng 3 Task_checklist_status_id Mã trạng thái 4 Task_id Mã khách hàng
5 Name String(50) Tên to-do
Bảng 13: Quản lý Task Checklist Status
Quản lý Task Checklist Status
STT Tên bảng Tên cột Kiểu Mục đích
1
TaskCheckListStatus Id Integer Mã trạng thái
2 Name String(50) Tên trạng thái
Bảng 14: Quản lý Client
Quản lý Client
STT Tên bảng Tên cột Kiểu Mục đích
1 Client Id Integer Mã khách hàng 2 User_id Mã người dùng 3 Client_status_id Mã trạng thái
4 Country_id Mã quốc gia
5 Currency_id Mã đơn vị tiền
6 Name
String(50)
Tên khách hàng
7 Phone Số điện thoại
8 Zip_code Địa chỉ email
9 Website Địa chỉ website
10 Vat_number Mã số thuế
11 Address
String(100) Địa chỉ
Đề 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 36
Bảng 15: Quản lý Client Status
Quản lý Client Status
STT Tên bảng Tên cột Kiểu Mục đích
1
ClientStatus Id Integer Mã trạng thái
2 Name String(50) Tên trạng thái
Bảng 16: Quản lý chuỗi đơn hàng bằng Json
Lưu thông tin đơn hàng thành chuỗi Json vào Orders trong bảng Client Order
class JsonEcodedDict(db.TypeDecorator):
impl = db.Text
def process_bind_param(self, value, dialect): if value is None:
return '{}'
else:
return json.dumps(value)
def process_result_value(self, value, dialect): if value is None:
return {} else:
return json.loads(value)
Bảng 17: Quản lý Client Order
Quản lý Client Order
STT Tên bảng Tên cột Kiểu Mục đích
1 ClientOrder Id Integer Mã đơn hàng 2 Client_id Mã khách hàng 3 Invoice
String(50) Mã hóa đơn
4 Status Trạng thái
5 Date_created DateTime Ngày tạo đơn
6 Orders JsonEcodedDict Chuỗi JsonData
Bảng 18: Quản lý Client Order History
Quản lý Client Order History
STT Tên bảng Tên cột Kiểu Mục đích
1 ClientOrderHistory Id Integer Mã đơn hàng 2 Customer_id Mã khách hàng 3 Product_id Mã sản phẩm 4 Product_quantity Số lượng sản phẩm 5 Invoice String(20) Mã hóa đơn 6 Status Trạng thái
7 Product_delivered Trạng thái giao hàng
8 Customer_name
String(50) Tên 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 37
10 City Thành phố
11 Contact Liên hệ
12 Zip_code Mã vùng
13 Product_brand Thương hiệu sản
phẩm
14 Product_category Danh mục sản phẩm
15 Payment_method Phương thức thanh
toán
16 Product_name
String(80) Tên sản phẩm
17 Product_detail Chi tiết sản phẩm
18 Product_price Numeric(10,2) Giá sản phẩm khi đặt hàng
19 Delivered_time
DateTime Thời gian giao hàng
20 Order_time Ngày tạo đơn
21 Product_cancel Boolean Hủy đơn hàng
Bảng 19: Quản lý Contact
Quản lý Contact
STT Tên bảng Tên cột Kiểu Mục đích
1 Contact Id Integer Mã người liên hệ 2 User_id Mã người dùng 3 Client_id Mã khách hàng 4 Gender_id Mã giới tính 6 First_name String(50)
Tên người liên hệ
7 Midle_name Tên lót người liên hệ
8 Last_name Họ người liên hệ
9 Position Chức vụ
10 Phone Số điện thoại
11 Alter_contac_number Số điện thoại cố định
12 Email String(100) Địa chỉ email
13 Dob DateTime Ngày tháng năm sinh
Bảng 20: Quản lý Gender
Quản lý Gender
STT Tên bảng Tên cột Kiểu Mục đích
1
Gender Id Integer Mã giới tính
2 Name String(50) Tên giới tính
Bảng 21: Quản lý Product
Quản lý Product
STT Tên bảng Tên cột Kiểu Mục đích
1
Product
Id
Integer
Mã sản phẩm
2 Product_brand_id Mã thương hiệu
3 Product_cat_id Mã danh mụ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 38
5 Stock Số lượng tồn kho
6 Name String(80) Tên sản phẩm
7 Price Numeric (10,2) Giá sản phẩm
8 Pub_date DateTime Ngày tạo sản phẩm
9 Colors
Text Danh sách màu sản phẩm
10 Description Mô tả sản phẩm
11 Thumbnail String(150) Ảnh sản phẩm
Bảng 22: Quản lý Product Brand
Quản lý Product Brand
STT Tên bảng Tên cột Kiểu Mục đích
1
ProductBrand Id Integer Mã thương hiệu
2 Text String(50) Tên thương hiệu
Bảng 23: Quản lý Product Category
Quản lý Product Category
STT Tên bảng Tên cột Kiểu Mục đích
1
ProductCategory Id Integer Mã danh mụ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 39
CHƯƠNG IV: XÂY DỰNG HỆ THỐNG WEBSITE
1. Giao diện chức năng trang chủ 1.1. Phần chào mừng 1.1. Phần chào mừng
Khi khách hàng truy cập website, hiển thị đầu tiên là Trang chủ. Giao diện trang chủ chia làm các khối riêng biệt được thiết kế theo Landingpage bao gồm biểu tượng (logo) công ty, và các bao gồm trang chủ (home), tính năng (app), giá cả (price), đăng nhập (sign in), giao diện chức năng như Hình 20.
Hình 20: Phần menu, giới thiệu của trang chủ
1.2. Phần giới thiệu các icon chức năng
Tiếp theo là mục thơng tin về tính năng của hệ thống với các biểu tượng liên quan để khách hàng có thể hiểu và hình dung được tính năng có thể sử dụng của hệ thống, giao diện chức năng như Hình 21.
Hình 21: Phần hiển thị các tính năng của hệ thống website
1.3. Phần thông tin bảng giá
Tiếp theo là mục thơng tin về giá của tính năng hệ thống với thơng tin liên quan để khách hàng có thể nắm rõ được tính năng hệ thống, dung lượng lưu trữ, số dự án tối trong gói, số lượng cộng tác viên tham gia và hỗ trợ dịch vụ cũng như đơn giá của từng gói tính năng mỗi tháng, giao diện chức năng như Hình 22.
Đề 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 40
Hình 22: Bảng giá từng gói tính năng trong hệ thống website
1.4. Phần thông tin liên hệ
Tiếp theo là mục thông tin liên hệ bao gồm địa chỉ, số điện thoại, email, biểu mẫu liên hệ về giá của tính năng hệ thống với thơng tin liên quan. Khách hàng có thể liên hệ để được tư vấn thêm và chọn tính năng hệ thống, dung lượng lưu trữ, số dự án tối trong gói, số lượng cộng tác viên tham gia và hỗ trợ dịch vụ cũng như đơn giá của từng gói tính năng mỗi tháng, giao diện chức năng như Hình 23.
Hình 23: Phần thơng tin liên hệ tư vấn
1.5. Phần chân trang
Tiếp theo là mục chân trang cung cấp thơng tin, chính sách, liên kết hỗ trợ, tuyển dụng, email. Đồng thời, các icon mạng xã hội được gắn liên kết để khách hàng có thể liên hệ để được tư vấn thêm hoặc tìm hiểu trước thơng tin trước khi ra quyết định sử dụng tính năng theo gói dịch vụ phù hợp, giao diện chức năng như Hình 24.
Đề 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 41
2. Giao diện chức năng admin 2.1. Đăng nhập 2.1. Đăng nhập
2.1.1. Giao diện đăng nhập vào hệ thống
Khi người dùng muốn truy cập vào trang dành cho quản trị viên thì phải thơng qua bước đăng nhập vào website, giao diện chức năng như Hình 25.
Hình 25: Trang đăng nhập vào hệ thống website
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