TỔNG QUAN 42.1 Tổng quan về đồ án .4 2.1.1 Mô tả quy trình thực hiện các công việc chính 42.2 Cơ sở lý thuyết
ĐẶC TẢ USE CASE 183.1 Sơ đồ Use case 183.2 Danh sách
Đăng nhập 193.3.2 Đăng xuất
Tên Use case Đăng nhập
Mô tả Cho phép đăng nhập sử dụng hệ thống Người thực hiện (Actor) Nhân viên
Sự kiện kích hoạt (Trigger) Bấm chọn đăng nhập Điều kiện tiên quyết (Pre- Conditions)
Nhập tài khoản đã được đăng ký trước đó Điều kiện kết quảConditions) (Post- Đăng nhập thành công và vào màn hình chính
Kịch bản chính (BasicFlow) 1 Hệ thống hiển thị màn hình đăng nhập
2 Nhân viên nhập tài khoản, mật khẩu và nhấnnútđăng nhập
3 Hệ thống xác nhận tài khoản và mật khẩuđúngtheo yêu cầu
4 Hệ thống xác nhận dữ liệu nhập vào trùngvới dữ
5 Xác nhận thành công, hệ thống chuyển tới trangchủ
Kịch bản thay thế(Alternative Flow)3a Hệ thống xác nhận tài khoản và mật khẩukhông đúng theo yêu cầu Use case trở về với bước2
4a Hệ thống xác nhận dữ liệu nhập khôngtrùngkhớpvới dữ liệu trong Database Use case trở về với bước2
B ng 2 ảng 1 Use case Đăng nhập
Bảng 3 Use case Đăng xuất
Tên Use case Quản lý Ký gửi
Mô tả Thêm sản phẩm, xác nhận tạo hóa đơn, hoặchủykýgửi
Người thực hiện (Actor) Nhân viên
Sự kiện kích hoạt (Trigger) Bấm vào các button như Thêmsản phẩm, xácnhậntạo hóa đơn hoặc hủy ký gửi Điều kiện tiên quyết (Pre-
Conditions) Đăng nhập thành công vào hệ thống Điều kiện kết quảConditions) (Post- Thực hiện các thao tác như thêmsản phẩm, xácnhậntạo hóa đơn hoặc hủy ký gửi thành công Kịch bản chính (BasicFlow) 1 Hệ thống hiển thị trang Quản lý Ký gửi
2 Nhân viên chọn 1 chức năng (Thêmsảnphẩm,nhận tạo hóa đơn, hủy ký gửi)
- Thêm sản phẩm: 3 Nhập thông tin sản phẩm4 Xác nhận thêm sản phẩm- Xác nhận tạo hóa đơn:
5 Sau khi thêm sản phẩm thành công6 Nhấn nút xác nhận tạo hóa đơn xác
7 Thông báo tạo hóa đơn thành công- Hủy hóa đơn
8 Sau khi thêm sản phẩm thành công9 Nhấn nút hủy hóa đơn
10 Thông báo hủy hóa đơn thành công
Kịch bản thay thế(Alternative Flow)- Xác nhận thêm hóa đơn trước thêmsảnphẩm. về use case 2 để thêm sản phẩm
- Hủy hóa đơn trước khi thêmsản phẩm Trởvềusecase 2 để thêm sản phẩm
B ng 4 ảng 1 Use case Quản lý Ký gửi
Tên Use case Quản lý Thanh toán
Mô tả Tìm kiếm mã sản phẩm, Xác nhận tạo hóa đơn
Người thực hiện (Actor) Nhân viên
Sự kiện kích hoạt (Trigger) Nhập mã sản phẩm, Nhấn nút xác nhận tạohóađơn Điều kiện tiên quyết (Pre-
Conditions) Đăng nhập Thành công vào hệ thống Điều kiện kết quảConditions) (Post- Hiển thị thông tin theo mã sản phẩm, xácnhậntạohóa đơn thành công Kịch bản chính (BasicFlow) 1 Chọn chức năng
- Tìm kiếm mã sản phẩm2 Điền mã sản phẩm
3 Hệ thống lọc theo mã nhân viên đã nhậpđểhiện
22 những sản phẩm theo mã 4 Hiện những sản phẩm theo mã đã nhập- Xác nhận tạo hóa đơn 5 Nhấn xác nhận tạo hóa đơn 6
Hệ thống thông báo xác nhận thành công
Kịch bản thay thế(Alternative Flow) 3a Mã sản phẩm không tồn tại nên hệ thốnghiệnthị danh sách rỗng Use case trở về bước 2
B ng 5 Use case Qu n lý Thanh toán ảng 1 ảng 1
Tên Use case Quản lý Hóa đơn
Mô tả Tìm kiếm hóa đơn, thanh toán hóa đơn kýgửi, inhóađơn, xóa hóa đơn Người thực hiện (Actor) Nhân viên
Sự kiện kích hoạt (Trigger) Điền vào thanh tìm kiếm, Ấn vô hóa đơn đểthựchiệnthanh toán hóa đơn ký gửi và in hóa đơn, ấnvôbiểutượng thùng rác để xóa hóa đơn Điều kiện tiên quyết (Pre-
Conditions) Đăng nhập vào hệ thống và đã có hóa đơn Điều kiện kết quảConditions) (Post- Tìm kiếm thành công hóa đơn, thanh toánhóađơnkýgửi, in hóa đơn và xóa hóa đơn thành công
Kịch bản chính (BasicFlow) 1 Hệ thống hiển thị trang quản lý hóa đơn- Tìm kiếm hóa đơn 2 Nhập khách hàng hoặc mã hóa đơn cầntìm
3 Hệ thống xác thực để hiển thị thông tinhợplệ4 Nhấn vào hóa đơn - Thanh toán hóa đơn ký gửi 5 Kiểm tra thông tin rùi xác nhận thanh toánhóađơn6 Thông báo xác nhận thành công- In hóa đơn
7 Ấn in hóa đơn để đưa cho khách hàng- Xóa hóa đơn
8 Xác nhận xóa hóa đơn 9 Hệ thống thông báo xóa thành công
Kịch bản thay thế(Alternative Flow) 2a Nhập thông tin không hợp lệ hệ thốngkhônggửi về thông tin Trở lại use case 1
B ng 6 ảng 1 Use case Quản lý Hóa đơn
Tên Use case Quản lý Khách hàng
Mô tả Tìm kiếm, thêm và xóa khách hàng
Người thực hiện (Actor) Nhân viên
Sự kiện kích hoạt (Trigger) Nhập vào khung tìm kiếm, nhấn vô nút thêmhoặcnhấn vô thùng rác để xóa khách hàng Điều kiện tiên quyết (Pre-
Conditions) Đăng nhập vào hệ thống thành công Điều kiện kết quả (Post- Tìm kiếm hiện ra kết quả mong muốn, thêmvàxóa
24 Conditions) khách hàng thành công
Kịch bản chính (BasicFlow) 1 Hiển thị trang quản lý khách hàng- Tìm kiếm khách hàng
2 Nhập số điện thoại hoặc tên khách hàng
3 Hệ thống sẽ xác thực dữ liệu nhập vàođểhiệnthông tin khách hàng chính xác
4 Hiện thị thông tin khách hàng theonhưmongmuốn
- Thêm khách hàng 5 Nhấn vào nút thêm khách hàng6 Nhập thông tin khách hàng 7 Hệ thống xác thực thông tin rùi lưu về Database8 Thông báo thêm khách hàng thành công- Xóa khách hàng
9 Chọn một khách hàng rùi click vô thùngrácđểxóathông tin khách hàng
10 Xác nhận xóa khách hàng 11 Hệ thống thông báo xóa khách hàng thànhcông
Kịch bản thay thế(Alternative Flow) 2a Nhập thông tin không hợp lệ hệ thốngkhônggửi về thông tin Trở lại use case 1 7a Nhập thông tin không hợp lệ Hệ thốngbáolỗi.Trở về use case 6 nhập lại thông tin kháchhàng
B ng 7 Use case Qu n lý Khách hàngảng 1 ảng 1
Tên Use case Quản lý Sản phẩm
Mô tả Tìm kiếm, in Barcode và xóa sản phẩm
Người thực hiện (Actor) Nhân viên
Sự kiện kích hoạt (Trigger) Nhập vào khung tìm kiếm, ấn vô sản phẩmđểinBarcode, ấn vô biểu tượng thùng rác để xóa sảnphẩm Điều kiện tiên quyết (Pre-
Conditions) Đăng nhập thành công và hiện thị danh sáchcácsảnphẩm Điều kiện kết quả (Post- Conditions)Tìm kiếm thông tin sản phẩmtheo mong muốn, inmãBarcode hoặc xóa sản phẩm thành công
Kịch bản chính (BasicFlow) 1 Hiển thị thông tin trang sản phẩm- Tìm kiếm sản phẩm2
Nhập thông tin sản phẩm cần tìm
3 Hệ thống xác thực dữ liệu rùi hiện thị kết quảnhưmong muốn
5 Thực hiện thao tác in mã Barcode6 Hệ thống xuất mã Barcode - Xóa sản phẩm
7 Di chuột vô sản phẩm để hiển thị biểu tượngthùngrác
8 Thực hiện thao tác xóa sản phẩm9 Hệ thống phản hồi rồi thông báo xóa thànhcông
26 Kịch bản thay thế(Alternative Flow) 2a Nhập thông tin không hợp lệ hệ thốngkhônggửi về thông tin Trở lại use case 1
B ng 8 Use case Qu n lý S n ph mảng 1 ảng 1 ảng 1
Tên Use case Biểu đồ
Mô tả Lọc thống kê theo ngày/ tháng/ năm
Người thực hiện (Actor) Admin
Sự kiện kích hoạt (Trigger) Thao tác với các thanh lọc Điều kiện tiên quyết (Pre-
Conditions) Đăng nhập thành công Điều kiện kết quả (Post- Conditions)Hiển thị thống kê theo thanh lọc
Kịch bản chính (BasicFlow) 1 Hiện thị trang biểu đồ 2 Thao tác với các thanh lọc
3 Hệ thống sẽ lấy từ Database để hiệnthị dữliệutương thích theo các thanh lọc
Kịch bản thay thế(Alternative Flow)
B ng 9 Use case Bi u đ ảng 1
Tên Use case Quản lý Nhân viên
Mô tả Tìm kiếm, thêm và xóa nhân viên
Người thực hiện (Actor) Admin
Sự kiện kích hoạt (Trigger) Điền vô khung tìm kiếm, thao tác với cácnútxóa Điều kiện tiên quyết (Pre-
Conditions) Đăng nhập thành công và hiển thị danhsáchnhânviên Điều kiện kết quả (Post- Conditions)Hiển thị thông tin nhân viên sau khi tìmkiếm, thêmvà xóa nhân viên thành công
Kịch bản chính (BasicFlow) 1 Hiển thị trang quản lý nhân viên- Tìm kiếm nhân viên 2 Nhập thông tin nhân viên
3 Hệ thống sẽ xác thực dữ liệu nhập vàođểhiệnthông tin nhân viên chính xác
4 Hiện thị thông tin nhân viên theo nhưmongmuốn- Thêm nhân viên 5 Nhấn vào nút thêm nhân viên6 Nhập thông tin nhân viên 7 Hệ thống xác thực thông tin rùi lưu về
Database8 Thông báo thêm nhân viên thành công- Xóa nhân viên
9 Chọn một nhân viên rùi click vô biểu tượngthùngrác để xóa thông tin nhân viên
10 Xác nhận xóa nhân viên 11 Hệ thống thông báo xóa khách hàng thànhcông thêm
28 Kịch bản thay thế(Alternative Flow) 2a Nhập thông tin không hợp lệ hệ thốngkhônggửi về thông tin Trở lại use case 1
7a Nhập thông tin không hợp lệ Hệ thốngbáolỗi.Trở về use case 6 nhập lại thông tin kháchhàng0
B ng 10ảng 1 Use case Quản lý Nhân viên
Tên Use case Quản lý Chấm công
Mô tả Chọn thời gian, chấm công, lưu bảng
Người thực hiện (Actor) Admin
Sự kiện kích hoạt (Trigger) Thao tác với thanh lọc, điền thông tin chấmcông, ấnnút lưu bảng Điều kiện tiên quyết (Pre-
Conditions) Đăng nhập thành công và hiện thị danhsáchnhânviên Điều kiện kết quả (Post- Conditions)Lọc theo thời gian, điền chấmcông, và lưubảngthành công
Kịch bản chính (BasicFlow) 1 Hiển thị trang chấm công - Chọn thời gian
2 Lọc thông tin theo thời gian
3 Hệ thống kiếm tra Database để trả về thôngtinđược lọc
- Điền chấm công 4 Điền chấm công 5 Hệ thống xác thực thông tin rồi lưu về Database
6 Ấn nút lưu bảng 7 Hệ thống báo về lưu bảng thành công
Kịch bản thay thế(Alternative Flow)
B ng 11ảng 1 Use case Quản lý Chấm công
Tên Use case Báo cáo
Mô tả Xuất file báo cáo
Người thực hiện (Actor) Admin
Sự kiện kích hoạt (Trigger) Ấn vào nút xuất file Điều kiện tiên quyết (Pre-
Conditions) Đăng nhập thành công hiển thị Doanh thusảnphẩm,Bảng lương và Sản phẩm quá hạn Điều kiện kết quả (Post- Conditions)Xuất file thành công
Kịch bản chính (BasicFlow) 1 Hiện thị trang quản lý báo cáo2 Ấn xuất file báo cáoKịch bản thay thế(Alternative Flow)
B ng 12 ảng 1 Use case Báo cáo
Tên Use case Quản lý Tài khoản
Mô tả Tìm kiếm, xóa tài khoản
Người thực hiện (Actor) Admin
Sự kiện kích hoạt (Trigger) Điền vào thanh tìm kiếm, di chuột vô tài khoảnđểxóa Điều kiện tiên quyết (Pre-
Conditions) Đăng nhập thành công và hiển thị thông tintài khoản Điều kiện kết quả (Post- Conditions)Hiện thị thông tin sau khi tìmkiếm, xóa tài khoảnthành công
Kịch bản chính (BasicFlow) 1 Hiển thị trang tài khoản - Tìm kiếm tài khoản 2 Nhập tên tài khoản hoặc nhân viên cầntìm3 Hệ thống xác thực thông tin để hiển thị thôngtin- Xóa tài khoản
4 Di chuột vô tài khoản để hiển thị biểutượngxóatài khoản
5 Xóa tài khoản thành công
Kịch bản thay thế(Alternative Flow) 2a Nhập thông tin không hợp lệ hệ thốngkhônggửi về thông tin Trở lại use case 1
B ng 13ảng 1 Use case Quản lý Tài khoản
CHƯƠNG 4: PHÂN TÍCH HỆ THỐNG 4.1 Kiến trúc hệ thống:
MVC (Model-View-Controller): là một kiến trúc phát triển phầnmềmphổbiến trong lĩnh vực phát triển ứng dụng web Nó tách biệt thành ba thànhphầnchính: Model, View và Controller, với mục tiêu chia nhỏ và tổ chức rõràngcácphần khác nhau của hệ thống.
● Là thành phần đại diện cho dữ liệu và luật logic xử lý dữ liệu ● Quản lý truy xuất, cập nhật và xử lý dữ liệu
● Thông báo cho Controller về các thay đổi trong dữ liệu 2 View
● Hiển thị dữ liệu và tương tác với người dùng
● Nhận thông tin từ Controller và hiển thị nội dung tương ứng ● Không chịu trách nhiệm xử lý dữ liệu
● Xử lý yêu cầu từ người dùng và điều chỉnh dữ liệu và tươngtácgiữaModel và
● Nhận thông tin từ View và cập nhật Model tương ứng ● Điều hướng luồng dữ liệu và logic xử lý.
33 Ưu điểm của kiến trúc MVC:
● Tách biệt rõ ràng giữa dữ liệu, giao diện và logic xử lý ● Dễ dàng quản lý, bảo trì và mở rộng ứng dụng
● Cho phép phân chia công việc giữa các thành viên trongnhómpháttriển
● Tích hợp tốt với các công nghệ và framework khác
Nhược điểm của kiến trúc MVC:
● Đòi hỏi sự hiểu biết về kiến trúc và cấu trúc dự án ● Mức độ phức tạp cao hơn so với các kiến trúc đơn giản hơn ● Cần sự chính xác trong việc phân chia và quản lý các thành phần
Tổng quan, kiến trúc MVC giúp tách biệt rõ ràng các thành phầncủahệthống, làm cho ứng dụng dễ bảo trì, mở rộng và phát triển Nó được sửdụngrộngrãi trong phát triển ứng dụng web để tăng tính linh hoạt và hiệu quả củaquátrìnhphát triển
Hình 9 Sơ đồ Cơ sở dữ liệu
5.2 Mô tả chi tiết các kiểu dữ liệu
STT Tên thuộc tính Kiểu Ghi chú
1 Customer_ID int Khóa chính
2 Name varchar Tên khách hàng
3 Phone varchar SĐT của khách hàng
4 email varchar Email của khách hàng
B ng 14 B ng thu c tính Khách hàng ảng 1 ảng 1 ộc tính Khách
STT Tên thuộc tính Kiểu Ghi chú
1 Employee_ID int Khóa chính
2 Name varchar Tên nhân viên
3 Phone varchar SĐT của nhân viên
4 email varchar Email của nhân viên
B ng 15ảng 1 Bảng thuộc tính Nhân viên
STT Tên thuộc tính Kiểu Ghi chú
1 Item_ID int Khóa chính
2 Item_name varchar Tên sản phẩm
3 Category varchar Loại sản phẩm
4 Description varchar Mô tả sản phẩm
5 Price int Giá sản phẩm
6 Barcode varchar Mã vạch của sản phẩm
7 Status varchar Tình trạng của sản phẩm
B ng 16 B ng thu c tính S n ph mảng 1 ảng 1 ộc tính Khách ảng 1
STT Tên thuộc tính Kiểu Ghi chú
1 Consignment_ID int Khóa chính, mã đơn hàng kýgửi
2 Customer_ID int Mã khách hàng
3 Date date Ngày nhận đơn hàng ký gửi
4 Total_amount int Tổng giá trị của đơn hàng kýgửi
5 Status varchar Trạng thái của đơn hàng kýgửi
6 Employee_ID int Mã nhân viên
B ng 17 B ng thu c tính Ký g i ảng 1 ảng 1 ộc tính Khách
Bảng Hóa đơn Ký gửi chi tiết
STT Tên thuộc tính Kiểu Ghi chú
D int Khóa chính, IDchi tiết hóađơn
2 Consignment_ID int Id hóa đơn ký gửi
3 Item_ID int Id sản phẩm
B ng 18 B ng thu c tính Hóa đ n Ký g i chi ti t ảng 1 ảng 1 ộc tính Khách ơn
Bảng Sản phẩm đã bán
STT Tên thuộc tính Kiểu Ghi chú
1 Sold_item_ID int Khóa chính, mã sản phẩmđãbán
D int Mã chi tiết đơn hàng kýgửi
3 Sold_date date Ngày bán sản phẩm
4 Price int Giá bán của sản phẩm
B ng 19 B ng thu c tính S n ph mđã bán ảng 1 ảng 1 ộc tính Khách ảng 1 Bảng Lương
STT Tên thuộc tính Kiểu
B ng 20 B ng thu c tính Lảng 1 ảng 1 ộc tính Khách ươn ng
Bảng Sản phẩm trả lại
STT Tên thuộc tính Kiểu
1 Return_ID Khóa chính, mã sản phẩmđượctrảlại
B ng 21 B ng thu c tính S n ph mtr l i ảng 1 ảng 1 ộc tính Khách ảng 1 ảng 1
STT Tên thuộc tính Kiểu
B ng 22 B ng thu c tính Doanh thuảng 1 ảng 1 ộc tính Khách
6.1 Danh sách các màn hình
B ng 23 B ng Danh sách các màn hình ảng 1 ảng 1 6.2 Mô tả màn hình
Hình 10 Màn hình Đăng nh p
6.2.1.2 Mô t cách s d ng và x lý ả cách sử dụng và xử lý ử dụng và xử lý ụng và xử lý ử dụng và xử lý STT Bi n c Xến cố Xử ố Xử ử dụng và xử lý lý
1 Tài kho n/ M t kh uảng 1 Nh p thông tin tài kho n, m t kh uảng 1
2 Đăng nh p Đăng nh p vào h th ngống:
B ng 24 Mô t cách s d ng màn hình Đăng nh p ảng 1 ảng 1 ụng màn hình
Hình 11 Màn hình Trang chủ
CÀI ĐẶT VÀ THỬ NGHIỆM .587.1 Môi trường cài đặt .58 7.1.1 Môi trường cài đặt và thử nghiệm 587.1.2 Kết quả đánh giá
Sau khi thiết kế đầy đủ mô hình kiến trúc, các bảng cơ sở dữ liệu và giaodiệnứngvới từng chức năng, nhóm tiến hành cài đặt phần mềm theo quy mô hệ thốnggồm1phần mềm để phát triển hệ thống (Visual Studio Code) và 1 phần mềmquảnlýSource Code (Github)
7.1.1 Môi trương cài đặt và thử nghiệm - Github và Visual Studio Code
- Sau khi hoàn thành việc phát triển và thử nghiệmwebsiteđểđảm bảo rằng nó hoạt động đúng và không có lỗi Chúng emcó thực hiệnkiểmthử chức năng, kiểm thử tích hợp và kiểm thử hiệu năng để đảmbảorằngwebsite hoạt động một cách ổn định, tính ổn định, tốc độ tải trang, độphảnhồi, giao diện người dùng, tính bảo mật và đáp ứng được yêu cầu.
CHƯƠNG 8: NHẬN XÉT VÀ KẾT LUẬN 8.1 Kết quả đạt được
● Hiểu và nắm được các kiến thức về phát triển web ● Hiểu biết thêm về thiết kế giao diện người dùng trên nền tảng nhưFigma ● Hiểu và nắm được cách xây dựng website bằng Visual Studio Code
● Nắm rõ hơn về HTML, CSS, JavaScript và framework như ReactJSđểthiếtkế giao diện website và phát triển phía Front-end
● Nắm rõ hơn về NodeJS để phát triển phía Back-end 8.2 Hạn chế
● Khả năng mở rộng: Nếu số lượng cửa hàng, chợ đồ cũ hoặc cá nhânbánđồsecondhand tăng lên đáng kể, hệ thống có thể gặp khó khăn trongviệcxửlílượng dữ liệu lớn và đáp ứng đồng thời cho nhiều người dùng
● Bảo mật thông tin: Khi xử lí thông tin khách hàng, đảmbảo bảomật vàbảovệ thông tin cá nhân là một yêu cầu quan trọng Việc phát triểncácbiệnpháp bảo mật và quản lí dữ liệu hiệu quả là một thách thức
● Mở rộng tính năng: Bổ sung các tính năng mới như đánh giá vànhậnxétsản phẩm, chia sẻ trên mạng xã hội, tạo hồ sơ người dùng, tươngtácvàkếtnối giữa người mua và người bán
● Phát triển ứng dụng di động: Xây dựng phiên bản ứng dụng di độngcủa"PlanB" để đáp ứng nhu cầu người dùng trên các thiết bị di động, tạosựthuận tiện và trải nghiệm người dùng tốt hơn.
● Tăng cường bảo mật: Đẩy mạnh công tác bảo mật, áp dụng các biệnphápmạnh hơn để bảo vệ thông tin cá nhân của người dùng và ngănchặncáchình thức tấn công.
Ant Design "Ant Design - The world's second most popular React UI framework."[Truy cập ngày 20 tháng 5, 2023] React "React - A JavaScript library for building user interfaces." [Truy cậpngày20tháng 5, 2023]
Fullstack Education "ReactJS Course - Học ReactJS cơ bản đến nângcao."[Truycập ngày 20 tháng 5, 2023]
Fullstack Vietnam "Node.js Course." [Truy cập ngày 20 tháng 5, 2023].
