Xây dựng website quản lí và hỗ trợ của hàng bán giày

TỔNG QUAN

Lý do chọn đề tài

Trong bối cảnh cuộc sống hiện đại, ngành công nghệ thông tin đang phát triển nhanh chóng với nhiều công nghệ và ứng dụng mới xuất hiện hàng ngày Một trong những ứng dụng phổ biến mà mọi người đều sử dụng là trang web, đặc biệt là trang web bán hàng Với nhu cầu mua sắm ngày càng cao, doanh nghiệp cần đầu tư vào một trang web đầy đủ tính năng để người dùng có thể dễ dàng tiếp cận sản phẩm và thông tin giá cả Có nhiều ngôn ngữ lập trình để xây dựng trang web như Java, PHP, C#, nhưng nhóm chúng tôi sẽ sử dụng ExpressJS và NextJS, những công nghệ đang được ưa chuộng trong lĩnh vực lập trình web Việc ứng dụng ExpressJS và NextJS trong phát triển website bán hàng sẽ mang lại trải nghiệm mua sắm trực tuyến tiện lợi và nhanh chóng, giúp khách hàng có thể mua sắm mọi lúc, mọi nơi chỉ với vài thao tác đơn giản.

1.2 Mục đích, nhiệm vụ của đề tài

1.2.1 Mục đích Đề tài tập trung nghiên cứu ứng dụng ExpressJS, NextJS và sự ảnh hưởng của nó đến sự phát triển của ngành lập trình web hiện nay Hơn nữa việc nghiên cứu về nó sẽ giúp nhóm em hiểu rõ hơn về ngôn ngữ lập trình mà nhóm đã chọn

+ Tìm hiểu ExpressJS và NextJS

+ Tuân thủ nghiệp vụ của một lập trình viên: Giải quyết vấn đề, tiếp nhận ý kiến khách hàng, làm việc nhóm, code có chú thích

+ Phát triển ứng dụng web với các chức năng: mua bán sản phẩm, thêm sản phẩm mới, thống kê, lập thành viên

Nhóm em đã nghiên cứu nhiều tài liệu tiếng Anh và tiếng Việt trên mạng về công nghệ đã chọn, tìm hiểu cách thức hoạt động của nó Sau khi nắm rõ kiến thức, nhóm tiến hành viết mã và áp dụng vào thực tế để phát triển một sản phẩm website bán hàng hoàn chỉnh.

Một trang web bán hàng sử dụng ExpressJS và NextJS

Hình 1.1 Trang web bán hàng

Sử dụng framework NextJS dựa trên ReactJS cho phần front end, chúng tôi phát triển các giao diện tương tác với người dùng bao gồm trang chủ, trang thêm sản phẩm, trang chi tiết sản phẩm, trang thống kê, trang thanh toán, trang xóa sản phẩm, trang admin và giỏ hàng.

Back end: Sử dụng Framwork của NodeJS là ExpressJS.

CƠ SỞ LÝ THUYẾT

Giới thiệu về ReactJS

ReactJS, được phát triển bởi Jordan Walke, một kỹ sư phần mềm tại Facebook, lần đầu tiên được triển khai trên newsfeed của Facebook vào năm 2011 và sau đó được áp dụng trên Instagram.com vào năm 2012.

- Là một library Javascript để xây dựng giao diện người dùng (UI) giành riêng cho các trang Single Page Application (SPA)

React là một thư viện mạnh mẽ cho phép các nhà phát triển xây dựng các ứng dụng web lớn, giúp thay đổi dữ liệu mà không cần tải lại trang Với mục tiêu chính là nhanh chóng, dễ mở rộng và đơn giản, React tập trung vào giao diện người dùng trong ứng dụng, tương ứng với mô hình MVC Nó cũng có thể kết hợp với các thư viện hoặc framework JavaScript khác, như Angular JS, để tối ưu hóa hiệu suất và khả năng phát triển.

2.1.2 Các tính năng của ReactJS

Trong React, JSX được sử dụng thay vì JavaScript thông thường để tạo khuôn mẫu, cho phép trích dẫn HTML và sử dụng cú pháp thẻ HTML để hiển thị các thành phần con Cú pháp HTML trong JSX được chuyển đổi thành các lệnh gọi JavaScript của React Framework, mặc dù cũng có thể viết bằng JavaScript thuần túy.

React Native là một thư viện được Facebook giới thiệu vào năm 2015, cung cấp kiến trúc phản ứng cho các ứng dụng gốc trên các nền tảng như iOS, Android và UPD.

Virtual Document Object Model (VDOM) trong React tạo ra một bộ đệm cấu trúc dữ liệu trong bộ nhớ, giúp tính toán các thay đổi và cập nhật trình duyệt hiệu quả Tính năng này cho phép lập trình viên phát triển ứng dụng một cách linh hoạt, như thể họ đang làm việc với toàn bộ trang web.

5 được hiển thị trên mỗi thay đổi trong đó thư viện phản ứng chỉ hiển thị các thành phần thực sự thay đổi

Hình 2.1 Mô tả Virtual DOM trong ReactJs 2.1.3 Tại sao nên sử dụng ReactJS?

- Render phía Server giúp cải thiện việc tải trang và tối ưu trong SEO

ReactJS nổi bật với tính đơn giản, cho phép người dùng nhanh chóng nắm bắt và áp dụng Với cách tiếp cận dựa trên thành phần và vòng đời rõ ràng, cùng với việc sử dụng JavaScript đơn giản, React trở thành một công cụ lý tưởng để xây dựng các trang web chuyên nghiệp và ứng dụng di động Đặc biệt, React sử dụng cú pháp JSX, cho phép kết hợp HTML và JavaScript một cách dễ dàng, mặc dù các nhà phát triển vẫn có thể viết bằng JavaScript thuần túy nếu họ muốn.

React là một thư viện dễ học, phù hợp cho những ai đã có kiến thức cơ bản về lập trình So với Angular và Ember, vốn được xem là "ngôn ngữ cụ thể của miền" và khó tiếp cận, React chỉ yêu cầu người học nắm vững kiến thức cơ bản về CSS và HTML để có thể hiểu và sử dụng hiệu quả.

Ràng buộc dữ liệu trong React kết hợp với Redux giúp kiểm soát luồng dữ liệu đến các thành phần thông qua bộ điều phối Điều này không chỉ tăng cường khả năng quản lý dữ liệu mà còn làm cho việc gỡ lỗi các thành phần độc lập trong các ứng dụng ReactJS lớn trở nên dễ dàng hơn.

ReactJS applications are incredibly easy to test due to their architecture React views can be treated as stateful functions, allowing developers to manipulate the state passed to these views and observe the output, triggered actions, events, and functions effectively.

Giới thiệu về NextJS

- Là một framework nhỏ gọn giúp xây dựng ứng dụng Single Page App - Server Side Rendering với ReactJs một cách dễ dàng

2.2.2 Tại sao sử dụng NextJS?

- Server Rendering: Với Next.js, việc hiển thị máy chủ các ứng dụng React chưa bao giờ dễ dàng hơn, bất kể dữ liệu đến từ đâu

- Static Exporting: Không cần phải học một framework mới Xuất một trang web tĩnh với Next.js dễ dàng như một lệnh đơn

- CSS in JS: Next.js đi kèm với style-jsx đi kèm, nhưng nó cũng hoạt động với mọi giải pháp CSS-in-JS

- Zero setup: Tự động tách mã, định tuyến dựa trên hệ thống tập tin, tải lại mã nóng và kết xuất phổ quát

- Fully extensible: Hoàn toàn kiểm soát Babel và Webpack Máy chủ có thể tùy chỉnh, định tuyến và các plugin tiếp theo

- Ready for production: Tối ưu hóa cho kích thước xây dựng nhỏ hơn, biên dịch dev nhanh hơn và hàng tá cải tiến khác

- Hot code reloading: Sẽ tự động tải trang khi phát hiện bất cứ thay đổi nào

- Automatic Routing: Các file, URL được đưa vào hệ thống trong thư mục pages sẽ được tự động map với project mà không cần thêm bất kỳ config nào

- Ecosystem Compatibility: Hoạt động tốt với hệ sinh thái của Javascript , Nodejs,

- Dynamic Components: Có thể import các modules và React Component một cách linh hoạt.

Giới thiệu về NodeJS

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine, utilizing an event-driven, non-blocking I/O model that makes it lightweight and efficient.

- V8 engine là một JavaScript engine mã nguồn mở chạy trên các trình duyệt Chrome, Opera và Vivaldi

- Nodejs được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa Kỳ

- Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên cho tốc độ xử lý và hiệu năng khá cao

- Nodejs tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực

Node.js là lựa chọn lý tưởng cho các sản phẩm có lưu lượng truy cập cao, yêu cầu khả năng mở rộng nhanh chóng, cần đổi mới công nghệ, hoặc để phát triển các dự án khởi nghiệp một cách nhanh nhất.

2.3.2 Những ứng dụng viết bằng NodeJS

- Websocket server: Các máy chủ web socket như là Online Chat, Game Server…

- Fast File Upload Client: là các chương trình upload file tốc độ cao

- Ad Server: Các máy chủ quảng cáo

- Cloud Services: Các dịch vụ đám mây

- RESTful API: đây là những ứng dụng mà được sử dụng cho các ứng dụng khác thông qua API

Các ứng dụng yêu cầu dữ liệu thời gian thực là rất đa dạng, và Node.js là một công cụ lý tưởng để phát triển chúng Khái niệm microservices cho phép chia nhỏ một ứng dụng lớn thành các dịch vụ nhỏ hơn, giúp tối ưu hóa hiệu suất và khả năng mở rộng Node.js hỗ trợ tốt cho việc kết nối và quản lý các microservices này, mang lại sự linh hoạt và hiệu quả trong quá trình phát triển ứng dụng.

Các ứng dụng Node.js được phát triển bằng JavaScript, một ngôn ngữ lập trình phổ biến Ryan Dahl, tác giả của JavaScript, cho biết: “JavaScript có những đặc điểm nổi bật, khác biệt với các ngôn ngữ lập trình động khác, đặc biệt là không có khái niệm về đa luồng; nó hoàn toàn đơn luồng và hướng sự kiện.”

- Nodejs chạy đa nền tảng phía Server, sử dụng kiến trúc hướng sự kiện Event- driven, cơ chế non-blocking I/O làm cho nó nhẹ và hiệu quả

Node.js applications can be run on any platform, including Mac, Windows, and Linux, making it highly versatile The Node.js community is extensive and completely free, with a wide array of packages available at no cost You can explore the vastness of the Node.js community and access numerous free packages at [npmjs.com](https://www.npmjs.com/).

- Các ứng dụng NodeJS đáp ứng tốt thời gian thực và chạy đa nền tảng, đa thiết bị.

Giới thiệu về Framework ExpressJS

Express.js là một framework nhỏ gọn nhưng rất linh hoạt, được phát triển dựa trên nền tảng Node.js Nó mang lại nhiều tính năng mạnh mẽ, hỗ trợ hiệu quả cho việc phát triển ứng dụng web và di động.

- Về các package hỗ trợ: Expressjs có vô số các package hỗ trợ nên không phải lo lắng khi làm việc với Framework này

- Về performance: Express cung cấp thêm về các tính năng (feature) để dev lập trình tốt hơn Chứ không làm giảm tốc độ của NodeJS

- Và hơn hết, các Framework nổi tiếng của NodeJS hiện nay đều sử dụng ExpressJS như một core function, chẳng hạn: SailsJS, MEAN

- Các ưu điểm khi sử dụng express framework:

• Express hỗ trợ chúng ta phát triển ứng dụng theo mô hình MVC

• Cho phép định nghĩa các middleware

• Định nghĩa rõ ràng các request methods trong route

• Hỗ trợ mạnh về REST API

Hình 2.2 Cấu trúc ExpressJs Cấu trúc của ExpressJs:

- app.js: chứa các thông tin về cấu hình, khai báo, các định nghĩa, để ứng dụng của chúng ta chạy được

- package.json: chứa các package cho ứng dụng chạy

- Folder routes: chứa các route có trong ứng dụng

- Folder view: chứa view/template cho ứng dụng

- Folder public: chứa các file css, js, images cho ứng dụng

- Router trong express framwork là một bộ định tuyến giúp cho chúng ta định danh ra các url và hành động kèm theo nó

- VD: Ta định danh url có param lien-he.html thì thực hiện hành động trả về view liên hệ

- Cú pháp của router: app.method(path, handle);

• app: là biến mà khi khởi tạo express framework

• Method: là một trong các dạng http method sau: get,post,put,delete,head,path

• path: là thành phần phía sau domain mà chúng ta muốn xác định

Handle là hành động thực thi khi danh path được gọi, trong đó handle được hiểu là một hàm callback Biến req chứa tất cả thông tin yêu cầu mà người dùng gửi lên, trong khi biến res chứa tất cả thông tin mà server trả về cho client.

ExpressJS hoạt động thông qua một chuỗi các hàm Middleware được thực hiện liên tiếp Khi người dùng gửi request đến ExpressJS, các hàm Middleware sẽ lần lượt xử lý request cho đến khi trả về response Mỗi hàm Middleware có quyền truy cập vào các đối tượng đại diện cho Request (req), Response (res), hàm Middleware tiếp theo (next), và đối tượng lỗi (err) nếu cần thiết.

Một hàm Middleware cần gọi lệnh next() sau khi hoàn thành công việc của mình, nếu nó không phải là hàm cuối cùng trong chuỗi các hàm cần thực hiện Nếu không gọi lệnh này, quá trình sẽ bị treo tại hàm đó.

- Các chức năng mà middleware có thể thực hiện trong ExpressJS sẽ bao gồm :

• Thực hiện bất cứ đoạn code nào

• Thay đổi các đối tượng request và response

• Kết thúc một quá trình request-response

• Gọi hàm middleware tiếp theo trong stack

- Trong Express, có 5 kiểu middleware có thể sử dụng :

• Application-level middleware (middleware cấp ứng dụng)

• Router-level middleware (middlware cấp điều hướng – router)

• Error-handling middleware (middleware xử lý lỗi)

• Built-in middleware (middleware sẵn có)

• Third-party middleware (middleware của bên thứ ba)

Giới thiệu về MongoDB

2.5.1 Giới thiệu về cơ sở dữ liệu NoSQL

- NoSQL là một dạng cơ sở dữ liệu mã nguồn mở không sử dụng các câu lệnh T- SQL để truy vấn thông tin

- NoSQL viết tắt bởi: None-Relational SQL, hay có nơi thường gọi là Not-Only SQL

NoSQL cho phép mở rộng dữ liệu linh hoạt mà không cần lo lắng về khóa ngoại, khóa chính hay các công việc kiểm tra ràng buộc như trong hệ quản trị cơ sở dữ liệu truyền thống.

- Ưu điểm: NoSQL giải quyết được các vấn đề dữ liệu lớn (big data) về các hệ thống thông tin hoặc là phân tán dữ liệu

Mặc dù có nhiều ưu điểm, việc không giới hạn mở rộng dữ liệu cũng dẫn đến một số nhược điểm, bao gồm sự phụ thuộc vào từng bản ghi, tính nhất quán và đặc tính toàn vẹn dữ liệu.

MongoDB là một cơ sở dữ liệu mã nguồn mở sử dụng cơ chế NoSQL để truy vấn, được phát triển bằng ngôn ngữ C++ Nhờ vào việc sử dụng C++, MongoDB mang lại khả năng tính toán nhanh chóng và hiệu quả.

MongoDB là lựa chọn lý tưởng cho các ứng dụng từ tầm trung trở lên, đặc biệt khi tỉ lệ ghi dữ liệu vào cơ sở dữ liệu cao hơn so với lượng đọc.

- MongoDB là một CSDL có khả năng mở rộng, hiệu suất cao, mã nguồn mở và hướng văn bản

MongoDB sử dụng schema linh hoạt, cho phép lưu trữ dữ liệu dưới dạng Document JSON, do đó mỗi collection có thể chứa các document với kích cỡ và cấu trúc khác nhau.

Cấu trúc đối tượng trong dữ liệu rất rõ ràng, mặc dù có tính linh hoạt Đối tượng được xác định một cách cụ thể, giúp tăng tốc độ truy vấn nhờ vào việc sử dụng bộ nhớ nội tại.

• Không có các join: Điều này cũng góp phần tạo nên tốc độ truy vấn nhanh trên MongoDB

• MongoDB rất dễ mở rộng và phù hợp cho các ứng dụng realtime thời gian thực

MongoDB không có các tính chất ràng buộc như trong RDBMS, vì vậy khi làm việc với MongoDB, người dùng cần phải cẩn thận hơn trong quá trình thao tác dữ liệu.

MongoDB tiêu tốn nhiều tài nguyên hệ thống hơn so với RDBMS Tuy nhiên, hiện nay, điều này không còn là mối lo ngại vì hầu hết các máy tính đều có cấu hình cao.

- Một số trường hợp ứng dụng MongoDB:

• Khi website của chúng ta có tính chất INSERT cao, bởi vì mặc định MongoDB có sẵn cơ chế ghi với tốc độ cao và an toàn

Khi website hoạt động ở chế độ real-time, nhiều người có thể tương tác với ứng dụng cùng lúc, ví dụ như trong các ứng dụng chat hoặc livestream trực tuyến.

Khi làm việc với website có lượng dữ liệu lớn, chẳng hạn như ứng dụng web với 10 triệu bản ghi, việc truy vấn bằng MySQL có thể trở nên khó khăn Do đó, lựa chọn MongoDB là hợp lý, vì nó có khả năng tìm kiếm thông tin nhanh chóng và hiệu quả trong những trường hợp như vậy.

KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

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

Ngày nay, sự phát triển mạnh mẽ của công nghệ thông tin đã thúc đẩy nhu cầu trao đổi hàng hóa trong nền kinh tế toàn cầu hóa Các công ty công nghệ hàng đầu đang đầu tư vào giải pháp thương mại điện tử, giúp khách hàng dễ dàng mua sắm trực tuyến chỉ với vài cú click chuột Điều này cho thấy tầm quan trọng của thương mại điện tử, khi khách hàng có thể nhận hàng tận nhà mà không tốn nhiều thời gian Để thúc đẩy thương mại điện tử tại Việt Nam, nhóm chúng tôi đã phát triển website bán hàng trực tuyến chuyên về thiết bị điện tử như điện thoại, tivi, và máy ảnh Mặc dù công ty có bộ phận bảo trì website chuyên nghiệp, nhưng vẫn tồn tại một số rủi ro có thể ảnh hưởng đến trang web bán hàng.

● Rủi ro về hệ thống máy chủ server, tên miền

● Các lỗi về bảo mật web bị kẻ xấu trục lợi

● Lưu lượng người truy cập trong một thời điểm làm cho máy chủ bị tê liệt.

● Database thiếu đồng bộ dẫn đến tràn dữ liệu

● Chi phí duy trì tên miền và hệ thống

Để đối phó với các rủi ro đã nêu, bộ phận bảo trì website đã nhận thức được mức độ nguy hiểm và triển khai một số biện pháp nhằm phòng ngừa và giảm thiểu tác động tiêu cực đến trang web.

+ Tăng kinh phí cho việc bảo trì

+ Đăng kí các tên miền có độ bảo mật cao

+ Nhập server có tốc độ xử lý cao từ nước ngoài

+ Luôn tìm kiếm nguồn nhân lực chất lượng cao từ bên ngoài

+ Tiến hành hợp tác với nhiều công ty uy tín trong lĩnh vực thương mại điện tử để học hỏi kinh nghiệm

Tiêu chí hoạt động của cửa hàng là cung cấp sản phẩm đến tay người tiêu dùng với giá rẻ nhất thị trường, đồng thời đảm bảo chất lượng Giữ uy tín với khách hàng là phương châm cốt lõi trong việc phát triển thương hiệu của cửa hàng.

Công ty cam kết tuân thủ đầy đủ các quy định của nhà nước về kinh doanh online, bao gồm việc phát triển website theo quy trình nghiêm ngặt, đăng ký các chứng chỉ cần thiết và thực hiện nghĩa vụ thuế thu nhập.

Tiếp theo, nhóm chúng em sẽ tiến hành khảo sát ba website bán hàng phổ biến nhất Việt Nam được nhiều người sử dụng nhất hiện nay

Website Nguyenkim bao gồm trang chủ và nhiều danh mục con, cung cấp thông tin rõ ràng về sản phẩm Trang web còn có slide hiển thị các khuyến mãi hấp dẫn, banner quảng cáo cho các sự kiện nổi bật, cùng với khung tìm kiếm sản phẩm tiện lợi Ngoài ra, người dùng có thể dễ dàng quản lý giỏ hàng, thực hiện thanh toán và sử dụng các chức năng đăng nhập, đăng ký để trải nghiệm mua sắm tốt nhất.

Hình 3.2 Website thế giới di động

Website Thế Giới Di Động bao gồm trang chủ, các danh mục bán hàng điện thoại, phụ kiện và khuyến mãi Ngoài ra, website còn cung cấp chức năng chăm sóc khách hàng và tích hợp chatbot để hỗ trợ người dùng.

Lazada là một trang web thương mại điện tử nổi bật, cung cấp trải nghiệm mua sắm trực tuyến tiện lợi với giao diện dễ sử dụng Người dùng có thể dễ dàng tìm kiếm sản phẩm qua catalog phong phú, sử dụng chatbot hỗ trợ và thực hiện thanh toán nhanh chóng với giỏ hàng tiện lợi.

Ngoài Thế giới di động và Lazada, nhóm em đã khảo sát website Tiki, một trong những trang web bán sách lớn nhất hiện nay Tiki sở hữu các chức năng cơ bản của một trang thương mại điện tử như giỏ hàng, tìm kiếm và danh mục sản phẩm.

Người dùng mong muốn một trang web ổn định, mượt mà, dễ sử dụng và thân thiện, với ít quảng cáo, cho phép đăng ký thành viên và bảo mật quyền riêng tư Họ yêu cầu thanh toán online an toàn, thông tin sản phẩm chính xác và đa dạng từ nhiều công ty khác nhau Đối với công ty, cần đảm bảo hệ thống hoạt động ổn định, cập nhật thông tin sản phẩm thường xuyên, quản lý đơn đặt hàng chặt chẽ và bảo mật thông tin khách hàng, đồng thời cung cấp thông báo về khuyến mãi và giảm giá kịp thời.

17 Để xây dựng cửa hàng bán thiết bị điện tử cần giải quyết nhiều vấn đề:

Chọn vị trí mở cửa hàng là yếu tố quyết định đến thành công hay thất bại của doanh nghiệp Để thu hồi vốn đầu tư và tạo lợi nhuận, cần lựa chọn địa điểm thuận lợi, nơi có đông người qua lại và tập trung nhiều khách hàng mục tiêu.

Bố trí cửa hàng không chỉ cần lựa chọn vị trí chiến lược mà còn phải thiết kế sao cho bắt mắt và thu hút khách hàng Việc xây dựng không gian cửa hàng cần phù hợp với quy mô và thể hiện rõ đặc điểm cũng như thương hiệu của cửa hàng, từ đó tạo ấn tượng mạnh mẽ và thu hút sự chú ý của người tiêu dùng.

Sắp xếp mặt hàng trong cửa hàng cần dựa vào không gian có sẵn để tối ưu hóa việc trưng bày Điều này không chỉ giúp dễ dàng quan sát mà còn thuận tiện cho việc thêm vào hoặc lấy ra sản phẩm.

Đầu tư về vốn là yếu tố quan trọng trong việc chi tiêu cho các hoạt động ban đầu như thuê địa điểm bán hàng, mua sắm trang trí, thuê nhân viên và mua sản phẩm mới Người chủ cửa hàng cần cân nhắc kỹ lưỡng để đảm bảo chi phí hợp lý Bên cạnh đó, đầu tư về thời gian và công sức cũng không kém phần quan trọng, bao gồm việc xây dựng và vận hành cửa hàng, cũng như cập nhật thông tin cho các sản phẩm mới.

Khoảng cách địa lý của cửa hàng mang lại lợi ích trong việc cung cấp cho khách hàng cái nhìn khách quan về sản phẩm, giúp họ dễ dàng nhận biết, cảm nhận và trải nghiệm sản phẩm Tuy nhiên, đối với khách hàng ở xa, việc tiếp cận cửa hàng trở nên khó khăn, dẫn đến việc họ phải tốn nhiều thời gian và chi phí cho việc di chuyển để giao dịch.

Khách hàng thường muốn chia sẻ ý kiến nhưng không muốn trực tiếp giao tiếp, dẫn đến khó khăn khi cửa hàng không có hòm thư góp ý.

Xác định yêu cầu

Hình 3.5 Lược đồ Use Case

3.2.2 Mô tả chức năng, kịch bản

Bảng 3.1 Mô tả quản lý khách hàng

Name Quản lý khách hàng

Brief description Nhân viên truy cập trang quản lý khách hàng

Post-conditions Nhân viên tiến hành xem xét thông tin khách hàng Nếu không có xự sai xót trong nhập liệu, nhân viên thoát ra màn hình chính

Nếu có sai xót, Nhân viên tiến hành sửa đổi trên form quản lý khách hàng

Basic flow Use case bắt đầu khi nhân viên bấm vào nút quản lý khách hàng

1 Hệ thống hiển thị trang quản lý khách hàng cho nhân viên

2 Nhân viên xem xét thông tin của khách hàng

3 Nhân viên sau khi xem thoát ra màn hình chính

Alternative flow Nếu nhân viên xem xét thấy thông tin khách hàng bị sai lệch hoặc không hợp lý, những công việc sau sẽ được thực hiện

1 Tiến hành sửa đổi trực tiếp trên form khách hàng

2 Nhân viên xem xét lại thông tin và tiến hành lưu

3 Thoát ra màn hình chính

Bảng 3.2 Mô tả quản lý nhân viên

Name Quản lý nhân viên

Brief description Admin truy cập trang quản lý nhân viên

Post-conditions Admin tiến hành xem xét thông tin nhân viên Nếu không có sự sai xót trong nhập liệu, thoát ra màn hình chính

Nếu có sai xót, Admin tiến hành sửa đổi trên form quản lý khách hàng

Basic flow Use case bắt đầu khi Admin bấm vào nút quản lý nhân viên

1 Hệ thống hiển thị trang quản lý nhân viên cho Admin

2 Admin xem xét thông tin của nhân viên

3 Admin sau khi xem thoát ra màn hình chính

Alternative flow Nếu admin xem xét thấy thông tin nhân viên bị sai lệch hoặc không hợp lý, những công việc sau được thực hiện

1 Admin tiến hành sửa đổi trực tiếp trên form quản lý nhân viên

2 Admin xem xét lại thông tin và tiến hành lưu

Bảng 3.3 Mô tả Quản lý sản phẩm

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

Brief description Nhân viên truy cập trang quản lý sản phẩm

Post-conditions Nhân viên tiến hành xem xét thông tin sản phẩm Nếu không có sự sai xót trong nhập liệu, nhân viên thoát ra màn hình chính

Nếu có sai xót, nhân viên tiến hành sửa đổi trên form sản phẩm

Basic flow Use case bắt đầu khi nhân viên bấm vào nút quản lý sản phẩm

1 Hệ thống hiển thị trang quản lý sản phẩm cho nhân viên

2 Nhân viên xem xét thông tin của sản phẩm

3 Nhân viên sau khi xem thoát ra màn hình chính

Alternative flow Nếu nhân viên xem xét thấy thông tin sản phẩm bị sai lệch hoặc không hợp lý Những công việc sau thực hiện:

1 Nhân viên tiến hành sửa đổi trực tiếp trên form

2 Nhân viên xem xét lại thông tin và tiến hành lưu

Bảng 3.4 Mô tả Thêm khách hàng

Brief description Nhân viên truy cập form Thêm khách hàng

Post-conditions Nhân viên tiến hành lấy thông tin khách hàng và thêm vào cơ sở dữ liệu

Basic flow Use case bắt đầu khi nhân viên bấm vào form Thêm khách hàng

1 Hệ thống hiển thị trang thêm khách hàng cho nhân viên tiến hành nhập thông tin

2 Hệ thống xem xét thông tin vừa nhập vào

3 Nhân viên tiến hành bấm lưu vào database

Alternative flow Nếu nhân viên nhập ngày, tháng, năm sinh không hợp lệ

Những công việc sau sẽ thực hiện:

1 Hệ thống gửi form báo lỗi nhập thông tin bị sai lệch, yêu cầu nhân viên nhập lại

2 Nhân viên xem xét lại thông tin và tiến hành nhập lại

3 Nhân viên lưu lại thông tin

4 Bước 2,3,4 tại basic flow được gọi

Bảng 3.5 Mô tả Thêm nhân viên

Brief description Admin truy cập form Thêm nhân viên

Sau khi tiếp nhận hồ sơ từ các nhân viên mới đã trải qua phỏng vấn, Admin sẽ tiến hành nhập thông tin nhân viên vào hệ thống và lưu trữ vào cơ sở dữ liệu.

Basic flow Use case bắt đầu khi Admin bấm vào form Thêm nhân viên

1 Hệ thống hiển thị trang thêm nhân viên cho Admin tiến hành nhập thông tin

3 Admin tiến hành bấm lưu vào database

Alternative flow Nếu Admin nhập ngày, tháng, năm sinh không hợp lệ

Những công việc sau sẽ được thực hiện:

1 Hệ thống gửi form báo lỗi nhập thông tin bị sai lệch, yêu cầu Admin nhập lại

2 Admin xem xét lại thông tin và tiến hành nhập lại

3 Admin lưu lại thông tin

Bảng 3.6 Mô tả thêm sản phẩm

Brief description Nhân viên truy cập form Thêm sản phẩm

Post-conditions Nhân viên sẽ nhập thông tin sản phẩm mới và lưu vào cơ sở dữ liệu

Basic flow Use case bắt đầu khi nhân viên bấm vào form Thêm sản phẩm

1 Hệ thống hiển thị trang thêm sản phẩm cho nhân viên tiến hành nhập thông tin

3 Nhân viên tiến hành bấm lưu vào database

Nếu nhân viên nhập thông tin sản phẩm không hợp lệ, chẳng hạn như mã sản phẩm hoặc tên sản phẩm bị trùng lặp, các bước xử lý tiếp theo sẽ được thực hiện để đảm bảo tính chính xác và hiệu quả trong quản lý sản phẩm.

1 Hệ thống gửi lỗi nhập sai thông tin, yêu cầu nhân viên nhập lại

2 Nhân viên xem xét lại thông tin và tiến hành nhập lại

3 Nhân viên lưu lại thông tin

Bảng 3.7 Mô tả đăng kí thành viên

Name Lập thẻ thành viên

Khách hàng đăng ký thành viên

Post-conditions Nếu đăng ký thành công, người dùng sẽ được gửi email thông báo thành công

Nếu thất bại, người dùng phải đăng ký lại

Basic flow Use case bắt đầu khi người dùng click vào nút đăng ký

1 Hệ thống hiển thị trang đăng ký thành viên cho người dùng nhập thông tin

2 Hệ thống kiểm tra thông tin người dùng nhập

3 Hệ thống xác thực gửi link kích hoạt tài khoản đến email người dùng

4 Hệ thống hiển thị trang chờ phản hồi, cho phép người dùng có thể thay đổi email kích hoạt

5 Khi click vào link sẽ được đưa đến trang đăng nhập của hệ thống

Alternative flow Nếu người dùng nhập trùng username, email và sử dụng mật khẩ u quá yếu Những công việc sau được thực hiện:

1 Hệ thống mô tả lý do không tạo được tài khoản

2 Hệ thống lưu ý người dùng nhập lại

3 Nếu người dùng nhập thông tin hợp lệ, bước 3 ở Basic flow được thực hiện

Bảng 3.8 Mô tả Mua sản phẩm

Description Khách hàng mua sản phẩm

Khi chọn mua sản phẩm bỏ hết vào giỏ hàng, khách hàng được chuy ển tới trang thanh toán

Basic flow Use case bắt đầu khi người dùng click vào thanh toán

1 Hệ thống hiển thị trang thanh toán cho người dùng nhập thông tin

2 Hệ thống kiểm tra thông tin khách hàng nhập

3 Thanh toán hợp lệ, người dùng bị trừ số tiền tương ứng với giá trị trong giỏ hàng

Nếu người dùng nhập thông tin cá nhân cũng như mã thẻ ngân hàng bị sai Những công việc sau được thực hiện:

1 Hệ thống mô tả lý do không mua được hàng

3 Nếu người dùng nhập thông tin hợp lệ, bước 2 ở Basic flow được thực hiện

Bảng 3.9 Mô tả Đổi trả sản phẩm

Brief description Khách hàng tiến hàng đổi trả hàng

Post-conditions Nếu đổi hàng thành công qua website, khách hàng sẽ tới cửa hàng để đổi trả

Nếu thất bại, khách hàng sẽ không được đổi hàng

Basic flow Use case bắt đầu khi người dùng click vào đổi trả hàng

Hệ thống hiển thị trang đổi trả hàng cho người dùng nhập thô ng tin

2 Hệ thống kiểm tra thông tin người dùng nhập

3 Nhân viên sẽ liên hệ lại với khách hàng thông qua số điện thoại

Alternative flow Nếu người dùng nhập sai mã sản phẩm Những công việc sau được thực hiện:

1 Hệ thống mô tả lý do không thể tiến hành đổi trả

3 Nếu người dùng nhập thông tin hợp lệ, bước 3 ở basic flow được thực hiện

Bảng 3.10 Mô tả Cập nhật Khách hàng

Name Cập nhật thông tin khách hàng

Brief description Nhân viên cập nhật thông tin khách hàng

Nhân viên cần cập nhật thông tin khách hàng của cửa hàng Nếu phát hiện thông tin không chính xác so với dữ liệu hệ thống, họ phải tiến hành chỉnh sửa lại cho đúng.

Basic flow Use case bắt đầu khi nhân viên nhấn vào nút cập nhật khách hàng

1 Hệ thống hiển thị toàn bộ thông tin của khách hàng

2 Nhân viên xem thật kĩ xem thông tin khách hàng có sai hay không

Alternative flow Nếu thông tin không đúng như trên dữ liệu hệ thống:

1 Nhân viên bấm vào nút edit bên cạnh Usecase cập nhật khách hàng

2 Nhân viên nhập thông tin lại

3 Nhân viên gửi thông tin về hệ thống

Bảng 3.11 Mô tả cập nhật thông tin nhân viên

Name Cập nhật thông tin nhân viên

Brief description Chủ cửa hàng cập nhật thông tin nhân viên

Post-conditions Admin tiến hành cập nhật thông tin nhân viên, nếu thông tin không đúng như trên dữ liệu hệ thống thì cập nhật lại

Basic flow Use case bắt đầu khi chủ cửa hàng nhấn vào nút cập nhật nhân viên

1 Hệ thống hiển thị toàn bộ thông tin của nhân viên

2 Chủ cửa hàng xem thật kĩ xem thông tin nhân viên có sai hay không

3 Nếu sửa thành công thì thông tin nhân viên được cập nhật lại

Alternative flow 4 Nếu thông tin không đúng như trên dữ liệu hệ thống:

5 1 Nhân viên bấm vào nút edit bên cạnh Usecase cập nhật khách hàng

6 2 Nhân viên nhập lại thông tin

Bảng 3.12 Mô tả Cập nhật sản phẩm

Name Cập nhật thông tin sản phẩm

Brief description Nhân viên kết xuất kho cập nhật thông tin sản phẩm

Actor(s) Nhân viên ở bộ phận kết xuất kho

Post-conditions Nhân viên tiến hành cập nhật thông tin sản phẩm, nếu thông tin sản phẩm bị sai thì cập nhật lại

Basic flow Use case bắt đầu khi chủ cửa hàng nhấn vào nút cập nhật nhân viên

1 Hệ thống hiển thị toàn bộ thông tin của sản phẩm

2 Nhân viên xem thật kĩ xem thông tin sản phẩm có sai hay không

3 Nếu sửa thành công thì thông tin được cập nhật lại

Alternative flow Nếu thông tin không đúng như trên dữ liệu hệ thống:

1 Nhân viên bấm vào nút edit bên cạnh Usecase cập nhật sản phẩm

2 Nhân viên nhập thông tin lại

3 Nhân viên gửi thông tin về hệ thống

Bảng 3.13 Mô tả Chăm sóc khách hàng

Name Chăm sóc khách hàng

Brief description Nhân viên giúp đỡ khách hàng

Post-conditions Nhân viên sẽ trả lời các câu hỏi của khách hàng thông qua ứng dụng chat messenger được tích hợp trên website

Basic flow Use case bắt đầu khi người dùng click vào biểu tượng messenger trên website

1 Hệ thống hiển thị trang phản hồi ý kiến người dùng

2 Người dùng sẽ nhập các thông tin cần hỏi để nhân viên có thể giúp đỡ

3 Nhân viên sẽ trả lời tất cả các câu hỏi của khách hàng

Bảng 3.14 Mô tả Thanh toán online

Brief description Khách hàng tiến hành thanh toán

Post-conditions Sau khi chọn được các sản phẩm cần mua cho vào giỏ hàng, khách hàng cần tiến hành thanh toán online thông qua cổng Pay Pal

Basic flow Use case bắt đầu khi Khách hàng click vào nút thanh toán

1.Hệ thống hiển thị trang thanh toán

2 Khách hàng nhập các thông tin cá nhân, mã thẻ vào form thanh toán

3 Hệ thống xác thực thông tin mà người dùng phản hồi về hệ thống

4 Hệ thống xác nhận khách hàng đã thanh toán

Alternative flow Nếu khách hàng nhập sai thông tin cá nhân hoặc tài khoản paypal, bước 2 ở basic flow sẽ được gọi lại

Bảng 3.15 Mô tả Quản lý đơn hàng

Name Quản lý đơn hàng

Brief description Khách hàng quản lý đơn hàng

Sau khi hoàn tất việc mua sắm, khách hàng có thể truy cập vào mục quản lý đơn hàng để kiểm tra tình trạng đơn hàng của mình, bao gồm việc xác nhận đơn hàng và tình trạng giao hàng đã thành công hay chưa.

Basic flow Use case bắt đầu khi Khách hàng đăng nhập thành công và sau đó click vào phần quản lý đơn hàng

1.Hệ thống hiển thị trang quản lý đơn hàng

2.Khách có thể xem tình trạng đơn hàng đã mua

Alternative flow Nếu khách hàng đăng nhập thất bại, sẽ quay lại bước đăng nhập lại

Bảng 3.16 Mô tả khách hàng cập nhật thông tin

Name Khách hàng cập nhật thông tin

Brief description Khách hàng cập nhật lại thông tin cá nhân

Post-conditions Khách hàng cập nhật thông tin cá nhân như địa chỉ, email, giới tính

Basic flow Use case bắt đầu khi khách hàng nhấn vào cập nhật thông tin

1 Hệ thống hiển thị toàn bộ thông tin của sản phẩm

2 Khách hàng cần nhập thông tin cần sửa đổi

3 Nếu sửa thành công thì thông tin được cập nhật lại

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

Thiết kế hệ thống

Hình 4.2 Admin bảo trì website

Hình 4.3 Admin thêm khách hàng

Hình 4.4 Admin cập nhật khách hàng

Hình 4.5 Admin xóa khách hàng

Hình 4.6 Admin thêm nhân viên

Hình 4.7 Admin cập nhật nhân viên

Hình 4.8 Admin xóa nhân viên

Hình 4.9 Admin tìm sản phẩm

Hình 4.10 Admin thêm sản phẩm

Hình 4.11 Admin cập nhật sản phẩm

Hình 4.12 Admin xóa sản phẩm

Hình 4.13 Nhân viên thêm khách hàng

Hình 4.14 Nhân viên cập nhật khách hàng

Hình 4.15 Nhân viên xóa khách hàng

Hình 4.16 Nhân viên tìm sản phẩm

Hình 4.17 Nhân viên thêm sản phẩm

Hình 4.18 Nhân viên cập nhật sản phẩm

Hình 4.19 Nhân viên xóa sản phẩm

Hình 4.20 Khách hàng đăng ký thành viên

Hình 4.21 Khách hàng tìm sản phẩm

Hình 4.22 Khách hàng mua sản phẩm

Hình 4.23 Khách hàng thanh toán

Hình 4.24 Khách hàng đổi trả sản phẩm

Thiết kế cơ sở dữ liệu

4.3.2 Lược đồ cơ sở dữ liệu

Bảng 4.3 Bảng dữ liệu Product

Column Name Data Type Allow Nulls Unique

The article outlines a product data structure that includes essential fields such as an identifier (_id), name, quantity, product code, product ID, unit price, promotional price, discount, short description, detailed description, status, image, type, category ID, and supplier ID These attributes provide a comprehensive overview of each product, facilitating better inventory management and sales tracking.

Bảng 4.4 Bảng dữ liệu User

_id (pk) String x email String x phone String x password String name String gender Number x birthday Date x role Number facebook_account String x google_account String x

Bảng 4.5 Bảng dữ liệu Order

The article outlines a database schema for managing orders, featuring key fields such as userId, orderId, name_contact, and status It includes contact details like email and phone, along with the shipping address The schema tracks delivery status and notes, while also recording the order date and total price Additionally, a comments section is provided for further customer feedback.

Bảng 4.6 Bảng dữ liệu Order Detail

_id (pk) String x orderId String x productId String quantity Number price Number

Bảng 4.7 Bảng dữ liệu Category

_id (pk) String x name String avatar String x status String categoryId String

Bảng 4.8 Bảng dữ liệu Supplier

Supplier_id String name String avatar String x status String

Bảng 4.9 Bảng dữ liệu Slide

_id (pk) String x image String

Bảng 4.10 Bảng dữ liệu Info

_id (pk) String x phone String address String email String logo String first_supplier String second_supplier String third_supplier String fourth_supplier String

Thiết kế giao diện

Hình 4.27 Giao diện trang đăng nhập Bảng 4.11 Mô tả giao diện trang đăng nhập

Stt Tên Kiểu Mô tả chi tiết

1 Email Input Nhập thông tin email

2 Password Input Nhập thông tin mật khẩu

3 Đăng nhập bằng tài khoản facebook

Button Nhấn vào để đăng nhập bằng tài khoản facebook

4 Login Button Nhấn để đăng nhập

Hình 4.28 Giao diện trang quản lý Bảng 4.12 Mô tả giao diện trang quản lý

1 Thanh tìm kiếm sản phẩm

Input Nhập tên sản phẩm để hiển thị các kết quả tương ứng

2 Tổng quán Nhấn để hiển thị trang các thông tin tổng quan

3 Nhân viên Nhấn để hiển thị trang các thông tin nhân viên

4 Khách hàng Nhấn để hiển thị trang các thông tin khách hàng

5 Thông tin Web Nhấn để hiển thị trang các thông tin website

Nhấn để hiển thị trang thông tin đặt hàng

7 Danh mục Nhấn để hiển thị trang các thông tin danh mục

8 Danh mục phụ Nhấn để hiển thị trang các danh mục phụ

9 Nhà cung cấp Nhấn để hiển thị trang thông tin các nhà cung cấp

10 Sản phẩm Nhấn để hiện thị trang thông tin các sản phẩm

11 Slide Nhấn để hiển thị trang thong tin các slide

12 Đăng xuất Nhấn để đăng xuất

Hình 4.29 Giao diện quản lý nhân viên Bảng 4.13 Mô tả giao diện quản lý nhân viên

1 Thêm mới Button Nhấn để tới trang đăng ký nhân viên

2 Chỉnh sửa Nhấn để chuyển đến trang chỉnh sửa thông tin nhân viên

3 Xóa Nhấn để xóa nhân viên

Hình 4.30 Giao diện thêm nhân viên Bảng 4.14 Mô tả giao diện thêm nhân viên

1 Họ và tên Input Nhập tên nhân viên

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

4 Mật khẩu Input Nhập mật khẩu

5 Xác nhận mật khẩu Input Xác nhận mật khẩu

6 Thêm mới Button Nhấn để tạo tài khoản nhân viên

Hình 4.31 Giao diện sửa nhân viên Bảng 4.15 Mô tả giao diện sửa nhân viên

1 Tên Input Nhập tên nhân viên

4 Ngày sinh Input Nhập thông tin ngày sinh

5 Giới tính Input Nhập thông tin giới tính

6 Địa chỉ Input Nhập thông tin địa chỉ

7 Ảnh đại diện Button Nhấn để chọn ảnh từ máy tinh

8 Cập nhật Button Nhấn để cập nhật thông tin nhân viên

Hình 4.32 Giao diện quản lý khách hàng Bảng 4.16 Mô tả giao diện quản lý khách hàng

1 Thêm mới Button Nhấn để chuyển đến trang thêm mới khách hàng

2 Chỉnh sửa Nhấn để chỉnh sửa thông tin khách hàng

3 Xóa Nhấn để xóa thông tin khách hàng

Hình 4.33 Giao diện tạo tài khoản khách hàng

Bảng 4.17 Mô tả giao diện tạo tài khoản khách hàng

1 Tên Input Nhập tên khách hàng

4 Ngày sinh Input Nhập thông tin ngày sinh

5 Giới tính Input Nhập thông tin giới tính

6 Địa chỉ Input Nhập thông tin địa chỉ

7 Ảnh đại diện Button Nhấn để chọn ảnh từ máy tinh

8 Đăng ký khách hàng Button Nhấn để đăng ký thông tin khách hàng

Hình 4.34 Giao diện quản lý danh mục Bảng 4.18 Mô tả giao diện quản lý danh mục

1 Thêm mới Button Nhấn để chuyển đến trang thêm mới danh mục

2 Chỉnh sửa Nhấn để chỉnh sửa thông tin danh mục

3 Xóa Nhấn để xóa thông tin danh muc

Hình 4.35 Giao diện thêm mới danh mục Bảng 4.19 Mô tả giao diện thêm mới danh mục

1 Tên danh mục Input Nhập tên danh mục

2 Hình đại diện Input Nhập class icon của font-awesome

3 Trạng thái Input Nhập trạng thái của danh mục

4 Thêm mới Button Nhấn để tiến hành thêm mới

Hình 4.36 Giao diện cập nhật danh mục Bảng 4.20 Mô tả giao diện cập nhật danh mục

1 Tên nhà danh mục Input Nhập tên nhà danh mục

2 Logo Input Nhập đường dẫn logo của danh mục

3 Trạng thái Input Nhập trạng thái của input

4 Cập nhật Button Nhấn để cập nhật thông tin danh mục

Hình 4.37 Giao diện quản lý nhà cung cấp Bảng 4.21 Mô tả giao diện quản lý nhà cung cấp

1 Thêm mới Button Nhấn vào để chuyển sang page thêm mới nhà cung cấp

2 Sửa Icon () Nhấn vào để chuyển sang trang chỉnh sửa thông tin nhà cung cấp

3 Xóa Icon () Nhấn vào để xóa nhà cung cấp

Hình 4.38 Giao diện tạo mới nhà cung cấp Bảng 4.22 Mô tả giao diện tạo mới nhà cung cấp

1 Tên nhà cung cấp Input Nhập vào tên nhà cung cấp

Nhập vào đường dẫn Logo của nhà cung cấp

3 Trạng thái Input Nhập vào trạng thái

4 Thêm mới Button Nhấn vào để thêm mới nhà cung cấp

Hình 4.39 Giao diện cập nhật nhà cung cấp Bảng 4.23 Mô tả giao diện cập nhật nhà cung cấp

1 Tên nhà cung cấp Input Nhập tên nhà cung cấp

2 Logo Input Nhập đường dẫn logo của nhà cung cấp

3 Trạng thái Input Nhập trạng thái của input

4 Cập nhật Button Nhấn để cập nhật thông tin nhà cung cấp

Hình 4.40 Giao diện quản lý sản phẩm Bảng 4.24 Mô tả giao diện quản lý sản phẩm

1 Thêm mới Button Nhấn vào để chuyển sang trang thêm mới sản phẩm

2 Chỉnh sửa Icon () Nhấn vào để chuyển sang trang chỉnh sửa sản phẩm

3 Xóa Icon () Nhấn vào để tiến hàng xóa sản phẩm

Hình 4.41 Giao diện cập nhật sản phẩm Bảng 4.25 Mô tả giao cập nhật sản phẩm

1 Tên sản phẩm Input Nhập vào tên sản phẩm

2 Mã sản phẩm Input Nhập vào mã sản phẩm

3 Giá Input Nhập vào giá của sản phẩm

4 Giá khuyến mãi Input Nhập vào giá khuyến mãi

5 Giảm giá Input Nhập vào giảm giá (%)

6 Mô tả ngắn Input Nhập vào mô tả ngắn của sản phẩm

7 Mô tả Input Nhập vào mô tả chi tiết của sản phẩm

8 Trạng thái Input Nhập vào trạng thái của sản phẩm

9 Ảnh sản phẩm Button Nhấn vào để chọn ảnh cho sản phẩm từ máy tỉnh

10 Loại Input Nhập loại của sản phẩm

11 Category Select box Chọn category cho sản phẩm

12 Sub_category Select box Chọn sub category cho sản phẩm

13 Supplier Select box Chọn nhà cung cấp cho sản phẩm

14 Cập nhật Button Nhấn để tiến hàng cập nhật sản phẩm

Hình 4.42 Giao diện thêm mới thông tin sản phẩm

Bảng 4.26 Mô tả giao thêm mới thông tin sản phẩm

1 Tên sản phẩm Input Nhập vào tên sản phẩm

2 Mã sản phẩm Input Nhập vào mã sản phẩm

3 Giá Input Nhập vào giá của sản phẩm

4 Giá khuyến mãi Input Nhập vào giá khuyến mãi

5 Giảm giá Input Nhập vào giảm giá (%)

6 Mô tả ngắn Input Nhập vào mô tả ngắn của sản phẩm

7 Mô tả Input Nhập vào mô tả chi tiết của sản phẩm

8 Trạng thái Input Nhập vào trạng thái của sản phẩm

9 Ảnh sản phẩm Button Nhấn vào để chọn ảnh cho sản phẩm từ máy tỉnh

10 Loại Input Nhập loại của sản phẩm

11 Category Select box Chọn category cho sản phẩm

12 Sub_category Select box Chọn sub category cho sản phẩm

13 Supplier Select box Chọn nhà cung cấp cho sản phẩm

14 Thêm mới Button Nhấn để tiến hàng thêm mới sản phẩm

Hình 4.43 Giao diện quản lý thông tin website

Bảng 4.27 Mô tả giao diện quản lý thông tin website

1 Số điện thoại Input Nhập vào số điện thoại

2 Địa chỉ Input Nhập vào địa chỉ

3 Email Input Nhập vào địa chỉ email

4 Logo Button Nhấn vào để chọn logo từ máy tính

5 Nhà cung cấp 1 Select box Chọn nhà cung cấp 1 để hiển thị ở trang chủ

9 Cập nhật Button Nhấn vào để cập nhật thông tin website

Hình 4.44 Giao diện quản lý đơn đặt hàng

Bảng 4.28 Mô tả giao diện quản lý đơn đặt hàng

1 Trạng thái của đơn hàng

Button Nhấn vào để xác nhận đơn hàng

2 Trạng thái giao hàng Button Nhấn vào để xác nhận trạng thái giao hàng

3 Chi tiết hóa đơn Icon

Nhấn vào để hiển thị chi tiết hóa đơn

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

Hình 4.46 Giao diện chỉnh sửa slide

Bảng 4.29 Mô tả giao diện chỉnh sửa slide

1 Logo Button Nhấn vào để chọn ảnh slide từ máy tính

Nhấn vào để chỉnh sửa slide

Nhấn vào để xóa slide

Hình 4.47 Giao diện trang chủ

Bảng 4.30 Mô tả giao diện trang chủ

1 Tìm kiếm Input Nhấn vào tên sản phẩm cần tìm kiếm

2 Nút tìm kiếm Button Nhấn vào để xuất ra tên sản phẩm cần tìm kiếm

3 Đăng nhập Nhấn vào để chuyển đến trang đăng nhập

4 Giỏ hàng Icon Nhấn vào để show popup giỏ hàng

5 Trang chủ Nhấn vào để chuyển đến trang chủ

6 Giới thiệu Nhấn vào để chuyển đến trang giới thiệu

7 Sản phẩm Hover vào để hiển thị ra các liên kết đến sản phẩm theo thể loại, theo nhà cung cấp

8 Liên hệ Nhấn vào để chuyển đến trang liên hệ

Nhấn vào để chuyển đến trang hướng dẫn mua hàng

Nhấn vào để chuyển đến trang bảo hành – đổi trả

Nhấn vào để chuyển đến trang nội quy cửa hàng

Nhấn vào để chuyển đến trang giao hàng – lắp đặt

13 Chuyển slide Button Nhấn vào để chuyển qua các sản phẩm tiếp theo

Hình 4.48 Giao diện các danh mục sản phẩm

Hình 4.49 Thêm vào giỏ hàng và xem nhanh sản phẩm Bảng 4.31 Mô tả thêm giỏ hàng và xem nhanh sản phẩm

1 Mua ngay Button Nhấn vào để thêm sản phẩm vào giỏ hàng

Button Nhấn vào để hiển thị popup xem nhanh thông tin sản phẩm

Hình 4.50 Giao diện giỏ hàng

Bảng 4.32 Mô tả giao diện giỏ hàng

1 Giảm Button Nhấn vào để giảm số lượng sản phẩm trong giỏ hàng

2 Tăng Button Nhấn vào để tăng số lượng sản phẩm trong giỏ hàng

Button Nhấn vào để loại bỏ sản phẩm trong giỏ hàng

Hình 4.51 Giao diện xem nhanh một sản phẩm Bảng 4.33 Mô tả giao diện xem nhanh một sản phẩm

Button Nhấn vào để thêm sản phẩm vào giỏ hàng

Hình 4.52 Trang chi tiết sản phẩm

Bảng 4.34 Mô tả trang chi tiết sản phẩm

1 Trang chủ Nhấn vào để chuyển đến trang chủ

2 Category Nhấn vào để chuyển đến trang các sản phẩm thuộc category đó

3 Mua ngay Button Nhấn vào để thêm sản phẩm vào giỏ hàng

Hình 4.53 Trang hiển thị sản phẩm theo category

Bảng 4.35 Mô tả trang hiển thị sản phẩm theo category

1 Danh mục Nhấn vào để hiển thị sản phẩm theo danh mục

Hình 4.54 Trang hiển thị sản phẩm theo supplier

Bảng 4.36 Mô tả trang hiển thị sản phẩm theo supplier

1 Nhà cung cấp

2 Checkbox nhà cung cấp checkbox Click vào checkbox để lọc nhà cung cấp

3 Checkbox giá sản phẩm checkbox Click vào checkbox để lọc giá sản phẩm

Hình 4.55 Trang hiển thị thông tin tài khoản khách hàng

Bảng 4.37 Mô tả trang hiển thị thông tin tài khoản khách hàng

1 Tên khách hàng Hiển thị tên khách hàng

2 Thông tin tài khoản Nhấn vào để hiển thị thông tin khách hàng

3 Họ tên Input Nhập họ tên

4 Địa chỉ Input Nhập địa chỉ

6 Giới tính Checkbox Chọn giới tính

8 Cập nhật Button Nhấn vào để cập nhật

Hình 4.56 Trang hiển thị tất cả hóa đơn

Bảng 4.38 Mô tả trang hiển thị tất cả hóa đơn

1 Quản lý đơn hàng Hiển thị trang quản lý đơn hàng

2 Xem chi tiết Hiển thị modal chi tiết đơn hàng

3 Nhận xét Hiển thị modal nhận xét

Hình 4.57 Trang hiển thị chi tiết đơn hàng

Bảng 4.39 Mô tả trang hiển thị chi tiết đơn hàng

1 Ảnh sản phẩm Hiển thị text ảnh sản phẩm

2 Tên sản phẩm Hiển thị text tên sản phẩm

3 Số lượng Hiển thị text số lượng

4 Giá gốc Hiển thị text giá gốc

5 Giá khuyến mãi Hiển thị text giá khuyến mãi

6 Giá sản phẩm Hiển thị text giá sản phẩm

Bảng 4.40 Mô tả khung tìm kiếm

1 Khung tìm kiếm input Nhâp thông tin cần tìm kiếm

CÀI ĐẶT VÀ KIỂM THỬ

Cài đặt

Trong quá trình xây dựng đề tài, nhóm đã sử dụng các phần mềm hỗ trợ sau:

• Sử dụng Visual Studio Code v1.4.2 để viết code

• Sử dụng mongoose v5.7.14 để tạo cơ sở dữ liệu

• Sử dụng trang web draw.io để vẽ các sơ đồ UML, sequense, erd

- Bước 1: Cài đặt node.js tại trang chủ https://nodejs.org/en/download/

- Bước 2: Cài đặt git tại trang chủ https://git-scm.com/download/win

- Bước 3: Cài đặt MongoDB tại trang chủ https://www.mongodb.com/download- center/community

- Bước 4: Truy cập địa chỉ https://github.com/LanhNguyen97/DATN-

- Bước 5: Mở CommandLine lên và gõ dòng lệnh sau để clone source code Backend và FontEnd về máy git clone https://github.com/LanhNguyen97/DATN-WebsiteBanDoDienTu.git

Cài đặt chương trình BackEnd:

- Bước 1: Truy cập vào folder DATN-WebsiteBanDoDienTu → back-end

- Bước 2: Mở Mở CommandLine và chạy lệnh npm install để cài các gói package cần thiết cho chương trình

- Bước 3: Sau khi đã cài đặt các gói package thành công Ta chạy lệnh: npm run dev để chạy chương trình Backend

- Bước 4: Truy cập địa chỉ sau http://localhost:8088/

Cài đặt chương trình FrontEnd:

- Bước 1: Truy cập vào folder DATN-WebsiteBanDoDienTu → front-end

- Bước 2: Mở CommandLine và chạy lệnh npm install để cài các gói package cần thiết cho chương trình

- Bước 3: Sau khi đã cài đặt các gói package thành công Ta chạy lệnh: yarn run dev để chạy chương trình FrontEnd

- Bước 4: Truy cập địa chỉ sau http://localhost:8080/

Hình 5.2 Cấu trúc của FrontEnd

Hình 5.2 Cấu trúc của Backend

Kiểm thử

Các chức năng được kiểm thử:

Bảng 5.1 Kiểm thử sản phẩm

Chức năng Mô tả chi tiết Kết quả

Kiểm tra đơn hàng Click vào nút thông tin đơn hàng để kiểm tra đơn hàng

OK 15/06/2020 Kiểm tra xem có đơn hàng nào chưa được xác nhận hay không

Mua hàng Click vào mua sản phẩm và sản phẩm sẽ hiển thị ở giỏ hàng

OK 15/06/2020 Kiểm tra thông tin sản phẩm có chính xác hay không và chức năng tăng giảm số lượng sản phẩm hoạt động đúng hay không

Thêm sản phẩm Nhập tất cả thông tin của sản phẩm đó chính xác

Để xóa sản phẩm, hãy nhấn nút "Delete" và xác nhận bằng cách chọn "OK" Vào ngày 15/06/2020, bạn cần đặt hàng bằng cách nhập đầy đủ thông tin yêu cầu vào form đặt hàng và kiểm tra lại các sản phẩm đã đặt trước đó.

OK 15/06/2020 Cần phải làm đúng thủ tục

Thêm sửa xóa trang quản trị admin

Các sản phẩm, khách hàng, nhân viên, danh mục, nhà cung cấp đều phải thêm sửa hoặc xóa được

Tìm kiếm sản phẩm Nhập tên sản phẩm cần tìm kiếm ở trang admin và client

Hiển thị popup xem nhanh thông tin sản phẩm

Nhấn nút xem nhanh khi hover mỗi sản phẩm

Trang quản lý thông tin người dùng

Sau khi người dùng đăng nhập sẽ được chuyển tới trang thông tin chi tiết về người dùng đó

Người dùng có thể cập nhật lại thông tin đó

Trang hiển thị các đơn hàng của người dùng

Sau khi đăng nhập, người dùng có thể truy cập thông tin chi tiết về đơn hàng đã đặt trước đó, bao gồm cả các bình luận liên quan đến đơn hàng.

Chức năng lọc theo giá và nhà cung cấp

Tại các trang hiển thị sản phẩm theo nhà cung cấp hoặc theo category(loại), người dùng có thể lọc theo các tiêu chí có sẵn

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

Tiêu đề	Tìm Hiểu ExpressJs, NextJs Và Phát Triển Website Bán Đồ Điện Tử
Tác giả	Nguyễn Văn Lành, Lê Mạnh Hùng
Người hướng dẫn	TS. Lê Văn Vinh
Trường học	Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Đồ Án Tốt Nghiệp
Năm xuất bản	2020
Thành phố	Tp. Hồ Chí Minh

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