Báo cáo website oto bằng reactjs - Trung Phú NA 123code.net

TRƯỜNG ĐẠI HỌC <TÊN_TRƯỜNG>
KHOA CÔNG NGHỆ PHẦN MỀM
-----🙚🙚🙚🙚🙚-----

BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

Đề tài
XÂY DỰNG WEBSITE BÁN Ô TÔ VỚI REACTJS
Giảng viên hướng dẫn:

Thầy/Cô <tên giảng viên>
Sinh viên thực hiện:

<mã sinh viên> – <họ tên>

Hà Nội, 06/2022


LỜI CẢM ƠN
Em xin gửi lời cảm ơn chân thành và sự tri ân sâu sắc đối với các thầy cô
của trường Đại học ………… và đặc biệt là các thầy cô khoa Công nghệ
thông tin của trường đã tạo điều kiện cho em hoàn thành đồ án tốt nghiệp
này.
Em cũng xin chân thành cảm ơn cô ………… đã nhiệt tình hướng dẫn chỉ
bảo em những kiến thưc bài học, cũng như những kiến thức thực tế trong suốt
quá trình thực hiện đề tài.
Mặc dù đã cố gắng hoàn thành đồ án trong phạm vi và khả năng cho
phép nhưng chắc chắn sẽ khơng tránh khỏi những thiết sót. Em rất mong nhận
được sự thơng cảm, góp ý và tận tình chỉ bảo của q thầy cơ và các bạn.
Em xin chân thành cảm ơn!

MỤC LỤC

CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI......................................................................1
1.1. Lý do chọn đề tài:........................................................................................1
1.2. Mục tiêu của đề tài:.....................................................................................1
1.3. Khảo sát hệ thống:......................................................................................1
1.4. Yêu cầu của ứng dụng:...............................................................................2
1.5. Các website liên quan liên quan:...............................................................2
1.6. Bố cục của báo cáo:.....................................................................................4
CHƯƠNG 2: CƠ SỞ LÝ THUYẾT.......................................................................6
2.1. Phân tích và thiết kế hệ thống:..................................................................6
2.2. Ngơn ngữ thiết kế website HTML và CSS:...............................................6
2.3. Ngôn ngữ JavaScript:.................................................................................8
2.3.1. Giới thiệu ngơn ngữ JavaScript:...........................................................8
2.3.2. Lợi ích khi dùng JavaScript:.................................................................8
2.4. Thư viện ReactJS:.......................................................................................9
2.4.1. Giới thiệu về ReactJS:..............................................................................9
2.4.2. JSX vàVirtual DOM:................................................................................9
2.5. Phần mềm Visual Studio Code:...............................................................11
2.5.1. Visual Studio Code là gì?........................................................................11
2.5.2. Những ưu điểm nổi bật của VS Code:...................................................11
2.5.3. Lý do nên sử dụng VS Code:..................................................................12


CHƯƠNG 3: PHÂN TÍCH HỆ THỐNG............................................................13
CHƯƠNG 4: TRIỂN KHAI PHẦN MỀM..........................................................31
CHƯƠNG 5: TỔNG KẾT....................................................................................35
5.1. Kết luận:....................................................................................................35
5.2. Hướng phát triển:.....................................................................................35

TÀI LIỆU THAM KHẢO.....................................................................................36


DANH MỤC HÌNH

Hình 1. Giao diện trang web Chợ Tốt.......................................................................3
Hình 2. Giao diện trang web oto.com.vn..................................................................3
Hình 3. Giao diện trang web otos.vn........................................................................4
Hình 4. Lợi ích của CSS với trang web HTML.........................................................7
Hình 5. JSX Code style............................................................................................10
Hình 6. So sánh Virtual DOM và Real DOM..........................................................11
Hình 7. Use Case tổng quát....................................................................................13
Hình 8. Use Case hệ thống......................................................................................14
Hình 9. Use Case chi tiết của khách hàng..............................................................16
Hình 10. Biểu đồ hoạt động đăng ký.......................................................................21
Hình 11. Biểu đồ hoạt động đăng nhập...................................................................22
Hình 12. Biểu đồ hoạt động đăng xuất...................................................................23
Hình 13. Biểu đồ hoạt động tìm kiếm sản phẩm.....................................................23
Hình 14. Biểu đồ hoạt động thêm sản phẩm vào giỏ hàng.....................................24
Hình 15. Biểu đồ hoạt động xóa sản phẩm trong giỏ hàng....................................25
Hình 16. Biểu đồ hoạt động đặt hàng.....................................................................26
Hình 17. Biểu đồ tuần tự đăng ký...........................................................................27
Hình 18. Biểu đồ tuần tự đăng nhập.......................................................................28
Hình 19. Biểu đồ tuần tự xem chi tiết sản phẩm.....................................................29
Hình 20. Biểu đồ tuần tự tìm kiếm sản phẩm..........................................................29


Hình 21. Biểu đơ tuần tự đặt hàng..........................................................................30
Hình 22. Giao diện trang đăng ký...........................................................................31
Hình 23. Giao diện trang đăng nhập......................................................................31

Hình 24. Giao diện trang chủ.................................................................................32
Hình 25. Giao diện trang danh sách xe..................................................................32
Hình 26. Giao diện trang chi tiết - tab 'Vận hành'..................................................33
Hình 27. Giao diện trang chi tiết - tab 'Nội thất'....................................................33
Hình 28. Giao diện trang chi tiết - tab 'Thơng số'..................................................34
Hình 29. Giao diện trang liên hệ............................................................................34


CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI
1.1.

Lý do chọn đề tài:
Sự phát triển của công nghệ thông tin đã thúc đẩy sự phát triển của
hầu hết các lĩnh vực, trong đó có kinh doanh. Hình thức kinh doanh
online hiện đang được rất nhiều cửa hàng lựa chọn để tăng doanh thu của
cửa hàng và để giới thiệu sản phẩm đến người tiêu dùng một cách nhanh
chóng.
Cửa hàng, đại lý phân phối xe ơ tơ có nhiều loại xe, với nhiều mẫu
mã và thuộc các dịng xe khác nhau dẫn đến khó khăn cho người dùng
trong việc tìm kiếm giá cả và các mẫu xe yêu thích tại các cửa hàng. Và
việc tiếp cận với các mẫu xe ô tô mới cũng khó khăn hơn với hình thức
truyền thống.
Với mục đích giúp người dùng tiếp cận nhiều hơn các dịng xe ơ tô
và quản lý các cửa hàng bán ô tô dễ dàng, em quyết định chọn đề tài
“Xây dựng website bán ô tô với ReactJS”.

1.2.

Mục tiêu của đề tài:
 Khảo sát hệ thống các cửa hàng bán xe ô tô cũng như những thực

trạng nhu cầu tìm kiếm các dịng xe của người dùng.
 Trình bày được các vấn đề liên quan đến ngôn ngữ JavaScript,
ReactJS, phần mềm Visual Studio Code,...
 Phân tích và thiết kế ứng dụng.
 Triển khai và cài đặt ứng dụng.

1.3.

Khảo sát hệ thống:
Thời đại 4.0 ngày nay địi hỏi cơng việc kinh doanh tại các cửa
hàng ngày càng phải đổi mới. Nhất là trong thời điểm dịch bệnh như

Page 1 of 36


hiện nay, việc mở rộng chiến lược kinh doanh online là vô cùng cần
thiết.
Việc tạo ra website chuyên cung cấp các mẫu xe và giải đáp mọi
thắc mắc mà khách hàng mong muốn là rất cần thiết. Website sẽ có các
dữ kiện về thông tin xe, cũng như về các hãng xe.
Thay vì việc khách hàng phải đến tận cửa hàng, tìm những mẫu xe
muốn mua, thì giờ chỉ cần vài cái click chuột, khách hàng có thể tra cứu,
tham khảo, xem chi tiết các thơng số xe mình muốn mua để đặt hàng. Và
tiến hành thanh toán khi đã nhập đầy đủ thông tin quan trọng(tên, số điện
thoại, địa chỉ nhận).
Những mẫu xe mới cũng dễ dàng tiếp cận với khách hàng nhờ vào
việc theo dõi những mẫu xe nổi bật, sách được đánh giá tốt nhiều nhất…
Khách hàng có thể chọn xem chi tiết thơng tin của các mẫu xe, và xem
các đánh giá về sản phẩm xe đó.
Việc cập nhật xe ở cửa hàng cũng trở nên dễ dàng. Các mẫu xe mới

sẽ được cập nhật liên tục trên website, những hãng xe có trong chương
trình khuyến mãi và hỗ trợ tìm kiếm theo các từ khóa khách hàng cần, và
lọc theo hãng sản xuất, đánh giá, giá thành… Các danh mục sách cũng
được liệt kê rõ ràng, giúp khách hàng theo dõi dễ dàng.
1.4.

Yêu cầu của ứng dụng:
 Yêu cầu về chức năng:
Khách hàng được xem các danh sách sản phẩm, xem chi tiết (các
thông số kĩ thuật, nội thất, vận hành) của sản phẩm, tìm kiếm sản
phẩm, thêm sản phẩm vào giỏ hàng và mua hàng.
 Yêu cầu về giao diện:
- Giao diện thân thiện, dễ sử dụng với người dùng.
Page 2 of 36


- Màu sắc hài hòa.
1.5.

Các website liên quan liên quan:
Một số website liên quan:

 Trang web xe.chotot.com

Hình 1. Giao diện trang web Chợ Tốt
Đây là trang rao vặt tổng hợp lớn nhất Việt Nam, với các chuyên mục mua
bán dành riêng cho xe ô tô.
 Trang web oto.com.vn

Page 3 of 36

Hình 2. Giao diện trang web oto.com.vn
Đây là một trong những website lâu đời nhất về mua bán xe ô tơ, có tới 6
triệu lượt truy cập và 22 triệu lượt xem mỗi tháng.
 Trang web otos.vn

Hình 3. Giao diện trang web otos.vn
Giao diện dễ nhìn và trực quan, giúp website này nằm trong top 10 những
website mua bán ô tơ uy tín nhất Việt Nam.
Page 4 of 36


1.6.

Bố cục của báo cáo:

 Chương 1: Giới thiệu đề tài:
Giới thiệu tổng quan về đề tài nghiên cứu gồm những lý do chọn đề
tài, khảo sát thực trạng, yêu cầu của đề tài, mục tiêu của đề tài và công
nghệ liên quan.

 Chương 2: Cơ sở lý thuyết:
Nêu những kiến thức nền tảng sẽ áp dụng trong chương trình như
JavaScript, thư viện React Native,…

 Chương 3: Phân tích hệ thống:
Từ những khảo sát thực trạng và các yêu cầu rút ra, thực hiện phân
tích chức năng của ứng dụng với các UseCase và biểu đồ hoạt động…

 Chương 4: Triển khai phần mềm:
Từ các phân tích hệ thống ở trên, nêu môi trường triển khai và xây
dựng giao diện ứng dụng.

 Chương 5: Tổng kết:
Trình bài những kết quả đạt được, những hạn chế còn tồn tại và hướng
phát triển mới cho đề tài đã xây dựng.

 Tài liệu tham khảo:
Liệt kê các tài liệu báo cáo đã tham khảo.

Page 5 of 36


CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
2.1.

Phân tích và thiết kế hệ thống:

2.1.1. Giới thiệu OOAD:
Phân tích thiết kế hướng đối tượng(OOAD) là giai đoạn phát triển một
mơ hình chính xác và súc tính cảu vấn đề, có thành phần là các đối tượng
và khái niệm đời thực, dễ hiểu đối với người sử dụng.
2.1.2. Nguyên tắc trong OOAD:
 Một lớp chỉ nên có một lý do để thay đổi, tức là một lớp chỉ nên xử lý
một chức năng đơn lẻ duy nhất. Nếu đặt nhiều chức năng vào một lớp,
thì sẽ dẫn đến sự phụ thuộc giữa các chức năng với nhau.
 Các lớp, module, chức năng nên dễ dàng <Mở> cho việc thêm chức
năng mới và <Đóng> cho việc thay đổi.
 Lớp dẫn xuất phải có khả năng thay thế được lớp cha.

 Chương trình khơng nên buộc phải cài đặt một Interface mà nó khơng
sử dụng đến.
 Các module cấp cao không nên phụ thuộc vào các module cấp thấp.
Cả hai nên phụ thuộc thông qua lớp trừu tượng. Lớp trừa tượng không
nên phụ thuộc vào chi tiết. Chi tiết nên phụ thuộc vào trừu tượng.
2.2.

Ngôn ngữ thiết kế website HTML và CSS:

2.2.1. Định nghĩa HTML:
HTML(Hypertext Markup Language) là mã được dùng để xây dựng
nên cấu trúc và nội dung của trang web. Ví dụ, nội dung có thể được cấu
thành bởi một loạt các đoạn văn, một danh sách liệt kê, hoặc sử dụng
những hình ảnh và bảng biểu...
2.2.2. Tính năng mới của HTML5:
Page 6 of 36


 Phần tử <small> dùng để chỉ hiển thị cỡ nhỏ, nó có thể được ký hiệu
là trình bao bọc chính xác cho thơng tin này.
 Việc sử dụng dấu ngoặc kép có thể phụ thuộc vào người dùng.
 Cho phép người dùng chỉnh sửa bất kỳ văn bản nào có trong phần tử,
bao gồm cả phần tử con của nó.
 HTML5 loại bỏ hồn tồn thuộc tính <type>.
 Cung cấp các đầu vào email cho phép hướng dẫn trình duyệt chỉ cho
phép các chuỗi xác nhận địa chỉ email.
 Dễ dàng tạo thanh trượt với phạm vi đầu vào.
2.2.3. Định nghĩa CSS:
CSS (viết tắt của Cascading Style Sheets) dùng để miêu tả cách trình
bày các tài liệu viết bằng ngôn ngữ HTML và XHTML. CSS được hiểu một

cách mà chúng ra thêm các kiểu hiển thị (font chữ, kích thước, màu sắc,…)
cho một tài liệu Web.
2.2.4. Lợi ích của CSS với một trang web HTML:

Hình 4. Lợi ích của CSS với trang web HTML
Page 7 of 36


CSS có tác dụng chính là:
 Hạn chế tối thiểu việc làm rối HTML của trang Web bằng các thẻ
quy định kiểu dáng(chữ đậm, in nghiêng,...), giúp mã nguồn của
trang Web trở nên gọn gàng hơn.
 Tách biệt nội dung trang Web và định dạng hiển thị, dễ dàng cho
việc thay đổi.
 Tạo ra các kiểu dáng áp dụng được cho nhiều trang Web, tránh lặp
lại việc định dạng cho các trang Web giống nhau.
2.3. Ngôn ngữ JavaScript:
2.3.1. Giới thiệu ngơn ngữ JavaScript:
JavaScript(JS) là một ngơn ngữ lập trình thơng dịch(được dịch lúc
chạy). JavaScript ngày càng được ứng dụng rộng rãi trên nhiều mơi trường
khác nhau, nó tạo ra các ứng dụng chạy phía Server (như NodeJS), các ứng
dụng di động (như React)… JavaScript được sử dụng rất phổ biến để tích
hợp vào các trang web, chạy ngay trong trình duyệt phía client.
2.3.2. Lợi ích khi dùng JavaScript:
Là ngơn ngữ lập trình phổ biến sử dụng trên nhiều nền tảng, Javascript
thể hiện vai trị quan trọng. JavaScript có một số lợi ích như sau:
 Viết mã phía máy chủ: Các lập trình viên có thể viết mã phía máy
chủ bằng JavaScript.
 Triển khai tập lệnh phía máy khách: Các lập trình viên có thể dễ
dàng viết lệnh phía máy khách với JavaScript, tích hợp các tập lệnh

liền mạch. Cho phép tương tác, phản hồi ngay lập tức và tạo giao
diện hiển thị phong phú.
 Đơn giản hóa việc phát triển ứng dụng: Cho phép các nhà phát triển
đơn giản hóa thành phần của ứng dụng, qua đó đơn giản hóa việc
phát triển các ứng dụng phức tạp.

Page 8 of 36


 Thiết kế ứng dụng bao gồm responsive: JavaScript cho phép thiết
kế responsive – tối ưu trên cả máy tính và thiết bị di động chỉ với
một bộ mã.
 Nhiều bộ chuyển đổi: Dù thiếu một số tính năng phức tạp được
cung cấp bởi các ngôn ngữ hiện đại như Java, C++… JavaScript
vẫn có thể mở rộng bằng cách sử dụng các bộ chuyển đổi như
TypeScript, CoffeeScript,…
2.4.

Thư viện ReactJS:

2.4.1. Giới thiệu về ReactJS:
ReactJS là một opensource được phát triển bởi Facebook, vào năm
2013. Đây là một thư viện Javascript được dùng để xây dựng các tương tác
với các thành phần website. Một trong những điểm nổi bật của thư viện này
là việc render dữ liệu khơng chỉ thực hiện phía Server, mà cịn thực hiện
được phía Client.
ReactJS là một thư hiện Javascript chuyên giúp các nhà phát triển xây
dựng giao diện người dùng hay UI. Trong lập tình ứng dụng front-end, lập
trình viên thường phải làm việc chính trên 2 thành phần: UI và xử lý tương
tác người dùng. UI là tập hợp những thành phần nhìn thấy được trên bất kỳ

một ứng dụng nào, ví dụ thanh tìm kiếm, nút nhấn… Trước khi có ReactJS,
lập trình viên thường gặp khó khăn rất nhiều khi sử dụng Javascript thuần
và Jquery để xây dựng UI.
2.4.2. JSX vàVirtual DOM:
Để tăng tốc quá trình phát triển và giảm thiểu rủi ro xảy ra trong khi
coding, React còn cung cấp khả năng Reusable Code(tái sử dụng code)
bằng cách đưa ra 2 khái niệm quan trọng: JSX và Virtual DOM.
JSX(nói ngắn gọn là Javascript extension) là một React extension giúp
chúng ta dễ dàng thay đổi cây DOM bằng các HTML-style code đơn giản.
Page 9 of 36


Và ReactJS browser hỗ trợ tồn bộ những trình duyệt web hiện đại, có thể
sử dụng JSX trên bất kỳ trình duyệt nào đang làm việc.

Hình 5. JSX Code style
Nếu không sử dụng ReactJS (và JSX), website sẽ sử dụng HTML để
cập nhật lại cây DOM(quá trình thay đổi diễn ra tự nhiên trên trang mà
người dùng không cần tải lại trang). Cách này sẽ ổn với các trang web nhỏ,
đơn giản, static, nhưng với các website lớn, đặc biệt thiên về xử lý tương
tác, điều này sẽ làm ảnh hưởng performance website nghiêm trọng vì tồn
bộ cây DOM phải reload lại mỗi lần người dùng nhấn tính năng yêu cầu tải
lại trang.
Tuy nhiên, nếu sử dụng JSX sẽ giúp cây DOM cập nhật cho chính
DOM đó, ReactJS đã khởi tạo Virtual DOM(DOM ảo). Virtual DOM là bản
copy của Real DOM(DOM thật) trên trang đó, và ReactJS sử dụng bản
copy để tìm kiếm đúng phần mà DOM thật cần cập nhật khi bất kỳ sự kiện
nào khiến thành phần trong nó thay đổi(như việc người dùng nhấn vào một
nút).
Page 10 of 36

Hình 6. So sánh Virtual DOM và Real DOM
2.5.

Phần mềm Visual Studio Code:

2.5.1. Visual Studio Code là gì?
Visual Studio Code là ứng dụng cho phép biên tập, soạn thảo các đoạn
code để hỗ trợ quá trình thực hiện xây dựng, thiết kế website một cách
nhanh chóng. Visual Studio Code cịn được viết tắt là VS Code. Trình soạn
thảo hoạt động “mượt” trên các nền tảng Windows, macOS, Linux. Hơn
thế, VS Code cịn tương thích với những thiết bị máy tính có cấu hình tầm
trung vẫn có thể sử dụng dễ dàng.
VS Code hỗ trợ đa dạng các chức năng Debug, đi kèm vs Git, có
Syntax Highlighting. Đặc biệt là tự hồn thành mã thơng tin, Snippets, và
khả năng cải tiến mã nguồn.
Nhờ tính năng tùy chỉnh, VS Code cũng cho phép lập trình viên thay
đổi Theme, phím tắt, và đa dạng các tùy chọn.
2.5.2. Những ưu điểm nổi bật của VS Code:

 Tiện ích mở rộng đa dạng, phong phú.
 Đa dạng ngơn ngữ lập trình, giúp người dùng dễ dàng sử dụng và lựa
chọn như HTML, CSS, JavaScript, C++,…

Page 11 of 36


 Tích hợp các tính năng quan trọng như bảo mật(Git), khả năng tăng
tốc xử lý vòng lặp(Debug)…

 Đơn giản hóa việc tìm quản lý các Code trên hệ thống.
2.5.3. Lý do nên sử dụng VS Code:

 Hoạt động đa nền tảng: VS Code được thiết kế để chạy tốt trên
macOS, Linux và Windows.

 Đơn giản trong việc chỉnh sửa, xây dựng và gỡ lỗi: VS Code có thể hỗ
trợ rất nhiều loại ngơn ngữ lập trình khác nhau như Java, Python, C#,
C++, PHP… Cho phép ứng dụng rất nhiều tính năng thú vị như đánh
dấu cú pháp, tự động thụt lề, đối sánh dấu ngoặc… Hệ thống phím tắt
sinh động, trực quan giúp thao tác trở nên nhanh chóng. Ngồi ra, tính
năng nhắc mã IntelliSense chun nghiệp trên VS Code sẽ tự động
phát hiện đoạn mã không đầy đủ và hiện thơng báo cho lập trình viên,
hoặc nó có thể tự động bổ sung cú pháp thiếu. Gỡ lỗi cũng là tính
năng nổi bật của VS Code, nó giúp xem mã nguồn, kiểm tra các biến,
Call Stack và thực thi lệnh trong bảng điều khiển. Bên cạnh đó, trình
soạn thảo này còn hỗ trợ Git phục vụ việc kiểm sốt nguồn mà khơng
địi hỏi phải rời khỏi trình chỉnh sửa.
 Sự hỗ trợ của cộng đồng GitHub: VS Code là một dự án mã nguồn mở
nên bạn hoàn toàn có thể tham gia đóng góp và tìm kiếm sự giúp đỡ từ
cộng đồng GitHub.

Page 12 of 36


CHƯƠNG 3: PHÂN TÍCH HỆ THỐNG
3.1.

Use Case hệ thống:

3.1.1. Use Case tổng quát:

Hình 7. Use Case tổng quát

Page 13 of 36


3.1.2. Use Case hệ thống:

Hình 8. Use Case hệ thống
Use Case
Tác nhân
Mô tả ngắn gọn

Đăng ký
Khách hàng
Khách hàng truy cập website có thể đăng ký thành

viên
Tiền điều kiện
Khi khách hàng truy cập và chọn đăng ký
Chuỗi sự kiện 1. Khách hàng chọn đăng ký
2. Hệ thống hiển thị trang đăng ký
chính
3. Khách hàng nhập các trường thơng tin và tài
khoản – mật khẩu, chọn đăng ký
4. Hệ thống kiểm tra dữ liệu: Nếu thỏa mãn thực
hiện bước tiếp theo. Ngược lại, thông báo lỗi và
quay lại bước 3
5. Hệ thống thông báo đăng ký tài khoản thành

công, và cập nhật tài khoản vào cơ sở dữ liệu
6. Hiển thị giao diện trang chủ với tài khoản đã
Ngoại lệ

đăng ký
3. Khách hàng chọn Hủy
Page 14 of 36


Điều kiện đầu ra

4. Hệ thống hủy thao tác, và trả về trang chủ
Lưu tài khoản khách hàng đã đăng ký vào cơ sở dữ
liệu

Use Case
Tác nhân
Mô tả ngắn gọn

Khách hàng
Người dùng đăng nhập vào hệ thống, truy cập hệ

Tiền điều kiện

thống với đúng quyền của tài khoản
UseCase sử dụng khi người dùng muốn đăng nhập

Chuỗi
chính

sự

Đăng nhập

vào hệ thống
kiện 1. Người dùng chọn đăng nhập
2. Hệ thống yêu cầu nhập tài khoản và mật khẩu
3. Người dùng nhập tài khoản và mật khẩu
4. Hệ thống kiểm tra tên và mật khẩu vừa nhập:
Nếu thỏa mãn thực hiện bước tiếp theo. Ngược
lại, thông báo lỗi và quay lại bước 3
5. Lấy quyền truy cập tài khoản
6. Hiển thị giao diện tương ứng với quyền của tài

Ngoại lệ
Điều kiện đầu ra

khoản
3. Người dùng chọn Hủy
4. Hệ thống hủy thao tác, và trả về trang chủ
Người dùng truy cập hệ thống với đúng quyền của tài
khoản đã đăng nhập

Use Case
Tác nhân
Mô tả ngắn gọn
Tiền điều kiện

Đăng xuất
Khách hàng

Người dùng đăng xuất tài khoản khỏi hệ thống
UseCase sử dụng khi người dùng muốn đăng xuất

khỏi hệ thống
Chuỗi sự kiện 1. Người dùng chọn đăng xuất
2. Hệ thống hủy lưu tài khoản người dùng
chính
3. Hệ thống hiển thị giao diện trang chủ
Ngoại lệ
Khơng có
Điều kiện đầu ra Hiển thị giao diện trang chủ và không lưu tài khoản
Page 15 of 36


3.1.3. Chi tiết Use Case người dùng:

Hình 9. Use Case chi tiết của khách hàng
Use Case
Xem chi tiết sản phẩm
Tác nhân
Khách hàng
Mô tả ngắn gọn
Khách hàng xem chi tiết sản phẩm
Tiền điều kiện
Người đăng nhập thành công hệ thống
Chuỗi sự kiện 1. Khách hàng chọn sản phẩm muốn xem chi tiết
chính

2. Hệ thống lấy thơng tin chi tiết sản phẩm theo ID,
hiển thị form chi tiết

3. Khách hàng chọn các tab “Vận hành”, “Nội

Ngoại lệ
Điều kiện đầu ra

thất”, “Thông số”
4. Hệ thống hiển thị dữ liệu tương ứng trên từng tab
Khơng có
Chi tiết sản phẩm khách hàng muốn xem hiển thị trên
Page 16 of 36


màn hình
Use Case
Thêm sản phẩm vào giỏ hàng
Tác nhân
Khách hàng
Mơ tả ngắn gọn
Khách hàng thêm sản phẩm vào giỏ hàng
Tiền điều kiện
Khơng có
Chuỗi sự kiện 1. Khách hàng chọn sản phẩm muốn mua.
2. Chọn thêm sản phẩm vào giỏ hàng.
chính
3. Hệ thống kiểm tra dữ liệu: Nếu số lượng hàng
hiện có thỏa mãn, thực hiện bước tiếp theo.
Ngược lại, thơng báo sản phẩm đã hết và hủy

Ngoại lệ
Điều kiện đầu ra

thao tác.
4. Hệ thống thêm sản phẩm vào giỏ hàng.
Không có
Lưu giỏ hàng trong session của khách hàng

Use Case
Xóa sản phẩm trong giỏ hàng
Tác nhân
Khách hàng
Mô tả ngắn gọn
Khách hàng xóa sản phẩm trong giỏ hàng
Tiền điều kiện
Khơng có
Chuỗi sự kiện 1. Khách hàng chọn sản phẩm muốn xóa mua
2. Chọn xóa
chính
3. Hệ thống kiểm tra: Nếu thành cơng thực hiện

Ngoại lệ
Điều kiện đầu ra
Use Case
Tác nhân chính
Mơ tả ngắn gọn

bước tiếp theo. Ngược lại, thông báo lỗi.
4. Hệ thống xóa sản phẩm trong giỏ hàng
Khơng có
Cập nhật giỏ hàng trong session của khách hàng
Thanh toán đơn hàng

Khách hàng
Khách hàng thực hiện đặt hàng, thanh tốn đơn hàng

của mình
Tiền điều kiện
Khơng có
Chuỗi sự kiện 1. Khách hàng thanh tốn
Page 17 of 36


chính

2. Hệ thống kiểm tra tài khoản khách hàng, hiển thị
form thanh tốn
3. Khách hàng nhập các thơng tin cần thiết, chọn
thanh tốn
4. Hệ thống kiểm tra: Nếu thành cơng thực hiện
bước tiếp theo. Ngược lại, thông báo lỗi.
5. Hệ thống tạo thông tin đơn hàng và chi tiết đơn

Ngoại lệ

hàng
3. Khách hàng chọn Hủy

Điều kiện đầu ra

4. Hệ thống hủy thao tác, và trả về trang giỏ hàng
Cập nhật thông tin đơn hàng của khách hàng vào cơ
sở dữ liệu khi thanh tốn thành cơng

Use Case
Tác nhân
Mơ tả ngắn gọn

Tìm kiếm sản phẩm
Khách hàng
Khách hàng thực hiện tìm kiếm thông tin các sản

phẩm bày bán trong cửa hàng
Tiền điều kiện
Khơng có
Chuỗi sự kiện 1. Khách hàng nhập từ khóa muốn tìm kiếm, chọn
chính

Tìm kiếm
2. Hệ thống lấy danh sách dữ liệu so sánh với từ
khóa: Nếu có hiển thị danh sách sản phẩm tương

Ngoại lệ
Điều kiện đầu ra

ứng. Ngược lại, hiển thị trang trống.
Khơng có
Thơng tin sản phẩm tìm kiếm theo từ khóa hiển thị
trên màn hình

Use Case
Liên hệ
Tác nhân

Khách hàng
Mô tả ngắn gọn
Khách hàng thực hiện liên hệ với cửa hàng
Tiền điều kiện
Khơng có
Chuỗi sự kiện 1. Khách hàng chọn mục Liên hệ
Page 18 of 36


chính

2. Hệ thống hiển thị form liên hệ
3. Khách hàng nhập thông tin liên hệ và nội dung,
chọn gửi
4. Hệ thống kiểm tra trường dữ liệu: Nếu hợp lệ,
thực hiện bước tiếp theo. Ngược lại, thông báo
lỗi và quay lại bước 3.
5. Hệ thống thông báo thêm liên hệ thành công, và

Ngoại lệ
Điều kiện đầu ra

cập nhật thông tin liên hệ trong cơ sở dữ liệu.
Khơng có
Các thắc mắc của khách hàng được lưu lại

Page 19 of 36