ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC KINH TẾ - LUẬT

KHOA HỆ THỐNG THÔNG TIN

MÔN HỌC: PHÁT TRIỂN WEB KINH DOANH 1

BÁO CÁO CUỐI KỲ

TRANG WEB KINH DOANH VĂN PHÒNG PHẨM

Giảng viên hướng dẫn: Trần Thị Ánh

Link website chính: Flashy Stationery

Link website giao diện admin: Flashy Stationery Admin

Thành viên nhóm:

STT THÀNH VIÊN MSSV VỊ TRÍ

1 Nguyễn Trần Bích Ngọc K204110602 Nhóm trưởng

2 Lê Thị Trà My K204110600 Thành viên

3 Võ Thị Ngọc Trinh K204110610 Thành viên

4 Trương Đỗ Đăng Khoa K204110598 Thành viên

5 Tô Hoài Phúc K204111806 Thành viên

6 Đỗ Thị Minh Tâm K204111807 Thành viên

TP. Hồ Chí Minh, Ngày 02 tháng 01 năm 2023

 BẢNG PHÂN CÔNG CÔNG VIỆC
STT HỌ VÀ TÊN MSSV CÔNG VIỆC

1 Nguyễn Trần Bích Ngọc K204110602 - Phân công công việc nhóm
(Nhóm trưởng)
- Quản lý tiến độ công việc chung
- Chức năng hồ sơ người dùng
- Layout trang Giới thiệu
- Giao diện trang Hồ sơ người dùng
- Giao diện trang Giới thiệu
- Đưa website lên host

2 Lê Thị Trà My K204110600 - Trình bày khảo sát website liên quan
- Giao diện trang Liên hệ
- Giao diện trang Chức năng nhắn tin
- Giao diện trang Home
- Layout trang Home
- Layout trang Liên hệ
- Chức năng trang Home

3 Võ Thị Ngọc Trinh K204110610 - Chức năng đăng ký/đăng nhập

- Layout trang Cửa hàng
- Giao diện trang đăng ký/ đăng nhập
- Giao diện trang Cửa hàng
- Slide báo cáo
- User Persona

4 Trương Đỗ Đăng Khoa K204110598 - Chức năng mua sắm

- Layout trang Admin
- Sitemap
- Giao diện chức năng Giỏ hàng
- Giao diện chức năng BackEnd:
Dashboard, Quản lý sản phẩm, Nhân

1
 viên, Biểu đồ, Đăng nhập, Đăng ký.

5 Tô Hoài Phúc K204111806 - Lý do chọn đề tài

- Công nghệ sử dụng
- Layout trang Sản phẩm chi tiết
- Giao diện trang Sản phẩm chi tiết
- Wireframe

6 Đỗ Thị Minh Tâm K204111807 - Mục tiêu đề tài

- Giao diện chức năng Bài viết
- Layout trang Bài viết
- Tổng hợp Word

2
MỤC LỤC
1.1. Trình bày khảo sát website liên quan 6
1.1.1 So sánh các Website liên quan 6
1.1.2 Tính năng của các website liên quan 11
1.1.3 Đề xuất tính năng website cho nhóm 15
1.2. Lý do chọn đề tài 15
1.3. Mục tiêu đề tài 17
1.4. User Persona 18
1.5. Công nghệ sử dụng 18
1.5.1. Visual Studio Code 18
1.5.2. HTML, CSS, JavaScript 19
1.5.3. Bootstrap 20
1.5.4.Figma 21
1.5.5. Photoshop 22
1.5.6. Google Drive 23
1.5.7. Diagram 24
1.5.8. Notion 24
2.1. Chức năng website: 26
2.1.1. Đăng ký - Đăng nhập: 27
2.1.2. Mua sắm: 28
2.1.2.1. Giao diện mua sắm, sản phẩm: 28
2.1.2.2. Giao diện giỏ hàng: 29
2.1.2.3. Giao diện thanh toán: 30
2.1.3. Quản lý hồ sơ cá nhân: 31
2.1.3.1. Giao diện chính: 31
2.1.3.2 Thiết lập tài khoản: 32
2.1.3.3. Tình trạng đơn hàng: 33
2.1.3.3.1. Chờ xác nhận: 33
2.1.3.3.2. Chờ lấy hàng: 34
2.1.3.3.3. Đang giao: 34
2.1.3.3.4. Đánh giá: 34
2.1.3.3.5. Đã hủy/Trả hàng/Hoàn tiền: 35
2.1.3.4. Cài đặt: 36
2.1.4. Tương tác bài viết hệ thống, đánh giá, hỏi đáp: 36
2.1.4.1. Bài viết: 37
2.1.4.2. Đánh giá: 37

3
 2.1.4.3. Hỏi đáp: 38
2.1.5. Nhận thông báo: 38
2.2. Layout: 40
2.2.1. Layout trang chủ: 40
2.2.2. Layout trang Cửa hàng: 41
2.2.3. Layout trang Giới thiệu: 42
2.2.4. Layout trang sản phẩm chi tiết: 43
2.2.5. Layout trang blog: 44
2.2.6. Layout trang Blog chi tiết 45
2.2.7. Layout trang Liên hệ: 46
2.2.8. Layout trang Admin: 47
2.3. Wireframe: 47
2.4. Mockup: 47
3.1. Sitemap của website: 48
3.1.1. Sitemap giao diện quản trị viên: 48
3.1.2. Sitemap giao diện người dùng: 48
3.2. Các trang chính: 49
3.2.1. Giao diện trang Trang chủ 49
3.2.2. Giao diện trang Cửa hàng 53
3.2.3. Giao diện trang Giới thiệu 53
3.2.4. Giao diện trang Blog 54
3.2.5. Giao diện trang Liên hệ 57
3.2.6. Giao diện trang Đăng nhập/Đăng ký 58
3.3. BackEnd (Trang Admin) 58
3.3.1. Giao diện trang Dashboard 59
3.3.2. Giao diện trang Quản lý sản phẩm 60
3.3.3. Giao diện trang Biểu đồ 61
3.3.4. Giao diện trang Trang 62
3.3.5. Giao diện trang Nhân viên 63
3.3.6. Giao diện trang Đăng nhập/Đăng ký 63
3.4. Giao diện trên Điện thoại 65
3.2.1. Giao diện trang Trang chủ 65
3.2.2. Giao diện trang Cửa hàng 66
3.2.3. Giao diện trang Giới thiệu 67
3.2.4. Giao diện trang Blog 68
3.2.5. Giao diện trang Liên hệ 70

4
 3.2.6. Giao diện trang Admin 71
3.5. Một số đoạn code tiêu biểu 73
3.6. Đưa website lên host 75
3.6.1. Các bước đưa website lên host sử dụng Github 75
3.6.2. Truy cập website 77
4.1 Kết quả đạt được so với mục tiêu ban đầu 78
4.2. Hạn chế chưa làm được: 78
4.3. Giải pháp khắc phục những vấn đề chưa đạt 78
4.4. Hướng phát triển 78

5
CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI WEBSITE
1.1. Trình bày khảo sát website liên quan
Trong quá trình nghiên cứu để thực hiện đồ án, nhóm đã lựa chọn 4 website cùng lĩnh
vực kinh doanh bánh ngọt để tham khảo và đánh giá, đó là:
● Klong: https://klong.com.vn/
● Fahasa: https://www.fahasa.com/
● Nhà sách Phương Nam: https://nhasachphuongnam.com/vi/
● Deli VietNam: https://vppdeli.vn/
1.1.1 So sánh các Website liên quan

Nhằm có định hướng đúng đắn cho việc phát triển Website của nhóm, chúng em đưa
ra một số ưu, nhược điểm của 4 website trên. Cụ thể như sau:

Website Ưu điểm Nhược điểm Mức giá sản phẩm

- Đầy đủ các nội - Font chữ đơn giản và chỉ

dung và thông tin dùng 01 font cho toàn bộ
cần thiết của một website, tạo cảm giác khá
website, tuy nhiên đơn điệu, không thu hút
chỉ ở mức cơ bản. người dùng.
- Hình ảnh và nội - Màu sắc website không
- Giá sản phẩm dao
dung sản phẩm khá đồng bộ với màu của logo,
động từ: 10.000 -
đầy đủ. sử dụng các màu cơ bản
150.000.
- Hỗ trợ thanh toán xanh lá - đỏ - vàng, thiếu
Klong - Giá các sản phẩm
qua ATM. sáng tạo và thu hút.
khá đa dạng, phù
- Đặt hàng nhanh - Hình ảnh chưa thực sự bắt
hợp túi tiền học
không cần phải mắt, chỉ hiện thị ảnh minh
sinh sinh viên.
đăng nhập/ đăng ký họa. Banner quảng cáo tại
để thanh toán. các webpage đều giống
- Có tích hợp các nhau, không linh hoạt và
trang mạng xã hội không cập nhật banner các
vào website. chương trình khuyến mãi.
- Mức giá sản phẩm - Website ít triển khai các

6
 khá đa dạng, phù chương trình khuyến mãi,
hợp với phân khúc hầu như là không và không
khách hàng là học có update thường xuyên các
sinh sinh viên. mã giảm giá cũng như
phiếu quà tặng như trên các
sàn thương mại điện tử
Shopee, Lazada, Tiki, ...
- Khung chat với chúng tôi
qua Messenger khi click
vào biểu tượng thì xảy ra
lỗi, không tương tác được.
- Chưa có hiệu ứng để tạo
nên một website động bắt
mắt người xem.

- Đầy đủ các nội - Chưa thiết lập khung hỗ

dung và thông tin trợ chatbox với người dùng.
cần thiết của một - Thiết lập quá nhiều các
website. phần trong giao diện trang
- Có thanh điều chủ khiến người dùng khá
hướng, thiết kế chi rối trong việc tìm kiếm các
tiết cho từng danh thông tin cần thiết. - Giá sản phẩm dao
mục sản phẩm hiện - Không hiển thị danh mục động từ: 10.000 -
Fahasa
trên trang chủ. các sản phẩm bán chạy cho 6.000.000.
- Màu sắc của người dùng tham khảo.
website đồng bộ - Ít mã giảm giá cũng như
với logo của thương mã vận chuyển cho khách
hiệu, hình ảnh đầu hàng khi mua sắm.
tư thiết kế đẹp, có - Banner không scroll được
sáng tạo, banner và chỉ hiện khi chương trình
thay đổi theo các lớn diễn ra.

7
chương trình - Giá sản phẩm ở nhiều
khuyến mãi. phân khúc khách hàng, khó
- Hình ảnh và nội định vị được tệp khách
dung sản phẩm đa hàng mục tiêu.
dạng, chi tiết và
đầy đủ. Ngoài các
sản phẩm kinh
doanh là văn phòng
phẩm còn kinh
doanh nhiều doanh
mục hơn như: đồ
chơi, gấu bông, quà
lưu niệm,...
- Có hiệu ứng giúp
website thêm sinh
động.
- Có tích hợp nhiều
hình thức thanh
toán như Internet
Banking, Momo,
Zalo Pay,... và hiện
dưới phần footer
của website, rất
trực quan.
- Có tích hợp các
trang mạng xã hội
vào website.
- Đặt hàng nhanh
không cần phải
đăng nhập/ đăng ký

8
 để thanh toán.
- Có form đăng ký
nhận bản tin ở phần
footer.

- Đầy đủ các nội

dung và thông tin
cần thiết của một
- Khi thanh toán yêu cầu
website.
người dùng cần phải đăng
- Hình ảnh trực
nhập/ đăng ký mới có thể
quan, sống động
thanh toán và đặt hàng.
phối màu sắc đẹp, -
- Font chữ khá đơn điệu,
tích hợp thanh điều
dùng một font cho toàn bộ
hướng và thiết kế
trang web cũng như các
chi tiết cho từng
webpage khác khi click vào.
danh mục sản phẩm
Size chữ khá nhỏ nhìn bố
hiện trên trang chủ. - Giá sản phẩm dao
Nhà sách cục bị trống trải.
- Ngoài các sản động từ: 10.000 -
Phương - Giá sản phẩm trải dài cho
phẩm kinh doanh là 6.000.000.
Nam nhiều phân khúc sản phẩm
văn phòng phẩm
khác nhau với từng phân
còn kinh doanh
khúc khách hàng nên khó
nhiều doanh mục
định bị được tệp khách
hơn như: đồ chơi,
hàng tiềm năng.
gấu bông, quà lưu
- Giá sản phẩm cao hơn so
niệm,...
với các văn phòng phẩm
- Banner thay đổi
bên ngoài vì phải đóng thuế
theo các chương
với nhà nước.
trình khuyến mãi và
theo mùa, bắt trend
tốt.
- Hình ảnh và nội

9
 dung sản phẩm đa
dạng, chi tiết và
đầy đủ.
- Có hiệu ứng giúp
website thêm sinh
động, các chương
trình khuyến mãi
tích hợp thêm đồng
hồ đếm ngày giờ
kết thúc.
- Có tích hợp các
trang mạng xã hội
vào website.
- Có form đăng ký
nhận bản tin ở phần
footer.

- Đầy đủ các nội - Font chữ đơn giản và chỉ

dung và thông tin dùng 01 font cho toàn bộ
cơ bản của một website, tạo cảm giác khá
website. đơn điệu, không thu hút
- Hình ảnh và nội người dùng.
dung sản phẩm khá - Màu sắc website không - Giá sản phẩm dao
Deli đầy đủ. đồng bộ với màu của logo, động từ: 10.000 -
VietNam - Hỗ trợ thanh toán sử dụng màu nóng đỏ và 150.000.
qua ATM và có vàng khiến người dùng khá
hiện danh sách các nhức mắt.
ngân hàng dưới - Banner chỉ là những hình
thanh footer của ảnh sản phẩm để lướt qua
website. lướt lại, không đầu tư hoàn
- Có tích hợp các chỉnh rất sơ sài.

10
 trang mạng xã hội - Sản phẩm đưa lên website
vào website. không đa dạng, chi tiết như
- Đặt hàng nhanh trên các sàn thương mại
không cần phải điện tử.
đăng nhập/ đăng ký - Không có hỗ trợ chức
để thanh toán. năng chatbox trực tiếp với
người dùng.
- Không tích hợp form đăng
ký để nhận bản tin.
- Chưa có hiệu ứng để tạo
nên một website động bắt
mắt người xem.

1.1.2 Tính năng của các website liên quan

Nhà sách
Webpage/ Deli
Nội dung Klong Fahasa Phương
Tính năng VietNam
Nam

Xác nhận danh tính khách

Đăng nhập hàng, nếu khách hàng
muốn mua sản phẩm.

Xác nhận danh tính khách

hàng, nếu khách hàng
Đăng ký
muốn đăng nhập tài khoản
vào website để mua hàng.

Banner thu hút, mang

Banner thông điệp thương hiệu.
Có thể scroll qua lại.

11
 Khách hàng tìm kiếm sản
phẩm mình có nhu cầu
Tìm kiếm
nhanh hơn trên thanh tìm
kiếm.

Thể hiện đặc điểm, mô tả

cơ bản về website, nội
Trang chủ
dung liên quan đến
website.

Các thông tin bên lề về

Trang tin
các sản phẩm, thông tin về
tức, sự
khuyến mãi, sự kiện sắp
kiện/Blog,...
tới,...

Cung cấp thông tin chi tiết

về quá trình hình thành,
quy mô, thành tựu, câu
Trang giới
chuyện thương hiệu, triết
thiệu
lý kinh doanh, tầm nhìn
sứ mệnh, … của doanh
nghiệp.

Hiển thị danh sách sản

phẩm, phân theo danh
mục, sản phẩm theo nhiều
cấp, hiển thị chi tiết sản
Sản phẩm phẩm:
- Sản phẩm ở các trang:
Đầy đủ các thông tin từ
giá cả (giá cũ, giá khuyến
mãi), hình ảnh.

12
 - Chi tiết sản phẩm: đầy
đủ hình ảnh, giá cả, thành
phần, mô tả, … cho chọn
số lượng.

Bộ lọc sản phẩm theo

từng đặc điểm sản phẩm
như giá, loại sản phẩm, …
Lọc sản
để có thể tìm chính xác
phẩm
loại sản phẩm theo nhu
cầu của khách hàng một
cách nhanh chóng.

Khách hàng có thể đánh

giá sản phẩm mình đã
mua hoặc xem những
Đánh giá
đánh giá về sản phẩm đó
sản phẩm
để có thể xem xét kỹ sản
phẩm và ra quyết định
mua hàng.

Có đầy đủ thông tin về

cửa hàng như địa chỉ,
email, sđt, … ngoài ra ung
Trang liên cấp một form để khách
hệ hàng gửi yêu cầu thắc mắc
về sản phẩm. Tích hợp
Google Maps để xác định
vị trí cửa hàng.

Trang chính Khách hàng có thể hiểu rõ

sách hơn về các chính sách của

13
 doanh nghiệp như chính
sách bán hàng, giao hàng,
trả hàng,...

Biết những sản phẩm

mình đã chọn là gì, số
lượng là bao nhiêu. Khách
Giỏ hàng có thể tùy chỉnh thay
hàng/Đặt đổi số lượng sản phẩm đã
hàng mua, thêm hoặc xóa bớt
tùy theo nhu cầu của họ
và đặt hàng theo sản phẩm
đã chọn.

Tích hợp các hình thức

Thanh toán thanh toán trực tuyến như:
online Momo, Zalo Pay, Internet
Banking,...

Cho phép khách hàng và

Chatbox (hỗ
người quản lý Website có
trợ trực
thể chat trực tiếp với nhau
tuyến)
thông qua website.

Liên kết với các trang

mạng xã hội để khách
Liên kết hàng có thể tương tác,
mạng xã hội nhận nhiều thông tin theo
dõi về doanh nghiệp dễ
dàng hơn.

Đăng ký Để khách hàng lưu lại địa

nhận thông chỉ email trên website để

14
 tin sau này có thể dễ dàng
Chăm sóc khách hàng
(CSKH).

Website có thể tương tác

Responsive
trên nhiều thiết bị.

1.1.3 Đề xuất tính năng website cho nhóm

Từ những so sánh trên, nhóm có cơ sở đến tối ưu những thành phần của website như:
● Định hình cấu trúc website sao cho khách hàng dễ tìm kiếm và truy cập.
● Điều chỉnh các tính năng website phù hợp với hành vi người dùng để thu hút
tương tác, mua hàng.
● Thông tin, nội dung trên website trình bày đầy đủ, rõ ràng của một website bán
hàng tiêu chuẩn.
● Thiết kế giao diện website từ bố cục, màu sắc, font chữ,... phải đồng bộ, hài
hòa với bảng màu của logo thương hiệu cũng như thu hút, kích thích thị giác
người dùng.
Do đó, nhóm sẽ cân nhắc giữ lại những tính năng phù hợp, học hỏi và phát huy những
ưu điểm, tránh mắc phải những nhược điểm mà chúng em nhận thấy của 4 website
trên. Chúng em quyết định đưa các trang và chức năng triển khai vào website của
nhóm như sau:
● Các trang chính: Đăng nhập, đăng ký, trang chủ, các trang sản phẩm, chi tiết
sản phẩm, blog, thông tin, chính sách, hồ sơ người dùng, admin, giới thiệu, liên
hệ, thanh toán, giỏ hàng.
● Chức năng: Đăng nhập/ Đăng ký, mua sắm, viết đánh giá, tìm kiếm sản phẩm,
liên kết mạng xã hội, chatbox (hỗ trợ trực tuyến), responsive.

1.2. Lý do chọn đề tài

Văn phòng phẩm là những vật dụng nhỏ, đơn giản được dùng trong văn phòng
làm việc, được dùng trong việc học tập, ghi chép của học sinh sinh viên, hay thậm chí
trong cả đời sống hằng ngày của mọi người. Ngày nay, công nghệ ngày càng phát

15
triển, việc ghi chép, sản xuất, hay các hoạt động thường nhật cũng được thực hiện
bằng cách ứng dụng nhiều công nghệ hiện đại. Tuy nhiên, vai trò của các đồ dùng văn
phòng phẩm và sự tiện lợi của nó là không thể phủ nhận.
Một thực tế không thể phủ nhận rằng, tập vở, bút viết cùng những đồ dùng văn
phòng phẩm là những vật dụng cần thiết, không thể thiếu trong cặp sách của học sinh,
sinh viên mỗi lần đến trường. Thậm chí, với nhân viên văn phòng, những đồ dùng nhỏ
xinh này cũng giữ một vai trò quan trọng. Sử dụng giấy, bút trong việc in ấn tài liệu,
hóa đơn, chứng từ, hay dùng chúng để ghi chép, ghi chú những thông tin cần thiết.
Hay các dụng cụ văn phòng phẩm khác như khay đựng tài liệu, lịch để bàn, các đồ
dùng trang trí bàn làm việc cũng sẽ mang lại cho họ không gian làm việc hiệu quả,
thoải mái. Bên cạnh đó, sự lan rộng của phương pháp ghi chú Sketchnote, ghi chú một
cách sáng tạo bằng việc kết hợp giữa chữ viết và những hình ảnh vẽ tay đơn giản, đã
giúp cho đồ dùng văn phòng phẩm trở nên cần thiết hơn. Sketchnote có thể được áp
dụng để ghi chú bài giảng, thông tin quan trọng, lên kế hoạch học tập, hay cả việc
trình bày ý tưởng,,...Trong cuộc sống hằng ngày, chúng ta cũng thấy việc ghi chép, sử
dụng văn phòng khá phổ biến: một tờ giấy ghi chép những việc ta cần làm ngày hôm
nay, một quyển lịch được đánh dấu những kế hoạch, sự kiện quan trọng trong tháng
tới, một tờ giấy ghi chú nhắc nhở dán trên cửa tủ lạnh,...
Cùng với đó là sự phát triển của khoa học – công nghệ, đặc biệt là công nghệ
thông tin, đã làm thay đổi cách thức kinh doanh và thương mại trên thế giới nói chung
cũng như Việt Nam nói riêng. Sự chuyển biến từ loại hình kinh doanh truyền thống
sang giao dịch trực tuyến hay còn gọi là thương mại điện tử không chỉ mang lại lợi ích
cho nhà sản xuất, doanh nghiệp mà còn có tạo nhiều điều kiện thuận lợi cho người tiêu
dùng bởi nó vừa tiết kiệm thời gian, chi phí vừa giúp người mua hàng dễ dàng tiếp cận
với những thông tin của sản phẩm.
Bên cạnh đó là tâm lý của người tiêu dùng khi mua hàng, họ lo ngại khi phải đến
tận những trung tâm thương mại, siêu thị để mua những sản phẩm nhỏ lẻ, giá trị
không cao. Ngại ra đường, ngại đi xa, ngán ngẩm với cảnh phải xếp hàng để chờ đến
lượt thanh toán hay phải chen chúc nhau để tìm ra sản phẩm ưng ý khiến cho họ mong
muốn tìm đến một phương thức mua hàng mới tiện lợi hơn, nhanh chóng hơn đó là
mua sắm trực tuyến. Dựa trên những phân tích trên và nắm bắt được nhu cầu tiêu

16
dùng của khách hàng đối với sản phẩm văn phòng phẩm, nhóm chúng em đã hình
thành ý tưởng Phát triển web kinh doanh các sản phẩm văn phòng phẩm - FLASHY
với mong muốn cung cấp cho khách hàng những sản phẩm đảm bảo chất lượng mà họ
cần, cùng với dịch vụ tiện ích, giao hàng nhanh chóng để mang lại sự tiện lợi nhất cho
người tiêu dùng.
1.3. Mục tiêu đề tài
Theo báo cáo của Blue Weave, thị trường văn phòng phẩm và cung ứng văn phòng
phẩm Việt Nam trị giá 381,7 triệu USD vào năm 2020 và được dự báo sẽ đạt 512,4
triệu USD vào năm 2027, với tốc độ CAGR là 6,2% trong giai đoạn 2021-2027 (giai
đoạn dự báo). Cùng với sự gia tăng của số lượng trường học và sự phát triển của hệ
thống giáo dục, lĩnh vực văn phòng phẩm ngày càng được thúc đẩy và có tiềm năng
hơn bao giờ hết.
Hiểu được điều đó, Flashy ra đời với mục tiêu đem đến trải nghiệm mua sắm văn
phòng phẩm tiện lợi nhất cho người tiêu dùng. Với nhu cầu sử dụng ngày càng cao,
Flashy sẽ cung cấp cho khách hàng đa dạng các loại mẫu mã và số lượng, cùng với
những dịch vụ tuyệt vời ngay trên nền tảng app di động. Khách hàng sẽ có thể tìm
thấy mọi sản phẩm mình cần ngay nhanh chóng, mua sắm tiện lợi, giao hàng tận nơi
và không phải lo lắng về vấn đề di chuyển, đi lại hay thanh toán.
Với phương châm “mua sắm tinh gọn - giao nhanh chóng - nhận liền tay”, Flashy
sẽ hỗ trợ khách hàng trên mọi phương diện để có thể đáp ứng nhu cầu nhanh nhất,
đem đến trải nghiệm tuyệt vời cho khách hàng. Với giao diện thân thiện, dễ sử dụng
và quản lý với đầy đủ các tính năng, khách hàng hoàn toàn có thể tối đa hóa thời gian
mua sắm, tiết kiệm thời gian mà vẫn có thể sở hữu những sản phẩm chất lượng và phù
hợp nhất với mình.

17
1.4. User Persona

Hình 1. User Persona

1.5. Công nghệ sử dụng
1.5.1. Visual Studio Code

Hình 2. Logo VS Code

Phần mềm này cho phép người dùng biên tập, soạn thảo các đoạn lập trình trong
quá trình xây dựng, thiết kế cũng như phát triển website một cách nhanh chóng. Visual
Studio Code, hay còn gọi là VS Code, vận hành mượt mà trên các nền tảng Windows,
macOs, Linux.
VS Code cũng luôn có những cải tiến và tạo ra đa dạng các tiện ích đi kèm từ đó
giúp cho các lập trình viên sử dụng dễ dàng hơn. Trong đó có thể kể đến những ưu
điểm sau:

18
● Đa dạng ngôn ngữ lập trình giúp người dùng thỏa sức sáng tạo và sử dụng như
HTML, CSS, JavaScript, C++,…
● Ngôn ngữ, giao diện tối giản, thân thiện, giúp các lập trình viên dễ dàng định hình
nội dung.
● Các tiện ích mở rộng rất đa dạng và phong phú.
● Tích hợp các tính năng quan trọng như tính năng bảo mật (Git), khả năng tăng tốc
xử lý vòng lặp (Debug),…
● Đơn giản hóa việc tìm quản lý hết tất cả các Code có trên hệ thống
Với những công dụng đó, với phần mềm VS Code, nhóm đã tiến hành cùng nhau
viết những đoạn mã lập trình, xây dựng và phát triển trang web bán hàng các sản
phẩm văn phòng phẩm.
1.5.2. HTML, CSS, JavaScript
❖HTML - HyperText Markup Language
Chức năng chính của HTML là xây dựng cấu trúc siêu văn bản trên một website, hoặc
khai báo các tập tin kỹ thuật số (media) như hình ảnh, video, nhạc. HTML thường
được dùng để phân chia các đoạn văn, heading, links, blockquotes,…
Với HTML, bạn sẽ có thể:
● Thêm tiêu đề, định dạng đoạn văn, ngắt dòng điều khiển.
● Tạo danh sách, nhấn mạnh văn bản, tạo ký tự đặc biệt, chèn hình ảnh, tạo liên
kết.
● Xây dựng bảng, điều khiển một số kiểu mẫu
❖CSS - Cascading Style Sheets
Nếu HTML cung cấp các công cụ thô cần thiết để cấu trúc nội dung trên một trang
web thì CSS sẽ giúp định hình kiểu nội dung này để trang web xuất hiện trước người
dùng theo một cách đẹp hơn. Với CSS, chúng ta có thể:
● Tạo kiểu, định dạng cho các thành phần được viết bởi ngôn ngữ đánh dấu
(HTML)
● Kiểm soát màu sắc của văn bản, kiểu phông chữ, khoảng cách giữa các đoạn
văn, cách các cột được đặt kích thước và bố cục, hình ảnh hoặc màu nền nào
được sử dụng, thiết kế bố cục, các biến thể hiển thị cho các thiết bị và kích
thước màn hình khác nhau cũng như hàng loạt các hiệu ứng khác.

19
❖JavaScript
JS có tác dụng giúp chuyển website từ trạng thái tĩnh sang động, tạo tương tác để
cải thiện hiệu suất máy chủ và nâng cao trải nghiệm người dùng. Hiểu đơn giản,
JavaScript là ngôn ngữ được sử dụng rộng rãi khi kết hợp với HTML/CSS để thiết kế
web động.
Tóm lại, bằng việc kết hợp lại các tính năng được hỗ trợ bởi HTML, CSS và JS, nhóm
đã:
● Tạo “sườn” website bằng HTML
● Thiết kế, trang trí, biến website trở nên nhiều màu sắc hơn với CSS
● Và sử dụng JS để tạo các tính năng động cho website.
1.5.3. Bootstrap
Trải nghiệm người dùng là một điều quan trọng cần lưu ý khi xây dựng website. Và
tính năng responsive giúp website tương thích với các thiết bị khác nhau là rất cần
thiết. Để có thể xây dựng website chuẩn responsive, nhóm đã sử dụng Bootstrap, một
framework bao gồm các HTML, CSS, Javascript template hỗ trợ thiết kế website thân
thiện với các thiết bị điện tử, thiết bị cầm tay. Đây là một bộ sưu tập miễn phí các mã
nguồn mở và công cụ để tạo ra một website. Bootstrap có những đặc điểm nổi bật, tiêu
biểu như:
● Dễ sử dụng: Bootstrap dự trên HTML, CSS, JavaScript. Do đó chỉ cần hiểu biết
về 3 mã nguồn này là có thể sử dụng Bootstrap.
● Responsive: Sử dụng hệ thống lưới Grid System, Bootstrap mặc định hỗ trợ
responsive trên các thiết bị điện thoại, máy tính bảng,...Bootstrap có khả năng
tự động điều chỉnh kích thước trang web tùy theo kích thước của trình duyệt,
hay thiết bị.
● Tương thích với trình duyệt: Nó tương thích với tất cả các trình duyệt (Chrome,
Firefox, Internet Explorer 9, Safari, and Opera). Tuy nhiên, với trình duyệt IE,
chỉ hỗ trợ IE9 trở lên vì IE8 không hỗ trợ HTML5 và CSS3.

20
1.5.4.Figma

Hình 3. Logo Figma

Với thành công của phiên bản dùng thử vào cuối năm 2015, Figma đã chính thức ra
mắt vào tháng 09 năm 2016 và tạo được vị trí riêng của mình trong cộng đồng thiết
kế. Figma là một ứng dụng gồm nhiều công cụ thiết kế mạnh mẽ trên nền tảng
website. Với Figma, bạn có thể sáng tạo không giới hạn giao diện người dùng
(UI/UX), thiết kế tạo mẫu, tạo bài đăng trên các mạng xã hội và nhiều dự án thiết kế
khác.
Nhóm đã sử dụng phần mềm Figma trong việc thiết kế giao diện, bản mẫu cho
trang web dự án của nhóm nhờ việc tận dụng những tính năng của Figma, có thể kể
đến như:
● Tính tương thích cao: Là một phần mềm trên nền tảng website, Figma có thể
được truy cập và sử dụng trên hầu hết các hệ điều hành phổ biến hiện nay như
Windows, MacOS hay thậm chí là Linux, chỉ cần thiết bị của bạn được kết nối
internet.
● Hỗ trợ làm việc nhóm hiệu quả: Ưu điểm hàng đầu của Figma phải kể đến tính
cộng tác trong thời gian thực. Với Figma, làm việc nhóm từ xa trở nên dễ dàng khi
nó cho phép những người khác trong dự án có thể cộng tác về thiết kế, cung cấp
phản hồi, kiểm tra tiến độ công việc hoặc gắn cờ các vấn đề có thể xảy ra theo thời
gian thực.
● Hỗ trợ lưu trữ dữ liệu đám mây: Figma sử dụng dịch vụ đám mây để lưu trữ và
chỉnh sửa dữ liệu, điều này tương tự như khi bạn thay đổi nội dung trên Google
Docs. Bạn sẽ không còn phải lo lắng về việc ổ cứng đầy dung lượng hay quên sao
lưu vì Figma sẽ tự động thực hiện cho bạn. Rất tiện lợi đúng không nào!

21
● Kho Plugin phong phú: Kho plugin khổng lồ và cực kỳ hữu ích chỉ có ở Figma sẽ
giúp bạn khắc phục được những lỗi nhỏ và tăng hiệu suất làm việc. Việc quản lý
màu sắc, nội dung hình ảnh hay hoạt ảnh đều trở nên dễ dàng hơn bao giờ hết.
● Xuất được file ảnh với độ sắc nét cao: Figma thiết kế hình ảnh dưới dạng vector
nên chất lượng của hình ảnh sẽ không bị giảm khi thay đổi kích thước của chúng.
Hình ảnh xuất ra cũng sẽ giữ được độ sắc nét với nhiều định dạng khác nhau như
PNG, SVG, JPG hay thậm chí là PDF.
● Prototype tích hợp sẵn: Figma cung cấp các prototype, quá trình biến một mockup
tĩnh thành một mockup động và tương tác (hay được gọi là một nguyên mẫu). Đưa
một mô hình tĩnh vào thực tiễn chắc chắn là một trong những bước thú vị nhất - nếu
không muốn nói là thú vị nhất trong quy trình thiết kế. Việc developer hiểu được
flow của người dùng khi thiết kế, cũng như các chức năng và cảm giác mà thiết kế
mang lại, là rất quan trọng
1.5.5. Photoshop

Hình 4. Logo phần mềm Photoshop

Adobe Photoshop là phần mềm thiết kế và chỉnh sửa hình ảnh được sử dụng trên
máy tính Windows hoặc MacOS. Photoshop cung cấp cho người dùng tính năng tạo
và chỉnh sửa hình ảnh, thiết kế ra những tác phẩm nghệ thuật và hình minh họa, thay
đổi hình nền, mô phỏng một bức tranh ngoài đời thực đều có thể được thực hiện bởi
Photoshop.
Với vô số những tính năng của mình, Photoshop trở thành 1 công cụ đóng góp
không nhỏ đến quá trình hoàn thiện bài đồ án của nhóm. Một số tính năng nổi bật của
Ps mà nhóm đã ứng dụng có thể kể đến như:

22
● Chỉnh sửa hình ảnh: Photoshop cho phép bạn đổi màu, thêm bớt, xoá bỏ vật thể.
● Thiết kế banner, quảng cáo: trong thực tế rất nhiều người sử dụng Ps cho quá trình
thiết kế của mình. Lợi dụng khả năng cắt ghép, chỉnh sửa ảnh linh hoạt; mà chúng
ta có thể sử dụng các hình ảnh có sẵn để tạo ra các sản phẩm thiết kế mang dậm dấu
ấn cá nhân. Những sản phẩm này được sử dụng để đăng lên website.
● Thiết kế web, icon, apps: Photoshop cũng thường xuyên được sử dụng để thiết kế
web. Ps cũng có thể được để thiết kế các icon đơn giản, các giao diện của website.
1.5.6. Google Drive

Hình 5. Logo tiện ích Google Drive

Google Drive là dịch vụ lưu trữ và đồng bộ hóa tệp cho Google phát triển. Hiện
nay, đây là một trong những giải pháp lưu trữ tốt nhất, được mọi người sử dụng phổ
biến, đặc biệt trong làm việc nhóm. Google Drive cũng cung cấp các ứng dụng hỗ trợ
văn phòng trực tuyến và ngoại tuyến như: Google Docs, Google Sheets, Google
Slides.
Với các tính năng của Google Drive, làm việc nhóm trở nên dễ dàng, đơn giản hơn:
● Lưu trữ và sao lưu dữ liệu
● Chia sẻ dữ liệu: Với tính năng này, nhóm có thể chia sẻ dữ liệu chỉ bằng một đường
link liên kết, điều này giúp tiết kiệm rất nhiều thời gian, dung lượng khi làm việc
nhóm.
● Xem tệp với nhiều định dạng
● Liên kết với các ứng dụng khác của google như: google doc, sheet,...

23
1.5.7. Diagram

Hình 6. Logo phần mềm Diagram

Draw.io được biết đến là một website cung cấp nền tảng cho người dùng vẽ các
biểu đồ, mô hình, sơ đồ đơn giản. Đặc biệt, người dùng có thể sử dụng online không
cần cài đặt vào máy, không bị giới hạn số lần sử dụng và hoàn toàn miễn phí.
Công cụ này sẽ hỗ trợ hiệu quả khi bạn đang làm công việc liên quan đến hành
chính văn phòng như: Xây dựng quy trình làm việc trong công ty cho nhân viên, quy
trình vận hành trong kinh doanh, quy trình sản xuất,… Ngoài ra, bạn còn có thể sử
dụng hiệu quả trong học tập và vẽ những sơ đồ mindmap sử dụng cho nhiều mục đích
khác nhau.
Nhóm đã ứng dụng công cụ này trong việc vẽ lên những sơ đồ quy trình, site map,
thiết kế layout cho website….
1.5.8. Notion

Hình 7. Logo ứng dụng Notion

Notion là một ứng dụng ghi chép giúp người dùng có thể dễ dàng lên kế hoạch, ghi
chú, lập thời gian biểu,... Tất cả những dữ liệu trên sẽ được lưu trữ vào cùng một
không gian để bạn có thể dễ dàng tìm kiếm lại khi cần.

24
 Cấu trúc sắp xếp của file ghi chú của Notion cũng khá đặc biệt. Tương tự như lưu
trữ trên máy tính hoặc laptop, Notion cho phép bạn lưu trữ file thành nhiều tầng khác
nhau. Trong một thư mục lớn, bạn có thể tạo nhiều thư mục nhỏ khác, và trong những
thư mục đó bạn cũng có thể tạo thêm những thư mục khác nữa.
Bằng việc ứng dụng các tính năng của Notion, nhóm đã tạo một không gian làm việc
chung trên nền tảng này. Tại đây, các thành viên trong nhóm có thể theo dõi tiến độ
công việc, phân công công việc, chia sẽ dữ liệu, tài nguyên và cũng đảm bảo tính bảo
mật cao.

25
CHƯƠNG 2: THIẾT KẾ LAYOUT WEBSITE
2.1. Chức năng website:

Hình 8. Use Case tổng

26
2.1.1. Đăng ký - Đăng nhập:

Hình 9. Use Case Đăng nhập, đăng ký

- Đăng ký: điền tên đăng nhập, mật khẩu, số điện thoại. Hoặc đăng ký bằng tài
khoản Google, Facebook.
- Đăng nhập bằng 2 hình thức: điền tên đăng nhập - mật khẩu hoặc đăng nhập
bằng tài khoản Google, Facebook.
- Quên mật khẩu.

27
2.1.2. Mua sắm:
2.1.2.1. Giao diện mua sắm, sản phẩm:

Hình 10. Use Case Sản phẩm

- Thêm thanh tìm kiếm tại header: hỗ trợ thanh tra cứu, tìm kiếm nhanh sản
phẩm, kết hợp với bộ lọc cơ bản (lọc theo mức giá, theo độ bán chạy của sản
phẩm, bảng chữ cái).
- Thanh danh mục điều hướng (Header) đến các phân loại sản phẩm. Trong các
phân loại sản phẩm, có danh mục “In ấn sản phẩm theo yêu cầu”.
- Hệ thống tự động đề xuất các sản phẩm bán chạy, hoặc đang giảm giá.

28
 - Phần bày biện sản phẩm được sắp xếp theo bố cục 2 sản phẩm 1 hàng, cho
phép ấn trực tiếp vào sản phẩm để điều hướng đến trang nội dung chi tiết của
sản phẩm.
- Tại trang nội dung chi tiết của sản phẩm được trình bày thông tin, hình ảnh sản
phẩm, phần đánh giá sản phẩm, phần hỏi đáp trực tiếp qua bình luận. Đồng thời
hỗ trợ 3 nút tương tác tại footer: Thêm vào giỏ hàng (Nếu khách hàng chưa
đăng nhập tài khoản, hiện thông báo yêu cầu “Đăng nhập” hoặc “Tạo tài
khoản” để tiếp tục thao tác), Mua ngay, Nhắn tin (dành cho khách hàng muốn
được tư vấn kín bởi nhân viên).
2.1.2.2. Giao diện giỏ hàng:

Hình 11. Use Case Giỏ hàng

- Cho phép hiển thị số lượng sản phẩm trong giỏ và truy cập nhanh thông qua
icon cố định trên thanh header của ứng dụng.
- Hỗ trợ các thao tác: thêm, bớt số lượng sản phẩm; xóa sản phẩm khỏi giỏ hàng;
chọn, bỏ sản phẩm cần thanh toán; xem lịch sử sản phẩm đã mua tại mục “Mua
lại”.

29
 - Hiển thị số tiền cần thanh toán với những sản phẩm đang chọn mua trong giỏ.
Đề xuất thêm các sản phẩm cho người dùng ngay bên dưới giỏ hàng.
- Nút “Thanh toán” để chuyển tiếp đến giao diện thanh toán.
2.1.2.3. Giao diện thanh toán:

Hình 12. Use Case Đặt hàng - Thanh toán

- Hiển thị danh sách sản phẩm đã chọn mua, tiền ship, tổng giá tiền phải thanh
toán.
- Hiển thị lại thông tin giao nhận. Cho phép thêm, chỉnh sửa thông tin giao nhận.
- Chọn phương thức thanh toán.
- Textbox cho phép người dùng nhập mã giảm giá (có thể bỏ qua).
- Listview gồm 3 mục:
- Footer hiển thị tổng tiền và nút “Đặt hàng”.

30
2.1.3. Quản lý hồ sơ cá nhân:

Hình 13. Use Case Hồ sơ người dùng

2.1.3.1. Giao diện chính:
- Cho phép khách hàng thay đổi ảnh đại diện bằng thao tác nhấn vào ảnh đại
diện.
- Trên khung ảnh nền, góc phải có biểu tượng “Cài đặt” và “Thông báo”.
- Bên dưới hình ảnh đại diện khách hàng là thanh theo dõi đơn hàng, bao gồm 5
danh mục: Chờ xác nhận, Chờ lấy hàng, Đang giao, Đánh giá, Đã hủy/Trả
hàng.

31
 - Sau thanh theo dõi đơn hàng, là listview các chức năng: Sản phẩm yêu thích
(Hiển thị danh sách sản phẩm đã yêu thích, cho phép xóa sản phẩm khỏi danh
sách yêu thích), Thiết lập tài khoản, Sổ địa chỉ, Chính sách (Hiển thị chính
sách bảo mật và các Điều kiện Điều khoản của Freshy), Hỗ trợ khách hàng
(Cho phép khách hàng Nhắn tin bộ phận chăm sóc khách hàng của Freshy, Báo
cáo lỗi kỹ thuật, Gửi góp ý).
2.1.3.2 Thiết lập tài khoản:
Bao gồm các thông tin được quyền chỉnh sửa/thêm: Tên, Số điện thoại, Email,
Giới tính, Ngày sinh, Địa chỉ giao hàng và ID (không thể chỉnh sửa). Bên cạnh
đó, có 3 mục chức năng đòi hỏi nhiều thao tác phức tạp hơn: Thay đổi mật
khẩu, Tài khoản Ngân hàng, Tài khoản mạng xã hội.
- Thay đổi mật khẩu: Khi nhấn vào mục này, hệ thống hiển thị giao diện với nút
yêu cầu xác minh bảo mật bằng di động. Sau khi ấn nút, hệ thống sẽ gửi mã
OTP (tồn tại trong 10:00 phút) qua tin nhắn cho số điện thoại người dùng đã
đăng ký. Khách hàng sẽ nhập mã OTP và được tiến hành thay đổi mật khẩu
mới.
- Tài khoản ngân hàng: Hiển thị nút “Thêm Tài khoản Ngân hàng” và danh
sách các tài khoản Ngân hàng mà người dùng đã liên kết.
+ Khi ấn chọn “Thêm Tài khoản Ngân hàng”: hệ thống yêu cầu xác minh
bảo mật bằng điện thoại như mục Thay đổi mật khẩu. Sau khi xác minh
sẽ hiển thị giao diện yêu cầu chọn tên Ngân hàng theo danh sách Ngân
hàng có sẵn, yêu cầu điền Tên Tài khoản và Số Tài khoản. Bên dưới
mục điền thông tin là radiobutton yêu cầu người dùng đồng ý với các
chính sách bảo mật của Flashy (Cho phép khách hàng ấn vào “Chính
sách bảo mật” để xem chi tiết chính sách). Sau khi tick chọn
radiobutton, người dùng được nhấn vào nút “Xác nhận” ở cuối trang để
hoàn tất quy trình.
+ Khi người dùng nhấn vào Tài khoản đã liên kết, tài khoản sẽ hiển thị
thông tin chi tiết của Tài khoản gồm: Tên Ngân hàng, Tên Tài khoản, Số
Tài khoản. Bên dưới phần thông tin là 2 nút “Chọn mặc định” (để cài
đặt làm Tài khoản mặc định khi thực hiện thanh toán) và “Xóa Tài

32
 khoản” (yêu cầu xác minh bảo mật bằng điện thoại thêm lần nữa để xác
nhận xóa).
- Tài khoản mạng xã hội: Cho phép người dùng liên kết với Tài khoản Facebook
hoặc Google.
2.1.3.3. Tình trạng đơn hàng:
Khi nhấn vào các danh mục, sẽ hiện ra 1 danh sách các tóm tắt đơn hàng đang
thuộc 1 trong các tình trạng đơn: Chờ xác nhận, Chờ lấy hàng, Đang giao,
Đánh giá, Đã hủy, Trả hàng/Hoàn tiền. Danh sách đơn tóm tắt này được thể
hiện theo định dạng gồm: hình ảnh sản phẩm đầu tiên trong đơn, tên sản phẩm
đó, số lượng đặt, đơn giá sản phẩm, thành tiền (tổng tiền hóa đơn). Khi nhấn
vào đơn hàng sẽ chuyển đến trang thông tin chi tiết của đơn, bao gồm: Thông
tin giao hàng (tên khách hàng, số điện thoại, địa chỉ giao nhận), Tình trạng đơn
hàng, Danh sách các sản phẩm đã đặt (định dạng như danh sách đơn tóm tắt),
Phương thức thanh toán, Mã đơn hàng, Các mốc thời gian quy trình đã diễn ra
(thời gian đặt hàng, thời gian giao hàng, thời gian hoàn thành, thời gian hủy,
thời gian hoàn trả hàng, thời gian hoàn tiền), Nút “Liên hệ” (để khách hàng
nhắn tin trao đổi thắc mắc với shop), Mục “Có thể bạn cũng thích” dưới cùng
để gợi ý thêm sản phẩm cho khách hàng. Ở các trạng thái đơn hàng, nếu chưa
có bất kỳ đơn hàng nào, hệ thống sẽ hiển thị thông báo “Bạn vẫn chưa có đơn
đặt hàng” và nút “Tiếp tục mua sắm” để quay lại trang mua sắm. Bên dưới
cùng, hệ thống gợi ý cho người dùng danh sách các sản phẩm cùng loại, danh
mục với sản phẩm mà người dùng đã xem gần đây. Ngoài ra, với mỗi tình trạng
đơn hàng sẽ có thêm các nút tương tác, hoặc thông tin bổ sung khác nhau.

2.1.3.3.1. Chờ xác nhận:

Hiển thị trạng thái “Đang xác nhận” góc phải trên cùng đơn hàng. Nút “Hủy
đơn” tại góc dưới cùng bên trái đơn: yêu cầu khách hàng cung cấp lý do, và
chờ hệ thống xác nhận hủy. Khi nhấn vào đơn hàng sẽ chuyển đến trang thông
tin chi tiết của đơn.

33
2.1.3.3.2. Chờ lấy hàng:
Hiển thị trạng thái “Đơn vị vận chuyển đang lấy hàng” góc phải trên cùng đơn
hàng. Ngay bên dưới đơn có thêm thời gian (ngày) đơn hàng dự kiến được bàn
giao cho đơn vị vận chuyển. Khi nhấn vào đơn hàng sẽ chuyển đến trang thông
tin chi tiết của đơn.

2.1.3.3.3. Đang giao:

Hiển thị trạng thái “Đang giao hàng” góc phải trên cùng đơn hàng. Ngay bên
dưới đơn có thêm thời gian (ngày) đơn hàng dự kiến đến tay khách hàng. Khi
nhấn vào đơn hàng sẽ chuyển đến trang thông tin chi tiết của đơn.

2.1.3.3.4. Đánh giá:

Chia làm 2 tab: “Chưa đánh giá” và “Đã đánh giá”.
- Tại tab “Chưa đánh giá”: Hiển thị trạng thái “Giao thành công” góc phải
trên cùng đơn hàng. Bên dưới đơn thêm dòng thông tin “Cho phép hoàn
trả hàng đến 23:59 ../../….). Khi nhấn vào đơn hàng sẽ chuyển đến trang
thông tin chi tiết của đơn có giao diện tương tự tình trạng “Chờ lấy
hàng” đồng thời thêm mục “Hóa đơn điện tử” cho phép khách hàng
xuất hóa đơn điện tử nếu có yêu cầu. Thêm nút “Mua lại” cạnh bên nút
“Liên hệ” và footer nút “Đánh giá”, “Trả hàng/Hoàn tiền” (tự mất
sau khi quá hạn thời gian đổi trả).
+ Giao diện sau khi nhấn nút “Đánh giá”: mục 3.4.2.
+ Giao diện sau khi nhấn nút “Trả hàng/Hoàn tiền”: Hiển thị danh
sách sản phẩm trong đơn yêu cầu trả hàng. Khách hàng tick chọn
các sản phẩm cần hoàn trả. Footer nút “Xác nhận hoàn trả” để
tiến hành bước tiếp theo sau khi đã chọn sản phẩm cần đổi trả.
Tại giao diện bước tiếp theo, hiển thị danh sách đã chọn để hoàn
trả. Bên dưới mỗi sản phẩm xuất hiện nút “Lý do hoàn trả”
(Khách hàng nhập/chọn lý do, cập nhật minh chứng là hình ảnh
sản hoặc video. Cả hai bước không được để trống). Mục chọn
phương thức hoàn tiền. Footer nút “Gửi yêu cầu” để gửi yêu cầu

34
 hoàn trả đến hệ thống và hoàn tất quy trình (chỉ thực hiện được
khi toàn bộ sản phẩm đã được cập nhật lý do).
- Tại tab “Đã đánh giá”: Hiển thị lịch sử chi tiết các đánh giá của người
dùng. Cho phép chỉnh sửa đánh giá.

2.1.3.3.5. Đã hủy/Trả hàng/Hoàn tiền:

Gồm 2 tab giao diện.
- Tại tab “Đã hủy”: (Hiển thị trạng thái “Đã hủy” góc phải trên cùng đơn
hàng. Ngay bên dưới đơn có hiển thị thêm lý do hủy đơn của khách. Khi
nhấn vào đơn hàng sẽ chuyển đến trang thông tin chi tiết của đơn, thêm
footer nút “Mua lại” và nút “Chi tiết đơn hủy”
+ Giao diện sau khi nhấn nút “Chi tiết đơn hủy”: Hiển thị trạng
thái “Đã hủy đơn hàng” ở đầu trang, kèm mốc thời gian thực hiện
hủy. Bên dưới là tóm tắt đơn hàng, kèm các thông tin: Yêu cầu
hủy bởi, Yêu cầu vào (thời gian khách hàng chọn hủy đơn), Lý
do, Phương thức thanh toán.
- Tại tab “Trả hàng/Hoàn tiền”: Hiển thị trạng thái “Đang hoàn trả” hoặc
”Hoàn trả thành công” ở góc phải trên cùng đơn hàng. Khi nhấn vào đơn
hàng sẽ chuyển đến trang thông tin chi tiết của đơn, thêm footer nút
“Mua lại” và nút “Chi tiết đơn trả”.
+ Giao diện sau khi nhấn nút “Chi tiết đơn trả”: Hiển thị trạng
thái “Hoàn trả thành công” (khi toàn bộ sản phẩm trong đơn đã
được hoàn trả thành công) hoặc “Đang hoàn trả) ở đầu trang, kèm
các thông tin: Yêu cầu trả bởi, Yêu cầu vào (thời gian khách hàng
chọn trả đơn), Phương thức hoàn tiền. Kế đến là danh sách các
sản phẩm được yêu cầu hoàn trả của đơn hàng đang chọn. Bên
dưới mỗi sản phẩm có lý do trả. Khi nhấn vào sản phẩm sẽ hiện
ra giao diện “Chi tiết trả hàng/hoàn tiền”.
+ Giao diện “Chi tiết trả hàng/hoàn tiền”: Thanh quy trình trả hàng
trên cùng (Yêu cầu được tiếp nhận, Xem xét, Trả hàng, Kiểm tra
hàng hoàn, Hoàn tiền). Bên dưới thanh quy trình là trạng thái

35
 (Đang xử lý, Đã hoàn tiền, Yêu cầu bị từ chối). Cuối giao diện là
thông tin sản phẩm, tổng tiền hoàn, phương thức hoàn tiền, mã
yêu cầu hoàn trả, lý do hoàn trả. Riêng ở trạng thái “Đã hoàn
tiền” có thêm thông tin “Thời gian chấp nhận hoàn trả”.
2.1.3.4. Cài đặt:

Hình 14. Use Case Cài đặt

- Thiết lập ngôn ngữ: Tiếng Việt hoặc Tiếng Anh

- Cài đặt thông báo: Cho phép nhận các thông báo nào: Cập nhật đơn hàng, Chat,
Hoạt động, Bài viết, Khuyến mãi; Tắt mở chế độ hiển thị thông báo, chuông
thông báo; Cài đặt nhận thông báo qua Email.
- Cài đặt quyền riêng tư: Cho phép ứng dụng truy cập thông tin vị trí, danh bạ,
micro, bộ nhớ ảnh, máy ảnh.
- Nút “Đăng xuất” ở cuối trang, hệ thống sẽ xuất hiện hộp thoại hỏi xác nhận
“Bạn có muốn thoát không?”, người dùng chọn “Hủy bỏ” để hủy lệnh đăng
xuất, hoặc “Xác nhận” để đăng xuất tài khoản hiện tại.
2.1.4. Tương tác bài viết hệ thống, đánh giá, hỏi đáp:

36
 Hình 15. Use Case Bài viết
2.1.4.1. Bài viết:
Hệ thống đăng các bài viết để quảng cáo sản phẩm, sự kiện khuyến mãi, tin
tức,... Cho phép người dùng được tương tác bằng cách nhấn nút yêu thích, bình
luận và chia sẻ (Sao chép liên kết hoặc chia sẻ đến các ứng dụng Facebook,
Messenger, Gmail,...).
2.1.4.2. Đánh giá:
Giao diện gồm mục đánh giá cho phép người dùng đánh giá theo thang đo từ 1
đến 5 về 3 hạng mục: Chất lượng sản phẩm, Trải nghiệm mua hàng, Đóng gói
và giao hàng. Sau khi đánh giá bằng thang đo, khách hàng cần viết thêm mô tả

37
 cho đánh giá (đạt ít nhất 75 kí tự để nhận được 20 điểm tích lũy). Đồng thời
cho phép khách hàng đăng tải kèm theo hình ảnh hoặc video sản phẩm để nhận
được thêm 30 điểm tích lũy. Cuối trang giao diện có radiobutton cho phép
khách hàng chọn lựa có muốn đăng ẩn danh không. Footer là nút “Gửi đánh
giá” và thống kê số điểm tích lũy nhận được (Ví dụ: khách hàng có kèm hình
ảnh nhưng viết ít hơn 75 kí tự, thì hiển thị 30/50 điểm).
2.1.4.3. Hỏi đáp:
Cho phép khách hàng đặt câu hỏi ngay bên dưới mỗi sản phẩm. Các câu hỏi
này sẽ được công khai và được nhân viên Freshy trực tiếp trả lời. Định dạng
tương tự như bình luận ở mục bài viết.
2.1.5. Nhận thông báo:

Hình 16. Use Case Thông báo

Mục thông báo nằm ở góc phải header ứng dụng, biểu tượng hình quả chuông.
Bên trên quả chuông hiển thị số lượng thông báo mà người dùng chưa xem.
Khi nhấn vào biểu tượng, hệ thống điều hướng đến trang thông báo chung gồm:

38
- Header với 4 danh mục phân loại tin thông báo: Tin nhắn, Đơn hàng, Thông
báo, Khuyến mãi. Khi nhấn vào các danh mục sẽ hiển thị danh sách các thông
báo đã được phân loại theo danh mục đề tên.
+ Tin nhắn: thông báo ai đó trả lời bình luận của người dùng, hoặc phản
hồi tin hỏi đáp. Thông báo nhắc nhở tin nhắn của bộ phận chăm sóc
khách hàng, trò chuyện hỏi đáp về sản phẩm.
+ Đơn hàng: thông báo về cập nhật tình trạng các đơn hàng của người
dùng.
+ Thông báo: thông báo nhắc nhở đánh giá sản phẩm, nhắc nhở đặt mua,
thông báo sản phẩm yêu thích có hàng, gợi ý sản phẩm cho người dùng.
+ Khuyến mãi: thông báo về các bài viết khuyến mãi của hệ thống cho
người dùng.
- Bên dưới header là toàn bộ thông báo người dùng nhận được. Thông báo nào
đã được người dùng nhấn vào xem qua sẽ được đánh dấu đã đọc.

39
2.2. Layout:
2.2.1. Layout trang chủ:

Hình 17. Layout trang chủ

40
2.2.2. Layout trang Cửa hàng:

Hình 18. Layout cửa hàng

41
2.2.3. Layout trang Giới thiệu:

Hình 19. Layout trang giới thiệu

42
2.2.4. Layout trang sản phẩm chi tiết:

Hình 20. trang sản phẩm chi tiết

43
2.2.5. Layout trang blog:

Hình 21. Layout trang blog

44
2.2.6. Layout trang Blog chi tiết

Hình 22. Layout trang Blog chi tiết

45
2.2.7. Layout trang Liên hệ:

Hình 23. Layout trang liên hệ

46
2.2.8. Layout trang Admin:

Hình 24. Layout trang admin

2.3. Wireframe:
Link Wireframe ở đây: Link
2.4. Mockup:
Link mockup ở đây: Link

47
CHƯƠNG 3: XÂY DỰNG VÀ TRIỂN KHAI WEBSITE
3.1. Sitemap của website:
3.1.1. Sitemap giao diện quản trị viên:

Hình 25. Sitemap giao diện quản trị viên

3.1.2. Sitemap giao diện người dùng:

Hình 26. Sitemap giao diện người dùng

48
3.2. Các trang chính:
3.2.1. Giao diện trang Trang chủ

Hình .Giao diện trang chủ: Banner và các danh mục nổi bật

Hình 27. Giao diện trang chủ: Danh mục sản phẩm

49
 Hình 28. Giao diện trang Giỏ hàng

Hình 29. Giao diện trang Hồ sơ người dùng

50
Hình 30. Giao diện trang Đơn hàng của tôi

Hình 31. Giao diện trang Sổ địa chỉ

51
Hình 32. Giao diện chức năng Chat với Flashy

52
3.2.2. Giao diện trang Cửa hàng

Hình 33. Giao diện trang Cửa hàng

Hình 34. Giao diện trang Cửa hàng: lọc dữ liệu

3.2.3. Giao diện trang Giới thiệu

Hình 35. Giao diện trang Giới thiệu

53
3.2.4. Giao diện trang Blog

Hình 36. Giao diện Tin nổi bật

Hình 37. Giao diện trang Bảng tin

54
Hình 38. Giao diện trang Chi tiết bài viết

55
Hình 39. Giao diện Tương tác bài viết

56
3.2.5. Giao diện trang Liên hệ

Hình 40. Giao diện trang Liên hệ

57
3.2.6. Giao diện trang Đăng nhập/Đăng ký

Hình 41. Giao diện trang Đăng nhập

Hình 42. Giao diện trang Đăng ký

3.3. BackEnd (Trang Admin)

58
3.3.1. Giao diện trang Dashboard

Hình. Giao diện Dashboard-thống kê

Hình 43. Giao diện Dashboard-lịch sử bán hàng

59
 Hình 44. Giao diện Dashboard-tin nhắn

Hình 45. Admin - Footer

3.3.2. Giao diện trang Quản lý sản phẩm

Hình 46. Giao diện Quản lý sản phẩm

60
 Hình 47. Giao diện Thêm/chỉnh sửa sản phẩm
3.3.3. Giao diện trang Biểu đồ

Hình 48. Giao diện Biểu đồ

61
3.3.4. Giao diện trang Trang

Hình 49. Giao diện Trang lỗi 404

Hình 50. Giao diện Trang trống

62
3.3.5. Giao diện trang Nhân viên

Hình 51. Giao diện trang Nhân viên

3.3.6. Giao diện trang Đăng nhập/Đăng ký

Hình 52. Giao diện trang Đăng nhập

63
 Hình 53. Giao diện trang Đăng ký

Hình 54. Giao diện trang Quên mật khẩu

64
3.4. Giao diện trên Điện thoại
3.2.1. Giao diện trang Trang chủ

65
 Hình 55. Giao diện Trang chủ
3.2.2. Giao diện trang Cửa hàng

Hình 56. Giao diện trang Cửa hàng

66
3.2.3. Giao diện trang Giới thiệu

Hình 57. Giao diện trang Giới thiệu

67
3.2.4. Giao diện trang Blog

Hình 58. Giao diện trang Bảng tin

68
Hình 59. Giao diện trang Chi tiết bài viết

69
3.2.5. Giao diện trang Liên hệ

Hình 60. Giao diện trang Liên hệ

70
3.2.6. Giao diện trang Admin

Hình 61. Giao diện Đăng nhập/Đăng ký/Quên mật khẩu

Hình 62. Giao diện trang Dashboard

71
 Hình 63. Giao diện trang Quản lý sản phẩm

Hình 64. Giao diện trang Biểu đồ, Trang lỗi 404 và Nhân viên

72
3.5. Một số đoạn code tiêu biểu

Hình 65. Code HTML trang chủ

Hình 66. Code HTML trang Chi tiết sản phẩm

73
Hình 67. Code HTML trang Tài khoản người dùng

Hình 68. Code HTML trang Dashboard

74
 Hình 69. Code HTML trang Giỏ hàng

Hình 70. Code HTML trang Blog

3.6. Đưa website lên host
3.6.1. Các bước đưa website lên host sử dụng Github
Nhóm thực hiện đưa code lên Github và sau khi hoàn thiện, nhóm đưa website lên
host theo các bước sau:
- Bước 1: Tại thanh menu chính, chọn “Setting”

75
 Hình 71. Chọn “Setting”
- Bước 2: Tại khung menu bên trái chọn “Page” và trang Github Page sẽ hiện ra

Hình 72. Chọn “Page”

- Bước 3: Tại phần Brand chọn nhánh “main” sau đó chọn Save để lưu lại

76
 Hình 73. Tại Brand chọn nhánh “main” và lưu lại
- Bước 4: Sau khi thành công sẽ hiển thị đường liên kết dẫn đến website

Hình 74. Đường dẫn đến website

3.6.2. Truy cập website
Link Github: Github
Link website chính: Flashy Stationery
Link website giao diện admin: Flashy Stationery Admin

77
CHƯƠNG 4: TỔNG KẾT
4.1 Kết quả đạt được so với mục tiêu ban đầu
Sau một thời gian tìm hiểu và thực hiện, trang web kinh doanh sản phẩm văn phòng
phẩm đã được hoàn thành. Dưới đây là những mặt nhóm đã thực hiện được trong dự
án xây dựng website lần này:
- Nắm vững các khái niệm căn bản, các bước cần thiết của một quá trình thiết kế,
xây dựng và phát triển một website kinh doanh.
- Xây dựng thành công website kinh doanh đồ văn phòng phẩm Flashy đáp ứng
được yêu cầu của khách hàng.
- Giao diện đẹp mặt, thu hút, có sự hài hòa về màu sắc và nội dung, bố cục.
Hình ảnh được sử dụng hợp lý, màu sắc được phối hợp với nhau hài hòa.
- Trang web có responsive, tương thích với các kích thước màn hình thiết bị khác
nhau.
- Có thể chạy trên các trình duyệt web khác nhau.
- Giao diện thân thiện với người dùng, dễ sử dụng, dễ tìm kiếm. Khách hàng dễ
dàng cập nhật những thông tin khuyến mãi, tìm kiếm sản phẩm, địa chỉ cửa
hàng, quản lí thông tin tài khoản cá nhân, liên hệ cho Flashy nhanh chóng.
4.2. Hạn chế chưa làm được:
Tuy nhiên, do chưa đầy đủ kinh nghiệm, hiểu biết nên vẫn còn tồn tại những thiếu
sót, hạn chế như:
- Website hoàn chỉnh chưa được hoàn thành, còn thiếu một vài chức năng.
- Một số trang chưa thể đưa dữ liệu vào website.
4.3. Giải pháp khắc phục những vấn đề chưa đạt
- Nghiên cứu, học hỏi, tìm tòi thêm những kiến thức liên quan để website được
tối ưu hơn nữa.
- Gặp mặt trực tiếp để có thể dễ dàng trao đổi và hỗ trợ nhau
4.4. Hướng phát triển
- Tiếp tục hoàn thành dự án phát triển website Flashy
- Tiếp tục thiết kế, hoàn thiện những trang còn thiếu, và bổ sung thêm một số
trang nữa để trang web hấp dẫn, đa dạng và phong phú hơn.

78
 - Bổ sung thêm một số chức năng để tăng trải nghiệm của khách hàng khi họ sự
dụng trang web.

DANH MỤC TÀI LIỆU THAM KHẢO

(n.d.). KLONG - Sổ, Vở, Đồ Dùng Học Sinh & Văn Phòng Phẩm. Retrieved

December 20, 2022, from https://klong.com.vn/

(n.d.). Nhà sách trực tuyến Fahasa.com - FAHASA.COM. Retrieved December 20,

2022, from https://www.fahasa.com/

(n.d.). Nhà Sách Phương Nam Trực Tuyến - Uy Tín, Tiện Lợi Và Nhanh Chóng -

nhasachphuongnam.com. Retrieved December 20, 2022, from

https://nhasachphuongnam.com/vi/

(n.d.). DELI VIỆT NAM. Retrieved December 20, 2022, from https://vppdeli.vn/

79