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

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

🙤🙧 & 🙥🙦

ĐỒ ÁN CHUYÊN NGÀNH
Xây dựng website TMĐT Mythicom chuyên các sản phẩm chủ đề thần thoại

Môn học: Đồ án chuyên ngành

Lớp: NT114.N21
GVHD: ThS. Trần Hồng Nghi
Họ và tên MSSV
Nguyễn Bảo Ngọc 19521906
Vũ Đăng Khoa 19520647

TP. Hồ Chí Minh, tháng 6, năm 2023

 LỜI CẢM ƠN

1
Trước tiên với tình cảm sâu sắc và chân thành nhất, cho phép chúng em được bày
tỏ lòng biết ơn đến nhà trường đã tạo điều kiện hỗ trợ, giúp đỡ chúng em trong suốt quá
trình học tập và nghiên cứu đề tài này. Trong suốt thời gian từ khi bắt đầu học tập tại trường
đến nay, chúng em đã nhận được rất nhiều sự quan tâm, giúp đỡ từ thầy cô và bạn bè.
Chúng em xin kính chúc quý thầy cô ngày càng khỏe mạnh để phấn đấu đạt thành
tích cao trong công tác giảng dạy. Chúc trường sẽ mãi là niềm tin, nền tảng vững chắc cho
nhiều thế hệ sinh viên với bước đường học tập.
Với lòng biết ơn nhất, chúng em xin gửi cho cô Trần Hồng Nghi ở Khoa Mạng
máy tính và truyền thông đã truyền đạt vốn kiến thức quý báo cho chúng em trong suốt
thời gian học tập tại trường. Nhờ có những lời hướng dẫn, dạy bảo tận tình của cô nên đề
tài nghiên cứu của chúng em mới có thể hoàn thiện tốt đẹp.
Một lần nữa, chúng em xin chân thành cảm ơn cô Trần Hồng Nghi – người đã trực
tiếp giúp đỡ, quan tâm, hướng dẫn chúng em hoàn thành tốt bài báo cáo này trong thời gian
qua.
Bài báo cáo thực hiện trong thời gian qua, do chúng em còn nhiều hạn chế và còn
nhiều bỡ ngỡ nên không tránh khỏi những thiếu sót, chúng em rất mong nhận được những
ý kiến đóng góp quý báu của quý thầy cô để kiến thức của chúng em trong lĩnh vực này
được hoàn thiện hơn đồng thời có điều kiện bổ sung, nâng cao kiến thức của mình. Phục
vụ tốt hơn công việc thực tế sau này.
Mặc dù đã cố gắng nỗ lực thực hiện đề tài với quyết tâm cao nhưng chắc hẳn đề tài
không thể tránh khỏi những thiếu sót. Chúng em rất mong nhận được những ý kiến đóng
góp ý kiến của thầy cô và các bạn để đề tài của chúng em ngày càng hoàn thiện và hướng
tới áp dụng thực tế hơn.
Chúng em xin chân thành cảm ơn!

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

2
1. Hình thức (Bố cục, trình bày, lỗi, các mục, hình, bảng, công thức, phụ lục, …)
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
2. Nội dung (Mục tiêu, phương pháp, kết quả, sao chép, các chương, tài liệu, …)
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
3. Kết luận
...................................................................................................................................
...................................................................................................................................

TP.HCM, Ngày 8 tháng 7 năm 2023

Giảng viên hướng dẫn
(Ký tên, ghi rõ họ tên)

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

Mục lục

3
Mục lục ........................................................................................................................................... 3

Chương 1. Tổng quan đề tài............................................................................................................ 5

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

1.2. Mục tiêu của đề tài ........................................................................................................... 5

1.3. Phạm vi và đối tượng ....................................................................................................... 6

1.4. Các khảo sát liên quan ...................................................................................................... 6

1.4.1. 1.4.1. Khảo sát website Always Store ( Cửa hàng đầu tiên và duy nhất dành cho fan
Harry Potter tại Việt Nam ) ..................................................................................................... 6

1.5. Quy trình thực hiện .......................................................................................................... 7

Chương 2. Cơ sở lý thuyết (Khoa) .................................................................................................. 8

2.1. Công nghệ Front-end ........................................................................................................ 8

2.1.1. ReactJS ...................................................................................................................... 8

2.1.2. TailwindCSS ............................................................................................................. 9

2.1.3. TypeScript ................................................................................................................. 9

2.2. Công nghệ Back-end – Database ..................................................................................... 9

2.3. Hosting ........................................................................................................................... 10

2.4. Công cụ hỗ trợ ................................................................................................................ 11

2.4.1. Visual Paradigm ...................................................................................................... 11

2.4.2. GitHub..................................................................................................................... 11

Chương 3. Phân tích và thiết kế hệ thống ..................................................................................... 11

3.1. Phân tích yêu cầu khi sử dụng website .......................................................................... 11

3.2. Sơ đồ Use Case............................................................................................................... 12

3.3. Thiết kế hệ thống Database ............................................................................................ 19

3.3.1. Mô tả tổng quan ...................................................................................................... 19

3.3.2. Mô tả chi tiết ........................................................................................................... 20

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA
Chương 4. Thiết kế và xây dựng trang web (Nhóm) .................................................................... 23

4
4.1. Sơ đồ Sitemap của website............................................................................................. 23

4.2. Giao diện Website .......................................................................................................... 23

4.2.1. Giao diện Trang chủ................................................................................................ 23

4.2.2. Giao diện Trang Chi tiết sản phẩm ......................................................................... 24

4.2.3. Giao diện liên quan tính năng Authentication ........................................................ 26

4.2.4. Giao diện các trang liên quan tới người dùng ......................................................... 27

4.2.5. Giao diện Trang giỏ hàng ....................................................................................... 30

4.2.6. Giao diện Trang đặt hàng ........................................................................................ 31

4.2.7. Giao diện Trang Chi tiết đơn hàng.......................................................................... 32

Chương 5. Kết luận ....................................................................................................................... 32

5.1. Ưu điểm .......................................................................................................................... 32

5.2. Nhược điểm .................................................................................................................... 32

5.3. Hướng phát triển ............................................................................................................ 33

Chương 6. Đường dẫn website ..................................................................................................... 33

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

Chương 1. Tổng quan đề tài

5
1.1. Lý do chọn đề tài
Chủ quan:
Một trong hai thành viên là người yêu thích những câu chuyện thần thoại, vì vậy
chúng em luôn tìm kiếm những phụ kiện, sản phẩm mang thiết kế liên quan tới
những sự kiện, nhân vật xuất hiện trong các thần thoại trên thế giới để phục vụ đời
sống của mình. Tuy nhiên khi tìm kiếm trên Internet, ngoài các mô hình trang trí,
em hầu như không tìm thấy bất kỳ sản phẩm nào theo nhu cầu của mình. Bên cạnh
đó, các sản phẩm thường không mang đặc trưng của thương hiệu để có độ nhận
diện. Đồng thời là một sinh viên CNTT, chúng em muốn xây dựng một website về
một thương hiệu với các sản phẩm phụ kiện liên quan tới chủ đề thần thoại để đáp
ứng niềm yêu thích của bản thân và rèn luyện kỹ năng lập trình.
Khách quan:
Trong nền kinh tế hiện nay, cộng thêm ảnh hưởng của đại dịch COVID-19 suốt 2
năm, người tiêu dùng dần hình thành thói quen mua hàng trực tuyến thay vì phương
thức mua hàng truyền thống nhờ sự tiện lợi của nó. Không chỉ người tiêu dùng,
người bán cũng thúc đẩy mạnh việc đầu tư chi phí cho website hay gian hàng trên
các sàn TMĐT. Do đó, để có hỗ trợ cho công việc tương lai và bắt kịp thời đại,
chúng em quyết định thực hiện đồ án về một website TMĐT để có cơ hội học tập
thêm các kiến thức và kỹ năng về lập trình web/app, và nắm được quy trình một
website TMĐT hoạt động.
1.2. Mục tiêu của đề tài
• Xây dựng một quy trình mua hàng tinh gọn, một website với UI/UX thân
thiện, trực quan giúp người dùng có được trải nghiệm thoải mái nhất.
• Khắc phục, giải quyết một số hạn chế đã tồn tại những website tương tự.
• Hạn chế tối đa các lỗi vặt xuất hiện đối với từng use case.
• Website tương thích tốt với các thiết bị và trình duyệt.

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

1.3. Phạm vi và đối tượng

6
• Đối tượng chúng em hướng đến tất cả những người dùng có chung sở thích
về thần thoại với mình và muốn sở hữu một bộ sưu tập các sản phẩm về một
chủ đề nào đó, ngoài ra là những người có sở thích sưu tập các món đồ.
• Phạm vi hoạt động của website chúng em hướng tới toàn cầu vì vậy chúng
em đã sử dụng ngôn ngữ ban đầu của website là tiếng Anh. Vì các sản phẩm
của thương hiệu sẽ không bị giới hạn bởi bất kỳ thần thoại của nền văn hóa
nào. Tuy nhiên, vì xuất phát từ Việt Nam, nếu tiến hành thương mại, chúng
em vẫn chú trọng vào thị trường Việt Nam trước.
1.4. Các khảo sát liên quan
1.4.1. 1.4.1. Khảo sát website Always Store ( Cửa hàng đầu tiên và duy
nhất dành cho fan Harry Potter tại Việt Nam )
❖ Ưu điểm:
- Người dùng không cần tài khoản vẫn có thể sử dụng hầu hết tính năng.
- Thêm sản phẩm vào giỏ hàng ngay trên card sản phẩm thay vì vào phải trang
Chi tiết sản phẩm.
- Mọi thông tin đều được hiển thị ra bên ngoài, người dùng không cần thao tác để
xem toàn bộ nội dung.
❖ Nhược điểm:
- Các bộ lọc sản phẩm không thuận tiện sử dụng và không bắt mắt.
- Không tự động cập nhật trạng thái giỏ hàng khi thay đổi số lượng sản phẩm.
- Giao diện lỗi thời
- Phần đánh giá từ khách hàng chưa khách quan, chỉ ở dạng hình ảnh và không
chi tiết cho từng sản phẩm.
- Phần tag của bộ lọc sản phẩm, phần Sản phẩm bán chạy liệt kê quá nhiều sản
phẩm gây rối mắt cho người sử dụng.

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 7
Hình 1. Always Store
1.5. Quy trình thực hiện
- Hệ thống áp dụng mô hình thác nước kết hợp Scrum, gồm 5 quy trình chính: xác
định yêu cầu, thiết kế sơ bộ, Scrum, kiểm thử toàn bộ hệ thống và triển khai.
- Năm pha của mô hình thác nước kết hợp Scrum:
• Phân tích và xác định các yêu cầu: Phân tích những yêu cầu có thể có của phần
mềm một cách có hệ thống nhằm mục đích tạo ra một tài liệu có thể phục vụ cho
quá trình phát triển trong tương lai. Kết quả cần đạt được trong pha này là tài
liệu yêu cầu cần có để phần mềm hoạt động.
• Thiết kế sơ bộ: Giải quyết các yêu cầu thiết kế về kỹ thuật, giao diện như dữ
liệu, dịch vụ,... Kết quả đầu ra là một bản thiết kế sơ bộ mô tả chính xác logic
của hệ thống được đề cập trong phần phân tích và xác định các yêu cầu sẽ được
thực thi như thế nào.
• Scrum: Thực thi toàn bộ các mô hình, logic của hệ thống và các chức năng được
làm rõ trong các pha trước. Quá trình cài đặt sẽ phân tích chi tiết hơn vì lúc này
lập trình viên sẽ dễ đặt mình vào những tình huống có thể xảy ra trong quá trình
người dùng sử dụng hệ thống hơn. Sau đó sẽ tiến hành kiểm thử ở từng sprint để
giảm nhẹ việc kiểm thử tổng bộ ở cuối.
• Kiểm thử toàn bộ hệ thống: Tìm kiếm và báo cáo các lỗi trong hệ thống, nếu có
cần được xử lý trước khi đi vào triển khai.
• Triển khai: Phần mềm sẽ được triển khai trong môi trường thực tế và giữ phần
mềm luôn hoạt động tốt và được cập nhật.

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 8
Hình 2. Mô hình thác nước kết hợp Scrum
Chương 2. Cơ sở lý thuyết (Khoa)
2.1. Công nghệ Front-end
2.1.1. ReactJS
React là một thư viện JavaScript front-end mã nguồn mở và miễn phí để xây dựng
giao diện người dùng dựa trên các thành phần UI riêng lẻ vô cùng mạnh mẽ và cũng là
công nghệ chính nhóm sử dụng để xây dựng phát triển giao diện.

Hình 3. ReactJS

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 2.1.2. TailwindCSS

9
Tailwind CSS là một framework CSS mã nguồn mở với các tính năng nổi bật như
utility classes, variants, setings and themes, build all and purge, JIT (Just in Time),
... giúp dễ dàng styling các trang web.

Hình 4. TailwindCSS
2.1.3. TypeScript
Là một ngôn ngữ lập trình bậc cao xây dựng dựa trên JavaScript. Ngoài việc
kế thừa những lợi thế từ JS, TypeScript còn cải thiện tính an toàn về kiểu dữ
liệu, tooling, và tính đồng bộ so với người đàn anh. Nhờ đó, các developer
sẽ dễ dàng bảo trì và nâng cấp source code của mình hơn, và cũng khiến
TypeScript dần trở thành xu thế.

Hình 5. TypeScript
2.2. Công nghệ Back-end – Database
Là một Back-end as a Service (BaaS), nó cung cấp các dịch vụ liên quan tới back-
end và database giúp developer tiết kiệm thời gian trong việc xử lý các nhiệm vụ
liên quan tới back-end và cơ sở dữ liệu.

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 10
Hình 6. Firebase
2.3. Hosting
Là một nền tảng đám mây cung cấp các dịch vụ để deploy và hosting website một
cách đơn giản, dễ dàng, và tiện lợi.

Hình 7. Vercel

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

2.4. Công cụ hỗ trợ

11
2.4.1. Visual Paradigm
Là một công cụ UML giúp các nhóm phát triển phần mềm mô hình hóa hệ
thống thông tin kinh doanh và quản lý các quy trình phát triển. Nhóm dùng
công cụ này vẽ Usecase diagram, ERD diagram

Hình 8. Visual Paradigm

2.4.2. GitHub
Là nền tảng phổ biến cung cấp các dịch dựa trên đám mây để phát triển phần
mềm và kiểm soát phiên bản bằng Git, cho phép các nhà phát triển lưu trữ và quản
lý source code của họ.

Hình 9. GitHub
Chương 3. Phân tích và thiết kế hệ thống
3.1. Phân tích yêu cầu khi sử dụng website
- Giao diện hiện đại, trực quan, màu sắc phối hài hòa bắt mắt, bố cục hợp lý giúp tạo thiện
cảm và thuận tiện cho người dùng sử dụng.
- Các tính năng hoạt động mượt mà, ít xảy ra lỗi.

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 - Nội dung rõ ràng, nhất quán, các phần trọng tâm cần được nhấn mạnh giúp người dùng dễ

12
dàng nắm bắt các thông tin quan trọng.
- Tránh gây hiểu lầm khi người dùng trải nghiệm bằng việc sử dụng các icon lạ.
- Tinh giản các quy trình giúp người dùng thao tác nhất có thể.
- Sản phẩm phong phú đa dạng, đáp ứng nhu cầu của người dùng khi mua hàng tại website.
3.2. Sơ đồ Use Case

Hình 10. Sơ đồ Use Case người dùng

Bảng 1. Danh sách Actors
Actor Mô tả
Guest Người dùng vãng lai chỉ có quyền thực hiện các tính năng cơ bản như
xem thông tin các trang không cần đăng nhập, tìm kiếm và lọc sản
phẩm, đặt hàng ( chỉ 1 loại sản phẩm trên 1 đơn hàng)

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 Patron Người dùng vai trò khách quen có toàn bộ quyền lợi của người dùng

13
vãng lai. Ngoài ra, người dùng được dùng tính năng giỏ hàng để đặt
nhiều loại sản phẩm 1 lúc

Phân quyền truy cập các trang web:

- Không yêu cầu đăng nhập: Homepage, Category page, Detail Product page,
Checkout page, Error page
- Yêu cầu đăng nhập: Cart page, Account page, Detail Order page
Bảng 2. Đặc tả Use cases
Use case Đối tượng sử dụng Mô tả Kịch bản
Hệ thống yêu cầu actor
cung cấp email và mật
khẩu.
Nút Login sẽ mặc định bị
disable cho tới khi người
dùng nhập đủ thông tin và
Use case cho phép đúng format.
Đăng nhập Patron người dùng đăng nhập Người dùng nhấn nút Login
vào hệ thống để hệ thống xác thực thông
tin và trả về kết quả. Nếu
đăng nhập thành công sẽ
reload lại trang hiện tại, nếu
xảy ra lỗi hệ thống sẽ hiển
thị lỗi được trả về.

Hệ thống yêu cầu actor

Use case cho phép
cung cấp thông tin đăng ký
Đăng ký Mọi người dùng người dùng đăng kí tài
gồm họ tên, email, SĐT, địa
khoản.
chỉ và mật khẩu.

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 Mặc định nút Sign Up sẽ bị

14
disable cho tới khi người
dùng nhập đủ thông tin và
đúng format.
Người dùng nhấn nút Sign
Up để hệ thống tiến hành
tạo tài khoản mới và trả về
kết quả. Nếu thành công, hệ
thống tự động thực hiện
bước đăng nhập cho người
dùng, ngược lại, hệ thống sẽ
hiển thị lỗi được trả về.
Người dùng nhấn vào nút
Đăng xuất.
Hệ thống nhận yêu cầu và
đăng xuất tài khoản người
Use case cho phép
dùng ra khỏi hệ thống và
Đăng xuất Patron người dùng đăng xuất
reload trang hiện tại.
khỏi hệ thống
Nếu trang hiện tại là các
trang yêu cầu đăng nhập sẽ
hiển thị trang Required
Auth thay vì trang hiện tại.
Khi tiến hành đăng nhập,
nếu quên mật khẩu, người
dùng nhấn vào link Forgot
Use case cho phép
your password?
Lấy lại mật khẩu Patron người dùng lấy lại mật
Người dùng nhập email đã
khẩu khi quên
đăng ký trên hệ thống theo
format và nhấn nút Reset để
reset mật khẩu.

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA


Use case cho phép
Cập nhật thông tin
Patron người dùng chỉnh sửa
cá nhân
thông tin cá nhân
Use case cho phép
Đổi mật khẩu Patron người dùng đổi mật
khẩu
ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA
Hệ thống kiểm tra email
15
người dùng nhập đăng ký
trên hệ thống chưa. Nếu xác
thực thành công, hệ thống
gửi mail chứa quy trình
reset mật khẩu vào email
của người dùng. Ngược lại,
hệ thống sẽ thông báo lỗi
được trả về.
Người dùng tiến hành cập
nhật các trường thông tin.
Nút Save changes mặc định
bị disabled cho tới khi các
trường thông tin được nhập
đủ và đúng format.
Người dùng nhấn nút Save
change để hệ thống tiến
hành cập nhật thông tin.
Nếu thành công, hệ thống sẽ
thông báo thành công,
ngược lại, hệ thống hiển thị
lỗi được trả về.
Người dùng tiến hành cập
nhật các trường thông tin.
Nút Change mặc định bị
disabled cho tới khi các
trường thông tin được nhập
đủ, mật khẩu mới đúng
format và mật khẩu xác
nhận trùng mật khẩu mới.
 Người dùng nhấn nút

16
Change để hệ thống tiến
hành cập nhật mật khẩu.
Nếu thành công, hệ thống
tiến hành đăng xuất người
dùng khỏi hệ thống và
reload trang hiện tại. Ngược
lại, hệ thống sẽ thông báo
lỗi và empty trường mật
khẩu cũ.
Nếu trang hiện tại là các
trang yêu cầu đăng nhập sẽ
hiển thị trang Required
Auth thay vì trang hiện tại.
Người dùng nhập địa chỉ
vào thanh URL của trình
duyệt hoặc điều hướng với
các link của website
Hệ thống sẽ trả về trang
Use case cho phép
Xem các trang thông tương ứng với URL. Nếu
người dung xem các
tin không yêu cầu Mọi người dùng URL sai hoặc thiếu dữ liệu
trang không cần đăng
đăng nhập đầu vào, sẽ hiển thị trang
nhập
Error.
Nếu tiến hành truy cập
trang yêu cầu đăng nhập khi
chưa đăng nhập, hiện trang
Required Auth.
Use case cho phép Nhập từ khóa cần tìm vào
Tìm kiếm sản phẩm Mọi người dùng người dùng tìm sản thanh tìm kiếm trên header
phẩm theo tên và nhấn nút Search.

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 Chuyển hướng tới trang

17
Category.
Tick chọn các thuộc tính
của sản phẩm theo nhu cầu.
Use case cho phép
Nhấn nút Apply để hệ
Lọc sản phẩm Mọi người dùng người dùng lọc sản
thống lọc sản phẩm.
phẩm theo nhu cầu
Nhấn nút Reset để xóa bộ
lọc.
Use case cho phép Click vào Dropdown góc
Sắp xếp sản phẩm Mọi người dùng người dùng sắp xếp phải trang Category và chọn
sản phẩm theo nhu cầu phương thức sắp xếp
Click vào button Add Cart
ở card sản phẩm hoặc trang
Use case cho phép Category
Thêm sản phẩm vào
Patron người dùng thêm sản Hệ thống lưu sản phẩm vào
giỏ hàng
phẩm vào giỏ hàng giỏ hàng của người dùng.
Nếu xảy ra lỗi, hệ thống sẽ
thông báo lỗi được trả về.
Click vào icon trái tim ở
card sản phẩm hoặc trang
Use case cho phép Detail Product
Thêm sản phẩm vào
Patron người dùng thêm sản Hệ thống lưu sản phẩm vào
danh sách yêu thích
phẩm vào wishlist wishlist của người dùng.
Nếu xảy ra lỗi, hệ thống sẽ
thông báo lỗi được trả về.
Người dùng click vào nút
Place Order ở trang
Use case cho phép
Checkout để tiến hành đặt
Đặt hàng Mọi người dùng người dùng tiến hành
hàng.
đặt hàng
Hệ thống tiến hành tạo đơn
hàng mới. Nếu thành công,

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 hệ thống lưu đơn hàng mới

18
vào danh sách đơn hàng của
người dùng, ngược lại, hệ
thống thông báo lỗi
Người dùng chọn số lượng
Use case cho phép
muốn mua ở trang Detail
người dùng đặt hàng
Product và nhấn nút Buy
Mua ngay Mọi người dùng từ trang Detail Product
Now
không thông qua giỏ
Hệ thống điều hướng tới
hàng
trang Checkout
Click vào icon thùng rác ở
ô sản phẩm để xóa.
Use case cho phép
Xóa sản phẩm trong Nếu muốn xóa toàn bộ giỏ
Patron người dùng xóa sản
giỏ hàng hàng nhấn vào icon thùng
phẩm trong giỏ hàng
rác trên header của bảng
sản phẩm.
Tick vào checkbox ở ô sản
Chọn sản phẩm Use case cho phép phẩm để chọn.
trong giỏ hàng để đặt Patron người dùng chọn sản Nếu muốn chọn toàn bộ sản
hàng phẩm trong giỏ hàng phẩm, tick checkbox trên
header của bảng sản phẩm.
Người dùng thay đổi số
Mọi người dung (Detail Use case cho phép lượng sản phẩm bằng cách
Điều chỉnh số lượng
Product) người dùng điều chỉnh nhấn vào nút tăng/giảm ở ô
sản phẩm
Patron (Cart) số lượng sản phẩm sản phẩm hoặc ở trang
Detail Product
Người dùng nhập địa chỉ
Xem thông tin các Use case cho phép
vào thanh URL của trình
trang yêu cầu đăng Patron người dung xem các
duyệt hoặc điều hướng với
nhập trang cần đăng nhập
các link của website

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 Hệ thống sẽ trả về trang

19
tương ứng với URL. Nếu
URL sai hoặc thiếu dữ liệu
đầu vào, sẽ hiển thị trang
Error.

3.3. Thiết kế hệ thống Database

3.3.1. Mô tả tổng quan

Hình 11. Bảng mô tả dữ liệu tổng quan

STT Tên bảng dữ liệu Diễn giải

1 Users Danh sách người dùng

2 Blogs Danh sách các blogs

3 Products Danh sách sản phẩm

5 Orders Danh sách các đơn hàng

Bảng 3. Danh sách các bảng dữ liệu

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 3.3.2. Mô tả chi tiết

20
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa/ghi chú

1 Uid string Mã định danh người dùng

2 userEmail String Địa chỉ email của người dùng

3 fullName String Họ tên của người dùng

4 Address String Địa chỉ của người dùng (Địa chỉ giao
hàng mặc định)

5 phoneNumber String Số điện thoại của người dùng

6 favoriteProducts Array<Object> Danh sách sản phẩm yêu thích

7 Blogs Array<ObjectId> Danh sách các blog Id mà người dùng

đã đăng tải

8 Bookmarks Array<ObjectId> Danh sách các blog Id mà người dùng

đã đánh dấu

9 Cart Array<Object> Danh sách các sản phẩm trong giỏ

hàng

10 Orders Array<ObjectId> Danh sách các đơn hàng người dùng

đã đặt

Bảng 4. Bảng dữ liệu User

STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa/ghi chú

1 Id string Mã định danh của blog

2 blogTitle String Tiêu đề của blog

3 Content String Nội dung của blog

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 4 coverPhoto String Ảnh bìa của blog

21
5 createdAt String Thời gian tạo blog

6 Author Object Thông tin tác giả bài blog gồm tên và
mã định danh

7 Category String Phân loại của blog

8 Region String Tên khu vực của chủ đề của bài blog

9 totalView Number Tổng số lượt xem của bài blog

10 Likes Array<ObjectId> Danh sách mã định danh của các

người dùng đã thích bài blog

Bảng 5. Bảng dữ liệu Blog

STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa/ghi chú

1 Id String Mã định danh của sản phẩm

2 Category String Phân loại sản phẩm

3 Origin String Xuất xứ sản phẩm

4 avtImg String Ảnh vìa sản phẩm

5 createdAt Timestamp Thời gian tạo sản phẩm

6 Description String Thông tin mô tả sản phẩm

7 Inventory Number Số lượng sản phẩm

8 Material String Chất liệu sản phẩm

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 9 Name String Tên sản phẩm

22
10 Price Number Giá thành sản phẩm

11 Rating Number Đánh giá sản phẩm

12 Sold Number Số lượng sản phẩm đã bán

13 Subcategory String Phân loại sản phẩm phụ

14 thumbImg String Ảnh thumbnail sản phẩm

15 Author String Tác giả sản phẩm (Chỉ xuất hiện ở

phân loại Books)

16 Language String Ngôn ngữ sản phẩm (Chỉ xuất hiện ở

phân loại Books)

Bảng 6. Bảng dữ liệu Product

STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa/ghi chú

1 Id string Mã định danh của đơn hàng

2 CustomerInfo Object Thông tin của người đặt hàng, bao

gồm: địa chỉ, họ tên, số điện thoại,
quốc tịch và mã bưu điện

3 deliverMethod String Phương thức giao hàng

4 Discount Number Tỉ lệ giảm giá của sản phẩm

5 paymentMethod String Phương thức thanh toán

6 Products Array<Object> Danh sách thông tin về các sản phẩm

đã đặt hàng bao gồm: mã định danh
sản phẩm, hình ảnh sản phẩm, tên, giá
thành và số lượng sản phẩm đặt hàng

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 7 Shipping Number Giá tiền vận chuyển

23
8 total Number Tổng giá tiền đơn hàng

Bảng 7. Bảng dữ liệu Order

Chương 4. Thiết kế và xây dựng trang web (Nhóm)
4.1. Sơ đồ Sitemap của website

Hình 12. Sơ đồ Sitemap của website phía người dùng

4.2. Giao diện Website
4.2.1. Giao diện Trang chủ

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 Hình 13. Giao diện Trang chủ

24
4.2.2. Giao diện Trang Chi tiết sản phẩm

Hình 14. Giao diện Trang Chi tiết sản phẩm chưa đăng nhập

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 25
Hình 15. Giao diện Trang Chi tiết sản phẩm sau khi đăng nhập

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 4.2.3. Giao diện liên quan tính năng Authentication

26
Hình 16. Giao diện đăng nhập

Hình 17. Giao diện đăng ký

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 27
Hình 18. Giao diện Lấy lại mất khẩu

4.2.4. Giao diện các trang liên quan tới người dùng

Hình 19. Giao diện Trang Thông tin tài khoản

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 28
Hình 20. Giao diện Trang Đổi mật khẩu

Hình 21. Giao diện Danh sách đơn hàng (Chưa có đơn hàng)

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 29
Hình 22. Giao diện Danh sách đơn hàng

Hình 23. Giao diện Danh sách yêu thích (Không có sản phẩm yêu thích)

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 30
Hình 24. Giao diện Danh sách yêu thích
4.2.5. Giao diện Trang giỏ hàng

Hình 25. Giao diện Trang giỏ hàng

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 4.2.6. Giao diện Trang đặt hàng

31
Hình 26. Giao diện Trang đặt hàng

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 4.2.7. Giao diện Trang Chi tiết đơn hàng

32
Hình 27. Giao diện Trang Chi tiết đơn hàng

Chương 5. Kết luận

5.1. Ưu điểm
- Giao diện được thiết kế bắt mắt, hiện đại, trực quan, dễ sử dụng.
- Tài khoản người dùng đăng ký sẽ là tài khoản chung hệ thống MythWorld với blog
Myticala giúp người dùng sử dụng toàn bộ tính năng của 2 website.
- Đa dạng phương thức thanh toán cho khách hàng nội địa và quốc tế.
- Hỗ trợ đa nền tảng, tương thích nhiều thiết bị.
5.2. Nhược điểm
- Chưa có phần đánh giá sản phẩm.
- Chưa có giao diện quản lý dành cho admin

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA

 - Phần thanh toán trực tuyến chưa hoạt động được, chỉ ở mức giao diện.

33
5.3. Hướng phát triển
Để tiếp tục phát triển và có thể đưa ứng dụng vào sử dụng thực tế, nhóm nhận thấy còn
phải tiếp tục thực hiện các công việc sau:
- Liên tục cập nhật các xu hướng thiết kế để ứng dụng tránh bị lỗi thời.
- Khắc phục các feedback lỗi của người dùng trong quá trình sử dụng nếu có.
- Phát triển thêm các tính năng (Trang Admin, Đánh giá sản phẩm, Chat online, Mục
tin tức – sự kiện, Theo dõi đơn hàng ...) và tối ưu hóa hiệu năng websites
Chương 6. Đường dẫn website
- Link Github:
https://github.com/NBNgoc-2k1/Mystrade.git
https://github.com/NBNgoc-2k1/mythicom
- Link Website (Đã hosting): Mythicom

ĐỒ ÁN CHUYÊN NGÀNH NGUYỄN BẢO NGỌC – VŨ ĐĂNG KHOA