Báo Cáo Nhóm 7

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG
KHOA ĐA PHƯƠNG TIỆN
BÁO CÁO MÔN THIẾT KẾ WEB

Đề tài: Trang web bán bánh ngọt
Giảng viên hướng dẫn: Nguyễn Thị Thanh Tâm

Nhóm: 07
Thành viên: Trần Thị Diễm – B20DCPT038
Nguyễn Linh Chi – B20DCPT034
Bùi Thị Kim Ngân – B20DCPT138
Trần Khôi Nguyên – B20DCPT146
Hà Nội, 2023
MỤC LỤC
I. Xác định đối tượng....................................................................................... 5

1. Xác định đối tượng....................................................................................... 5
2. Phân loại đối tượng sử dụng ....................................................................... 6
II. Thu thập thông tin dữ liệu .......................................................................... 7
1. Phương pháp phỏng vấn ............................................................................. 7
1.1 Quá trình phỏng vấn.................................................................................... 7
1.2 Kết quả tổng hợp sau cuộc phỏng vấn ..................................................... 11
2 Đặt câu hỏi .................................................................................................. 13
2.1 Chuẩn bị...................................................................................................... 13
2.2 Kết quả khảo sát ........................................................................................ 16
3 Tập trung nhóm và các khóa học thực hành........................................... 18
3.1 Tiến hành .................................................................................................... 18
3.2 Kết quả khảo sát ........................................................................................ 19
4 Tiếp cận tự nhiên ....................................................................................... 19
5 Nghiên cứu tài liệu ..................................................................................... 23
III. Kết quả của phân tích dữ liệu ................................................................... 26
1. Vấn đề hệ thống hiện tại ............................................................................ 26
2. Đưa ra yêu cầu của hệ thống mới ............................................................. 26
IV. Use case diagram........................................................................................ 27
1. Sơ đồ Use case diagram ............................................................................. 27
2. Yêu cầu chức năng và phi chức năng của hệ thống................................ 28
2.1 Đăng ký ....................................................................................................... 28
2.2 Đăng nhập ................................................................................................... 29
2.3 Đăng xuất .................................................................................................... 29
2.4 Tìm kiếm sản phẩm ................................................................................... 30
2.5 Xem thông tin sản phẩm ........................................................................... 30
2.6 Sửa thông tin cá nhân ................................................................................ 30
2.7 Thêm vào giỏ hàng ..................................................................................... 31
2|THIẾTKẾWEBCƠBẢN
2.8 Thanh toán.................................................................................................. 31
2.9 Kiểm tra đơn hàng ..................................................................................... 32
2.10. Nhận và giao hàng ..................................................................................... 33
V. Thiết kế giao diện ....................................................................................... 33
1. Xác định kích thước màn hình hiển thị + trình duyệt............................ 33
2. Xác định nội dung ...................................................................................... 34
3. Hệ thống lưới .............................................................................................. 35
3.1 Lưới desktop ............................................................................................... 35
3.2. Lưới tablet .................................................................................................. 40
3.3. Lưới mobile phone ..................................................................................... 43
4. Wireframe................................................................................................... 47
6. Màu sắc ....................................................................................................... 49
7. Hình ảnh + video ........................................................................................ 50
8. Bố cục trang ................................................................................................ 55
VI. Thiết kế prototype ...................................................................................... 60
1. Kiến trúc thông tin của website ................................................................ 60
2. Các loại điều hướng ................................................................................... 60
3. Đánh giá khả năng hoạt động ................................................................... 65
3.1. Ưu điểm....................................................................................................... 65
3.2. Nhược điểm................................................................................................. 65
4. Mô tả hoạt động của sản phẩm................................................................. 66
VII. Code ............................................................................................................. 66
1. Tìm hiểu các ngôn ngữ lập trình sử dụng................................................ 66
1.1. HTML ......................................................................................................... 66
1.2. CSS .............................................................................................................. 68
2. Thư viện hỗ trợ........................................................................................... 68
4. Quy trình thực hiện ................................................................................... 70
5. Source code ................................................................................................. 70
6. Giao diện hiển thị ....................................................................................... 70
6.1. Giao diện trang chủ ................................................................................... 70
6.2. Giao diện giới thiệu .................................................................................... 72
6.3. Giao diện sản phẩm ................................................................................... 74
6.4. Giao diện tin tức ......................................................................................... 74
6.5. Giao diện đăng ký ...................................................................................... 75
6.6. Giao diện đăng nhập .................................................................................. 76
7. Những thuận lợi và khó khăn khi thực hiện code .................................... 76
VIII. Kết luận ....................................................................................................... 77
1. Kết quả đạt được ......................................................................................... 77
2. Hạn chế ......................................................................................................... 77
3. Hướng phát triển của đề tài ....................................................................... 77
PHỤ LỤC ............................................................................................................. 78
I. Xác định đối tượng
1. Xác định đối tượng
o Người tương tác trực tiếp với sản phẩm:
- Khách hàng: nhóm đối tượng hàng đầu truy cập trang web để đặt hàng.
- Những người yêu thích bánh: nhóm đối tượng truy cập vì yêu thích bánh hoặc
xem công thức làm bánh.
Độ tuổi 15 - 22 23 - 40 41 - 50
Giới tính Nữ (chiếm 60%) Nữ (chiếm 70%) Nữ (chiếm 90%)
Mục đích Sinh nhật, đi chơi Đám cưới, sự kiện Tặng người thân,
với bạn bè công ty, sinh nhật, làm bánh tại nhà,
đi chơi với bạn bè sinh nhật
Nghề nghiệp Học sinh, sinh Đã đi làm Đi làm, nội trợ gia
viên đình
Khả năng tài Hạn chế về tài Tự chủ về tài Ổn định về tài
chính chính chính chính
Mức độ bận rộn Tự do, không quá Bận rộn Có khá nhiều thời
bận rộn gian dành cho gia
đình
Nhu cầu ăn bánh Thích ăn bánh Thích (hạn chế ăn Hạn chế hơn
ngọt do giữ dáng)
Bảng phân tích các nhóm khách hàng
o Người tương tác gián tiếp với sản phẩm:

- Những doanh nghiệp, công ty có lĩnh vực kinh doanh liên quan đến bánh
như những doanh nghiệp cung cấp các nguyên liệu làm bánh:
+ Nguyên liệu bột: Nhà cung ứng Công ty cổ phần Bình Đông
+ Nguyên liệu đường: Nhà máy Phú Yên.
+ Bao bì: Bao bì giấy: Visingpack; Bao bì nhựa: Tân Tiến
+ Máy móc, trang thiết bị làm bánh: Viễn Đông
o Người dùng cạnh tranh:
- Các cửa hàng bán bánh khác: Nhóm người nãy sẽ quan tâm đến website
của bạn. Họ sẽ quan sát xem trang web của bạn đang nhắm đến đối tượng
nào, thiết kế giao diện ra sao rồi để phân tích, điều chỉnh website của họ.
Một số thương hiệu nổi tiếng có sự cạnh tranh mạnh mẽ:
+ ABC Bakery: thương hiệu này đi lên từ bánh mì và các loại bánh ngọt,
bánh bao rồi mở rộng ra các dòng bánh ngọt kiểu Tây. Không chỉ là một
thương hiệu bánh nổi tiếng, ABC Bakery còn là một thương hiệu mang
hình ảnh đại diện cho ngành bánh mì ở Việt Nam.
+ Givral: kế thừa trọn vẹn nét tinh tế, tao nhã của nền ẩm thực Pháp, luôn
ghi dấu ấn với các dòng bánh tươi, không sử dụng các chất bảo quản hay
phụ gia, đảm bảo an toàn sức khỏe cho người sử dụng. Chuyên sản xuất
các dòng bánh cao cấp từ bánh kem, bánh cưới, bánh trung thu, bánh mì
và các loại bánh nướng với đa dạng về loại bánh.
+ Banhngot.vn – Thương hiệu bánh ngọt Việt Nam: nổi tiếng hàng đầu về
bánh kem. Đặc biệt là dịch vụ giao bánh tận nhà tặng người thân.
 Như vậy khách hàng trọng tâm hướng đến là độ tuổi từ 15 đến 40, với
những tính cách, sở thích, trình độ, giới tính (chủ yếu là nữ giới) khác
nhau.
2. Phân loại đối tượng sử dụng
 Quan trọng: dùng thường xuyên và trực tiếp
o Khách hàng đã đặt hàng trên web và quay trở lại web:
- Đây là nhóm khách hàng thân thiết với doanh nghiệp và là một trong
những mục tiêu chính các doanh nghiệp hướng đến. Họ yêu thích sản
phẩm hoặc thương hiệu của bạn đến mức họ sẽ luôn mua hàng của bạn,
ngay cả khi có ưu đãi rẻ hơn ở nơi khác. Bên cạnh đó, họ cũng sẵn lòng
giới thiệu sản phẩm của doanh nghiệp tới những người xung quanh
o Khách hàng thường xuyên truy cập trang web
- Việc thường xuyên truy cập trang web cho thấy nhóm khách hàng này
đang quan tâm đến sản phẩn của web. Vì vậy việc họ đặt hàng chắc chắn
sẽ diễn ra
 Bình thường: dùng ít hơn hoặc biết đến sản phẩm thông qua bạn bè
o Khách hàng đã thêm hàng vào giỏ
- Khách hàng này có thể gọi là tập khách hàng phân vân. Có đến 90% khách
hàng cảm thấy khó quyết định vì giá cả. Có lẽ… họ đang chờ một Super
Sale từ bạn?
o Nhóm khách hàng yêu thích những đợt giảm giá:
- Chỉ truy cập và mua hàng ở trang web vào những đợt giảm giá
 Yếu: người dùng bị ảnh hưởng bởi quảng cáo hoặc giá thành
o Khách hàng có ý định rời web, không sử dụng website:
- Xác định xem ai không xứng đáng dành thời gian và sự quan tâm. Ví dụ
như loại bỏ đối thủ cạnh tranh đang chơi xấu/ thăm dò, nếu sản phẩm của
bạn giới hạn độ tuổi, những người không nằm trong khoảng yêu cầu cần
loại bỏ...
o Nhóm khách hàng không hài lòng:
- Nhóm khách hàng này là những người không hài lòng về sản phẩm/dịch
vụ của doanh nghiệp. Họ quay trở lại để yêu cầu khắc phục vấn đề hoặc
phàn nàn. Điều này có thể tác động tiêu cực nếu doanh nghiệp không có
kinh nghiệm trong việc xử lý khiếu nại, nhưng ngược lại, đây là cơ hội để
doanh nghiệp tạo dựng niềm tin và uy tín trong lòng người tiêu dùng nếu
xử lý khéo léo trường hợp này.
 Nói chung, đối tượng sử dụng website là những người bị thu hút và
sửdụng website của bạn để tìm hiểu thông tin hay thực hiện giao dịch.
Đây cũng là mục tiêu mà website của bạn cần nỗ lực tiếp thị và hướng
tới để biến họ thành khách hàng của mình.
II. Thu thập thông tin dữ liệu
1. Phương pháp phỏng vấn
1.1 . Quá trình phỏng vấn
1.1.1 . Giai đoạn chuẩn bị
Để có được một cuộc phỏng vấn diễn ra thành công việc tìm hiểu trước
nội dung đặt ra trong cuộc phỏng vấn và tìm hiểu người trả lời là rất quan
trọng. Hoạt động này giúp cho chúng ta dễ nhập cuộc, chủ động, tự tin khi
phỏng vấn, tạo sự tin cậy với người đối thoại, xử lý những tình huống bất
ngờ có thể xảy ra trong quá trình phỏng vấn.
Việc tìm hiểu về đối tượng phỏng vấn được thực hiện thông qua:
- Xác định đối tượng đã – đang và / hoặc sẽ sử dung trang web làm bánh
(đã được xác định trong phần I)
- Nghiên cứu tư liệu trên sách báo, internet, tìm hiểu đối tượng thông qua
bạn bè, hàng xóm…
1.1.1.1 Lựa chọn người trả lời phỏng vấn
Dựa vào nội dung và mục đích muốn tìm hiểu về nhu cầu, mục đích, mong
muốn của người dùng về trang web làm bánh, từ đó chúng tôi lưa chọn
những người tiêu biểu cho cuộc phỏng vấn của mình: người nội trợ, sinh
viên, người đi làm.
1.1.1.2 Sắp đặt cuộc phỏng vấn
Sử dụng 2 hình thức:
- Báo trước:
+ Gọi điện, gửi mail đề nghị phỏng vấn (trò chuyện, trao đổi)
+ Giới thiệu với tư cách là người phỏng vấn
+ Cho nguồn tin biết mục đích nhằm nghiên cứu, khảo sát về nhu cầu, mong
muốn của người dùng về trang web làm bánh
+ Thỏa thuận địa điểm, thời gian phỏng vấn (đến nhà, ra quán, đến trường…)
- Không báo trước (áp dụng với những đối tượng bắt gặp):
+ Giới thiệu với tư cách là người phỏng vấn
+ Xin ý kiến của người dùng với lời mời phỏng vấn
+ Cho nguồn tin biết mục đích nhằm nghiên cứu, khảo sát về nhu cầu, mong
muốn của người dùng về trang web làm bánh
1.1.1.2.1 Chuẩn bị đề cương câu hỏi
Căn cứ vào những thông tin đã tìm hiểu được, tôi dự kiến một số câu hỏi
sẽ đặt ra trong cuộc phỏng vấn:
- Bạn có thể chia sẻ một số thông tin cá nhân của bạn cho chúng tôi không?
- Bạn có thích mua hàng online?
- Bạn có thích làm bánh không?
- Đã bao lâu bạn không ăn bánh ngọt rồi?
- Bạn thích ăn bánh ngọt theo phong cách nào?
- Bạn có đang trong chế độ giảm cân không?
- Bạn thích ăn bánh ngọt nhiều đường hay ít đường?
- Bạn có hay mua bánh để tặng bạn bè, người thân không?
- Nếu bánh ngọt là đồ ăn bạn thích và nó được làm từ nguyên liệu tự nhiên
thì bạn có muốn thử nó không?
- Bạn có mong muốn gì về sản phẩm?
- Bạn đã từng mua bánh online chưa?
- Bạn thường ghé thăm các trang web làm bánh bao nhiêu lần/tháng?
- Bạn thường mua bánh ngọt vào những dịp nào?
- Mục đích bạn ghé thăm các trang web về bánh để làm gì?
Tuy nhiên trong quá trình phỏng vấn có thể linh hoạt thay đổi những câu
hỏi
1.1.1.2.2. Một số công việc chuẩn bị khác
- Chuẩn bị tâm lý, tâm thế khi tiến hành phỏng vấn
- Ăn mặc phù hợp
- Chuẩn bị phương tiện phỏng vấn
- Đúng hẹn (áp dụng cho cuộc phỏng vấn báo trước)
- Chuẩn bị phương tiện, vật dụng phỏng vấn: sổ tay, máy ghi âm
1.1.1.3. Giai đoạn tiến hành phỏng vấn
1.1.1.3.1. Giai đoạn nhập cuộc
- Giới thiệu bản thân
- Nhắc lại mục đích của cuộc phỏng vấn
- Bắt đầu bằng câu chuyện nhẹ nhàng
- Mở đầu cuộc phỏng vấn bằng những câu hỏi đơn giản => biết đến thông
tin, sở thích của người dùng:
Câu 1: Bạn có thể chia sẻ một số thông tin cá nhân của bạn cho chúng tôi
không?
Một số câu trả lời tiêu biểu mà tôi đã note
 Tôi là Nguyễn Thị Lan, năm nay 35 tuổi là một phụ nữ nội trợ
 Tôi là Bùi Thị Quỳnh là sinh viên ngành Công nghệ đa phương tiện
trường Học viện Công nghệ Bưu chính Viễn thông
 Tôi là Trần Thị Bích Như năm nay 26 tuổi hiện đang là Kế toán cho một
công ty về nội thất
Câu 2: Bạn có thích mua hàng online?
 Tôi ít khi mua hàng online vì là một người nội trợ cho gia đình nên tôi
có nhiều thời gian đi mua sắm hơn
 Tôi có vì là một sinh viên tôi thường thức dậy muộn nên khá
ngại cho việc đi mua sắm bên ngoài
 Tôi có vì tôi khá bận rộn cho công việc nên không có thời gian
Câu 3: Bạn có thích làm bánh không?

 Tôi rất thích làm bánh, tôi thường lên các trang mạng để nghiên
cứu và học hỏi công thức làm bánh
 Tôi không thích làm bánh cho lắm vì nó khá cầu kì và tỉ mỉ
 Tôi thích làm bánh, tôi thường làm bánh vào những thời gian rảnh rỗi
1.1.1.3.2 . Giai đoạn triển khai hệ thống câu hỏi chủ chốt
- Áp dụng câu hỏi từ dễ đến khó
- Sử dụng một số câu hỏi xen kẽ linh hoạt
- Để khai thác được những điểm quan trọng, nổi bật, tôi áp dụng
một số câu hỏi:
Câu 1: Đã bao lâu bạn không ăn bánh ngọt rồi?
Một số câu trả lời tiêu biểu:
 Tôi ăn cách đây 3 ngày, đó là ngày kỷ niệm ngày cưới của

vợ chồng chúng tôi.
 Tôi ăn cách đây 1 tuần, đó là sinh nhật bạn tôi
 Tôi ăn cách đây nửa tháng lúc đi chơi với bạn bè
Câu 2: Bạn thích ăn bánh ngọt theo phong cách nào?
 Tôi thích ăn bánh theo kiểu truyền thống

 Tôi thích ăn bánh theo kiểu hiện đại
 Tôi thích ăn những chiếc bánh theo phong cách của Pháp
Câu 3: Bạn có đang trong chế độ giảm cân không?
 Tôi không
 Tôi có
Câu 4: Bạn thích ăn bánh ngọt nhiều đường hay ít đường?

 Tôi thích ăn ít đường
Câu 5: Bạn có hay mua bánh để tặng bạn bè, người thân không?
 Có
 Có
 Có
Câu 6: Nếu bánh ngọt là đồ ăn bạn thích và nó được làm từ nguyên liệu
tự nhiên thì bạn có muốn thử nó không?

 Tôi sẵn lòng
 Wow, tôi rất muốn thử nó
 Tất nhiên là có
Để biết đến nhu cầu, mong muốn người dùng khi truy cập vào một
trang web bán bánh ta phỏng vấn một số câu hỏi:
Câu 7: Bạn có mong muốn gì về sản phẩm?
 Sản phẩm tốt cho sức khỏe

 Khẩu vị phù hợp, dễ ăn, không ngán
 Mẫu mã đẹp, bắt mắt, đặc trưng
 Giá cả thấp hơn
 Thời gian truy cập nhanh
 Thao tác dễ dàng, giao diện bắt mắt
Để biết về tần suất, thói quen người dùng khi truy cập vào trang
web bán bánh cần phỏng vấn một số câu hỏi:
Câu 8: Bạn đã từng mua bánh online chưa?
Một số câu trả lời tiêu biểu: 100% người được phỏng vấn trả lời đã từng
mua bánh trên các gian hàng online.
Câu 9: Bạn thường ghé thăm các trang web làm bánh bao nhiêu
lần/tháng?
10 | T H I Ế T K Ế W E B C Ơ B Ả N
 Trên 2 lần/tháng
 2 lần/tháng
 1 lần/tháng
 Thời gian rảnh rỗi
Để biết được mục đích của người dùng khi ghé thăm các trang web
bán bánh chúng tôi sẽ sử dụng câu hỏi như:
Câu 10: Bạn thường mua bánh ngọt vào những dịp nào?

 Ngày kỉ niệm ngày cưới, ngày sinh nhật người thân
 Ngày sinh nhật
 Đi chơi cùng bạn bè, tặng người thân
Câu 11: Mục đích bạn ghé thăm các trang web về bánh để làm gì?

 Mua bánh
 Xem cách làm bánh
 Ngắm bánh, thư giãn
1.1.1.2.1 Giai đoạn kết thúc cuộc phỏng vấn
- Kiểm tra xem còn có bỏ sót thông tin, chi tiết nào muốn biết
- Kiểm tra những điều đã ghi chép đã hiểu rõ hay chưa
- Hỏi người trả lời xem họ có mong muốn gì nữa không
- Cảm ơn và bày tỏ mong muốn được gặp lại người được phỏng vấn
1.2 Kết quả tổng hợp sau cuộc phỏng vấn
1.2.1 Về mong muốn của người dùng về trang web
Khi truy cập vào một trang web người dùng muốn truy cập nhanh, giao diện
bắt mắt, thao tác dễ dàng, có nguyên liệu bánh và cách làm
Về tần suất, thói quen người dùng khi truy cập vào trang web bán bánh:
Có tới 14 người ghé thăm trên 2 lần/ tháng, 8 người ghé thăm 2 lần/ tháng,
10 người ghé thăm 1 lần/ tháng và 5 người ghé thăm vào những thời gian rảnh
rỗi
Mục đích của người dùng khi ghé thăm các trang web bán bánh:
Có tới 20 người ghé thăm với mục đích mua bánh, 9 người ghé thăm với
mục đích xem bánh, giải trí, 12 người ghé thăm với mục đích xem cách làm
(phụ nữ, người học làm bánh), 5 người ghé thăm với mục đích khác:
Từ khảo sát trên chúng tôi nhận thấy nhu cầu của thị trường là rất cao, có
thể tìm kiếm được lợi nhuận trong ngành này; Nắm bắt rõ được nhu cầu của
thị trường và khách hàng tiềm năng, nhóm bắt đầu xây dựng kế hoạch xây
dựng cửa hàng bánh với dịch vụ cộng thêm là có thêm khu vực cho khách tự
học làm bánh với sự hương dẫn chi tiết.
2 Đặt câu hỏi

2.1 Chuẩn bị
- Nội dung câu hỏi khảo sát: Để có được những nội dung này cần xác định
mục đích thu thập thông tin đó là nhằm thu được những mong muốn của người
dùng về website (Tức là những yêu cầu mà website cần phải có). Những yêu
cầu đó bao gồm:
+ Người dùng có những thói quen hay sở thích như thế nào? -> Yêu cầu về chức
năng, điều mà website cần phải làm để thỏa mãn người dùng.
=> Để có dữ liệu này ta cần đặt ra những câu hỏi như:
• Anh/ chị có thích các loại bánh ngọt không? => Phân loại đối tượng người
dùng. Nếu người tham gia trả lời câu hỏi không thích thì có thể ngưng cuộc
khảo sát.
• Anh/ chị thường mua bánh vào những dịp gì? => Cung cấp các thông tin về
khuyến mại hay các chương trình đặc biệt vào các dịp lễ.
+ Người dùng có khả năng sử dụng website một cách dễ dàng hay không kể cả
khi đó là lần đầu họ sử dụng website? => Yêu cầu liên quan đến kỹ năng, khả
năng của người dùng.
=> Để có dữ liệu này ta cần đặt ra những câu hỏi:
• Anh/ chị thường mua bánh ở đâu? => Thống kê số lượng người dùng thường
xuyên sử dụng website để đặt hàng nhằm tiến hành thiết kế website cho phù
hợp với kinh nghiệm của đại đa số người sử dụng.
• Anh/ chị có thường xuyên mua sắm trên các trang TMĐT không (Shopee
Food, Baemin, Go Food…)?
=> Khảo sát kinh nghiệm của người dùng về việc sử dụng một website để mua
hàng online.
• Anh/ chị có từng truy cập vào website của một cửa hàng bánh ngọt trước
đây không? => Thiết kế các chức năng theo mục tiêu dễ dàng sử dụng.
• Anh/ chị có thường xuyên truy cập vào website tương tự hay không?
=> Thống kê được tần suất truy cập website phổ biến nhất của đa số đối tượng
người dùng nhằm thiết kế các chức năng theo mục tiêu dễ dàng sử dụng.
• Những vấn đề anh/ chị thường gặp phải khi mua hàng online? => Hạn
chế tối đa việc người dùng mắc các lỗi tương tự và đưa ra các giải pháp cho
người dùng khi sử dụng hệ thống.
+ Người dùng sử dụng website trong các ngữ cảnh khác nhau sẽ ảnh
hưởng như thế nào tới việc thiết kế website? => Yêu cầu liên quan đến
môi trường vật lý, xã hội, tổ chức, kỹ thuật trong ngữ cảnh sử dụng của
người dùng.
=> Để có dữ liệu này ta cần đặt ra những câu hỏi như:
• Anh/ chị thường truy cập vào website bằng thiết bị nào? => Thiết kế
responsive phù hợp trên từng thiết bị
• Anh/ chị mong muốn địa chỉ của cửa hàng được hiển thị như thế nào?
=> Cung cấp thêm thông tin cho người dùng muốn tới trực tiếp tại cửa hàng
một cách dễ dàng và nhanh chóng (như thêm vị trí bằng map thay vì sử dụng
văn bản thông thường).
+ Người dùng thường quan tâm đến gì trên một website bán bánh? =>
Yêu cầu về suy nghĩ và tâm lý của người dùng.
=> Để có dữ liệu này ta cần đặt ra những câu hỏi:
• Anh/ chị có quan tâm tới nguồn gốc của những loại nguyên liệu mà cửa
hàng sử dụng để làm bánh không? => Cung cấp nguồn gốc các nguyên liệu
của các loại bánh
• Anh/ chị có quan tâm tới công thức làm bánh không? => Cung cấp bài viết
hoặc thông tin liên quan về cách làm bánh
• Anh/ chị thường ưu tiên gì khi quyết định mua bánh trên website? => Sắp
xếp và phân loại thông tin về các loại bánh trên website theo mong muốn của
đa số người dùng (Giá cả, chất lượng, khuyến mãi, thương hiệu)
- Hình thức khảo sát và phương pháp tiến hành:
• Thông qua email, google forms và một số các trang mạng xã hội (Facebook,
Instagram)
• Khảo sát thử một nhóm 5-6 người nhằm chỉnh sửa để đưa ra được mẫu khảo
sát cuối cùng.
- Bảng khảo sát cuối cùng:
Câu hỏi Câu trả lời
1. Giới tính của bạn? Nam/Nữ/Khác…
2. Độ tuổi của bạn? 10-20/ 20-30/ 30-40/ Trên 40
3. Bạn có thích các loại bánh ngọt Thích/Không thích( Thang đo 5
không? mức độ)
4. Bạn thường mua bánh vào Lễ Tết/ Tiệc/ Hàng ngày/ Dịp
những dịp gì? khuyến mãi/ Dịp bất kỳ
5. Bạn thường mua bánh ở đâu? Mua trực tiếp tại các cửa hàng/
Trên các sàn TMĐT/ Khác…
6. Bạn đã từng truy cập vào Có/ Không
website của một cửa hàng bánh trước
đây chưa?
7. Bạn có thường xuyên truy cập Không bao giờ/ Thỉnh thoảng/
vào website tương tự hay không Thường xuyên/ Rất thường xuyên/
Luôn luôn
8. Bạn thường truy cập vào Điện thoại/ Máy tính/ Máy tính
website bằng thiết bị nào? bảng/ Khác…
9. Bạn thường ưu tiên gì khi Giá cả/ Chất lượng/ Khuyến mãi/
quyết định mua bánh trên website? Thương hiệu
10. Bạn có quan tâm tới công Có/ Không
thức làm bánh không?
11. Bạn có quan tâm tới nguồn Có/ Không
gốc của những loại nguyên liệu mà
cửa hàng sử dụng để làm bánh không?
12. Bạn mong muốn địa chỉ của Vị trí/ Văn bản/ Link
cửa hàng được hiển thị như thế nào?
13. Những vấn đề bạn thường Phương thức thanh toán/ Tốc độ
gặp phải khi mua hàng online? vận chuyển/ Hàng không nguyên vẹn/
Đổi trả hàng/ Khác…
2.2 Kết quả khảo sát

+ Giới tính nữ chiếm đa số (74,3%)
+ Độ tuổi phổ biến: Từ 15-40 tuổi
+ Số lượng người thích ăn bánh chiếm đa số (37,1 %). Tuy nhiên cũng có khá
nhiều người giữ thái độ ở mức trung lập (20%)
+ Tỉ lệ người dùng mua bánh vào các dịp:
+ Tỉ lệ giữa các địa điểm mà người dùng mua bánh:
+ Số lượng người dùng đã từng tiếp xúc với một website tương tự chiếm đa
số (65,7%)
+ Người dùng không thường xuyên truy cập vào website tương tự (chiếm
71,4%)
+ Số lượng người dùng sử dụng điện thoại để truy cập website chiếm đa số
(97,1%)
+ Tỉ lệ giữa các sự ưu tiên của người dùng trên website khi quyết định mua
bánh:
+ Người dùng quan tâm tới công thức làm bánh chiếm đa số (65,7%)
+ Người dùng quan tâm tới nguồn gốc của các loại nguyên liệu sử dụng để
làm bánh chiếm đa số (85,7%)
+ Người dùng mong muốn địa chỉ của cửa hàng được hiển thị thông qua vị
trí trên bản đồ chiếm đa số (74,3%)
+ Đa số người dùng đều gặp vấn đề về tốc độ vận chuyển (60%) và hàng
không nguyên vẹn (48%)
+ Một số mong muốn khác của người dùng đối với website:
• Có thể giao hàng toàn quốc
• Không bị lỗi và đa dạng sự lựa chọn
• Rõ ràng và đảm bảo đầy đủ thông tin sản phẩm
• Sản phẩm trên website chất lượng và giá rẻ
3 Tập trung nhóm và các khóa học thực hành

3.1 Tiến hành
- Hình thức: tập chung nhóm 6 người (3 nam, 3 nữ), có độ tuổi từ 18-32
tham gia cuộc thảo luận nhỏ về các vấn đề liên quan đến bánh .
- Trước khi bắt đầu cuộc thảo luận mỗi người tham gia sẽ giới thiệu qua về
bản thân như tên tuổi, công việc hiện tại và sở thích hay có hứng thú với
các loại bánh không.
- Vấn đề thảo luận đầu tiên: Mọi người mua bánh vào những thời điểm nào?
+ Tất cả đều trả lời thường mua bánh vào các dịp lễ, ngày đặc biệt như sinh
nhật, ngày kỷ niệm ...
+ 2/3 người tham gia nữ và 1/3 người tham gia nam trả lời không nhân dịp nào
cả, sẽ mua vào những lúc muốn đồ ngọt
- Câu hỏi thảo luận thứ hai: Bạn muốn đến trực tiếp cửa hàng mua bánh hay
đặt hàng qua trang web.
+ 5/6 người (2 nữ, 3 nam) tham gia trả lời rằng thích mua hàng online hơn vì
nó dễ dàng và thuận tiện.
+ 1 người tham gia còn lại chọn đến cửa hàng mua bánh vì có thể trực tiếp quan
sát được tất cả loại bánh cũng như có thể xem được quy trình làm bánh
- Câu hỏi thảo luận thứ 3: Bạn quan tâm đến hình thức, thương hiệu hay nguồn
gốc, chất lượng của một chiếc bánh?
+ 4/6 người (3 nữ, 1 nam) trả lời là quan tâm đến chất lượng của bánh.
+ 2 người tham gia còn lại trả lời họ quan tâm đến thương hiệu và hình thức
của bánh hơn vì họ mua bánh chủ yếu với hình thức làm quà tặng trong
những dịp lễ quan trọng.
- Câu hỏi thảo luận thứ 4: Một trang web bán bánh với giao diện đơn giản và
một trang web có giao diện đẹp và có nhiều chức năng thì bạn sẽ chọn trang
web nào?
+ 3/6 người (2 nữ, 1 nam) trả lời chọn trang web có giao diện đẹp vì giao diện
đẹp cũng sẽ kích thích việc mua hàng.
+ 3/6 người (1 nữ, 2 nam) trả lời rằng họ không quan tâm đến giao diện trang
web khi truy cập trang web là họ chắc chắn sẽ đặt hàng. Vì vậy chỉ một giao
diện đơn giản, dễ nhìn, dễ sử dụng là được.
- Câu hỏi thảo luận cuối cùng bạn có quan tâm đến công thức và cách làm
bánh không.
+ 2/6 người (nữ) trả lời là có. Vì họ có sở thích nấu ăn và muốn làm bánh vào
1 số dịp đặc biệt.
+ 4/6 người (1 nữ, 3 nam) trả lời là không vì họ cảm thấy không cần thiết vì có
thể mua bánh ngoài tiệm.
3.2 Kết quả khảo sát

- Khách hàng là nữ chiếm đa số
- Khách hàng sẽ ưu tiên đặt hàng trên trang web.
- Khách hàng quan tâm đến chất lượng của những chiếc bánh vì vậy trên trang
web cần cung cấp thông tin về nguồn gốc, xuất sứ của nguyên liệu làm bánh
- Đối tượng khách hàng tiềm năng đa số là nữ, vì vậy cần chú trọng hơn về
hình thức, giao diện của trang web nhưng cần đảm bảo đơn giản và dễ dùng
- Có một nhóm nhỏ khách hàng quan tâm đến công thức và cách làm bánh vì
vậy thêm mục nguyên liệu và cách làm bánh vào trang web có thể là một
điểm cộng đối với trang web.
4 Tiếp cận tự nhiên

Tiếp cận tự nhiên hay quan sát trực là một phương pháp thu thập dữ liệu
bao gồm việc quan sát đối tượng nghiên cứu trong một tình huống cụ thể.
Có thể sử dụng hai phương pháp là bí mật và rõ ràng. Tuy nhiên để có kết
quả tốt nhất thì nên quan sát thông tin một cách bí mật vì khi người dùng biết
họ bị quan sát thì hành vi của họ sẽ khác đi.
Quá trình chuẩn bị:
4.1.1 .Xác định mục tiêu và đối tượng quan sát:
+) Xác định mục tiêu:
Xác định mục tiêu cần nghiên cứu, quan sát là một bước tối quan trọng
trong quá trình tiếp cận khách hàng, mục tiêu quan sát có thể là hành vi của
khách hàng khi sử dụng các trang web khác như thế nào, thái độ của họ ra sao,
họ có phàn nàn hay có lời khen gì cho trang web đó không, hay cái họ thường
quan tâm nhất? Từ đó ta có thể rút ra những thứ mình cần phải có hoặc cần phải
loại bỏ.
Ta có thể xác định mục tiêu đơn giản nhất là qua các trang mạng xã hội, hoặc
các diễn đàn thảo luận.
+) Xác định đối tượng:
Sau khi đã xác định được mục tiêu, ta cần xác định được đối tượng cần phải
quan sát. Đối tượng quan sát có thể là một tập thể, một cá nhân hoặc cũng có
thể chia ra là nam hay nữ, độ tuổi và nghề nghiệp ra sao, mức thu nhập như thế
nào.
Ví dụ như đối tượng là sinh viên và mức thu nhập thấp thì họ quan tâm đến
những vấn đề gì? Đó có thể là giá cả của một chiếc bánh có hợp lý hay không,
Cái nhìn đầu tiên khiến cho một chiếc bánh trông ngon miệng và tạo cảm giác
hấp dẫn đó là độ thẩm mỹ của nó, màu sắc, trang trí, kết cấu, ... Có thể đối
tượng sinh viên sẽ không quan tâm lắm đến nguyên liệu làm ra chiếc bánh đó
bao gồm những thành phần gì, nhập từ đâu. Tuy nhiên nếu đối tượng là những
người có thu nhập cao và ổn định hơn thì có thể họ sẽ quan tâm đến phần xuất
xứ của nguyên liệu.
+) Xác định thời điểm quan sát:
Để quá trình quan sát đạt được hiệu quả cao nhất thì ta cần phải chọn thời
điểm đúng đắn và khôn ngoan, ta cần biết được phải nghiên cứu và quan sát
trong khoảng thời gian cụ thể nào.
+) Xác định hình thức quan sát:
Để quá trình quan sát đạt hiệu quả cao hơn ta cần chuẩn bị những hình thức
sẽ được sử dụng.
Ví dụ như ghi chép, ghi âm, …
4.1.2 Kết quả quá trình quan sát:
Bảng thống kê những điều mà khách hàng quan tâm
Cứ 100 người truy cập vào website thì:
- 22% quan tâm đến giá cả

- 39% quan tâm đến chất lượng
- 21% quan tâm đến thẩm mĩ của chiếc bánh
- Còn lại 18% quan tâm đến nhãn hiệu của chiếc bánh
40% khách hàng truy cập web để mua bánh
30% khách hàng truy cập để xem bánh
20% khách hàng truy cập để xem cách làm bánh
10% khách hàng không rõ mục đích truy cập
Đa số khách hàng ở độ tuổi từ 22-35 tuổi (40%)

28% khách hàng ở độ tuổi 15-22
18% khách hàng ở độ tuổi 35-45
14% khách hàng ở các độ tuổi từ 45 trở lên
Một số thông tin quan sát được từ các cộng đồng và diễn đàn:
- Trải nghiệm đặt bánh bị khó khăn.

- Sai công thức làm bánh
- Bánh ngon, giao diện bắt mắt
- Mong muốn có video hướng dẫn đi kèm trong mục làm bánh
5 Nghiên cứu tài liệu

5.1 Những module phù hợp nhất cho thiết kế website bán bánh
Module Trang chủ
Đây là module quan trọng khi thiết kế một website cửa hàng bánh – kem.
Khoảnh khắc đầu tiên luôn là khoảnh khắc quan trọng nhất. Khách hàng sẽ
nhớ mãi ấn tượng đầu tiên của họ về cửa hàng. Chính vì thế việc xây dựng
trang chủ website phải thật bắt mắt và nêu bật được những điều đặc biệt mà
chỉ cửa hàng bánh mới có.
Kèm với đó là hình ảnh những chiếc bánh đẹp nhất của cửa hàng. Người yêu
bánh không chỉ yêu hương vị mà họ còn là người yêu vẻ đẹp. Điều đặc biệt
không thể thiếu là khách hàng phải thấy rõ được thông tin cơ bản về cửa hàng
như: tên tiệm bánh, địa chỉ, số điện thoại, mã số doanh nghiệp (nếu có), …
Module giới thiệu
Module này chính là nơi thể hiện khả năng của cửa hàng trước mặt khách
hàng. Nơi cho khách hàng thấy tiềm năng, tiềm lực của mình. Cho họ thấy
những công nghệ, bí quyết của
mình sử dụng khi làm bánh. Đặc
biệt là kể cho họ nghe một quá
trình lịch sử của những chiếc
bánh. Đó sẽ là một câu chuyện họ
sẽ nhớ mỗi khi nghĩ về tiệm bánh
Danh mục sản phẩm
Đây là Module quan trọng nhất

của toàn bộ việc thiết kế website bán bánh. Khách hàng vào website họ sẽ
quan tâm đến cửa hàng có những loại bánh gì. Chính vì thế module này sẽ
phải được chú tâm nhất.
Danh mục các loại bánh
như: bánh sinh nhật,
bánh kem, bánh tiệc
cưới, bánh nướng, bánh
mì… phải thật chi tiết.
Việc phân rõ module sản
phẩm sẽ giúp phân loại
rõ ràng các loại bánh mà
đang có. Giúp dễ dàng
quản lý. Còn đối với
khách hàng, danh mục
này sẽ giúp họ dễ dàng
phân loại và nhanh
chóng tìm được chiếc
bánh mà họ muốn.
Giá đính kèm sản phẩm
chính là điều quan trọng
mà khách hàng muốn. Họ sẽ dễ dàng tìm được chiếc bánh ưng ý. Thêm vào
chức năng lọc, nếu website có quá nhiều chiếc bánh. Chức năng này giúp cho
khách hàng một cách thuận tiện nhất. Đặc biệt là khả năng phóng to ảnh để
khách có thể nhìn một cách rõ ràng, chi tiết.
Sản phẩm nổi bật
Việc sử dụng module sản phẩm nổi bật sẽ giúp khách hàng có sự gợi ý cũng
như chọn lựa dễ dàng hơn. Đặc biệt việc này có mức độ quan trọng cao với
cửa hàng. Sản phẩm nổi bật giúp tiệm bánh có đặc trưng riêng, lưu trữ những
chiếc bánh hoàn hảo nhất, hợp thời nhất. Như vào mùa trung thu hoặc mùa
giáng sinh sẽ có những chiếc bánh nổi bật riêng. Ngoài ra còn có thể dễ dàng
định hình xu hướng cho người dùng, giúp họ có sự lựa chọn và kéo họ theo
những chiếc bánh mà mình có.
Khuyến mãi
Đây sẽ là module nằm cạnh module sản phẩm nổi bật. Khách hàng sẽ rất quan
tâm đến những sản phẩm đang được khuyến mãi. Điều này sẽ giúp tăng đáng
kể doanh thu và đẩy mạnh những sản phẩm ít người mua. Nên đây chắc chắn
sẽ là một module cần thiết cho website cửa hàng bánh.
Tin tức – kinh nghiệm làm bánh, làm kem
Những người yêu bánh, họ luôn mong

muốn có thể tự làm một chiếc bánh
cho mình, hoặc cho người thân yêu.
Đây chắc chắn sẽ là module được
nhiều người yêu bánh thích thú. Đây
sẽ là nơi chia sẻ những kinh nghiệm
làm bánh đơn giản cho khách hàng.
Điều này không những giúp tương tác
với khách hàng mà còn làm tăng sự
yêu thích của họ đối với cửa hàng bánh. Bên kệnh đó kênh tin tức – kinh
nghiệm làm bánh, làm kem này sẽ là một kênh SEO tốt nhất cho website cửa
hàng. Cửa hàng sẽ vượt lên đối thủ một cách nhanh chóng với module này
trong website.
Tích hợp phương tiện truyền thông
Module này sẽ được tích hợp ở phía 4 giờ hoặc 8h của website (phần mũi tên
hướng xuống). Giúp khách hàng có thể liên hệ với bạn trong khung chat tích
hợp. Có thể là Facebook hoặc một trang liên lạc bất kỳ. Lợi ích của module
này là giúp khách hàng liên hệ một cách dễ dàng, ngay khi họ cần. Ngoài ra
đây cũng là một kênh thông tin và phản hồi rất tốt cho cửa hàng.
Ngoài ra, website còn tích hợp thêm một số tính năng như so sánh sản phẩm,
lọc danh sách sản phẩm theo ý muốn. Đây là những tính năng quan trọng đối
với trải nghiệm của người dùng. Điều này sẽ giúp níu chân khách hàng đến
với cảu hàng lâu dài hơn.
III. Kết quả của phân tích dữ liệu

1. Vấn đề hệ thống hiện tại
- Người dùng có thể thao tác khó khăn trong các bước như đặt hàng hay thanh
toán (vì họ thường mua trực tiếp tại cửa hàng).
- Người dùng thường sử dụng điện thoại để truy cập. Vì vậy hệ thống cần phải
làm cách nào đó để tối ưu hóa dữ liệu và nội dung hiển thị khi người dùng
sử dụng điện thoại.
- Người dùng thường hay gặp vấn đề với việc vận chuyển. Hệ thống cần có
cách đảm bảo độ tin cậy và an toàn trong quá trình đặt hàng để người dùng
không bị phân vân và lo lắng khi thao tác trên website.
2. Đưa ra yêu cầu của hệ thống mới

+ Đối tượng khách hàng thường xuyên sử dụng website là các bạn nữ trong độ
tuổi từ 15 đến 40. Đối tượng người dùng này đều có kinh nghiệm nhất định
trong việc sử dụng website khi họ đều đã từng tiếp xúc với một trang web
bán hàng tương tự trong quá khứ. Tuy nhiên họ không thường xuyên sử dụng
website để đặt mua bánh và cũng không dành quá nhiều thời gian cho việc
lướt web: chủ yếu là vào khoảng thời gian rảnh rỗi và họ thường sử dụng
điện thoại để truy cập hoặc tới trực tiếp cửa hàng để mua bánh => Responsive
và ưu tiên tính dễ dùng cho những người dùng thiếu kinh nghiệm.
+ Người dùng thường xuyên mua bánh vào bất cứ lúc nào họ muốn. Vì vậy
khuyến mãi không phải là thứ thu hút họ mà họ quan tâm tới chất lượng của
các loại bánh mà họ mua trên website hơn. Đa số người dùng đều quan tâm
tới chất lượng và nguồn gốc xuất xứ của các loại nguyên liệu được sử dụng
để làm bánh chứng tỏ họ rất quan tâm tới vấn đề an toàn vệ sinh thực phẩm.
Ngoài ra, giá cả cũng là sự ưu tiên quan trọng thứ hai sau chất lượng mà đa
số người dùng đều quan tâm tới => Thiết kế web phải đảm bảo đầy đủ thông
tin rõ ràng giúp người dùng yên tâm khi mua sản phẩm.
+ Ngoài ra, đa số người dùng đều quan tâm tới cách thức làm bánh => Thiết
kế thêm chi tiết về công thức làm bánh dành cho những người có niềm đam
mê với nấu nướng.
+ Vì đối tượng chủ yếu là thế hệ trẻ tiếp xúc nhiều với các công nghệ như
Google Maps nên đa số người dùng đều tìm kiếm địa chỉ của cửa hàng thông
qua vị trí định vị trên bản đồ thay vì đọc địa chỉ bằng văn bản thuần túy =>
Có thể kết hợp giữa địa chỉ bằng vị trí và địa chỉ bằng văn bản để tiện lợi cho
những người dùng muốn tìm vị trí của cửa hàng.
+ Người dùng cũng gặp nhiều vấn đề liên quan tới quá trình vận chuyển => Có
thể thêm chi tiết hướng dẫn những vấn đề mà người dùng thường hay gặp
phải.
IV. Use case diagram

1. Sơ đồ Use case diagram
Admin, Khách hàng, Bộ phận nhập hàng (nguyên liệu, thiết bị), Shipper,
Tác nhân hệ thống ngân hàng (Thanh toán trực tuyến):
Các tác nhân của hệ thống
2. Yêu cầu chức năng và phi chức năng của hệ thống

2.1 Đăng ký
Tên User Case Đăng ký
Tác nhân Khách hàng, admin
Tiền điều kiện Khách hàng chưa có tài khoản
Đảm bảo thành Khách hàng trở thành thành viên của hệ thống
công
Chuỗi sự kiện Khách xem chọn mục đăng ký thành viên
chính - Form đăng ký thành viên hiển thị
- Khách xem đăng nhập thông tin cá nhân vào form
đăng ký
- Nhấn nút đăng ký
- Hệ thống báo kết quả quá trình nhập thông tin cá
nhân. Nếu thông tin nhập không chính xác thì thực
hiện luồn rẽ nhánh ngoại lệ. Nếu nhập chính xác thì
thực hiện
bước 6.
- Hệ thống cập nhật thông tin của khách xem vào
danh sách thành viên
- UC kết thúc
Ngoại lệ -Nếu thông tin nhập sai: email, số điện thoại, tên hệ
thống cần đưa ra thông báo “Email đã được sử dụng”
“Số điện thoại đã được dùng”… để người dùng nhập
lại
-Tiếp tục bước 3 trong chuỗi sự kiện
2.2 Đăng nhập
Tên User Case Đăng nhập

Tác nhân Khách hàng, admin
Tiền điều kiện User đã có tài khoản
Đảm bảo thành User đăng nhập thành công và có thể sử dụng chức
công năng mà hệ thống cung cấp
Chuỗi sự kiện - Thành viên chọn chức năng đăng nhập
chính - Form đăng nhập hiển thị
- Nhập tên, mật khẩu vào form đăng nhập
- Hệ thống kiểm tra tên, mật khẩu của thành viên
Ngoại lệ Trường hợp người dùng nhập sai thông tin, hệ
thống hiển thị lại hệ thống đăng nhập cùng với
thông báo “Tài khoản của bạn không đúng”
- Chọn: đăng ký hay đăng nhập lại.
- Hệ thống yêu cầu thành viên nhập lại tên và mật
khẩu
- Nếu khách xem đồng ý thì quay về bước 2 của
luồng sự kiện chính, nếu không đồng ý thì UC kết
thúc.
2.3 Đăng xuất
Tên User Case Đăng xuất

Tác nhân Khách hàng
Tiền điều kiện Người dùng đăng nhập thành công
Đảm bảo thông tin Thoát khỏi tài khoản
Chuỗi sự kiện - Người dùng chọn chức năng đăng xuất tài khoản
chính - Thông báo hiện lên “Bạn có chắc chắc muốn đăng
xuất”
+ Nếu đồng ý, đăng xuất thành công, kết thúc
+ Nếu hủy, quay lại trang chủ
2.4 Tìm kiếm sản phẩm
Tên User Case Tìm kiếm sản phẩm

Tiền điều kiện Đã đăng nhập thành công
Đảm bảo thông tin Người dùng dễ dàng và nhanh chóng tìm được sản
phẩm yêu thích, hoặc lựa chọn được sản phẩm
mong muốn
Chuỗi sự kiện - Người sử dụng kích vào mục tìm kiếm sản phẩm
chính - Hệ thống hiển thị form tìm kiếm: tìm kiếm theo
tên, tìm kiếm theo nhà cung cấp, tìm theo mã sản
phẩm, tìm theo giá …
- Người sử dụng nhập thông tin cần thiết vào form
tìm kiếm
- Nhấn nút tìm kiếm
- Hệ thống báo kết quả tìm kiếm
- Kết thúc UC
Ngoại lệ - Nếu không hiển thị thông tin mà người dùng tìm
kiếm => hiển thị thông báo tìm kiếm lại
- Quay lại bước 3 trong chuỗi sự kiện chính
2.5 Xem thông tin sản phẩm
Tên User case Xem thông tin sản phẩm

Tác nhân Khách hàng, người quản lý
Tiền điều kiện Đăng nhập thành công, tìm kiếm được sản phẩm
Đảm bảo thông tin Form thông tin chi tiết về sản phẩm hiển thị
Chuỗi sự kiện - Người quản lý, khách hàng chọn sản phẩm cần
chính xem
- Form xem thông tin sản phẩm xuất hiện, hệ thống
hiển thị thông tin về sản
phẩm đã chọn
- Người quản lý, khách hàng xem thông tin chi tiết
về sản phẩm được hiển thị
- UC kết thúc.
2.6 Sửa thông tin cá nhân
Tên User Case Sửa thông tin cá nhân
Tiền điều kiện Thành viên phải đăng nhập vào hệ thống
Đảm bảo thông tin Cho phép thay đổi thông tin cá nhân
Chuỗi sự kiên chính - Thành viên chọn chức năng sửa thông tin cá nhân
-Hệ thống hiển thị form sửa thông tin với các thông
tin cũ của thành viên hiện tại
- Thành viên nhập các thông tin mới
- Nhấn nút lưu thông tin
- Nếu việc cập nhật thành công thì hệ thống sẽ lưu
và cập nhật thông tin
- UC kết thúc
Ngoại lệ Thông tin nhập không hợp lệ
- Hệ thống báo việc nhập dữ liệu không hợp lệ
- Thành viên nhập lại thông tin
- Quay lại bước 4 của luồng sự kiện chính
2.7 Thêm vào giỏ hàng
Tên User Case Thêm vào giỏ hàng

Tiền điều kiện Chọn được sản phẩm
Đảm bảo thông tin Sản phẩm được đưa vào giỏ hàng
Chuỗi sự kiện chính - Chọn chức năng thêm vào giỏ hàng để đưa sản
phẩm đã chọn vào lưu trữ trong giỏ hàng. Nếu chưa
chọn sản phẩm mà nhấn nút thêm vào giỏ hàng thì
thực hiện Ngoại lệ
- Hệ thống hiển thị thông tin sản phẩm đưa vào giỏ
hàng
- UC kết thúc
Ngoại lệ Chưa chọn sản phẩm cần mua:
- Hệ thống thông báo sản phẩm chưa được chọn
- Hiển thị sản phẩm để khách hàng chọn
- Quay lại bước 1 của luồng sự kiện chính.
2.8 Thanh toán
Tên User Case Thanh toán

Tiền điều kiện Khách hàng chọn được sản phẩm đưa vào giỏ hàng
Đảm bảo thông tin Đơn hàng được gửi
Chuỗi sự kiện chính - Khách hàng nhấn thanh toán để tạo đơn hàng.
- Form thanh toán xuất hiện, hệ thống hiển thị đơn
hàng và một số thông tin mặc định của đơn hàng
- Khách hàng nhập tiếp các thông tin : họ tên, số tài
khoản, phương thức thanh toán, địa chỉ giao hàng,
thời gian giao hàng, địa chỉ e mail để thanh toán
đơn hàng
- Chọn gửi đơn hàng. Nếu đơn hàng đã nhập đúng
thì thực hiện bước 5, nếu sai thì thực hiện sáng
luồng rẽ nhánh A1
- Hệ thông kiểm tra số tài khoản của khách hàng và
phương thức thanh toán, nếu hợp lệ thì thực hiện
bước 6, nếu sai thì thực hiện luồn rẽ nhánh A2
- Hệ thống thông báo giao dịch thành công .
- UC kết thúc
Ngoại lệ Luồng rẽ nhánh A1: đơn hàng nhập sai
- Hệ thống thông báo việc tạo đơn hàng không
thành công
- Hệ thống hiển thị lại form nhập thông tin và các
trường nhập sai
- Khách hàng nhập lại thông tin, nếu muốn ngừng
giao dịch thì thực hiện luồng sự kiện rẽ nhánh A3
Luồng rẽ nhánh A2: tài khoản không hợp lệ
- Hệ thống thông báo phương thức thanh toán và tài
khoản của khách hàng không hợp lệ.
- Khách hàng nhập lại thông tin nếu muốn tiếp tục
mua hàng, nếu muốn ngừng giao dịch thì thực hiện
luồng rẽ nhánh A3
Luồng rẽ nhánh A3: khách hàng hủy đơn hàng
- Khách hàng nhấn nút hủy bỏ đơn hàng
- Hệ thống hiển thị các sản phẩm để khách hàng
thực hiện giao dịch mới
- UC kết thúc
2.9 Kiểm tra đơn hàng
Tên User Case Kiểm tra đơn hàng

Tác nhân Bộ phận kinh doanh
Tiền điều kiện Đơn hàng được khách hàng mua
Đảm bảo thông tin Xác nhận thông tin sản phẩm
Chuỗi sự kiện - Nhân viên kinh doanh kiểm tra đơn hàng
chính - Hệ thống hiển thị thông tin đơn hàng
- Nhân viên xác nhận thông tin trên đơn hàng
- Kết thúc UC
2.10. Nhận và giao hàng
Tên User Case Nhận và giao hàng

Tác nhân Shipper
Tiền điều kiện Đơn hàng được kiểm tra, đóng gói
Đảm bảo thông tin Người dùng xác nhận sản phẩm đã được giao
Chuỗi sự kiện chính - Nhân viên nhận được đơn hàng cần thực hiện.
- Thay đổi trạng thái đơn hàng.
- Gửi thông tin phản hồi, giao hàng thành công.
- Lấy xác nhận của khách hàng.
- Kết thúc UC
Ngoại lệ Nếu khách hàng không nhận hàng:
- Báo cáo cho admin cửa hàng
- Thay đổi trạng thái đơn hàng
- Trả lại đơn hàng, giao lại sau
- Quay lại bước 1 của chuỗi sự kiện chính
V. Thiết kế giao diện

1. Xác định kích thước màn hình hiển thị + trình duyệt
- Desktop :
Chiều ngang mặc đinh cho Destop là 1440px kích cỡ này phù hợp với trên các
loại màn hình máy tính thông dụng
Cụ thể :
Trang chủ W = 1440px; H = 4865px
Câu chuyện W = 1440px; H= 4138px
Sản phẩm W=1440px; H = 2780px
Blog W = 1440px; H = 2721px
Blog chi tiết W = 1440px; H = 4247px
Liên hệ W= 1440px; H = 3484px
Công thức W = 1440px; H = 3452px
Sản phẩm chi tiết W = 1440px; H = 6028px
Đăng nhập W = 1440px; H = 2201px
Đăng kí W = 1440px; H = 2405px
Giỏ hàng W = 1440px; H = 3065px
- Tablet : Chiều ngang mặc định là 768px – Tương ứng với Ipad pro 11”
Trang chủ W =768px; H = 7348 px
Câu chuyện W =768px; H= 4830 px
Sản phẩm W=768px; H = 4616px
Blog W = 768px; H = 3829px
Liên hệ W= 768px; H = 4696px
Công thức W = 768px; H =5150px
Sản phẩm chi tiết W = 768px; H = 6945px
- Mobile phone : chiều ngang mặc định là 428px – Tương ứng với màn hình
Iphone 14 promax
Trang chủ W = 428px; H = 6863 px
Câu chuyện W = 428px; H= 4353 px
Sản phẩm W = 428px; H = 5114 px
Blog W = 428px; H = 3752 px;
Liên hệ W = 428px; H = 4887 px
Công thức W = 428px; H = 7529px
Sản phẩm chi tiết W = 428px ;H = 6945px
2. Xác định nội dung

- Thiết kế website cần phân cấp thông tin rõ ràng, tập trung vào các thông tin cần
quan tâm
- Sử dụng các font chữ dễ đọc như Roboto
- Đường dẫn đến các trang khác cần đổi màu chữ
- Phân loại sản phẩm trên thanh ngang chính cần ngắn lại phù hợp với nguyên
tắc 7+-2
- Hiển thị sản phẩm theo giá tăng dần hoặc giảm dần
- Dữ liệu phải được tối ưu hóa để xử lý các yêu cầu truy cập cùng một lúc
- Thông tin được cập nhật thường xuyên và mới nhất để tránh sai xót.
- Thiết kế hệ thống thông tin đơn giản giúp người dùng không cần thao tác quá
3 bước.
- Đăng ký tài khoản cá nhân người dùng đơn giản.
- Thiết kế đảm bảo thống nhất màu sắc , bố cục , phông chữ , hình ảnh.
- Dễ dàng tìm kiếm sản phẩm mà người dùng mong muốn ,dễ dàng xác định các
thông tin, chi phí của sản phẩm.
- Thông báo số lượng sản phẩm được cập nhật liên tục trên hệ thống.
- Trạng thái đơn hàng , những cập nhật mới phải được thông báo nhanh chóng
chính xác tới người dùng.
- Các nút CTA được bố trí hợp lý kêu gọi hành động của người sử dụng.
- Website có đa dạng sản phẩm cho người dùng lựa chọn
- Blog chia sẻ kiến thức và thông tin
- Giỏ hàng để người dùng có thể kiểm tra lại các sản phẩm mình mua
- Thêm hệ thống điều hướng footer để người dùng dễ dàng thao tác
3. Hệ thống lưới
Sử dụng lưới column grid, baseline grid
3.1 Lưới desktop
Chỉ ra các thông số : margin, gutter, column + hình ảnh
Hệ thống lưới cho desktop :
3.2. Lưới tablet
Chỉ ra các thông số : margin, gutter, column + hình ảnh:
3.3. Lưới mobile phone
Chỉ ra các thông số : margin, gutter, column + hình ảnh:
4. Wireframe
5. Font chữ
Website Fairy Bakey sử dụng hai font chữ chính là Pacifico và Roboto:
Vì đây là một website về bánh, khách hàng chủ yếu tập chung vào nữ giới
nên sẽ sử dụng những font chữ nghệ thuật, viết tay…để thu hút thay vì sử dụng
những font chữ cứng mang cảm giác nghiêm túc trang trọng.
Font pacifico được lấy cảm hứng từ nền văn hoá lướt sóng. Nét chữ Pacifico
tròn trịa, tạo cảm giác mềm mại nhưng không quá ủy mị, lả lướt. Các vòng lặp
và đường cong tròn mang lại cảm giác cổ điển. Font chữ viết tay này không quá
dối mắt cũng không quá đơn điệu, phù hợp sử dụng cho tên thương hiệu và các
đề mục lớn của trang.
- Roboto: Đây là một font chữ không chân với thiết kế đơn giản, hiện đại. Bộ
phông này bao gồm sáu kiểu in đậm (weight) theo mức độ đậm dần là Thin,
Light, Regular, Medium, Bold và Black nên có thể dễ dàng lựa chọn các kiểu
nét đậm nhạt khác nhau cho phù hợp với trang web. Font chữ nãy cũng hỗ trợ
Tiếng việt nên trang web sẽ không gặp trường hợp bị lỗi font.
- Font Pacifico sử dụng trong phần tiêu đề: Font chữ viết tay trong, mềm mại
không rối mắt mang lại sự đối lập giữ phần tiêu đề và nội dung làm cho người
nhìn dễ dang phân biệt.
- Font Roboto sử dụng trong phần nội dung: Font chữ này dễ sử dụng, dễ đọc,
phù hợp với đa số các mục đích khác nhau. Nét thanh mảnh đơn giản, tạo cảm
giác thoải mái cho người đọc thích hợp sử dụng cho phần nội dung văn bản.
- Kích cỡ:
 Phần nội dung: 14px
Giúp người đọc dễ nhìn, thoải mái, không gây tình trạng mỏi mắt không bị đưa
mắt quá sát vào màn hình.
 Phần tiêu đề:

 Tiêu đề lớn: 36px;
 Tiêu đề phụ: 24px;
Khoảng cách giữa các đoạn văn gấp 2 lần kích cỡ chữ, còn khoảng cách giữa
các chữ cái gấp 0,12 lần kích cỡ chữ.
6. Màu sắc
Pallet màu sử dụng trong website
- Màu sắc sử dụng chính trong trang web này là Nâu và Cam
- Hai màu sắc này có sự tương đồng với màu sắc của các loại bánh vì vậy sẽ
tạo nên sự hài hoà cho trang web.
- Các màu chính như nâu, be và kết hợp với những gam màu trầm như đen
xám và nâu đất tạo cho trang web sự đơn giản, gần gũi những cũng không
kém phần tinh tế, sang trong.
- Gam màu trung tính này chũng khiến người nhìn cảm thấy thoải mái dễ chịu,
phù hợp với nhiều lứa tuổi
7. Hình ảnh + video

- Hình ảnh:
 Header
 Content:
Một số hình ảnh sản phẩm:
 Footer:
8. Bố cục trang
- Bố cục chữ Z:
Bố cục này áp dụng cho trang Landing Page.
Phần đường chéo của hình chữ Z, kéo dài khắp trang từ trên xuống dưới, là
nơi thông tin thu hút sự chú ý nhất phù hợp để thể hiện những hình ảnh hấp
dẫn với nội dung ngắn ngọn
- Bố cục: Chia đôi màn hình:
Sự phân thành hai phần cho phép mỗi phần thể hiện một ý tưởng hoàn toàn
khác hoặc kết hợp văn bản và hình ảnh bổ sung cho nhau tạo sự cân bằng đối
xứng hoàn hảo.
- Bố cục bất đối xứng:
Bố cục bất đối xứng sẽ tạo sự kích thích về thị giác khiến cho trang web
năng động.
Sự phân bổ không đồng đều về tỷ lệ, màu sắc và chiều rộng trên trang sẽ
thúc đẩy sự tương tác của ngừời dùng với trang web.
- Bố cục hình hộp:
Bố cục này áp dụng thiết kế một hộp nổi bật lớn gắn kết với các hộp nhỏ
để tạo nên một tổng thể thống nhất.
- Bố cục thẻ:
Bố cục thẻ sử dụng các hộp không phân cấp nghĩa là tất cả các hộp có nội
dụng tương tự nhau( về kích thước, phông chữ..), không có mục nào nổi bật
hơn
- Bố cục dải ngang:
Bố cục này chia trang web thành các dải ngang. Để tạo sự sáng tạo và
không bị nhàm chán thì nên sử dùng màu sắc khác nhau trong các dải liền
kề..
- Bố cục dạng lưới
Bố cục này là dạng layout chứa nhiều nội dung hình ảnh và văn bản tạo
cảm giác mới mẻ, chuyên nghiệp.
VI. Thiết kế prototype
1. Kiến trúc thông tin của website
Sơ đồ tổ chức thông tin cho website
2. Các loại điều hướng

- Điều hướng chính:
Khu vực điều hướng chính trong trang chủ
+ Vị trí: Nằm ở header của tất cả các trang
+ Chứa các đường dẫn tới các trang con khác như: Câu chuyện, Sản phẩm,
Blog, Liên hệ, Đăng nhập, Đăng ký, Tài khoản cá nhân, Giỏ hàng.
+ Phong cách hiển thị: Dạng văn bản với gạch chân ở dưới chữ khi người dùng
đang ở trang đó.
+ Lý do sử dụng:
 Cung cấp cho người sử dụng biết hệ thống cung cấp những chức năng gì
(đối với người dùng truy cập lần đầu) và hỗ trợ người dùng định hướng vị
trí trong hệ thống: Chỉ cần nhìn vào khu vực điều hướng chính, người dùng
có thể biết được mình đang ở đâu, cần những gì.
 Tiện ích cho việc di chuyển qua lại giữa các trang: Chỉ cần một cú click
chuột, người dùng có thể chuyển từ trang này qua trang khác  Đơn giản,
dễ thực hiện, rõ ràng phù hợp với những đối tượng người dùng mới sử dụng.
 Xác định ranh giới của website, phân biệt các trang.
- Điều hướng nhúng:
+ Vị trí:
 Xuất hiện trong trang chi tiết sản phẩm: Được sử dụng để điều hướng người
dùng tới trang sản phẩm trong trường hợp người dùng muốn tìm thêm các
loại bánh tương tự có cùng tags hoặc cùng loại. Phong cách hiển thị ở đây
là dạng văn bản chữ được tô màu khác.
Điều hướng nhúng trong trang sảng phẩm

 Xuất hiện trong trang chủ (mục blog chia sẻ) : Điều hướng người dùng tới
trang blog trong trường hợp người dùng muốn tìm hiểu chi tiết về loại
bánh như giá cả, công thức, nguyên liệu… Để giúp người dùng nhận ra
loại điều hướng này, một nút mũi tên được đính kèm bên cạnh. Nó cũng
giúp người dùng dự đoán mình sẽ được đưa tới đâu khi ấn vào nút:
Điều hướng nhúng trong trang chủ (Blog chia sẻ)
 Xuất hiện trong trang Blog: Điều hướng người dùng sang trang blog chi
tiết (một trang con của blog)
Điều hướng nhúng trong trang Blog
 Xuất hiện trong trang đăng nhập (hoặc đăng ký): Phong cách hiển thị vẫn
là dạng chữ với phần màu được tô khác so với các nội dung còn lại trên
trang:
Điều hướng nhúng trong trang đăng nhập/ đăng ký
 Hỗ trợ người dùng di chuyển tới các trang khác nhau của website trong
những trường hợp cụ thể theo ngữ cảnh sử dụng
 Tạo mối liên kết giữa các trang của website
- Liên kết nhanh:
 Xuất hiện ở breadcrumb

 Phong cách hiển thị: Là một đường dẫn với phần chữ được tô màu khi
người dùng đang ở trang đó
 Lý do sử dụng: Đóng vai trò như một loại tiện ích mà website cung cấp.
Ngoài việc hỗ trợ định hướng vị trí cho người dùng và mô tả độ sâu của
trang thì loại điều hướng này cũng hỗ trợ người dùng chuyển trang một
cách nhanh chóng.
 Xuất hiện trong Footer: Chứa các đường dẫn tới các trang của website. Nó
đóng vai trò là một sitemap tổng hợp lại tất cả các trang của website. Hiệu
ứng hover được sử dụng (khi rê chuột tới đoạn chữ sẽ được chuyển sang
màu khác) nhằm giúp người dùng biết được đây là một liên kết và có thể
bấm vào:
 Lý do sử dụng: Tổng hợp rõ ràng những gì mà hệ thống cung cấp, tránh
gây khó hiểu cho những người lần đầu sử dụng.
- Điều hướng footer:
Điều hướng footer
+ Vị trí: Nằm ở dưới cùng của trang
+ Chứa các đường dẫn quay về đầu trang hiện tại hoặc di chuyển tới các trang
khác. Ngoài ra chứa các thông tin bổ sung không liên quan đến chủ đề chính
của website: địa chỉ, số điện thoại, các sản phẩm chính, form yêu cầu hỗ trợ
 Cung cấp các thông tin bổ sung mà không xâm nhập vào nội dung của
website: Ví dụ như các thông tin liên quan tới các vấn đề pháp lý của chủ
nhân website (bản quyền, điều khoản, điều kiện…) hay các thông tin hỗ
trợ người dùng
 Hỗ trợ cho người dùng di chuyển nhanh tới vị trí họ muốn trong trường
hợp họ đang ở vị trí cuối cùng của trang mà không cần phải cuộn chuột lại
một lần nữa
- Logo liên kết:
+ Vị trí: Logo nằm ở phía trên cùng tay trái của header
 Giúp người dùng quay về trang chủ một cách nhanh chóng.
 Liên kết chặt chẽ các trang con trong website với trang chủ.
- Điều hướng ngoài website:
+ Vị trí: Nằm trong các logo social media (thuộc trang công thức, trang đăng
nhập và đăng ký)
 Đối với logo social media thuộc trang công thức: Điều hướng người dùng
sang các trang mạng xã hội: hỗ trợ người dùng chia sẻ các công thức mà họ
yêu thích, đồng thời giúp ích cho việc truyền thông website
 Đối với các logo social media thuộc trang đăng nhập/ đăng ký: Hỗ trợ người
dùng đăng nhập nhanh bằng các tài khoản mạng xã hội mà không cần phải
tốn thời gian điền thông tin đăng ký hoặc đăng nhập. Điều này hoàn toàn
phù hợp với những đối tượng người sử dụng chính của website (là những
người truy cập vì yêu thích bánh hoặc đam mê nấu ăn. Những đối tượng
này thường sử dụng web trong thời gian rảnh rỗi. Do vậy những liên kết
nhanh như ở trang đăng nhập sẽ phù hợp với các đối tượng này).
3. Đánh giá khả năng hoạt động
3.1. Ưu điểm
- Cách hiển thị: Dễ nhìn, quen thuộc và đơn giản (chủ yếu ở dạng chữ)
 Phù hợp với nhóm người lần đầu sử dụng hoặc có ít kinh nghiệm
- Vị trí xuất hiện: Phù hợp với ngữ cảnh sử dụng và nội dung của từng trang
 Liên kết các trang với nhau một cách logic
3.2. Nhược điểm

- Một số chỗ cách hiển thị chưa rõ ràng: Chỉ có chữ và phải rê chuột vào mới
thấy được
 Đối với nhóm người mới sử dụng có thể khiến họ bối rối
- Chưa có điều hướng nội bộ trang: Đối với các trang dài, người dùng sẽ mất
nhiều thời gian để cuộn chuột, do vậy có thể gây khó chịu cho người dùng.
4. Mô tả hoạt động của sản phẩm
- Công cụ sử dụng: Figma
- Prototype tổng hợp:
Prototype được sử dụng trong figma
- Mô tả hoạt động của sản phẩm (Xem tại phụ lục)
VII. Code
1. Tìm hiểu các ngôn ngữ lập trình sử dụng
1.1. HTML
- Khái niệm:
Ngôn ngữ HTML (HyperText Markup Language – ngôn ngữ siêu văn bản)
là một trong các loại ngôn ngữ được sử dụng trong lập trình web. Khi truy cập
một trang web cụ thể là click vào các đường link, chúng ta sẽ được dẫn tới nhiều
trang các nhau, và các trang này được gọi là một tài liệu HTML (tập tin HTML).
Một trang HTML như vậy được cấu thành bởi nhiều phần tử HTML nhỏ và
được quy định bằng các thẻ tag. Chúng ta có thể phân biệt một trang web được
viết bằng ngôn ngữ HTML hay PHP thông qua đường link của nó. Ở cuối các
trang HTML thường hay có đuôi là .HTML hoặc .HTM.
HTML là ngôn ngữ lập trình web được đánh giá là đơn giản. Mọi trang web,
mọi trình duyệt web đều có thể hiển thị tốt ngôn ngữ HTML. Hiện nay, phiên bản
mới nhất của HTML là HTML 5 với nhiều tính năng tốt và chất lượng hơn so với
các phiên bản cũ của HTML.
- Vai trò:
HTML là một loại ngôn ngữ đánh dấu siêu văn bản nên các chức năng của nó
cũng xoay quanh yếu tố này. Cụ thể, HTML giúp cấu thành các cấu trúc cơ bản
trên một website (chia khung sườn, bố cục các thành phần trang web) và góp phần
hỗ trợ khai bảo các tập tin kĩ thuật số như video, nhạc, hình ảnh.
Ưu điểm nổi trội nhất và cũng là thế mạnh của HTML là khả năng xây dựng
cấu trúc và khiến trang web đi vào quy củ một hệ thống hoàn chỉnh. HTML chứa
những yếu tố cần thiết mà dù website có thuộc thể loại nào, giao tiếp với ngôn
ngữ lập trình nào để xử lý dữ liệu thì nó vẫn phải cần đến ngôn ngữ HTML để
hiển thị nội dung cho người truy cập.
Đối với các lập trình viên hay nhà phát triển web, họ đều phải học HTML như
một loại ngôn ngữ cơ bản trước khi bắt tay vào thiết kế trang web nào.
Các thẻ trong HTML:
Các trang HTML được quy định bằng các thẻ tag. Những thẻ này được chứa
trong các dấu ngoặc đơn dạng: <tên thẻ). Trừ một vài thẻ đặc biệt, hầu hết các thẻ
cơ bản đều có các thẻ đóng tương ứng với nó. Ví dụ, thẻ <html> có thể đóng tương
ứng là </html>, thẻ <body> có thể đóng tương ứng là </body> ... Bảng 1.1 là các
mẫu thẻ tag thường gặp trong HTML.
1.2. CSS
- Khái niệm:
CSS là viết tắt của Cascading Style Sheets. Đây là một ngôn style sheet được
sử dụng để mô tả giao diện và định dạng của một tài liệu viết bằng ngôn ngữ.
đánh dấu (markup). CSS cung cấp một tính năng bổ sung cho HTML. CSS
thường được sử dụng với HTML để thay đổi phong cách của trang web và giao
diện người dùng.
CSS được sử dụng cùng với HTML và JavaScript trong hầu hết các trang web
để tạo giao diện người dùng cho các ứng dụng web và giao diện người dùng cho
nhiều ứng dụng di động.
- Vai trò:
+ Giải quyết một vấn đề lớn: Trước khi có CSS, các thẻ như phòng chữ, màu sắc,
kiểu nền, các sắp xếp phần tử, đường viền và kích thước phải được lặp lại trên
mọi trang web. Đây là một quá trình rất dài tốn thời gian và công sức.
+ Tiết kiệm rất nhiều thời gian: Định nghĩa kiểu CSS được lưu trong các tệp CSS
bên ngoài vì vậy có thể thay đổi toàn bộ trang web bằng cách thay đổi chỉ một
tệp.
+ Cung cấp thêm các thuộc tính: CSS cung cấp các thuộc tính chi tiết hơn HTML
để định nghĩa giao diện của trang web.
2. Thư viện hỗ trợ
Javascript:
JavaScript là một ngôn ngữ dạng script thường được sử dụng cho việc lập
trình web ở phía client, nó tuân theo chuẩn ECMAScript. Là một ngôn ngữ linh
động, cú pháp dễ sử dụng như các ngôn ngữ khác và dễ dàng lập trình. JavaScript
không hề liên quan tới ngôn ngữ lập trình java, được hầu hết các trình duyệt ngày
nay hỗ trợ. Với javascript, ứng dụng web của bạn sẽ trở nên vô cùng sinh động,
mang tính trực quan và tương tác cao. JavaScript theo phiên bản hiện hành là một
ngôn ngữ lập trình kịch bản dựa trên đối tượng được phát triển từ các ý niệm
nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang web, nhưng cũng
được dùng để tạo khả năng viết script sử dụng các đối tượng nằm sẵn trong các
ứng dụng. Giống Java, JavaScript có cú pháp tương tự ngôn ngữ lập trình C. “.js”
là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript.
3. Công cụ hỗ trợ
Visual Studio Code
Lý do sử dụng:
 Dung lượng thấp.
 Phát triển mạnh mẽ trên 3 hệ điều hành phổ biến của thế giới. Visual Studio
Code được phát triển bởi phần mềm Microsoft nên nó có khả năng tương thích
mạnh mẽ với hệ điều hành Windows. Bên cạnh đó, cũng có thể sử dụng trên 2
hệ điều hành khác đó là macOS và Linux.
 Thiết kế giao diện thân thiện và gần gũi với người dùng.
 Quá trình mã hóa, gỡ lỗi được tối ưu nhất. Visual Studio Code giúp tiết kiệm
thời gian bởi nó được thiết kế các phím tắt mở ra chức năng hay thêm dòng
lệnh… để tránh gây cản trở khi đang code. Đồng thời cũng có thể bổ sung hay
thay đổi các phím tắt để phù hợp với mục đích sử dụng của mình.
 Kiến trúc ưu việt và có thể khai thác mở rộng. Visual Studio Code được xây
dựng phát triển dựa trên Electron kết hợp với các hệ thống ngôn ngữ công nghệ
thông minh như: JavaScript, Node.js cùng khả năng vận hành vô cùng mạnh
mẽ của chính nó.
 Cộng đồng hỗ trợ vô cùng rộng lớn. Trong những năm qua, Visual Studio Code
dẫn khẳng định được vị trí đứng của mình với một lượng lớn những người sử
dụng trên khắp các nước. Vì vậy khi gặp bất kỳ vấn đề gì có thể nhờ tới sự trợ
giúp từ các cộng đồng Microsoft, Reddit, StackOverFlow…
4. Quy trình thực hiện

- Phân chia các trang cho từng thành viên đảm nhiệm
- Thống nhất cách đặt tên cho các giá trị, đảm bảo sự liên kết các trang
- Tiến hành code (sử dụng các kiến thức đã học, tự tìm hiểu để cho ra sản phẩm
tối ưu nhất, hoàn thiện nhất)
- Tổng hợp code, liên kết link các trang lại với nhau
5. Source code
- Xem tại phụ lục
6. Giao diện hiển thị

6.1. Giao diện trang chủ
6.2. Giao diện giới thiệu
6.3. Giao diện sản phẩm
6.4. Giao diện tin tức
6.5. Giao diện đăng ký
6.6. Giao diện đăng nhập
7. Những thuận lợi và khó khăn khi thực hiện code

Thuận lợi:
 Nhóm có sự chuẩn bị, phân chia công việc kỹ càng.
 Trong quá trình thực hiện có sự bàn bạc, học hỏi giữa các thành viên.
 Mọi người đều có những kiến thức cơ bản khá vững.
 Tích cực trao đổi, tự tìm tòi.
 Sự hỗ trợ trên các nền tảng xã hội.
Khó khăn:
 Kiến thức chưa chắc dẫn đến việc trực quan hóa thiết kế còn khó khăn.
 Một số thông tin giữa bản thiết kế và giao diện code chưa đồng nhất.
 Đặt trùng tên các giá trị gây mất thời gian chỉnh sửa.
 Tốc độ truy cập chưa được tối ưu.
VIII. Kết luận

1. Kết quả đạt được
Sau một thời gian tập trung triển khai đề tài, nhóm 7 chúng em đã hoàn
thành được “Website bán bánh ngọt Fairy” với giao diện đẹp, các thao tác sử
dụng dễ dàng, thân thiện với người dùng.
Sau khi kết thúc môn học này, chúng em có thêm những kỹ năng nền tảng
để thiết kế giao diện Website đáp ứng mong muốn người dùng, áp dụng các
kiến thức HTML, CSS và Javascript đã học vào việc phát triển ứng dụng
web. Bên cạnh đó, em cũng được mở rộng thêm các kiến thức chuyên ngành
mới nhờ việc tìm hiểu một số kiến thức về thiết kế giao diện, lập trình web
để áp dụng vào việc phát triển ứng dụng này. Nhờ vậy, kỹ năng tự học và
vận dụng các kỹ năng mới của chúng em được nâng cao hơn.
Khi thực hiện và hoàn thành dự án, chúng em cũng đã biết thêm được
nhiều kinh nghiệm quý giá khi xây dựng website nói riêng và phát triển phần
mềm. Những kỹ năng này sẽ nền tảng để giúp em nâng cao trình độ bản
thân, kinh nghiệm trong thực tế để có thể làm việc ngoài các doanh nghiệp
sau này.
2. Hạn chế
- Bên cạnh những kết quả khả quan đã đạt được, chúng em nhận thấy còn tồn
tại một số hạn chế:
+ Một số thành phần trên giao diện thiết kế và giao diện sau khi hoàn thiện
còn chưa đồng nhất.
+ Tốc độ xử lý chưa cao, vẫn còn một số lỗi phát sinh khi vận hành hệ thống.
3. Hướng phát triển của đề tài

Sau khi hoàn thành đề tài “Xây dựng website bán bánh ngọt Fairy”, chúng
em sẽ tiếp tục nghiên cứu và phát triển website này nhằm tăng tính năng và
tối ưu tốc độ xử lý để đem lại hiểu quả cao hơn, phát triển để đưa website và
ứng dụng thực tế.
PHỤ LỤC
1. SOURCE CODE
https://drive.google.com/drive/folders/1BlTdWRhYshRoPwkXjnQxOh
uY61Oiqloe
2. VIDEO MÔ TẢ HOẠT ĐỘNG CỦA SẢN PHẨM
https://drive.google.com/drive/folders/11nZBe-f-
88pHPW5aXbz4cuMmtGLrUDaW?usp=sharing
3. File figma
https://www.figma.com/file/LDN869x9H11pe94Hu
A3Tu4/Wireframe?node-
id=0%3A1&t=1foKimHBeD7EN1n4-0

Báo Cáo Nhóm 7

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

Báo Cáo Nhóm 7

Uploaded by

Copyright:

Available Formats

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

KHOA ĐA PHƯƠNG TIỆN

BÁO CÁO MÔN THIẾT KẾ WEB

Giảng viên hướng dẫn: Nguyễn Thị Thanh Tâm

I. Xác định đối tượng....................................................................................... 5

o Người tương tác gián tiếp với sản phẩm:

Một số câu trả lời tiêu biểu mà tôi đã note

Một số câu trả lời tiêu biểu:

 Tôi ăn cách đây 3 ngày, đó là ngày kỷ niệm ngày cưới của

Một số câu trả lời tiêu biểu:

 Tôi thích ăn bánh theo kiểu truyền thống

Một số câu trả lời tiêu biểu:

Một số câu trả lời tiêu biểu:

Một số câu trả lời tiêu biểu:

Một số câu trả lời tiêu biểu:

Một số câu trả lời tiêu biểu:

 Sản phẩm tốt cho sức khỏe

Một số câu trả lời tiêu biểu:

Một số câu trả lời tiêu biểu:

2 Đặt câu hỏi

=> Để có dữ liệu này ta cần đặt ra những câu hỏi như:

=> Để có dữ liệu này ta cần đặt ra những câu hỏi:

- Hình thức khảo sát và phương pháp tiến hành:

- Bảng khảo sát cuối cùng:

2.2 Kết quả khảo sát

+ Độ tuổi phổ biến: Từ 15-40 tuổi

+ Tỉ lệ người dùng mua bánh vào các dịp:

3 Tập trung nhóm và các khóa học thực hành

3.2 Kết quả khảo sát

4 Tiếp cận tự nhiên

4.1.2 Kết quả quá trình quan sát:

Bảng thống kê những điều mà khách hàng quan tâm

Cứ 100 người truy cập vào website thì:

- 22% quan tâm đến giá cả

30% khách hàng truy cập để xem bánh

20% khách hàng truy cập để xem cách làm bánh

10% khách hàng không rõ mục đích truy cập

Đa số khách hàng ở độ tuổi từ 22-35 tuổi (40%)

- Trải nghiệm đặt bánh bị khó khăn.

5 Nghiên cứu tài liệu

Module giới thiệu

Danh mục sản phẩm

Đây là Module quan trọng nhất

Sản phẩm nổi bật

Những người yêu bánh, họ luôn mong

Tích hợp phương tiện truyền thông

III. Kết quả của phân tích dữ liệu

2. Đưa ra yêu cầu của hệ thống mới

IV. Use case diagram

2. Yêu cầu chức năng và phi chức năng của hệ thống

2.2 Đăng nhập

Tên User Case Đăng nhập

2.3 Đăng xuất

Tên User Case Đăng xuất

2.4 Tìm kiếm sản phẩm

Tên User Case Tìm kiếm sản phẩm

2.5 Xem thông tin sản phẩm

Tên User case Xem thông tin sản phẩm

2.6 Sửa thông tin cá nhân

2.7 Thêm vào giỏ hàng

Tên User Case Thêm vào giỏ hàng

2.8 Thanh toán

Tên User Case Thanh toán