báo cáo môn project 2 ngành công nghệ thông tin thiết kế website bán đồ điện tử

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘIVIỆN CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

Sinh viên thực hiện:Trần Thanh Sơn – 20229038 Lớp: CNTT – VB2 – K67

Giáo viên hướng dẫn: Th.S Lê Thị Hoa

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>PROJECT 3 Giáo viên hướng dẫn: Vũ Đức Vượng</b>

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>PROJECT 3 Giáo viên hướng dẫn: Vũ Đức Vượng</b>

<b>LỜI NÓI ĐẦU</b>

Việc mua sắm trực tuyến đã trở thành một lựa chọn an toàn và phổ biến trong những năm qua, vì đa số người tiêu dùng đã tìm thấy sự thuận tiện và dễ dàng đểchọn lựa cửa hàng, sự thoải mái trong việc mua bán và thanh toán. Một trong những yếu tố hấp dẫn nhất về mua sắm trực tuyến, là trong các kỳ nghỉ lễ, nó làm giảm bớt việc phải xếp hàng chờ đợi để tìm kiếm những mặt yêu thích trongcác cửa hàng.

Những ưu thế của việc mua sắm trực tuyến đã làm thay thế được những bất tiệntrong cách mua bán truyền thống. Người tiêu dùng, khi mua sắm trực tuyến, họ có thể mua sản phẩm được lựa chọn nhanh chóng bằng cách thực hiện một số cúnhấp chuột, họ có thể chọn và mua những mặt hàng u thích từ thị trường vơ tận và không giới hạn do internet cung cấp, họ không cần phải đi đến các cửa hàng, và không bị giới hạn bởi giờ mở cửa, họ có thể đặt hàng mọi lúc, mọi nơi. và hơn nữa việc giao hàng có thể được u cầu khơng chỉ đến nơi cư trú mà cịn ở nơi làm việc, do đó người tiêu dùng có thể mua sản phẩm với điều kiện thuận lợi nhất (giá cả, chất lượng, giảm giá khác) phù hợp với nhu cầu cá nhân Theo một cuộc khảo sát tồn cầu gần đây do Cơng ty Nielsen thực hiện, hơn 85% dân số trên thế giới đã sử dụng Internet để mua hàng, tăng 40% so với hai năm trước và hơn một nửa số người dùng Internet là những người mua sắm trực tuyến thường xuyên.

Ưu thế của việc mua sắm trực tuyến ngày càng trở nên phổ biến. Em mong muốn xây dựng một sàn giao dịch thương mại điện tử nhằm góp phần mang lại sự tiện dụng cho người dùng.

Hoàn thành xong đề tài, em vô cùng biết ơn cô Vũ Thị Hoa, người trực tiếp hướng dẫn nhiệt tình cho chúng em trong suốt quá trình thực hiện Project 2.

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

<b>PROJECT 3 Giáo viên hướng dẫn: Vũ Đức VượngCHI TIẾT CÔNG VIỆC THỰC HIỆN</b>

Nội dung công việc:

Công việc 1 Nghiên cứu đề tài, thị trường

Cơng việc 2 Phân tích, thiết kế các kịch bản, chức năng của dự án

Công việc 3 Đưa ra các kịch bản, vẽ các diagram của từng module

Công việc 4 Thiết kế giao diện, chức năng (FrontEnd)

Công việc 5 Thiết kế cơ sở dữ liệu, nền tảng (Backend)

Công việc 6 Thiết kế API kết nối FrontEnd & BackEnd

Công việc 7 Triển khai website Công việc 8 Kiểm tra đánh giá phần mềm

Công cụ phát triển:

Nền tảng công nghệ lập trình FrontEnd: JavaScript, NextJSNền tảng cơng nghệ lập trình BackEnd: Java, SpringBootQuản trị cơ sở dữ liệu: MySQL, MongoDB

Liên kết BackEnd & FrontEnd: RESTful APIIDE phát triển: Visual Studio Code, Intellij

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>PROJECT 3 Giáo viên hướng dẫn: Vũ Đức VượngCHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI </b>

<b>1.1.Đặt vấn đề</b>

Bạn đã có ý tưởng kinh doanh online? Sau khi bạn chuẩn bị vốn, kế hoạchkinh doanh, và tìm nguồn cung ứng hàng hóa tốt, tiếp theo bạn sẽ lựa chọn cáckênh bán hàng online phù hợp: mạng xã hội, website, sàn thương mại điện tử...Nếu sản phẩm của bạn nhiều, lên đến hàng trăm hàng ngàn mẫu mã thì lựa chọnthiết kế website thương mại điện tử là lựa chọn phù hợp. Bên cạnh đó, ngay cảnhững cơng ty lớn và nổi tiếng tại Việt Nam cũng đang sử dụng hình thứcwebsite này và gặt hái được nhiều thành cơng.

Xuất phát từ tình hình thực tế về nhu cầu cuộc sống của con người ở hiệntại và trong tương lai, rất nhiều ngành nghề cần có máy tính (Ví dụ: Editor,Designer,…). Để đáp ứng được nhu cầu của thị trường, là người làm cơng nghệphải có sứ mệnh mang đến cho người tiêu dùng những sản phẩm hiện tại và antoàn nhất, với một mức giá phù hợp nhất. Nếu giải quyết được vấn đề này thì sẽđem lại lợi ích lớn cho chính mình và xã hội, người tiêu dùng sẽ tiếp cận và trảinghiệm được những sản phẩm chất lượng, giúp đời sống tăng cao đáng kể, mặtkhác nó giúp ta mang lại nguồn thu nhập lớn cho bản thân.

Ngồi ra, chúng ta có thể sử dụng trang web áp dụng với các mặt hàngtrong các lĩnh vực khác nhau.

<b>1.2.Mục tiêu và phạm vi đề tài</b>

Từ lần đầu tiên chiếc máy tính điện tử được giới thiệu vào ngày 15 tháng 2năm 1946 với cái tên là ENIAC (Electronic Numerical Integrator andComputer).Hiện nay chiếc máy tính đã trở thành trợ thủ đắc lực cho mọi ngànhnghề từ công việc hằng ngày cho đến nghiên cứu khoa học.

Hiện tại cùng với sự phát triển của khoa học và công nghệ. Càng nhiềungành nghề cần sự trợ giúp của những chiếc máy tính cho cơng việc hoặc giảitrí.

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

<b>PROJECT 3 Giáo viên hướng dẫn: Vũ Đức Vượng</b>

Từ cơ sở trên, phát triển website bán thiết bị máy tính là rất cần thiết, tuynhiên có một số hạn chế như: chưa có chi phí cho marketing, tiếp cận với nguồnhàng khá khó khăn, phân phối kho, quản lý người dùng cịn gặp khó khăn…

<b>1.3.Định hướng giải pháp</b>

Trong vơ vàn trang web bán hàng hiện nay, việc quản lý người dùng và kholuôn là vấn đề được quan tâm và được đặt ưu tiên hàng đầu, rất nhiều websiteđược phát triển nhưng chưa đáp ứng đủ và đúng như mong được của kháchhàng, số lượng khách hàng ghé thăm website giảm dẫn đến thu nhập của ngườikinh doanh bị ảnh hưởng,khó có thể phát triển hơn nữa, vì vậy tạo ra mộtwebsite bán thiết bị máy tính thơng minh và tiện dụng là một nhu cầu tất yếu.

Website bán thiết bị máy tính được xây dựng dựa trên những nhu cầu thựctế của khách hàng và nhà quản lý nhằm giải quyết những khó khăn gặp phải. Hệthống hướng tới các đối tượng là khách hàng và những nhân viên quản lý trangweb. Hệ thống có các chức năng chính bao gồm: authentication, quản lý ngườidùng, và quản lý kho. Các chức năng này giúp người quản lý dễ dàng quản lýthông tin khách hàng và quản lý kho một cách đơn giản và tối ưu, khách hàng cóthể mua hàng và tự quản lý thơng tin cá nhân.

<b>1.4.Bố cục báo cáo</b>

Phần còn lại của báo cáo này được tổ chức như sau:

Chương 2: Thực hiện phân tích thiết kế bài tồn bằng cách khảo sát hiệntrạng và yêu cầu mong muốn của khách hàng cũng như các hệ thống sẵn có vàcác website tương tự đang hoạt động. Từ đó thực hiện phân tích bằng các biểuđồ UserCase

Chương 3: Thực hiện nghiên cứu về các cơng nghệ, nền tảng, thuật tốn ápdụng phù hợp với việc triển khai thiết kế website bán hàng thiết bị máy tính.

Chương 4: Thực hiện phát triển và triển khai ứng dụng từ các yêu cầunghiệp vụ đã phân tích và cơng nghệ nền tảng lựa chọn để phát triển.

Phần cuối là kết luận và định hướng phát triển các phiên bản nâng cấp tiếptheo của hệ thống và kết thúc bài báo cáo.

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>PROJECT 3 Giáo viên hướng dẫn: Vũ Đức VượngCHƯƠNG 2: PHÂN TÍCH THIẾT KẾ BÀI TỐN2.1.Khảo sát hiện trạng</b>

Ngày càng có nhiều doanh nghiệp lựa chọn website dạng thương mại điệntử thay cho website truyền thống. Những doanh nghiệp lớn đã ứng dụng dạngwebsite này và gặt hái được con số ấn tượng về lượng truy cập và doanh thu:Thế Giới Di Động, Điện Máy Xanh, Bách Hóa Xanh... Ngay cả các cửa hàngkinh doanh mỹ phẩm, nhà thuốc, thời trang... cũng xây dựng website bánhàng có tích hợp tính năng và thanh tốn.

Mục đích của việc thiết kế website dạng thương mại điện tử nhằm tránh lệthuộc vào các sàn thương mại điện tử, cũng như tăng độ tiếp cận của doanhnghiệp đến với khách hàng. Theo số liệu từ Statista, độ tuổi mua sắm trên sànthương mại điện tử nhiều nhất là từ 25-34. Vì vậy, nếu đối tượng khách hàngtiềm năng của doanh nghiệp nằm trong phân khúc 25-34 thì việc thiết kế websitethương mại điện tử là điều cực kỳ cần thiết.

Vậy hiện trạng nhu cầu của khách hàng hiện nay đã thay đổi như thế nào?Và các hệ thống hiện tại đã và đang đáp ứng như thế nào đối với nhu cầu củangười dùng? Chúng ta hãy cùng đi tìm hiểu.

<b>2.1.1.Về khách hàng</b>

a. Website cung cấp đầy đủ sản phẩm, dịch vụ và tiện ích

Khi khách hàng truy cập vào website là bạn đã nắm trong tay cơ hội biến“người dùng” thành “khách mua hàng”. Do đó sản phẩm và dịch vụ phải đượcsắp xếp theo từng danh mục rõ ràng. Ngoài ra, khi khách hàng click vào để tìmhiểu bất kỳ sản phẩm nào thì sản phẩm đó phải có đầy đủ thơng tin, thương hiệu,mô tả, xuất xứ, giá cả... để khách hàng yên tâm lựa chọn mua hàng.

b. Giao diện thu hút khách hàng tiềm năng

Giao diện thu hút là một trong những yếu tố để người dùng dành nhiều thờigian để ở lại website của bạn. Việc thiết kế giao diện phải dựa vào việc hiểu

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

<b>PROJECT 3 Giáo viên hướng dẫn: Vũ Đức Vượng</b>

c. Giao diện tương thích với thiết bị di động

Thiết bị di động ngày càng chiếm ưu thế hơn so với máy tính và laptop. Dođó, khi thiết kế giao diện và hình ảnh cho website, bạn nên lưu ý kiểm tra lạimột lần nữa xem đã hiển thị đúng kích thước trên thiết bị di động hay chưa. Nếukhi hiển thị trên điện thoại hình ảnh bị sai tỷ lệ hoặc bố cục chữ bị rối mắt thìbạn nên điều chỉnh để tránh việc khách hàng cảm thấy khó chịu với giao diện vàthốt ra ngồi.

<b>2.1.2.Về các hệ thống đã có</b>

Ngày càng có nhiều doanh nghiệp lựa chọn website dạng thương mại điệntử thay cho website truyền thống. Những doanh nghiệp lớn đã ứng dụng dạngwebsite này và gặt hái được con số ấn tượng về lượng truy cập và doanh thu:Thế Giới Di Động, Điện Máy Xanh, Bách Hóa Xanh... Ngay cả các cửa hàngkinh doanh mỹ phẩm, nhà thuốc, thời trang... cũng xây dựng website bánhàng có tích hợp các tính năng và thanh toán, theo dõi đơn hàng.

<b>2.1.3.Về ứng dụng tương tự</b>

Về các ứng dụng tương tự trên thị trường, cũng đã phát triển các tính năngvà nhu cầu của khách hàng như:

<b>-</b> Cung cấp đầy đủ sản phẩm, dịch vụ và tiện ích.

<b>-</b> Thiết kế giao diện dễ dùng và hiện đại.

<b>-</b> Tích hợp đa dạng các phương thức thanh tốn

<b>-</b> Tương thích với các thiết bị di động.

<b>-</b> Cung cấp đầy đủ thông tin của doanh nghiệp.

<b>2.2.Tổng quan chức năng2.2.1.Biểu đồ UseCase tổng quan</b>

<b>-</b> Authentication: Cho phép khách hàng và quản trị viên đăng nhập bằng tàikhoản đăng ký, đăng nhập bằng Facebook, thay đổi password, đăng xuất ra khỏiwebsite.

<b>-</b> Quản lý user: Cho phép quản trị viên xem danh sách khách hàng,thêm/sửa/xóa tài khoản khách hàng.

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

<b>PROJECT 3 Giáo viên hướng dẫn: Vũ Đức Vượng-</b> Quản lý kho hàng: Cho quản trị viên theo dõi và quản lý kho hàng, có thểthêm/sửa/xóa các mặt hàng trong kho.

<b>-</b> Thêm vào giỏ hàng: Cho phép khách hàng thêm sản phẩm muốn mua vàogiỏ hàng.

<b>-</b> Tạo mới một đơn hàng: Cho phép khách hàng đặt một đơn hàng và hiểnthị đơn hàng mới vào trang admin để quản lý.

<b>Xác nhận các tác nhân tham gia hệ thống:</b>

1 <b>Admin</b> Quản lý tài khoản khách hàng, quản lý kho,xem/thay đổi thông tin khách hàng,xem/thay đổi thông tin mặt hàng.2 <b>Customer</b> Đăng ký tài khoản, đăng nhập, xem/thay đổi

thông tin của mình, xem sản phẩm, thêmvào giỏ hàng.

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<b>PROJECT 3 Giáo viên hướng dẫn: Vũ Đức VượngSơ đồ UseCase tổng quát của hệ thống</b>

Hình 2.2.1: UseCase tổng quan

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<b>PROJECT 2 Giáo viên hướng dẫn: Lê Thị HoaUseCase hệ thống</b>

1 <b>Authentication</b> Cho phép người dùng đăng ký, đăng nhập vàohệ thống website, thay đổi password.2 <b>Quản lí khách hàng</b> Quản trị viên có thể xem danh sách khách

hàng, Nhân viên thêm/sửa/xóa tài khoản kháchhàng.

3 <b>Quản lý kho hàng</b> Quản trị viên có thể xem danh sách mặt hàng,Có thể thêm/sửa/xóa mặt hàng trong kho hàng.4 <b>Thêm vào giỏ hàng</b> Khách hàng xem danh sách sản phẩm, xem chi

tiết sản phẩm, và chọn thêm vào giỏ hàng.5 <b>Khách hàng đặt hàng Khách hàng vào giỏ hàng, xem giỏ hàng và đặt</b>

đơn hàng đang có trong giỏ.

6 <b>Quản lí đơn hàng</b> Quản trị viên vào trang danh sách các đơnhàng, xem chi tiết/sửa/xóa đơn hàng.

<b>2.2.2.Biểu đồ use case phân rã từng module2.2.2.1Phân rã use case “Đăng nhập”</b>

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<b>PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa2.2.2.2Phân rã use case “Đăng ký”</b>

Hình 2.2.2.2: Use case Register

<b>2.2.2.3Phân rã use case “Mua hàng”</b>

Hình 2.2.2.3: Use case mua hàng

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<b>PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa2.2.2.4Phân rã use case “Quản lý khách hàng”</b>

Hình 2.2.2.4: Use case Quản lí Khách hàng

<b>2.2.2.5Phân rã use case “Quản lý sản phẩm”</b>

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

<b>PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa2.2.2.6Phân rã use case “Quản lý danh mục sản phẩm”</b>

Hình 2.2.2.6: Use Case quản lý danh mục sản phẩm

<b>2.2.2.7Phân rã use case “Quản lí Đơn hàng”</b>

Hình 2.2.2.7: Use case Quản lí đơn hàng

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<b>PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa2.2.3.Biểu đồ hoạt đông (Activity diagram)</b>

<b>2.2.3.1.Biểu đồ hoạt động thêm sản phẩm</b>

Hình 2.2.3.1: Biểu đồ hoạt động thêm sản phẩm

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

<b>PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa</b>

<b>2.2.3.2.Biểu đồ hoạt động sửa sản phẩm</b>

Hình 2.2.3.2: Biểu đồ hoạt động sửa sản phẩm

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

<b>PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa</b>

<b>2.2.3.3.Biểu đồ hoạt động mua hàng</b>

Hình 2.2.3.4: Biểu đồ hoạt động mua hàng

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

<b>PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa</b>

<b>2.2.3.4.Biểu đồ hoạt động thêm sản phẩm vào giỏ hàng</b>

Hình 2.2.3.4: Biểu đồ hoạt động thêm sản phẩm vào giỏ hàng

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<b>PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa</b>

<b>2.2.3.5.Biểu đồ hoạt động đăng ký</b>

Hình 2.2.3.4: Biểu đồ hoạt động đăng ký

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

<b>PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa2.2.4.Đặc tả chức năng</b>

<b>2.2.4.1.Đặc tả use case AuthenticationMô tả Use case Đăng ký:</b>

3.1 Nhập thiếu trường => hệ thống thông báo phải nhậpđầy đủ 3 trường

3.2 Trường confirm password và password khác nhau => hệ thống thông báo 2 trường phải giống nhau.

<b>2.2.4.2.Đặc tả use case Quản lí khách hàngMơ tả use case</b>

UseCase Manage User

Actor Quản trị viên

Tiền điều kiện Quản trị viên đăng nhập thành công vào hệ thống

<b>Chuỗi sự kiện chính:</b>

1. Quản trị viên truy cập vào trang quản lí Khách hàng.

2. Hệ thống điều hướng đến trang quản lí Khách hàng và hiển thị danh sách Khách hàng.

3. Quản trị viên chọn xem chi tiết Khách hàng.4. Hệ thống hiển thị thông tin chi tiết Khách hàng.5. Quản trị viên chọn vào nút “Tạo mới Khách hàng”.6. Hệ thống hiện giao diện form tạo mới Khách hàng.7. Quản trị viên nhập đầy đủ các trường trong form tạo mới.8. Quản trị viên bấm vào nút Tạo mới.

9. => Hệ thống thông báo tạo mới Khách hàng thành công và quay lại màn hình danh sách Khách hàng.

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

<b>PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa</b>

10. Quản trị viên bấm vào button sửa Khách hàng.

11.Hệ thống sẽ hiện thông tin của Khách hàng đã được chọn và hiển thị trong form.

12. Quản trị viên sửa những thông tin Khách hàng muốn update.13. Quản trị viên bấm vào button “Submit”.

14. => Hệ thống hiển thị thông báo update thành công.15. Quản trị viên bấm vào button xóa Khách hàng.16. Hệ thống hiển thị popup xác nhận xóa Khách hàng.17. Quản trị viên bấm vào button “No” để hủy thao tác.

18. Quản trị viên bấm vào button “Delete” để xóa Khách hàng vừa chọn.

19. => Hệ thống thơng báo xóa thành công, ẩn popup và hiển thị danh sách Khách hàng sau khi đã xóa.

9.2 Hệ thống tạo mới Khách hàng bị lỗi, hiển thị lỗi ra màn hình.

12.1 Hệ thống không lấy được thông tin Khách hàng, hiển thị lỗi ra màn hình.

14.1 Quản trị viên nhập thiếu trường bắt buộc, hiển thị thông báo cần phải nhập đầy dủ các trường bắt buộc.14.2 Hệ thống lỗi update Khách hàng, hiển thị thơng báo lỗi ra màn hình.

19.1 Hệ thống bị lỗi khi xóa một Khách hàng, hiển thị thơng báo lỗi ra màn hình.

<b>2.2.4.3.Đặc tả use case Quản lí sản phẩm</b>

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

<b>PROJECT 2 Giáo viên hướng dẫn: Lê Thị HoaChuỗi sự kiện chính:</b>

1. Quản trị viên truy cập vào trang quản lí Sản phẩm.

2. Hệ thống điều hướng đến trang quản lí Sản phẩm và hiển thị danh sáchcác sản phẩm.

3. Quản trị viên chọn vào xem chi tiết một Sản phẩm.4. Hệ thống điều hướng đến trang Sản phẩm chi tiết.5. Quản trị viên chọn vào nút “Tạo mới Sản phẩm”.6. Hệ thống hiện giao diện form tạo mới Sản phẩm.7. Quản trị viên nhập đầy đủ các trường trong form tạo mới.8. Quản trị viên bấm vào nút Tạo mới.

9. => Hệ thống thông báo tạo mới Sản phẩm thành cơng và quay lại màn hình danh sách Sản phẩm.

10. Quản trị viên bấm vào button sửa Sản phẩm.

11.Hệ thống sẽ hiện thông tin của Sản phẩm đã được chọn và hiển thị trong form.

12. Quản trị viên sửa những thông tin Sản phẩm muốn update.13. Quản trị viên bấm vào button “Submit”.

14. => Hệ thống hiển thị thông báo update thành công.15. Quản trị viên bấm vào button xóa Sản phẩm.16. Hệ thống hiển thị popup xác nhận xóa Sản phẩm.17. Quản trị viên bấm vào button “No” để hủy thao tác.18. Quản trị viên bấm vào button “Delete” để xóa Sản phẩm vừa

9.2 Hệ thống tạo mới Sản phẩm bị lỗi, hiển thị lỗi ra màn hình.

12.1 Hệ thống khơng lấy được thơng tin Sản phẩm, hiểnthị lỗi ra màn hình.

14.1 Quản trị viên nhập thiếu trường bắt buộc, hiển thị thông báo cần phải nhập đầy dủ các trường bắt buộc.14.2 Hệ thống lỗi update Sản phẩm, hiển thị thông báo

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

<b>PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa</b>

4.Hệ thống hiển thị trang chi tiết thông tin, thông số của Sản phẩm.5.Khách hàng chọn vào button “Thêm vào giỏ hàng”.

6.=> Hệ thống thông báo thêm vào giỏ hàng thành công.Ngoại lệ

2.1 Hệ thống hiển thị danh sách các Sản phẩm lỗi, hiển thị thông báo lỗi.

4.1 Hệ thống không lấy được thông tin chi tiết Sản phẩm, hiển thị thông báo lỗi.

6.1 Hệ thống thêm vào giỏ hàng lỗi, hiển thị thông báo lỗi.

<b>2.2.4.5.Đặc tả use case Khách hàng đặt hàngMô tả use case</b>

UseCase Place Order

Actor Khách hàng

Tiền điều kiện Khách hàng đăng nhập vào hệ thống website thành

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

<b>PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa</b>

3.Khách hàng chọn vào số lượng và loại hàng muốn đặt4.Khách hàng chọn vào button “Đặt hàng”.

5.=> Hệ thống thông báo đã đặt hàng thành công.Ngoại lệ

2.1 Hệ thống hiển thị danh sách các sản phẩm trong giỏhàng lỗi, hiển thị thông báo lỗi.

5.1 Hệ thống dặt hàng lỗi, hiển thị thông báo lỗi.

<b>2.2.4.6.Đặc tả use case Quản lí đơn hàngMơ tả đơn hàng</b>

UseCase Manage Order

Actor Quản trị viên

Tiền điều kiện Quản trị viên đăng nhập thành cơng vào hệ thống

<b>Chuỗi sự kiện chính:</b>

1. Quản trị viên truy cập vào trang quản lí đơn hàng.

2. Hệ thống điều hướng đến trang quản lí đơn hàng và hiển thị danh sách các đơn hàng.

3. Quản trị viên chọn vào xem chi tiết một đơn hàng.4. Hệ thống điều hướng đến trang đơn hàng chi tiết.5. Quản trị viên chọn vào nút “Tạo mới đơn hàng”.6. Hệ thống hiện giao diện form tạo mới đơn hàng.7. Quản trị viên nhập đầy đủ các trường trong form tạo mới.8. Quản trị viên bấm vào nút Tạo mới.

9. => Hệ thống thông báo tạo mới đơn hàng thành công và quay lại màn hình danh sách đơn hàng.

10. Quản trị viên bấm vào button cập nhật đơn hàng.11.Hệ thống sẽ hiện thông tin của đơn hàng đã được chọn và hiển thị

19. => Hệ thống thơng báo xóa thành công, ẩn popup và hiển thị danh sách đơn hàng sau khi đã xóa.

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<b>PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa</b>

Ngoại lệ 2.1 Hệ thống lấy danh sách đơn hàng bị lỗi, hệ thống hiển thị lỗi.

4.1 Hệ thống không lấy được thông tin chi tiết của đơn hàng, hiển thị lỗi.

9.1 Quản trị viên nhập thiếu các trường bắt buộc, hệ thống hiển thị thông báo cần nhập hết các trường bắt buộc.

9.2 Hệ thống tạo mới đơn hàng bị lỗi, hiển thị lỗi ra màn hình.

12.1 Hệ thống không lấy được thông tin dơn hàng, hiểnthị lỗi ra màn hình.

14.1 Quản trị viên nhập thiếu trường bắt buộc, hiển thị thông báo cần phải nhập đầy dủ các trường bắt buộc.14.2 Hệ thống lỗi update đơn hàng, hiển thị thơng báo lỗi ra màn hình.

19.1 Hệ thống bị lỗi khi xóa một đơn hàng, hiển thị thơng báo lỗi ra màn hình.

<b>2.3.Yêu cầu phi chức năng2.3.1.Yêu cầu về hiệu năng</b>

Trong hệ thống website hàng triệu người dùng và có đến hàng trăm nghìn sản phẩmthì hiệu năng là một trong những vấn đề được người dùng đặc biệt quan tâm. Nó liênquan trực tiếp đến trải nghiệm của người dùng.

Các nhà phát triển thường sẽ đặt ra những tiêu chí ví dụ như tìm kiếm 1 sản phầmkhông quá 0.5s, tốc độ tải trang không quá 1s, …

<b>2.3.2.Yêu cầu về độ tin cậy</b>

Ngoài ra, về bảo mật cũng là một trong những điều đội ngũ phát triển cũng cần lưuý, để bảo mật danh tính cũng như thông tin người dùng cần tuân thủ 1 số yêu cầu vềan toàn bảo mật.

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

<b>PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa</b>

Đảm bảo phần mềm có khả năng ghi nhật ký và chẩn đốn tốtTạo và duy trì sổ tay hoạt động

Trợ giúp phân loại vé hỗ trợ đã leo thang

Làm việc trên các yêu cầu tính năng, lỗi và các nhiệm vụ phát triển khácĐóng góp vào lộ trình sản phẩm tổng thể

<b>2.3.3.Yêu cầu về độ dễ dùng của website</b>

Website phải có giao diện dễ nhìn, những chức năng chính cần hiển thị to, rõ ràng,và xuất hiện ở nơi dễ nhìn thấy trong trang web.

Nhà phát triển phải thiết kế sản phẩm sao cho một người dùng bất kì có thể sử dụngthành thạo sau 1 đến 2 lần sử dụng.

<b>2.3.4.u cầu về tính dễ bảo trì</b>

Dễ bảo trì khi có sự cố xảy ra.Mỗi lần bảo trì khơng q 10 phút.

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

<b>PROJECT 2 Giáo viên hướng dẫn: Lê Thị HoaCHƯƠNG 3: CƠNG NGHỆ VÀ THUẬT TỐN SỬ DỤNG3.1.Ngôn ngữ HTML và CSS</b>

HTML (Hypertext Markup Language) là mã được dùng để xây dựng nên cấutrú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ạtcá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...

CSS – được 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 là viết tắt của Cascading Style Sheets. CSS được hiểu mộtcách đơn giản đó là 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.

<b>3.1.3.Sự khác nhau cơ bản giữa HTML và CSS</b>

<b>HTML </b>là một ngôn ngữ <b>đánh dấu</b> để <b>mô tả </b>các tài liệu web (trang web)” W3Schools

-HTML được tạo ra để giúp các lập trình viên mơ tả nội dung trên một trangweb. HTML sử dụng các thẻ để gúp bạn thêm đoạn văn, tiêu đề, hình ảnh, dấu đầudòng và các phần cấu trúc khác. Giống như việc viết một cái gì đó trên một tài liệuword, HTML giúp bạn viết một cái gì đó trên một trang web.

<b>“CSS mô tả</b> cách các <b>phần tử HTML</b> được <b>hiển thị</b> trên màn hình, giấy hoặccác phương tiện khác” - W3Schools

CSS là thứ làm cho một trang web trong tuyệt vời. Trình bày và tính dễ sử dụnglà một số phẩm chất mà CSS mang lại cho việc phát triển web. Nó liên quan nhiềuhơn đến việc thay đổi phong cách trang web, hơn là nội dung của nó. Giống như thayđổi kích thước phơng chữ, màu phơng chữ và định vị trên một tài liệu word. CSS chịu

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

<b>PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa</b>

JavaScript là ngơn ngữ lập trình phổ biến dùng để tạo ra các trang web tương tác.Được tích hợp và nhúng vào HTML giúp website trở nên sống động hơn. JavaScriptđóng vai trò như một phần của trang web, thực thi cho phép Client-Side Script từ phíangười dùng cũng như phía máy chủ (Nodejs) tạo ra các trang web động.

JavaScript là một ngơn ngữ lập trình thơng dịch với khả năng hướng đến đối tượng.Là một trong 3 ngơn ngữ chính trong lập trình web và có mối liên hệ lẫn nhau để xâydựng một website sống động, chuyên nghiệp, bạn có thể nhìn tổng quan như sau:

HTML: Cung cấp cấu trúc cơ bản, hỗ trợ trong việc xây dựng layout, thêm nộidung dễ dàng trên website.

CSS: Được sử dụng để kiểm soát và hỗ trợ việc định dạng thiết kế, bố cục,style, màu sắc,…

JavaScript: Tạo nên những nội dung “động” trên website.

<b>3.2.2.Ứng dụng nổi bật của JavaScript</b>

Với sự cải thiện và nâng cấp khơng ngừng, giờ đây Javascript có thể làm được cáchoạt động tinh vi, phức tạp hơn, giúp tăng tương tác và trải nghiệm người dùng:

Sửa lỗi bố cục, cải thiện phần nhìn:

Javascript có khả năng nhận diện thiết bị người dùng và các chi tiết như ứng dụngtrình duyệt, độ phân giải màn hình... Những thơng tin này góp phần cải thiện phầnnhìn, thay đổi bố cục website hợp lý hơn, nhằm phục vụ tốt cho việc thiết kế đáp ứng(responsive design).

Tạo hiệu ứng sinh động bắt mắt:

Với một website hiện đại thì hiệu ứng chuyển động là một phần không thể thiếu nhưhiệu ứng mỗi bài viết, nội dung trang, hoạt cảnh chuyển kênh giữa các menu... Nhữnghiệu ứng và hoạt cảnh này đem tới những tương tác mới mẻ và thú vị.

Cải thiện tính năng tương tác người dùng:

Ngồi thay đổi hiệu ứng, cịn rất nhiều tính năng hấp dẫn như:

-Tính năng giỏ hàng: Nhanh chóng biết được mình phải trả bao nhiêu tiền cũng nhưtồn bộ thơng tin đơn hàng trước khi thanh tốn.

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

<b>PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa</b>

-Tính năng kiểm tra người dùng: Khi nhập tên người dùng mong muốn, Javascript cóthể lập tức dị cơ sở dữ liệu xem lịch sử đặt trước của người dùng. Tính năng này hồntồn tự động, khơng cần tải lại trang.

-Tính năng cập nhật liên tục: Khơng tốn thời gian tải lại, trang có thể tự động cậpnhật.

-Tính năng gợi ý từ khóa trên khung tìm kiếm: Tự động nhận diện, tính tốn xem bạnđang muốn gì và hiện ra list gợi ý liên quan nhất.

Tự động hóa:

Mọi ứng dụng đều trở nên hữu ích và thú vị hơn khi chúng được kích hoạt tự động.Javascript cho phép thực hiện chuỗi hành động đã được lên kịch bản sẵn ngay khingười dùng mới truy cập vào trang.

<b>3.2.3.Client-side rendering (CSR) vs Server-side rendering (SSR)</b>

Theo truyền thống, khi xây dựng các trang web hay ứng dụng web đều có chiến lượcchung là đó là server sẽ chuẩn bị sẵn các nội dung HTML để gửi xuống trình duyệt.Các nội dung này sẽ được trình duyệt kết hợp với CSS để tạo thành tranh web cho bạnsử dụng.

Sau này, xuất hiện các Javascript framework hiện đại như ReactJS, VueJS… đã làmthay đổi cách tiếp cận khi phát triển ứng dụng web, cách tiếp cận mới mang tới khảnăng giảm gánh nặng cho server, xây dựng mơ hình phân tán thay vì tập trung tạiserver.

Đến đây, rất nhiều diễn đàn lại nảy sinh tranh luận gay gắt xem cách tiếp CSR haySSR, cái nào tốt hơn, cái nào tối ưu?

<b>Server Side Rendering (SSR) là gì?</b>

</div>