Xây dựng website bán điện thoại di động đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

TỔNG QUAN

Tính cấp thiết của đề tài

Sự phát triển nhanh chóng của internet đã làm thay đổi phương thức kinh doanh của các doanh nghiệp bán lẻ, thúc đẩy sự phát triển của thương mại điện tử (TMĐT) và thương mại trực tuyến giữa doanh nghiệp và người tiêu dùng Những tiện ích của TMĐT đã tạo cơ hội thuận lợi cho hoạt động mua sắm trực tuyến phát triển mạnh mẽ Kinh doanh trực tuyến đang trở thành xu hướng thu hút sự quan tâm của nhiều doanh nghiệp, đặc biệt là các doanh nghiệp nhỏ và vừa, hộ kinh doanh cá thể và cá nhân, nhờ vào hiệu quả, chi phí thấp và khả năng tương tác cao với khách hàng.

Hơn 80% người mua sắm trực tuyến vẫn chọn thanh toán bằng tiền mặt, trong khi khoảng 50% sử dụng chuyển khoản ngân hàng, và tỷ lệ thanh toán qua thẻ hoặc ví điện tử là rất nhỏ Khảo sát cho thấy người tiêu dùng còn nhiều lo ngại khi mua sắm trực tuyến, bao gồm việc sản phẩm không đúng chất lượng quảng cáo, uy tín của người bán, giao hàng chậm trễ, không nhận được hàng, lo sợ bị lộ thông tin cá nhân và chất lượng dịch vụ chăm sóc khách hàng.

Để khách hàng mua sắm trực tuyến dễ dàng, tiện lợi và an toàn, các doanh nghiệp cần áp dụng những giải pháp quản lý nguồn hàng hiệu quả Đồng thời, họ cũng cần nắm bắt tâm lý khách hàng để đáp ứng nhu cầu mua sắm một cách tốt nhất.

Giải pháp cho bài toán này là phát triển một hệ thống thương mại điện tử cho phép khách hàng dễ dàng tiếp cận nhiều sản phẩm và thực hiện đặt hàng một cách nhanh chóng và thuận tiện Bên cạnh đó, nhà cung cấp cũng cần có công cụ hiệu quả để quản lý hoạt động kinh doanh của mình.

Khảo sát hiện trạng

Các trang thương mại điện tử chuyên bán thiết bị di động thường có những chức năng tương đồng Nhóm nghiên cứu đã tiến hành khảo sát một số trang web trong lĩnh vực này.

- Trang web https://www.thegioididong.com/

Công ty Cổ phần Đầu tư Thế Giới Di Động (MWG) là nhà bán lẻ hàng đầu tại Việt Nam về doanh thu và lợi nhuận, sở hữu hơn 2200 cửa hàng trên toàn quốc MWG điều hành các chuỗi bán lẻ nổi tiếng như thegioididong.com, Điện Máy Xanh và Bách Hoá Xanh.

MWG đã mở rộng ra thị trường nước ngoài với chuỗi bán lẻ Bigphone tại Campuchia

Thegioididong.com được thành lập từ năm 2004, là chuỗi bán lẻ thiết bị di động

Thị trường điện thoại di động, máy tính bảng, laptop và phụ kiện tại Việt Nam đang dẫn đầu với hơn 1000 cửa hàng phân bố rộng rãi ở 63 tỉnh thành trên toàn quốc.

Hình 1.1: Giao diện trang chủ của Thegioididong.com

+ Thiết kế: dễ nhìn thấy thông tin sản phẩm, tạo cảm giác thân thiện với người dùng, dễ dàng thao tác

Trang web tải nhanh chỉ trong vài giây khi thiết bị có kết nối internet, giúp người dùng dễ dàng tiếp cận các sản phẩm mới và sự kiện của cửa hàng ngay từ đầu trang.

+ Trang web sử dụng được ở nhiều thiết bị khác nhau

+ Hình ảnh sản phẩm được thêm chi tiết, có thể xem hình xoay 360 độ, có video về sản phẩm

Trang web cần thể hiện đầy đủ các tính năng cơ bản như mục lựa chọn loại sản phẩm, cung cấp thông tin chi tiết về sản phẩm, chức năng tìm kiếm sản phẩm hiệu quả và thông tin về các chương trình khuyến mãi hấp dẫn.

Hình 1.2: Giao diện trang sản phẩm chi tiết của Thegioididong.com

+ Trang web có một số tính năng nâng cao: thanh toán trực tuyến, cho phép người dùng bình luận, đánh giá trực tiếp trên sản phẩm

Hình 1.3: Giao diện chức năng đánh giá sản phẩm của Thegioididong.com

+ Có blog bình luận và các bài viết về công nghệ, sản phẩm mới trên thị trường

Hình 1.4: Giao diện trang blog của Thegioididong.com

+ Khi đặt hàng, khách hàng nhập thông tin bất kỳ đều được, như vậy sẽ khó kiểm soát được dữ liệu

Hình 1.5: Giao diện chức năng hỗ trợ khách hàng của Thegioididong.com

+ Có hỗ trợ khách hàng online nhưng không phải là chatbot mà chat trực tiếp với nhân viên tư vấn

- Trang web https://fptshop.com.vn/

FPT Shop là cửa hàng hàng đầu tại Việt Nam chuyên cung cấp và bán lẻ các sản phẩm chính hãng như điện thoại di động, máy tính bảng, máy tính xách tay và phụ kiện điện tử Đặc biệt, FPT Shop là trung tâm bán lẻ đầu tiên tại Việt Nam đạt chứng chỉ ISO 9001:2000 về quản lý chất lượng theo tiêu chuẩn quốc tế.

Hình 1.6: Giao diện trang chủ của fptshop.com.vn

+ Thiết kế: dễ nhìn thấy các thông tin cơ bản của sản phẩm, thông tin khuyến mãi, điều này khách hàng có thể dễ dàng thao tác

+ Trang web có tốc độ load nhanh với chỉ vài giây với điều kiện thiết bị có kết nối internet

+ Hiển thị thông tin cơ bản của sản phẩm giúp cho người dùng tìm ra sản phẩm phù hợp với nhu cầu sử dụng nhanh hơn

+ Trang web sử dụng được ở nhiều thiết bị khác nhau: điện thoại, máy tính, tablet,…

+ Có chat hỗ trợ trực tuyến

Khách hàng có thể phóng to hình ảnh sản phẩm để xem chi tiết hơn, đồng thời có thể xem nhiều hình ảnh khác nhau về sản phẩm mà họ quan tâm Ngoài ra, bài viết cũng cung cấp video giới thiệu về sản phẩm để giúp khách hàng có cái nhìn tổng quan hơn.

Trang web cần thể hiện đầy đủ các tính năng cơ bản như mục lựa chọn loại sản phẩm, thông tin chi tiết về sản phẩm và thông tin khuyến mãi cho từng sản phẩm Việc này không chỉ thu hút sự chú ý của khách hàng mà còn tăng cường sự quan tâm đối với sản phẩm.

Hình 1.7: Giao diện trang sản phẩm chi tiết của fptshop.com.vn

Hình 1.8: Giao diện trang đánh giá sản phẩm của fptshop.com

+ Có chức năng thanh toán tiền điện nước và mua bán các loại thẻ cào

Hình 1.9: Giao diện trang dịch vụ thanh toán của fptshop.com

+ Khi khách hàng đặt hàng, nhập thông tin bất kì vào các ô yêu cầu đều chấp nhận, việc này sẽ khó quản lý được dữ liệu

Trên trang chủ của sản phẩm, giao diện quảng cáo lớn có thể gây khó chịu cho một số khách hàng Thiết kế này cần được xem xét lại để cải thiện trải nghiệm người dùng.

- Trang web https://viettelstore.vn/

Viettel Store là hệ thống bán hàng chính thức của Công ty Thương mại và Xuất Nhập khẩu Viettel, cung cấp sản phẩm chính hãng như điện thoại, máy tính bảng, laptop, linh phụ kiện điện tử, sim số và các dịch vụ như Smart Motor, cáp quang FTTH và truyền hình Bạn có thể dễ dàng đặt mua online tại trang web viettelstore.vn.

Hình 1.10: Giao diện trang chủ của viettelstore.com.vn

Giao diện thiết kế của trang web rất dễ nhìn, giúp khách hàng nhanh chóng tìm kiếm thông tin về các sản phẩm trả góp và sản phẩm bán chạy Mặc dù thiết kế đơn giản, nhưng người dùng có thể dễ dàng lựa chọn sản phẩm theo yêu cầu cá nhân của mình một cách nhanh chóng và thuận tiện.

+ Trang web có tốc độ load nhanh chỉ vài giây, với điều kiện thiết bị có kết nối internet

Trang web cần thể hiện đầy đủ các tính năng cơ bản như mục lựa chọn loại sản phẩm, thông tin chi tiết về sản phẩm, chức năng tìm kiếm sản phẩm và các chương trình khuyến mãi hấp dẫn.

+ Có các tính năng như dịch vụ viễn thông, blog công nghệ, tra cứu thông tin siêu thị gần nhất

Hình 1.11: Giao diện trang sản phẩm chi tiết của viettelstore.com.vn

+ Trang web sử dụng được ở nhiều thiết bị khác nhau

Hình 1.12: Giao diện trang đánh giá sản phẩm của viettelstore.com.vn

Người dùng có thể dễ dàng tìm kiếm siêu thị gần nhất có sản phẩm mong muốn và chia sẻ thông tin sản phẩm trực tiếp lên trang facebook.com thông qua trang web.

+ Hiển thị nhiều hình ảnh về sản phẩm giúp khách hàng có thể xem chi tiết về sản phẩm

+ Giao diện chưa phù hợp khi thao tác phóng to, thu nhỏ với trang web

+ Khi khách hàng đặt hàng, nhập thông tin bất kì vào các ô yêu cầu đều chấp nhận, việc này sẽ khó quản lý được dữ liệu

+ Không có ứng dụng chatbot

Trang web https://cellphones.com.vn/ là nền tảng thương mại điện tử của Cellphones, chuyên cung cấp các sản phẩm chính hãng như điện thoại, máy tính bảng, laptop và phụ kiện liên quan Ngoài ra, trang còn có nhiều sản phẩm cũ, đã qua sử dụng, phục vụ nhu cầu tiết kiệm của khách hàng CellphoneS cũng được biết đến là một trong những địa chỉ sửa chữa điện thoại và máy tính uy tín hàng đầu tại Việt Nam.

Hình 1.13: Giao diện trang chủ của cellphones.com.vn

+ Thiết kế: thông tin khuyến mãi, thông tin sản phẩm dễ lựa chọn theo nhu cầu của khách hàng

+ Tốc độ load trang web nhanh chỉ với vài giây, điều kiện thiết bị có kết nối internet

Hiển thị thông tin về tình trạng hàng hóa trong cửa hàng giúp khách hàng dễ dàng lựa chọn địa điểm mua sắm phù hợp và thuận tiện Điều này mang lại trải nghiệm mua sắm nhanh chóng và hiệu quả cho người tiêu dùng.

Hình 1.14: Giao diện trang sản phẩm chi tiết của cellphones.com.vn

+ Có chức năng tìm kiếm thông tin sản phẩm theo khu vực

CƠ SỞ LÝ THUYẾT

Framework Python Django

Django is a free, open-source web framework designed based on the MTV (Model-Template-Views) architecture It is actively managed and developed by the Django Software Foundation (DSF).

Django là một framework mạnh mẽ giúp dễ dàng tạo ra các trang web phức tạp dựa trên cơ sở dữ liệu, với trọng tâm vào khả năng tái sử dụng và khả năng cắm của các thành phần Nó cho phép phát triển nhanh chóng với ít mã hơn và nguyên tắc không lặp lại Toàn bộ framework sử dụng Python, bao gồm cả các tệp cài đặt và mô hình dữ liệu Ngoài ra, Django cung cấp giao diện quản trị động cho phép tạo, đọc, cập nhật và xóa thông qua việc cấu hình các mô hình quản trị.

2.1.2 Các đặc tính của Django

- Nhanh: Django được thiết kế để giúp các nhà phát triển đưa các ứng dụng từ ý tưởng đến hoàn thành càng nhanh càng tốt

Django cung cấp đầy đủ các thư viện và module cần thiết cho phát triển web, bao gồm nhiều tính năng bổ sung hữu ích Nó hỗ trợ xử lý các tác vụ phổ biến như xác thực người dùng, quản trị nội dung, tạo bản đồ trang web, và quản lý nguồn cấp dữ liệu RSS, giúp tiết kiệm thời gian cho lập trình viên.

Django chú trọng đến tính bảo mật, giúp các nhà phát triển tránh nhiều lỗi bảo mật phổ biến như SQL Injection, kịch bản chéo trang, và giả mạo yêu cầu chéo trang Hệ thống xác thực người dùng của Django cung cấp phương pháp an toàn để quản lý tài khoản và mật khẩu, đảm bảo an toàn cho thông tin người dùng.

Django nổi bật với khả năng mở rộng linh hoạt, cho phép các địa điểm bận rộn nhất trên thế giới đáp ứng hiệu quả nhu cầu giao thông lớn.

Django mang lại tính linh hoạt cao, được các công ty, tổ chức và chính phủ áp dụng để phát triển đa dạng các ứng dụng, từ hệ thống quản lý nội dung cho đến mạng xã hội và nền tảng điện toán khoa học.

- Sau đây là cấu trúc của framework Django (Hình sưu tầm từ dataflair)

- Django sử dụng mô hình MTV (Model – Template - Controller) tương tự như mô hình MVC (Model – View - Controller) trong các framework khác

Mô hình (Model) trong Django là nơi thiết kế cơ sở dữ liệu, cho phép Django ORM cung cấp các phương thức xử lý và nghiệp vụ liên quan Template là các mẫu được thiết kế để xử lý và xuất ra mã HTML/CSS cho trang web View là các hàm thực hiện xử lý khi nhận được yêu cầu từ người dùng.

Ngôn ngữ Python

2.2.1 Giới thiệu về ngôn ngữ Python

- Python là một trong những ngôn ngữ lập trình thiên hướng đối tượng bậc cao

Ngôn ngữ lập trình này, do Guido van Rossum phát triển trong một dự án mã nguồn mở, được sử dụng rộng rãi trong quá trình phát triển ứng dụng và các website khác nhau.

Python là ngôn ngữ lập trình lý tưởng cho cả chuyên gia và người mới bắt đầu nhờ vào cấu trúc đơn giản và thanh lịch Với tính chặt chẽ, mạnh mẽ và tốc độ nhanh, Python đã trở thành lựa chọn phổ biến trên mọi hệ điều hành.

- Ngôn ngữ lập trình này đã được ứng dụng trong các lập trình game đơn giản, những thuật toán phức tạp

2.2.2 Các đặc tính của Python

Python là một ngôn ngữ lập trình mạnh mẽ giúp giải quyết các vấn đề phức tạp một cách trực quan Bằng cách áp dụng lập trình hướng đối tượng, bạn có thể chia nhỏ các vấn đề phức tạp thành những phần dễ quản lý hơn thông qua việc tạo ra các đối tượng.

Chương trình Python có khả năng di chuyển linh hoạt giữa nhiều nền tảng khác nhau như Windows, macOS và Linux mà không cần thay đổi gì.

Python là một ngôn ngữ lập trình đơn giản và dễ học, với cú pháp rõ ràng giúp người dùng dễ dàng đọc và viết mã Sự dễ dàng này làm cho quá trình làm việc với Python trở nên hấp dẫn và thú vị hơn so với các ngôn ngữ lập trình khác.

Python là một ngôn ngữ lập trình miễn phí và mã nguồn mở, cho phép người dùng tự do phân phối và sử dụng cho các mục đích thương mại Nhờ vào tính chất mã nguồn mở, bạn không chỉ sở hữu phần mềm mà còn có khả năng thay đổi mã nguồn của các chương trình được viết bằng Python.

Python cho phép mở rộng và nhúng dễ dàng, giúp kết hợp với các ngôn ngữ lập trình phổ biến khác để phát triển ứng dụng Điều này mang lại cho ứng dụng những tính năng vượt trội như khả năng scripting, mà các ngôn ngữ khác không thể cung cấp.

Python sở hữu một thư viện tiêu chuẩn phong phú, hỗ trợ tối đa cho công việc và quá trình học tập của bạn Những thư viện này giúp bạn thực hiện các kiểm tra mà không làm ảnh hưởng đến mã nguồn hoặc ứng dụng của mình.

SQLite

SQLite là một thư viện phần mềm cung cấp một SQL Database Engine nhỏ gọn, không cần máy chủ và không cần cấu hình Điều này có nghĩa là SQLite hoạt động như một cơ sở dữ liệu độc lập, giúp người dùng dễ dàng sử dụng mà không cần thực hiện các bước cấu hình phức tạp trong hệ thống của mình.

SQLite không phải là một quy trình độc lập như các cơ sở dữ liệu khác, mà có thể được liên kết tĩnh hoặc động với ứng dụng của bạn Nó cho phép truy cập trực tiếp vào các file lưu trữ của mình.

2.3.2 Các đặc tính của SQLite

- SQLite không yêu cầu một quy trình hoặc hệ thống máy chủ riêng biệt để hoạt động

- SQLite không cần cấu hình, có nghĩa là không cần thiết lập hoặc quản trị

- Một cơ sở dữ liệu SQLite hoàn chỉnh được lưu trữ trong một file disk đa nền tảng (cross-platform disk file)

- SQLite rất nhỏ và trọng lượng nhẹ, dưới 400KiB được cấu hình đầy đủ hoặc dưới 250KiB với các tính năng tùy chọn bị bỏ qua

- SQLite là khép kín (self-contained), có nghĩa là không có phụ thuộc bên ngoài

- Các transaction trong SQLite hoàn toàn tuân thủ ACID, cho phép truy cập an toàn từ nhiều tiến trình (process) hoặc luồng (thread)

- SQLite hỗ trợ hầu hết các tính năng ngôn ngữ truy vấn (query language) được tìm thấy trong tiêu chuẩn SQL92 (SQL2)

- SQLite được viết bằng ANSI-C và cung cấp API đơn giản và dễ sử dụng

- SQLite có sẵn trên UNIX (Linux, Mac OS-X, Android, iOS) và Windows

- Các lệnh SQLite tiêu chuẩn để tương tác với cơ sở dữ liệu quan hệ tương tự như SQL: CREATE, SELECT, INSERT, UPDATE, DELETE và DROP

- Các lệnh này có thể được phân loại thành các nhóm dựa trên tính chất hoạt động của chúng.

XÁC NHẬN, PHÂN TÍCH VÀ MÔ HÌNH HÓA YÊU CẦU

Phân tích yêu cầu đề tài

XÂY DỰNG TRANG WEB BÁN ĐIỆN THOẠI SỬ DỤNG CÔNG NGHỆ

3.1.2 Chức năng của trang web Đây là một trang web thương mại điện tử với mục đích kinh doanh các sản phẩm về điện thoại di động để đáp ứng nhu cầu người dùng Trang web có các chức năng như sau:

- Đăng ký, đăng nhập có phân quyền

- Cập nhật thông tin cá nhân

- Quản lý thông tin cá nhân

- Xem danh sách, chi tiết các sản phẩm

- Xem các bài viết về sản phẩm

- Tìm kiếm hãng sản xuất

- So sánh các sản phẩm với nhau

- Bình luận và đánh giá sản phẩm

- Quản lý số lượng sản phẩm đặt mua trong giỏ hàng

- Hiển thị danh sách, chi tiết các sản phẩm

- Hiển thị danh sách, chi tiết các bài viết về sản phẩm

3.1.3.1 Thiết bị và phần mềm xây dựng trang web

- Máy tính có cấu hình tối thiểu Core i3, RAM 4Gb

- Phần mềm Visual Studio Code

- Máy tính có cài Django, Python

3.1.3.2.1 Phân tích yêu cầu người dùng

 Yêu cầu của khách hàng

 Giao diện dễ sử dụng và có tính thẩm mỹ cao

 Cho phép khách hàng đăng ký thành viên và bảo mật thông tin

 Xem và thay đổi các thông tin về tài khoản

 Hình thức thanh toán phải đảm bảo chính xác

Khi thực hiện chuyển tiền, cần đảm bảo tính chính xác, nghĩa là quá trình cộng và trừ tiền phải diễn ra đồng thời từ cả hai tài khoản: tài khoản chuyển tiền và tài khoản nhận tiền.

 Thông tin sản phẩm phong phú, đa dạng:

Chúng tôi cung cấp một loạt các mặt hàng đa dạng, giúp khách hàng dễ dàng lựa chọn sản phẩm phù hợp Mỗi sản phẩm đều được mô tả chi tiết, đảm bảo khách hàng nắm rõ thông tin cần thiết trước khi quyết định mua Đặc biệt, chúng tôi chú trọng đến những mặt hàng được nhiều khách hàng quan tâm, nhằm đáp ứng tốt nhất nhu cầu của thị trường.

+ Luôn cập nhật, giới thiệu về những dòng sản phẩm thế hệ mới nhất

+ Cho phép khách hàng so sánh các sản phẩm với nhau để khách hàng có thể lựa chọn sản phẩm phù hợp với mình nhất

 Cho phép khách hàng tương tác với Chatbot để khách hàng có thể nhận được hỗ trợ trực tuyến dễ dàng và nhanh chóng

 Cho phép khách hàng tìm kiếm nhanh chóng, chính xác theo nhiều tiêu chí

 Cho phép thống kê các đơn hàng đã đặt của mình tại công ty

 Yêu cầu của người quản trị

Ngoài các yêu cầu giống như khách hàng, thì hệ thống phải đảm bảo những yêu cầu sau của ban quản trị

 Quản lý chung: liên quan tới các thông tin nhân viên, khách hàng, hàng hóa,…

 Cập nhật thông tin hàng hóa trực tuyến

Dễ dàng cập nhật và thường xuyên thay đổi hình ảnh, thông tin chi tiết giá các mặt hàng bạn sẽ kinh doanh ở bất cứ đâu.

 Quản lí các đơn hàng trực tuyến

Quản lí, lưu trữ và báo cáo thông tin về đặt hàng và trạng thái của đơn hàng: đã giao hàng chưa, đã thanh toán chưa …

Lưu trữ và quản lý các hoạt động liên quan đến khách hàng của cửa hàng là rất quan trọng Tất cả các giao dịch và tương tác với khách hàng, cũng như đơn hàng, đều có thể được thực hiện từ xa, không bị giới hạn bởi vị trí địa lý.

 Thống kê chi tiết cụ thể, chính xác và nhanh chóng

Thống kê được mặt hàng nào bán hết, mặt hàng nào bán chạy, mặt hàng nào tồn kho, mặt hàng nào cần chỉnh sửa…

Tổng hợp thu chi hàng ngày, hàng tuần, hàng tháng hàng quý và hàng năm

Tổng hợp lưu trữ được ý kiến phản ánh của khách hàng để có thể trả lới khách hàng một cách nhanh chóng và chính xác nhất.

 Cho phép in các danh sách, các thông tin cần thiết.

1 Yêu cầu của nhân viên

 Sản phẩm : Có thể thêm, sửa xóa thông tin, danh mục

 Quản lý các module : định vị, chỉnh sửa , bật –tắt các module chức năng

 Xem các báo cáo , thống kê, đơn đặt hàng

 Nhận và phản hồi các yêu cầu của khách hàng

 Quản lý các thông tin khác: khuyến mại, tin tức

Mô hình hóa yêu cầu

3.2.1 Biểu đồ phân cấp chức năng

Hình 3.1: Biểu đồ phân cấp chức năng

3.2.2 Biểu đồ luồng dữ liệu mức bối cảnh

Hình 3.2: Biểu đồ luồng dữ liệu mức bối cảnh

3.2.3 Biểu đồ luồng dữ liệu ở mức đỉnh

Hình 3.3: Biểu đồ luồng dữ liệu ở mức đỉnh

Đặc tả chi tiết Usecase

3.3.1 Chức năng đăng kí (Guest)

Hình 3.5: Usecase chức năng đăng ký (Guest)

Bảng 3.3.1: Mô tả chức năng đăng ký (Guest)

Use Case Name Đăng ký

Description Là người dùng tôi muốn đăng ký tài khoản vào trang web để sử dụng dịch vụ của trang web

Trigger Người dùng muốn đăng ký tài khoản trên trang web của shop

Pre-Condition(s): Thiết bị của người dùng đã được kết nối internet khi thực hiện đăng ký

Post-Condition(s):  Người dùng đăng ký tài khoản thành công

 Hệ thống ghi nhận hoạt động đăng ký thành công

 Tài khoản mới đăng ký của khách hàng được cập nhật trong Database

Basic Flow 1 Người dùng truy cập vào trang web của shop

2 Người dùng chọn phương thức đăng ký tài khoản của trang web

3 Người dùng nhập tên tài khoản và mật khẩu của mình và nhấn nút đăng ký

4 Hệ thống thông báo đăng ký thành công và cho phép người dùng đăng nhập

Exception Flow 4.1 Hệ thống xác thực thông tin đăng ký không thành công và yêu cầu người dùng nhập lại thông tin đăng ký

3.3.2 Chức năng đăng nhập (Guest)

Hình 3.6: Usecase chức năng đăng nhập (Guest)

Bảng 3.3.2: Mô tả chức năng đăng nhập (Guest)

Use Case Name Đăng nhập

Description Là người dùng tôi muốn đăng nhập vào trang web để sử dụng dịch vụ của trang web

Priority Người dùng phải có tài khoản của trang web

Pre-Condition(s):  Người dùng phải có tài khoản đã được đăng ký

 Thiết bị của người dùng đã được kết nối internet khi thực hiện đăng nhập

Post-Condition(s):  Người dùng đăng nhập thành công

 Hệ thống ghi nhận hoạt động đăng nhập thành công

 Hệ thống chuyển đến trang chủ của web

Basic Flow 1 Người dùng truy cập vào trang web của shop

2 Người dùng chọn phương thức đăng nhập

3 Người dùng nhập tên tài khoản và mật khẩu của mình và nhấn nút đăng nhập

4 Hệ thống thông báo đăng nhập thành công và chuyển đến trang chủ của web

5 Người dùng chọn phương thức quên mật khẩu

6 Người dùng chọn nút quên mật khẩu

7 Hệ thống chuyển đến trang thay đổi mật khẩu và cho phép người dùng thay đổi mật khẩu

8 Người dùng thay đổi mật khẩu và bấm nút xác nhận

9 Hệ thống xác nhận và thông báo thay đổi mật khẩu thành công

Alternative Flow 2.1 Người dùng chọn phương thức đăng nhập bằng tài khoản

Gmail/Facebook 2.2 Hệ thống chuyển sang màn hình đăng nhập của Google/Facebook

2.3 Người dùng nhập tài khoản Google/Facebook và chọn lệnh đăng nhập

2.4 Google/Facebook xác thực thông tin đăng nhập thành công và chuyển về trang chủ của web

Exception Flow 4.1 Hệ thống xác thực thông tin đăng nhập không thành công và yêu cầu người dùng nhập lại thông tin đăng nhập

3.3.3 Chức năng tìm kiếm sản phẩm (Customer/Guest)

Hình 3.7: Usecase chức năng tìm kiếm sản phẩm (Customer/Guest)

Bảng 3.3.3: Mô tả chức năng tìm kiếm sản phẩm (Customer/Guest)

Use Case Name Tìm kiếm sản phẩm

Description Là người dùng tôi muốn tìm kiếm sản phẩm có trên trang web

Pre-Condition(s): Thiết bị của người dùng đã được kết nối internet ổn định khi thực hiện tìm kiếm

Post-Condition(s): Trang web hiển thị thành công sản phẩm người dùng tìm kiếm

Basic Flow 1 Người dùng nhập tên hoặc mã sản phẩm trên thanh tìm kiếm của trang web

2 Người dùng nhấn nút tìm kiếm

3 Hệ thống xác nhận tên hoặc mã sản phẩm người dùng đã nhập và chuyển đến trang chứa danh sách các sản phẩm đó

Exception Flow 1.1 Người dùng nhập sai tên hoặc mã sản phẩm

1.2 Hệ thống thông báo không tìm thấy sản phẩm

3.3.4 Chức năng xem danh mục sản phẩm (Customer/Guest)

Hình 3.8: Chức năng xem danh mục sản phẩm (Customer/Guest)

Bảng 3.3.4: Mô tả chức năng xem chi tiết sản phẩm (Customer/Guest)

Use Case Name Xem danh mục sản phẩm

Description Là người dùng tôi muốn xem danh mục của sản phẩm

Basic Flow 1 Người dùng nhấn vào tên của hãng sản phẩm trên danh mục sản phẩm ở thanh menu

2 Hệ thống chuyển đến trang danh mục sản phẩm

3.3.5 Chức năng xem chi tiết sản phẩm (Customer/Guest)

Hình 3.9: Chức năng xem chi tiết sản phẩm (Customer/Guest)

Bảng 3.3 5: Mô tả chức năng xem chi tiết sản phẩm (Customer/Guest)

Use Case Name Xem chi tiết sản phẩm

Description Là người dùng tôi muốn xem chi tiết của sản phẩm

Basic Flow 3 Người dùng nhấn vào hình ảnh hoặc tên của sản phẩm

4 Hệ thống chuyển đến trang chi tiết sản phẩm đó

3.3.6 Chức năng thêm sản phẩm vào giỏ hàng (Customer)

Hình 3.10: Usecase chức năng thêm sản phẩm vào giỏ hàng (Customer)

Bảng 3.3.6: Mô tả chức năng thêm sản phẩm vào giỏ hàng (Customer)

Use Case Name Thêm sản phẩm vào giỏ hàng

Description Là người dùng tôi muốn thêm sản phẩm vào giỏ hàng

Priority Người dùng phải đăng nhập vào trang web

Post-Condition(s): Sản phẩm phải có trong giỏ hàng khi người dùng chuyển đến trang giỏ hàng

Basic Flow 1 Người dùng nhấn vào nút thêm vào giỏ

2 Hệ thống thông báo người dùng có muốn bỏ sản phẩm vào giỏ hàng

3 Người dùng nhấn nút có để xác nhận

4 Hệ thống thông báo thêm vào giỏ hàng thành công

3.3.7 Chức năng xem giỏ hàng (Customer)

Hình 3.11: Usecase chức năng xem giỏ hàng (Customer)

Bảng 3.3.7: Mô tả chức năng xem và kiểm tra giỏ hàng (Customer)

Use Case Name Xem giỏ hàng

Description Là người dùng tôi muốn xem và kiểm tra giỏ hàng

Basic Flow 1 Người dùng nhấn vào nút giỏ hàng

2 Hệ thống chuyển đến trang giỏ hàng

3 Người dùng có thể xóa sản phẩm trong giỏ hàng bằng cách ấn nút xóa

4 Hệ thống thông báo người dùng có muốn xóa sản phẩm

5 Người dùng có thể chọn có hoặc không

6 Người dùng có thể nhấn vào nút thanh toán để mua sản phẩm

7 Hệ thống thông báo người dùng có muốn thanh toán

8 Người dùng có thể chọn có hoặc không

Nếu người dùng chưa sẵn sàng thanh toán, họ có thể quay trở lại trang chủ để cập nhật và lựa chọn sản phẩm khác trong giỏ hàng.

3.3.8 Chức năng đặt mua sản phẩm (Customer)

Hình 3.12: Usecase chức năng đặt mua sản phẩm (Customer)

Bảng 3.3.8: Bảng mô tả chức năng đặt mua sản phẩm (Customer)

Use Case Name Đặt mua sản phẩm

Description Là người dùng tôi muốn đặt mua sản phẩm

Basic Flow 1 Người dùng nhấn vào nút đặt mua

2 Hệ thống chuyển đến trang thanh toán

3 Người dùng lựa chọn phương thức thanh toán trực tuyến hoặc thanh toán khi nhận hàng

4 Hệ thống yêu cầu người dùng nhập thông tin cần thiết để thanh toán

5 Người dùng nhập thông tin và nhấn thanh toán

6 Hệ thống xác nhận và thông báo thanh toán thành công

3.3.9 Chức năng đánh giá và bình luận sản phẩm (Customer)

Hình 3.13: Usecase chức năng đánh giá và bình luận sản phẩm (Customer)

Bảng 3.3.9: Bảng mô tả chức năng đánh giá và bình luận sản phẩm (Customer)

Use Case Name Đánh giá và bình luận sản phẩm

Description Là người dùng tôi muốn đánh giá và bình luận sản phẩm

Basic Flow 1 Người dùng nhấn vào nút đánh giá ở trang chi tiết sản phẩm

2 Hệ thống thông báo người dùng muốn đánh giá sản phẩm mấy sao

3 Người dùng nhấn chọn số sao

4 Hệ thống thông báo cảm ơn người dùng đã đánh giá

5 Người dùng nhập bình luận vào ô bình luận sản phẩm sau đó nhấn nút đăng

6 Hệ thống xác nhận và thông báo đăng bình luận thành công

3.3.10 Chức năng so sánh sản phẩm (Customer/Guest)

Hình 3.14: Usecase chức năng so sánh sản phẩm (Customer/Guest)

Bảng 3.3.10: Bảng mô tả chức năng đặt mua sản phẩm (Customer/Guest)

Use Case Name So sánh sản phẩm

Description Là người dùng tôi muốn so sánh các sản phẩm với nhau

Basic Flow 1 Người dùng nhấn vào nút so sánh ở trang chi tiết sản phẩm

2 Hệ thống thông báo người dùng chọn sản phẩm khác để so sanh với sản phẩm hiện tại

3 Người dùng nhập tên hoặc mã sản phẩm muốn so sánh

4 Hệ thống hiển thị kết quả so sánh giữa hai sản phẩm

3.3.11 Chức năng tương tác với Chatbot (Customer/Guest)

Hình 3.15: Usecase chức năng tương tác với Chatbot (Customer/Guest)

Bảng 3.3.11: Bảng mô tả chức năng tương tác với Chatbot (Customer/Guest)

Use Case Name Tương tác với Chatbot

Description Là người dùng tôi muốn tương tác với Chatbot để tìm hiểu về sản phẩm hoặc muốn được tư vấn hỗ trợ

Basic Flow 1 Người dùng nhấn vào biểu tượng chat

2 Người dùng nhập thông tin vào khung chat và nhấn nút gửi

3 Chatbot sẽ xác nhận thông tin và trả lời cho người dùng

3.3.12 Chức năng quản lý sản phẩm (Admin)

Hình 3.16: Usecase chức năng quản lý sản phẩm (Admin)

Bảng 3.3.12: Bảng mô tả chức năng quản lý sản phẩm (Admin)

Use Case Name Quản lý sản phẩm

Description Là Admin tôi muốn quản lý thông tin sản phẩm có trên hệ thống

Priority Người dùng phải đăng nhập vào hệ thống với quyền Admin

Pre-Condition(s): Người dùng phải có tài khoản phân quyền Admin

Basic Flow 1 Người dùng truy cập vào trang hệ thống quản trị web

4 Hệ thống thông báo đăng nhập thành công và chuyển đến trang quản trị

5 Người dùng chọn Sản phẩm

6 Người dùng chọn nút thêm sản phẩm

7 Người dùng nhập thông tin sản phẩm và chọn nút thêm

8 Hệ thống xác nhận và thông báo thêm sản phẩm thành công

9 Người dùng chọn nút cập nhật sản phẩm

10 Người dùng nhập thông tin sản phẩm và chọn nút cập nhật

11 Hệ thống xác nhận và thông báo cập nhật sản phẩm thành công

12 Người dùng chọn nút xóa sản phẩm

13 Hệ thống thông báo người dùng có muốn xóa sản phẩm

15 Hệ thống xác nhận và thông báo xóa sản phẩm thành công

3.3.13 Chức năng quản lý đơn hàng

Hình 3.17: Usecase chức năng quản lý đơn hàng (Admin)

Bảng 3.3.13: Bảng mô tả chức năng quản lý đơn hàng (Admin)

Use Case Name Quản lý đơn hàng

Description Là Admin tôi muốn quản lý đơn hàng của hệ thống

Basic Flow 1 Người dùng chọn Đơn hàng

2 Hệ thống chuyển đến trang danh sách đơn hàng

3 Người dùng chọn nút thêm đơn hàng

4 Người dùng nhập thông tin

5 Hệ thống thông báo người dùng có muốn thêm đơn hàng

7 Hệ thống xác nhận và thông báo thêm đơn hàng thành công

8 Người dùng chọn nút chỉnh sửa đơn hàng

10 Hệ thống thông báo người dùng có muốn chỉnh sửa đơn hàng

12 Hệ thống xác nhận và thông báo chỉnh sửa đơn hàng thành công

13 Người dùng chọn nút xóa đơn hàng

14 Hệ thống thông báo người dùng có muốn xóa đơn hàng

16 Hệ thống xác nhận và thông báo xóa đơn hàng thành công

3.3.14 Chức năng quản lý tài khoản

Hình 3.18: Usecase chức năng quản lý tài khoản (Admin)

Bảng 3.3.14: Bảng mô tả chức năng quản lý tài khoản (Admin)

Use Case Name Quản lý tài khoản

Description Là Admin tôi muốn quản lý các tài khoản có trên hệ thống

Basic Flow 1 Người dùng chọn Tài khoản

2 Hệ thống chuyển đến trang danh sách tài khoản

3 Người dùng nhấn vào tên tài khoản

4 Hệ thống chuyển đến trang thông tin chi tiết tài khoản

5 Người dùng chọn nút thêm tài khoản

7 Hệ thống thông báo người dùng có muốn thêm tài khoản

9 Hệ thống xác nhận và thông báo thêm tài khoản thành công

10 Người dùng chọn nút chỉnh sửa tài khoản

12 Hệ thống thông báo người dùng có muốn chỉnh sửa tài khoản

14 Hệ thống xác nhận và thông báo chỉnh sửa tài khoản thành công

15 Người dùng chọn nút xóa tài khoản

16 Hệ thống thông báo người dùng có muốn xóa tài khoản

18 Hệ thống xác nhận và thông báo xóa tài khoản thành công

3.3.15 Chức năng quản lý danh mục sản phẩm (Admin)

Hình 3.19: Usecase chức năng quản lý danh mục sản phẩm (Admin)

Bảng 3.3.15: Bảng mô tả chức năng quản lý danh mục sản phẩm (Admin)

Use Case Name Quản lý sản phẩm

Description Là Admin tôi muốn quản lý danh mục sản phẩm có trên hệ thống

Basic Flow 16 Người dùng truy cập vào trang hệ thống quản trị web

19 Hệ thống thông báo đăng nhập thành công và chuyển đến trang quản trị

20 Người dùng chọn danh mục sản phẩm

21 Người dùng chọn nút thêm danh mục sản phẩm

22 Người dùng nhập thông tin danh mục sản phẩm và chọn nút thêm

23 Hệ thống xác nhận và thông báo thêm danh mục sản phẩm thành công

24 Người dùng chọn nút cập nhật danh mục sản phẩm

25 Người dùng nhập thông tin danh mục sản phẩm và chọn nút cập nhật

26 Hệ thống xác nhận và thông báo cập nhật danh mục sản phẩm thành công

27 Người dùng chọn nút xóa danh mục sản phẩm

28 Hệ thống thông báo người dùng có muốn xóa danh mục sản phẩm

30 Hệ thống xác nhận và thông báo xóa danh mục sản phẩm thành công

3.3.16 Chức năng quản lý ngân hàng câu hỏi (Admin)

Hình 3.20: Usecase chức năng quản lý ngân hàng câu hỏi (Admin)

Bảng 3.3.16: Bảng mô tả chức năng quản lý ngân hàng câu hỏi (Admin)

Use Case Name Quản lý ngân hàng câu hỏi

Description Là Admin tôi muốn quản lý ngân hàng câu hỏi của chatbot

Priority Người dùng phải đăng nhập vào hệ thống quản lý chatbot với quyền

Basic Flow 31 Người dùng truy cập vào trang hệ thống quản lý chatbot

34 Hệ thống thông báo đăng nhập thành công và chuyển đến trang quản lý

35 Người dùng chọn danh mục câu hỏi

36 Người dùng chọn nút thêm câu hỏi

37 Người dùng nhập thông tin câu hỏi và chọn nút thêm

38 Hệ thống xác nhận và thông báo thêm câu hỏi thành công

39 Người dùng chọn nút cập nhật câu hỏi

40 Người dùng nhập thông tin câu hỏi và chọn nút cập nhật

41 Hệ thống xác nhận và thông báo cập nhật câu hỏi thành công

42 Người dùng chọn nút xóa câu hỏi

43 Hệ thống thông báo người dùng có muốn xóa câu hỏi

45 Hệ thống xác nhận và thông báo xóa câu hỏi thành công

Lược đồ lớp dữ liệu

Hình 3.21: Lược đồ lớp dữ liệu

Hình 3.27: Bảng Product Advance Search

Các lược đồ tuần tự chính

- Lược đồ tuần tự cho hệ thống chính của trang web

Hình 3.36: Lược đồ tuần tự cho hệ thống chính của trang web

- Lược đồ tuần tự cho chức năng đăng ký (User)

Hình 3.37: Lược đồ tuần tự cho chức năng đăng ký (User)

- Lược đồ tuần tự cho chức năng đăng nhập (User)

Hình 3.38: Lược đồ tuần tự cho chức năng đăng nhập (User)

- Lược đồ tuần tự cho chức năng đăng nhập (Admin)

Hình 3.39: Lược đồ tuần tự cho chức năng đăng nhập (Admin)

- Lược đồ tuần tự cho chức năng thanh toán online (User)

Hình 3.40: Lược đồ tuần tự cho chức năng thanh toán online

THIẾT KẾ PHẦN MỀM

Thiết kế giao diện màn hình Admin

4.1.1 Giao diện đăng nhập (Admin)

Hình 4.1: Giao diện đăng nhập (Admin)

Bảng 4.1.1: Đặc tả giao diện đăng nhập (Admin)

STT Kiểu Mô tả/Ghi chú

4.1.2 Giao diện Menu quản lý

Hình 4.2: Giao diện Menu quản lý

Bảng 4.1.2: Đặc tả giao diện Menu quản lý

1 Button Quay trở về trang menu

2 Button Đến giao diện trang chủ phía user

3 Button Đến giao diện trang thay đổi mật khẩu

5 Button Đến giao diện user profile (tương tự với các mục còn lại trong khung đỏ)

6 Button Thêm user profile (tương tự với các mục còn lại trong khung đỏ)

7 Button Thay đổi thông tin user profile (tương tự với các mục còn lại trong khung đỏ)

8 Text Thông báo các hoạt động gần đây

4.1.3 Giao diện thay đổi mật khẩu

Hình 4.3: Giao diện thay đổi mật khẩu

Bảng 4.1.3: Đặc tả giao diện thay đổi mật khẩu

1 Input Nhập mật khẩu cũ

2 Input Nhập mật khẩu mới

3 Input Xác nhận lại mậu khẩu mới

4 Button Thay đổi mật khẩu

4.1.4 Giao diện quản lý User Profile

- Giao diện danh mục User Profile

Hình 4.4: Giao diện danh mục User Profile

Bảng 4.1.4.1: Đặc tả giao diện danh mục User Profile

2 Button Thực thi hành động được chọn

3 Button Đến giao diện chỉnh sửa user profile

5 Button Thêm mới user profile

- Giao diện chỉnh sửa User Profile

Hình 4.5: Giao diện chỉnh sửa User Profile

Bảng 4.1.4.2: Đặc tả giao diện chỉnh sửa User Profile

8 Checkbox Xóa hình được chọn

9 Button Chọn tệp hình ảnh

11 Button Lưu và thêm mới

12 Button Lưu và tiếp tục chỉnh sửa

- Giao diện thêm mới User Profile

Hình 4.6: Giao diện thêm mới User Profile

Bảng 4.1.4.3: Bảng đặc tả giao diện thêm mới User Profile

- Giao diện danh sách User

Hình 4.7: Giao diện danh sách User

Bảng 4.1.5.1: Đặc tả giao diện danh sách User

4 Button Thực thi hành động

5 Button Đến trang chỉnh sửa thông tin user

- Giao diện chỉnh sửa thông tin User

Hình 4.8: Giao diện chỉnh sửa thông tin User

Bảng 4.1.5.2: Đặc tả giao diện chỉnh sửa thông tin User

5 Button Xem lịch sử cập nhật

6 Checkbox Tình trạng user active

7 Checkbox Tình trạng user phân quyển staff

8 Checkbox Tình trạng user phân quyền admin

9 Input Bộ lọc group user được phân quyền

10 Button Chọn group user được phân quyền

11 Button Chọn tất cả group user được phân quyền

12 Button Chuyển group user được chọn qua lại 2 bảng

13 Button Xóa group user được chọn

14 Button Xóa tất cả group user được chọn

16 Input Bộ lọc user được phân quyền

17 Button Chọn user được phân quyền

18 Button Chọn tất cả user được phân quyền

19 Button Chuyển user được chọn qua lại 2 bảng

20 Button Xóa user phân quyền được chọn

21 Button Xóa tất cả user phân quyền được chọn

22 Input Nhập ngày tháng năm

23 Button Chọn ngày hiện tại

26 Button Chọn giờ hiện tại

27 Button Chọn mốc thời gian

- Giao diện thêm mới User

Hình 4.9: Giao diện thêm mới User

Bảng 4.1.5.3: Đặc tả giao diện thêm mới User

- Giao diện danh sách Store Address

Hình 4.10: Giao diện danh sách Store Address

Bảng 4.1.6.1: Đặc tả giao diện danh sách Store Address

3 Button Đến giao diện chỉnh sửa thông tin cửa hàng

5 Button Thêm mới cửa hàng

- Giao diện chỉnh sửa thông tin Store Address

Hình 4.11: Giao diện chỉnh sửa thông tin Store Address

Bảng 4.1.6.2: Đặc tả giao diện chỉnh sửa thông tin Store Address

1 Input Nhập tên cửa hàng

2 Input Nhập mã cửa hàng

5 Input Nhập giá trị bảo hiểm

6 Input Chiều dài sản phẩm trong đơn hàng

7 Input Chiều rộng sản phẩm trong đơn hàng

8 Input Chiều cao sản phẩm trong đơn hàng

9 Input Khối lượng sản phẩm trong đơn hàng

- Giao diện thêm mới Store Address

Hình 4.12: Giao diện thêm mới Store Address

Bảng 4.1.6.3: Đặc tả giao diệm thêm mới Store Address

1 Input Nhập tên cửa hàng

2 Input Nhập mã cửa hàng

5 Input Nhập giá trị bảo hiểm

6 Input Chiều dài sản phẩm trong đơn hàng

7 Input Chiều rộng sản phẩm trong đơn hàng

8 Input Chiều cao sản phẩm trong đơn hàng

9 Input Khối lượng sản phẩm trong đơn hàng

- Giao diện danh sách Orders

Hình 4.13: Giao diện danh sách Orders

Bảng 4.1.7.1: Đặc tả giao diện danh sách Orders

3 Button Đến giao diện chỉnh sửa thông tin đơn hàng

5 Button Thêm mới đơn hàng

- Giao diện chỉnh sửa thông tin Orders

Hình 4.14: Giao diện chỉnh sửa thông tin Orders

Bảng 4.1.7.2: Đặc tả giao diện chỉnh sửa thông tin Orders

1 Selection Chọn trạng thái đơn hàng

2 Selection Chọn trạng thái thanh toán

3 Input Nhập ghi chú đơn hàng

4 Text Thông tin đơn hàng

5 Button Thêm sản phẩm vào đơn hàng

- Giao diện sanh sách Shop Cart

Hình 4.15: Giao diện danh sách Shop Cart

Bảng 4.1.8.1: Đặc tả giao diện danh sách Shop Cart

3 Button Đến giao diện chỉnh sửa thông tin giỏ hàng

5 Button Thêm mới giỏ hàng

- Giao diện chỉnh sửa thông tin Shop Cart

Hình 4.16: Giao diện chỉnh sửa thông tin Shop Cart

Bảng 4.1.8.2: Đặc tả giao diện chỉnh sửa thông tin Shop Cart

2 Button Chỉnh sửa thông tin user

6 Button Chỉnh sửa thông tin sản phẩm

7 Button Thêm mới sản phẩm

9 Selection Chọn loại sản phẩm

10 Button Chỉnh sửa thông tin loại sản phẩm

11 Button Thêm mới loại sản phẩm

12 Button Xóa loại sản phẩm

- Giao diện thêm mới Shop Cart

Hình 4.17: Giao diện thêm mới Shop Cart

Bảng 4.1.8.3: Đặc tả giao diện thêm mới Shop Cart

2 Button Chỉnh sửa thông tin user

9 Selection Chọn loại sản phẩm

10 Button Chỉnh sửa thông tin loại sản phẩm

11 Button Thêm mới loại sản phẩm

12 Button Xóa loại sản phẩm

- Giao diện danh sách Banner

Hình 4.18: Giao diện danh sách Banner

Bảng 4.1.9.1: Đặc tả giao diện danh sách Banner

3 Button Đến giao diện chỉnh sửa thông tin banner

- Giao diện chỉnh sửa thông tin Banner

Hình 4.19: Giao diện chỉnh sửa thông tin Banner

Bảng 4.1.9.2: Đặc tả giao diện chỉnh sửa thông tin Banner

2 Button Thêm sản phẩm mới

6 Input Nhập tên đường dẫn đến banner

7 Button Xem lịch sử chỉnh sửa

8 Button Xem hiển thị bên trang web phía user

- Giao diện thêm mới Banner

Hình 4.20: Giao diện thêm mới Banner

Bảng 4.1.9.3: Đặc tả giao diện thêm mới Banner

2 Button Thêm sản phẩm mới

5 Input Nhập tên đường dẫn đến banner

- Giao diện danh sách Category

Hình 4.21: Giao diện danh sách Category

Bảng 4.1.10.1: Đặc tả giao diện danh sách Category

3 Button Đến giao diện chỉnh sửa thông tin category

5 Button Mở tất cả category

6 Button Đóng tất cả category

- Giao diện chỉnh sửa thông tin Category

Hình 4.22: Giao diện chỉnh sửa thông tin Category

Bảng 4.1.10.2: Đặc tả giao diện chỉnh sửa thông tin Category

1 Selection Chọn hãng sản phẩm

2 Button Thêm mới hãng sản phẩm

3 Input Nhập hãng sản phẩm

5 Selection Chọn tình trạng sản phẩm

6 Input Nhập tên đường dẫn đến category

8 Button Xem hiển thị bên trang web phía user

- Giao diện thêm mới Category

Hình 4.23: Giao diện thêm mới Category

Bảng 4.1.10.3: Đặc tả giao diện thêm mới Category

1 Selection Chọn hãng sản phẩm

2 Button Thêm mới hãng sản phẩm

3 Button Nhập hãng sản phẩm

5 Input Chọn tình trạng sản phẩm

6 Input Nhập tên đường dẫn đến category

- Giao diện danh sách Color

Hình 4.24: Giao diện danh sách Color

Bảng 4.1.11.1: Đặc tả giao diện danh sách Color

3 Button Đến giao diện chỉnh sửa thông tin color

- Giao diện chỉnh sửa thông tin Color

Hình 4.25: Giao diện chỉnh sửa thông tin Color

Bảng 4.1.11.2: Đặc tả giao diện chỉnh sửa thông tin Color

- Giao diện thêm mới Color

Hình 4.26: Giao diện thêm mới Color

Bảng 4.1.11.3: Đặc tả giao diện thêm mới Color

- Giao diện danh sách Compare

Hình 4.27: Giao diện danh sách Compare

Bảng 4.1.12.1: Đặc tả giao diện danh sách Compare

3 Button Đến giao diện chỉnh sửa thông tin so sánh

5 Button Thêm mới so sánh

- Giao diện chỉnh sửa thông tin Compare

Hình 4.28: Giao diện chỉnh sửa thông tin Compare

Bảng 4.1.12.2: Đặc tả giao diện chỉnh sửa thông tin Compare

3 Input Nhập thông tin so sánh

- Giao diện thêm mới Compare

Hình 4.29: Giao diện thêm mới Compare

Bảng 4.1.12.3: Đặc tả giao diện thêm mới Compare

3 Input Nhập thông tin so sánh

4.1.13 Giao diện Product Advance Search

- Giao diện danh sách Product Advance Search

Hình 4.30: Giao diện danh sách Product Advance Search

Bảng 4.1.13.1: Đặc tả giao diện danh sách Product Advance Search

3 Button Thêm mới tìm kiếm nâng cao

4 Checkbox Đến giao diện chỉnh sửa thông tin tìm kiếm nâng cao

5 Button Chọn tìm kiếm nâng cao

- Giao diện chỉnh sửa thông tin Product Advance Search

Hình 4.31: Giao diện chỉnh sửa thông tin Product Advance Search

Bảng 4.1.13.2: Đặc tả giao diện chỉnh sửa thông tin Product Advance Search

4 Selection Chọn tình trạng camera slow motion

5 Selection Chọn tình trạng camera ai

6 Selection Chọn tình trạng camera 3d

7 Selection Chọn tình trạng camera beauty effect

8 Selection Chọn tình trạng camera optical zoom

9 Input Nhập dung lượng pin

10 Button Xóa tìm kiếm nâng cao

- Giao diện thêm mới Product Advance Search

Hình 4.32: Giao diện thêm mới Product Advance Search

Bảng 4.1.13.3: Đặc tả giao diện thêm mới Product Advance Search

4 Selection Chọn tình trạng camera slow motion

5 Selection Chọn tình trạng camera ai

6 Selection Chọn tình trạng camera 3d

7 Selection Chọn tình trạng camera beauty effect

8 Selection Chọn tình trạng camera optical zoom

- Giao diện danh sách Product

Hình 4.33: Giao diện danh sách Products

Bảng 4.1.14.1: Đặc tả giao diện danh sách Products

3 Button Đến giao diện chỉnh sửa thông tin sản phẩm

5 Button Chọn thêm sản phẩm mới

- Giao diện chỉnh sửa thông tin Products

Hình 4.34: Giao diện chỉnh sửa thông tin Products

Bảng 4.1.14.2: Đặc tả giao diện chỉnh sửa thông tin Products

3 Input Nhập tên sản phẩm

4 Input Nhập từ khóa tên sản phẩm

6 Checkbox Xóa hình ảnh sản phẩm

7 Button Chọn hình tệp ảnh

10 Input Nhập số lượng tối thiểu

13 Button Xem chỉnh sửa phía trang web người dùng

14 Input Nhập thông tin mô tả sản phẩm

15 Input Nhập đường dẫn đến sản phẩm

17 Selection Chọn tình trạng giảm giá

18 Input Nhập số tiền giảm giá

19 Input Nhập mã sản phẩm

20 Image Hình ảnh sản phẩm

21 Input Nhập tên hình ảnh sản phẩm

22 Checkbox Xóa hình ảnh hiện có

25 Button Thêm mới hình ảnh

31 Input Nhập mã hình ảnh

- Giao diện thêm mới Products

Hình 4.35: Giao diện thêm mới Products

Bảng 4.1.14.3: Đặc tả giao diện thêm mới Products

3 Input Nhập tên sản phẩm

4 Input Nhập từ khóa tên sản phẩm

6 Button Chọn hình tệp ảnh

9 Input Nhập số lượng tối thiểu

11 Input Nhập thông tin mô tả sản phẩm

13 Selection Chọn tình trạng giảm giá

14 Input Nhập số tiền giảm giá

15 Input Nhập mã sản phẩm

16 Input Nhập tên hình ảnh sản phẩm

25 Input Nhập mã hình ảnh

- Giao diện danh sách Size

Hình 4.36: Giao diện danh sách Size

Bảng 4.1.15.1: Đặc tả giao diện danh sách Size

3 Button Đến giao diện chỉnh sửa thông tin size

5 Button Chọn thêm mới size

- Giao diện chỉnh sửa thông tin Size

Hình 4.37: Giao diện chỉnh sửa thông tin Size

Bảng 4.1.15.2: Đặc tả giao diện chỉnh sửa thông tin Size

- Giao diện thêm mới Size

Hình 4.38: Giao diện thêm mới Size

Bảng 4.1.15.3: Đặc tả giao diện thêm mới size

- Giao diện danh sách Variants

Hình 4.39: Giao diện danh sách Variants

Bảng 4.1.16.1: Đặc tả giao diện danh sách Variants

3 Button Đến giao diện chỉnh sửa thông tin variant

5 Button Chọn thêm mới variant

- Giao diện chỉnh sửa thông tin Variants

Hình 4.40: Giao diện chỉnh sửa thông tin Variants

Bảng 4.1.16.2: Đặc tả giao diện chỉnh sửa thông tin Variants

4 Button Thêm mới thông tin sản phẩm

7 Input Nhập id hình ảnh

- Giao diện thêm mới Variants

Hình 4.41: Giao diện thêm mới Variants

Bảng 4.1.16.3: Đặc tả giao diện thêm mới Variants

3 Button Thêm mới thông tin sản phẩm

6 Input Nhập id hình ảnh

4.1.17 Giao diện quản lý Chatbot

- Giao diện kịch bản chat

Hình 4.42: Giao diện kịch bản chat

Bảng 4.1.17.1: Đặc tả giao diện kịch bản chat

3 Button Cài đặt các biến và hằng số

6 Button Xem và chỉnh sửa kịch bản

7 Button Thêm kịch bản mới

8 Button Xem sơ đồ kịch bản

9 Button Huấn luyện bot với kịch bản hiện có

10 Input Chỉnh sửa tên bước

11 Button Copy bước và tên bước

13 Text Thể hiện các câu mẫu

14 Button Xem thêm câu mẫu

Bảng 4.1.17.2: Đặc tả giao diện ý định

4 Button Kiểm tra ý định bằng xử lý ngôn ngữ tự nhiên

5 Input Nhập tên ý định cần tìm kiếm

9 Button Đến giao diện câu mẫu

Hình 4.44: Giao diện câu mẫu

Bảng 4.1.17.3: Đặc tả giao diện câu mẫu

2 Button Nhập câu mẫu từ file excel

3 Button Xóa tất cả câu mẫu

4 Button Huấn luyện cạu mẫu cho bot

5 Button Kiểm tra câu mẫu bằng xử lý ngôn ngữ tự nhiên

7 Input Tìm kiếm thực thể

8 Input Tìm kiếm câu mẫu

11 Text Hiện danh sách câu mẫu

12 Button Chỉnh sửa câu mẫu

Thiết kế giao diện màn hình người dùng cuối

4.2.1 Giao diện đăng nhập/đăng ký

Hình 4.45: Giao diện đăng nhập

Bảng 4.2.1.1: Đặc tả giao diện đăng nhập

4 Button Đến giao diện quên mật khẩu

5 Button Đăng nhập với Facebook

6 Button Đăng nhập với Google

7 Button Đến giao diện đăng ký

Hình 4.46: Giao diện đăng ký

Bảng 4.2.1.2: Đặc tả giao diện đăng ký

5 Button Đăng ký tài khoản

6 Button Đến trang đăng nhập

7 Button Đến trang quên mật khẩu

Hình 4.47: Giao diện trang chủ

Bảng 4.2.1: Đặc tả giao diện trang chủ

1 Button Quay trở về trang chủ

2 Input Nhập thông tin tìm kiếm

3 Button Tìm kiếm sản phẩm

4 Button Đến giao diện thông tin cá nhân

5 Button Đến giao diện giỏ hàng

6 Selection Chọn danh mục sản phẩm

7 Button Đến giao diện sản phẩm chi tiết được chọn

4.2.3 Giao diện thông tin cá nhân

Hình 4.48: Giao diện thông tin cá nhân

Bảng 4.2.2: Đặc tả giao diện thông tin cá nhân

1 Button Đến giao diện chỉnh sửa thông tin

2 Button Đến giao diện thay đổi mật khẩu

3 Button Quay lại trang thông tin cá nhân

4 Button Đến giao diện danh sách đơn đặt hàng

5 Button Đến giao diện bình luận

6 Button Đến giao diện sản phẩm yêu thích

7 Button Đăng xuất khỏi tài khoản và quay lại trang chủ

8 Text Thông tin chi tiết tài khoản

4.2.4 Giao diện chỉnh sửa thông tin cá nhân

Hình 4.49: Giao diện chỉnh sửa thông tin cá nhân

Bảng 4.2.3: Đặc tả giao diện chỉnh sửa thông tin cá nhân

1 Button Chọn file hình ảnh

4 Input Nhập số điện thoại

7 Button Cập nhật thông tin mới nhập

4.2.5 Giao diện danh sách đơn đặt hàng

Hình 4.50: Giao diện trang đặt hàng

Bảng 4.2.4: Đặc tả giao diện trang đặt hàng

1 Button Quay lại trang chủ

2 Button Quay lại trang danh sách đơn đặt hàng

3 Text Danh sách đơn hàng

4 Button Đến giao diện đơn hàng chi tiết

4.2.6 Giao diện đơn hàng chi tiết

Hình 4.51: Giao diện đơn hàng chi tiết

Bảng 4.2.5: Đặc tả giao diện đơn hàng chi tiết

1 Button Quay lại trang chủ

2 Button Quay lại trang danh sách đơn đặt hàng

3 Text Thông tin chi tiết đơn hàng

4.2.7 Giao diện danh mục sản phẩm

Hình 4.2.7: Giao diện danh mục sảnh phẩm

Hình 4.52: Đặc tả giao diện danh mục sản phẩm

1 Selection Chọn sắp xếp sản phẩm theo mục

2 Checkbox Chọn bộ lọc sản phẩm theo mục

4.2.8 Giao diện sản phẩm chi tiết

Hình 4.53: Giao diện sản phẩm chi tiết

Bảng 4.2.6: Đặc tả giao diện sản phẩm chi tiết

1 Image Hình ảnh chi tiết sản phẩm

3 Text Thông tin đánh giá sản phẩm

4 Selection Chọn dung lượng sản phẩm

5 Checkbox Chọn màu sắc sản phẩm

6 Text Thông tin sản phẩm

7 Input Nhập số lượng sản phẩm

8 Button Thêm sản phẩm vào giỏ hàng

9 Button Chuyển đến mục thông tin nổi bật

10 Button Chuyển đến mục bình luận và đánh giá

11 Button Chuyển đến mục so sánh sản phẩm

12 Text Thông tin nổi bật của sản phẩm

13 Text Thông số kỹ thuật của sản phẩm

14 Image Hình ảnh thông tin nổi bật của sản phẩm

15 Button Xem thông số kỹ thuật chi tiết

16 Image Hình ảnh thông só kỹ thuật chi tiết của sản phẩm

17 Text Thông số kỹ thuật chi tiết của sản phẩm

18 Button Thoát khỏi giao diện thông số kỹ thuật chi tiết

4.2.9 Giao diện bình luận và đánh giá sản phẩm

Hình 4.54: Giao diện bình luận và đánh giá sản phẩm

Bảng 4.2.7: Đặc tả giao diện bình luận và đánh giá sản phẩm

1 Button Chuyển đến mục thông tin nổi bật

2 Button Chuyển đến mục bình luận và đánh giá

3 Button Chuyển đến mục so sánh sản phẩm

-Giao diện giỏ hàng không có sản phẩm

Hình 4.55: Giao diện giỏ hàng không có sản phẩm

Bảng 4.2.8.1: Đặc tả giao diện giỏ hàng không có sản phẩm

1 Button Quay về trang chủ

2 Text Thông báo không có sản phẩm trong giỏ

Hình 4.56: Giao diện giỏ hàng khi có hàng

Bảng 4.2.9.2: Đặc tả giao diện giỏ hàng khi có hàng

3 Button Xóa sản phẩm khỏi giỏ hàng

4 Button Đến giao diện đặt hàng offline

5 Button Đến giao diện đặt hàng online

4.2.11 Giao diện thanh toán offline

Hình 4.57: Giao diện thanh toán offline

Bảng 4.2.10: Đặc tả giao diện thanh toán offline

4.2.12 Giao diện thanh toán online

Hình 4.58: Giao diện thanh toán online

Bảng 4.2.11: Đặc tả giao diện thanh toán online

12 Selection Chọn loại hàng hóa

13 Text Mã hóa đơn hàng

14 Text Số tiền đơn hàng (chưa tính phí ship)

15 Input Nội dung thanh toán

16 Selection Danh sách ngân hàng

17 Selection Danh sách ngôn ngữ

20 Text Tổng tiền thanh toán

4.2.13 Giao diện thanh toán thành công (offline/online)

Hình 4.59: Giao diện thanh toán thành công

Bảng 4.2.12: Đặc tả giao diện thanh toán thành công

2 Text Thông báo đặt hàng thành công kèm thông tin đơn hàng

4.2.14 Giao diện thay đổi mật khẩu

Hình 4.60: Giao diện thay đổi mật khẩu

Bảng 4.2.13: Đặc tả giao diện thay đổi mật khẩu

1 Input Nhập mật khẩu cũ

2 Input Nhập mật khẩu mới

3 Input Xác nhận lại mật khẩu mới

- Giao diện Chatbot khi chuẩn bị vào chat

Hình 4.61: Giao diện Chatbot khi chuẩn bị vào chat

Bảng 4.2.14.1: Đặc tả giao diện Chatbot khi chuẩn bị vào chat

2 Button Phóng to màn hình chat

- Giao diện Chatbot khi đang chat

Hình 4.62: Giao diện Chatbot khi đang chat

Bảng 4.2.15.2: Đặc tả giao diện Chatbot khi đang chat

1 Text Bong bóng chat của người dùng

2 Text Bong bóng chat trả lời của chatbot

5 Button Mở/đóng khung chat

6 Button Phóng to khung chat

CÀI ĐẶT VÀ KIỂM THỬ

Tiêu đề	Xây Dựng Website Bán Điện Thoại Di Động
Trường học	khoa đào tạo chất lượng cao
Chuyên ngành	công nghệ thông tin
Thể loại	đồ án tốt nghiệp

Định dạng
Số trang	136
Dung lượng	6,32 MB

Tài liệu tham khảo	Loại	Chi tiết
[1] Minh Do. (26/02/2018) Python cơ bản với Django Framework: https://viblo.asia/p/python-co-ban-voi-django-framework-Ljy5VxGkZra [2] Django documentation (n.d.): https://docs.djangoproject.com/en/3.2/	Link
[3] Giới thiệu SQLite3 và thực hành lệnh SQLite (n.d.): https://xuanthulab.net/gioi- thieu-sqlite-va-thuc-hanh-lenh-sql.html	Link
[4] Lập trình web với Python bằng Django (2017): https://www.howkteam.vn/course/lap-trinh-web-voi-python-bang-django-36 [5] Bootstrap (n.d.): https://getbootstrap.com/	Link
[6] Dương Mạnh Đăng. (5/01/2019) Sử dụng API Giao hàng Nhanh để tính giá cước vận chuyển: https://viblo.asia/p/su-dung-api-giao-hang-nhanh-de-tinh-gia-cuoc-van-chuyen-1Je5EQB45nL	Link
[7] API Giao hàng tiết kiệm để tính giá cước vận chuyển (n.d.): https://docs.giaohangtietkiem.vn/#version-1-6-2	Link
[8] NỀN TẢNG TRÍ TUỆ NHÂN TẠO TOÀN DIỆN \| FPT.AI (n.d): https://fpt.ai/vi	Link