Electronic Shop

TRƯỜNG CAO ĐẲNG THỰC HÀNH FPT
----- -----
GVHD: Thầy NGUYỄN THANH PHƯỚC

Lớp IT15306 – Nhóm 3
MSSV Họ và tên Vai trò
PS11906 Triệu Văn Sơn Trưởng nhóm
PS11920 Hoàng Tân Đại Thành viên
PS12088 Lê Bảo Chấn Thành viên
PS12129 Hoàng Nguyễn Ánh Như Thành viên

Electronic Shop
MỤC LỤC
LỜI Mở đầu 5
PHẦN 1: GIỚI THIỆU ĐỀ TÀI 5
1.1 Giới thiệu dự án 5
PHẦN 2: KHẢO SÁT – SURVEY 6
2.1 Mục tiêu – phạm vi đồ án 6
2.2 Khỏa sát các website 6
PHẦN 3: PHÂN TÍCH - ANALYSIS 7
3.1 Mô hình triển khai hệ thống 7
3.2 Sơ đồBÁO CÁO
Use Cases DỰ ÁN TỐT NGHIỆP 8
3.2.1 Tổng quan 8
SMART THING
3.2.2 Use case cho khách hàng 9
3.2.3 Use Case N
dành
GÀNHcho :quản
ỨNG trị DỤNG PHẦN MỀM 10
3.3 Đặc tả yêu cầu hệ thống (SRS) 12
3.3.1 Chi tiết use cases dành cho khách hàng 13
3.3.2 Chi tiết use cases dành cho quản trị 21
PHẦN 4: THIẾT KẾ - DESIGN 24
4.1 Mô hình công nghệ 24
4.2.1 PHÁC THẢO GIAO DIỆN 25
4.2.2.1 Giao diện trang index 25
4.2.2.2 Giao diện trang đăng nhập 26
4.2.2.3 Giao diện trang đăng ký 27
4.2.2.4 Giao diện trang giỏ hàng 28
4.2.2.5 Giao diện trang thanh toán 29
4.2.2.6 Giao diện trang sản phẩm 30
4.2.2.7 Giao diện trang chi tiết sản phẩm 31
4.2.2.7 Giao diện admin 32
4.3 Thiết kế dữ liệu 32
4.3.1 phác thảo Sơ đồ quan hệ thực thể (ERD) 32
4.4 Sơ đồ lớp DAO TP.HCM 11/23/2021 34
TRANG 2
Electronic Shop
PHẦN 5: THỰC HIỆN – IMPLEMENT 34
5.1 Database 34
5.1.1 DATABASE DIAGRAM 35
5.1.2 MÔ TẢ DATABASE 35
5.2 Layout 41
5.2.1 trang đăng nhập 41
5.2.2 trang chủ khách hàng 42
5.2.3 trang đăng ký 44
5.2.4 trang tìm kiếm theo thể loại 45
5.2.5 trang chi tiết sản phẩm 46
5.2.6 trang giỏ hàng 47
5.2.7 trang thanh toán 48
5.2.8 trang thông tin cá nhân của khách hàng 49
5.2.9 trang quản lý đơn hàng của khách hàng 50
5.2.10 trang chi tiết đơn hàng 51
5.2.11 trang địa chỉ của người dùng 52
5.2.12 trang quản lý đơn hàng của admin 53
5.2.13 trang quản lý đơn hàng 54
5.4 Các loại sơ đồ 56
5.4.1 Sequence Diagram 56
5.5 API 59
5.5.1 Controllers user 59
5.5.2 Controllers admin 60
5.5.3 Servives (Bussiness Logic Layer) 61
5.6 Các thư viện cần thiết 63
PHẦN 6: KIỂM THỬ - TESTING 63
6.1 Test case đăng nhập 63
6.2 Test case đăng xuất 65
6.3 Test case đăng ký 65
6.4 Tescase khách hàng 69
6.5 Tescase admin 71
TRANG 3
Electronic Shop
PHẦN 7: ĐÓNG GÓI & TRIỂN KHAI 74
KẾT LUẬN 74
1. Tóm tắt 74
2. Hướng phát triển 75
PHỤ LỤC 75
TÀI LIỆU THAM KHẢO 75
TRANG 4
Electronic Shop
LỜI MỞ ĐẦU
Đầu tiên, chúng tôi xin chân thành cảm ơn đến các thầy cô, giảng viên
trường cao đẳng Fpoly Polytechnic HCM nói chung, và khoa Công Nghệ Thông
Tin, chuyên ngành Ứng Dụng Phần Mềm nói riêng vì đã hướng dẫn, cung cấp
những kiến thức quan trọng về cả khía cạnh chuyên ngành và xã hội, giúp
chúng tôi có được kinh nghiệm, kỹ năng trong công việc, học tập, cách sống
thật đúng đắn.
Đặc biệt, chúng tôi xin chân thành cảm ơn sự hướng dẫn và chỉ bảo tận
tình của thầy Nguyễn Thành Phước - người đã luôn hướng dẫn, quan tâm, động
viên, thông cảm, tạo điều kiện thuận lợi cho nhóm rất nhiều trong quá trình thực
hiện đề tài. Các định hướng và sự hiểu biết về khoa học của thầy chính là tiền
đề để chúng tôi hoàn thành được đề tài này.
Bài báo cáo và ứng dụng có thể còn nhiều hạn chế. Kính mong các thầy
cô góp ý để đề tài chúng tôi hoàn thiện hơn. Cho chúng tôi những lời khuyên để
có thêm kinh nghiệm bước vào tương lai.
Chúng tôi xin chân thành cảm ơn!
TP.Hồ Chí Minh, ngày 25 tháng 11 năm 2021

Tất cả thành viên của nhóm
Triệu Văn Sơn
Hoàng Tân Đại
Lê Bảo Chấn
Hoàng Nguyễn Ánh Như
PHẦN 1: GIỚI THIỆU ĐỀ TÀI

1.1 GIỚI THIỆU DỰ ÁN
- Ngày nay Internet đã trở thành dịch vụ phổ biến và thiết yếu và có ảnh
hưởng sâu rộng tới thói quen, sinh hoạt, giải trí của nhiều người. Cùng
với sự phát triển nhanh chóng của Internet thì các hình thức mua và bán
hàng hóa cho mọi người ngày càng đa dạng và phát triển hơn. Các ứng
dụng Web ngày càng trở nên phổ biến.
TRANG 5
Electronic Shop
- Trước nhu cầu đó nhóm chúng em quyết định chọn đề tài “Xây dựng
Website bán hàng trực tuyến”, cụ thể là:” bán thiết bị điện tử”. Phần
mềm này được xây dựng với mục đích nhằm giúp các cửa hàng có thể
quản lý công việc dễ dàng và hiệu quả hơn. Chính những phần mềm này
cũng giúp tăng năng suất làm việc của nhân viên lên gấp nhiều lần, dễ
dàng quản lý, giúp tiết kiệm thời gian và chi phí.
- Với đề tài này, nhóm xin chân thành cảm ơn sự giúp đỡ tận tình của Thầy
Nguyễn Thanh Phước, do còn nhiều hạn chế đề tài nhóm xây dựng không
tránh khỏi những thiếu sót. Rất mong được thầy cô và các bạn đóng góp ý
kiến để chương trình ngày càng hoàn thiện và được đưa vào sử dụng.
PHẦN 2: KHẢO SÁT – SURVEY

2.1 MỤC TIÊU – PHẠM VI ĐỒ ÁN
a) Mục tiêu
- Nội dung hấp dẫn, đầy đủ, phù hợp với mọi đối tượng sử dụng.
- Được sắp xếp, bố cục một cách hợp lý, tạo điều kiện cho người đọc dễ
định hướng trong website
- Hình thức đẹp phù hợp với chủ đề, nội dung, thân thiện với người dùng
b) Phạm vi
- Phạm vi thực hiện đồ án dựa trên những kiến thức thu được từ những
môn học trong quá trình học tập tại trường và tham khảo thêm một số tài
liệu bên ngoài để bổ sung thêm kiến thức nhằm hoàn thiện đồ án tốt hơn,
đáp ứng được mục tiêu đồ án.
- Ứng dụng này khi phát triển hoàn chỉnh sẽ tăng hiệu quả kinh doanh,
giảm tri phí quảng cáo, giúp tuyên truyền dễ dàng hơn
2.2 KHỎA SÁT CÁC WEBSITE
Các website tham Các tính năng Đề xuất giải pháp
khỏa
dienmayxanh.com - Hiển thị danh mục sản phẩm -Thêm đăng nhập
- Tìm kiếm sản phẩm bằng tên sản hoặc đăng ký để có
phẩm hoặc tên loại sản phẩm sự tương tác giữa
- Xem chi tiết sản phẩm các khách hàng
- Gợi ý các sản phẩm tương tự
- Hiển thị các sản phẩm tương tự
- Thêm sản phẩm vào giỏ hàng
- Đặt hàng thanh toán, giao tận nơi
hoặc nhận trực tiếp tại cửa hàng
- Hiển thị nhiều khuyến mãi hot và
các sản phẩm sales
Gearvn - Hiển thị danh mục sản phẩm - Tối ưu hóa giao
TRANG 6
Electronic Shop
- Tìm kiếm sản phẩm theo tên hoặc diện
mã sản phẩm - Cần thêm nhiều sự
- Xem chi tiết sản phẩm lợi chọn màu sắc
- Gợi ý các sản phẩm tương tự các sản phẩm
- Đặt hàng và thanh toán online
- Đăng nhập và đăng ký lưu các
đơn hàng đã mua
Cellphones.com.v - Hiển thị danh mục sản phẩm - Thông tin sản
n - Tìm kiếm sản phẩm theo tên hoặc phẩm nên đầy đủ
mã sản phẩm
- Xem chi tiết sản phẩm
- Gợi ý các sản phẩm tương tự
- Đặt hàng và thanh toán online
- Đăng nhập và đăng ký lưu các
đơn hàng đã mua
PHẦN 3: PHÂN TÍCH - ANALYSIS

3.1 MÔ HÌNH TRIỂN KHAI HỆ THỐNG
TRANG 7
Electronic Shop
3.2 SƠ ĐỒ USE CASES
3.2.1 TỔNG QUAN
Website được xây dựng để phục vụ 2 đối tượng :

- ADMIN
-Khách hàng
+User: khách hàng đã có tài khoản
+Guest: khách hàng chưa có tài khoản
TRANG 8
Electronic Shop
3.2.2 USE CASE CHO KHÁCH HÀNG
Khách hàng có những chức năng sau:

-Guest: Khách hàng chỉ được xem sản phẩm khi muốn sử dụng chức năng
khác bắt buộc phải đăng ký tài khoản
-User: Khách hàng đã có tài khoản có những chức năng sau
+Quản lý tài khoản:
-Xem thông tin tài khoản
-Cập nhật thông tin tài khoản
+Xem thông tin sản phẩm,thông tin chi tiết sản phẩm
+Quản lý đơn hàng
TRANG 9
Electronic Shop
-Xem lịch sử đặt đơn hàng
-Xem thông tin chi tiết đơn hàng
-Hủy đơn hàng
+Xem lại giỏ hàng
-Xóa giỏ hàng
-Cập nhật giỏ hàng
+Gửi đặt hàng(đặt hàng và thanh toán)
+Tìm kiếm
3.2.3 USE CASE DÀNH CHO QUẢN TRỊ
TRANG 10
Electronic Shop
Admin có những chức năng sau:

+Quản lý sản phẩm
-Xem danh sản phẩm sản phẩm
-Tìm kiếm sản phẩm
TRANG 11
Electronic Shop
-Thêm sản phẩm mới
-Cập nhật thông tin sản phẩm
-Xóa sản phẩm
+Quản lý tài khoản
-Xem thông tin tài khoản
-Cập nhật thông tin tài khoản
+Quản lý đơn đặt hàng
-Xem danh sản phẩm đơn đặt hàng
-Cập nhật trạng thái đơn hàng
+Thống kê
-Thống kê User mới
-Thống kê doanh thu
-Thống kê sản phẩm
3.3 ĐẶC TẢ YÊU CẦU HỆ THỐNG (SRS)

- Bảng chú thích
Name Tên Use Case
Description Tóm gọn sự tương tác được thể hiện trong Use Case
Actor Những đối tượng thực hiện sự tương tác Use Case
Pre-condition Điều kiện cần để Use Case thực hiện thành công
Post-condition Những thứ sẽ xuất hiện sau khi Use Case được thưc hiện
Trigger Điều kiện kích hoạt Use Case xảy ra
Basic flow Luồng tương tác chính giữa Actor và System để Use
Case được thực hiện thành công.
Alternative flow Luồng tương tác thay thế giữa các Actor và System để
Use Case thực hiện thành công.
Exception flow Luông tương tác ngoại lệ giữa Actor và System mà Use
Case thực hiện thất bại.
TRANG 12
Electronic Shop
3.3.1 CHI TIẾT USE CASES DÀNH CHO KHÁCH HÀNG

- Use Case Đăng nhập
Name Đăng nhập
Description Chức năng cho phép actor đăng nhập tài khoản.
Actor User, Admin.
Pre-condition Actor đã có tài khoản tạo sẵn
Post-condition Nếu đăng nhập thành công – truy cập vào Website.
Trigger Actor nhấn [Đăng nhập]
Basic flow 1. Bấm vào nút [Đăng nhập] – Thành viên, vào trang
Login Admin – Admin, trang Login Nhanvien – Nhân
viên.
2. Hiển thị màng hình đăng nhập.
3. Actor nhập email, password.
4. Nhấn nút [Login] hoặc nhấn Enter.
Alternative flow N/A
Exception flow Nếu thất bại – thông báo lỗi.
- Use Case Đăng xuất

Name Đăng xuất.
Description Cho phép actor đăng xuất khỏi tài khoản.
Actor User, Admin.
Pre-condition Đăng nhập vào Website.
Post-condition Đăng xuất tài khoản – Quay lại trang Login.
Trigger Actor nhấn [Đăng xuất]
Basic flow 1. Actor bấm vào nút [Đăng xuất].
2. Xác nhận đăng xuất.
Alternative folow N/A
TRANG 13
Electronic Shop
Exception flow Hủy xác nhận đăng xuất – không đăng xuất.
- Use Case Đăng ký

Name Đăng ký
Description Cho phép Khách hàng tạo tài khoản thành viên.
Actor Guest
Pre-condition N/A
Post-condition Tài khoản thành viên mới được tạo.
Trigger Khách nhấn [Đăng ký]
Basic flow 1. Khách bấm vào nút [Đăng ký] trên header.
2. Nhập thông tin tài khoản.
3. Bấm nút [Đăng ký].
4. Thông báo kết quả đăng ký
Exception Nhập thông tin không đúng định dạng – thông báo lỗi
Đăng ký không thành công – thông báo lỗi
- Use Case Thông tin thiết bị

+ Use Case Thông tin thiết bị
Name Xem thông tin sản phẩm.
Description Cho actor xem thông tin sản phẩm.
Actor User, Admin
Pre-condition N/A
Post-condition Hiển thị thông tin sản phẩm và thông tin trang web
Trigger Actor truy cập vào trang bán sản phẩm
Basic flow Truy cập vào trang bán thiết bị.
Exception Không load thì hiển thị - thông báo lỗi
TRANG 14
Electronic Shop
+ Use Case Xem chi tiết thông tin thiết bị

Name Xem chi tiết thông tin sản phẩm
Description Cho Khách hàng xem chi tiết thông tin sản phẩm.
Actor Khách, Thành viên.
Pre-condition N/A
Post-condition Hiển thị tiết thông tin sản phẩm được chọn
Trigger Actor nhấn [Shop now]
Basic flow 1. Nhấn vào nút [Shop now].
2. Trang chi tiết thiết bị hiển thị thiết bị được chọn.
Exception N/A
- Use Case Tìm kiếm thiết bị

+ Use Case Tìm kiếm thiết bị theo tên
Name Tìm kiếm sản phẩm theo tên thiết bị.
Description Cho Khách hàng tìm kiếm sản phẩm theo tên thiết bị
Actor User, Guest
Pre-condition N/A
Post-condition Thiết bị tìm kiếm tồn tại sẽ hiển thị lên trang.
Trigger Actor nhấn [Tìm kiếm]
Basic flow 1. Click vào ô [Tìm kiếm].
2. Nhập tên thiết bị cần tìm.
3. Nhấn nút [Tìm kiếm] hoặc Enter.
Exception Nếu sản phẩm không tồn tại sẽ thông báo “Sản phẩm
TRANG 15
Electronic Shop
không tồn tại”.
+ Use Case Tìm kiếm thiết bị theo thể loại

Name Tìm kiếm sản phẩm theo thể loại
Description Cho Khách hàng tìm kiếm thiết bị theo thể loại.
Actor User, Guest.
Pre-condition N/A
Post-condition Hiển thị sản phẩm theo thể loại.
Trigger Actor chọn [Thể loại thiết bị] cần tìm
Basic flow 1. Chọn [shop] (thể loại thiết bị) trên phần nav.
2. Trang hiển thị thiết bị theo loại thiết bị.
Exception Nếu loại thiết bị không tồn tại sẽ thông báo “Sản phẩm
hiện đang hết hàng, bạn có thể chọn sản phẩm khác cùng
loại nhé”.
- Use Case Quản lý tài khoản

+ Use Case Xem TT tài khoản
Name Xem thông tin tài khoản.
Description Xem thông tin tài khoản của Actor đang đăng nhập.
Actor User, Admin
Pre-condition Đăng nhập vào Website
Post-condition Hiển thị danh sản phẩm thông tin tài khoản của Thành
viên
Trigger Actor nhấn vào [tên thành viên]
Basic flow 1. Nhấn vào [Cá nhân] hoặc [Tên Thành viên] trên thanh
header.
2. Thông tin tài khoản được tải lên trang.
TRANG 16
Electronic Shop
Exception Không thể hiện thị thông tin tài khoản – thông báo lỗi
+ Use Case Cập nhật TT tài khoản

Name Cập nhập thông tin tài khoản
Description Cho Actor sửa đổi và cập nhập lại thông tin tài khoản.
Actor User, Amin
Pre-condition Đăng nhập vào Website.
Post-condition Cập nhập thành công – lưu lại thông tin vào database.
Cập nhập thất bại – thông báo lỗi.
Trigger Actor nhấn [Lưu]
Basic flow 1. Vào trang thông tin tài khoản.
2. Sửa đổi thông tin tài khoản.
3. Nhấn [Lưu] để cập nhật.
Exception Thông tin sửa không đúng định dạng – thông báo lỗi.
Không cập nhập được – thông báo lỗi.
- Use Case Quản lý đơn hàng

+ Use Case Xem lịch sử đặt hàng
Name Xem lịch sử mua hàng
Description Cho Khách hàng xem lịch sử mua hàng
Actor User
Pre-condition Đăng nhập vào Website
Post-condition Hiển thị danh sản phẩm lịch sử mua hàng khi có lịch sử.
Hiển thị “không tìm thấy” nếu không có lịch sử mua
hàng.
Trigger Actor nhấn [Quản lý đơn hàng]
TRANG 17
Electronic Shop
header.
2. Nhấn [Quản lý đơn hàng]
3. Hiển thị danh sản phẩm lịch sử mua hàng.
Exception Chưa mua hàng – thông báo không có lịch sử mua hàng
+ Use Case Chi tiết đơn đặt hàng

Name Xem chi tiết lịch sử mua hàng
Description Cho Khách hàng chi tiết lịch sử đơn hàng
Actor User
Pre-condition Đăng nhập Website
Post-condition Hiển thị chi tiết lịch sử đơn hàng nếu có lịch sử.
Hiển thị “không tìm thấy” nếu không có lịch sử.
Trigger Actor nhấn xem [Mã đơn hàng]
header.
4. Nhấn [Mã đơn hàng] trong trang lịch sử mua hàng.
5. Hiển thị chi tiết đơn hàng đã chọn.
Exception Không load được dữ liệu – thông báo lỗi
+ Use Case Hủy đơn hàng

Name Hủy đơn hàng
Description Cho Khách hàng hủy đơn hàng
TRANG 18
Electronic Shop
Actor User
Pre-condition Đăng nhập Website
Post-condition Hủy thành công-Hiển thị thông báo
Trigger Actor nhấn [Hủy đơn hàng]
header.
4. Nhấn [Mã đơn hàng] trong trang lịch sử mua hàng.
5. Hiển thị chi tiết đơn hàng đã chọn.
6.Bấm [Hủy đơn hàng] để hủy
Exception Hủy thất bại – Hiển thị thông báo
- Use Case Xem lại giỏ hàng

+ Use Case Xem giỏ hàng
Name Xem giỏ hàng
Description Cho Khách hàng xem thiết bị trong giỏ hàng.
Actor User
Pre-condition N/A
Post-condition Hiển thị sản phẩm trong giỏ hàng
Trigger Actor chọn biểu tượng [Giỏ hàng]
Basic flow 1. Nhấn vào [Giỏ hàng]
2. Giỏ hàng được load – hiển thị giỏ hàng
Exception Không có sản phẩm trong giỏ hàng – báo rỗng.
TRANG 19
Electronic Shop
Không load được dữ liệu – báo lỗi.
+ Use Case Cập nhật giỏ hàng

Name Cập nhập giỏ hàng
Description Cập nhập số lượng, tổng tiền.
Actor User
Pre-condition Thiết bị đã được đưa vào giỏ hàng
Post-condition Cập nhập giỏ hàng – load lại giỏ hàng.
Trigger Actor nhấn [COUTINUE SHOPPING]
Basic flow 1. Nhấn vào [COUTINUE SHOPPING]
2. Thay đổi số lượng hoặc thêm thiết bị mới vào giỏ
hàng.
Alternative flow Load lại trang web.
Exception Không thay đổi số lượng thiết bị vào giỏ hàng
Không load được giỏ hàng – thông báo lỗi
+ Use Case Xóa giỏ hàng

Name Xóa giỏ hàng
Description Cho phép Khách hàng xóa sản phẩm trong giỏ hàng
Actor User
Pre-condition Thêm thiết bị vào giỏ hàng.
Post-condition Thiết bị bị xóa khỏi giỏ hàng
Trigger Actor nhấn [Xóa]
Basic flow 1. Chọn Thiết bị cần xóa.
2. Nhấn [X] hoặc [Xóa] để xóa thiết bị khỏi giỏ hàng
3. Giỏ hàng được cập nhập lại.
TRANG 20
Electronic Shop
Exception Không thể nhấn xóa – thông báo lỗi
Giỏ hàng không được cập nhập lại
- Use case gửi đặt hàng

Name Thành toán
Description Thanh toán và xác nhận đơn hàng của Khách hàng.
Actor User
Pre-condition Đăng nhập.
Giỏ hàng có thiết bị.
Post-condition Đơn hàng được xác nhận và sẽ giao hàng.
Trigger N/A
Basic flow 1. Nhấn [PROCEED TO CHECK OUT]
2. Chọn phương thức thanh toán
3. Nhấn [ PLACE ORDER]
4. Đơn hàng chuyển vào trạng thái “Đang giao”
Exception Không thể thanh toán – thông báo lỗi
Đơn hàng không được duyệt – thông báo
3.3.2 CHI TIẾT USE CASES DÀNH CHO QUẢN TRỊ

- Use case quản lý sản phẩm
+ Use case thêm sản phẩm
Name Thêm sản phẩm mới
Description Admin thêm sản phẩm mới
Actor Admin
Pre-condition Đăng nhập Admin
Post-condition Thêm sản phẩm mới và cập nhập danh sản phẩm
Trigger Admin nhấn [Thêm]
TRANG 21
Electronic Shop
Basic flow 1. Nhấn chọn Tab[Quản lý sản phẩm]=> chọn [sản

phẩm]
2. Chọn [Thêm]
3. Điển thông tin nhân viên vào form
4. Nhấn [Thêm]
5. Sản phẩm được thêm mới và load lại danh sản phẩm
Exception Thông tin sản phẩm không đúng địng dạng – thông báo
Không thêm được sản phẩm – thông báo lỗi
+ Use case xóa sản phẩm

Name Xóa sản phẩm
Description Cho phép Admin xóa sản phẩm
Actor Admin
Post-condition Sản phẩm bị xóa và cập nhập lại danh sách sản phẩm
Trigger Admin nhấn [Xóa]
Basic flow 1. Chọn sản phẩm cần xóa
2. Nhấn biểu tượng [Delete]
3. Sản phẩm bị xóa
4. Cập nhập lại danh sản phẩm
Exception Danh sản phẩm sản phẩm không được load
Không xóa được – thông báo lỗi
Không load lại danh sản phẩm
TRANG 22
Electronic Shop
+ Use case cập nhật TT sản phẩm

Name Cập nhập thông tin sản phẩm
Description Cho phép Admin sửa đổi thông tin sản phẩm
Actor Admin
Pre-condition Đăng nhập admin
Load danh sản phẩm sản phẩm
Post-condition Cập nhập thông tin sản phẩm
Trigger Actor nhấn [Cập nhật]
Basic flow 1. Chọn sản phẩm cần cập nhật
2.Nhấn biểu tượng [view]
3. Sửa đổi thông tin
4. Nhấn [Cập nhập thông tin]
5. Thông tin được lưu và load lại.
Exception Không load được dữ liệu – lỗi dữ liệu
Thay đổi thông tin không đúng định dạng – thông báo
lỗi
Lưu không được – thông báo
- Use case quản lý đơn hàng

+ Use case xem danh sản phẩm đơn hàng
Name Xem danh sản phẩm đơn hàng
Description Xem những tất cả các đơn hàng
Actor Admin
Post-condition Hiển thị danh sản phẩm đơn hàng
Trigger Nhân viên vào [Quản lý đơn hàng]
TRANG 23
Electronic Shop
Basic flow 1. Vào [Quản lý đơn hàng]

2. Load và hiển thị danh sản phẩm
Exception Không load được dữ liệu – báo lỗi “trống”
PHẦN 4: THIẾT KẾ - DESIGN

4.1 MÔ HÌNH CÔNG NGHỆ
TRANG 24
Electronic Shop
4.2.1 PHÁC THẢO GIAO DIỆN
4.2.2.1 Giao diện trang index
TRANG 25
Electronic Shop
4.2.2.2 Giao diện trang đăng nhập
TRANG 26
Electronic Shop
4.2.2.3 Giao diện trang đăng ký
TRANG 27
Electronic Shop
4.2.2.4 Giao diện trang giỏ hàng
TRANG 28
Electronic Shop
4.2.2.5 Giao diện trang thanh toán
TRANG 29
Electronic Shop
4.2.2.6 Giao diện trang sản phẩm
TRANG 30
Electronic Shop
4.2.2.7 Giao diện trang chi tiết sản phẩm
TRANG 31
Electronic Shop
4.2.2.7 Giao diện admin
4.3 THIẾT KẾ DỮ LIỆU

4.3.1 PHÁC THẢO SƠ ĐỒ QUAN HỆ THỰC THỂ (ERD)
TRANG 32
Electronic Shop
TỔNG QUAN ERD
CHI TIẾT ERD
TRANG 33
Electronic Shop
4.4 SƠ ĐỒ LỚP DAO
PHẦN 5: THỰC HIỆN – IMPLEMENT

5.1 DATABASE
TRANG 34
Electronic Shop
5.1.1 DATABASE DIAGRAM
5.1.2 MÔ TẢ DATABASE
 Bảng Products
Thuộc tính Kiểu dữ liệu Khóa Ràng buộc Mô tả
id Int Pk Not null Mã sản phẩm
Best_seller Nvarchar(50) Bán chạy nhất
Createdate DateTime Ngày tạo
Description Varchar(1500) Mô tả
TRANG 35
Electronic Shop
Features Bit(1) Nổi bật
Name Varchar(255) Tên
Regular_pric Double Giá
e
Sale_price Double Giá bán
Short_desc Varchar(255) Sắp xếp theo
Status Bit(1) Trạng thái
Thumbnail Varchar(255) Hình ảnh một
Thumbnail Varchar(255) Hình ảnh hai
Category_id Int(11) FK Mã thể loại
 Bảng Product_categories
id Int(11) Pk Not null Mã thể loại sản phẩm
Name Varchar(255) Tên thể loại
Updatedate DateTime Ngày cập nhật
Brand_id Int(11) FK Mã nhãn hiệu
 Bảng Favorites
id Int(11) Pk Not null Mã sản phẩm
Username Varchar(255) FK Mã tài khoản
Category_id Int(11) FK2 Mã thể loại
TRANG 36
Electronic Shop
 Bảng Products_image
id Int(11) Pk Not null Mã ảnh sản phẩm
Image_url Varchar(255) Link ảnh
Product_id Int(11) FK Mã sản phẩm
 Báng Slides
id Int(11) Pk Not null Mã slide
Postion Int(11) Vị trí slide
Product_id Int(11) FK Mã sản phẩm
 Bảng Cart_Item
id Int(11) Pk Not null Mã giỏ hàng
Quantity Int(11) Số lượng
Username Varchar(255) FK1 Mã tài khoản
Product_id Int(11) FK2 Mã sản phẩm
TRANG 37
Electronic Shop
 Bảng Oder_details
id Int(11) Pk Not null Mã đơn hàng chi tiết
Price Double Gía
Order_id Bigint(20) FK1 Mã đơn hàng
Product_id Int(11) FK2 Mã sản phẩm
 Bảng Oder
id Int(11) Pk Not null Mã đơn hàng
Note Varchar(255) Ghi chú
Payment Varchar(255) Phương thức thanh
toán
Status Varchar(255) Trạng thái đơn hàng
Total Double Tổng tiền
Address Int(11) FK1 Địa chỉ
Username Varchar(255) FK2 Mã tài khoản
 Bảng Address
id Int(11) Pk Not null Mã sổ địa chỉ
TRANG 38
Electronic Shop
Address Varchar(255) Địa chỉ
Fullname Varchar(255) Họ và tên
Phone Varchar(255) Số điện thoại
Type Varchar(255) Nhà/ công ty
Username Varchar(255) FK Mã tài khoản
 Bảng Users
Username Varchar(255) Pk Not null Mã tài khoản
Address Varchar(255) Địa chỉ
Avatar Varchar(255) Ảnh avatar
Birthday Date Ngày sinh
Createdate Datetime Ngày tạo
Email Varchar(255) Địa chỉ email
Fullname Varchar(255) Họ và tên
Gender Bit(1) Giới tính
Password Varchar(255) Mật khẩu
Phone Varchar(255) Số điện thoại
Updatedate Datetime Ngày cập nhật
 Bảng User_roles
User_usernam Varchar(255) FK1 Mã tài khoản
e
TRANG 39
Electronic Shop
Role_id Varchar(255) FK2 Mã vai trò
 Bảng Roles
id Varchar(255) Pk Not null Mã vai trò
Name Varchar(255) Tên vai trò
 Bảng Brands
id Int(11) Pk Not null Mã nhãn hiệu
Name Varchar(255) Tên nhãn hiệu
id Int(11) Pk Not null Mã nhãn hiệu
 Bảng News
id Int(11) Pk Not null Mã tin tức
Content Varchar(255) Nội dung
Titile Varchar(255) Tên tiêu đề
Category_id Int(11) FK Mã thể loại
 Bảng Submit_contacts
TRANG 40
Electronic Shop
id Int(11) Pk Not null Mã liên hệ
Content Varchar(255) Nội dung
Email Varchar(255) Email
Name Varchar(255) Tên người dùng
5.2 LAYOUT
5.2.1 TRANG ĐĂNG NHẬP
 Mô tả: Hiển thị giao diện trang đăng nhập cho User đăng nhập
 Hoạt động:
 Nhập username, password
TRANG 41
Electronic Shop
 Click đăng nhập
 Đăng ký
 Đăng nhập bằng Facebook, TK google
TRANG 42
Electronic Shop
5.2.2 TRANG CHỦ KHÁCH HÀNG
TRANG 43
Electronic Shop
 Mô tả: Hiển thị giao diện trang chính tương tác với khách hàng
 Hoạt động:
 Tìm kiếm thiết bị theo tên
 Tìm kiếm thiết bị theo thể loại
 Xem khuyến mãi
 Vào giỏ hàng
 Đăng ký
TRANG 44
Electronic Shop
5.2.3 TRANG ĐĂNG KÝ
 Mô tả: Hiển thị form đăng ký cho khách hàng.

 Hoạt động:
 Cho khách hàng điền vào thông tin
 [Đăng ký] tạo tài khoản khách hàng
TRANG 45
Electronic Shop
5.2.4 TRANG TÌM KIẾM THEO THỂ LOẠI
 Mô tả: Hiển thị sản phẩm theo thể loại

 Hoạt động:
 Onclick: tên loại thiết bị
 Load thiết bị theo thể loại
TRANG 46
Electronic Shop
5.2.5 TRANG CHI TIẾT SẢN PHẨM
TRANG 47
Electronic Shop
 Mô tả: Hiển thị tất cả các thông tin chi tiết của thiết bị
 Hoạt động:
 Load dữ liệu chi tiết của sản phẩm
 Click [ADD TO CART]: Thêm thiết bị vào giỏ hàng
 Click[VIEW ALL ]: Xem tất cả thông tin chi tiết
5.2.6 TRANG GIỎ HÀNG
 Mô tả: Hiển thị tất cả thiết bị có trong giỏ hàng

 Hoạt động:
 Load thiết bị được đưa vào giỏ hàng
 Click [Xóa]: xóa thiết bị khỏi giỏ hàng
 Click[Continue Shopping ]:Cập nhập giỏ hàng
 Click[Proced to check out]:Đặt hàng => Thanh toán
TRANG 48
Electronic Shop
5.2.7 TRANG THANH TOÁN
 Mô tả: Hiển thị giá tiền cần thanh toán

 Hoạt động:
 Load thông tin người mua và giá tiền cần thanh toán
 Nhập[Oder Notes] : nếu bạn muốn ghi chú cho đơn hàng
 Click [Paypal]: để thanh toán online
 Click[Thanh toán tiền mặt ]: Để thanh toán khi bạn nhận hàng
 Click[PLACE ORDER]:Thanh toán
TRANG 49
Electronic Shop
5.2.8 TRANG THÔNG TIN CÁ NHÂN CỦA KHÁCH HÀNG
 Mô tả: Hiển thị thông tin cá nhân của khách hàng

 Hoạt động:
 Load thông tin người dùng
 TAB[Thông tin cá nhân] : Xem, cập nhật thông tin cá nhân đã
đăng ký
 TAB [Quản lý đơn hàng]: Xem tất cả đơn hàng
 TAB[Số địa chỉ ]: Xem, cập nhật địa chỉ đã đăng ký
 Click[Sản phẩm yêu thích]:Xem danh sản phẩm sản phẩm yêu
thích của khách hàng
 Click [Lưu]: Cập nhật thông tin cá nhân
TRANG 50
Electronic Shop
5.2.9 TRANG QUẢN LÝ ĐƠN HÀNG CỦA KHÁCH HÀNG
 Mô tả: Hiển thị danh sản phẩm đơn hàng của khách hàng
 Hoạt động:
 Load tất cả đơn hàng của người dùng
 Click[Mã sản phẩm]: xem chi tiết từng đơn hàng
TRANG 51
Electronic Shop
5.2.10 TRANG CHI TIẾT ĐƠN HÀNG
 Mô tả: Hiển thị thông tin đơn hàng của khách hàng
 Hoạt động:
 Load tất cả thông tin đơn hàng của người dùng
TRANG 52
Electronic Shop
5.2.11 TRANG ĐỊA CHỈ CỦA NGƯỜI DÙNG
 Mô tả: Hiển thị danh sản phẩm địa chỉ của khách hàng
 Hoạt động:
 Load tất cả địa chỉ của người dùng đã đăng ký
 Click [Thêm địa chỉ]: Thêm địa chỉ mới
 Click[Chỉnh sửa]: Cập nhật địa chỉ
TRANG 53
Electronic Shop
5.2.12 TRANG QUẢN LÝ SẢN PHẨM CỦA ADMIN
 Mô tả: Hiển thị danh sản phẩm

 Hoạt động:
 Click[Thêm]: Thêm sản phẩm mới
 Click [Xóa tất cả]: Xóa tất cả sản phẩm
 Click biểu tượng [Tìm kiếm] : tìm kiếm sản phẩm theo tên đã
nhập ở textbox
 Click[chọn danh mục] : tìm sản phẩm theo danh mục đã chọn
 Click[chọn hàng]: tìm kiếm sản phẩm theo hãng đã chọn
 Load danh sản phẩm tất cả sản phẩm
TRANG 54
Electronic Shop
5.2.13 TRANG THÊM SẢN PHẨM, CẬP NHẬT SẢN PHẨM
 Mô tả: Hiển thị form thêm sản phẩm, cập nhật sản phẩm
 Hoạt động:
 Nhập[ID]: Nhập mã sản phẩm
 Nhập[Name]: Nhập tên sản phẩm
 Click [Ngày tạo]: Chọn ngày tạo sản phẩm
 Click [Ngày sửa]: Chọn ngày sửa sản phẩm
 Click [Loại sản phẩm] : Chọn loại sản phẩm
 Click[Hãng] : Chọn hãng của sản phẩm
 Click[chọn tệp]: Chọn hình ảnh của sản phẩm
 Nhập[description]: Mô tả sản phẩm
 Click[Lưu]: lưu lại sản phẩm
 Click[Lưu lại trang]: Cập nhật sản phẩm
 Click[Xóa tất cả]: Xóa trắng form, nhập lại từ đầu
 Click[Thoát]: Thoát khỏi trang
TRANG 55
Electronic Shop
5.2.14 TRANG QUẢN LÝ ĐƠN HÀNG
 Mô tả: Hiển thị danh sản phẩm đơn hàng

 Hoạt động:
 Nhập[Mã]: Short đơn hàng theo mã
 Nhập [Họ tên]: Short đơn hàng theo họ tên
 Click [Tình trạng] : Short danh sản phẩm đơn hàng theo tình
trạng đã chọn
 Load danh sản phẩm tất cả đơn hàng
TRANG 56
Electronic Shop
5.2.15 TRANG CẬP NHẬT TRẠNG THÁI ĐƠN HÀNG
 Mô tả: Hiển thị chi tiết đơn hàng

 Hoạt động:
 Click chọn[Tình trạng]: chọn trạng thái cho đơn hàng
 Click [Lưu]: Lưu lại thay đổi
 Click [Làm lại] : Chọn lại trạng thái đơn hàng
 Click[Thoát]: Thoát ra ngoài
5.4 CÁC LOẠI SƠ ĐỒ

5.4.1 SEQUENCE DIAGRAM
a. Biểu đồ tuẩn tự User case đăng nhập
TRANG 57
Electronic Shop
b. Biểu đồ tuần tự cho Use case thêm giỏ hàng
TRANG 58
Electronic Shop
c. Biểu đồ tuần tự use case gửi đơn đặt hàng
d. Biểu đồ trạng thái

Biểu đồ trạng thái của giỏ hàng
TRANG 59
Electronic Shop
5.5 API
5.5.1 CONTROLLERS USER
CONTROLLER USER:
URL MÔ TẢ HOẠT ĐỘNG BẢO MẬT
/login Thực hiện đăng nhập Không
/register Thực hiện đăng ký Không
/account/profile Cập nhập tài khoản Đăng nhập
CONTROLLER ORDER:
/account/orders Xem đơn hàng đã đặt Đăng nhập
/account/orders/:id Xem chi tiết đơn hàng Đăng nhập
CONTROLLER ADDRESS:
/account/address Xem địa chỉ đã thêm Đăng nhập
/account/address/create Tạo địa chỉ mới Đăng nhập
/account/address/ Cập nhập địa chỉ Đăng nhập
update/:id
CONTROLLER CART:
/cart Xem giỏ hàng Không
/cart/checkout Thanh toán đơn hàng Đăng nhập
CONTROLLER PRODUCT:
/products Xem tất cả sản phẩm Không
/product/detail/:id Xem chi tiết sản phẩm Không
CONTROLLER BRAND:
TRANG 60
Electronic Shop
/products/brand/:id Hiển thị các hãng theo Đăng nhập
id
CONTROLLER PRODUCT-CATEGORY:
/products/category/:id Hiển thị các thể loại Đăng nhập
theo id
5.5.2 CONTROLLERS ADMIN

CONTROLLER USER:
/admin/login Thực hiện đăng nhập Không
/admin/dashboard Trang chủ của admin Đăng nhập
CONTROLLER PRODUCT:
/admin/product Xem tất cả sản phẩm Đăng nhập
/admin/product/:id Xem và cập nhập sản Đăng nhập
phẩm theo id
CONTROLLER BRAND:
/admin/product/brand Xem tất cả hãng Đăng nhập
/admin/product/ Xem và cập nhập hãng Đăng nhập
brand/:id theo id
CONTROLLER PRODUCT-CATEGORY:

/admin/product/category Xem tất cả thể loại Đăng nhập
/admin/product/ Xem và cập nhập thể Đăng nhập
category/:id loại theo id
CONTROLLER ORDER:
TRANG 61
Electronic Shop
/admin/order Xem tất cả đơn hàng Đăng nhập
/admin/order/:id Xem và cập nhập đơn Đăng nhập
hàng theo id
5.5.3 SERVIVES (BUSSINESS LOGIC LAYER)
SERVICE USER:
METHOD THAM SỐ MÔ TẢ HOẠT ĐỘNG
User saveUser User user Thêm user mới
Role saveRole Role role Thêm role mới
addRoleToUser String userName, String Thêm user có role
roleName
User getUser String userName Tìm kiếm user
List<User> getUsers Hiển thị tất cả các user
User updateUser User user Cập nhập user
SERVICE PRODUCT:
Product saveProduct Product product Thêm sản phẩm mới
Product updateProduct Product product, Integer Cập nhập sản phẩm theo
id mã id
deleteProduct Integer id Xóa sản phẩm theo id
Product findById Integer id Tìm kiếm sản phẩm theo
id
List<Product> Hiển thị tất cả sản phẩm
getProducts
List<Product> Integer brandId Tìm kiếm sản phẩm theo
getProductsByBrandId brand
List<Product> Integer cateId Tìm kiếm sản phẩm theo
getProductsByCateId category
List<Product> String keywords Tìm kiếm sản phẩm theo
findProductByKeyword từ khóa
TRANG 62
Electronic Shop
SERVICE BRAND:
Brand saveBrand Brand brand Thêm hãng mới
Brand updateBrand Brand brand, Integer id Cập nhập hãng theo id
deleteBrand Integer id Xóa hãng theo id
Brand findById Integer id Tìm kiếm hãng theo id
List<Brand> getBrand Hiển thị tất cả các hãng
SERVICE PRODUCT-CATEGORY:
ProductCategory ProductCategory Thêm thể loại mới
save ProductCategory productCategory
ProductCategory ProductCategory Cập nhập thể loại theo
update ProductCategory productCategory, id
Integer id
deleteProductCategory Integer id Xóa thể loại theo id
ProductCategory Integer id Tìm kiếm thể loại theo
findById id
List<ProductCategory> Hiển thị tất cả các thể
getProductCategory loại
SERVICE ORDER:
Order saveOrder Order order Thêm đơn hàng
Order updateOrder Order order, Long id Cập nhập đơn hàng theo
id
deleteOrderByIdUser Integer id Xóa đơn hàng theo id

với tài khoản
Order findById Integer id Tìm kiếm đơn hàng theo
id
List<Order> getAll Sort sort Hiển thị tất cả các đơn
hàng
List<Order> String username Hiển thị tất cả đơn hàng
getOrderByUser theo tài khoản
List<OrderDetail> Long orderId Hiển thị chi tiết đơn
TRANG 63
Electronic Shop
getOrderDetailsByOrder hàng theo mã đơn hàng
Id id
List<OrderDetail> Hiển thị toàn bộ chi tiết
getOrderDetails đơn hàng
5.6 CÁC THƯ VIỆN CẦN THIẾT

- Thư viện kết nối CSDL
o mysql-connector-java
- Thư viện quản lý tài khoản:
o guava 31.0.1-jre
o jjwt-api 0.11.2
o jjwt-impl 0.11.2
o jjwt-jackson 0.11.2
- Thư viện react
o axios: 0.20.0
o react-apexcharts: 1.3.9
o react-dom: 17.0.2
o react-router-dom: 5.2.0
o react-paypal-express-checkout: 1.0.5
o react-toastify: 8.1.0
PHẦN 6: KIỂM THỬ - TESTING

6.1 TEST CASE ĐĂNG NHẬP
TC ID Kịch bản Các bước Dữ liệu Kết quả dự Kết Pass/Fail

kiến quả
thực tế
TC1 Đăng nhập 1.Truy cập vào Đăng nhập
tại trang locallhost:3000/login thành công
dành cho 2.Nhập đúng Tên đăng khachhang chuyển
khách hàng nhập sang trang
3. Nhập đúng mật khẩu 123 chủ
4. Nhấn nút đăng nhập
TRANG 64
Electronic Shop
sai thông tin locallhost:3000/login thất bại
tài khoản tại 2.Nhập sai tên người dùng kh hiển thị
trang đăng thông báo
nhập 3.Nhập đúng mật khẩu 123 lỗi “Tên
người dùng
4.Nhấn nút đăng nhập
nhập chưa
đúng”
tài khoản tại 2.Nhập đúng tên người khachhang hiển thị
trang đăng dùng thông báo
nhập 3.Nhập sai mật khẩu 111 lỗi “Mật
khẩu nhập
4.Nhấn nút đăng nhập chưa đúng”
tài khoản tại 2.Nhập sai tên người dùng kh hiển thị
nhập 3.Nhập sai mật khẩu 11 lỗi “Thông
tin đăng
nhập chưa
đúng”
tài khoản tại 2.Để trống tên người dùng hiển thị
nhập 3.Để trống mật khẩu lỗi “Mời
nhập thông
4.Nhấn đăng nhập
tin đăng
nhập”
tài khoản tại 2.Để trống tên người dùng hiển thị
nhập 3.Nhập đúng password 123 lỗi “Tên
người dùng
còn trống”
tài khoản tại 2.Nhập đúng tên đăng nhập khachhang hiển thị
TRANG 65
Electronic Shop
trang đăng 3.Để trống mật khẩu thông báo
nhập lỗi “Mật
4.Nhấn nút đăng nhập khẩu còn
trống”
TC8 Admin đăng 1.Truy cập vào Đăng nhập
nhập sai locallhost:5000/admin/logi thất bại
thông tin tài n hiển thị
khoản tại 2.Nhập tên đăng nhập AD thông báo
trang đăng lỗi “Tài
nhập 3.Nhập mật khẩu 123 khoản
không tồn
4.Bấm đăng nhập
tại”
6.2 TEST CASE ĐĂNG XUẤT

TC ID Kịch bản Các bước Dữ liệu Kết quả dự Kết quả Pass/Fail
kiến thực tế
TC1 Đăng xuất tài 1.Truy cập vào Đăng xuất

khoản locallhost:3000/ thành công
login
2.Đăng nhập
thành công
3.Nhấn đăng
xuất
6.3 TEST CASE ĐĂNG KÝ

TC Kịch bản Các bước Dữ liệu Kết quả dự kiến Kết Pass/Fail
ID quả
thực
tế
TC1 Đăng ký 1.Truy cập vào Đăng ký thất bại
thất bại locallhost:3000 hiển thị thông
tại trang / register báo lỗi “Thông
dành cho 2.Bỏ trống full tin đăng ký còn
khách name trống”
hàng 3. Bỏ trống
user name
TRANG 66
Electronic Shop
4. Bỏ trống
password
5.Bỏ trống
confirm
password
6.Bỏ trống
email
7. Nhấn nút
đăng ký
TC2 Đăng ký 1.Tiếp tục ở Đăng ký thất bại
thất bại trang đăng ký hiển thị thông
tại trang 2.Nhập Nguyen van a báo lỗi “ User
dành cho fullname name còn trống”
khách 3. Bỏ trống
hàng user name
4. Bỏ trống
password
5.Bỏ trống
confirm
password
6.Bỏ trống
email
7. Nhấn nút
đăng ký
tại trang 2.Nhập Nguyen van a báo lỗi
dành cho fullname “Username đã
khách 3.Nhập khachhangdaco tồn tại mời nhập
hàng username đã username khác”
tồn tại
4. Bỏ trống
password
5.Bỏ trống
confirm
password
6.Bỏ trống
email
7. Nhấn nút
đăng ký
TRANG 67
Electronic Shop
tại trang 2.Nhập Nguyen van a báo lỗi
dành cho fullname “Password còn
khách 3.Nhập khachhang trống”
hàng username
4. Bỏ trống
password
5.Bỏ trống
confirm
password
6.Bỏ trống
email
7. Nhấn nút
đăng ký
tại trang 2.Nhập Nguyen van a báo lỗi “Confirm
dành cho fullname Password còn
khách 3.Nhập khachang trống”
hàng username
4. Nhập 123
password
5.Bỏ trống
confirm
password
6.Bỏ trống
email
7. Nhấn nút
đăng ký
tại trang 2.Nhập Nguyen van a báo lỗi “Confirm
dành cho fullname Password không
khách 3.Nhập khachang giống với
hàng username Password đã
4. Nhập 123 nhập”
password
5.Nhập confirm 12
password
không trùng với
password
6.Bỏ trống
email
TRANG 68
Electronic Shop
7. Nhấn nút
đăng ký
tại trang 2.Nhập Nguyen van a báo lỗi “Email
dành cho fullname còn trống”
khách 3.Nhập khachang
hàng username
4. Nhập 123
password
5.Nhập đúng 123
confirm
password
6.Bỏ trống
email
7. Nhấn nút
đăng ký
tại trang 2.Nhập Nguyen van a báo lỗi “Email
dành cho fullname không đúng định
khách 3.Nhập khachang dạng định dạng
hàng username email theo mẫu
4. Nhập 123 -
password abc@gmail.com
5.Nhập đúng 123 ”
confirm
password
6.Nhập email Jbba@jkafnsui
không đúng
định dang
7. Nhấn nút
đăng ký
TC8 Đăng ký 1.Tiếp tục ở Đăng ký thành
thất bại trang đăng ký công
tại trang 2.Nhập Nguyen van a
dành cho fullname
khách 3.Nhập khachang
hàng username
4. Nhập 123
password
5.Nhập đúng 123
TRANG 69
Electronic Shop
confirm
password
6.Nhập email nguoidung@gmail.com
đúng định dang
7. Nhấn nút
đăng ký
6.4 TESCASE KHÁCH HÀNG

TC Kịch bản Các bước Dữ liệu Kết quả Kết Pass/Fail
ID dự kiến quả
thực
tế
TC1 Kiểm tra giao 1.Truy cập vào Giao diện
diện cửa sổ locallhost:3000 hiển thị
như ( Menu, 2.Đăng nhập thành công đầy đủ các
Kích thước, mục
Màu sắc ) 3.Kiểm tra giao diện layout
đúng định
dạng
TC2 Kiểm tra các Đúng với

điều khiển yêu cầu
( Lable, Text đặt ra
Box, Check
Box,
Option(lựa
trọn –radio
button)….
TC3 Kiểm tra việc 1.Truy cập Mua hàng
đăng nhập localhost:3000/cart/checkout thất bại
trước khi yêu cầu
khách hàng khách
đặt hàng 2.Chọn mua sản phẩm khi hàng đăng
không có chưa đăng nhập nhập
thông tin.. chuyển
sang trang
đăng nhập
TC4 Kiểm tra việc 1.Truy cập vào Thêm sản
thêm thành locallhost:3000 phẩm vào
công sản giỏ thành
TRANG 70
Electronic Shop
phẩm vào giỏ 2.Đăng nhập thành công Tên người công cập
hàng dùng: nhập số
nguoidung lượng sản
Mật khẩu: phẩm
123 trong giỏ
3. Click biểu tượng [Thêm
sản phẩm vào giỏ]
TC5 Kiểm tra 1.Khách hàng đang ở giỏ Xác nhận

Việc tăng hàng sản phẩm
giảm, xóa đã mất đi
sản phẩm hoặc được
trong giỏ 2.Click xóa sản phẩm thêm vào
hàng. giỏ hàn
khi thao
tác
TC6 Kiểm tra 1.Khách hàng đang ở trang Xác nhận
chức nằn tìm chủ dữ liệu
kiếm theo tên đưa ra
sản phẩm đúng với
2.Nhập tên sản phẩm Điện thoại từ khóa
tìm kiếm
3.Click biểu tượng [Tìm

kiếm]
TC7 Kiểm tra 1.Khách hàng đang ở trang Xác nhận

chức năng chủ dữ liệu
tìm kiếm đưa đúng
theo thể loại với sản
2.Nhấn chọn [shop] ở thanh phẩm đã
menu chọn
3. Chọn sản phẩm
TRANG 71
Electronic Shop
TC7 Kiểm tra 1.User đang ở trang chủ Kiểm tra
thông tin tài thông tin
khoản đúng cá nhân
với thông tin hiển thị
đã đăng ký 2.Nhấn chọn cá nhân đúng với
thông tin
đã đăng ký
3.Chọn tab thông tin cá nhân
TC7 Kiểm tra 1.User đang ở trang chủ Xác nhận

thông tin cá dữ liệu
nhân được được cập
cập nhập nhật thành
thành công công
2.Nhấn chọn cá nhân
3.Nhập dữ liệu cần cập nhật
4.Nhấn cập nhật
6.5 TESCASE ADMIN

TC ID Kịch bản Các bước Dữ liệu Kết quả dự Kết Pass/Fail
kiến quả
thực tế
TC1 Kiểm tra giao 1.Truy cập vào Xác nhận
diện của form locallhost:5000/admin giao diện
admin(màu / dashboard form Admin
sắc, các tab) 2.Đăng nhập thành Tên người hiển thị
công dùng: đúng với
Admin layout đã
Mật khẩu: thiết kế kiểm
123 tra chi tiết
TRANG 72
Electronic Shop
3.Kiểm tra form form màu
sắc chữ màu
sắc form
đúng định
dạng
TC2 Kiểm tra tab 1.Admin đang ở form Kiểm tra dữ
quản lý tài Admin liệu đổ lên
khoản form đúng
với định
2.Chọn tab quản lý tài dạng của
khoản form
TC3 Kiểm tra chức 1.Admin đang ở tab Xác nhận dữ

năng cập nhập quản lý tài khoản liệu vừa cập
thông tin tài nhật được
khoản của cập nhật
Admin 2.Nhập dữ liệu cần thành công
update
3.Nhấn cập nhật
TC4 Kiểm tra tab 1.Nhấn chọn tab quản Kiểm tra
quản lý sản lý sản phẩm danh sản
phẩm phẩm sản
phẩm được
đổ lên bảng
đúng với
định dạng
của bảng
TC5 Kiểm tra chức 1.Admin đang ở form Kiểm tra dữ
năng thêm sản quản lý sản phẩm liệu nhập
phẩm mới vào đúng
hiển thị
2.Nhấn chọn[Thêm] thông báo
để thêm sản phẩm mới “thêm mới
thành công”
TRANG 73
Electronic Shop
3.Nhập dữ liệu vào xác nhận sản
form phẩm mới đã
được đưa
vào danh sản
3.Nhấn nút lưu phẩm sản
phẩm
TC6 Kiểm tra chức 1.Admin đang ở form Xác nhận dữ

năng cập nhật quản lý sản phẩm liệu cập nhật
sản phẩm vào đúng
hiển thị
2. Chọn sản phẩm cần thông báo
cập nhật “Cập nhật
thành công”
xác minh
3.Nhấn chọn biểu sản phẩm
tượng [cập nhật] vừa cập nhật
được cập
nhật trên
4.Nhập dữ liệu cần danh sản
cập nhật phẩm sản
phẩm
5.Nhấn [cập nhật]
TC7 Kiểm tra tab 1.Nhấn chọn tab quản Kiểm tra dữ
quản lý đơn lý đơn hàng liệu danh
hàng sản phẩm
đơn hàng
hiển thị
đúng với
định dạng
form
TC8 Kiểm tra chức 1.Admin đang ở form Kiểm tra
năng cập nhật quản lý đơn hàng trạng thái
trạng thái đơn đơn hàng
TRANG 74
Electronic Shop
hàng 2.Chọn đơn hàng cần được cập
cập nhật nhật thành
công và hiển
thị thông
2.Chọn trạng thái đơn báo “Cập
hàng cần cập nhật nhật thành
công”
3.Nhấn chọn cập nhật
TC9 Kiểm tra thống 1.Nhấn chọn tab thống Kiểm tra
kê kê thống kê
hiển thị
đúng theo
yêu cầu
PHẦN 7: ĐÓNG GÓI & TRIỂN KHAI

KẾT LUẬN
1. TÓM TẮT
Trong quá trình nghiên cứu để hoàn thành bài dự án “Website bán đồ điện tử”,
nhóm em đã hoàn thành hầu hết các chức năng như: Đăng nhập, đăng ký, phân
quyền, thêm, xóa, sửa, cập nhập sản phẩm, đơn hàng, đồng thời việc tìm kiếm,
thanh toán online bằng ví paypal, …. Tuy nhiên bên cạnh đó nhóm em còn gặp
vài khó khăn:
 Chưa khỏa sát thực tế, lấy yêu cầu từ bên khách hàng để biết họ cần có
những chức năng cho một website, từ đó chúng em có thể bổ sung cho
những thiếu sót.
 Việc áp dụng công nghệ mới và xu hướng lập trình cũng như việc tối ưu
hóa website chưa tốt do hạn chế về kiến thức cũng như kinh nghiệm khi
làm một dự án còn kém.
 Làm việc nhóm chưa hiệu quả và không có nhiều thời gian do các thành
viên thực tập và ảnh hưởng dịch “Covid 19”
Bên cạnh khó khăn nhóm em nhận được sự giúp đỡ và quan tâm từ GVHD
“Nguyễn Thành Phước” đã tận tình hướng dẫn khắc phục những sai sót khi làm
TRANG 75
Electronic Shop
dự án. Cung cấp cho chúng em những kiến thức cần thiết cũng như tinh thần
học tập độc lập và sáng tạo trong môn học
2. HƯỚNG PHÁT TRIỂN
Với những khó khăn trên chúng em đã đưa ra giải pháp và hướng phát triển cho
sản phẩm mình:
 Tìm hiểu về nghiệp vụ kinh doanh shop bán hàng điện tử, quản lý nhân
viên, quản lý công việc và các dịch vụ cho khách hàng để áp dụng vào
sản phẩm mình cho thực tế hơn.
 Hiểu thêm về chuyên môn để hoàn thành các chức năng tốt hơn, không
gây ra lỗi cho người dùng
 Bổ sung thêm các tính năng mới và công nghệ mới như thanh toán thông
qua liên kết ngân hàng, ví điện tử, đăng nhập website bằng Google,
Faceboook, ….
PHỤ LỤC
TÀI LIỆU THAM KHẢO

 Code Splitting:
https://facebook.github.io/create-react-app/docs/code-splitting
 Analyzing the Bundle Size: https://facebook.github.io/create-react-
app/docs/analyzing-the-bundle-size
 Making a Progressive Web App: https://facebook.github.io/create-
react-app/docs/making-a-progressive-web-app
 Advanced Configuration: https://facebook.github.io/create-react-
app/docs/advanced-configuration
 Deployment:
https://facebook.github.io/create-react-app/docs/deployment
 Spring Security with JWT: https://www.youtube.com/watch?
v=VVn9OG9nfH0
TRANG 76

Electronic Shop

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Electronic Shop

Uploaded by

Copyright:

Available Formats

TRƯỜNG CAO ĐẲNG THỰC HÀNH FPT

GVHD: Thầy NGUYỄN THANH PHƯỚC

MSSV Họ và tên Vai trò

PS11906 Triệu Văn Sơn Trưởng nhóm

PS11920 Hoàng Tân Đại Thành viên

PS12088 Lê Bảo Chấn Thành viên

PS12129 Hoàng Nguyễn Ánh Như Thành viên

TP.Hồ Chí Minh, ngày 25 tháng 11 năm 2021

PHẦN 1: GIỚI THIỆU ĐỀ TÀI

PHẦN 2: KHẢO SÁT – SURVEY

PHẦN 3: PHÂN TÍCH - ANALYSIS

Website được xây dựng để phục vụ 2 đối tượng :

Khách hàng có những chức năng sau:

3.2.3 USE CASE DÀNH CHO QUẢN TRỊ

Admin có những chức năng sau:

3.3 ĐẶC TẢ YÊU CẦU HỆ THỐNG (SRS)

3.3.1 CHI TIẾT USE CASES DÀNH CHO KHÁCH HÀNG

- Use Case Đăng xuất

- Use Case Đăng ký

- Use Case Thông tin thiết bị

+ Use Case Xem chi tiết thông tin thiết bị

- Use Case Tìm kiếm thiết bị

+ Use Case Tìm kiếm thiết bị theo thể loại

- Use Case Quản lý tài khoản

+ Use Case Cập nhật TT tài khoản

- Use Case Quản lý đơn hàng

+ Use Case Chi tiết đơn đặt hàng

+ Use Case Hủy đơn hàng

- Use Case Xem lại giỏ hàng

+ Use Case Cập nhật giỏ hàng

+ Use Case Xóa giỏ hàng

- Use case gửi đặt hàng

3.3.2 CHI TIẾT USE CASES DÀNH CHO QUẢN TRỊ

Basic flow 1. Nhấn chọn Tab[Quản lý sản phẩm]=> chọn [sản

+ Use case xóa sản phẩm

+ Use case cập nhật TT sản phẩm

- Use case quản lý đơn hàng

Basic flow 1. Vào [Quản lý đơn hàng]

PHẦN 4: THIẾT KẾ - DESIGN

4.3 THIẾT KẾ DỮ LIỆU

CHI TIẾT ERD

4.4 SƠ ĐỒ LỚP DAO

PHẦN 5: THỰC HIỆN – IMPLEMENT

 Mô tả: Hiển thị form đăng ký cho khách hàng.

 Mô tả: Hiển thị sản phẩm theo thể loại

 Mô tả: Hiển thị tất cả thiết bị có trong giỏ hàng

 Mô tả: Hiển thị giá tiền cần thanh toán

 Mô tả: Hiển thị thông tin cá nhân của khách hàng

 Mô tả: Hiển thị danh sản phẩm

5.2.14 TRANG QUẢN LÝ ĐƠN HÀNG

 Mô tả: Hiển thị danh sản phẩm đơn hàng

 Mô tả: Hiển thị chi tiết đơn hàng

5.4 CÁC LOẠI SƠ ĐỒ

b. Biểu đồ tuần tự cho Use case thêm giỏ hàng

d. Biểu đồ trạng thái

5.5.2 CONTROLLERS ADMIN

URL MÔ TẢ HOẠT ĐỘNG BẢO MẬT

5.5.3 SERVIVES (BUSSINESS LOGIC LAYER)

deleteOrderByIdUser Integer id Xóa đơn hàng theo id

5.6 CÁC THƯ VIỆN CẦN THIẾT

PHẦN 6: KIỂM THỬ - TESTING

TC ID Kịch bản Các bước Dữ liệu Kết quả dự Kết Pass/Fail

4. Nhấn nút đăng nhập